* {
    --mud-palette-primary: #0075FF;
    --mud-palette-primary-darken: #0075FF;
    --mud-palette-appbar-background: #0075FF;
    --mud-typography-body1-family: 'Inter', 'Inter', 'Helvetica', 'Arial', 'sans-serif';
    --mud-typography-body2-family: 'Inter', 'Inter', 'Helvetica', 'Arial', 'sans-serif';
    --mud-typography-button-family: 'Inter', 'Inter', 'Helvetica', 'Arial', 'sans-serif';
    --mud-typography-h1-family: 'Inter', 'Inter', 'Helvetica', 'Arial', 'sans-serif';
    --mud-typography-h2-family: 'Inter', 'Inter', 'Helvetica', 'Arial', 'sans-serif';
    --mud-typography-h3-family: 'Inter', 'Inter', 'Helvetica', 'Arial', 'sans-serif';
    --mud-typography-h4-family: 'Inter', 'Inter', 'Helvetica', 'Arial', 'sans-serif';
    --mud-typography-h5-family: 'Inter', 'Inter', 'Helvetica', 'Arial', 'sans-serif';
    --mud-typography-h6-family: 'Inter', 'Inter', 'Helvetica', 'Arial', 'sans-serif';
    --mud-drawer-width-mini-left: 71px;
    --mud-drawer-width-left: 293px;
    --color-actual: #1b54ff;
    --color-planned: white; 
    --timeline-bg-color: #BBD3E1;
    --timeline-thumb-color: #03A9F4;
    --mud-zindex-snackbar: 5001;
}

html, body {
    height: 100%;
    overflow: hidden;
    font-family: var(--mud-typography-button-family);
    font-size: 14px;
}

.mud-appbar.mud-appbar-fixed-top {
    background-color: #fff;
}

@media (min-width: 600px) {
    .sp-top-bar .mud-toolbar-gutters {
        padding-left: 0px;
        padding-right: 0px;
    }
}

.text-right {
    text-align: right;
}

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.required-field {
    color: #C62828;
    font-size: 12px;
    line-height: 12px
}

.required-color {
    color: #C62828;
}

.error-msg {
    color: #EA2E2E;
    font-size: 12px;
    line-height: 16px;
}

.authentication-helper-link {
    color: #93949C !important;
    font-size: 14px;
}

.mud-input {
    height: 32px !important;
}

    .mud-input > input.mud-input-root-outlined, div.mud-input-slot.mud-input-root-outlined {
        padding: 12px !important;
    }

.mud-input-control > .mud-input-control-input-container > .mud-input-label-outlined.mud-input-label-inputcontrol {
    top: -4px;
}

.mud-input-label-outlined {
    transform: translate(12px, 12px) scale(1);
}

.sp-top-bar {
}

    .sp-top-bar .mud-toolbar-gutters {
        padding-left: 0px;
        padding-right: 0px;
    }

    .sp-top-bar .mud-link.sp-logo {
        width: 74px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0px;
    }

    .sp-top-bar .mud-link {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 14px 12px;
        text-decoration: none;
        text-transform: none;
    }

        .sp-top-bar .mud-link:hover {
            text-decoration: none;
        }

        .sp-top-bar .mud-link.active {
            border-bottom: 2px solid var(--mud-palette-primary);
            color: var(--mud-palette-primary);
        }

        .sp-top-bar .mud-link svg, .sp-top-bar .mud-link .mud-typography {
            font-size: 14px;
        }

        .sp-top-bar .mud-link .mud-typography {
            padding-left: 5px;
        }

.h-100 {
    height: 100%;
}

.sp-drawer .mud-nav-item .mud-nav-link {
    justify-content: center !important;
}

    .sp-drawer .mud-nav-item .mud-nav-link svg {
        font-size: 18px;
    }

    .sp-drawer .mud-nav-item .mud-nav-link .mud-nav-link-text {
        font-size: 14px;
    }

.sp-drawer.mud-drawer {
    background-color: #fff;
}

    .sp-drawer.mud-drawer .mud-nav-link {
        background-color: #fff !important;
    }

.login-form {
    width: 400px;
    background: none;
    box-shadow: none !important;
}

.change-password-form {
    width: 500px;
}

/*Button*/
.mud-button-filled-primary {
    background-color: #263BDA !important;
}

.mud-button {
    text-transform: none;
    padding: 5px 10px !important;
    min-height: 31px !important;
}

.mud-button-outlined-size-small, .mud-button-filled-size-small, .mud-button-text-size-small {
    height: 32px;
}

/*button icon*/
.mud-button-outlined-default {
    border-radius: 4px;
    border: 1px solid #DBDBDE;
    display: flex;
    width: 32px;
    height: 32px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.mud-icon-button:hover {
    background: none !important;
}

h3 {
    font-family: 'Inter';
    font-size: 16px;
}

.mud-dialog-actions {
    float: left;
}
/*Table*/
.mud-table {
    margin-top: 12px;
    margin-left: 12px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.mud-table-head {
    background-color: #F5F6F6;
    font-size: 14px;
    font-family: 'Inter';
    color: #232535 !important;
}

.mud-table-root {
    border-bottom: 1px solid #DBDBDE;
}

th.mud-table-cell {
    background-color: #F5F6F6 !important;
    font-size: 12px;
    height: 24px;
    line-height: 14px;
    font-weight: 500;
    color: #232535 !important;
    white-space: nowrap;
    padding: 0px 8px !important;
}

    th.mud-table-cell span {
        font-size: 12px;
        line-height: 14px;
    }

td.mud-table-cell {
    height: 24px;
    align-items: center;
    line-height: 14px;
    font-size: 12px;
    padding: 0px 8px !important;
}

    td.mud-table-cell span, td.mud-table-cell a div {
        font-size: 12px;
        line-height: 14px;
    }

    td.mud-table-cell.table-cell-actions {
        padding: 0px 8px !important;
    }

    td.mud-table-cell.table-cell-action-more {
        padding: 0px 8px !important;
    }

    td.mud-table-cell .table-cell-actions-wrap {
        padding: 4px;
        border-radius: 4px;
        border: 1px solid #DBDBDE;
        width: 32px;
        height: 32px
    }

    td.mud-table-cell .mud-icon-root {
    }

    td.mud-table-cell .voyage-name {
        font-size: 12px;
    }

    td.mud-table-cell .mud-table-input {
        width: 100px;
        border-bottom: 1px solid #aaa;
        background-color: transparent;
        outline-style: none;
    }

.pd-t-l-12 {
    padding-top: 12px !important;
    padding-left: 12px !important;
}

/*Mud menu*/
.mud-menu:hover, .mud-menu .mud-button:hover {
    background-color: transparent !important;
}

/*Dialog*/
.mud-dialog .mud-dialog-title {
    z-index: 1;
    flex: 0 0 auto;
    margin: 0;
    padding: 12px 16px;
    border-top-left-radius: var(--mud-default-borderradius);
    border-top-right-radius: var(--mud-default-borderradius);
    font-size: 18px;
    font-weight: 500;
}

.mud-dialog .mud-dialog-content {
    padding: 12px 16px;
    border-top: 1px solid #DBDBDE;
    border-bottom: 1px solid #DBDBDE;
}

.mud-dialog .mud-dialog-actions {
    flex: 0 0 auto;
    display: flex;
    padding: 12px 16px;
    align-items: start;
    justify-content: flex-start;
    border-bottom-left-radius: var(--mud-default-borderradius);
    border-bottom-right-radius: var(--mud-default-borderradius);
}

span {
    font-family: 'Inter';
    font-size: 14px;
}

/*mud input*/
.mud-input > input.mud-input-root-outlined.mud-input-root-adorned-end, div.mud-input-slot.mud-input-root-outlined.mud-input-root-adorned-end {
    padding-right: 0;
    padding-inline-end: 0;
    padding-inline-start: 14px;
    font-family: 'Inter';
    font-size: 14px;
}

.mud-input > input.mud-input-root-outlined.mud-input-root-margin-dense, div.mud-input-slot.mud-input-root-outlined.mud-input-root-margin-dense {
    padding-top: 10.5px;
    padding-bottom: 10.5px;
    font-family: 'Inter';
    font-size: 14px;
}

.mud-input > input.mud-input-root.mud-input-root-filled.mud-input-root-margin-dense, div.mud-input-slot.mud-input-root.mud-input-root-filled.mud-input-root-margin-dense {
    padding-top: 10.5px;
    padding-bottom: 10.5px;
    font-family: 'Inter';
    font-size: 14px;
}

.mud-input-margin-dense {
    height: 32px; /* height for search box */
}

/*Mud button*/
.mud-button {
    min-width: 105px;
}

/*Dialog*/
.mud-dialog-title {
    color: var(--text-text-primary, #232535);
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 125% */
    letter-spacing: 0.3px;
    height: 40px;
}

.mud-dialog .mud-dialog-actions > :not(:first-child) {
    margin-left: 12px;
    margin-inline-start: 16px;
    margin-inline-end: unset;
}

.mud-dialog .mud-dialog-title .mud-button-close {
    top: 0px;
    right: 0px;
}

.mud-dialog-title h3 {
    color: var(--text-text-primary, #232535);
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 0.3px;
}

div.mud-popover-open:has(> div.mud-list.mud-list-padding) {
    box-shadow: none;
}

/*Mud list & Mud list item*/
.mud-list.mud-list-padding {
    padding: 0;
    border-radius: 6px;
    border: 1px solid var(--border-border-minimal, #DBDBDE);
    background: var(--surface-surface-primary, #FFF);
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.12);
}

.mud-popover.mud-popover-open .mud-list .mud-list-item {
    height: 37px !important;
}

    .mud-popover.mud-popover-open .mud-list .mud-list-item .mud-list-item-text {
        white-space: pre !important;
    }

.mud-list-item {
    padding-left: 8px;
    font-size: 14px;
}

    .mud-list-item.mud-list-item-disabled .mud-list-item-icon > svg > * > path {
        fill: var(--mud-palette-action-disabled) !important;
    }

.mud-list-item-text {
    white-space: nowrap;
}

.create-route-dialog .mud-list-item-text {
    white-space: normal;
}

.mud-list-item-clickable:hover {
    background-color: #E6F1FF !important;
}

.mud-list-item.mud-list-item-dense {
    border-bottom: 1px solid #DBDBDE;
}

.mud-list-item-icon {
    min-width: 16px;
    padding: 8px;
}

.mud-list-item-icon-img-svg {
    width: 32px;
    height: 32px;
}
    .mud-list-item-icon-img-16 {
        width: 16px;
        height: 16px;
    }

.mud-svg-icon.mud-icon-size-small {
    font-size: 16px;
}

/*nav link*/
.mud-navmenu.mud-navmenu-default {
    padding-left: 16px !important;
    padding-right: 16px !important;
}

.mud-nav-link.active > svg * {
    color: #0075FF !important;
}

.mud-nav-link:hover {
    color: #0075FF !important;
}

.mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled):not(.mud-nav-link-disabled) {
    background-color: #E6F1FF !important;
    border-radius: 6px;
}

.mud-navmenu.mud-navmenu-default .mud-nav-link:not(.mud-nav-link-disabled):hover:not(.mud-nav-link-disabled) {
    background-color: #E6F1FF !important;
    border-radius: 6px;
}

.mud-nav-link > svg *:hover {
    color: #0075FF !important;
}

.mud-navmenu.mud-navmenu-default .mud-nav-link:not(.mud-nav-link-disabled):hover:not(.mud-nav-link-disabled) > svg * {
    color: #0075FF !important;
}

/*Map*/
.coordinates-box {
    position: absolute !important;
    border-radius: 8px;
    background-color: white;
    padding: 5px;
    z-index: 1000;
    font-family: 'Inter';
    font-size: 12px;
    text-align: center;
    bottom: 20px;
    right: 28px;
    white-space: nowrap;
    box-shadow: var(--mud-elevation-1) !important;
}

.leaflet-tooltip {
    white-space: pre !important; /* #6095 */
}

.leaflet-control-playback {
    width: 81vw;
    height: 44px;
    margin: 0px !important;
    padding: 0px !important;
    border: 1px solid var(--border-border-minimal, #DBDBDE);
    background: var(--surface-surface-primary, #FFF) !important;
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.12);
}

    .leaflet-control-playback .buttonContainer {
        width: 100%;
    }

    .leaflet-control-playback .slider-container {
        width: 100%;
        padding-top: 7px;
    }

        .leaflet-control-playback .slider-container .time-slider {
            width: 100%;
        }

    .leaflet-control-playback .buttonContainer {
        display: inline-flex;
    }

.info-cur-time {
    text-align: center;
    background: #03a9f4;
    color: #fff;
    font-size: 12px;
    display: block;
    position: absolute;
    transform: translate(-50%, 0);
    border-radius: 6px;
    top: -12px;
    padding-left: 5px;
    padding-right: 5px;
    white-space: nowrap;
}

.info-min-time {
    font-size: 12px;
    display: block;
    position: absolute;
    top: 22px;
}

.info-now-time {
    font-size: 12px;
    display: block;
    position: absolute;
    top: 22px;
}

.info-max-time {
    font-size: 12px;
    display: block;
    position: absolute;
    right: 32px;
    top: 22px;
}

.info-cur-speed {
    position: absolute;
    left: 38px;
    top: 27px;
}
/* leaflet zoomslider */
.leaflet-control-zoomslider {
    bottom: 20px !important;
    right: 0 !important;
    border: none !important;
}


[class^="leaflet-pane leaflet-navigation"] {
    z-index: 410 !important; /* navigational area panes */
}

.leaflet-navigation-hurricane-pane {
    z-index: 420 !important; /* hurricane pane must stay on top of other navigational area panes (410) */
}

.leaflet-overlay-routes-pane {
    z-index: 450 !important; /* actual sailing & passage route stay on top of inventory (430, 440) and below ports */
}

.leaflet-overlay-ports-pane {
    z-index: 460 !important; /* port marker must stay on top of route (450) and below green vessel marker (470) */
}

.leaflet-overlay-vessels-pane {
    z-index: 470 !important; /* green vessel marker must stay on top of ports (460) and below selected vessel marker (701) */
}

.leaflet-marker-pane svg {
    z-index: 700 !important; /*marker cluster z-index varies around 600-650 */
}

.leaflet-chosen-tracker {
    z-index: 701 !important; /*marker cluster z-index varies around 600-650, should be higher than z-index of green vessel marker */
    pointer-events: none;
}

.create-route-dialog .mud-dialog-content {
    height: 70vh;
    overflow: auto;
}

.create-route-dialog .mud-expand-panel.mud-expand-panel-border {
    border: 1px solid var(--mud-palette-lines-default);
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.create-route-dialog .mud-expand-panel-header {
    padding: 8px 12px !important;
    width: 100%;
    height: 21px;
    min-height: 37px;
}

    .create-route-dialog .mud-expand-panel-header .mud-icon-size-medium {
        font-size: 20px !important;
    }

    .create-route-dialog .mud-expand-panel-header .route-creation-type {
        flex-shrink: 0;
        flex-grow: 1;
        margin-right: 0;
    }

.create-route-dialog.hide-dialog-actions .mud-dialog-actions {
    display: none;
}
/* Auto complete */
.autocomplete-with-delete .mud-input-adornment-end {
    padding: 20px 0 21px 0;
}

.autocomplete-with-delete .mud-input.mud-input-outlined.mud-input-adorned-end .mud-input-outlined-border {
    border-bottom-right-radius: 0px !important;
    border-top-right-radius: 0px !important;
}

.autocomplete-with-delete .with-delete .mud-input.mud-input-outlined.mud-input-adorned-end .mud-input-outlined-border {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 4px !important;
    border-top-right-radius: 4px !important;
}

.autocomplete-with-delete .with-delete .mud-input-outlined.mud-input-adorned-end {
    padding: 0 12px !important;
}

/* Easy Button */
.easy-button-container {
    border: 0px none !important;
    box-shadow: var(--mud-elevation-1) !important
}

.leaflet-bar button,
.leaflet-bar button:hover {
    background-color: #fff;
    border: none;
    border-bottom: 1px solid #ccc;
    width: 26px;
    height: 26px;
    line-height: 26px;
    display: block;
    text-align: center;
    text-decoration: none;
    color: black;
}

.leaflet-bar button {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    overflow: hidden;
    display: block;
}

    .leaflet-bar button:hover {
        background-color: #f4f4f4;
    }

    .leaflet-bar button:first-of-type {
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }

    .leaflet-bar button:last-of-type {
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        border-bottom: none;
    }

    .leaflet-bar.disabled,
    .leaflet-bar button.disabled {
        cursor: default;
        pointer-events: none;
        opacity: .4;
    }

.easy-button-button {
    background-color: #fff;
}

    .easy-button-button .button-state {
        display: block;
        width: 100%;
        height: 100%;
        position: relative;
    }

        .easy-button-button .button-state .svg {
            float: left;
        }

    .easy-button-button.disabled {
        display: none;
    }

    .easy-button-button.enabled {
        display: block;
    }

.leaflet-touch .leaflet-bar button {
    width: 30px;
    height: 30px;
    line-height: 30px;
}

.leaflet-interactive:focus {
    outline: none;
}

.leaflet-control-playback.leaflet-control {
    width: 100%;
}

.leaflet-bottom.leaflet-left.customized {
    width: 100%;
    height: 44px;
}

.leaflet-bottom.leaflet-left {
    width: 100% !important;
}

.leaflet-bottom.leaflet-right.customized {
    bottom: 43px;
}

.leaflet-control-scale.customized {
    position: absolute !important;
    bottom: 40px;
    z-index: 1 !important;
}

.leaflet-control-attribution {
    bottom: -36px !important;
    float: right !important;
}

    .leaflet-control-attribution.customized {
        bottom: 64px !important;
        float: right !important;
        z-index: 1 !important;
    }

.leaflet-control-scale-line {
    font-size: 9px;
}

/*button label*/
.mud-button-filled .mud-button-label {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0.3px;
}

.page-header {
    height: 40px;
    border-bottom: 1px solid #DBDBDE;
}

    .page-header .mud-paper, .page-header span {
        color: var(--mud-palette-text-primary);
        background-color: var(--mud-palette-surface);
        color: #93949C;
        font-family: 'Inter';
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 20px; /* 142.857% */
        border-radius: 0px;
    }

    .page-header ul li .last-separator {
        text-align: left;
        display: block;
        padding-right: 15px;
    }

    .page-header ul li .vessel-separator {
        padding: 0 15px 0 16px;
    }

    .page-header ul li.breadcrumb-item {
        padding: 10px 8px;
    }

    .page-header ul li .breadcrumb-item-text {
        white-space: pre;
    }

    .page-header ul li .breadcrumb-item-link-icon {
        padding: 0 8px 0 2px;
    }

    .page-header ul li a.breadcrumb-item-link, .page-header ul li a.breadcrumb-item-link span {
        color: #0075FF;
    }

.circle-icon-marker {
    width: 12px !important;
    height: 12px;
    margin-left: -6px;
    margin-top: -8px;
}

/***** Chrome, Safari, Opera, and Edge Chromium *****/
input[type="range"]::-webkit-slider-runnable-track {
    background-color: #BBD3E1;
    height: 0.5rem;
    border-radius: 5px;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    margin-top: -4px; /* Centers thumb on the track */
    background-color: #3984AD;
}

/******** Firefox ********/
input[type="range"]::-moz-range-track {
    background: #BBD3E1;
}

input[type="range"]::-moz-range-thumb {
    border: none; /*Removes extra border that FF applies*/
    border-radius: 0; /*Removes default border-radius that FF applies*/
    background-color: #3984AD;
}

input[type="range"]:focus {
    outline: none;
}

    input[type="range"]:focus::-webkit-slider-thumb {
        border: 1px solid #053a5f;
    }

    input[type="range"]:focus::-moz-range-thumb {
        border: 1px solid #053a5f;
    }



a[data-title], a[data-title-right] {
    position: relative;
}

    a[data-title]:hover:after, a[data-title-right]:hover:after, button[data-title]:hover:after, button[data-title-right]:hover:after, div[data-title]:hover:after, div[data-title-right]:hover:after {
        content: attr(data-title);
        color: var(--mud-palette-dark-text);
        background-color: var(--mud-palette-grey-darker);
        padding: 4px 8px;
        text-align: center;
        align-items: center;
        justify-content: center;
        font-family: 'Inter';
        font-weight: 500;
        font-size: 12px;
        line-height: 1.4em;
        border-radius: var(--mud-default-borderradius);
        white-space: nowrap;
        position: absolute;
        left: 0%;
        top: -22px;
    }

    a[data-title-right]:hover:after, button[data-title-right]:hover:after, div[data-title-right]:hover:after {
        content: attr(data-title-right);
        left: auto;
        right: 20px;
    }

.page-breadcrumb .mud-nav-link-text {
    margin-left: 6px;
}

.page-breadcrumb .mud-nav-item {
    width: auto;
}

.page-breadcrumb a svg.mud-nav-link-icon {
    margin-top: 2px;
}

table td .leg-length, table td .distance-to-go {
    min-width: 100px;
}

.mud-input.mud-input-outlined .mud-input-outlined-border.disabled {
    border-color: var(--mud-palette-lines-inputs) !important;
}

.voyage-view-mode {
    position: absolute;
    right: 115px;
    top: 3px;
    background: #DBDBDE;
    padding: 2px 0px 0px 0px;
    height: 32px;
    border-radius: 4px;
    display: flex;
    align-items:center;
}

.hierarchical-tooltip {
    position: absolute;
    right: 115px;
    top: 27px !important;
    white-space: nowrap;
    z-index: 2000 !important;
    width: fit-content;
}

.list-tooltip {
    position: absolute;
    right: 85px;
    top: 27px !important;
    white-space: nowrap;
    z-index: 2000 !important;
    width: fit-content;
}

.voyage-toggle {
    padding-left: 4px;
    padding-right: 4px;
    bottom: 10px;
}

    .voyage-toggle span {
        border-radius: 4px !important;
        height: 24px;
        padding-top: 10px;
    }

.voyage-toggle-off {
    border-radius: 4px !important;
    background-color: #DBDBDE;
}

.drp-placeholder, ::placeholder {
    color: #93949C !important;
    font-family: 'Inter';
    font-size: 14px;
    opacity: 0.5;
}

.button-icon-more, .menu-icon-more, .menu-icon-more button, .status-button-group button, .mud-menu.menu-leg button {
    width: 20px;
    height: 20px;
    padding: 0 !important;
    border-radius: 4px;
}

    .button-icon-more:hover::before, .menu-icon-more button:hover::before, .status-button-group button:hover::before, .mud-menu.menu-leg button:hover::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.1); /* Light grey background */
    }

.icon-hover-container {
    display: inline-block; /* Adjust as needed */
    position: relative;
    cursor: pointer;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    text-align: center;
}

    .icon-hover-container:hover::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.1); /* Light grey background */
        border-radius: 4px; /* Optional: to have rounded corners */
    }

    .icon-hover-container svg:hover {
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); /* Optional: shadow effect */
    }

.dtp-text span {
    font-size: 12px;
    white-space: nowrap;
}

@keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.blinking-icon {
    animation: blink 1s infinite;
    color: #FFC107; /* Amber */
}

.overflow-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    font-family: 'Inter';
    width: 100%;
    display: inline-block;
}

ul.blazor-context-menu__list {
    padding: 0;
}

    ul.blazor-context-menu__list li {
        height: 37px;
        padding: 6px 8px;
        align-items: center;
        gap: 8px;
        display: flex !important;
    }

        ul.blazor-context-menu__list li:hover {
            background-color: #E6F1FF !important
        }

        ul.blazor-context-menu__list li .mud-list-item-icon {
            float: left;
            min-width: 16px;
        }

        ul.blazor-context-menu__list li .mud-list-item-text {
            white-space: pre !important;
            float: left;
        }
.loading-overlay {
    position: fixed;
    top: 0;
    left: 71px;
    background: rgba(0,0,0,0.3);
    z-index: 4000;
    width: calc(100vw - 71px);
    height: calc(100vh);
}

    .loading-overlay.is-draw-open {
        left: 293px;
    }

.loading-container {
    z-index: 5000;
    width: 100vw;
    height: 100vh;
    background-color: transparent;
}

.loading-spinner {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -25px;
    margin-top: 25px;
}

.gutter {
    background-color: #e5e7eb;
    z-index: 1;
}

.evcso-divider {
    border: none;
    height: 1px;
    margin: 0;
    flex-shrink: 0;
    background-color: rgba(0, 0, 0, 0.12);
}

.hurricane-divider {
    height: 1px;
    margin: 5px 0 5px 0;
    background-color: white;
}

[class^="leaflet-pane leaflet-navigation"] .leaflet-interactive:hover {
    cursor: grab !important; /* Hand icon for navigation areas */
}

[class^="leaflet-pane leaflet-navigation-hurricane-pane"] .leaflet-interactive:hover {
    cursor: pointer !important; /* Hand pointing icon for navigation areas */
}

.hurricane-waypoint-popup .leaflet-popup-content-wrapper {
    background-color: #616161;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
}

.hurricane-waypoint-popup .leaflet-popup-content {
    margin: 0px;
    font-size: 12px;
    font-family: 'Inter';
}

.hurricane-waypoint-popup .leaflet-popup-close-button {
    color: white !important;
}

.hurricane-waypoint-popup .leaflet-popup-close-button span {
    font-size: 16px;
}

.hurricane-waypoint-popup .leaflet-popup-tip {
    background-color: #616161;
}

.hurricane-info-line {
    line-height: 18px;
    display: flex;
    white-space: pre;
    align-items: center;
}

.hurricane-info-line-tab {
    position: relative;
    left: 10%;
}

.zoom-control-box {
    right: 135px;
    bottom: -40px;
    background-color: #fff;
    border-radius: 4px;
}

    .zoom-control-box button {
        width: 24px;
        height: 24px;
    }

    .zoom-control-box:hover {
        background-color: #f4f4f4;
    }

.center-vessel-button {
    box-shadow: var(--mud-elevation-1) !important;
}

/* Toast */
.mud-snackbar {
    min-width: 450px;
    opacity: 1 !important;
}
    .mud-snackbar .toast-message .title {
        font-size: 14px;
        line-height: 21px;
        color: #232535;
        font-weight: 500;
    }
    .mud-snackbar .toast-message .content {
        font-size: 14px;
        line-height: 21px;
        color: #51525E;
        font-weight: 400;
    }
    .mud-snackbar .mud-snackbar-icon {
        align-self: self-start;
    }
    .mud-snackbar .mud-icon-root.mud-svg-icon {
        font-size: 22px;
    }
    .mud-snackbar .mud-snackbar-content-message {
        padding-top: 4px;
    }
    .mud-snackbar-content-action button svg {
        color: #51525E !important;
    }
.mud-alert-filled-error {
    color: #51525E;
    background-color: #FFEBEE;
    border: 1px solid #FFCDD2;
}
    .mud-alert-filled-error svg {
        color: #C62828;
    }

.mud-alert-filled-warning {
    color: #51525E;
    background-color: #FFF3E0;
    border: 1px solid #FFE0B2;
    font-weight: 400;
}

    .mud-alert-filled-warning svg {
        color: #E65100;
    }

.mud-alert-filled-info {
    color: #51525E;
    background-color: #E3F2FD;
    border: 1px solid #B3E5FC;
    font-weight: 400;
}

    .mud-alert-filled-info svg {
        color: #1565C0;
    }

.mud-alert-filled-success {
    color: #51525E;
    background-color: #E8F5E9;
    border: 1px solid #C8E6C9;
    font-weight: 400;
}

    .mud-alert-filled-success svg {
        color: #2E7D32;
    }

.mud-snackbar-content-action {
    align-self: self-start;
}
.mud-snackbar-content-action button span {
    color: #fff;
}

.leaflet-popup.leaflet-popup-trackplayback {
    margin-bottom: 0;
}
.leaflet-popup-trackplayback .leaflet-popup-content {
}

.leaflet-popup-trackplayback .leaflet-popup-content-wrapper, .leaflet-popup-trackplayback .leaflet-popup-tip {
    background-color: transparent;
    box-shadow: none;
}

.leaflet-popup-trackplayback .leaflet-popup-close-button {
    display: none;
}

.vessels-have-quotations .search-vessel-keyword {
    margin-top: 0px;
}
.vessel-quote-line-item-popup .leaflet-popup-content {
    margin: 8px;
    border: 1px solid #ccc;
}
    .vessel-quote-line-item-popup .leaflet-popup-content .item {
        border-bottom: 1px solid #eee;
    }
        .vessel-quote-line-item-popup .leaflet-popup-content .item:hover {
            background-color: rgba(0, 0, 0, 0.0392156862745098);
        }
        .vessel-quote-line-item-popup .leaflet-popup-content .item:last-child {
            border-bottom: 0px none;
        }
    .vessel-quote-line-item-popup .leaflet-popup-close-button {
        top: -5px !important;
        right: -5px !important;
    }

.chose-product-group-list .product-groups-list .mud-input-control > .mud-input-control-input-container > .mud-input-label-outlined.mud-input-label-inputcontrol,
.add-items-from-source .mud-input-control > .mud-input-control-input-container > .mud-input-label-outlined.mud-input-label-inputcontrol,
.basket-confirmation-ref .mud-input-control > .mud-input-control-input-container > .mud-input-label-outlined.mud-input-label-inputcontrol,
.basket-source .mud-input-control > .mud-input-control-input-container > .mud-input-label-outlined.mud-input-label-inputcontrol,
.quote-source .mud-input-control > .mud-input-control-input-container > .mud-input-label-outlined.mud-input-label-inputcontrol {
    top: -4px !important;
}

.routes-source .mud-input-control > .mud-input-control-input-container > .mud-input-label-outlined.mud-input-label-inputcontrol {
    top: 0 !important;
}

.leaflet-popup-pane {
    z-index: 640 !important;
}

.vessel-quote-line-item-popup.over-top .leaflet-popup-tip-container {
    transform: rotateX(180deg);
    top: -19px;
}
.quote-source-item .mud-list-item-text .mud-typography {
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.product-items-groups-list-tooltip .mud-tooltip-inline {
    margin-top: 16px;
}
.product-groups-list-tooltip .mud-tooltip-inline {
}
.product-items-groups-list .mud-input-control > .mud-input-control-input-container > .mud-input-label-outlined.mud-input-label-inputcontrol {
    top: -4px !important;
}
.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}
.vessel-detail-table td {
    padding: 3px 0;
}
.vessel-info-popup .leaflet-popup-content {
    margin: 13px;
}
.hide {
    display: none !important;
}

/*Overwrite Bootstrap CSS*/
ul {
    padding-left: unset !important;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: none !important;
}

.font-roboto-16 {
    font-family: Roboto;
    font-size: 16px;
    font-weight: 500;
    line-height: 16px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}

.grid-item.selected #custom-dashboard-add-widget > span {
    display: none !important;
}

.bg-gray {
    background: #F2F4F8;
}

.mud-input-outlined-border {
    border-radius: 0px !important;
}

.mud-main-content {
    padding-top: 0 !important;
}

.search-vessel-textbox .mud-input {
    height: 48px !important;
}

.square-medium-button .mud-svg-icon.mud-icon-size-small {
    font-size: 24px !important;
}


.mud-primary-text {
    color: #263BDA !important;
}