:root{
    --base-pink :#EB1D7B;
    --base-green :#00B700;
    --base-gray : #E6E6E6;
}

::-webkit-scrollbar {
    width: 5px;
    height: 10px;
}
::-webkit-scrollbar-thumb {
    border-radius: 30px;
    background: var(--base-pink);
}
::-webkit-scrollbar-track {
    background: #ccc;
}


body {
    margin: 0;
    font-family: 'Quicksand', sans-serif;
}

.admin-layout {
    display: flex;
    overflow: hidden;
    min-height: 100vh; 
}
.flatpickr-done-btn{
    background: var(--base-pink)!important;
    background-color: var(--base-pink)!important;
}
.flatpickr-done-btn{
    background: var(--base-pink)!important;
    background-color: var(--base-pink)!important;
}
.sidebar {
    width: 130px;
    display: flex;
    padding: 10px;
    color: #ecf0f1;
    justify-content: start;
    background-color: var(--base-pink); 

    .roles_admins .buckle-icon{
        font-size: 35px;
        margin-bottom: .5rem;
    }
}
.dropdown-area{
    padding: 10px 0;
    margin-top: 1rem;
    background-color: #bb1d6573;

    li{
        padding: 5px; 
    }
}
.sidebar ul{
    padding: 0;
    list-style: none;

    .nav-item {
        margin-bottom: 2rem;
    }
    .nav-item a{
        display: flex;
        font-size: 13px;
        align-items: center;
        flex-direction: column;
        justify-content: center;
    }
    .nav-item ul#reportDropdown{
        li a{
            align-items: start;
        }
    }
    img{
        width: 3rem;
        margin-bottom: .5rem;
    }
    li.nav-item.dropdown img{
        width: 2rem;
        margin-bottom: 0;
    }
    
    .nav-item.dropdown{
        margin: 2rem 0;
    }

    .nav-item.dropdown .dropdown-menu-end {
        border: 1px solid #f9f9f9;
        transform: translate3d(5.5rem, 1.2rem, 0)!important;
    }

    .submenu-icon {
        width: 20px;
        height: 20px;
        margin-right: 10px;
        vertical-align: middle;
    }

    /* Optional: Spacing and hover effect for better visibility */
    .dropdown-item {
        color: var(--base-pink);
        padding: 5px 10px;
    }

    .dropdown-item:hover {
        background-color: #f1f1f1;
        color: var(--base-pink);
    }
    .dropdown-toggle::after{
        content: '';
        display: none;
    }
    .nav-link{
        padding: 0;
    }
    .nav-link:focus, .nav-link:hover{
        color: #fff;
    }
}
.admin-logo{
    width: 90px;
    height: 90px;
    object-fit: contain;
    object-position: center;
}
.sidebar a {
    display: block;
    color: #ecf0f1;
    text-decoration: none;
    transition: all .3s ease-in-out;
    
    /* &:hover{
        transform: scale(1.05);
    } */
}
.sidebar a.dropdown-item{
    transform: scale(1);
    padding: 10px;

    &:hover{
        border-radius: 4px;
        background-color: #fff;
    }
}

.main-content {
    flex: 1; 
    display: flex;
    flex-direction: column;
    transition: all .3s ease-in-out;
}

header {
    color: #000;
    padding: 15px 0;
    text-align: center;
    position: relative;

    .door-header-icon{
        width: 5rem;
    }
    .mobile-toggler{
        display: none;
    }
}

main {
    flex: 1; 
}
.text-pink{
    color: var(--base-pink);
}
.text-green{
    color: var(--base-green);
}
.bg-pink{
    background-color: var(--base-pink);
    background: var(--base-pink);
}
.bg-gray,.bg-gray:hover{
    background-color: #E6E6E6;
}
.btn.bg-gray:hover{
    color: var(--base-pink);
}
#changeMaterialModal{
    .btn.disabled, .btn:disabled, fieldset:disabled .btn{
        background: yellowgreen;
        border-color: yellowgreen;
        background-color: yellowgreen;
    }
}
.text-gray{
    color: darkgray!important; 
}
.btn-primary{
    background: var(--base-pink);
    border-color: var(--base-pink);
    background-color: var(--base-pink);

    &:hover,&:focus,&:focus-visible,&:active{        
        color: #fff;
        border-color: #d80f6b;
        background-color: #d80f6b;
    }
}
.dt-button.btn-primary{
    color: #fff!important;
    border-radius: 0.375rem!important;
    background: var(--base-pink)!important;
    border-color: var(--base-pink)!important;
    background-color: var(--base-pink)!important;
    
    &:hover,&:focus,&:focus-visible,&:active{        
        color: #fff!important;
        background: #d80f6b!important;
        border-color: #d80f6b!important;
        background-color: #d80f6b!important;
    }
}
.btn-primary.btn:first-child:active{
    color: #fff;
    border-color: #d80f6b;
    background-color: #d80f6b;
}
.btn-pink{
    color: #fff;
    background: var(--base-pink);
    border-color: var(--base-pink);
    background-color: var(--base-pink);
    
    &:hover{        
        color: #fff;
        background-color: #d80f6b;
    }
}
.btn-success{
    background: var(--base-green);
    border-color: var(--base-green);
    background-color: var(--base-green);
}
.btn-dark-gray{
    color: #000;
    background-color: #ADADAD;
    
    &:hover{        
        background-color: #958c8c;
    }
}
.active>.page-link, .page-link.active {
    border-color: var(--base-pink);
    background-color: var(--base-pink);
}
.page-link,.page-link:hover{
    color: var(--base-pink);
}
footer {
    border-top: 1px solid #ddd;
    background-color: #fff;
    text-align: center;
    padding: 10px;
}
#settings-dropdown{
    a{
        flex-direction: row;
        color: var(--base-pink);
    }
}
.forgot-password-link{
    font-size: 12px;
}
.dashboard{
    .dash-boxes{
        width: 190px;
        max-width: 190px;
    }
}
table.table-bordered.dataTable thead tr:first-child th{
    color: #fff;
    text-align: center;
    background-color: var(--base-pink);
}
table tr td{
    font-size: 14px;
    text-align: center;
    white-space: nowrap;

    a{
        color: #000;
        text-decoration: none;
    }
    img.view-eye{
        width: 2rem;
    }
}
table#customer_order_details tr th{
    font-size: 12px; 
    text-align: center;
}
table#customer_order_details tr td{
    font-size: 12px; 
    text-align: center;

    div.d-flex{
        align-items: center;
    }
}
table#customer_order_details tr td:nth-child(6),
table#customer_order_details tr td:nth-child(7){
    color: darkgray!important;
}
table#customer_order_details tr td button{
    width: 135px;
    padding: 5px;
    font-size: 12px;
}
button{
    font-weight: 500;
}
.form-check{
    gap: 1rem;
    display: flex;
    margin-bottom: 1rem;

    .form-check-input{
        width: 1.5rem;
        height: 1.5rem;
    }
} 
#ordersTable_filter,#customer_order_details_filter,#agentSummaryTable_filter,
#shipmentsTable_filter,#landedCostsTable_length{
    display: none;
}
.attachedLabel{
    color: #000;
    font-size: 14px;
    font-weight: 500;
    padding: 9px 10px;
    white-space: nowrap;
    border-radius: 4px 0 0 4px;
    background-color: var(--base-gray);
}
#qualityCheck th,
#qualityCheck td,
#salesSummary th,
#salesSummary td,
#agentSummaryTable th,
#agentSummaryTable td,
#delayedProgressTable th{
    text-align: center;
}
#status_filter,#order_search,#vessel_search,#global_search,
#global_shipment_search,#eta,#vessel,#container,
#landedCostSummary_search,#container_filter,
#order_date_from,#order_date_to,#sorting_filter,
#clearing_lc,#shipping_lc,#colour_filter,#days_filter,
#shutterType_filter,#customer_Confirmation_filter,
#team_leader_filter,#user_filter,#check_status_filter,
#Drawing_Approval_filter,#post_code_filter ,.shorting_filter{
    margin-left: -1px;
    border-radius: 0 4px 4px 0;
}
#agentSummaryTable_wrapper .dt-buttons{
    right: 0;
    top: -5.3rem;
    position: absolute;
}
#user_filter{
    width: -webkit-fill-available;
}
.table-overflow{
    overflow-x: auto;
    direction: ltr;
    max-height: 500px; /* Set this based on your table's height */
    overflow-y: auto !important; /* Vertical scrolling enable kare */
}
.sticky-col {
    position:sticky;
    left:0;
    z-index: 100;
}

/* Table styling */
#customer_order_details {
    width: 100%;
    border-collapse: collapse;
}

#customer_order_details thead {
    position: sticky;
    top: 0; /* Ensure header sticks at the top */
    z-index: 200; /* Make sure header stays on top of rows */
}


#customer_order_details thead th:first-child,
#customer_order_details tbody td:first-child {
    position: sticky;
    left: 0;
    z-index: 100;
} 

#modal_activity_log_table tbody td:nth-child(3) {
    white-space: normal !important; 
    word-break: break-word;
    width: 40%;
}


#customerOrderNumber, #customerNameInput,
#emailInput, #phoneInput, #addressInput,
#DelAddress2,#DelCounty, #DelPostCode ,#DelTown, #DelAddress1{
border: none;
    direction: ltr;
    max-height: 500px; /* Set this based on your table's height */
    overflow-y: auto !important; /* Vertical scrolling enable kare */
}
.sticky-col {
    position:sticky;
    left:0;
    z-index: 100;
}

/* Table styling */
#customer_order_details {
    width: 100%;
    border-collapse: collapse;
}

#customer_order_details thead {
    position: sticky;
    top: 0; /* Ensure header sticks at the top */
    z-index: 200; /* Make sure header stays on top of rows */
}


#customer_order_details thead th:first-child,
#customer_order_details tbody td:first-child {
    position: sticky;
    left: 0;
    z-index: 100;
} 


#DelAddress2, #DelTown, #DelCounty, #DelPostCode {
    /* margin-left: 164px; */
}

#customerOrderNumber, #customerNameInput,
#emailInput, #phoneInput, #addressInput, #DelAddress2,#DelCounty, #DelPostCode ,#DelTown{
border: none;
}
tr .fa-circle-check{
    font-size: 2rem;
    color: var(--base-pink);
}
tr .fa-circle-xmark{
    font-size: 2rem;
    color: var(--base-gray);
}
table#ordersTable.dataTable thead tr:first-child th {
    color: #000;
    font-weight: 600;
    text-align: center;
    background-color: transparent;
    
}
table#ordersTable.dataTable thead tr th:first-of-type,
table#ordersTable.dataTable thead th:nth-child(1),
table#ordersTable.dataTable thead th:nth-child(2),
table#ordersTable.dataTable thead th:nth-child(3),
table#ordersTable.dataTable thead th:nth-child(4),
table#ordersTable.dataTable thead th:nth-child(5){
    white-space: nowrap; 
}
table#ordersTable.dataTable thead th.eta {
    width: 73px !important;
}
table#troubleOrder.dataTable thead tr th:first-of-type,
table#troubleOrder.dataTable thead th:nth-child(1),
table#troubleOrder.dataTable thead th:nth-child(2),
table#troubleOrder.dataTable thead th:nth-child(3),
table#troubleOrder.dataTable thead th:nth-child(4),
table#troubleOrder.dataTable thead th:nth-child(5){
    white-space: nowrap; 
}
table#ordersTable.dataTable tr td{
    padding: 15px 5px;
}
#ordersTable {
    width: 100% !important;
    table-layout: fixed;
}
/* #ordersTable th, #ordersTable td, #troubleOrder th, #troubleOrder td{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
} */
table#ordersTable thead th:nth-child(3){
    width: 50px !important;
}
table#ordersTable thead th:nth-child(4),
table#ordersTable thead th:nth-child(5){
    width: 100px !important;
}

#ordersTable thead th{
    white-space: normal;
    overflow: visible; 
    text-overflow: clip; 
    word-wrap: break-word;
}

table#ordersTable thead th:nth-child(4),
table#ordersTable thead th:nth-child(5){
    width: 100px !important;
}


.csvButtonsArea button{
    min-width: 170px;
}
.cod-header{
    div,button{
        font-size: 12px;
    }
}
.toast-message{
    width: -webkit-fill-available;
}
.drawingUpload{
    .upload-label {
        cursor: pointer;
    }
    tr td{
        padding: 1em;
        vertical-align: middle;
    }
    select{
        font-size: 14px;
    }
    .form-select:focus{
        box-shadow: none;
        border-color: var(--base-pink);
    }
    #add-row.btn{
        font-size: 12px;
        padding: 5px 35px;
    }
    tfoot td{
        font-size: 12px;
    }
    #confirm-upload,#cancel-upload,#bulk-upload{
        padding: 8px;
        font-size: 14px;
        min-width: 200px;
    }
}
.white-space-normal{
    white-space: normal;
}
.shipments{
    #create_shipment{
        width: 170px;
        font-size: 14px;
    }
    #export_shipment_csv{
        width: 200px;
        font-size: 14px;
    }
    .attachedLabel{
        padding: 9px 20px;
    }
}
.create-shipment-box{
    .attachedLabel{
        min-width: 110px;
        text-align: center;
    }
    button{
        font-size: 14px;
    }
}
.landedCostSummary{
    button{
        font-size: 14px;
    }    
}
.create-shipment-box table th{
    font-size: 12px;
    background-color: transparent;
}
.create-shipment-box table td input,
.create-shipment-box table td select{
    font-size: 12px;
}
#shipmentsTable th,
#shipment-table-body td input{
    text-align: center;
}
#shipmentsTable tr td{
    vertical-align: middle;
}
.notesArea{
    button{
        width: 150px;
    }
}
.cursor-pointer{
    cursor: pointer;
}
.btn .badge {
    top: 0px;
}
#chatModal {
    #chatMessages{
        padding: 0px;
        height: 350px; 
        overflow-y: scroll;
    }

    .border-outer{
        padding: 10px;
        border-radius: 4px;
        margin-bottom: 10px;
        border: 1px solid #f1f1f1;
    }

    .bg-primary {
        text-align: left;
        background-color: #007bff !important;
    }
    
    .bg-light {
        text-align: left;
        background-color: #f8f9fa !important;
    }
    
    .text-end,
    .text-start {
        max-width: 70%;
    }
    
    textarea {
        height: 150px;
    }       
}
#qualityCheckModal {
    #qcMessages{
        padding: 10px;
        height: 350px; 
        overflow-y: scroll;
    }
}
#pdfViewer{
    width: 100%;
    border: none;
    height: -webkit-fill-available;
}
.question-answer-row>*,.question-answer-row .question,#pdfDetailsList>*,.confirmedBodyContent>*{
    font-size: 12px;
}
.fs-12{
    font-size: 12px;
}
.fs-14{
    font-size: 14px;
}
.question-answer-row .remove-question{
    width: 2em;
    height: 2em;
}
.disabledField input,
.disabledField textarea{
    pointer-events: none;
    background-color: #f9f9f9;
}
#drop-zone{
    border: 2px dashed #e271a5; 
}
.border-color-pink{
    border-color: var(--base-pink);
}
table#landedCostSummaryTable.dataTable thead th{
    text-align: center;
}
.orderCodUrl{
    text-decoration: underline; 
    cursor: pointer;
    color: var(--base-pink);
}
table#coloursTable.dataTable thead th{
    text-align: center;
}
table#frameConfigsTable.dataTable thead th{
    text-align: center;
}
table#panelConfigsTable.dataTable thead th{
    text-align: center;
}
.page-item.active .page-link:hover{
    color: #000!important;
}
#approve-button{
    margin-right: 2rem;
}
#questionsTable .btn{
    min-width: 100px;
} 
#questionsTable th:nth-child(2), 
#questionsTable td:nth-child(2) {
    white-space: normal;
    width: 250px !important;
}
.questionAccordion{
    display: none;

    textarea:focus {
        color: var(--base-pink);
    }    
    .questionForm{
        max-height: 22em;
        overflow-y: auto;
    }
    .questionFooter{
        .btn{
            min-width: 220px;
        }
    }
}
#questionsTable_filter{
    display: none;
}
select option {
    background-color: #fff; /* Light gray background */
    color: var(--base-pink); /* Gray text */
}
select option:disabled {
    background-color: #f0f0f0; /* Light gray background */
    color: #aaa; /* Gray text */
}
.deleteRow{
    width: 2rem;
    cursor: pointer;
}
.dataNotPresent{
    display: none;

    img{
        width: 10em;
    }
}
#scheduleTasksTable{
    .btn{
        min-width: 100px;
    }
}
.cod-header .bg-gray:first-child{
    .fw-medium{
        word-break: break-all;
    }
}
table input[type="checkbox"] {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--base-pink);
    border-radius: 4px;
    display: inline-block;
    position: relative;
    cursor: pointer;
}

table input[type="checkbox"]:checked {
    background-color: var(--base-pink);
    border-color: var(--base-pink);
}

table input[type="checkbox"]::before {
    content: "";
    position: absolute;
    width: 7px;
    height: 11px;
    border: solid white;
    border-width: 0px 3px 3px 0;
    transform: rotate(45deg);
    top: 2px;
    left: 5px;
    display: none;
}

table input[type="checkbox"]:checked::before {
    display: block;
}
#SLAReportTable_wrapper .row:first-of-type{
    display: none;
}
.mfa-settings{
    .form-check-input {
        width: 50px;
        height: 27px;
        background-color: #ccc;
        border-radius: 25px;
        position: relative;
        appearance: none;
        outline: none;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    .form-check-input:checked {
        border-color: var(--base-pink);
        background-color: var(--base-pink);
    }

    .form-check-input:before {
        content: '';
        position: absolute;
        top: 2px;
        left: 2px;
        width: 21px;
        height: 21px;
        background-color: white;
        border-radius: 50%;
        transition: transform 0.3s;
    }

    .form-check-input:checked:before {
        transform: translateX(25px);
    }
    .remove-ip{
        width: 35px;
        cursor: pointer;
    }
    .input-group .form-control{        
        border-radius: var(--bs-border-radius)!important;
    }
}