body {
    position: relative;
    height: 100vh;
    font-size: 0.95rem;
    font-family: 'Roboto', sans-serif;
    color: #212529;
    overflow-x: unset;
}
a {
    color: inherit;
}
.control-siderbar-animate {
    overflow: unset !important;
}

.dropdown-item {
    white-space: unset !important;
}

.k-dropzone {
    padding: 0px !important;
}

.k-switch-handle {
    background-color: #fff !important;
    margin: 2px 0px !important;
}

.k-switch-on .k-switch-handle {
    margin: 2px -2px !important;
}


.k-switch-off .k-switch-handle {
    margin: 2px 2px !important;
}


.k-disabled {
    pointer-events: none;
    opacity: 0.5;
}

.k-list .k-item.k-disabled::after {
    content: "\26D4"; /* Unicode no-entry sign */
    margin-left: 6px;
}

.k-upload-button {
    min-width: unset;
    width: 100% !important;
    border: 0 !important;
}

.k-menu .k-item a[data-command-parameter="XLS"], .k-menu .k-item a[data-command-parameter="CSV"], .k-menu .k-item a[data-command-parameter="RTF"], .k-menu .k-item a[data-command-parameter="IMAGE"], .k-menu .k-item a[data-command-parameter="XLSX"], .k-widget li[aria-label="Navigate forward"], .k-widget li[aria-label="Navigate backward"], .k-widget li[aria-label="Toggle print preview"], .k-widget li[aria-label="Send an email"], .k-widget li[aria-label="Toggle document map"], .k-widget li[aria-label="Search in report contents"], .k-widget li[aria-label="Zoom in"], .k-widget li[aria-label="Zoom out"], .k-widget li[aria-label="Toggle parameters area"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
}

html {
    font-size: 0.95rem;
}

.popover-header {
    font-weight: bold !important;
    padding: .75rem .75rem !important;
    color: #000000;
}

.popover-body {
    padding: .75rem .75rem !important;
    color: #000000;
}

* {
    border-radius: unset !important;
}

.content-wrapper {
    background: #f8f9fa !important;
}

.wrapper {
    position: relative !important;
    width: -moz-available;
    min-width: 100%;
}

.k-grid-header .k-grid-filter.k-state-active, .k-grid-header .k-header-column-menu.k-state-active, .k-grid-header .k-hierarchy-cell .k-icon.k-state-active {
    color: #fff;
    background-color: transparent;
}

.nav-pills-checkbox .nav-pills .nav-link, .nav-pills .show > .nav-link {
    color: #3b352a !important;
    background-color: #fff;
    padding-left: 30px;
}

    .nav-pills-checkbox .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
        color: #3b352a !important;
        background-color: #b2aca4;
    }

.nav-pills-checkbox .tab-content {
    color: #3b352a;
    background-color: #b2aca4;
}

.nav-link-checkbox {
    position: absolute;
    margin: 10px;
}

.line-height-normal {
    line-height: normal !important;
}
/* avatar */
.user-avatar-list {
    background-color: #ffffff !important;
}

    .user-avatar-list:hover, .user-avatar-list-selected {
        cursor: pointer;
        background-color: #f1f1f1 !important;
    }

.user-avatar {
    border-radius: 100% !important;
    font-size: 0.95rem;
    line-height: 30px;
    height: 30px;
    width: 30px;
    color: #212529;
    font-weight: 900;
    float: left;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    margin-right: 8px;
    position: relative;
    margin-top: -4px;
    background-color: #ccc;
    display: table;
}

.user-avatar-chat {
    font-size: 14px;
    line-height: 32px;
    height: 32px;
    width: 32px;
    font-weight: 600;
    float: unset;
    margin: 0 auto !important;
    position: absolute;
    background-color: #f7f1d0;
    color: #6f6332;
    border: 1px solid #dbdbdb;
    border-radius: 100% !important;
    display: unset;
    text-transform: uppercase;
}

.user-avatar-chat-container {
    display: table;
    position: relative;
    height: 32px;
}

.user-avatar-chat-badge-status {
    position: relative;
    border-radius: 100% !important;
    line-height: 10px;
    z-index: 5;
    font-size: 7px;
    width: 14px;
    height: 14px;
    padding: 3px !important;
    text-align: center;
    vertical-align: middle;
    left: 20px;
    top: 18px;
}

.user-avatar-chat-badge-count {
    position: absolute;
    border-radius: 100% !important;
    line-height: 10px;
    z-index: 5;
    font-size: 9px;
    width: 15px;
    height: 15px;
    padding: 3px !important;
    text-align: center;
    vertical-align: middle;
    left: -5px;
    top: -5px;
    background-color: #d52939;
    color: #fff;
}

.user-avatar-profile {
    font-size: 60px;
    line-height: 120px;
    height: 120px;
    width: 120px;
    font-weight: 600;
    float: unset;
    margin: 0 auto !important;
}

.user-avatar-list-status-online .user-avatar-chat-initial-status {
    background-color: #f7f1d0;
    color: #6f6332;
}

.user-avatar-list-status-offline .user-avatar-chat-initial-status {
    background-color: #f1f1f1;
    color: #999999;
    border: 1px solid #eee;
}

.user-avatar-list-status-online .user-avatar-chat-badge-status {
    background-color: #28a745;
    color: #fff;
}

    .user-avatar-list-status-online .user-avatar-chat-badge-status .fa-user-avatar-status:before {
        content: "\f00c";
    }

.user-avatar-list-status-offline .user-avatar-chat-badge-status {
    color: #fff;
    background-color: #999;
}

    .user-avatar-list-status-offline .user-avatar-chat-badge-status .fa-user-avatar-status:before {
        content: "\f00d";
    }

.user-avatar-chat-text-status {
    margin-top: 3px;
    font-size: 0.8rem;
}

.user-avatar-list-status-online .user-avatar-chat-text-status {
    color: #28a745;
}

    .user-avatar-list-status-online .user-avatar-chat-text-status:before {
        content: "Online";
    }

.user-avatar-list-status-offline .user-avatar-chat-text-status {
    color: #999;
}

    .user-avatar-list-status-offline .user-avatar-chat-text-status:before {
        content: "Offline";
    }
/* Buttons */
.btn {
    font-size: 0.95rem;
    font-weight: 500;
    padding: .44rem .75rem;
}

.btn-group-toggle label {
    font-weight: 500 !important;
}

.btn-primary, .k-button, .k-button {
    background-color: #000;
    border-color: #000;
    color: white !important;
}

    .btn-primary:hover, .k-button:hover {
        background-color: #1a1f25;
        border-color: #1a1f25;
        color: white !important;
        opacity: 1;
    }

    .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle {
        color: #fff;
        background-color: #1a1f25;
        border-color: #1a1f25;
        opacity: 1;
    }

    .btn-primary.focus, .btn-primary:focus, .k-button :focus {
        color: #fff;
        background-color: #1a1f25;
        border-color: #1a1f25;
        opacity: 1;
    }

    .btn-primary.disabled, .btn-primary:disabled, .k-button:disabled {
        color: #fff;
        background-color: #1a1f25;
        border-color: #1a1f25;
        cursor: default;
        pointer-events: none;
    }

    .btn-primary.focus, .btn-primary:focus {
        color: #fff;
        background-color: #1a1f25;
        border-color: #1a1f25;
    }

    .btn-primary.disabled, .btn-primary:disabled {
        color: #fff;
        background-color: #1a1f25;
        border-color: #1a1f25;
    }

    .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle {
        color: #fff;
        background-color: #1a1f25;
        border-color: #1a1f25;
    }

        .btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show > .btn-primary.dropdown-toggle:focus {
            box-shadow: unset;
        }
/* Kendo Pager */
.k-grid-pager {
    border-color: transparent;
    color: #212529;
    background-color: transparent;
    padding: .375rem;
    border-top: 1px solid #dbdbdb;
    width: 100%;
}

/* main pager layout */
.k-pager-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
}

/* center navigation + numbers */
.k-pager-nav,
.k-pager-numbers {
    margin: 0 auto;
    display: flex;
    align-items: center;
}

/* items per page right */
.k-pager-sizes {
    margin-left: auto;
}

/* info second row centered */
.k-pager-info {
    flex: 0 0 100%;
    text-align: center;
    padding: 10px 0;
    color: #6c757d !important;
}

/* your styling kept */
.k-pager-numbers .k-link,
.k-pager-numbers .k-link:hover,
.k-pager-numbers .k-state-selected {
    margin: 2px !important;
    color: #fff !important;
    background-color: #3b352a;
    border: none !important;
    border-radius: 100% !important;
}

.k-current-page {
    display: none !important;
}

.k-state-selected {
    background-color: #444 !important;
    color: #fff;
}

.k-pager-wrap.k-pager-lg .k-pager-numbers li:not(.k-current-page),
.k-pager-wrap.k-pager-md .k-pager-numbers li:not(.k-current-page),
.k-pager-wrap.k-pager-sm .k-pager-numbers li:not(.k-current-page) {
    display: block !important;
}
/* Card Nav */
.card-nav {
    cursor: pointer;
}

    .card-nav:hover {
        border: 1px solid #ccc !important;
        cursor: pointer;
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.025) !important;
    }

    .card-nav .card-title {
        line-height: 25px;
        font-weight: 500;
        color: #212529;
        text-align: center;
        float: unset;
        margin: 0px;
        font-size: 1rem;
    }

        .card-nav .card-title a {
            color: #474135;
            font-size: 1rem;
        }

            .card-nav .card-title a:hover {
                color: #000;
            }

    .card-nav .card-text {
        line-height: 24px;
        text-align: center;
        float: unset;
    }

    .card-nav .card-icon img {
        width: 48px;
        height: auto;
    }
/* Scheduler */
.scheduler-item {
    color: #fff !important;
    border: 1px solid #fff !important;
    padding: 3px;
    background: #000;
    text-align: center;
    border-radius: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: #000;
}

.k-scheduler-header-wrap {
    background: #cedadd !important;
}

.k-event {
    color: #fff;
    height: auto !important;
}
/* Headers */
.page-header {
    color: #474135;
    margin-bottom: .25rem !important;
    font-size: 1.65rem;
}

.container-fluid-platform .page-header {
    color: #656b7b !important;
}

.container-fluid-garbage .page-header {
    color: #3b352a !important;
}

.container-fluid-marpol .page-header {
    color: #000 !important;
}

.container-fluid-biofouling .page-header {
    color: #446821 !important;
}

.container-fluid-engineparameters .page-header {
    color: #264d6b !important;
}

.container-fluid-ballast .page-header {
    color: #1c5e44 !important;
}

.container-fluid-deck .page-header {
    color: #c48a03 !important;
}


.container-fluid-gmdss .page-header {
    color: #484848 !important;
}
/*.container-fluid-engine .page-header {
    color: #000 !important;
}*/

.page-header-icon {
    width: 40px;
    height: 40px;
    vertical-align: middle;
    border-style: none;
}
/* Button Primary Outline */

.btn-outline-primary {
    color: #1a1f25 !important;
    border-color: #1a1f25 !important;
    background-color: white !important;
    font-weight: normal !important;
}

    .btn-outline-primary:hover {
        color: #1a1f25 !important;
        border-color: #1a1f25 !important;
        background-color: #fafafa !important;
    }

    .btn-outline-primary.active, .btn-outline-primary:active {
        color: #fff !important;
        border-color: #1a1f25 !important;
        background-color: #1a1f25 !important;
    }

.container-fluid-platform .btn-outline-primary {
    color: #656b7b !important;
    border-color: #656b7b !important;
    background-color: white !important;
}

    .container-fluid-platform .btn-outline-primary:hover {
        color: #656b7b !important;
        border-color: #656b7b !important;
        background-color: #fafafa !important;
    }

    .container-fluid-platform .btn-outline-primary.active, .container-fluid-platform .btn-outline-primary:active {
        color: #fff !important;
        border-color: #656b7b !important;
        background-color: #656b7b !important;
    }

.container-fluid-garbage .btn-outline-primary {
    color: #3b352a !important;
    border-color: #3b352a !important;
    background-color: white !important;
}

    .container-fluid-garbage .btn-outline-primary:hover {
        color: #fff !important;
        border-color: #3b352a !important;
        background-color: #3b352a !important;
    }

    .container-fluid-garbage .btn-outline-primary.active, .container-fluid-garbage .btn-outline-primary:active {
        color: #fff !important;
        border-color: #3b352a !important;
        background-color: #3b352a !important;
    }

.container-fluid-marpol .btn-outline-primary {
    color: #000 !important;
    border-color: #e0c140 !important;
    background-color: white !important;
}

    .container-fluid-marpol .btn-outline-primary:hover {
        color: #000 !important;
        border-color: #e0c140 !important;
        background-color: #e0c140 !important;
    }

    .container-fluid-marpol .btn-outline-primary.active, .container-fluid-marpol .btn-outline-primary:active {
        color: #000 !important;
        border-color: #e0c140 !important;
        background-color: #e0c140 !important;
    }

.container-fluid-marine .btn-outline-primary {
    color: #000 !important;
    border-color: #6cb1e7 !important;
    background-color: white !important;
}

    .container-fluid-marine .btn-outline-primary:hover {
        color: #000 !important;
        border-color: #6cb1e7 !important;
        background-color: #6cb1e7 !important;
    }

    .container-fluid-marine .btn-outline-primary.active, .container-fluid-marine .btn-outline-primary:active {
        color: #000 !important;
        border-color: #6cb1e7 !important;
        background-color: #6cb1e7 !important;
    }

.container-fluid-incineration .btn-outline-primary {
    color: #ad2b2b !important;
    border-color: #ad2b2b !important;
    background-color: white !important;
}

    .container-fluid-incineration .btn-outline-primary:hover {
        color: #fff !important;
        border-color: #ad2b2b !important;
        background-color: #ad2b2b !important;
    }

    .container-fluid-incineration .btn-outline-primary.active, .container-fluid-incineration .btn-outline-primary:active {
        color: #fff !important;
        border-color: #ad2b2b !important;
        background-color: #ad2b2b !important;
    }


.container-fluid-biofouling .btn-outline-primary {
    color: #446821 !important;
    border-color: #446821 !important;
    background-color: white !important;
}

    .container-fluid-biofouling .btn-outline-primary:hover {
        color: #446821 !important;
        border-color: #446821 !important;
        background-color: #e0c140 !important;
    }

    .container-fluid-biofouling .btn-outline-primary.active, .container-fluid-biofouling .btn-outline-primary:active {
        color: #ffffff !important;
        border-color: #446821 !important;
        background-color: #446821 !important;
    }


.container-fluid-engineparameters .btn-outline-primary {
    color: #264d6b !important;
    border-color: #264d6b !important;
    background-color: white !important;
}

    .container-fluid-engineparameters .btn-outline-primary:hover {
        color: #264d6b !important;
        border-color: #264d6b !important;
        background-color: #b4c5d2 !important;
    }

    .container-fluid-engineparameters .btn-outline-primary.active, .container-fluid-engineparameters .btn-outline-primary:active {
        color: #ffffff !important;
        border-color: #264d6b !important;
        background-color: #264d6b !important;
    }


.container-fluid-ballast .btn-outline-primary {
    color: #1c5e44 !important;
    border-color: #1c5e44 !important;
    background-color: white !important;
}

    .container-fluid-ballast .btn-outline-primary:hover {
        color: #fff !important;
        border-color: #1c5e44 !important;
        background-color: #1c5e44 !important;
    }

    .container-fluid-ballast .btn-outline-primary.active, .container-fluid-ballast .btn-outline-primary:active {
        color: #fff !important;
        border-color: #1c5e44 !important;
        background-color: #1c5e44 !important;
    }

.container-fluid-engine .btn-outline-primary {
    color: #000 !important;
    border-color: #45A7C8 !important;
    background-color: white !important;
}

    .container-fluid-engine .btn-outline-primary:hover {
        color: #000 !important;
        border-color: #45A7C8 !important;
        background-color: #45A7C8 !important;
    }

    .container-fluid-engine .btn-outline-primary.active, .container-fluid-engine .btn-outline-primary:active {
        color: #000 !important;
        border-color: #45A7C8 !important;
        background-color: #45A7C8 !important;
    }
/*Engine buttons*/


.container-fluid-engine .k-datepicker .k-select, .container-fluid-engine .k-datetimepicker .k-select,
.container-fluid-engine .k-timepicker .k-select, .container-fluid-engine .k-numerictextbox .k-numeric-wrap .k-select {
    color: #fff;
    background-color: #45A7C8 !important;
}

.container-fluid-engine .k-switch-container {
    color: #fff;
    background-color: #45A7C8 !important;
}

.container-fluid-engine .k-upload .k-upload-button {
    color: #000 !important;
    background-color: #45A7C8 !important;
    border-color: #45A7C8 !important;
    font-weight: 500 !important;
    padding: .455rem .75rem !important;
}
.container-fluid-engine .k-upload {
    border-width: 0px !important;
    border-color: #45A7C8 !important;
    color: #000 !important;
    background-color: #fff !important;
}


.container-fluid-engine .btn-primary, .container-fluid-engine .k-button{
    color: #000 !important;
    background-color: #45A7C8 !important;
    border-color: #45A7C8 !important;
    font-weight:500 !important;
}

    .container-fluid-engine .btn-primary:hover, .container-fluid-engine .k-button:hover {
        background-color: #45A7C8 !important;
        border-color: #45A7C8 !important;
        color: #000 !important;
        font-weight: 500 !important;
    }

    .container-fluid-engine .btn-primary.focus, .container-fluid-engine .btn-primary:focus, .container-fluid-engine .k-button:focus {
        color: #000 !important;
        background-color: #45A7C8 !important;
        border-color: #45A7C8 !important;
        font-weight: 500 !important;
    }

    .container-fluid-engine .btn-primary.disabled, .container-fluid-biofouling .btn-primary:disabled, .container-fluid-biofouling .k-button:disabled {
        color: #000 !important;
        background-color: #355b6c !important;
        border-color: #355b6c !important;
        font-weight: 500 !important;
    }

    .container-fluid-engine .btn-primary:not(:disabled):not(.disabled).active, .container-fluid-engine .btn-primary:not(:disabled):not(.disabled):active, .container-fluid-engine .show > .btn-primary.dropdown-toggle {
        color: #000;
        background-color: #45A7C8 !important;
        border-color: #45A7C8 !important;
        font-weight: 500 !important;
        opacity: 0.95;
    }

/*---------*/


.container-fluid-deck .k-combobox .k-dropdown-wrap .k-select {
    background: #c48a03;
    color: #fff;
}

.container-fluid-deck .btn-outline-primary {
    color: #c48a03 !important;
    border-color: #c48a03 !important;
    background-color: #fff !important;
}

    .container-fluid-deck .btn-outline-primary:hover {
        color: #fff !important;
        border-color: #c48a03 !important;
        background-color: #c48a03 !important;
    }

    .container-fluid-deck .btn-outline-primary.active, .container-fluid-deck .btn-outline-primary:active {
        color: #fff !important;
        border-color: #c48a03 !important;
        background-color: #c48a03 !important;
    }



.container-fluid-gmdss .k-combobox .k-dropdown-wrap .k-select {
    background: #eabf10;
    color: #484848;
}

.container-fluid-gmdss .btn-outline-primary {
    color: #eabf10 !important;
    border-color: #eabf10 !important;
    background-color: #fff !important;
}

    .container-fluid-gmdss .btn-outline-primary:hover {
        color: #484848 !important;
        border-color: #eabf10 !important;
        background-color: #eabf10 !important;
    }

    .container-fluid-gmdss .btn-outline-primary.active, .container-fluid-gmdss .btn-outline-primary:active {
        color: #484848 !important;
        border-color: #eabf10 !important;
        background-color: #eabf10 !important;
    }

/* Button Garbage */

.container-fluid-garbage .btn-primary, .container-fluid-garbage .k-button {
    background-color: #3b352a !important;
    border-color: #3b352a !important;
    color: #fff !important;
}

.container-fluid-garbage .k-switch-container {
    color: #fff;
    background-color: #3b352a !important;
}

.container-fluid-garbage .k-switch-handle {
    background-color: #fff !important;
}

    .container-fluid-garbage .btn-primary:hover, .container-fluid-garbage .k-button:hover {
        background-color: #474135 !important;
        border-color: #474135 !important;
        color: #fff !important;
    }

    .container-fluid-garbage .btn-primary.focus, .container-fluid-garbage .btn-primary:focus, .container-fluid-garbage .k-button:focus {
        background-color: #3b352a !important;
        border-color: #3b352a !important;
        color: #fff !important;
    }

    .container-fluid-garbage .btn-primary.disabled, .container-fluid-garbage .btn-primary:disabled, .container-fluid-garbage .k-button:disabled {
        color: #fff !important;
        background-color: #3b352a !important;
        border-color: #3b352a !important;
    }

    .container-fluid-garbage .btn-primary:not(:disabled):not(.disabled).active, .container-fluid-garbage .btn-primary:not(:disabled):not(.disabled):active, .container-fluid-garbage .show > .btn-primary.dropdown-toggle {
        color: #fff;
        background-color: #474135 !important;
        border-color: #474135 !important;
        opacity: 1;
    }
/* Button Platform */
.container-fluid-platform .btn-primary, .container-fluid-platform .k-button {
    background-color: #656b7b !important;
    border-color: #656b7b !important;
}

.container-fluid-platform .k-switch-container {
    color: #fff;
    background-color: #656b7b !important;
}


    .container-fluid-platform .btn-primary:hover, .container-fluid-platform .k-button:hover {
        background-color: #556b7b !important;
        border-color: #556b7b !important;
        color: white !important;
    }

    .container-fluid-platform .btn-primary.focus, .container-fluid-platform .btn-primary:focus, .container-fluid-platform .k-button:focus {
        background-color: #656b7b !important;
        border-color: #656b7b !important;
    }

    .container-fluid-platform .btn-primary.disabled, .container-fluid-platform .btn-primary:disabled, .container-fluid-platform .k-button:disabled {
        background-color: #656b7b !important;
        border-color: #656b7b !important;
    }
/* Button Marpol */
.container-fluid-marpol .btn-primary, .container-fluid-marpol .k-button {
    background-color: #e0c140 !important;
    border-color: #e0c140 !important;
    color: #000 !important;
}

.container-fluid-marpol .k-switch-container {
    color: #fff;
    background-color: #e0c140 !important;
}



    .container-fluid-marpol .btn-primary:hover, .container-fluid-marpol .k-button:hover {
        background-color: #d6b735 !important;
        border-color: #d6b735 !important;
        color: #000 !important;
    }

    .container-fluid-marpol .btn-primary.focus, .container-fluid-primary .btn-primary:focus, .container-fluid-marpol .k-button:focus {
        background-color: #e0c140 !important;
        border-color: #e0c140 !important;
        color: #000 !important;
    }

    .container-fluid-marpol .btn-primary.disabled, .container-fluid-marpol .btn-primary:disabled, .container-fluid-marpol .k-button:disabled {
        background-color: #e0c140 !important;
        border-color: #e0c140 !important;
        color: #000 !important;
    }

/* Button Checklist */

.container-fluid-checklistforms .btn-primary, .container-fluid-checklistforms .k-button {
    background-color: #656b7b !important;
    border-color: #dee2e6 !important;
    color: #fff !important;
}

.container-fluid-checklistforms .k-switch-container {
    color: #fff;
    background-color: #656b7b !important;
}

.container-fluid-checklistforms .k-switch-handle {
    background-color: #fff !important;
}

.container-fluid-checklistforms .btn-primary:hover, .container-fluid-checklistforms .k-button:hover {
    background-color: #656b7b !important;
    border-color: #dee2e6 !important;
    color: #fff !important;
}

.container-fluid-checklistforms .btn-primary.focus, .container-fluid-checklistforms .btn-primary:focus, .container-fluid-checklistforms .k-button:focus {
    background-color: #656b7b !important;
    border-color: #dee2e6 !important;
    color: #fff !important;
}

.container-fluid-checklistforms .btn-primary.disabled, .container-fluid-checklistforms .btn-primary:disabled, .container-fluid-checklistforms .k-button:disabled {
    color: #fff !important;
    background-color: #656b7b !important;
    border-color: #dee2e6 !important;
}

.container-fluid-checklistforms .btn-primary:not(:disabled):not(.disabled).active, .container-fluid-checklistforms .btn-primary:not(:disabled):not(.disabled):active, .container-fluid-checklistforms .show > .btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #656b7b !important;
    border-color: #dee2e6 !important;
    opacity: 1;
}

/* Button marine */
.container-fluid-marine .btn-primary, .container-fluid-marine .k-button {
    background-color: #6cb1e7 !important;
    border-color: #6cb1e7 !important;
    color: #000 !important;
}

.container-fluid-marine .k-switch-container {
    color: #fff;
    background-color: #5ea2d8 !important;
}


    .container-fluid-marine .btn-primary:hover, .container-fluid-marine .k-button:hover {
        background-color: #5ea2d8 !important;
        border-color: #5ea2d8 !important;
        color: #000 !important;
    }

    .container-fluid-marine .btn-primary.focus, .container-fluid-marine .btn-primary:focus, .container-fluid-marine .k-button:focus {
        color: #000 !important;
        background-color: #6cb1e7 !important;
        border-color: #6cb1e7 !important;
    }

    .container-fluid-marine .btn-primary:active {
        color: #000 !important;
        background-color: #6cb1e7 !important;
        border-color: #6cb1e7 !important;
    }

    .container-fluid-marine .btn-primary.disabled, .container-fluid-marine .btn-primary:disabled, .container-fluid-marine .k-button:disabled {
        color: #000 !important;
        background-color: #6cb1e7 !important;
        border-color: #6cb1e7 !important;
    }

    .container-fluid-marine .btn-primary:not(:disabled):not(.disabled).active, .container-fluid-marine .btn-primary:not(:disabled):not(.disabled):active, .container-fluid-marine .show > .btn-primary.dropdown-toggle {
        color: #000 !important;
        background-color: #5ea2d8 !important;
        border-color: #5ea2d8 !important;
        opacity: 1;
    }

/* Button Incinerator */
.container-fluid-incinerator .btn-primary, .container-fluid-incinerator .k-button {
    color: #fff;
    background-color: #ad2b2b !important;
    border-color: #ad2b2b !important;
}

.container-fluid-incinerator .k-switch-container {
    color: #fff;
    background-color: #ad2b2b !important;
}


    .container-fluid-incinerator .btn-primary:hover, .container-fluid-incinerator .k-button:hover {
        background-color: #ad2b2b !important;
        border-color: #ad2b2b !important;
        color: #fff;
    }

    .container-fluid-incinerator .btn-primary.focus, .container-fluid-incinerator .btn-primary:focus, .container-fluid-incinerator .k-button:focus {
        color: #fff;
        background-color: #ad2b2b !important;
        border-color: #ad2b2b !important;
    }

    .container-fluid-incinerator .btn-primary.disabled, .container-fluid-incinerator .btn-primary:disabled, .container-fluid-incinerator .k-button:disabled {
        color: #fff;
        background-color: #ad2b2b !important;
        border-color: #ad2b2b !important;
    }

    .container-fluid-incinerator .btn-primary:not(:disabled):not(.disabled).active, .container-fluid-marine .btn-primary:not(:disabled):not(.disabled):active, .container-fluid-incinerator .show > .btn-primary.dropdown-toggle {
        color: #fff;
        background-color: #ad2b2b !important;
        border-color: #ad2b2b !important;
        opacity: 0.95;
    }



/* Button Biofouling */
.container-fluid-biofouling .btn-primary, .container-fluid-biofouling .k-button {
    color: #fff;
    background-color: #446821 !important;
    border-color: #446821 !important;
}

.container-fluid-biofouling .k-switch-container {
    color: #fff;
    background-color: #446821 !important;
}


    .container-fluid-biofouling .btn-primary:hover, .container-fluid-incinerator .k-button:hover {
        background-color: #446821 !important;
        border-color: #446821 !important;
        color: #fff;
    }

    .container-fluid-biofouling .btn-primary.focus, .container-fluid-biofouling .btn-primary:focus, .container-fluid-biofouling .k-button:focus {
        color: #fff;
        background-color: #446821 !important;
        border-color: #446821 !important;
    }

    .container-fluid-biofouling .btn-primary.disabled, .container-fluid-biofouling .btn-primary:disabled, .container-fluid-biofouling .k-button:disabled {
        color: #fff;
        background-color: #446821 !important;
        border-color: #446821 !important;
    }

    .container-fluid-biofouling .btn-primary:not(:disabled):not(.disabled).active, .container-fluid-biofouling .btn-primary:not(:disabled):not(.disabled):active, .container-fluid-biofouling .show > .btn-primary.dropdown-toggle {
        color: #fff;
        background-color: #446821 !important;
        border-color: #446821 !important;
        opacity: 0.95;
    }


/* Button Biofouling */
.container-fluid-biofouling .btn-primary, .container-fluid-biofouling .k-button {
    color: #fff;
    background-color: #446821 !important;
    border-color: #446821 !important;
}

.container-fluid-biofouling .k-switch-container {
    color: #fff;
    background-color: #446821 !important;
}


    .container-fluid-biofouling .btn-primary:hover, .container-fluid-incinerator .k-button:hover {
        background-color: #446821 !important;
        border-color: #446821 !important;
        color: #fff;
    }

    .container-fluid-biofouling .btn-primary.focus, .container-fluid-biofouling .btn-primary:focus, .container-fluid-biofouling .k-button:focus {
        color: #fff;
        background-color: #446821 !important;
        border-color: #446821 !important;
    }

    .container-fluid-biofouling .btn-primary.disabled, .container-fluid-biofouling .btn-primary:disabled, .container-fluid-biofouling .k-button:disabled {
        color: #fff;
        background-color: #446821 !important;
        border-color: #446821 !important;
    }

    .container-fluid-biofouling .btn-primary:not(:disabled):not(.disabled).active, .container-fluid-biofouling .btn-primary:not(:disabled):not(.disabled):active, .container-fluid-biofouling .show > .btn-primary.dropdown-toggle {
        color: #fff;
        background-color: #446821 !important;
        border-color: #446821 !important;
        opacity: 0.95;
    }


/* Button Engine Parameters */
.container-fluid-engineparameters .btn-primary, .container-fluid-engineparameters .k-button {
    color: #fff;
    background-color: #264d6b !important;
    border-color: #264d6b !important;
}

.container-fluid-engineparameters .k-switch-container {
    color: #fff;
    background-color: #264d6b !important;
}


    .container-fluid-engineparameters .btn-primary:hover, .container-fluid-incinerator .k-button:hover {
        background-color: #264d6b !important;
        border-color: #264d6b !important;
        color: #fff;
    }

    .container-fluid-engineparameters .btn-primary.focus, .container-fluid-engineparameters .btn-primary:focus, .container-fluid-engineparameters .k-button:focus {
        color: #fff;
        background-color: #264d6b !important;
        border-color: #264d6b !important;
    }

    .container-fluid-engineparameters .btn-primary.disabled, .container-fluid-engineparameters .btn-primary:disabled, .container-fluid-engineparameters .k-button:disabled {
        color: #fff;
        background-color: #264d6b !important;
        border-color: #264d6b !important;
    }

    .container-fluid-engineparameters .btn-primary:not(:disabled):not(.disabled).active, .container-fluid-engineparameters .btn-primary:not(:disabled):not(.disabled):active, .container-fluid-engineparameters .show > .btn-primary.dropdown-toggle {
        color: #fff;
        background-color: #264d6b !important;
        border-color: #264d6b !important;
        opacity: 0.95;
    }



/* Button Ballast */
.timezoneindicator {
    box-shadow: #1c5e44 0px 0px 5pt 2pt;
}

.container-fluid-ballast .k-datepicker .k-select, .container-fluid-ballast .k-datetimepicker .k-select,
.container-fluid-ballast .k-timepicker .k-select, .container-fluid-ballast .k-numerictextbox .k-numeric-wrap .k-select {
    color: #fff;
    background-color: #1c5e44 !important;
}

.container-fluid-ballast .k-switch-container {
    color: #fff;
    background-color: #1c5e44 !important;
}

.container-fluid-ballast .btn-primary, .container-fluid-ballast .k-button {
    color: #fff;
    background-color: #1c5e44 !important;
    border-color: #1c5e44 !important;
}

    .container-fluid-ballast .btn-primary:hover, .container-fluid-incinerator .k-button:hover {
        background-color: #1c5e44 !important;
        border-color: #1c5e44 !important;
        color: #fff;
    }

    .container-fluid-ballast .btn-primary.focus, .container-fluid-ballast .btn-primary:focus, .container-fluid-ballast .k-button:focus {
        color: #fff;
        background-color: #1c5e44 !important;
        border-color: #1c5e44 !important;
    }

    .container-fluid-ballast .btn-primary.disabled, .container-fluid-biofouling .btn-primary:disabled, .container-fluid-biofouling .k-button:disabled {
        color: #fff;
        background-color: #1c5e44 !important;
        border-color: #1c5e44 !important;
    }

    .container-fluid-ballast .btn-primary:not(:disabled):not(.disabled).active, .container-fluid-ballast .btn-primary:not(:disabled):not(.disabled):active, .container-fluid-ballast .show > .btn-primary.dropdown-toggle {
        color: #fff;
        background-color: #1c5e44 !important;
        border-color: #1c5e44 !important;
        opacity: 0.95;
    }




/* Button deck */
.container-fluid-deck .k-datepicker .k-select, .container-fluid-deck .k-datetimepicker .k-select,
.container-fluid-deck .k-timepicker .k-select, .container-fluid-deck .k-numerictextbox .k-numeric-wrap .k-select {
    color: #fff;
    background-color: #c48a03 !important;
}

.container-fluid-deck .k-switch-container {
    color: #fff;
    background-color: #c48a03 !important;
}

.container-fluid-deck .btn-primary, .container-fluid-deck .k-button {
    color: #fff;
    background-color: #c48a03 !important;
    border-color: #c48a03 !important;
}

    .container-fluid-deck .btn-primary:hover, .container-fluid-incinerator .k-button:hover {
        background-color: #c48a03 !important;
        border-color: #c48a03 !important;
        color: #fff;
    }

    .container-fluid-deck .btn-primary.focus, .container-fluid-deck .btn-primary:focus, .container-fluid-deck .k-button:focus {
        color: #fff;
        background-color: #c48a03 !important;
        border-color: #c48a03 !important;
    }

    .container-fluid-deck .btn-primary.disabled, .container-fluid-biofouling .btn-primary:disabled, .container-fluid-biofouling .k-button:disabled {
        color: #fff;
        background-color: #c48a03 !important;
        border-color: #c48a03 !important;
    }

    .container-fluid-deck .btn-primary:not(:disabled):not(.disabled).active, .container-fluid-deck .btn-primary:not(:disabled):not(.disabled):active, .container-fluid-deck .show > .btn-primary.dropdown-toggle {
        color: #fff;
        background-color: #c48a03 !important;
        border-color: #c48a03 !important;
        opacity: 0.95;
    }





/* Button GMDSS */

.container-fluid-gmdss .k-datepicker .k-select, .container-fluid-gmdss .k-datetimepicker .k-select,
.container-fluid-gmdss .k-timepicker .k-select, .container-fluid-gmdss .k-numerictextbox .k-numeric-wrap .k-select {
    color: #484848;
    background-color: #eabf10 !important;
}

.container-fluid-gmdss .k-switch-container {
    color: #484848;
    background-color: #eabf10 !important;
}

.container-fluid-gmdss .btn-primary, .container-fluid-gmdss .k-button {
    color: #484848 !important;
    background-color: #eabf10 !important;
    border-color: #eabf10 !important;
}

    .container-fluid-gmdss .btn-primary:hover, .container-fluid-incinerator .k-button:hover {
        background-color: #eabf10 !important;
        border-color: #eabf10 !important;
        color: #484848;
    }

    .container-fluid-gmdss .btn-primary.focus, .container-fluid-gmdss .btn-primary:focus, .container-fluid-gmdss .k-button:focus {
        color: #484848;
        background-color: #eabf10 !important;
        border-color: #eabf10 !important;
    }

    .container-fluid-gmdss .btn-primary.disabled, .container-fluid-biofouling .btn-primary:disabled, .container-fluid-gmdss .k-button:disabled {
        color: #484848;
        background-color: #eabf10 !important;
        border-color: #eabf10 !important;
    }

    .container-fluid-gmdss .btn-primary:not(:disabled):not(.disabled).active, .container-fluid-gmdss .btn-primary:not(:disabled):not(.disabled):active, .container-fluid-gmdss .show > .btn-primary.dropdown-toggle {
        color: #484848;
        background-color: #eabf10 !important;
        border-color: #eabf10 !important;
        opacity: 0.95;
    }

/* Navbar */
.nav-tabs .nav-link, .nav-tabs .nav-item .nav-link {
    background-color: #656b7b;
    color: white !important;
    border-radius: 0px;
    border-color: #dee2e6 #dee2e6 #fff;
    opacity: 0.8;
    font-weight: 500;
}

    .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
        background-color: #656b7b;
        color: white !important;
        border-color: #dee2e6 #dee2e6 #fff;
        opacity: 1;
    }

.nav-item-settings {
    position: fixed;
    bottom: 45px;
    width: 233px;
}

.container-fluid-platform .nav-tabs .nav-link, .container-fluid-platform .nav-tabs .nav-item .nav-link {
    color: white !important;
    background-color: #656b7b !important;
}

.container-fluid-garbage .nav-tabs .nav-link, .container-fluid-garbage .nav-tabs .nav-item .nav-link {
    color: white !important;
    background-color: #3b352a !important;
}

.container-fluid-marpol .nav-tabs .nav-link, .container-fluid-marpol .nav-tabs .nav-item .nav-link {
    color: #000 !important;
    background-color: #e0c140 !important;
}

.container-fluid-marine .nav-tabs .nav-link, .container-fluid-marine .nav-tabs .nav-item .nav-link {
    color: #000 !important;
    background-color: #6cb1e7 !important;
}

.container-fluid-incinerator .nav-tabs .nav-link, .container-fluid-incinerator .nav-tabs .nav-item .nav-link {
    color: #fff !important;
    background-color: #ae2b2b !important;
}

.container-fluid-biofouling .nav-tabs .nav-link, .container-fluid-biofouling .nav-tabs .nav-item .nav-link {
    color: #fff !important;
    background-color: #446821 !important;
}

.container-fluid-engineparameters .nav-tabs .nav-link, .container-fluid-engineparameters .nav-tabs .nav-item .nav-link {
    color: #fff !important;
    background-color: #264d6b !important;
}

.container-fluid-ballast .nav-tabs .nav-link, .container-fluid-ballast .nav-tabs .nav-item .nav-link {
    color: #fff !important;
    background-color: #1c5e44 !important;
}

.container-fluid-deck .nav-tabs .nav-link, .container-fluid-deck .nav-tabs .nav-item .nav-link {
    color: #fff !important;
    background-color: #c48a03 !important;
}

.container-fluid-gmdss .nav-tabs .nav-link, .container-fluid-gmdss .nav-tabs .nav-item .nav-link {
    color: #484848 !important;
    background-color: #eabf10 !important;
}
.container-fluid-engine .nav-tabs .nav-link, .container-fluid-engine .nav-tabs .nav-item .nav-link {
    color: #000 !important;
    background-color: #45A7C8 !important;
}
/* Map */
.nav-tabs-map .nav-tabs .nav-tab-icon {
    display: block !important;
    margin: 0 auto !important;
    margin-bottom: 4px !important;
    width: 24px !important;
}

.nav-tabs-map .nav-tabs .nav-link {
    color: #000000 !important;
    background-color: #ffffff !important;
    background: #ffffff !important;
    text-align: center !important;
    opacity: 0.75 !important;
    min-width: 110px;
    margin-right: -1px;
    margin-bottom: 0px;
    font-weight: 400 !important;
    white-space: nowrap;
}

    .nav-tabs-map .nav-tabs .nav-link.active {
        color: #000000 !important;
        background-color: #f1f1f1 !important;
        border-color: #dee2e6 #dee2e6 #fff;
        opacity: 1 !important;
        min-width: 110px;
    }
/* Button Groups */
.btn-group-toggle-filters .btn {
    font-size: 0.95rem !important;
    padding: 5px 5px !important;
    min-height: 35px;
}

.btn-filters-icon {
    width: 20px !important;
    height: auto !important;
}

.btn-icon {
    width: 18px !important;
    height: auto !important;
}

.btn-outline-dark:hover .btn-icon {
    filter: brightness(0) invert(1);
}

.fa-filters-icon {
    font-size: 24px !important;
}
/* Types */
.text-primary {
    color: #3b352a !important;
}

.text-myentry {
    color: #8c91a0 !important;
}

.btn-myentry {
    background-color: #8c91a0 !important;
    color: #fff !important;
    border-color: #8c91a0 !important;
    height: 35px;
}

.text-revoked {
    color: #e87900 !important;
}

.btn-revoked {
    background-color: #e87900 !important;
    color: #fff !important;
    border-color: #e87900 !important;
    height: 35px;
}

.text-signed {
    color: #3297bf !important;
}

.btn-signed {
    background-color: #3297bf !important;
    color: #fff !important;
    border-color: #3297bf !important;
    height: 35px;
}

.text-strikethrough {
    color: #c4234e !important;
}

.btn-strikethrough {
    background-color: #c4234e !important;
    color: #fff !important;
    border-color: #c4234e !important;
    height: 35px;
}

.text-verified {
    color: #30aa67 !important;
}

.btn-verified {
    background-color: #30aa67 !important;
    color: #fff !important;
    border-color: #30aa67 !important;
    height: 35px;
}

.text-edit-view {
}

.text-exported {
    color: #000 !important;
}

.bg-myentry, .scheduler-item-myentry, .scheduler-item-draft, .scheduler-item-Draft {
    background-color: #8c91a0 !important;
}

.bg-revoked, .scheduler-item-revoked, .scheduler-item-Revoked {
    background-color: #e87900 !important;
}

.bg-signed, .scheduler-item-signed, .scheduler-item-Signed {
    background-color: #3297bf !important;
}

.bg-strikedthrough, .scheduler-item-StrikedThrough, .scheduler-item-StrikedThrough {
    background-color: #c4234e !important;
}

.bg-strikethrough, .scheduler-item-strikethrough, .scheduler-item-Strikethrough {
    background-color: #c4234e !important;
}

.bg-verified, .scheduler-item-verified, .scheduler-item-Verified {
    background-color: #30aa67 !important;
}

.text-garbage {
    color: #aca69b !important;
}

.text-marpolvi {
    color: #e0c13f !important;
}

.text-engine {
    color: #3ea9cd !important;
}

.text-engineparameters {
    color: #264d6b !important;
}

.text-ballast {
    color: #1c5e44 !important;
}

.text-deck {
    color: #c48a03 !important;
}

.text-scrubber {
    color: #8aa2a8 !important;
}

.text-incinerator {
    color: #ae2b2b !important;
}

.text-gmdss {
   color: #484848 !important;
}

.text-biofouling {
    color: #446821 !important;
}

.bg-garbage {
    background-color: #938d83 !important;
}

.bg-marpolvi {
    background-color: #e0c13f !important;
}

.bg-engine {
    background-color: #3ea9cd !important;
}

.bg-gmdss {
    background-color: #eabf10 !important;
}

.bg-engineparameters {
    background-color: #264d6b !important;
}

.bg-ballast {
    background-color: #1c5e44 !important;
}

.bg-deck {
    background-color: #c48a03 !important;
}

.bg-scrubber {
    background-color: #8aa2a8 !important;
}

.bg-incinerator {
    background-color: #ae2b2b !important;
}

.bg-biofouling {
    background-color: #446821 !important;
}

.border-radius-1 {
    border-radius: 2px !important;
}
/* Modals */

.modal-xl {
    max-width: 90%;
}

.modal-header {
    background-color: #fff;
}

.modal-footer {
    background-color: #fff;
}
/* Card */
.card {
    box-shadow: none !important;
    border: 1px solid #dbdbdb;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.015) !important;
}

.card-header {
    border-bottom: 1px solid #dbdbdb;
    color: #3b352a;
    background-color: #fafafa;
    font-weight: 600;
}

    .card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5, .card-header h6 {
        margin: 0px !important;
    }

    .card-footer {
        border-top: 1px solid #dbdbdb;
        color: #3b352a;
        background-color: #fafafa;
        font-weight: 600;
    }

.col-status {
    padding: 1px !important;
}

.card-status {
    border: none !important;
    border-radius: unset !important;
}

    .card-status .card-header {
        background-color: transparent !important;
        color: #fff !important;
        border-bottom: 1px solid #fff !important;
        border-radius: unset !important;
    }

    .card-status .card-body {
    }

.card-status-child {
    border: none !important;
    border-radius: unset !important;
}

    .card-status-child .card-header {
        background-color: #000 !important;
        color: #fff !important;
        border-bottom: 1px solid #000 !important;
        border-radius: unset !important;
    }

    .card-status-child .card-footer {
        background-color: #fff !important;
        color: #000 !important;
        border-top: 1px solid #dbdbdb !important;
        border-radius: unset !important;
    }

    .card-status-child .card-body {
        border-radius: unset !important;
    }

    .card-status-child .card-ellipsis {
        width: 99.9%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

[data-toggle="collapse"] .card-collapse-indicator:before {
    content: "\f107";
}

[data-toggle="collapse"].collapsed .card-collapse-indicator:before {
    content: "\f104";
}

[data-toggle="collapse"] .card-collapsed-indicator:before {
    content: "\f107";
}

[data-toggle="collapse"].collapsed .card-collapsed-indicator:before {
    content: "\f104";
}
/* Breadcrumb */
.breadcrumb {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 0.75rem 0.5rem !important;
    padding-top: 1rem !important;
    margin-bottom: 0px !important;
    list-style: none;
    background-color: transparent !important;
    border-radius: unset !important;
}

.breadcrumb-item a {
    color: #000;
}

.breadcrumb-item.active {
    color: #6c757d;
}
/* Badge */
.navbar-badge {
    right: 5px;
    top: 2px;
}

.nav-pills-images .nav-link.active, .nav-pills-images .show > .nav-link {
    opacity: 1;
}

.nav-pills-images .nav-link {
    opacity: 0.65;
}
/* Form Controls */
.form-control-select-list {
    padding: 0px !important;
    margin: 0px !important;
    border: none !important;
}

    .form-control-select-list option {
        padding: 10px !important;
        border-bottom: 1px solid #dbdbdb !important;
    }

.form-control-navbar-custom {
    padding: 5px;
    min-height: unset;
    height: auto;
    margin: 2px;
    font-size: 0.9rem;
}

    .form-control-navbar-custom option {
    }
/* Label */
label {
    margin-bottom: 0.25rem !important;
    font-weight: 600 !important;
}

.btn-group, .btn-group-vertical {
    position: inherit !important;
    display: inherit !important;
}

.form-check-label {
    font-weight: normal !important;
}

.form-check-label-ellipsis {
    font-weight: normal !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 98%;
    margin: 0px !important;
}
/* Footer */
.fixed-bottom {
    z-index: 1040;
}
/* Progress */
.progress-custom-container {
    width: 100px;
    height: 133px;
    display: table;
    margin: 0 auto !important;
}

.progress-custom {
    position: absolute;
    height: 133px;
    width: 100px;
    border-radius: unset;
}

.progress-custom-img {
    position: absolute;
    z-index: 1;
}

.progress-custom .progress-bar {
    position: absolute;
    bottom: 0%;
    width: 100%;
    border-radius: unset;
    font-weight: bold;
}

.progress-custom .progress-paused {
    height: 0px;
    opacity: 0 !important;
}

.progress-custom .progress-play {
    animation-name: animateBar;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 0.75s;
    opacity: 0.6 !important;
}

.progress-custom .progress-repaused {
    height: 0px;
    opacity: 0 !important;
}

.progress-custom .progress-replay {
    animation-name: animateBarReplay;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 1.25s;
    opacity: 0.95;
}

.progress-custom-value {
    position: absolute;
    width: 100%;
    top: 50%;
    color: inherit;
    z-index: 1;
}

    .progress-custom-value span {
        margin: 0 auto;
        text-align: center;
        width: auto;
        background: rgba(255,255,255,0.975);
        border-radius: 5px !important;
        color: inherit;
        padding: 2px 5px;
        font-size: 0.7rem;
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        border: 1px solid rgba(0,0,0,0.1);
        min-width: 40px !important;
        max-width: 50px !important;
        display: inherit;
        line-height: normal;
    }

@keyframes animateBar {
    0% {
        transform: translateY(100%);
        opacity: 1;
    }

    100% {
        transform: translateX(0);
        opacity: 0.95;
    }
}

@keyframes animateBarReplay {
    0% {
        transform: translateY(100%);
        opacity: 1;
    }

    100% {
        transform: translateX(0);
        opacity: 0.95;
    }
}

.k-state-focused {
    box-shadow: unset !important;
    box-shadow: none !important;
    transition: unset !important;
}

.k-button.k-state-focused, .k-button:focus {
    box-shadow: unset !important;
    box-shadow: none !important;
    transition: unset !important;
}

element {
}

.k-upload-button input {
    background: transparent !important;
    background-color: unset !important;
}

.k-i-x::before {
    content: "\f00d";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}
/* Backgrounds */

.bg-dark {
    background-color: #1a1f25 !important;
}

.bg-vessels {
    background-color: #2761cd !important;
}

.bg-offices {
    background-color: #72bb53 !important;
}

.bg-users {
    background-color: #b02e2c !important;
}

.text-vessels {
    color: cornflowerblue !important;
}

.text-offices {
    color: lightseagreen !important;
}

.text-users {
    color: mediumturquoise !important;
}
/* Loop Carousel */
@media (min-width: 768px) {
    .carousel-multiple .carousel-inner .carousel-item-right.active, .carousel-multiple .carousel-inner .carousel-item-next {
        transform: translateX(50%);
    }

    .carousel-multiple .carousel-inner .carousel-item-left.active, .carousel-multiple .carousel-inner .carousel-item-prev {
        transform: translateX(-50%);
    }
}

/* large - display 3 */
@media (min-width: 992px) {
    .carousel-multiple .carousel-inner .carousel-item-right.active, .carousel-multiple .carousel-inner .carousel-item-next {
        transform: translateX(33%);
        color: #666;
    }

    .carousel-multiple .carousel-inner .carousel-item-left.active, .carousel-multiple .carousel-inner .carousel-item-prev {
        transform: translateX(-33%);
        color: #666;
    }
}

@media (max-width: 768px) {
    .carousel-multiple .carousel-inner .carousel-item > div {
        display: none;
    }

        .carousel-multiple .carousel-inner .carousel-item > div:first-child {
            display: block;
        }
}

.carousel-multiple .carousel-inner .carousel-item.active, .carousel-multiple .carousel-inner .carousel-item-next, .carousel-multiple .carousel-inner .carousel-item-prev {
    display: flex;
}

.carousel-multiple .carousel-inner .carousel-item-right, .carousel-multiple .carousel-inner .carousel-item-left {
    transform: translateX(0);
}
/* Table Default */

.k-grid thead th {
    vertical-align: middle;
    border-bottom: 1px solid #dee2e6;
    border-bottom-width: 1px;
    color: #fff !important;
    background-color: #474135;
}

.k-grid tbody tr td {
    vertical-align: middle;
}

.k-grid tbody tr:nth-of-type(2n+1) {
    background-color: #f4f4f4;
}

.k-grid tbody tr:hover {
    color: #212529;
    background-color: #bbb6ae;
}

.k-grid.k-state-selected td, .table-custom .k-state-selected tr {
    color: #212529;
    background-color: #bbb6ae;
}
/* Table Custom */
.table-custom th, .k-grid table td {
    color: #212529;
}

.table-custom thead th {
    vertical-align: middle;
    border-bottom: 1px solid #dee2e6;
    border-bottom-width: 1px;
    color: #fff !important;
    background-color: #474135 !important;
}

.table-custom tbody tr td {
    vertical-align: middle;
}

.table-striped tbody tr:nth-of-type(2n+1) {
    background-color: #f4f4f4 !important;
}

.table-custom tbody tr:hover {
    color: #212529;
    background-color: #bbb6ae !important;
}

.table-custom .k-state-selected td, .table-custom .k-state-selected tr {
    color: #212529;
    background-color: #bbb6ae !important;
}
/* Table Default */

.k-grid table th, .k-grid table td {
    color: #212529;
}

.k-grid table thead th {
    vertical-align: middle;
    border-bottom: 1px solid #dee2e6;
    border-bottom-width: 1px;
    color: #fff !important;
    background-color: #656b7b !important;
}

.k-grid table tbody tr td {
    vertical-align: middle;
}

.k-grid table tbody tr:nth-of-type(2n+1) {
    background-color: #f4f4f4;
}

.k-grid table tbody tr:hover {
    color: #212529;
    background-color: #cfd1d8;
}

.k-grid table .k-state-selected td, .k-grid table .k-state-selected tr {
    color: #212529;
    background-color: #cfd1d8;
}

.k-pager-numbers .k-link, .k-pager-numbers .k-link:hover, .k-pager-numbers .k-state-selected {
    color: #212529;
    background-color: #cfd1d8;
}
/* Table Platform */

.container-fluid-platform .k-grid table th, .container-fluid-platform .k-grid table td {
    color: #212529;
}

.container-fluid-platform .k-grid table thead th {
    vertical-align: middle;
    border-bottom: 1px solid #dee2e6;
    border-bottom-width: 1px;
    color: #fff !important;
    background-color: #656b7b !important;
}

.container-fluid-platform .k-grid table tbody tr td {
    vertical-align: middle;
}

.container-fluid-platform .k-grid table tbody tr:nth-of-type(2n+1) {
    background-color: #f4f4f4;
}

.container-fluid-platform .k-grid table tbody tr:hover {
    color: #212529;
    background-color: #cfd1d8;
}

.container-fluid-platform .k-grid table .k-state-selected td, .container-fluid-platform .k-grid table .k-state-selected tr {
    color: #212529;
    background-color: #cfd1d8 !important;
}

.container-fluid-platform .k-pager-wrap > .k-link, .container-fluid-platform .k-pager-numbers .k-link, .container-fluid-platform .k-pager-numbers .k-link:hover {
    color: #fff !important;
    background-color: #656b7b !important;
}

.container-fluid-platform .k-pager-numbers .k-state-selected {
    color: #fff !important;
    background-color: #656b7b !important;
}
/* Table Garbage */
.container-fluid-garbage .k-grid table th, .container-fluid-garbage .k-grid table td {
    color: #212529;
}

.container-fluid-garbage .k-grid table thead th {
    vertical-align: middle;
    border-bottom: 1px solid #dee2e6;
    border-bottom-width: 1px;
    color: #fff !important;
    background-color: #474135 !important;
}

.container-fluid-garbage .k-grid table tbody tr td {
    vertical-align: middle;
}

.container-fluid-garbage .k-grid table tbody tr:nth-of-type(2n+1) {
    background-color: #f4f4f4;
}

.container-fluid-garbage .k-grid table tbody tr:hover {
    color: #212529;
    background-color: #bbb6ae !important;
}

.container-fluid-garbage .k-grid table .k-state-selected td, .container-fluid-garbage .k-grid table .k-state-selected tr {
    color: #212529;
    background-color: #bbb6ae !important;
}

.container-fluid-garbage .k-pager-numbers .k-link, .container-fluid-garbage .k-pager-numbers .k-link:hover {
    color: #fff !important;
    background-color: #474135 !important;
}

.container-fluid-garbage .k-pager-numbers .k-state-selected {
    color: #fff !important;
    background-color: #474135 !important;
}

/* Table Marpol */
.container-fluid-marpol .k-grid table th, .container-fluid-marpol .k-grid table td {
    color: #000;
}

.container-fluid-marpol .k-grid table thead th {
    vertical-align: middle;
    border-bottom: 1px solid #dee2e6;
    border-bottom-width: 1px;
    color: #000 !important;
    background-color: #e0c140 !important;
}

.container-fluid-marpol .k-grid table tbody tr td {
    vertical-align: middle;
}

.container-fluid-marpol .k-grid table tbody tr:nth-of-type(2n+1) {
    background-color: #f4f4f4 !important;
}

.container-fluid-marpol .k-grid table tbody tr:hover {
    color: #000;
    background-color: #f3e7b5 !important;
}

.container-fluid-marpol .k-grid table .k-state-selected td, .container-fluid-marpol .k-grid table .k-state-selected tr {
    color: #000;
    background-color: #f3e7b5 !important;
}

.container-fluid-marpol .k-pager-wrap > .k-link, .container-fluid-marpol .k-pager-numbers .k-link, .container-fluid-marpol .k-pager-numbers .k-link:hover {
    color: #000 !important;
    background-color: #e0c140 !important;
}

.container-fluid-marpol .k-pager-numbers .k-state-selected {
    color: #fff !important;
    background-color: #e0c140 !important;
}
/* Table Marine */
.container-fluid-marine .k-grid table th, .container-fluid-marine .k-grid table td {
    color: #000;
}

.container-fluid-marine .k-grid table thead th {
    vertical-align: middle;
    border-bottom: 1px solid #dee2e6;
    border-bottom-width: 1px;
    color: #000 !important;
    background-color: #6cb1e7 !important;
}

.container-fluid-marine .k-grid table tbody tr td {
    vertical-align: middle;
}

.container-fluid-marine .k-grid table tbody tr:nth-of-type(2n+1) {
    background-color: #f4f4f4 !important;
}

.container-fluid-marine .k-grid table tbody tr:hover {
    color: #000;
    background-color: #b5e2f3 !important;
}

.container-fluid-marine .k-grid table .k-state-selected td, .container-fluid-marine .k-grid table .k-state-selected tr {
    color: #000;
    background-color: #f3e7b5 !important;
}

.container-fluid-marine .k-pager-wrap > .k-link, .container-fluid-marine .k-pager-numbers .k-link, .container-fluid-marine .k-pager-numbers .k-link:hover {
    color: #000 !important;
    background-color: #6cb1e7 !important;
}

.container-fluid-marine .k-pager-numbers .k-state-selected {
    color: #000 !important;
    background-color: #6cb1e7 !important;
}
/* Table Incinerator */
.container-fluid-incinerator .k-grid table th, .container-fluid-incinerator .k-grid table td {
    color: #442121;
}

.container-fluid-incinerator .k-grid table thead th {
    vertical-align: middle;
    border-bottom: 1px solid #dee2e6;
    border-bottom-width: 1px;
    color: #fff !important;
    background-color: #ad2b2b !important;
}

.container-fluid-incinerator .k-grid table tbody tr td {
    vertical-align: middle;
}

.container-fluid-incinerator .k-grid table tbody tr:nth-of-type(2n+1) {
    background-color: #f4f4f4 !important;
}

.container-fluid-incinerator .k-grid table tbody tr:hover {
    color: #442121;
    background-color: #ff9696 !important;
}

.container-fluid-incinerator .k-grid table .k-state-selected td, .container-fluid-incinerator .k-grid table .k-state-selected tr {
    color: #ffffff;
    background-color: #ad2b2b !important;
}

.container-fluid-incinerator .k-pager-numbers .k-link {
    color: #fff !important;
    background-color: #3b352a !important;
}

    .container-fluid-incinerator .k-pager-numbers .k-state-selected, .container-fluid-incinerator .k-pager-numbers .k-link:hover {
        color: #fff !important;
        background-color: #ad2b2b !important;
    }

/* Table Biofouling */
.container-fluid-biofouling .k-grid table th, .container-fluid-biofouling .k-grid table td {
    color: #000;
}

.container-fluid-biofouling .k-grid table thead th {
    vertical-align: middle;
    border-bottom: 1px solid #dee2e6;
    border-bottom-width: 1px;
    color: #fff !important;
    background-color: #446821 !important;
}

.container-fluid-biofouling .k-grid table tbody tr td {
    vertical-align: middle;
}

.container-fluid-biofouling .k-grid table tbody tr:nth-of-type(2n+1) {
    background-color: #f4f4f4 !important;
}

.container-fluid-biofouling .k-grid table tbody tr:hover {
    color: #000;
    background-color: #c6d9b4 !important;
}

.container-fluid-biofouling .k-grid table .k-state-selected td, .container-fluid-biofouling .k-grid table .k-state-selected tr {
    color: #000;
    background-color: #c6d9b4 !important;
}

.container-fluid-biofouling .k-pager-wrap > .k-link, .container-fluid-biofouling .k-pager-numbers .k-link, .container-fluid-biofouling .k-pager-numbers .k-link:hover {
    color: #000 !important;
    background-color: #c6d9b4 !important;
}

.container-fluid-biofouling .k-pager-numbers .k-state-selected {
    color: #fff !important;
    background-color: #446820 !important;
}

/* Table Engine Parameters */
.container-fluid-engineparameters .k-grid table th, .container-fluid-engineparameters .k-grid table td {
    color: #212529;
}

.container-fluid-engineparameters .k-grid table thead th {
    vertical-align: middle;
    border-bottom: 1px solid #dee2e6;
    border-bottom-width: 1px;
    color: #fff !important;
    background-color: #264d6b !important;
}

.container-fluid-engineparameters .k-grid table tbody tr td {
    vertical-align: middle;
}

.container-fluid-engineparameters .k-grid table tbody tr:nth-of-type(2n+1) {
    background-color: #f4f4f4 !important;
}

.container-fluid-engineparameters .k-grid table tbody tr:hover {
    color: #212529;
    background-color: #b4c5d2 !important;
}

.container-fluid-engineparameters .k-grid table .k-state-selected td, .container-fluid-engineparameters .k-grid table .k-state-selected tr {
    color: #212529;
    background-color: #b4c5d2 !important;
}

.container-fluid-engineparameters .k-pager-numbers .k-link, .container-fluid-engineparameters .k-pager-numbers .k-link:hover {
    color: #fff !important;
    background-color: #264d6b !important;
}

.container-fluid-engineparameters .k-pager-numbers .k-state-selected {
    color: #fff !important;
    background-color: #264d6b !important;
}


/* Table Ballast */
.container-fluid-ballast .k-grid table th, .container-fluid-ballast .k-grid table td {
    color: #000;
}

.container-fluid-ballast .k-grid table thead th {
    vertical-align: middle;
    border-bottom: 1px solid #dee2e6;
    border-bottom-width: 1px;
    color: #fff !important;
    background-color: #1c5e44 !important;
}

.container-fluid-ballast .k-grid table tbody tr td {
    vertical-align: middle;
}

.container-fluid-ballast .k-grid table tbody tr:nth-of-type(2n+1) {
    background-color: #f4f4f4 !important;
}

.container-fluid-ballast .k-grid table tbody tr:hover {
    color: #000;
    background-color: #1ca589 !important;
}

.container-fluid-ballast .k-grid table .k-state-selected td, .container-fluid-ballast .k-grid table .k-state-selected tr {
    color: #000;
    background-color: #1ca589 !important;
}

.container-fluid-ballast .k-pager-wrap > .k-link, .container-fluid-ballast .k-pager-numbers .k-link, .container-fluid-ballast .k-pager-numbers .k-link:hover {
    color: #000 !important;
    background-color: #1ca589 !important;
}

.container-fluid-ballast .k-pager-numbers .k-state-selected {
    color: #fff !important;
    background-color: #1c5e44 !important;
}



/* Table Deck  */
.container-fluid-deck .k-grid table th, .container-fluid-deck .k-grid table td {
    color: #000;
}

.container-fluid-deck .k-grid table thead th {
    vertical-align: middle;
    border-bottom: 1px solid #dee2e6;
    border-bottom-width: 1px;
    color: #fff !important;
    background-color: #c48a03 !important;
}

.container-fluid-deck .k-grid table tbody tr td {
    vertical-align: middle;
}

.container-fluid-deck .k-grid table tbody tr:nth-of-type(2n+1) {
    background-color: #f4f4f4 !important;
}

.container-fluid-deck .k-grid table tbody tr:hover {
    color: #000;
    background-color: #c48a03 !important;
}

.container-fluid-deck .k-grid table .k-state-selected td, .container-fluid-deck .k-grid table .k-state-selected tr {
    color: #000;
    background-color: #c48a03 !important;
}

.container-fluid-deck .k-pager-wrap > .k-link, .container-fluid-deck .k-pager-numbers .k-link, .container-fluid-deck .k-pager-numbers .k-link:hover {
    color: #000 !important;
    background-color: #c48a03 !important;
}

.container-fluid-deck .k-pager-numbers .k-state-selected {
    color: #fff !important;
    background-color: #c48a03 !important;
}



/* Table GMDSS */


.container-fluid-gmdss .k-grid table th, .container-fluid-gmdss .k-grid table td {
    color: #484848;
}

.container-fluid-gmdss .k-grid table thead th {
    vertical-align: middle;
    border-bottom: 1px solid #dee2e6;
    border-bottom-width: 1px;
    color: #484848 !important;
    background-color: #eabf10 !important;
}

.container-fluid-gmdss .k-grid table tbody tr td {
    vertical-align: middle;
}

.container-fluid-gmdss .k-grid table tbody tr:nth-of-type(2n+1) {
    background-color: #f4f4f4 !important;
}

.container-fluid-gmdss .k-grid table tbody tr:hover {
    color: #484848;
    background-color: #cfd1d8 !important;
}

.container-fluid-gmdss .k-grid table .k-state-selected td, .container-fluid-gmdss .k-grid table .k-state-selected tr {
    color: #484848;
    background-color: #cfd1d8 !important;
}

.container-fluid-gmdss .k-pager-wrap > .k-link, .container-fluid-gmdss .k-pager-numbers .k-link, .container-fluid-gmdss .k-pager-numbers .k-link:hover {
    color: #484848 !important;
    background-color: #eabf10 !important;
}

.container-fluid-gmdss .k-pager-numbers .k-state-selected {
    color: #484848 !important;
    background-color: #eabf10 !important;
}

/* Table Engine */
.container-fluid-engine .k-grid table th, .container-fluid-engine .k-grid table td {
    color: #000;
}

.container-fluid-engine .k-grid table thead th {
    vertical-align: middle;
    border-bottom: 1px solid #dee2e6;
    border-bottom-width: 1px;
    color: #000 !important;
    background-color: #45A7C8 !important;
}

.container-fluid-engine .k-grid table tbody tr td {
    vertical-align: middle;
}

.container-fluid-engine .k-grid table tbody tr:nth-of-type(2n+1) {
    background-color: #f4f4f4 !important;
}

.container-fluid-engine .k-grid table tbody tr:hover {
    color: #000;
    background-color: #cbdbe7 !important;
}

.container-fluid-engine .k-grid table .k-state-selected td, .container-fluid-engine .k-grid table .k-state-selected tr {
    color: #000;
    background-color: #cbdbe7 !important;
}

.container-fluid-engine .k-pager-wrap > .k-link, .container-fluid-engine .k-pager-numbers .k-link, .container-fluid-engine .k-pager-numbers .k-link:hover {
    color: #000 !important;
    background-color: #45A7C8 !important;
}

.container-fluid-engine .k-pager-numbers .k-state-selected {
    color: #fff !important;
    background-color: #45A7C8 !important;
}

/* Kendo */
.k-input.k-textbox, .k-textarea, .k-textbox {
    width: 100%;
    display: block;
}

.k-tabstrip > .k-content {
    padding: 1.25rem;
    height: auto !important;
}

.k-block ::selection, .k-panel ::selection, .k-widget ::selection {
    height: auto !important;
}

.k-action-buttons .k-button:active, .k-button-group > input[type="radio"]:checked + .k-button, .k-button-group > input[type="checkbox"]:checked + .k-button, .k-button.k-state-active, .k-button.k-state-selected, .k-button:active, .k-editor-toolbar a.k-tool.k-state-active, .k-editor-toolbar a.k-tool.k-state-selected, .k-editor-toolbar a.k-tool:active, .k-fieldselector .k-list li.k-item.k-state-active, .k-fieldselector .k-list li.k-item:active, .k-gantt-views li.k-state-selected, .k-pivot-toolbar .k-button.k-state-active, .k-pivot-toolbar .k-button:active, .k-scheduler-views li.k-state-selected, .k-spreadsheet-filter.k-state-active {
    border-color: #bfc6d0;
    color: #fff;
    background-color: #c7cdd5;
}

.k-window {
    width: 100% !important;
    max-width: 1180px !important;
    min-width: 300px !important;
    margin: 1.75rem auto !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

    .k-window .k-prompt-container, .k-window-content {
        max-height: 75vh !important;
    }

    .k-window.add-port-insight {
        width: 50% !important;
    }

.k-edit-form-container {
    width: 100% !important;
    display: table;
    min-width: unset !important;
    max-width: unset !important;
    padding-right: 7.5px;
    padding-left: 7.5px;
    margin-right: auto;
    margin-left: auto;
}

.k-window-verify {
    width: 380px !important;
    max-width: 380px !important;
}

    .k-window-verify .k-button {
        margin: 7px !important;
    }

.k-datepicker .k-select, .k-datetimepicker .k-select, .k-timepicker .k-select, .k-numerictextbox .k-numeric-wrap .k-select {
    border-color: #3b352a;
    color: #fff;
    background-color: #3b352a;
}

.k-datepicker {
}

.k-switch-container {
    background-color: transparent !important;
    max-height: 3rem;
    max-width: 4rem;
    padding: 5px 3px;
}
    .container-fluid-platform .k-combobox .k-select, .container-fluid-platform .k-datepicker .k-select, .container-fluid-platform .k-datetimepicker .k-select, .container-fluid-platform .k-timepicker .k-select, .container-fluid-platform .k-numerictextbox .k-numeric-wrap .k-select {
    border-color: #556b7b;
    color: #fff;
    background-color: #556b7b;
}

.container-fluid-garbage .k-combobox .k-select, .container-fluid-garbage .k-datepicker .k-select, .container-fluid-garbage .k-datetimepicker .k-select, .container-fluid-garbage .k-timepicker .k-select, .container-fluid-garbage .k-numerictextbox .k-numeric-wrap .k-select {
    border-color: #3b352a;
    color: #fff;
    background-color: #3b352a;
}

.container-fluid-marpol .k-combobox .k-select, .container-fluid-marpol .k-datepicker .k-select, .container-fluid-marpol .k-datetimepicker .k-select, .container-fluid-marpol .k-timepicker .k-select, .container-fluid-marpol .k-numerictextbox .k-numeric-wrap .k-select {
    border-color: #e0c140;
    color: #000;
    background-color: #e0c140;
}

.container-fluid-marine .k-combobox .k-select, .container-fluid-marine .k-datepicker .k-select, .container-fluid-marine .k-datetimepicker .k-select, .container-fluid-marine .k-timepicker .k-select, .container-fluid-marine .k-numerictextbox .k-numeric-wrap .k-select {
    border-color: #6cb1e7;
    color: #000;
    background-color: #6cb1e7;
}

.container-fluid-incinerator .k-combobox .k-select, .container-fluid-incinerator .k-datepicker .k-select, .container-fluid-incinerator .k-datetimepicker .k-select, .container-fluid-marine .k-timepicker .k-select, .container-fluid-incinerator .k-numerictextbox .k-numeric-wrap .k-select {
    border-color: #ad2b2b;
    color: #fff;
    background-color: #ad2b2b;
}

.container-fluid-biofouling .k-datepicker .k-select, .container-fluid-biofouling .k-datetimepicker .k-select, .container-fluid-biofouling .k-timepicker .k-select, .container-fluid-biofouling .k-numerictextbox .k-numeric-wrap .k-select {
    border-color: #446821;
    color: #fff;
    background-color: #446821;
}

.container-fluid-engineparameters .k-combobox .k-select, .container-fluid-engineparameters .k-datepicker .k-select, .container-fluid-engineparameters .k-datetimepicker .k-select, .container-fluid-engineparameters .k-timepicker .k-select, .container-fluid-engineparameters .k-numerictextbox .k-numeric-wrap .k-select {
    border-color: #264d6b;
    color: #fff;
    background-color: #264d6b;
}

.container-fluid-ballast .k-combobox .k-select, .container-fluid-ballast .k-datepicker .k-select, .container-fluid-ballast .k-datetimepicker .k-select, .container-fluid-biofouling .k-timepicker .k-select, .container-fluid-ballast .k-numerictextbox .k-numeric-wrap .k-select {
    border-color: #1c5e44;
    color: #fff;
    background-color: #1c5e44;
}
.container-fluid-engine .k-combobox .k-select, .container-fluid-engine .k-datepicker .k-select, .container-fluid-engine .k-datetimepicker .k-select, .container-fluid-engine .k-timepicker .k-select, .container-fluid-engine .k-numerictextbox .k-numeric-wrap .k-select {
    border-color: #45A7C8;
    color: #000;
    background-color: #45A7C8;
}

.k-dateinput, .k-datepicker, .k-datetimepicker, .k-timepicker {
    line-height: 1.9;
}

.k-tabstrip-items .k-item {
    color: #212529;
}

.k-tabstrip-left > .k-tabstrip-items .k-item {
    border-right-color: transparent;
    border-left: none !important;
    border-top: 1px solid #b2aca4;
    border-bottom: none !important;
    background-color: #fff;
    color: #212529;
    border-radius: unset !important;
    font-weight: 600 !important;
}

    .k-tabstrip-left > .k-tabstrip-items .k-item.k-state-active, .k-tabstrip-left > .k-tabstrip-items .k-item.k-state-hover {
        border-right-color: transparent;
        border-left: none !important;
        border-top: 1px solid #b2aca4;
        border-bottom: none !important;
        background-color: #b2aca4;
        color: #212529;
        border-radius: unset !important;
        font-weight: 600 !important;
    }

.k-tabstrip > .k-content {
    background-color: #b2aca4;
    color: #212529;
    border-radius: unset !important;
}

.k-menu-group, .k-menu-vertical {
    padding: 0;
}

    .k-menu-group .k-item > .k-link, .k-menu-vertical .k-item > .k-link {
        padding: 5px 15px;
        border-bottom: 1px solid #eee;
    }
/*Pager links*/
.k-pager-wrap > .k-link {
    margin: 2px !important;
    color: #fff !important;
    background-color: #3b352a;
    border: none !important;
    border-radius: 100% !important;
}

    .k-pager-wrap > .k-link:hover {
        background: #474135;
    }

.k-pager-wrap .k-link.k-state-disabled {
    opacity: 0.5;
}

.k-pager-wrap.k-pager-lg .k-pager-numbers, .k-pager-wrap.k-pager-md .k-pager-numbers, .k-pager-wrap.k-pager-sm .k-pager-numbers {
    border-radius: unset;
    position: unset;
    overflow: unset;
    -ms-flex-direction: unset;
    flex-direction: unset;
    width: unset;
    height: unset;
    box-sizing: unset;
    bottom: unset;
    z-index: unset;
    border-style: unset;
    border-width: unset;
    width: auto !important;
}

.k-pager-sizes, .k-pager-numbers-wrap .k-dropdown {
    display: none !important;
    visibility: hidden !important;
}

.k-current-page {
    pointer-events: none !important;
}

.k-pager-numbers-wrap .k-dropdown {
    width: auto !important;
    border: 1px solid #eee;
    padding: 5px;
    margin: 0px 10px;
}

.k-pager-wrap .k-pager-numbers {
    margin: 0px !important;
    padding: 0px !important;
}

.k-pager-wrap.k-pager-lg .k-pager-nav + .k-pager-numbers-wrap, .k-pager-wrap.k-pager-md .k-pager-nav + .k-pager-numbers-wrap, .k-pager-wrap.k-pager-sm .k-pager-nav + .k-pager-numbers-wrap {
    width: calc(2 * (2px + .75rem + 1.5em));
    height: calc(1 * (2px + .75rem + 1.5em));
    box-sizing: border-box;
    border-color: inherit;
    margin: 2px;
    width: auto;
}

.k-pager-wrap.k-pager-lg .k-pager-numbers .k-link, .k-pager-wrap.k-pager-lg .k-pager-numbers .k-state-selected, .k-pager-wrap.k-pager-md .k-pager-numbers .k-link, .k-pager-wrap.k-pager-md .k-pager-numbers .k-state-selected, .k-pager-wrap.k-pager-sm .k-pager-numbers .k-link, .k-pager-wrap.k-pager-sm .k-pager-numbers .k-state-selected {
    margin: 0;
    border-width: 0;
    width: auto;
}
/* Kendo Export PDF */

.k-pdf-export, .k-pdf-export * {
    font-family: 'Arial Unicode MS';
}

    .k-pdf-export .k-icon {
        display: none;
    }

.page-template {
    font-family: Arial, Helvetica, sans-serif;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

    .page-template > * {
        position: absolute;
        left: 20px;
        right: 20px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
    }

    .page-template .header {
        display: table;
        text-align: center;
        padding: 0px;
        width: 100%;
        border-bottom: 1px solid #888;
        color: #888;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 15px;
        left: 0;
        right: 0;
    }

        .page-template .header .img-header {
            height: 50px !important;
        }

.img-header {
    height: 60px !important;
}


    .page-template .footer {
        position: absolute;
        bottom: 30px;
        left: 30px;
        right: 30px;
        border-top: 1px solid #888;
        text-align: center;
        color: #888;
    }

    .page-template .watermark {
        font-weight: bold;
        font-size: 400%;
        text-align: center;
        margin-top: 30%;
        color: #aaaaaa;
        opacity: 0.1;
        transform: rotate(-35deg) scale(1.7, 1.5);
    }

.k-pdf-export {
    font-family: 'Arial Unicode MS';
    font-size: 12px;
    letter-spacing: normal !important;
    text-overflow: unset !important;
    white-space: unset !important;
}

    .k-pdf-export .k-grid-filter, .k-pdf-export .k-checkbox {
        display: none;
    }

    .k-pdf-export table {
        overflow: unset !important;
        letter-spacing: normal !important;
        font-size: 12px;
        border: 1px solid #dbdbdb !important;
        white-space: unset !important;
        text-overflow: unset !important;
        line-height: normal !important;
    }

        .k-pdf-export table * {
            overflow: unset !important;
            letter-spacing: normal !important;
            font-size: 12px;
            white-space: unset !important;
            text-overflow: unset !important;
            line-height: normal !important;
            min-width: unset !important;
        }

    .k-pdf-export colgroup > col {
        overflow: unset !important;
        letter-spacing: normal !important;
        white-space: unset !important;
        text-overflow: unset !important;
    }

    .k-pdf-export .k-grid td {
        background-color: transparent !important;
        background: none !important;
        overflow: unset !important;
        letter-spacing: normal !important;
        font-size: 12px;
        white-space: unset !important;
        text-overflow: unset !important;
        width: auto !important;
        padding: 10px !important;
        min-width: unset !important;
    }

    .k-pdf-export .k-grid tr {
        background-color: #fff !important;
        background: #fff !important;
        overflow: unset !important;
        letter-spacing: normal !important;
        font-size: 12px;
        white-space: unset !important;
        text-overflow: unset !important;
        min-width: unset !important;
    }

    .k-pdf-export .k-grid tr, .k-pdf-export th {
        background-color: #fff !important;
        background: #fff !important;
        overflow: unset !important;
        letter-spacing: normal !important;
        font-size: 12px;
        white-space: unset !important;
        text-overflow: unset !important;
        font-family: Arial, Helvetica, sans-serif;
        width: auto !important;
        min-width: unset !important;
    }

    .k-pdf-export .k-grid th {
        overflow: unset !important;
        letter-spacing: normal !important;
        font-size: 12px;
        white-space: unset !important;
        text-overflow: unset !important;
        width: auto !important;
        padding: 10px !important;
        min-width: unset !important;
    }

    .k-pdf-export .k-grid tr:nth-of-type(2n+1) {
        background: #f1f1f1 !important;
        background-color: #f1f1f1 !important;
        overflow: unset !important;
        font-size: 12px;
        letter-spacing: normal !important;
        white-space: unset !important;
        text-overflow: unset !important;
        font-family: Arial, Helvetica, sans-serif;
        min-width: unset !important;
    }

    .k-pdf-export .k-grid thead tr, .k-pdf-export .k-grid thead tr th {
        overflow: unset !important;
        letter-spacing: normal !important;
        font-size: 12px;
        white-space: unset !important;
        text-overflow: unset !important;
        font-family: Arial, Helvetica, sans-serif;
        width: auto !important;
        min-width: unset !important;
    }

    .k-pdf-export .k-grid tbody tr {
        background-color: #fff !important;
        background: #fff !important;
        overflow: unset !important;
        letter-spacing: normal !important;
        font-size: 12px;
        white-space: unset !important;
        text-overflow: unset !important;
        min-width: unset !important;
    }

        .k-pdf-export .k-grid tbody tr:nth-of-type(2n+1) {
            background: #f5f5f5 !important;
            background-color: #f5f5f5 !important;
            overflow: unset !important;
            letter-spacing: normal !important;
            font-size: 12px;
            white-space: unset !important;
            text-overflow: unset !important;
            width: auto !important;
            min-width: unset !important;
        }

    .k-pdf-export .k-header-column-menu {
        display: inline-block;
        white-space: unset !important;
        text-overflow: unset !important;
    }
/* Overwrites */

.k-window-titlebar .k-button-icon {
    color: #333 !important;
    background-color: transparent !important;
}

    .k-window-titlebar .k-button-icon:hover {
        color: #000 !important;
        background-color: transparent !important;
    }
/* Overwrites */
.disabled, .disable, input[type="checkbox"]:disabled, input[type=checkbox][disabled], input[type="text"]:disabled, input[type="radio"]:disabled, input[type="range"]:disabled, input[type="number"]:disabled, input:disabled {
    opacity: 0.5 !important;
    pointer-events: none !important;
    filter: grayscale(100%);
    background: #f1f1f1 !important;
}

.navbar-badge {
    border-radius: 100% !important;
}

.modal-backdrop.show {
    opacity: .8;
}

.modal-please-wait {
    z-index: 99999999 !important;
    background-color: transparent !important;
    -webkit-user-select: none; /* Chrome all / Safari all */
    -moz-user-select: none; /* Firefox all */
    -ms-user-select: none; /* IE 10+ */
    user-select: none; /* Likely future */
    overflow: hidden !important;
}

    .modal-please-wait .modal-content {
        width: auto !important;
    }

.scrollBarHide {
    overflow-y: scroll; /* Add the ability to scroll */
    display: none;
}

    /* Hide scrollbar for Chrome, Safari and Opera */
    .scrollBarHide::-webkit-scrollbar {
        display: none;
    }
/* Hide scrollbar for IE, Edge and Firefox */
.scrollBarHide {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

.mr-width .k-dateinput, .mr-width .k-datepicker, .mr-width .k-datetimepicker, .mr-width .k-timepicker {
    width: 100% !important;
}

#divDryDock {
    border: none !important;
}

/* Button ORB Part 1 Logbook */
.container-fluid-orbpart1 .btn-primary, .container-fluid-orbpart1 .k-button {
    background-color: #656b7b !important;
    border-color: #676767 !important;
    color: #fff !important;
}

.container-fluid-orbpart1 .k-switch-container {
    color: #fff;
    background-color: #656b7b !important;
}





.container-fluid-orbpart1 .btn-primary:hover, .container-fluid-orbpart1 .k-button:hover {
    background-color: #656b7b !important;
    border-color: #676767 !important;
    color: #000 !important;
}

.container-fluid-orbpart1 .btn-primary.focus, .container-fluid-primary .btn-primary:focus, .container-fluid-orbpart1 .k-button:focus {
    background-color: #656b7b !important;
    border-color: #676767 !important;
    color: #000 !important;
}

.container-fluid-orbpart1 .btn-primary.disabled, .container-fluid-orbpart1 .btn-primary:disabled, .container-fluid-orbpart1 .k-button:disabled {
    background-color: #656b7b !important;
    border-color: #676767 !important;
    color: #000 !important;
}

.tooltip-inner {
    max-width: 275px;
}

/*Hide time icon from datetimepicker*/
.hidden-time .k-link-time {
    display: none;
}

.sidebar-bottom-fixed {
    bottom: 60px;
    position: fixed;
}

/*Biofouling*/

.container-fluid-Biofouling378 label {
    white-space: nowrap;
    display: inline-block;
}


.processedPackage {
    background-color: lightgreen !important
}

.processedPackage:hover {
    background-color: green !important
}

.unprocessedPackage {
    background-color: lightcoral !important
}

    .unprocessedPackage:hover {
        background-color: coral !important
    }

.form-element-inline-m {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    column-gap: 6rem;
}
.form-element-up-down {
    display: flex;
    flex-direction: column;
}

/* START Monitoring CSS */
#MonitoringGrid.k-grid td {
    padding-top: 0.5px !important;
    padding-bottom: 0.5px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    border: 1px solid #ddd !important;
}

#MonitoringGrid .k-grid-custom-action {
    padding: 2px 2px;
    line-height: 1.2;
    border-radius: 8px !important; /* Controls the roundness */
}

#MonitoringGrid.k-grid .col-small {
    max-width: 150px !important;
    min-width: 75px !important;
    overflow: hidden;
    white-space: nowrap;
}
.compact-grid.k-grid .k-grid-header th.k-header,
.compact-grid.k-grid td,
.compact-grid .k-table-th,
.compact-grid .k-table-td {
    padding: 0.50rem !important;
}

#monitorBreadcrumb .breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    font-size: 14px;
}
#monitorBreadcrumb.breadcrumb span {
    color: #6c757d;
}

#monitorBreadcrumb.breadcrumb a {
    color: black;
    text-decoration: none;
    margin-right: 8px;
}
#monitorBreadcrumb.breadcrumb a:hover {
    color: #007bff; /* blue on hover, or use any color you prefer */
    green cursor: pointer;
}
#monitorBreadcrumb.breadcrumb a::after {
    content: "/";
    margin-left: 8px;
    color: #6c757d;
}

.bg-green {
    background-color: green;
}

.bg-blue {
    background-color: #007bff;
}

.bg-yellow {
    background-color: yellow;
}

.bg-grey {
    background-color: grey;
}

.page-title-monitor {
    margin: 0 !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}
.page-header-inline-monitor {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* END Monitoring CSS */


.k-grid .row-strikethrough td:not(:has(.text-strikethrough)):not(:has(button)) {
    text-decoration: line-through;
    text-decoration-thickness: 1.3px;
    text-decoration-color: red;
}


/*start of styling for vessel dropdown on layout*/

.vessel-dropdown {
    border: 2px solid #ffffff;
    border-radius: 8px;
    padding: 2px 6px;
    box-shadow: 0 0 6px rgba(255,255,255,0.35);
}


.vessel-container {
    display: flex;
    flex-direction: column;
    height: 560px; /* increased to show ~5 vessels */
}

.vessel-header {
    display: flex;
    justify-content: space-between;
    padding: 15px 15px 10px;
    font-weight: 600;
}

.vessel-search {
    padding: 0 15px 10px;
}

    .vessel-search input {
        width: 100%;
        padding: 6px 8px;
        border: 1px solid #ddd;
        border-radius: 6px;
        font-size: 13px;
    }

.vessel-tabs {
    display: flex;
    gap: 6px;
    background: #eef1f4;
    padding: 4px;
    margin: 0 15px 15px;
    border-radius: 8px;
}

.tab {
    border: none;
    background: transparent;
    padding: 5px 10px;
    font-size: 13px;
    border-radius: 6px;
    cursor: pointer;
}

    .tab.active {
        background: white;
        box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    }

.selected-vessel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f3f5f7;
    margin: 0 15px 15px;
    padding: 10px;
    border-radius: 8px;
}

.vessel-section {
    font-size: 12px;
    font-weight: 600;
    color: #7a7a7a;
    margin: 0 15px 8px;
}

.vessel-list {
    overflow-y: auto;
    flex: 1;
    padding: 0 10px 10px 10px;
}

.vessel-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
}

    .vessel-item:hover {
        background: #f4f6f8;
    }

.vessel-info {
    flex: 1;
}

.vessel-name {
    font-weight: 600;
    font-size: 14px;
}

.vessel-meta {
    font-size: 12px;
    color: #777;
}

.status {
    background: #ccebd6;
    color: #0a7a3d;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    margin-left: 6px;
}

.star {
    cursor: pointer;
    color: #bbb;
}

    .star.fav {
        color: #f4b400;
    }

.vessel-list::-webkit-scrollbar {
    width: 6px;
}

.vessel-list::-webkit-scrollbar-thumb {
    background: #cfcfcf;
    border-radius: 4px;
}

.vessel-footer {
    padding: 10px 15px;
    border-top: 1px solid #eee;
    background: #fff;
    display: flex;
    justify-content: flex-end;
}

.vessel-ok {
    min-width: 70px;
}

.hide-caret.dropdown-toggle::after {
    display: none;
}

.vessel-dropdown .dropdown-menu {
    width: 420px;
    padding: 0 !important;
    background: #fff;
    border-radius: 10px;
    border: none !important;
    min-width: unset !important;
    margin-top: 8px;
    box-shadow: 0 12px 28px rgba(0,0,0,0.25);
}

.vessel-dropdown input[type="checkbox"] {
    pointer-events: auto;
    cursor: pointer;
}

.vessel-search input {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

/*end of styling for vessel dropdown on layout*/

body .main-sidebar {
    top: 60px !important;
    height: calc(100vh - 60px) !important;
}

    body .main-sidebar,
    body .main-sidebar::before {
        top: 60px !important;
        height: calc(100vh - 60px) !important;
    }

        /* Fix the expanded (hover) panel */
        /*body .main-sidebar:hover {
            top: 60px !important;
        }*/

.brand-link {
    display: none !important;
}

.main-header {
    margin-left: 0 !important;
    color:black;
    background-color: white;
}

.sidebar-mini.sidebar-collapse .main-header {
    margin-left: 0 !important;
}

.layout-navbar-fixed.layout-fixed .wrapper .sidebar {
    margin-top: 0;
    background-color: #0f172b;
}

/* Sidebar */
.main-sidebar {
    width: 250px;
    /*overflow: visible !important;*/
    overflow: hidden !important;
    transform: translateZ(0); /* prevents subpixel jitter */
}

.sidebar-collapse .main-sidebar {
    width: 80px;
}

/* Content + Footer */
.content-wrapper,
.main-footer {
    margin-left: 250px !important;
}

.sidebar-collapse .content-wrapper,
.sidebar-collapse .main-footer {
    margin-left: 80px !important;
}

/* Sidebar width */
.main-sidebar {
    width: 250px;
    overflow: visible !important;
    position: relative;
}

.sidebar-collapse .main-sidebar {
    width: 80px;
}

/* Content + footer move */
.content-wrapper,
.main-footer {
    margin-left: 250px !important;
    transition: margin-left 0.3s ease;
}

.sidebar-collapse .content-wrapper,
.sidebar-collapse .main-footer {
    margin-left: 80px !important;
}

.sidebar-toggle-btn {
    position: fixed;
    top: 5px;
    right: -15px;
    background: #343a40;
    color: #fff;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px;
    min-height: 32px;
    padding: 0 !important;
    line-height: 32px;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: #1f2d3d;
    color: #fff;
    box-sizing: border-box;
}

#sidebarToggle i {
    transition: transform 0.3s ease;
}

.sidebar-collapse #sidebarToggle i {
    transform: rotate(180deg);
}

.sidebar {
    /*overflow: visible !important;*/
    overflow: hidden !important;
}

/* 1. Lock sidebar width on hover */
.sidebar-mini.sidebar-collapse .main-sidebar:hover {
    width: 80px !important;
}


    /* 2. Prevent text from appearing */
    .sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-sidebar .nav-link p {
        display: none !important;
    }


/* 3. Prevent padding/indent expansion */
.sidebar-mini.sidebar-collapse .nav-sidebar .nav-link {
    white-space: nowrap;
    overflow: hidden;
}



/* 5. Force consistent icon alignment */
.sidebar-mini.sidebar-collapse .nav-sidebar .nav-link {
    padding-left: 0.5rem !important;
}


/*  6. Prevent width transition glitch */
.sidebar-mini.sidebar-collapse .main-sidebar {
    transition: none !important;
    min-width: 70px;
    max-width: 70px;
}

.nav-sidebar .nav-link {
    overflow: hidden !important;
}
    .nav-sidebar .nav-link:hover {
        width: 100% !important;
    }

.nav-sidebar .nav-header {
    font-size: 11px;
    font-weight: 600;
    color: #6c757d;
    padding: 10px 15px;
    letter-spacing: 0.5px;
}




.nav-sidebar .nav-header {
    font-size: 11px;
    font-weight: 600;
    color: #6c757d;
    padding: 10px 15px;
    letter-spacing: 0.5px;
}


.sidebar-mini.sidebar-collapse .nav-sidebar::before {
    content: "";
    display: block;
    height: 40px; /* spacing */
    border-bottom: 1px solid rgb(161, 161, 161); /* subtle divider */
    margin-bottom: 5px; /* space between line and Home icon */
    width:80%;
}

body {
    position: static !important;
}

/* Make the ul a positioned container */
.main-sidebar .sidebar .nav.nav-sidebar {
    position: relative;
    overflow: visible !important;
}

    /* Wrap only the scrollable items — target all li except the last two */
    .main-sidebar .sidebar .nav.nav-sidebar li:not(:nth-last-child(-n+2)) {
        /* these scroll normally */
    }

/* Make a pseudo scroll container using the nav wrapper */
.main-sidebar .sidebar nav {
    height: calc(100vh - 3.5rem - 130px);
    overflow-y: auto !important;
    overflow-x: hidden;
}

/* Pin the last two li items to bottom, outside scroll flow */
.main-sidebar .sidebar .nav.nav-sidebar > li:not(.has-treeview):nth-last-child(1),
.main-sidebar .sidebar .nav.nav-sidebar > li:not(.has-treeview):nth-last-child(2)  {
    position: fixed !important;
    bottom: 0;
    width: 250px; /* match your sidebar width */
    background: #0f172b; /* match sidebar bg */
    z-index: 1050;
    width:45px
}

/* When sidebar is collapsed — shrink pinned items */
.sidebar-collapse .main-sidebar .sidebar .nav.nav-sidebar > li:not(.has-treeview):nth-last-child(1),
.sidebar-collapse .main-sidebar .sidebar .nav.nav-sidebar > li:not(.has-treeview):nth-last-child(2) {
    width: 60px !important;
}

.main-sidebar .sidebar .nav.nav-sidebar li:not(.has-treeview):nth-last-child(2) {
    bottom: 65px; /* stack above the first one */
}

/* Override AdminLTE sidebar overflow */
.main-sidebar .sidebar {
    overflow: hidden !important;
}

    .main-sidebar .sidebar nav {
        overflow-y: auto !important;
    }

        /* Hide scrollbar for sidebar nav */
        .main-sidebar .sidebar nav::-webkit-scrollbar {
            display: none;
        }

    .main-sidebar .sidebar nav {
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none; /* Firefox */
    }

    /* Wrapper to position arrows relative to sidebar nav */
    .main-sidebar .sidebar nav {
        position: relative;
    }

/* Shared arrow styles */
.sidebar-scroll-arrow {
    position: fixed;
    width: 55px; /* match collapsed sidebar width, adjust if expanded */
    height: 24px;
    background: rgba(15, 23, 43, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1060;
    color: #fff; /* red like in your screenshot */
    font-size: 14px;
    pointer-events: auto;
    transition: opacity 0.2s ease;
}

    .sidebar-scroll-arrow.up {
        top: 60px; /* just below the header */
    }

    .sidebar-scroll-arrow.down {
        bottom: 95px; /* above the pinned bottom items */
    }

    .sidebar-scroll-arrow.hidden {
        opacity: 0;
        pointer-events: none;
    }