:root {
    --bulma-primary-h: 209deg;
    --bulma-primary-s: 100%;
    --bulma-primary-l: 30%;

    --bulma-primary-invert: #000000;

    --bulma-link-h: 211deg;
    --bulma-link-s: 48%;
    --bulma-link-l: 44%;

    --bulma-info-h: 0deg;
    --bulma-info-s: 0%;
    --bulma-info-l: 92%;

    --bulma-success-h: 177deg;
    --bulma-success-s: 79%;
    --bulma-success-l: 43%;

    --bulma-warning-h: 24deg;
    --bulma-warning-s: 100%;
    --bulma-warning-l: 50%;

    --bulma-danger-h: 0deg;
    --bulma-danger-s: 86%;
    --bulma-danger-l: 42%;

    --bulma-family-primary: Source Code Pro,SF Pro,Segoe UI,Roboto,Oxygen,Ubuntu,Helvetica Neue,Helvetica,Arial,sans-serif;
    --bulma-family-secondary: Source Code Pro,SF Pro,Segoe UI,Roboto,Oxygen,Ubuntu,Helvetica Neue,Helvetica,Arial,sans-serif;
    --bulma-family-code: Source Code Pro,Hack,SF Mono,Roboto Mono,Source Code Pro,Ubuntu Mono,monospace;
    ::-webkit-scrollbar{height:10px;width:10px}::-webkit-scrollbar-track{background:#efefef;border-radius:6px}::-webkit-scrollbar-thumb{background:#d5d5d5;border-radius:6px}::-webkit-scrollbar-thumb:hover{background:#c4c4c4};

    --fc-button-bg-color: var(--bulma-info);
    --fc-button-border-color: var(--bulma-info);
    --fc-button-active-bg-color: var(--bulma-primary);
    --fc-button-active-border-color: var(--bulma-primary);
    --fc-button-hover-bg-color: var(--bulma-link);
    --fc-button-hover-border-color: var(--bulma-link);
    --fc-button-text-color: var(--bulma-primary-invert);

    --fc-today-bg-color: var(--bulma-info);

    --calendar-header-background-color: var(--bulma-primary);


    --icon-size: 3rem;
    --line-height: 5px;
    --active-color: hsl(209, 100%, 30%);
    --completed-color: hsl(117, 79%, 43%);
    --inactive-color: hsl(0, 0%, 75%);
}

html,body {
  background: hsl(0, 0%, 75%);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

/* source-code-pro-latin-wght-normal */
@font-face {
  font-family: 'Source Code Pro Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/source-code-pro:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

.hero-body .container {
  max-width: 700px;
}

.breadcrumb {
  --bulma-breadcrumb-item-color: hsl(0, 0%, 21%);
  --bulma-breadcrumb-item-active-color: hsl(0, 0%, 21%);
  --bulma-breadcrumb-item-separator-color: hsl(0, 0%, 21%);
}

.pagination {
    --bulma-pagination-selected-item-h: var(--bulma-primary-h);
    --bulma-pagination-selected-item-s: var(--bulma-primary-s);
    --bulma-pagination-selected-item-l: var(--bulma-primary-l);
}

.navbar {
    --bulma-navbar-item-color: hsl(0, 0%, 100%);
}

.table {
    --bulma-table-head-background-color: hsl(0, 0%, 68%);
    --bulma-table-striped-row-even-background-color: hsl(0, 0%, 96%);
}

.menu {
  --bulma-menu-item-background-l: 100%;
  --bulma-menu-item-background-l-delta: 90%;
}

.menu-list .menu-item, .menu-list a, .menu-list button {
  background: none;
}

.datetimepicker.is-datetimepicker-default .datetimepicker-container {
    display: inline-flex;
    flex-direction: column-reverse;
    min-width: 250px;
}

.datetimepicker .datetimepicker-header .datetimepicker-selection-end .datetimepicker-selection-day, .datetimepicker .datetimepicker-header .datetimepicker-selection-start .datetimepicker-selection-day {
    flex: 0;
    text-transform: capitalize;
    font-size: 2rem;
    line-height: 2.5rem;
    margin-right: .5rem;
    color: var(--bulma-primary);
    font-weight:100
}

.datetimepicker .datepicker-nav {
    background: var(--bulma-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5em;
    flex-direction:row
}

.datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-today {
    background: 0 0;
    border: .1rem dotted var(--bulma-primary);
    color:var(--bulma-primary)
}

.datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-active {
    background: var(--bulma-primary);
    border-color: var(--bulma-primary);
    border-radius: 25091983px;
    color:#fff
}

.datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-highlighted {
    border:.1rem solid var(--bulma-primary)
}

.datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item:hover {
    background: #fff;
    border: .1rem solid var(--bulma-primary);
    color: rgba(0, 0, 0, .7);
    text-decoration:none
}

.datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range {
    position: relative;
    background: var(--bulma-primary);
    z-index:1
}

.datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-end .date-item, .datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-start .date-item {
    background: #fff;
    border: .1rem solid var(--bulma-primary);
    color: var(--bulma-primary);
    box-shadow:0 .2rem .2rem rgba(10, 10, 10, .1)
}


.datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item {
    background-color: var(--bulma-primary);
    color:#fff
}

.datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range-start.datepicker-range-end .date-item.is-today {
    color:var(--bulma-primary) !important
}

.datetimepicker .datepicker-body .datepicker-months .datepicker-month.is-active, .datetimepicker .datepicker-body .datepicker-months .datepicker-year.is-active, .datetimepicker .datepicker-body .datepicker-years .datepicker-month.is-active, .datetimepicker .datepicker-body .datepicker-years .datepicker-year.is-active {
    background: var(--bulma-primary);
    border-color: var(--bulma-primary);
    color:#fff
}

.datetimepicker .datepicker-body .datepicker-months .datepicker-month:hover, .datetimepicker .datepicker-body .datepicker-months .datepicker-year:hover, .datetimepicker .datepicker-body .datepicker-years .datepicker-month:hover, .datetimepicker .datepicker-body .datepicker-years .datepicker-year:hover {
    cursor: pointer;
    background: #fff;
    border: .1rem solid var(--bulma-primary);
    color:rgba(0, 0, 0, .7)
}

.datetimepicker.is-large .datepicker-event.is-primary {
    background-color:var(--bulma-primary)
}

.datetimepicker .timepicker .timepicker-end .timepicker-hours .timepicker-input, .datetimepicker .timepicker .timepicker-end .timepicker-minutes .timepicker-input, .datetimepicker .timepicker .timepicker-start .timepicker-hours .timepicker-input, .datetimepicker .timepicker .timepicker-start .timepicker-minutes .timepicker-input {
    position: relative;
    color: var(--bulma-primary);
    text-align: center;
    overflow: hidden;
    font-size: 2rem;
    font-weight:400
}

.datetimepicker .timepicker .timepicker-time-divider {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    color:var(--bulma-primary)
}

.datetimepicker.is-primary .timepicker-input, .datetimepicker.is-primary .timepicker-input-number, .datetimepicker.is-primary .timepicker-time-divider {
    color:var(--bulma-primary) !important
}

.datetimepicker.is-primary .datetimepicker-header .datetimepicker-selection-day {
    color:var(--bulma-primary)
}

.datetimepicker.is-primary .datepicker-nav {
    background:var(--bulma-primary)
}

.datetimepicker.is-primary .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-active {
    background: var(--bulma-primary);
    border-color:var(--bulma-primary)
}

.datetimepicker.is-primary .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-today {
    border-color: var(--bulma-primary);
    color:var(--bulma-primary)
}

.datetimepicker.is-primary .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item:hover {
    border-color:var(--bulma-primary)
}

.datetimepicker.is-primary .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range, .datetimepicker.is-primary .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range::before, .datetimepicker.is-primary .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range:before {
    background:var(--bulma-primary)
}

.datetimepicker.is-primary .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item {
    background-color:var(--bulma-primary)
}

.datetimepicker.is-primary .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-end .date-item, .datetimepicker.is-primary .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-start .date-item {
    border-color: var(--bulma-primary);
    color:#fff
}

.datetimepicker-dummy .datetimepicker-clear-button {
    background: 0 0;
    border: 0;
    color: var(--bulma-primary);
    cursor: pointer;
    font-weight: 400;
    outline: 0;
    transform: rotate(45deg);
    font-size: 1.5rem;
    height: 1.75rem;
    margin: .4rem .2rem 0 0;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
    width:1.75rem
}

.datetimepicker-dummy.is-primary .datetimepicker-dummy-wrapper::before, .datetimepicker-dummy.is-primary .datetimepicker-dummy-wrapper:before, .datetimepicker-dummy.is-primary::before, .datetimepicker-dummy.is-primary:before {
    background-color:var(--bulma-primary)
}

.datetimepicker-dummy.is-primary .datetimepicker-dummy-wrapper.is-active, .datetimepicker-dummy.is-primary .datetimepicker-dummy-wrapper.is-focused, .datetimepicker-dummy.is-primary .datetimepicker-dummy-wrapper:active, .datetimepicker-dummy.is-primary .datetimepicker-dummy-wrapper:focus {
    border-color: var(--bulma-primary);
    box-shadow:inset 0 .0625em .125em hsla(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-invert-l), .05)
}

.datetimepicker-dummy.is-primary .datetimepicker-clear-button {
    color:var(--bulma-primary)
}

.ribbon.is-primary:not(.is-outlined) {
    background-color: var(--bulma-primary);
    border-color: transparent;
    color:#fff !important
}

.ribbon.is-primary.is-outlined {
    background-color: transparent;
    border-color: var(--bulma-primary);
}

.ribbon.is-success:not(.is-outlined) {
    background-color: var(--bulma-success);
    border-color: transparent;
    color:#fff !important;
}

.ribbon.is-success.is-outlined {
    background-color: transparent;
    border-color: var(--bulma-success);
}

input[type=range].slider.is-primary::-moz-range-track {
    background: var(--bulma-primary) !important;
}

input[type=range].slider.is-primary::-webkit-slider-runnable-track {
    background:var(--bulma-primary) !important;
}

input[type=range].slider.is-primary::-ms-track {
    background:var(--bulma-primary) !important;
}

input[type=range].slider.is-primary::-ms-fill-lower {
    background:var(--bulma-primary);
}

input[type=range].slider.is-primary::-ms-fill-upper {
    background:var(--bulma-primary);
}

input[type=range].slider.is-primary .has-output-tooltip + output, input[type=range].slider.is-primary.has-output + output {
    background-color: var(--bulma-primary);
    color:#fff;
}

.fuel-sum{
    border-bottom: 3px solid #000000;
}

.fuel-line {
    border-bottom: 1px solid var(--bulma-grey);
}


.divider.is-primary:after, .divider.is-primary:before {
    background-color: var(--bulma-primary);
}

.divider.is-primary.is-light:after, .divider.is-primary.is-light:before {
    background-color: var(--bulma-primary);
}


.image.leaflet-container {
    border-top-left-radius: var(--bulma-card-radius);
    border-top-right-radius: var(--bulma-card-radius);
    isolation: isolate;
}

.table {
  border-collapse: separate;
  border-spacing: 0 0.3rem;
}

.table thead {
  background: none;
  border: none;
}

.table thead tr,
.table thead th {
  border-top: none;
  border-bottom: none !important;
  letter-spacing: 0.1rem;
}

.table tbody tr th,
.table tbody tr td {
  background: hsl(0, 0%, 96%);
  border: none;
}

.table tbody tr th:first-child,
.table tbody tr td:first-child {
    border-top-left-radius: 0.75rem;
    border-bottom-left-radius: 0.75rem;
    shadow: 0 0.5em 1em -0.125em hsla(221deg,14%,4%,0.1),0 0px 0 1px hsla(221deg,14%,4%,0.02);
}
.table tbody tr th:last-child,
.table tbody tr td:last-child {
    border-top-right-radius: 0.75rem;
    border-bottom-right-radius: 0.75rem;
    shadow: 0 0.5em 1em -0.125em hsla(221deg,14%,4%,0.1),0 0px 0 1px hsla(221deg,14%,4%,0.02);
}

.switch[type=checkbox]:checked + label::before, .switch[type=checkbox]:checked + label:before {
    background: var(--bulma-primary);
}
.switch[type=checkbox].is-outlined:checked + label::before, .switch[type=checkbox].is-outlined:checked + label:before {
    background-color: transparent;
    border-color: var(--bulma-primary);
}

.switch[type=checkbox].is-outlined:checked + label::after, .switch[type=checkbox].is-outlined:checked + label:after {
    background: var(--bulma-primary);
}

.switch[type=checkbox].is-small:checked + label::before, .switch[type=checkbox].is-small:checked + label:before {
    background: var(--bulma-primary);
}

.switch[type=checkbox].is-small.is-outlined:checked + label::before, .switch[type=checkbox].is-small.is-outlined:checked + label:before {
    border-color: var(--bulma-primary);
}

.switch[type=checkbox].is-small.is-outlined:checked + label::after, .switch[type=checkbox].is-small.is-outlined:checked + label:after {
    background: var(--bulma-primary);
}

.switch[type=checkbox].is-primary.is-outlined:checked + label::before, .switch[type=checkbox].is-primary.is-outlined:checked + label:before {
    background-color: transparent;
    border-color: var(--bulma-primary) !important;
}

.switch[type=checkbox].is-primary.is-outlined:checked + label::after, .switch[type=checkbox].is-primary.is-outlined:checked + label:after {
    background: var(--bulma-primary);
}

.switch[type=checkbox].is-unchecked-primary + label::before, .switch[type=checkbox].is-unchecked-primary + label:before {
    background: var(--bulma-primary);
}

.switch[type=checkbox].is-unchecked-primary.is-outlined + label::before, .switch[type=checkbox].is-unchecked-primary.is-outlined + label:before {
    background-color: transparent;
    border-color: var(--bulma-primary) !important;
}

.switch[type=checkbox].is-unchecked-primary.is-outlined + label::after, .switch[type=checkbox].is-unchecked-primary.is-outlined + label:after {
    background: var(--bulma-primary);
}

.switch[type=checkbox]:checked + label::before, .switch[type=checkbox]:checked + label:before {
    background: var(--bulma-primary);
}

.switch[type=checkbox].is-outlined:checked + label::before, .switch[type=checkbox].is-outlined:checked + label:before {
    background-color: transparent;
    border-color: var(--bulma-primary);
}

.switch[type=checkbox].is-outlined:checked + label::after, .switch[type=checkbox].is-outlined:checked + label:after {
    background: var(--bulma-primary);
}

span[data-tooltip] {
    border-bottom: none;
}

.progress-container {
    position: relative;
    padding: 3rem 2rem;
    margin: 2rem auto;
    max-width: 800px;
}

.progress-background {
    background-color: #f5f5f5;
    border-radius: 1px;
    padding: 2rem;
    position: relative;
}

.progress-steps {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    margin-bottom: 3rem;
}

.progress-track {
    position: absolute;
    top: calc(var(--icon-size) / 2);
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - var(--icon-size));
    height: var(--line-height);
    background-color: var(--inactive-color);
    z-index: 1;
}

.progress-bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: var(--active-color);
    transition: width 0.3s ease;
}

.steps-container {
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 100%;
    z-index: 2;
}

.step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: var(--icon-size);
}

.step-icon {
    width: var(--icon-size);
    height: var(--icon-size);
    background-color: white;
    border: 2px solid var(--inactive-color);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    margin-bottom: 0.75rem;
}

.step-icon i {
    font-size: calc(var(--icon-size) / 2);
}

.step.active .step-icon {
    background-color: var(--active-color);
    border-color: var(--active-color);
    color: white;
    box-shadow: 0 0 0 4px rgba(72, 95, 199, 0.2);
}

.step.completed .step-icon {
    background-color: var(--completed-color);
    border-color: var(--completed-color);
    color: white;
}

.step-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #363636;
    text-align: center;
    position: absolute;
    bottom: -2rem;
    width: max-content;
    left: 50%;
    transform: translateX(-50%);
}

@media screen and (max-width: 768px) {
    :root {
        --icon-size: 2.5rem;
    }

    .step-label {
        font-size: 0.75rem;
    }

    .progress-container {
        padding: 1rem;
    }

    .progress-background {
        padding: 1.5rem 1rem;
    }
}
