body {
    font-family: "SATOSHI-REGULAR" !important;
    color: #001E2D;
    line-height: normal;
}

:root {
    --white: #FFFFFF;
    --black: #000000;
    --blue00: #001E2D;
    --bluelight00: #00658C;
    --blue80: #80D0FF;
    --bluec5: #C5E7FF;
    --gray71: #717972;
    --graycc: #CCCCCC;
    --grayee: #EEEEEE;
    --greene4: #E4F3FF;
    --grayf7: #F7F7F7;
    --warning: #FFEDD1;
    --success: #008952;
}

.gray71 {
    color: #717972;
}

@font-face {
    font-family: "satoshi-light";
    src: url("../fonts/SATOSHI-LIGHT.OTF");
}

@font-face {
    font-family: "satoshi-regular";
    src: url("../fonts/SATOSHI-REGULAR.OTF");
}

@font-face {
    font-family: "satoshi-medium";
    src: url("../fonts/SATOSHI-MEDIUM.OTF");
}

@font-face {
    font-family: "satoshi-bold";
    src: url("../fonts/SATOSHI-BOLD.OTF");
}

@font-face {
    font-family: "satoshi-black";
    src: url("../fonts/SATOSHI-BLACK.OTF");
}

@font-face {
    font-family: "DMSerifDisplay-Regular";
    src: url("../fonts/DMSerifDisplay-Regular.ttf");
}

.h1 {
    font-size: 48px;
    font-family: "satoshi-black";
}

@media (max-width: 991px) {
    .h1 {
        font-size: 38px;
    }
}

.h2 {
    font-size: 36px;
    font-family: "satoshi-bold";
}

@media (max-width: 991px) {
    .h2 {
        font-size: 30px;
    }
}

.h3 {
    font-size: 28px;
    font-family: "satoshi-bold";
}

@media (max-width: 991px) {
    .h3 {
        font-size: 24px;
    }
}

.h4 {
    font-size: 24px;
    font-family: "satoshi-bold";
}

@media (max-width: 991px) {
    .h4 {
        font-size: 20px;
    }
}

.h5 {
    font-size: 20px;
    font-family: "satoshi-bold";
}

@media (max-width: 991px) {
    .h5 {
        font-size: 18px;
    }
}

.h6 {
    font-size: 16px;
    font-family: "satoshi-regular";
}

    .h6.bold {
        font-family: "satoshi-bold";
    }

.p1 {
    font-size: 20px;
    font-family: "satoshi-regular";
}

.p2 {
    font-size: 18px;
    font-family: "satoshi-regular";
}

.p3 {
    font-size: 16px;
    font-family: "satoshi-regular";
}

.p4 {
    font-size: 14px;
    font-family: "satoshi-regular";
}

.p5 {
    font-size: 12px;
    font-family: "satoshi-regular";
}

.p6 {
    font-size: 10px;
    font-family: "satoshi-regular";
}

a {
    text-decoration: none;
    color: var(--bluelight00);
}

    a:hover {
        color: var(--bluelight00);
    }

.font-weight-400 {
    font-family: "satoshi-regular";
}

.font-weight-500 {
    font-family: "satoshi-medium";
}

.font-weight-600 {
    font-family: "satoshi-bold";
}

.font-weight-700 {
    font-family: "satoshi-black";
}

.lineheight13 {
    line-height: 13px;
}

.btn {
    width: auto;
    height: 48px;
    line-height: 46px;
    background-color: var(--bluelight00);
    font-size: 16px;
    padding: 0px 25px;
    border-radius: 8px;
    text-transform: capitalize;
    font-family: "satoshi-bold";
    box-shadow: none !important;
    outline: none !important;
}

    .btn:hover, .btn:focus, .btn:active, .btn:active:focus {
        box-shadow: none !important;
        outline: none !important;
        border-color: none !important;
    }

    .btn.btn-primary {
        background-color: var(--bluelight00);
        border-color: var(--bluelight00);
    }

        .btn.btn-primary:hover, .btn.btn-primary:focus, .btn.btn-primary:active, .btn.btn-primary:active:focus {
            border-color: var(--bluelight00) !important;
        }

    .btn.btn-bg-back {
        background-color: var(--grayee);
        color: var(--gray71);
    }

        .btn.btn-bg-back.btn-border {
            border: 1px solid var(--gray71);
            background: var(--white);
        }

    .btn.btn-outline-primary {
        background-color: transparent;
        color: var(--bluelight00);
        border: 1px solid var(--bluelight00);
    }

    .btn.btn-transparent-gray {
        background: transparent;
        color: #717972;
    }

    .btn.btn--size-large {
        height: 48px;
    }

    .btn.btn--size-small {
        height: 36px;
        line-height: 34px;
        padding: 0px 12px;
        font-size: 14px;
        font-family: "satoshi-medium";
    }

    .btn.width80 {
        min-width: 80px;
    }

    .btn.width100 {
        min-width: 100px;
    }

button {
    box-shadow: none !important;
    outline: none !important;
}

.chips {
    width: auto;
    height: auto;
    min-width: 58px;
    min-height: 24px;
    border-radius: 0.25rem;
    font-size: 12px;
    font-family: "satoshi-medium";
    display: block;
    text-align: center;
    padding: 4px 10px;
}

    .chips.chips-active, .chips.chips-success {
        background-color: #EEF5EE;
        color: #008952;
    }

    .chips.chips-inactive, .chips.chips-pending {
        background-color: #FFF6ED;
        color: #FF9900;
    }

    .chips.chips-unapproved {
        background-color: #FCF3F2;
        color: #BA1A1A;
    }

    .chips.chips-open {
        background-color: #E4F3FF;
        color: #00658C;
    }

.form-floating {
    margin-bottom: 24px;
}

    .form-floating.single-line {
        margin-bottom: 0px;
    }

    .form-floating > .form-control,
    .form-floating > .form-select {
        height: calc(3.5rem + 0px) !important;
        line-height: 1.25;
    }

    .form-floating > label {
        color: var(--gray71);
    }

        .form-floating > label sup {
            color: var(--bluelight00);
        }

    .form-floating > .form-control:not(:-moz-placeholder-shown) ~ label {
        opacity: 1;
    }

    .form-floating > .form-control:focus ~ label,
    .form-floating > .form-control:not(:placeholder-shown) ~ label,
    .form-floating > .form-select ~ label {
        opacity: 1;
    }

    .form-floating.single-line > .form-control, .form-floating.single-line > .form-select {
        height: 40px !important;
        line-height: normal;
        padding-top: 0;
        padding-bottom: 0;
        text-align: left;
        border-color: var(--graycc) !important;
        color: var(--blue00) !important;
        font-size: 14px !important;
        outline: none !important;
        border-radius: 8px;
        padding: 0.375rem 0.75rem;
    }

    .form-floating.single-line > label.label {
        position: absolute;
        top: 12px;
        bottom: auto;
        margin: auto;
        left: 11px;
        height: 100%;
        padding: 0px;
        line-height: 1;
        height: auto;
        opacity: 1;
        color: var(--gray71);
    }

        .form-floating.single-line > label.label.label_add_top {
            opacity: 0;
        }

.form-control {
    border-color: var(--graycc) !important;
    color: var(--blue00) !important;
    font-size: 14px !important;
    outline: none !important;
    border-radius: 8px;
}

    .form-control:focus, .form-control.focus-visible, .form-control.focus-within {
        border-color: var(--bluelight00) !important;
        color: var(--blue00) !important;
        outline: none !important;
        box-shadow: none;
    }

    .form-control.normal-input {
        height: 40px;
    }

.form-bottom-toolbar {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    padding: 0px 10px;
}

/* For radio */
.dropdown-menu input[type=radio] {
    display: none;
}

.dropdown-menu input[type=checkbox] {
    display: none;
}

.dropdown-menu.checkbox-option .checkbox-image {
    display: flex;
    align-content: center;
    justify-content: flex-start;
    position: relative;
}

    .dropdown-menu.checkbox-option .checkbox-image input[type=checkbox] {
        display: block;
        height: 16px;
        width: 16px;
        background-color: transparent;
        border: 1px solid #00658C;
        outline: 0px !important;
        box-shadow: none !important;
        margin-right: 0px;
        margin-top: 0px;
        position: absolute;
        left: 10px;
        top: 10px;
        z-index: 1;
    }

        .dropdown-menu.checkbox-option .checkbox-image input[type=checkbox]:checked {
            background-color: #00658C;
            border: 1px solid #00658C;
            color: white;
        }

    .dropdown-menu.checkbox-option .checkbox-image label {
        padding: 0px 15px 0px 40px;
    }

.form-switch .form-check-input {
    height: 18px;
    width: 33px;
    cursor: pointer;
    border: 2px solid #CCCCCC;
    background-color: #CCCCCC;
    background-image: url("../../images/structure/Ellipse-check.svg") !important;
}

    .form-switch .form-check-input:checked {
        background-color: #00658C;
        border: 2px solid #00658C;
    }

    .form-switch .form-check-input:focus {
        border-color: none;
        outline: 0;
        box-shadow: none !important;
    }

.form-floating {
    position: relative;
    margin-bottom: 24px;
}

    .form-floating .form-control,
    .form-floating .form-select {
        border-color: transparent;
        height: calc(3.5rem + 0px);
        text-align: left;
        font-size: 14px;
    }

        .form-floating .form-control:focus,
        .form-floating .form-select:focus {
            outline: 0;
            box-shadow: none;
        }

            .form-floating .form-control:focus ~ label,
            .form-floating .form-select:focus ~ label {
                opacity: 1;
            }

        .form-floating .form-control:not(:-moz-placeholder-shown) ~ label, .form-floating .form-select:not(:-moz-placeholder-shown) ~ label {
            opacity: 1;
        }

        .form-floating .form-control:not(:placeholder-shown) ~ label,
        .form-floating .form-select:not(:placeholder-shown) ~ label {
            opacity: 1;
        }

    .form-floating > .form-select ~ label {
        opacity: 1;
        transform: scale(1) translateY(0rem) translateX(0rem);
    }

        .form-floating > .form-select ~ label.label_add_top {
            transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
        }

    .form-floating .label {
        color: var(--gray66);
        font-size: 14px;
    }

        .form-floating .label .required-star {
            margin-left: 2px;
        }

    .form-floating .eye-icon {
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        right: 10px;
        cursor: pointer;
    }

    .form-floating.has-validation .form-control,
    .form-floating.has-validation .form-select {
        background-color: #FFF5F3;
    }

    .form-floating .dropdown-menu {
        padding: 0px 0px;
        border-radius: 0.5rem;
        overflow: auto;
        max-height: 200px;
        width: 100%;
        border: 1px solid #CCCCCC;
        background: #ffffff;
        -webkit-overflow-scrolling: touch;
        scrollbar-color: #EEEEEE transparent;
        scrollbar-width: thin;
    }

        .form-floating .dropdown-menu::-webkit-scrollbar {
            width: 4px;
            height: 4px;
            background-color: transparent;
            border-radius: 2px;
        }

        .form-floating .dropdown-menu::-webkit-scrollbar-thumb {
            background-color: #EEEEEE;
            border-radius: 2px;
        }

        .form-floating .dropdown-menu::-webkit-scrollbar-track {
            border: 0.0625rem solid transparent;
            border-radius: 2px;
        }

        .form-floating .dropdown-menu li label {
            width: 100%;
            height: 36px;
            line-height: 36px;
            padding: 0px 15px;
            font-size: 14px;
            white-space: nowrap;
            background: #FFFFFF;
            cursor: pointer;
            position: relative;
        }

            .form-floating .dropdown-menu li label::after {
                display: none;
                content: "";
                position: absolute;
                bottom: 0px;
                left: 0px;
                right: 0px;
                margin: auto;
                height: 1px;
                background-color: #EEEEEE;
                width: calc(100% - 20px);
            }

            .form-floating .dropdown-menu li label:hover {
                background: #E4F3FF;
            }

::placeholder,
:-ms-input-placeholder,
::-ms-input-placeholder {
    color: #717972;
    font-size: 14px;
    opacity: 1; /* Firefox */
}

.single-line-box {
    margin-bottom: 20px;
}

    .single-line-box .label {
        font-size: 14px;
        font-family: "satoshi-medium";
        color: #001E2D;
        margin-bottom: 4px;
    }

        .single-line-box .label small {
            color: #717972;
            display: inline-block;
        }

        .single-line-box .label[for=ContainmentCompletionActionDocumentUpload] {
            white-space: nowrap;
        }

@media (max-width: 1299px) {
    .single-line-box .label[for=ContainmentCompletionActionDocumentUpload] {
        white-space: normal;
    }
}

.single-line-box .dropdown-menu ~ .label {
    color: #717972;
    font-family: "satoshi-regular";
}

.date-range-div {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-top: 4px;
    position: relative;
}

    .date-range-div::after {
        content: "-";
        position: absolute;
        left: 0px;
        right: 0px;
        top: 32px;
        width: 5px;
        margin: auto;
        color: #001E2D;
        font-size: 14px;
    }

    .date-range-div .single-line-box {
        width: 46%;
    }

.modal .modal-xs {
    max-width: 446px;
}

.modal .modal-lg {
    max-width: 730px;
}
/*new style*/
.modal .modal-410 {
    max-width: 410px;
}

    .modal .modal-410 .select-alert .select-icon {
        display: none;
        filter: contrast(0) brightness(0.5);
    }

    .modal .modal-410 .select-alert.selected .select-icon {
        display: block;
    }

/*end new style*/
.modal .modal-content {
    border-radius: 12px;
}

    .modal .modal-content form {
        margin-bottom: 0px;
    }

    .modal .modal-content .modal-body {
        padding: 30px;
    }

@media (max-width: 767px) {
    .modal .modal-content .modal-body {
        padding: 20px 15px;
    }
}

.modal .modal-content .modal-body .btn-close {
    position: absolute;
    top: 12px;
    right: 12px;
    transform: scale(0.75);
}

.modal .modal-content .modal-body .modal-cont {
    max-height: calc(100vh - 120px);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-color: #EEEEEE transparent;
    scrollbar-width: thin;
}

    .modal .modal-content .modal-body .modal-cont::-webkit-scrollbar {
        width: 4px;
        height: 4px;
        background-color: transparent;
        border-radius: 2px;
    }

    .modal .modal-content .modal-body .modal-cont::-webkit-scrollbar-thumb {
        background-color: #EEEEEE;
        border-radius: 2px;
    }

    .modal .modal-content .modal-body .modal-cont::-webkit-scrollbar-track {
        border: 0.0625rem solid transparent;
        border-radius: 2px;
    }

    .modal .modal-content .modal-body .modal-cont .h5 {
        margin-bottom: 5px;
    }

    .modal .modal-content .modal-body .modal-cont .h6 {
        margin-bottom: 14px;
        font-family: "satoshi-medium";
        color: #001E2D;
        margin-top: 25px;
    }

    .modal .modal-content .modal-body .modal-cont .p4 {
        color: #717972;
    }

.modal .modal-content .modal-body .contact-row {
    margin: 0px -10px;
    padding: 7px 10px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-bottom: 1px solid #EEEEEE;
}

    .modal .modal-content .modal-body .contact-row:last-child {
        border-bottom: none;
    }

    .modal .modal-content .modal-body .contact-row .icon24 {
        width: 24px;
        height: 24px;
        -o-object-fit: contain;
        object-fit: contain;
        margin-right: 10px;
    }

    .modal .modal-content .modal-body .contact-row a.p4 {
        color: #00658C;
        cursor: pointer;
        margin-bottom: 0px;
    }

    .modal .modal-content .modal-body .contact-row p.p4 {
        color: #001E2D;
        margin-bottom: 0px;
    }

.modal.DeleteDilog .modal-dialog {
    max-width: 295px;
    margin: auto;
}

    .modal.DeleteDilog .modal-dialog .modal-content {
        background: #E4F3FF;
        padding: 24px 24px;
    }

        .modal.DeleteDilog .modal-dialog .modal-content .btn-trans {
            background: transparent;
            color: #001E2D;
            border: none;
            outline: none;
            box-shadow: none;
            font-family: "satoshi-medium";
            font-size: 14px;
            padding: 0px 0px;
        }

            .modal.DeleteDilog .modal-dialog .modal-content .btn-trans.gray {
                color: #717972;
            }

.modal.noted-modal .p4 {
    color: #001E2D;
    font-size: 14px;
    border-bottom: 1px solid #EEEEEE;
    padding: 15px 0px;
    margin: 0px;
    line-height: 18px;
}

.modal.thankyouCertificateDialog .divider {
    width: calc(100% + 20px);
    height: 1px;
    background: #EEEEEE;
    position: relative;
}

.modal .d-flex-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0px 0px 0px;
    border-top: 1px solid #EEEEEE;
    margin-top: 30px;
}

    .modal .d-flex-bottom .btn {
        min-width: 100px;
        color: white;
    }

.body-bg1 {
    background-color: var(--greene4);
}

.overlay-bg {
    position: relative;
}

    .overlay-bg::before {
        content: "";
        position: fixed;
        left: 0;
        background: rgba(0, 0, 0, 0.3137254902);
        height: 100%;
        width: 100%;
        z-index: 1;
    }

.left-sidebar-main {
    padding: 0 20px 0 20px;
    width: 100px;
    transition: left 0.5s;
    position: fixed;
    z-index: 99;
    top: 0px;
    bottom: 0;
    left: 0;
    background: var(--greene4);
}

    .left-sidebar-main .close-side {
        position: fixed;
        left: auto;
        right: 0px;
        width: calc(100vw - 100px);
        height: 100%;
        display: none;
    }

@media (max-width: 767px) {
    .left-sidebar-main {
        left: -100px;
    }

        .left-sidebar-main.show {
            left: 0px;
        }

            .left-sidebar-main.show .close-side {
                display: block;
            }
}

.left-sidebar-main .logo-wrap {
    padding: 35px 5px 50px 5px;
}

@media (max-width: 767px) {
    .left-sidebar-main .logo-wrap {
        padding: 10px 5px 50px 5px;
    }
}

.left-sidebar-main .sidebar-menu .sidebar-menu-ul {
    padding-left: 0;
}

    .left-sidebar-main .sidebar-menu .sidebar-menu-ul .nav-item {
        list-style: none;
    }

        .left-sidebar-main .sidebar-menu .sidebar-menu-ul .nav-item .nav-link {
            color: var(--blue00);
            font-size: 10px;
            padding: 0px 0px;
            margin-bottom: 20px;
            border-radius: 40px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            position: relative;
        }

            .left-sidebar-main .sidebar-menu .sidebar-menu-ul .nav-item .nav-link .sidebar-icon {
                width: 56px;
                height: 32px;
                margin-bottom: 4px;
                padding: 4px 16px;
            }

                .left-sidebar-main .sidebar-menu .sidebar-menu-ul .nav-item .nav-link .sidebar-icon .icon24 {
                    width: 24px;
                    height: 24px;
                    -o-object-fit: contain;
                    object-fit: contain;
                }

                    .left-sidebar-main .sidebar-menu .sidebar-menu-ul .nav-item .nav-link .sidebar-icon .icon24.outline {
                        display: block;
                    }

                    .left-sidebar-main .sidebar-menu .sidebar-menu-ul .nav-item .nav-link .sidebar-icon .icon24.fill {
                        display: none;
                    }

        .left-sidebar-main .sidebar-menu .sidebar-menu-ul .nav-item.active .nav-link {
            font-family: "satoshi-medium";
        }

            .left-sidebar-main .sidebar-menu .sidebar-menu-ul .nav-item.active .nav-link .sidebar-icon {
                background-color: var(--blue80);
                width: 56px;
                height: 32px;
                margin-bottom: 4px;
                padding: 4px 16px;
                border-radius: 40px;
            }

                .left-sidebar-main .sidebar-menu .sidebar-menu-ul .nav-item.active .nav-link .sidebar-icon .icon24.outline {
                    display: none;
                }

                .left-sidebar-main .sidebar-menu .sidebar-menu-ul .nav-item.active .nav-link .sidebar-icon .icon24.fill {
                    display: block;
                }

.left-sidebar-main .supplier-tabs {
    position: fixed;
    left: 100px;
    right: auto;
    top: 0px;
    bottom: 0px;
    width: 200px;
    padding: 35px 10px;
    border-radius: 0px 12px 12px 0px;
    box-shadow: 1px 0px 2px 0px rgba(0, 0, 0, 0.0784313725);
    border: 1px solid #C5E7FF;
    background: var(--greene4);
    visibility: hidden;
    opacity: 0;
    transition: ease-in-out 300ms;
}

    .left-sidebar-main .supplier-tabs.show {
        visibility: visible;
        opacity: 1;
    }

    .left-sidebar-main .supplier-tabs .supplier-tabs-a {
        padding: 14px 15px;
        border-radius: 28px;
        font-size: 14px;
        color: #001E2D;
        font-family: "satoshi-medium";
        display: block;
        margin-bottom: 10px;
    }

        .left-sidebar-main .supplier-tabs .supplier-tabs-a.active {
            background: #C5E7FF;
        }

.content-box-right {
    padding-left: 100px;
    padding-top: 15px;
    padding-right: 8px;
    position: relative;
}

@media (max-width: 767px) {
    .content-box-right {
        padding-left: 0px;
        padding-right: 0px;
        padding-top: 5px;
    }
}

.alert {
    padding: 5px 10px;
    font-size: 12px;
    font-family: "satoshi-medium";
    color: #001E2D;
    border-radius: 0.5rem;
    min-height: 40px;
}
    /*New Style*/
    .alert.min32 {
        min-height: 32px;
    }
    /*end New Style*/
    .alert.alert-success {
        background: #008952;
        color: #FFFFFF;
    }

    .alert.alert-warning {
        background: #FFEDD1;
        color: #001E2D;
    }

    .alert.alert-fixed {
        position: absolute;
        top: 14px;
        left: 0px;
        right: 0px;
        width: 100%;
        max-width: 460px;
        margin: auto;
    }

    .alert.alert-center {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /*New Style*/
    .alert.alert-success-new {
        background: #ECF8DC;
        color: #379F00;
    }

    .alert.alert-warning-new {
        background: #FFE0B8;
        color: #FF9900;
    }

    .alert.alert-red-new {
        background: #FBD4D4;
        color: #BA1A1A;
    }

    .alert.alert-gray-new {
        background: #CFD2CB;
        color: #1F1F1F;
    }
    /*end New Style*/


    .alert .alert-icon {
        width: 28px;
        height: 28px;
        margin-right: 6px;
    }

    .alert .alert-icon-20 {
        width: 20px;
        height: 20px;
        margin-right: 6px;
    }

.search-box {
    width: 100%;
    min-width: 250px;
    max-width: 250px;
    height: 36px;
    position: relative;
}

@media (max-width: 767px) {
    .search-box {
        min-width: calc(100% - 100px);
        max-width: calc(100% - 100px);
    }
}

.search-box .search-icon {
    width: 20px;
    height: 20px;
    -o-object-fit: scale-down;
    object-fit: scale-down;
    position: absolute;
    left: 11px;
    top: 0px;
    bottom: 0px;
    margin: auto;
}

.search-box .search-input {
    padding: 0px 0px 0px 38px;
    width: 100%;
    height: 100%;
    border: 1px solid #CCCCCC;
    outline: none;
    box-shadow: none;
    border-radius: 0.5rem;
    font-size: 12px;
}

.search-box.max-width220 {
    min-width: 220px;
    max-width: 220px;
}

@media (max-width: 576px) {
    .search-box.max-width220 {
        min-width: calc(100% - 90px);
        max-width: calc(100% - 90px);
    }
}

.filter-droup .dropdown-toggle {
    height: 36px;
    width: 90px;
    padding: 0px;
    background: #C5E7FF;
    border: none;
    font-size: 12px;
    border-radius: 0.5rem;
    color: #001E2D;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "satoshi-regular";
}

    .filter-droup .dropdown-toggle .filter-icon {
        margin-right: 6px;
    }

    .filter-droup .dropdown-toggle::after {
        display: none;
    }

.menu-droup .dropdown-toggle {
    height: 24px;
    width: 24px;
    padding: 0px;
    background: transparent;
    border: none;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "satoshi-regular";
}

    .menu-droup .dropdown-toggle .menu-icon {
        width: 24px;
        height: 24px;
        -o-object-fit: contain;
        object-fit: contain;
    }

    .menu-droup .dropdown-toggle::after {
        display: none;
    }

.dropdown-menu {
    background: #E4F3FF;
    border-radius: 0.5rem;
    padding: 0px 0px;
    min-width: 120px;
    border: none;
    overflow-x: hidden;
    overflow-y: auto;
}

    .dropdown-menu li {
        list-style: none;
    }

        .dropdown-menu li:first-child {
            border-radius: 0.5rem 0.5rem 0rem 0rem;
        }

        .dropdown-menu li:last-child {
            border-radius: 0rem 0rem 0.5rem 0.5rem;
        }

        .dropdown-menu li .dropdown-item {
            min-height: 36px;
            padding: 8px 12px;
            display: flex;
            align-items: center;
            justify-content: flex-start;
        }

            .dropdown-menu li .dropdown-item:active, .dropdown-menu li .dropdown-item.active, .dropdown-menu li .dropdown-item:hover {
                background: #C5E7FF;
                color: #001E2D;
            }

.icon20 {
    width: 20px;
    height: 20px;
    -o-object-fit: contain;
    object-fit: contain;
}

.icon24 {
    width: 24px;
    height: 24px;
    -o-object-fit: contain;
    object-fit: contain;
}

.icon28 {
    width: 28px;
    height: 28px;
    -o-object-fit: contain;
    object-fit: contain;
}

.icon48 {
    width: 48px;
    height: 48px;
    -o-object-fit: contain;
    object-fit: contain;
}

.mb-20 {
    margin-bottom: 20px;
}

.upload-document {
    max-width: -moz-fit-content;
    max-width: fit-content;
    position: relative;
}

    .upload-document label {
        background: #F7F7F7;
        width: 100%;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        border-radius: 0.25rem;
        padding: 6px 20px 6px 10px;
        font-size: 12px;
        color: #001E2D;
    }

        .upload-document label img.attach {
            margin-right: 4px;
            width: 20px;
            height: 20px;
        }

    .upload-document .cancel-icon {
        width: 16px;
        height: 16px;
        position: absolute;
        right: 4px;
        top: 0px;
        bottom: 0px;
        margin: auto;
        cursor: pointer;
    }

    .upload-document input[type=file] {
        display: none;
    }

.form-check {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 0px;
}

    .form-check .form-check-input {
        height: 18px;
        width: 18px;
        background-color: transparent;
        border: 1px solid #00658C;
        outline: 0px !important;
        box-shadow: none !important;
        margin-right: 10px;
        position: relative;
        cursor: pointer;
        top: -2px;
    }

        .form-check .form-check-input[type=checkbox]:checked {
            background-color: #00658C;
            border: 1px solid #00658C;
            color: white;
        }

    .form-check .form-check-label {
        font-size: 14px;
        color: #001E2D;
    }

.radio-form-control {
    font-family: "satoshi-regular";
    font-size: 14px;
    line-height: 1.1;
    display: grid;
    grid-template-columns: 1em auto;
    gap: 0.5em;
    color: #001E2D;
}

    .radio-form-control > input[type=radio] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        margin: 0;
        width: 16px;
        height: 16px;
        min-width: 16px;
        min-height: 16px;
        border: 2px solid #00658C;
        border-radius: 50%;
        display: grid;
        place-content: center;
    }

        .radio-form-control > input[type=radio]::before {
            content: "";
            width: 8px;
            height: 8px;
            border-radius: 50%;
            transform: scale(0);
            transition: 120ms transform ease-in-out;
            background-color: #00658C;
        }

        .radio-form-control > input[type=radio]:checked::before {
            transform: scale(1);
        }

.sidebar {
    background: #E4F3FF;
    min-height: 100vh;
    width: 350px;
    padding: 30px;
    position: fixed;
    top: 0px;
    bottom: 0px;
    right: -350px;
    box-shadow: 1px 0px 2px 0px rgba(0, 0, 0, 0.0784313725);
    border-radius: 12px 0px 0px 12px;
    border: 1px solid #C5E7FF;
    opacity: 0px;
    visibility: hidden;
    transition: ease-in-out 400ms;
    z-index: 10;
}

    .sidebar.show {
        right: 0px;
        opacity: 1;
        visibility: visible;
        transition: ease-in-out 400ms;
    }

    .sidebar .btn-close {
        position: absolute;
        top: 15px;
        right: 15px;
    }

    .sidebar .sidebar-body {
        height: 100%;
        max-height: calc(100vh - 190px);
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-color: #EEEEEE transparent;
        scrollbar-width: thin;
    }

        .sidebar .sidebar-body::-webkit-scrollbar {
            width: 4px;
            height: 4px;
            background-color: transparent;
            border-radius: 2px;
        }

        .sidebar .sidebar-body::-webkit-scrollbar-thumb {
            background-color: #EEEEEE;
            border-radius: 2px;
        }

        .sidebar .sidebar-body::-webkit-scrollbar-track {
            border: 0.0625rem solid transparent;
            border-radius: 2px;
        }

    .sidebar .input-chips {
        background: #C5E7FF;
        height: 32px;
        padding: 8px 4px 6px 8px;
        border-radius: 4px;
        margin-right: 8px;
        display: inline-block;
        font-size: 12px;
        font-family: "satoshi-medium";
        color: #001E2D;
    }

        .sidebar .input-chips .clear-icon {
            cursor: pointer;
            width: 16px;
            height: 16px;
        }

    .sidebar .sidebar-bottom {
        position: absolute;
        bottom: 0px;
        left: 0px;
        right: 0px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 30px 30px 30px;
    }

        .sidebar .sidebar-bottom .reset-btn {
            background: transparent;
            color: #717972;
            font-size: 14px;
            border: none;
            box-shadow: none;
        }

.pagination {
    justify-content: center;
}

    .pagination .page-item .page-link {
        border: none;
        output: none;
        box-shadow: none;
        font-size: 14px;
        color: #001E2D;
        position: relative;
        border-radius: 8px;
    }

.breadcrumb {
    margin-bottom: 6px;
}

    .breadcrumb .breadcrumb-item {
        font-size: 12px;
        color: #001E2D;
    }

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

.max-width270 {
    max-width: 270px;
}

.max-width200 {
    max-width: 200px;
}

.min-width200 {
    min-width: 200px;
}

@media (max-width: 576px) {
    .min-width200 {
        min-width: 160px;
    }
}

.max-width600 {
    max-width: 600px;
}

@media (max-width: 767px) {
    .max-width600 {
        width: 255px;
    }
}

.sort-search-none .dataTables_length,
.sort-search-none .dataTables_filter {
    display: none !important;
}

.remove-sorting .sorting,
.remove-sorting .sorting_asc,
.remove-sorting .sorting_desc {
    background-size: 0 !important;
}

table.dataTable thead {
    position: sticky;
    top: 0;
    z-index: 9;
}

table.dataTable tbody th,
table.dataTable tbody td {
    padding: 0px 10px !important;
    border-color: #eeeeee !important;
    height: 60px;
    vertical-align: middle;
    font-size: 14px;
    font-family: "satoshi-regular";
    color: #001E2D;
}

    table.dataTable tbody th:first-child,
    table.dataTable tbody td:first-child {
        padding-left: 20px !important;
    }
    /*Training Matrix*/
    table.dataTable tbody th.border-left,
    table.dataTable tbody td.border-left {
        border-left: 1px solid #EEEEEE;
    }
    table.dataTable tbody th .desabled,
    table.dataTable tbody td .desabled {
        filter: grayscale(1);
    }

    table.dataTable tbody th.vertical-top,
    table.dataTable tbody td.vertical-top {
        vertical-align: top;
    }

    table.dataTable tbody th.width165,
    table.dataTable tbody td.width165 {
        width: 165px;
    }

@media (max-width: 767px) {
    table.dataTable tbody th.width120,
    table.dataTable tbody td.width120 {
        min-width: 120px;
    }
}

table.dataTable tbody th .width150,
table.dataTable tbody td .width150 {
    width: 150px;
    position: relative;
    margin: auto;
}

table.dataTable tbody th .width240,
table.dataTable tbody td .width240 {
    width: 100%;
    min-width: 240px;
    max-width: 240px;
    position: relative;
}

table.dataTable tbody th:first-child,
table.dataTable tbody td:first-child {
    padding-left: 20px;
}

table.dataTable tbody th.nowrap,
table.dataTable tbody td.nowrap {
    white-space: nowrap !important;
}

table.dataTable tbody th .tool-box,
table.dataTable tbody td .tool-box {
    width: 24px;
    height: 24px;
    position: relative;
    cursor: pointer;
    margin: auto;
}

    table.dataTable tbody th .tool-box .icon24,
    table.dataTable tbody td .tool-box .icon24 {
        width: 24px;
        height: 24px;
        position: relative;
        -o-object-fit: cover;
        object-fit: cover;
        border-radius: 0.25rem;
    }

    table.dataTable tbody th .tool-box .tooltip,
    table.dataTable tbody td .tool-box .tooltip {
        border-radius: 4px;
        padding: 5px 12px;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.0509803922);
        font-size: 12px;
        font-family: "satoshi-regular";
        background: #FFFFFF;
        color: #001E2D;
        position: absolute;
        white-space: normal;
        min-width: 230px;
        left: -104px;
        right: 0px;
        bottom: 26px;
        top: auto;
        margin: auto;
        transform: translateY(5px);
        z-index: 10;
        opacity: 0;
        visibility: hidden;
        transition: ease-in-out 300ms;
    }

        table.dataTable tbody th .tool-box .tooltip::after,
        table.dataTable tbody td .tool-box .tooltip::after {
            content: "";
            width: 8px;
            height: 8px;
            background: #ffffff;
            transform: rotate(-45deg);
            position: absolute;
            top: auto;
            bottom: -4px;
            left: 0px;
            right: 0px;
            margin: auto;
        }

        table.dataTable tbody th .tool-box .tooltip.w-80,
        table.dataTable tbody td .tool-box .tooltip.w-80 {
            width: 80px;
            min-width: 80px;
            left: -28px !important;
        }

    table.dataTable tbody th .tool-box.status-tool,
    table.dataTable tbody td .tool-box.status-tool {
        width: auto;
    }

        table.dataTable tbody th .tool-box.status-tool .tooltip,
        table.dataTable tbody td .tool-box.status-tool .tooltip {
            left: -80px;
        }

    table.dataTable tbody th .tool-box:hover .tooltip,
    table.dataTable tbody td .tool-box:hover .tooltip {
        transform: translateX(0px);
        opacity: 1;
        visibility: visible;
    }

table.dataTable tbody th .view-more,
table.dataTable tbody td .view-more {
    color: #00658C;
    cursor: pointer;
    position: relative;
}

table.dataTable tbody th .tooltip-new,
table.dataTable tbody td .tooltip-new {
    background: #ffffff;
    border-radius: 4px;
    padding: 12px 12px;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.0509803922);
    font-size: 14px;
    font-family: "satoshi-regular";
    color: #001E2D;
    position: absolute;
    width: 265px;
    left: auto;
    right: -60px;
    top: 12px;
    margin: auto;
    transform: translateY(-5px);
    opacity: 0;
    visibility: hidden;
    transition: ease-in-out 300ms;
    z-index: 10;
}

table.dataTable tbody th .view-more:hover .tooltip-new,
table.dataTable tbody td .view-more:hover .tooltip-new {
    transform: translateY(5px);
    opacity: 1;
    visibility: visible;
}

table.dataTable tbody th .gray-raund-box,
table.dataTable tbody td .gray-raund-box {
    min-width: 32px;
    min-height: 32px;
    background: #F7F7F7;
    color: #001E2D;
    border-radius: 50%;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 2px;
    font-family: "satoshi-medium";
    float: left;
}

    table.dataTable tbody th .gray-raund-box .tooltip,
    table.dataTable tbody td .gray-raund-box .tooltip {
        min-width: 150px;
        left: -60px;
        z-index: 10;
    }

table.dataTable tbody th .chips,
table.dataTable tbody td .chips {
    display: inline-block;
}

table.dataTable tbody th .form-switch,
table.dataTable tbody td .form-switch {
    margin-bottom: 11px;
}
/*Training Matrix*/
table.table tbody td.border-left {
    border-left: 1px solid #EEEEEE;
}
table.dataTable thead th,
table.dataTable thead td {
    padding: 0px 20px 0px 10px !important;
    border-bottom: 1px solid rgba(239, 239, 239, 0.6509803922) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    font-family: "satoshi-medium" !important;
    height: 56px !important;
    vertical-align: middle !important;
}

    table.dataTable thead th:first-child,
    table.dataTable thead td:first-child {
        padding-left: 20px !important;
    }

    table.dataTable thead th.sort-none,
    table.dataTable thead td.sort-none {
        background: none !important;
    }

    table.dataTable thead th.width240,
    table.dataTable thead td.width240 {
        width: 100%;
        max-width: 240px;
        position: relative;
    }

table.dataTable {
    border-color: #EEEEEE;
}

    table.dataTable thead tr {
        background: #F7F7F7;
    }

    table.dataTable.no-footer {
        border-bottom: none !important;
    }

.dataTables_info {
    display: none !important;
}

.dataTables_wrapper .dataTables_paginate {
    width: 100% !important;
    float: unset !important;
    text-align: center !important;
    padding: 0.5rem 0 !important;
}

    .dataTables_wrapper .dataTables_paginate .paginate_button {
        box-shadow: none !important;
        font-size: 14px !important;
        color: #001E2D !important;
        position: relative;
        border-radius: 8px;
        cursor: pointer !important;
        background: transparent;
        border: 1px solid transparent;
        padding: 4px 11px;
    }

        .dataTables_wrapper .dataTables_paginate .paginate_button:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.current {
            background: #e9ecef !important;
            border: 1px solid transparent !important;
        }

.vertical-middle {
    vertical-align: middle;
}

#supplier-table tbody tr td:nth-child(4).nowrap {
    white-space: normal !important;
}

.col-12.col-sm-12.position-relative {
    margin-top: 1rem !important;
}

.hideSupplierTabs {
    position: absolute;
    top: 10px;
    right: -12px;
    background: #e4f3ff;
    width: 24px;
    text-align: center;
    border-radius: 50%;
    height: 24px;
    border: 1px solid #C5E7FF;
    cursor: pointer;
    color: #001e2d;
    font-size: 18px;
    line-height: 20px;
}

.supplier-tabs.show::before {
    content: "";
    position: fixed;
    right: 0px;
    left: auto;
    top: 0px;
    bottom: 0px;
    width: calc(100% - 295px);
    min-height: 100vh;
    background-color: transparent;
}

.left-block {
    background-color: var(--white);
    max-height: 100%;
    min-height: 100vh;
}

    .left-block .left-block-inner {
        padding: 25px 12px;
    }

@media (max-width: 576px) {
    .left-block .left-block-inner {
        padding: 24px 0px;
    }

        .left-block .left-block-inner .px-4 {
            padding: 0px 0px !important;
        }
}

.left-block .left-block-inner .login-logo-icon {
    width: 270px;
    height: 55px;
}

.left-block .left-block-inner .h3 {
    color: var(--blue00);
}

.left-block .left-block-inner .p3 {
    color: var(--blue00);
}

.left-block .left-block-inner .p4 {
    color: var(--blue00);
}

@media (min-width: 1460px) {
    .left-block .left-block-inner .p6 {
        font-size: 12px;
    }
}

.left-block .left-block-inner .eye-icon {
    position: absolute;
    right: 14px;
    top: 0px;
    cursor: pointer;
}

.left-block .left-block-inner .w-100 {
    max-width: 400px;
}

.right-block {
    background-image: url("../images/structure/login-right-bg.png");
    background-size: cover;
    background-repeat: no-repeat;
}

    .right-block .logo-right {
        width: 474px;
        height: 315px;
    }

@media (max-width: 991px) {
    .right-block .logo-right {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .right-block {
        display: none;
    }
}

.main-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 15px;
}

    .main-header .left-mobile-header {
        display: none;
        align-items: center;
        justify-content: flex-start;
        margin-right: auto;
        margin-left: 15px;
    }

@media (max-width: 767px) {
    .main-header .left-mobile-header {
        display: flex;
    }
}

.main-header .left-mobile-header .mobile-logo {
    width: 32px;
    height: 32px;
    object: contain;
    margin-right: 15px;
}

.main-header .left-mobile-header #mobileSideClickOpen {
    cursor: pointer;
}

.main-header .head-text {
    font-size: 14px;
    color: #001E2D;
    display: flex;
    align-items: center;
}

.main-header .profile-dropdown {
    width: auto;
    background-color: transparent;
    padding: 5px 25px 5px 15px;
    border-radius: 0px;
    margin-left: 15px;
    border-left: 1px solid #C5E7FF;
}

.main-header #dropdownmenu {
    background-color: transparent;
    border: none;
    outline: none;
    box-shadow: none;
    font-size: 14px;
    color: var(--black19);
    font-weight: 400;
    padding-left: 0px;
    padding-right: 0px;
    text-align: left;
    display: block;
    width: 100%;
}

    .main-header #dropdownmenu .icon36round {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        -o-object-fit: cover;
        object-fit: cover;
        margin-right: 4px;
    }

    .main-header #dropdownmenu::after {
        content: "";
        background: url("../../images/structure/expand_arrow.svg");
        background-size: cover;
        background-repeat: no-repeat;
        width: 16px;
        height: 16px;
        border: none;
        position: absolute;
        bottom: 0;
        top: 0px;
        margin: auto;
        right: 4px;
    }

.main-header ul.dropdown-menu {
    min-width: 150px;
    left: 13px !important;
    margin-top: 10px !important;
    background-color: var(--bluec5);
    border: none;
    border-radius: 8px;
    padding: 5px 0;
    color: var(--blue00);
}

    .main-header ul.dropdown-menu .dropdown-item:focus,
    .main-header ul.dropdown-menu .dropdown-item:hover {
        color: var(--blue00);
        background-color: var(--bluec5);
    }

    .main-header ul.dropdown-menu .dropdown-item {
        font-size: 14px;
        padding: 8px 1rem;
        font-family: "satoshi-regular";
    }

.content-box-formate .content-box-formate-left-col {
    min-width: 77.5%;
    max-width: 77.5%;
}

.content-box-formate .content-box-formate-right-col {
    min-width: 22.5%;
    max-width: 22.5%;
    padding-left: 20px;
}

    .content-box-formate .content-box-formate-right-col .right-white-box {
        padding: 20px 15px;
        border-radius: 0.5rem;
        background: white;
    }

        .content-box-formate .content-box-formate-right-col .right-white-box .h6 {
            color: #001E2D;
            font-size: 14px;
            font-family: "satoshi-bold";
            margin-bottom: 8px;
        }

.content-box-formate .content-box-full {
    width: 100%;
    height: auto;
}

    .content-box-formate .content-box-full .table-main-box {
        background: #FFFFFF;
        border-radius: 12px;
        max-height: calc(100vh - 118px);
        min-height: calc(100vh - 118px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-color: #EEEEEE transparent;
        scrollbar-width: thin;
    }

        .content-box-formate .content-box-full .table-main-box::-webkit-scrollbar {
            width: 4px;
            height: 4px;
            background-color: transparent;
            border-radius: 2px;
        }

        .content-box-formate .content-box-full .table-main-box::-webkit-scrollbar-thumb {
            background-color: #EEEEEE;
            border-radius: 2px;
        }

        .content-box-formate .content-box-full .table-main-box::-webkit-scrollbar-track {
            border: 0.0625rem solid transparent;
            border-radius: 2px;
        }

        .content-box-formate .content-box-full .table-main-box .table-top-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px;
            border-bottom: 1px solid #EEEEEE;
        }

@media (max-width: 991px) {
    .content-box-formate .content-box-full .table-main-box .table-top-row {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 991px) {
    .content-box-formate .content-box-full .table-main-box .table-top-row .h5 {
        margin-bottom: 10px !important;
    }
}

.content-box-formate .content-box-full .table-main-box .table-top-row .table-top-btn-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

@media (max-width: 576px) {
    .content-box-formate .content-box-full .table-main-box .table-top-row .table-top-btn-row {
        flex-direction: column;
    }
}

.content-box-formate .content-box-full .table-main-box .table-top-row .table-top-btn-row .btn {
    display: flex;
    align-items: center;
    margin-left: 10px;
}

@media (max-width: 576px) {
    .content-box-formate .content-box-full .table-main-box .table-top-row .table-top-btn-row .btn {
        margin-left: 0px;
        margin-bottom: 10px;
        width: 100%;
        justify-content: center;
    }
}

.content-box-formate .content-box-full .table-main-box .table-top-row .table-top-btn-row .btn .icon20 {
    margin-right: 4px;
}

.content-box-formate .content-box-full .table-main-box .table-top-row-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    border-bottom: 1px solid #EEEEEE;
}

    .content-box-formate .content-box-full .table-main-box .table-top-row-filter .gray {
        color: #717972;
    }

@media (max-width: 576px) {
    .content-box-formate .content-box-full .table-main-box .table-top-row-filter .gray {
        display: none;
    }
}

.content-box-formate .content-box-full .table-main-box .table-top-row-filter .suppliers-color-div {
    color: #001E2D;
    font-size: 12px;
    display: flex;
    align-items: center;
    margin-right: 20px;
}

@media (max-width: 576px) {
    .content-box-formate .content-box-full .table-main-box .table-top-row-filter .suppliers-color-div {
        display: none;
    }
}

.content-box-formate .content-box-full .table-main-box .table-top-row-filter .suppliers-color-div .suppliers-color-span {
    width: 18px;
    min-width: 18px;
    height: 18px;
    margin-right: 4px;
}

.content-box-formate .content-box-full .table-main-box .table-top-row-filter .filter-btn {
    display: flex;
    align-items: center;
    background: #C5E7FF;
    border-radius: 8px;
    border: none;
    font-size: 12px;
    text-align: center;
    padding: 0px 12px;
    height: 36px;
    min-width: 82px;
    color: #001E2D;
    margin-left: 15px;
}

    .content-box-formate .content-box-full .table-main-box .table-top-row-filter .filter-btn .icon20 {
        margin-right: 8px;
    }

.content-box-formate .content-box-full .table-main-box .table-parent {
    max-width: 100%;
    overflow: visible;
}

/*matrix table*/
    .content-box-formate .content-box-full .table-main-box .table-parent.matrix-table{
        overflow: auto;
    }


    .content-box-formate .content-box-full .table-main-box .table-parent .table {
        border-color: #EEEEEE;
    }

        .content-box-formate .content-box-full .table-main-box .table-parent .table thead {
            position: sticky;
            top: 0px;
            z-index: 9;
        }

            .content-box-formate .content-box-full .table-main-box .table-parent .table thead tr {
                background: #F7F7F7;
            }

                .content-box-formate .content-box-full .table-main-box .table-parent .table thead tr th {
                    font-size: 12px;
                    font-weight: 500;
                    height: 56px;
                    vertical-align: middle;
                }

                    .content-box-formate .content-box-full .table-main-box .table-parent .table thead tr th:first-child {
                        padding-left: 20px;
                    }

                    .content-box-formate .content-box-full .table-main-box .table-parent .table thead tr th .sorting {
                        position: relative;
                        display: flex;
                        align-items: center;
                        justify-content: flex-start;
                        font-size: 12px;
                        font-weight: 500;
                    }

                        .content-box-formate .content-box-full .table-main-box .table-parent .table thead tr th .sorting .table-arrows {
                            margin-left: 4px;
                        }

        .content-box-formate .content-box-full .table-main-box .table-parent .table tbody tr td {
            height: 60px;
            vertical-align: middle;
            font-size: 14px;
            font-family: "satoshi-regular";
            color: #001E2D;
            border-color: #EEEEEE;
        }

            .content-box-formate .content-box-full .table-main-box .table-parent .table tbody tr td.vertical-top {
                vertical-align: top;
            }

            .content-box-formate .content-box-full .table-main-box .table-parent .table tbody tr td.width165 {
                width: 165px;
            }

@media (max-width: 767px) {
    .content-box-formate .content-box-full .table-main-box .table-parent .table tbody tr td.width120 {
        min-width: 120px;
    }
}

.content-box-formate .content-box-full .table-main-box .table-parent .table tbody tr td .width150 {
    width: 300px;
    position: relative;
    margin: auto;
}

.content-box-formate .content-box-full .table-main-box .table-parent .table tbody tr td:first-child {
    padding-left: 20px;
}

.content-box-formate .content-box-full .table-main-box .table-parent .table tbody tr td .tool-box {
    width: 24px;
    height: 24px;
    position: relative;
    cursor: pointer;
    margin: auto;
}

    .content-box-formate .content-box-full .table-main-box .table-parent .table tbody tr td .tool-box .icon24 {
        width: 24px;
        height: 24px;
        position: relative;
        -o-object-fit: cover;
        object-fit: cover;
        border-radius: 0.25rem;
    }

    .content-box-formate .content-box-full .table-main-box .table-parent .table tbody tr td .tool-box .tooltip {
        border-radius: 4px;
        padding: 5px 12px;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.0509803922);
        font-size: 12px;
        font-family: "satoshi-regular";
        background: #FFFFFF;
        color: #001E2D;
        position: absolute;
        white-space: normal;
        min-width: 230px;
        left: -104px;
        right: 0px;
        bottom: 26px;
        top: auto;
        margin: auto;
        transform: translateY(5px);
        z-index: 10;
        opacity: 0;
        visibility: hidden;
        transition: ease-in-out 300ms;
    }

        .content-box-formate .content-box-full .table-main-box .table-parent .table tbody tr td .tool-box .tooltip::after {
            content: "";
            width: 8px;
            height: 8px;
            background: #ffffff;
            transform: rotate(-45deg);
            position: absolute;
            top: auto;
            bottom: -4px;
            left: 0px;
            right: 0px;
            margin: auto;
        }

    .content-box-formate .content-box-full .table-main-box .table-parent .table tbody tr td .tool-box.status-tool {
        width: auto;
    }

        .content-box-formate .content-box-full .table-main-box .table-parent .table tbody tr td .tool-box.status-tool .tooltip {
            left: -80px;
        }

    .content-box-formate .content-box-full .table-main-box .table-parent .table tbody tr td .tool-box:hover .tooltip {
        transform: translateX(0px);
        opacity: 1;
        visibility: visible;
    }

.content-box-formate .content-box-full .table-main-box .table-parent .table tbody tr td .view-more {
    color: #00658C;
    cursor: pointer;
    position: relative;
}

.content-box-formate .content-box-full .table-main-box .table-parent .table tbody tr td .tooltip-new {
    background: #ffffff;
    border-radius: 4px;
    padding: 12px 12px;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.0509803922);
    font-size: 14px;
    font-family: "satoshi-regular";
    color: #001E2D;
    position: absolute;
    width: 265px;
    left: auto;
    right: -60px;
    top: 12px;
    margin: auto;
    transform: translateY(-5px);
    opacity: 0;
    visibility: hidden;
    transition: ease-in-out 300ms;
    z-index: 10;
}

.content-box-formate .content-box-full .table-main-box .table-parent .table tbody tr td .view-more:hover .tooltip-new {
    transform: translateY(5px);
    opacity: 1;
    visibility: visible;
}

.content-box-formate .content-box-full .table-main-box .table-parent .table tbody tr td .gray-raund-box {
    min-width: 32px;
    min-height: 32px;
    background: #F7F7F7;
    color: #001E2D;
    border-radius: 50%;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 0px;
    font-family: "satoshi-medium";
}

    .content-box-formate .content-box-full .table-main-box .table-parent .table tbody tr td .gray-raund-box .tooltip {
        min-width: 150px;
        left: -60px;
    }

.content-box-formate .content-box-full .table-main-box .table-parent .table tbody tr td .chips {
    display: inline-block;
}

.content-box-formate .content-box-full .table-main-box .table-parent .table tbody tr td .form-switch {
    margin-bottom: 11px;
}

.content-box-formate .content-box-full .table-main-box .table-parent .table tbody tr.row-pending {
    background: #FCF3F2;
}

    .content-box-formate .content-box-full .table-main-box .table-parent .table tbody tr.row-pending td {
        color: #717972;
    }

        .content-box-formate .content-box-full .table-main-box .table-parent .table tbody tr.row-pending td img {
            filter: opacity(0.5);
        }

.content-box-formate .content-box-full .table-main-box .table-parent .table.toggle-btn-table thead tr th {
    font-family: "satoshi-medium";
}

.content-box-formate .content-box-full .table-main-box .table-parent .table.toggle-btn-table tbody tr td {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    font-size: 14px;
}
/*-new styles-*/

.content-box-formate .content-box-full .table-main-box .table-parent .table.hide-date tbody tr td .icon14 {
    width: 20px;
    height: 20px;
}

.content-box-formate .content-box-full .table-main-box .table-parent .table.hide-date tbody tr td .p5 {
    display: none;
}
/*-end new styles-*/
.content-box-formate .content-box-full .table-main-box .table-parent .table > :not(:last-child) > :last-child > * {
    border-color: #EEEEEE;
}

.table-main-box .table-parent.matrix-table .table thead tr th {
    width: 90px !important;
    min-width: 90px !important;
    max-width: 90px;
    word-wrap: break-word;
    color: #001E2D !important;
}
    .table-main-box .table-parent.matrix-table .table thead tr th a {
        
        color: #001E2D !important;
        display: block;
    }
    .table-main-box .table-parent.matrix-table .table thead tr th:first-child {
        position: sticky;
        left: 0px;
        z-index: 1;
        background: #f7f7f7;
    }

.table-main-box .table-parent.matrix-table .table tbody tr td {
    width: 90px !important;
    min-width: 90px !important;
}

    .table-main-box .table-parent.matrix-table .table tbody tr td:first-child {
        position: sticky;
        left: 0px;
        z-index: 1;
        background: #ffffff;
        font-weight: 700;
    }


        .content-box-formate .content-box-full .mid-view-wrapper {
            background-color: var(--white);
            border-radius: 12px;
            max-height: calc(100vh - 118px);
            min-height: calc(100vh - 118px);
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-color: #EEEEEE transparent;
            scrollbar-width: thin;
        }

    .content-box-formate .content-box-full .mid-view-wrapper::-webkit-scrollbar {
        width: 4px;
        height: 4px;
        background-color: transparent;
        border-radius: 2px;
    }

    .content-box-formate .content-box-full .mid-view-wrapper::-webkit-scrollbar-thumb {
        background-color: #EEEEEE;
        border-radius: 2px;
    }

    .content-box-formate .content-box-full .mid-view-wrapper::-webkit-scrollbar-track {
        border: 0.0625rem solid transparent;
        border-radius: 2px;
    }

@media (min-width: 1460px) {
    .content-box-formate .content-box-full .mid-view-wrapper {
        max-height: calc(100vh - 118px);
    }
}

.content-box-formate .content-box-full .mid-view-wrapper .top-toolbar {
    padding: 20px 20px;
    border-bottom: 1px solid var(--grayee);
}

    .content-box-formate .content-box-full .mid-view-wrapper .top-toolbar.breadcrumb-top-toolbar {
        min-height: auto;
    }

        .content-box-formate .content-box-full .mid-view-wrapper .top-toolbar.breadcrumb-top-toolbar .h5 {
            display: flex;
        }

            .content-box-formate .content-box-full .mid-view-wrapper .top-toolbar.breadcrumb-top-toolbar .h5 .chips {
                margin-left: 10px;
            }

@media (max-width: 576px) {
    .content-box-formate .content-box-full .mid-view-wrapper .top-toolbar.breadcrumb-top-toolbar .d-flex {
        flex-direction: column;
        align-items: flex-start !important;
    }
}

.content-box-formate .content-box-full .mid-view-wrapper .top-toolbar .alert {
    max-width: 900px;
}

@media (max-width: 767px) {
    .content-box-formate .content-box-full .mid-view-wrapper .top-toolbar {
        padding: 20px 10px;
    }
}

.content-box-formate .content-box-full .mid-view-wrapper .top-toolbar.less-padding {
    padding: 15px 20px;
    border-bottom: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

@media (max-width: 767px) {
    .content-box-formate .content-box-full .mid-view-wrapper .top-toolbar.less-padding {
        padding: 15px 10px;
    }
}

.content-box-formate .content-box-full .mid-view-wrapper .top-toolbar .h5 {
    color: var(--blue00);
}

@media (max-width: 576px) {
    .content-box-formate .content-box-full .mid-view-wrapper .top-toolbar .h5 {
        font-size: 16px !important;
    }
}

.content-box-formate .content-box-full .mid-view-wrapper .top-toolbar .p4 {
    color: var(--gray71);
}

    .content-box-formate .content-box-full .mid-view-wrapper .top-toolbar .p4 .p4 {
        color: var(--bluelight00);
    }

@media (max-width: 576px) {
    .content-box-formate .content-box-full .mid-view-wrapper .top-toolbar .p4 {
        font-size: 10px;
    }
}

.content-box-formate .content-box-full .mid-view-wrapper .top-toolbar .tool-right-btn {
    display: flex;
    align-items: center;
    margin-left: 10px;
}

    .content-box-formate .content-box-full .mid-view-wrapper .top-toolbar .tool-right-btn .icon20 {
        margin-right: 4px;
    }

.content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper {
    padding: 20px 20px;
}

@media (max-width: 767px) {
    .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper {
        padding: 20px 10px;
    }
}

.content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .secondary-label {
    color: var(--gray71);
}

.content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper form {
    margin-bottom: 0px;
}

.content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .scroll-bar {
    max-height: calc(100vh - 274px);
    min-height: calc(100vh - 274px);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-color: #EEEEEE transparent;
    scrollbar-width: thin;
}

    .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .scroll-bar::-webkit-scrollbar {
        width: 4px;
        height: 4px;
        background-color: transparent;
        border-radius: 2px;
    }

    .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .scroll-bar::-webkit-scrollbar-thumb {
        background-color: #EEEEEE;
        border-radius: 2px;
    }

    .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .scroll-bar::-webkit-scrollbar-track {
        border: 0.0625rem solid transparent;
        border-radius: 2px;
    }

.content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .upload-certificate {
    height: 120px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 1px solid #CCCCCC;
    border-radius: 0.5rem;
    transition: ease-in-out 300ms;
    margin-bottom: 10px;
}

    .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .upload-certificate .upload-before {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        transition: ease-in-out 300ms;
        border-radius: 0.5rem;
    }

        .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .upload-certificate .upload-before:hover {
            background: rgba(0, 0, 0, 0.7);
            transition: ease-in-out 300ms;
        }

            .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .upload-certificate .upload-before:hover * {
                filter: contrast(0) brightness(5);
                transition: ease-in-out 300ms;
            }

    .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .upload-certificate .upload-after {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        transition: ease-in-out 300ms;
        border-radius: 0.5rem;
        position: relative;
    }

        .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .upload-certificate .upload-after .close-icon {
            position: absolute;
            right: 5px;
            top: 5px;
            width: 20px;
            height: 20px;
            -o-object-fit: contain;
            object-fit: contain;
            z-index: 5;
            cursor: pointer;
        }

    .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .upload-certificate .upload-icon {
        width: 28px;
        height: 28px;
        -o-object-fit: contain;
        object-fit: contain;
    }

    .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .upload-certificate .p5 {
        margin-top: 10px;
        font-size: 12px;
        color: #00658C;
        display: block;
        text-align: center;
    }

    .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .upload-certificate input[type=file] {
        position: absolute;
        z-index: 2;
        left: 0px;
        top: 0px;
        right: 0ox;
        bottom: 0px;
        opacity: 0;
        cursor: pointer;
    }

.content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .help-rows {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
}

    .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .help-rows .help-boxes {
        padding: 15px 15px 20px 15px;
        position: relative;
        width: 240px;
        min-height: 105px;
        background: #F7F7F7;
        border-radius: 0.5rem;
        margin-right: 18px;
        display: flex;
        align-items: stretch;
        justify-content: space-between;
        flex-direction: column;
    }


@media (max-width: 767px) {
    .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .help-rows .help-boxes {
        margin-bottom: 15px;
    }
}

.content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .help-rows .help-boxes .h6 {
    font-family: "satoshi-medium";
    max-width: 88%;
    line-height: 22px;
}

.content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .help-rows .help-boxes .read-more {
    font-size: 12px;
    color: #00658C;
    font-family: "satoshi-medium";
    margin-bottom: 0px;
    cursor: pointer;
}

.content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .inner-padding30 {
    padding: 0px 0px;
}

    .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .inner-padding30 .video {
        width: 100%;
        max-width: 900px;
        border-radius: 0.5rem;
        border: 1px solid #EEEEEE;
        margin-bottom: 25px;
    }

    .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .inner-padding30 .pdf-box {
        border-radius: 0.5rem;
        overflow: hidden;
    }

        .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .inner-padding30 .pdf-box .pdf-img {
            height: 460px;
            width: 100%;
            max-width: 900px;
            border-radius: 0.5rem;
            border: 1px solid #EEEEEE;
            padding: 0px;
        }

@media (min-width: 1660px) {
    .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .inner-padding30 .pdf-box .pdf-img {
        height: 660px;
    }
}

.content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .inner-padding30 .pdf-box .pdf-img body,
.content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .inner-padding30 .pdf-box .pdf-img embed,
.content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .inner-padding30 .pdf-box .pdf-img html {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-color: #EEEEEE transparent;
}

    .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .inner-padding30 .pdf-box .pdf-img body::-webkit-scrollbar,
    .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .inner-padding30 .pdf-box .pdf-img embed::-webkit-scrollbar,
    .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .inner-padding30 .pdf-box .pdf-img html::-webkit-scrollbar {
        width: 4px;
        height: 4px;
        background-color: transparent;
        border-radius: 2px;
    }

    .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .inner-padding30 .pdf-box .pdf-img body::-webkit-scrollbar-thumb,
    .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .inner-padding30 .pdf-box .pdf-img embed::-webkit-scrollbar-thumb,
    .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .inner-padding30 .pdf-box .pdf-img html::-webkit-scrollbar-thumb {
        background-color: #EEEEEE;
        border-radius: 2px;
    }

    .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .inner-padding30 .pdf-box .pdf-img body::-webkit-scrollbar-track,
    .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .inner-padding30 .pdf-box .pdf-img embed::-webkit-scrollbar-track,
    .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .inner-padding30 .pdf-box .pdf-img html::-webkit-scrollbar-track {
        border: 0.0625rem solid transparent;
        border-radius: 2px;
    }

.content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .partner-content {
    display: block;
    padding-top: 8px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-color: #EEEEEE transparent;
    scrollbar-width: thin;
}

    .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .partner-content::-webkit-scrollbar {
        width: 4px;
        height: 4px;
        background-color: transparent;
        border-radius: 2px;
    }

    .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .partner-content::-webkit-scrollbar-thumb {
        background-color: #EEEEEE;
        border-radius: 2px;
    }

    .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .partner-content::-webkit-scrollbar-track {
        border: 0.0625rem solid transparent;
        border-radius: 2px;
    }

    .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .partner-content .row {
        margin: 0px -9px;
    }

        .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .partner-content .row .col-xl-4 {
            padding: 0px 9px;
        }

    .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .partner-content .partner-box {
        padding: 15px 15px 20px 15px;
        position: relative;
        min-height: 176px;
        height: calc(100% - 30px);
        border: 1px solid #EEEEEE;
        border-radius: 0.5rem;
        margin-right: 0px;
        margin-bottom: 30px;
        display: block;
    }

        .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .partner-content .partner-box .partner-top {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            width: 100%;
            margin-bottom: 20px;
        }

            .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .partner-content .partner-box .partner-top p {
                margin-bottom: 0px !important;
                text-align: left !important;
            }

            .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .partner-content .partner-box .partner-top .partner-logo, .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .partner-content .partner-box .partner-top img {
                width: auto !important;
                max-width: 170px;
                height: 55px !important;
                -o-object-fit: scale-down !important;
                object-fit: scale-down !important;
            }

            .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .partner-content .partner-box .partner-top .tool-box {
                width: 28px;
                height: 28px;
                position: relative;
                cursor: pointer;
            }

                .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .partner-content .partner-box .partner-top .tool-box .icon28 {
                    width: 28px;
                    height: 28px;
                    position: relative;
                    -o-object-fit: cover;
                    object-fit: cover;
                    border-radius: 0.25rem;
                }

                .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .partner-content .partner-box .partner-top .tool-box .tooltip {
                    background: #ffffff;
                    border-radius: 4px;
                    padding: 5px 12px;
                    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.0509803922);
                    font-size: 12px;
                    font-family: "satoshi-regular";
                    color: #001E2D;
                    position: absolute;
                    white-space: nowrap;
                    min-width: 106px;
                    left: auto;
                    right: 28px;
                    bottom: 0px;
                    top: 0px;
                    margin: auto;
                    transform: translateX(5px);
                    opacity: 0;
                    visibility: hidden;
                    transition: ease-in-out 300ms;
                    z-index: 10;
                }

                    .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .partner-content .partner-box .partner-top .tool-box .tooltip::after {
                        content: "";
                        width: 8px;
                        height: 8px;
                        background: #ffffff;
                        transform: rotate(-45deg);
                        position: absolute;
                        top: 0px;
                        bottom: 0px;
                        left: auto;
                        right: -4px;
                        margin: auto;
                    }

                .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .partner-content .partner-box .partner-top .tool-box:hover .tooltip {
                    transform: translateX(0px);
                    opacity: 1;
                    visibility: visible;
                }

            .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .partner-content .partner-box .partner-top .h6 {
                font-size: 16px;
                margin-bottom: 0px;
                font-family: "satoshi-medium";
            }

        .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .partner-content .partner-box .partner-text {
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            width: 100%;
            margin-bottom: 10px;
        }

            .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .partner-content .partner-box .partner-text:last-child {
                margin-bottom: 0px;
            }

            .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .partner-content .partner-box .partner-text .left-text {
                font-size: 14px;
                color: #001E2D;
                margin-right: 4px;
                margin-bottom: 0px;
            }

            .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .partner-content .partner-box .partner-text .right-text {
                font-size: 14px;
                font-family: "satoshi-medium";
                margin-bottom: 0px;
                display: flex;
            }

                .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .partner-content .partner-box .partner-text .right-text .overflow-ellips {
                    display: inline-block;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    max-width: 150px;
                    height: 18px;
                }

                    .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .partner-content .partner-box .partner-text .right-text .overflow-ellips p, .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .partner-content .partner-box .partner-text .right-text .overflow-ellips div {
                        display: inline-block;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        max-width: 150px;
                    }

                .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .partner-content .partner-box .partner-text .right-text p {
                    margin-bottom: 0px !important;
                }

                .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .partner-content .partner-box .partner-text .right-text .tool-view-more {
                    position: relative;
                }

                    .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .partner-content .partner-box .partner-text .right-text .tool-view-more .view-more {
                        color: #00658C;
                        cursor: pointer;
                        position: relative;
                    }

                    .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .partner-content .partner-box .partner-text .right-text .tool-view-more .tooltip-new {
                        background: #ffffff;
                        border-radius: 4px;
                        padding: 12px 12px;
                        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.0509803922);
                        font-size: 14px;
                        font-family: "satoshi-regular";
                        color: #001E2D;
                        position: absolute;
                        width: 265px;
                        left: auto;
                        right: 0;
                        top: 12px;
                        margin: auto;
                        transform: translateY(-5px);
                        opacity: 0;
                        visibility: hidden;
                        transition: ease-in-out 300ms;
                        z-index: 10;
                    }

                    .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .partner-content .partner-box .partner-text .right-text .tool-view-more:hover .tooltip-new {
                        transform: translateY(5px);
                        opacity: 1;
                        visibility: visible;
                    }

.content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .callapse-parent {
    padding: 10px 0px;
    border-top: 1px solid #EEEEEE;
}

    .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .callapse-parent .top-attach {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        margin-top: 16px;
        margin-bottom: 16px;
    }

        .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .callapse-parent .top-attach .upload-document {
            margin-right: 10px;
        }

        .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .callapse-parent .top-attach .date-picker {
            height: 32px;
        }

            .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .callapse-parent .top-attach .date-picker .datepicker-icon {
                left: 10px;
                right: auto;
            }

            .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .callapse-parent .top-attach .date-picker .form-control.normal-input {
                padding-left: 40px;
                height: 32px;
                background: #F7F7F7;
                width: 145px;
                font-size: 12px !important;
                border: none;
                border-radius: 0.25rem;
            }

.content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .blue-full-box {
    padding: 20px;
    border-radius: 0.5rem;
    background: #E4F3FF;
    margin-bottom: 20px;
}

    .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .blue-full-box .h6 {
        font-family: "satoshi-bold";
    }

.content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .gray-full-box {
    padding: 20px;
    border-radius: 0.5rem;
    background: #F7F7F7;
    margin-bottom: 20px;
}

    .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .gray-full-box .h6 {
        font-family: "satoshi-bold";
    }

    .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .gray-full-box .divider {
        width: calc(100% + 20px);
        height: 1px;
        background: #EEEEEE;
        position: relative;
        left: -10px;
        margin-bottom: 12px;
    }

.content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .left-right-value {
    display: flex;
    align-items: flex-start;
    font-size: 12px;
    color: #001E2D;
    margin-bottom: 0px;
}

@media (max-width: 576px) {
    .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .left-right-value {
        flex-direction: column;
    }
}

.content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .left-right-value .left-value.min-width170 {
    min-width: 170px;
}

.content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .left-right-value .right-value {
    font-family: "satoshi-medium";
    padding-left: 8px;
}

@media (max-width: 576px) {
    .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .left-right-value .right-value {
        padding-left: 0px;
    }
}

.content-box-formate .content-box-full .mid-view-wrapper .breadcrumb-top-toolbar ~ .content-body-wrapper .scroll-bar {
    max-height: calc(100vh - 296px);
    min-height: calc(100vh - 296px);
}

    .content-box-formate .content-box-full .mid-view-wrapper .breadcrumb-top-toolbar ~ .content-body-wrapper .scroll-bar.table-main-box {
        max-height: calc(100vh - 266px);
        min-height: calc(100vh - 266px);
        margin-bottom: 10px;
    }

    .content-box-formate .content-box-full .mid-view-wrapper .breadcrumb-top-toolbar ~ .content-body-wrapper .scroll-bar ~ .table-bottom-btns {
        padding: 0px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

.content-box-formate .content-box-full .mid-view-wrapper .customer-content-left-right {
    padding: 20px;
    min-height: calc(100vh - 65px);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

@media (max-width: 767px) {
    .content-box-formate .content-box-full .mid-view-wrapper .customer-content-left-right {
        flex-direction: column;
    }
}

.content-box-formate .content-box-full .mid-view-wrapper .customer-content-left-right .customer-content-left-box {
    width: 100%;
}

    .content-box-formate .content-box-full .mid-view-wrapper .customer-content-left-right .customer-content-left-box .margin-18 {
        margin: 0px -8px;
    }

        .content-box-formate .content-box-full .mid-view-wrapper .customer-content-left-right .customer-content-left-box .margin-18 .col-xl-4 {
            padding: 0px 8px;
        }

.content-box-formate .content-box-full .mid-view-wrapper .customer-content-left-right .customer-content-right-box {
    width: 220px;
    min-width: 220px;
    margin-left: 15px;
    position: sticky;
    top: 20px;
}

@media (max-width: 767px) {
    .content-box-formate .content-box-full .mid-view-wrapper .customer-content-left-right .customer-content-right-box {
        width: 100%;
        min-width: 100%;
        margin-left: 0px;
    }
}

.content-box-formate .content-box-full .mid-view-wrapper .customer-content-left-right .customer-content-right-box .total-view-box-content {
    background: #E4F3FF;
    padding: 20px 10px 10px 10px;
    position: relative;
    text-align: center;
    border-radius: 0.5rem;
    margin-bottom: 15px;
    display: block;
}

    .content-box-formate .content-box-full .mid-view-wrapper .customer-content-left-right .customer-content-right-box .total-view-box-content .status-row {
        width: 100%;
        border-top: 1px solid #C5E7FF;
        position: relative;
        display: flex;
        align-content: center;
        justify-content: center;
    }

        .content-box-formate .content-box-full .mid-view-wrapper .customer-content-left-right .customer-content-right-box .total-view-box-content .status-row::after {
            content: "";
            position: absolute;
            top: 5px;
            bottom: auto;
            left: 0px;
            right: 0px;
            margin: auto;
            max-height: calc(100% - 0px);
            height: calc(100% - 0px);
            width: 1px;
            background: #C5E7FF;
        }

        .content-box-formate .content-box-full .mid-view-wrapper .customer-content-left-right .customer-content-right-box .total-view-box-content .status-row .relative {
            width: 100%;
            padding-top: 10px;
        }

            .content-box-formate .content-box-full .mid-view-wrapper .customer-content-left-right .customer-content-right-box .total-view-box-content .status-row .relative .h6 {
                font-family: "satoshi-bold";
                margin-top: 4px;
                margin-bottom: 0px;
            }

                .content-box-formate .content-box-full .mid-view-wrapper .customer-content-left-right .customer-content-right-box .total-view-box-content .status-row .relative .h6.orangeff {
                    color: #FF9900;
                }

                .content-box-formate .content-box-full .mid-view-wrapper .customer-content-left-right .customer-content-right-box .total-view-box-content .status-row .relative .h6.complete {
                    color: #008952;
                }

.content-box-formate .content-box-full .mid-view-wrapper .customer-content-left-right .customer-content-right-box .view-box-content {
    background: #E4F3FF;
    padding: 15px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-radius: 0.5rem;
    margin-bottom: 15px;
}

    .content-box-formate .content-box-full .mid-view-wrapper .customer-content-left-right .customer-content-right-box .view-box-content .icon48 {
        margin-right: 10px;
    }

.content-box-formate .content-box-full .mid-view-wrapper .customer-content-left-right .dashboard-box {
    min-height: auto;
    width: 100%;
    border: 1px solid #EEEEEE;
    border-radius: 0.5rem;
    margin-bottom: 30px;
}

    .content-box-formate .content-box-full .mid-view-wrapper .customer-content-left-right .dashboard-box .dashboard-top {
        padding: 15px 15px 20px 15px;
        border-radius: 0.5rem 0.5rem 0rem 0rem;
        position: relative;
        background: #ffffff;
        min-height: 165px;
    }

        .content-box-formate .content-box-full .mid-view-wrapper .customer-content-left-right .dashboard-box .dashboard-top .partner-top {
            display: flex;
            justify-content: space-between;
        }

            .content-box-formate .content-box-full .mid-view-wrapper .customer-content-left-right .dashboard-box .dashboard-top .partner-top .h6 {
                font-family: "satoshi-medium";
                width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .content-box-formate .content-box-full .mid-view-wrapper .customer-content-left-right .dashboard-box .dashboard-top .partner-top .tool-box {
                width: 28px;
                height: 28px;
                position: relative;
                cursor: pointer;
                margin-left: 10px;
            }

                .content-box-formate .content-box-full .mid-view-wrapper .customer-content-left-right .dashboard-box .dashboard-top .partner-top .tool-box .icon28.disabled {
                    filter: grayscale(1) opacity(0.8);
                }

                .content-box-formate .content-box-full .mid-view-wrapper .customer-content-left-right .dashboard-box .dashboard-top .partner-top .tool-box .tooltip {
                    background: #ffffff;
                    border-radius: 4px;
                    padding: 5px 12px;
                    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.0509803922);
                    font-size: 12px;
                    font-family: "satoshi-regular";
                    color: #001E2D;
                    position: absolute;
                    white-space: nowrap;
                    min-width: 70px;
                    left: -21px;
                    right: 0px;
                    top: -28px;
                    bottom: auto;
                    margin: auto;
                    transform: translateY(5px);
                    opacity: 0;
                    visibility: hidden;
                    transition: ease-in-out 300ms;
                    text-align: center;
                    z-index: 10;
                }

                    .content-box-formate .content-box-full .mid-view-wrapper .customer-content-left-right .dashboard-box .dashboard-top .partner-top .tool-box .tooltip::after {
                        content: "";
                        width: 8px;
                        height: 8px;
                        background: #ffffff;
                        transform: rotate(-45deg);
                        position: absolute;
                        top: auto;
                        bottom: -4px;
                        left: 0px;
                        right: 0px;
                        margin: auto;
                    }

                .content-box-formate .content-box-full .mid-view-wrapper .customer-content-left-right .dashboard-box .dashboard-top .partner-top .tool-box:hover .tooltip {
                    transform: translateY(0px);
                    opacity: 1;
                    visibility: visible;
                }

        .content-box-formate .content-box-full .mid-view-wrapper .customer-content-left-right .dashboard-box .dashboard-top .partner-text {
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            width: 100%;
            margin-bottom: 10px;
        }

            .content-box-formate .content-box-full .mid-view-wrapper .customer-content-left-right .dashboard-box .dashboard-top .partner-text:last-child {
                margin-bottom: 0px;
            }

            .content-box-formate .content-box-full .mid-view-wrapper .customer-content-left-right .dashboard-box .dashboard-top .partner-text .left-text {
                font-size: 14px;
                color: #001E2D;
                margin-right: 4px;
                margin-bottom: 0px;
            }

            .content-box-formate .content-box-full .mid-view-wrapper .customer-content-left-right .dashboard-box .dashboard-top .partner-text .right-text {
                font-size: 14px;
                font-family: "satoshi-medium";
                margin-bottom: 0px;
                display: flex;
            }

                .content-box-formate .content-box-full .mid-view-wrapper .customer-content-left-right .dashboard-box .dashboard-top .partner-text .right-text .overflow-ellips {
                    display: inline-block;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    max-width: 175px;
                }

                .content-box-formate .content-box-full .mid-view-wrapper .customer-content-left-right .dashboard-box .dashboard-top .partner-text .right-text .tool-view-more {
                    position: relative;
                }

                    .content-box-formate .content-box-full .mid-view-wrapper .customer-content-left-right .dashboard-box .dashboard-top .partner-text .right-text .tool-view-more .view-more {
                        color: #00658C;
                        cursor: pointer;
                        position: relative;
                    }

                    .content-box-formate .content-box-full .mid-view-wrapper .customer-content-left-right .dashboard-box .dashboard-top .partner-text .right-text .tool-view-more .tooltip-new {
                        background: #ffffff;
                        border-radius: 4px;
                        padding: 12px 12px;
                        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.0509803922);
                        font-size: 14px;
                        font-family: "satoshi-regular";
                        color: #001E2D;
                        position: absolute;
                        width: 265px;
                        left: auto;
                        right: 0;
                        top: 12px;
                        margin: auto;
                        transform: translateY(-5px);
                        opacity: 0;
                        visibility: hidden;
                        transition: ease-in-out 300ms;
                        z-index: 10;
                    }

                    .content-box-formate .content-box-full .mid-view-wrapper .customer-content-left-right .dashboard-box .dashboard-top .partner-text .right-text .tool-view-more:hover .tooltip-new {
                        transform: translateY(5px);
                        opacity: 1;
                        visibility: visible;
                    }

    .content-box-formate .content-box-full .mid-view-wrapper .customer-content-left-right .dashboard-box .dashboard-bottom {
        background: #E4F3FF;
        padding: 9px 15px;
        border-radius: 0rem 0rem 0.5rem 0.5rem;
        position: relative;
        width: calc(100% + 2px);
        left: -1px;
        bottom: -1px;
    }

        .content-box-formate .content-box-full .mid-view-wrapper .customer-content-left-right .dashboard-box .dashboard-bottom .p4 {
            margin-bottom: 2px;
            font-size: 12px;
            font-family: "satoshi-regular";
            color: #001E2D;
        }

        .content-box-formate .content-box-full .mid-view-wrapper .customer-content-left-right .dashboard-box .dashboard-bottom .progress-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

            .content-box-formate .content-box-full .mid-view-wrapper .customer-content-left-right .dashboard-box .dashboard-bottom .progress-row .progress-div {
                background: #C5E7FF;
                height: 5px;
                width: calc(100% - 50px);
                border-radius: 4px;
                position: relative;
                overflow: hidden;
            }

                .content-box-formate .content-box-full .mid-view-wrapper .customer-content-left-right .dashboard-box .dashboard-bottom .progress-row .progress-div .progress-width {
                    height: 5px;
                    background: #00658C;
                    position: absolute;
                    left: 0%;
                    right: auto;
                }

            .content-box-formate .content-box-full .mid-view-wrapper .customer-content-left-right .dashboard-box .dashboard-bottom .progress-row span {
                color: #00658C;
                font-size: 14px;
                font-family: "satoshi-bold";
            }

.bottom-line-text {
    padding: 13.5px 0px;
}

    .bottom-line-text .p6 {
        margin-bottom: 0rem;
    }

@media (min-width: 1660px) {
    .bottom-line-text .p6 {
        font-size: 14px;
    }
}

.bottom-line-text .p6 .p6 {
    color: var(--bluelight00);
    cursor: pointer;
}

.date-picker {
    position: relative;
}

    .date-picker img.datepicker-icon {
        position: absolute;
        right: 10px;
        top: 0px;
        bottom: 0px;
        margin: auto;
        width: 24px;
        height: 24px;
    }

.datepicker-dropdown {
    background: white;
    padding: 10px 10px;
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.0705882353);
    overflow: hidden;
}

.datepicker-days .table-condensed th {
    font-family: "satoshi-regular";
    font-weight: 400;
}

.datepicker-days .table-condensed .dow {
    font-size: 14px;
    padding-top: 4px;
}

.datepicker-days .table-condensed td .active {
    background: var(--bluelight00);
}

.datepicker-days .table-condensed .day {
    min-width: 30px;
    min-height: 30px;
    height: 30px;
    font-size: 14px;
}

    .datepicker-days .table-condensed .day.active, .datepicker-days .table-condensed .day.active:hover, .datepicker-days .table-condensed .day.active:hover.active, .datepicker-days .table-condensed .day.active:hover:hover {
        background: var(--bluelight00);
    }

.datepicker-days .table-condensed .month.active, .datepicker-days .table-condensed .month.active:hover, .datepicker-days .table-condensed .month.active:hover.active, .datepicker-days .table-condensed .month.active:hover:hover,
.datepicker-days .table-condensed .year.active,
.datepicker-days .table-condensed .year.active:hover,
.datepicker-days .table-condensed .year.active:hover.active,
.datepicker-days .table-condensed .year.active:hover:hover {
    background: var(--bluelight00);
}

    .datepicker-days .table-condensed .year.active, .datepicker-days .table-condensed .year.active:hover, .datepicker-days .table-condensed .year.active:hover.active, .datepicker-days .table-condensed .year.active:hover:hover, .datepicker-days .table-condensed .year.active.active {
        background: var(--bluelight00);
    }

.accordion .accordion-item {
    border: none;
    margin-bottom: 15px;
}

    .accordion .accordion-item .accordion-button {
        font-size: 14px;
        font-family: "satoshi-medium";
        color: #001E2D;
        padding: 10px 10px;
        border-radius: 0.5rem;
        background-color: #E4F3FF;
    }

        .accordion .accordion-item .accordion-button.red-bg {
            background-color: #FCF3F2;
        }

        .accordion .accordion-item .accordion-button.green-bg {
            background-color: #EEF5EE;
        }

        .accordion .accordion-item .accordion-button::after {
            width: 1rem;
            height: 1rem;
            background-size: 1rem;
            transform: rotate(0deg);
        }

        .accordion .accordion-item .accordion-button[aria-expanded=true]::after {
            transform: rotate(0deg);
        }

        .accordion .accordion-item .accordion-button[aria-expanded=true]::after {
            transform: rotate(180deg);
        }

    .accordion .accordion-item .accordion-body {
        padding: 1rem 10px;
    }

.request-upload-parent {
    border: 1px solid #EEEEEE;
    margin-top: 20px;
    border-radius: 0.5rem;
    width: 100%;
}

    .request-upload-parent .request-upload-head {
        padding: 14px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 64px;
        padding: 14px 20px;
        background: #E4F3FF;
        border-radius: 0.5rem;
        font-family: "satoshi-medium";
    }

@media (max-width: 767px) {
    .request-upload-parent .request-upload-head {
        flex-direction: column;
        padding: 10px 10px 4px 10px;
    }

        .request-upload-parent .request-upload-head .h6 {
            text-align: center;
        }
}

.request-upload-parent .request-upload-head .right-attech {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

@media (max-width: 767px) {
    .request-upload-parent .request-upload-head .right-attech {
        margin: 10px 0px;
    }
}

.request-upload-parent .request-upload-head .right-attech a {
    color: #00658C;
    font-size: 12px;
    position: relative;
    display: block;
}

@media (max-width: 767px) {
    .request-upload-parent .request-upload-head .right-attech a {
        font-size: 10px;
    }
}

.request-upload-parent .request-upload-head .right-attech a.before-line {
    padding-left: 12px;
    margin-left: 12px;
    position: relative;
}

@media (max-width: 767px) {
    .request-upload-parent .request-upload-head .right-attech a.before-line {
        padding-left: 5px;
        margin-left: 5px;
    }
}

.request-upload-parent .request-upload-head .right-attech a.before-line::before {
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    margin: auto;
    width: 1px;
    height: 36px;
    background: #C5E7FF;
}

.request-upload-parent .request-upload-head .right-attech a.before-line input[type=file] {
    position: absolute;
    left: 0px;
    width: 100%;
    opacity: 0;
    cursor: pointer;
}



.request-upload-parent .request-upload-head-warning {
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 64px;
    padding: 14px 20px;
    background: #FFF6ED;
    border-radius: 0.5rem;
    font-family: "satoshi-medium";
}

@media (max-width: 767px) {
    .request-upload-parent .request-upload-head-warning {
        flex-direction: column;
        padding: 10px 10px 4px 10px;
    }

        .request-upload-parent .request-upload-head-warning .h6 {
            text-align: center;
        }
}

.request-upload-parent .request-upload-head-warning .right-attech {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

@media (max-width: 767px) {
    .request-upload-parent .request-upload-head-warning .right-attech {
        margin: 10px 0px;
    }
}

.request-upload-parent .request-upload-head-warning .right-attech a {
    color: ##FF9900;
    font-size: 12px;
    position: relative;
    display: block;
}

@media (max-width: 767px) {
    .request-upload-parent .request-upload-head-warning .right-attech a {
        font-size: 10px;
    }
}

.request-upload-parent .request-upload-head-warning .right-attech a.before-line {
    padding-left: 12px;
    margin-left: 12px;
    position: relative;
}

@media (max-width: 767px) {
    .request-upload-parent .request-upload-head-warning .right-attech a.before-line {
        padding-left: 5px;
        margin-left: 5px;
    }
}

.request-upload-parent .request-upload-head-warning .right-attech a.before-line::before {
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    margin: auto;
    width: 1px;
    height: 36px;
    background: #FF9900;
}

.request-upload-parent .request-upload-head-warning .right-attech a.before-line input[type=file] {
    position: absolute;
    left: 0px;
    width: 100%;
    opacity: 0;
    cursor: pointer;
}

.request-upload-parent .request-upload-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid #EEEEEE;
    border-top: 0px;
}

    .request-upload-parent .request-upload-box:last-child {
        border-radius: 0px 0px 0.5rem 0.5rem;
        border-bottom: none;
    }

    .request-upload-parent .request-upload-box .h6 {
        font-size: 14px;
        color: #00658C;
        font-family: "satoshi-medium";
    }

.messages-content-parent {
    position: relative;
    margin: -15px -20px 0px -20px;
}

    .messages-content-parent .messages-content {
        padding: 15px 20px 15px 20px;
        border-bottom: 1px solid #EEEEEE;
    }

@media (max-width: 576px) {
    .messages-content-parent .messages-content .d-flex {
        flex-direction: column;
        align-items: flex-start !important;
    }
}

.messages-content-parent .messages-content.unread {
    background: #F7F7F7;
}

.h-100-20 {
    min-height: calc(100% - 20px);
    position: relative;
}

    .h-100-20 .download-option {
        position: absolute;
        bottom: 0px;
        width: calc(100% - 40px);
        text-align: center;
        padding: 15px 0px;
        border-top: 1px solid #eeeeee;
        color: #00658C;
        margin-bottom: 0px;
        cursor: pointer;
    }

@media (max-width: 767px) {
    .h-100-20 .download-option {
        position: relative;
        padding-bottom: 0px;
        margin-top: 20px;
    }
}

.table-heading-add {
    display: block;
    position: relative;
    margin: 0px -20px;
    overflow: auto;
}

@media (max-width: 767px) {
    .table-heading-add {
        margin: 0px -10px;
    }
}

.table-heading-add .h6.gray-heading {
    background: #F7F7F7;
    margin: 0px;
    padding: 13px 20px;
}

.table-heading-add .toggle-btn-table {
    margin-bottom: 40px;
}

    .table-heading-add .toggle-btn-table thead tr th {
        font-family: "satoshi-medium";
        font-size: 12px;
        background: white;
        color: #717972;
        padding: 16px 8px;
        border-bottom: 1px solid #eeeeee !important;
        white-space: nowrap;
    }

        .table-heading-add .toggle-btn-table thead tr th:first-child {
            padding-left: 20px !important;
        }

        .table-heading-add .toggle-btn-table thead tr th.width525 {
            width: 525px;
        }

@media (max-width: 960px) {
    .table-heading-add .toggle-btn-table thead tr th.width525 {
        width: auto;
    }
}

.table-heading-add .toggle-btn-table thead tr th.width490 {
    width: 450px;
}

@media (max-width: 960px) {
    .table-heading-add .toggle-btn-table thead tr th.width490 {
        width: auto;
    }
}

.table-heading-add .toggle-btn-table thead tr th:last-child {
    padding-right: 20px !important;
    width: 220px !important;
    text-align: center;
}

@media (max-width: 767px) {
    .table-heading-add .toggle-btn-table thead tr th:last-child {
        padding-right: 20px !important;
        width: auto !important;
    }
}

.table-heading-add .toggle-btn-table tbody tr td {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    font-size: 14px;
    border-bottom: 1px solid #eeeeee !important;
}

    .table-heading-add .toggle-btn-table tbody tr td:first-child {
        padding-left: 20px !important;
    }

    .table-heading-add .toggle-btn-table tbody tr td:last-child {
        padding-right: 20px !important;
        min-width: 200px !important;
        text-align: center;
    }

@media (max-width: 767px) {
    .table-heading-add .toggle-btn-table tbody tr td:last-child {
        padding-right: 20px !important;
        width: auto !important;
    }
}

.table-heading-add .toggle-btn-table tbody tr td.bluelight00 {
    color: #00658C;
}

.table-heading-add .toggle-btn-table tbody tr td.bold {
    color: #001E2D;
    font-size: 14px;
    font-family: "satoshi-bold";
    white-space: nowrap;
}

.table-heading-add .toggle-btn-table tbody tr td .icon24 {
    cursor: pointer;
}

.table-heading-add .toggle-btn-table tbody tr td .radio-form-control {
    margin-left: 30px;
    white-space: nowrap;
}

.table-heading-add .toggle-btn-table tbody tr td.width525 {
    width: 525px;
}

@media (max-width: 960px) {
    .table-heading-add .toggle-btn-table tbody tr td.width525 {
        width: auto;
    }
}

.table-heading-add .toggle-btn-table tbody tr.row-pending {
    background: #FCF3F2;
}

    .table-heading-add .toggle-btn-table tbody tr.row-pending td {
        color: #717972;
    }

        .table-heading-add .toggle-btn-table tbody tr.row-pending td img {
            filter: opacity(0.5);
        }

.text-info.chars-remaining {
    font-family: "satoshi-regular" !important;
    color: #717972 !important;
    font-size: 12px !important;
    text-align: right;
}

.select2-container--default .select2-selection--multiple {
    min-height: 40px !important;
    padding-top: 4px !important;
    border-radius: 0.5rem !important;
    border: 1px solid var(--graycc) !important;
}

.select2-results__option {
    width: 100%;
    height: 36px;
    line-height: 36px;
    padding: 0px 15px !important;
    font-size: 14px;
    white-space: nowrap;
    background-color: #FFFFFF !important;
    cursor: pointer !important;
    position: relative;
    color: #001E2D !important;
}

    .select2-results__option.select2-results__option--selected, .select2-results__option:hover {
        background: #E4F3FF !important;
        color: #001E2D !important;
    }

.select2-dropdown {
    padding: 0px 0px !important;
    border-radius: 0.5rem !important;
    overflow: auto;
    max-height: 200px !important;
    width: 100%;
    border: 1px solid #CCCCCC !important;
    background: #ffffff !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-color: #EEEEEE transparent;
    scrollbar-width: thin;
}

.error-content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: calc(100vh - 118px);
}

    .error-content .error-center-content {
        max-width: 800px;
        text-align: center;
    }

        .error-content .error-center-content * {
            text-align: center;
        }

        .error-content .error-center-content .divider {
            width: 100%;
            max-width: 436px;
            height: 1px;
            background-color: #EEEEEE;
            margin: 10px auto 20px auto;
        }

        .error-content .error-center-content .h5 {
            margin-top: -24px;
            position: relative;
        }

    .error-content .error {
        color: #BA1A1A;
    }

/*lodear*/
#loader-wrapper {
    background-color: rgba(228, 243, 255, 0.5882352941);
    bottom: 0;
    height: 100%;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 9999;
}

#loader {
    background-position: center center;
    background-repeat: no-repeat;
    height: 80px;
    width: 80px;
    right: 0%;
    left: 0%;
    margin: auto auto;
    position: absolute;
    top: 0%;
    bottom: 0%;
}

.loader_img {
    height: 80px;
    width: 80px;
}

/*btn loader start*/
.spinner {
    display: inline-block;
    opacity: 0;
    width: 0;
    transition: opacity 0.25s, width 0.25s;
}
/*# sourceMappingURL=style.css.map */

.circle {
    float: left;
    margin-right: 10px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #001E2D;
    background: #F7F7F7;
    position: relative;
    cursor: pointer;
    font-size: 12px;
    font-family: "satoshi-medium";
}

    .circle p {
        margin: 0;
        transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
        position: absolute;
    }

/*
          width: 24px;
  height: 24px;
  position: relative;
  cursor: pointer;
  margin: auto;

    */

/*
        min-width: 32px;
  min-height: 32px;
  background: #F7F7F7;
  color: #001E2D;
  border-radius: 50%;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 0px;
  font-family: "satoshi-medium";

    */


/*New styles*/

.cursor-pointer {
    cursor: pointer;
}

.whitespace-nowrap {
    white-space: nowrap;
}

.w-full {
    width: 100%;
}

.upload-training-certificate {
    height: 69px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 1px dashed #CCCCCC;
    border-radius: 0.5rem;
    transition: ease-in-out 300ms;
    margin-bottom: 20px;
}

    .upload-training-certificate .upload-before {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        transition: ease-in-out 300ms;
        border-radius: 0.5rem;
    }

        .upload-training-certificate .upload-before:hover {
            background: rgba(0, 0, 0, 0.7);
            transition: ease-in-out 300ms;
        }

            .upload-training-certificate .upload-before:hover * {
                filter: contrast(0) brightness(5);
                transition: ease-in-out 300ms;
            }

        .upload-training-certificate .upload-before .p5 {
            color: #717972;
        }

    .upload-training-certificate .upload-after {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: ease-in-out 300ms;
        border-radius: 0.5rem;
        position: relative;
    }

        .upload-training-certificate .upload-after .close-icon {
            position: absolute;
            right: 5px;
            top: 5px;
            width: 20px;
            height: 20px;
            -o-object-fit: contain;
            object-fit: contain;
            z-index: 5;
            cursor: pointer;
        }

    .upload-training-certificate .upload-icon {
        width: 28px;
        height: 28px;
        -o-object-fit: contain;
        object-fit: contain;
    }

    .upload-training-certificate .p5 {
        font-size: 12px;
        color: #00658C;
        display: block;
        text-align: center;
    }

    .upload-training-certificate input[type=file] {
        position: absolute;
        z-index: 2;
        left: 0px;
        top: 0px;
        right: 0ox;
        bottom: 0px;
        opacity: 0;
        cursor: pointer;
    }

.profile-text {
    padding: 8px;
    background: #F7F7F7;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
}

.black1f {
    color: #1F1F1F;
}

.trainingdue {
    background-color: #FFF6ED;
}

table.dataTable tbody th.on-yellow,
table.dataTable tbody td.on-yellow {
    background-color: #FFEFD6;
}

.content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .help-rows .help-boxes.metrix-box {
    padding: 14px 14px 14px 14px;
    width: 288px;
    min-height: 130px;
    margin-bottom: 18px;
}

    .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .help-rows .help-boxes.metrix-box.removed .h6, .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .help-rows .help-boxes.metrix-box.removed .p5.mb-0, .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .help-rows .help-boxes.metrix-box.removed .p5.d-flex.align-items-center {
        filter: grayscale(1);
    }

    .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .help-rows .help-boxes.metrix-box .removed-text {
        position: absolute;
        right: 14px;
        color: #BA1A1A;
        cursor: pointer;
    }


@media (max-width: 767px) {
    .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .help-rows .help-boxes {
        margin-bottom: 15px;
    }
}

.content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .help-rows .help-boxes .dropdown .dropdown-toggle {
    position: absolute;
    right: 0px;
    transform: rotate(90deg);
}

.content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .help-rows .help-boxes .h6 {
    font-family: "satoshi-medium";
    max-width: 88%;
    line-height: 22px;
}

    .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .help-rows .help-boxes .h6.blue {
        color: #00658C;
    }

.content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .help-rows .help-boxes .read-more {
    font-size: 12px;
    color: #00658C;
    font-family: "satoshi-medium";
    margin-bottom: 0px;
    cursor: pointer;
}

.content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .help-rows .help-boxes .divider {
    width: calc(100% - 0px);
    height: 1px;
    background: #EEEEEE;
    position: relative;
    margin-bottom: 12px;
}

.content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .inner-padding30 {
    padding: 0px 0px;
}

    .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .inner-padding30 .video {
        width: 100%;
        max-width: 900px;
        border-radius: 0.5rem;
        border: 1px solid #EEEEEE;
        margin-bottom: 25px;
    }

    .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .inner-padding30 .pdf-box {
        border-radius: 0.5rem;
        overflow: hidden;
    }

        .content-box-formate .content-box-full .mid-view-wrapper .content-body-wrapper .inner-padding30 .pdf-box .pdf-img {
            height: 460px;
            width: 100%;
            max-width: 900px;
            border-radius: 0.5rem;
            border: 1px solid #EEEEEE;
            padding: 0px;
        }

.filter-btn {
    display: flex;
    align-items: center;
    background: #C5E7FF;
    border-radius: 8px;
    border: none;
    font-size: 12px;
    text-align: center;
    padding: 0px 12px;
    height: 36px;
    min-width: 82px;
    color: #001E2D;
}

    .filter-btn .icon20 {
        margin-right: 8px;
    }