:root, [data-bs-theme=light] {
    /*--vz-primary: #E54919;*/
    /*--vz-secondary: #204c88;*/
    /*--vz-primary-text-emphasis: #b73b12;*/
    --vz-secondary-text-emphasis: #296cc9;
    --vz-primary-bg-subtle: #e4e1f4;
    --vz-secondary-bg-subtle: #e1ebfd;
    /*--vz-topnav-item-active-color: #E54919;*/
}

.btn-primary {
    background: linear-gradient(45deg, rgba(0, 128, 128, 1) 0%, rgba(255, 193, 7, 1) 100%);
    border: 0;
    moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    background-size: 100%;
}

    .btn-primary:hover {
        background-size: 400%;
        moz-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
        -webkit-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
    }

.btn-secondary {
    background: linear-gradient(45deg, rgba(0, 0, 139, 1) 0%, rgba(0, 255, 255, 1) 100%);
    border: 0;
    moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    background-size: 100%;
}

    .btn-secondary:hover {
        background-size: 400%;
        moz-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
        -webkit-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
    }
.pagination {
    /*--vz-pagination-active-bg: #E54919;
    --vz-pagination-active-border-color: #E54919;*/
}

.zero {
    opacity: 0.3;
}

.navbar-menu {
    /*background: #333397;
    border-right: 1px solid #333397;*/
}

.logo-holder {
    padding: 15px !important;
    display: inline-block;
}


.menu-title span {
    color: #45a2d2;
    font-size: 13px;
}

.navbar-menu .navbar-nav .nav-link {
    padding: 5px 1.5rem;
}

    .navbar-menu .navbar-nav .nav-link i {
        min-width: 2.25rem;
        font-size: 21px;
    }

.dataTables_filter, .dataTables_length, .dataTables_info, .dataTables_paginate {
    display: inline-block;
}

.dataTables_filter, .dataTables_paginate {
    float: right;
}

.dataTable thead tr th {
    background-color: #f3f6f9;
}

.form-control {
    font-weight: 500;
}

.form-group {
    margin-bottom: 10px;
}

label {
    margin-bottom: 3px;
}

.select2-container--default .select2-selection--single {
    border: var(--vz-border-width) solid var(--vz-input-border-custom);
    border-radius: var(--vz-border-radius);
    /* padding: 0.5rem 0.9rem; */
}

.select2-container .select2-selection--single {
    height: 37.5px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 37.5px;
    font-weight: 500;
}

.select2-results__option {
    font-weight: 500;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    right: 6px;
    height: 34.5px;
}

.required {
    color: red !important;
    padding-left: 5px;
    display: inline-block !important;
}

.horizontal-control .label {
    float: left;
    display: inline-block;
    padding-top: 8px;
    padding-right: 10px;
}

.horizontal-control .content {
    float: left;
    display: inline-block;
    width: 300px;
}

.form-control:disabled, .form-control[readonly] {
    background-color: #e9ecef;
    opacity: 1;
}

span.flatpickr-weekday {
    background: #2d7475;
}

.flatpickr-weekdays {
    background-color: #2d7475;
}

.flatpickr-months {
    background-color: #2d7475;
}

.flatpickr-day.selected {
    background: #2d7475;
    border-color: #2d7475;
}

.flatpickr-day.today {
    color: #2d7475;
}

.flatpickr-day.selected:hover {
    background: #2d7475;
    border-color: #2d7475;
}

.flatpickr-day.today {
    border-color: #2d7475;
    background-color: #dafeff;
}


.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #2d7475;
}

.select2-results__option--highlighted[aria-selected] {
    background-color: #2d7475;
}

.select2-container--default .select2-results__option[aria-selected=true]:hover {
    background-color: #2d7475;
}

.table-bordered thead tr th {
    background-color: #f3f6f9;
}

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

.badge {
    font-size: 12px;
    font-weight: 500;
    /*text-transform: uppercase;*/
}

.badge-enquiry {
    border: 1px solid #3F51B5;
    color: #3F51B5;
}

.badge-quoted {
    border: 1px solid #FF9800;
    color: #FF9800;
}

.badge-ordered {
    border: 1px solid #204c88;
    color: #204c88;
}
.badge-info {
    border: 1px solid #2196F3;
    color: #2196F3;
}

.badge-inprocess {
    border: 1px solid #8BC34A;
    color: #8BC34A;
}

.badge-complete {
    border: 1px solid #008000;
    color: #008000;
}

.badge-pendpo {
    border: 1px solid #FFC107;
    color: #FFC107;
}

.badge-cancel {
    border: 1px solid #ff0000;
    color: #ff0000;
}

.badge-invoice {
    border: 1px solid #046604;
    color: #046604;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    /*background-color: #204c88;
    border: 1px solid #204c88;*/
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    border-right: 1px solid #fff;
    color: #fff;
}

.attach-holder {
    border: 1px solid #e9ebec !important;
    margin-bottom: 10px;
    padding: 10px 15px;
    border-radius: 4px;
    background: #fbfbfb;
}

    .attach-holder svg {
        margin-right: 6px;
        width: 17px;
        /*color: #999999;*/
    }

    .attach-holder span {
        font-size: 13px;
        color: #000;
    }

.select2-container--default.select2-container--disabled .select2-selection--single {
    background-color: #e9ecef;
    cursor: default;
}


.blockMsg {
    width: 160px !important;
    left: calc(50% - 80px) !important;
    border: 1px solid rgb(170, 170, 170) !important;
    padding: 8px !important;
    border-radius: 6px;
}

    .blockMsg img {
        margin-right: 6px;
    }

.blockOverlay {
    z-index: 1070 !important;
}

.blockMsg {
    z-index: 1071 !important;
}

.block-loader {
    position: relative;
    padding-bottom: 35px;
    min-height: 180px;
    width: 100%;
    display: inline-block;
}

    .block-loader:before {
        content: '';
        border: 3px solid #000;
        border-top: 3px solid transparent;
        border-radius: 50%;
        width: 30px;
        height: 30px;
        left: calc(50% - 15px);
        animation: spin 1s linear infinite;
        /*top: calc(50% - 15px);*/
        top: 80px;
        position: absolute;
        z-index: 101;
    }

    .block-loader:after {
        content: '';
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        background-color: #fff;
        z-index: 100;
    }


@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.nav-success .nav-link.active {
    color: #fff;
    /*background-color: #204c88;*/
}

.nav-success.arrow-navtabs .nav-link.active::before {
    /*border-top-color: #204c88;*/
}

.bg-doc {
    background-color: #204c88 !important;
}


[data-layout=horizontal] .navbar-menu .navbar-nav .nav-link.active {
    /*color: #E54919;*/
}


.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #3F51B5;
    border: 1px solid #3F51B5;
}

.select2-container--default .select2-search--inline .select2-search__field {
    height: 25px;
    padding: 3px 9px;
    width: auto !important;
}


.spanelipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 150px;
}

.flag-check {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    display: inline-block;
    width: 100%;
}

    .flag-check li {
        display: inline-block;
        float: left;
        width: 20%;
        cursor: pointer;
        /*text-align: center;*/
    }


        .flag-check li label {
            border: 1.5px solid rgb(100 212 213);
            width: calc(100% - 15px);
            border-radius: 6px;
            /* background: #f6f5ff;*/
            text-align: center;
            padding: 10px;
            cursor: pointer;
            position: relative;
            margin-bottom: 15px;
            /* opacity: 0.5;*/
        }


        .flag-check li input:checked + label {
            border: 1.5px solid rgba(0,116,117,1);
            background: rgb(227 251 245);
            opacity: 1;
        }

        .flag-check li input {
            display: none;
        }

        .flag-check li label img {
            width: 50px;
            height: 50px;
            display: block;
            /* text-align: center; */
            margin: 0 auto 5px;
        }

        .flag-check li label span {
            font-size: 16px;
        }

        .flag-check li label i {
            display: none;
        }

        .flag-check li input:checked + label i {
            display: block;
            position: absolute;
            right: 5px;
            top: 0px;
            font-size: 20px;
            color: rgba(0,116,117,1);
        }



.endorsement-check {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    display: inline-block;
    width: 100%;
}

    .endorsement-check li {
        display: inline-block;
        float: left;
        /*width: 20%;*/
        cursor: pointer;
        /*text-align: center;*/
    }


        .endorsement-check li label {
            /*border: 1.5px solid rgb(100 212 213);
            width: calc(100% - 15px);
            border-radius: 6px;
            text-align: left;
            padding: 10px;
            cursor: pointer;
            position: relative;
            margin-bottom: 15px;*/
            border: 1.5px solid rgb(100 212 213);
            width: calc(100% - 15px);
            border-radius: 6px;
            /* background: #f6f5ff; */
            text-align: left;
            padding: 10px;
            cursor: pointer;
            position: relative;
            margin-bottom: 15px;
            /* opacity: 0.5; */
            width: auto;
            margin-right: 15px;
            padding-right: 15px;
        }

        .endorsement-check li input:checked + label {
            border: 1.5px solid rgba(0,116,117,1);
            background: rgb(227 251 245);
            opacity: 1;
        }

        .endorsement-check li input {
            display: none;
        }

        .endorsement-check li label span {
            font-size: 16px;
        }

        .endorsement-check li label i {
            font-size: 16px;
            color: rgba(0,116,117,1);
            margin-right: 6px;
        }

            .endorsement-check li label i.empty {
                display: inline-block;
                color: rgb(100 212 213);
            }

            .endorsement-check li label i.checked {
                display: none;
            }

        .endorsement-check li input:checked + label i.checked {
            display: inline-block;
        }

        .endorsement-check li input:checked + label i.empty {
            display: none;
        }


.crew-flag {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    display: inline-block;
    width: 100%;
}

    .crew-flag li {
        display: inline-block;
        float: left;
        width: 25%;
        cursor: pointer;
        /*text-align: center;*/
    }

        .crew-flag li div.content {
            border: 1.5px solid rgb(100 212 213);
            width: calc(100% - 25px);
            border-radius: 6px;
            /* background: #f6f5ff;*/
            text-align: left;
            /*padding: 10px;*/
            cursor: pointer;
            position: relative;
            margin-bottom: 15px;
            overflow: hidden;
            /* opacity: 0.5;*/
        }

        .crew-flag li.ongoing div.content {
            border: 1.5px solid #673AB7;
        }

        .crew-flag li div.content span {
            display: block;
            text-align: center;
        }

        .crew-flag li div.content img {
            display: block;
            margin: 40px auto 10px;
            width: 70px;
            height: 70px;
        }

        .crew-flag li div.content span.flag {
            padding: 6px;
            font-size: 16px;
            font-weight: 500;
            color: #3F51B5;
            border-bottom: 1px solid #3F51B5;
            /*background: #f6f5ff;*/
        }

        .crew-flag li.ongoing div.content span.endorse {
            padding: 5px 0px;
            font-size: 16px;
            font-weight: 500;
            color: #3F51B5;
            border-top: 1px solid #bfc9fb;
        }

        .crew-flag li.completed div.content span.endorse {
            padding: 5px 0px;
            font-size: 16px;
            font-weight: 500;
            color: #3F51B5;
            border-top: 1px solid #bfc9fb;
        }

        .crew-flag li.expiring div.content span.endorse {
            padding: 5px 0px;
            font-size: 16px;
            font-weight: 500;
            color: #3F51B5;
            border-top: 1px solid #bfc9fb;
        }

.ribbon-box.right .ribbon-danger {
    background: red;
}

    .ribbon-box.right .ribbon-danger.ribbon-shape::before {
        border-right-color: red;
        border-top-color: red;
    }

    .ribbon-box.right .ribbon-danger.ribbon-shape::after {
        border-right-color: red;
        border-bottom-color: red;
    }


.ribbon-box.right .ribbon-success {
    background: #008000;
}

    .ribbon-box.right .ribbon-success.ribbon-shape::before {
        border-right-color: #008000;
        border-top-color: #008000;
    }

    .ribbon-box.right .ribbon-success.ribbon-shape::after {
        border-right-color: #008000;
        border-bottom-color: #008000;
    }

.flagheader {
    background: linear-gradient(45deg, #fff 0%, rgb(242 242 247) 100%);
    padding: 10px 15px;
    margin-left: 14px;
    font-size: 17px;
    margin-bottom: 13px;
}

.nav-success .nav-link.active {
    color: #fff;
    background: linear-gradient(45deg, rgba(0, 0, 139, 1) 0%, rgba(0, 255, 255, 1) 100%) !important;
    /*#204c88*/
}

.nav-success.arrow-navtabs .nav-link.active::before {
    border-top-color: #204c88;
}

.arrow-navtabs .nav-item .nav-link {
    cursor: pointer !important;
}