body{
   background: #e1e8f7a1;
}
.choices__list--dropdown .choices__item--selectable.is-highlighted, 
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background-color: #163a87 !important;
}
#navbarVerticalCollapse{
    /* background-color: #163a87; */
    /* background-color: rgb(30 188 131 / 83%); */
    background-color: #163a87;
}
.navbar-toggler-humburger-icon {
    height: 1.7rem;
    width: 1.7rem;
}

.navbar-vertical.navbar-expand-xl .navbar-collapse{
    padding-left: 1rem;
    padding-right: 1rem;
}
.content{
    padding-right: 1.2rem;
}
.content .navbar-top{
    margin-right: -19px;
    margin-left: -17px;
    margin-bottom: 1.9rem;

    /* margin-bottom: 1.5rem; */
    padding-right: 19px;
    padding-left: 17px;
    padding-bottom: 0.79rem;

    border-bottom: 1px solid #d8e2ef;
    background-color: #fff;
}
.navbar-vertical .navbar-nav .nav-item .navbar-vertical-label{
    /* color: #d8e2ef; */
    color: #eef0f2d4;
    font-weight: 600;
}
.navbar-vertical .navbar-vertical-divider{
    color: #eef0f2d4;
}
.logo-img{
    width: 77px !important;
}
.claps-logo{
    background: #173b87; 
    justify-content: space-between; 
    padding-left: 1rem;
    padding-right: 4rem;
    height: 80px;   
    width: 15.5rem;
    border-bottom: 6px solid #ecf0fa;
}
.navbar-vertical-collapsed .navbar-vertical.navbar-expand-xl .logo-img {
/*    width: 184px;
*/    /* background-color: #163a87; */
    display: none;
       
}
.navbar .navbar-light .navbar-vertical .navbar-expand-xl .claps-logo{
    border-bottom: none !important;
}
.navbar-vertical-collapsed .navbar-vertical.navbar-expand-xl .claps-logo{
    background: transparent; 

}

.project-list-logo-div{
    width: 5rem;
    line-height: 1;
}

.project-list-select-form .choices .choices__inner{
    font-size:0.9rem;
    width:176px;
}
.projects-created .choices__list--single .choices__item,
.choices__list--single .choices__item{
    opacity: 0.7;
    color: #000;
}
.settings-panel-project-dtl{
    width: 48rem !important;
    max-width: 48rem;
    background-color: #ffffffed;
}
.settings-panel-jobs-dtl{
    width: 48rem !important;
    max-width: 48.6rem;
}
.avatar-c{
    height: 3rem;
    width: 3rem;
}
.navbar-vertical .navbar-nav .nav-item .nav-link{
    color: #fff;
}
.navbar-vertical .navbar-nav .nav-item .nav-link.dropdown-indicator:after{
    border-color: #fff;
}

.bg-gradient-danger {
    background: linear-gradient(to right, #edbec5, #df0f35) !important
}

.bg-expected-received { 
    background: linear-gradient(to right, #4facfe, #14c3cc) !important; 
}

.bg-gradient-pending{
    
    /* background: linear-gradient(to right, #ffe8a4, #c17809) !important; brown  */
    /* background: linear-gradient(to right, #e6e8ec, #68717f) !important; */
    background: linear-gradient(to right, #ffbf96, #ff6120) !important;
}
.bg-gradient-info {
    background: linear-gradient(to right, #90caf9, #047edf 99%) !important;
}
.bg-gradient-success{
    background: linear-gradient(to right, #84d9d2, #07cdae) !important;
}

.custom-counter-text{
    font-size: 17px;
}
.card-img-absolute {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
}


.footer{
    /* width: 81.5%; */
    width: auto;
    margin-top: 20px;
    margin-left: 15.5rem;
    position: relative;
}

.navbar-vertical.navbar-expand-xl + .footer {
    margin-left: 16.5rem;
}
.form-control{
    box-shadow: none;
}
.settings-panel-header{
    align-items: baseline;
}
.settings-panel-header .btn-close{
}
.calendarBtn{
    color: #ffffff !important;
    background-color: #163a87;
    background: #163a87;
}
.dropdown-item:hover .calendarBtn{
    color: #fff !important;
}
.vcalendarBtn .calendarSpanBtn{
    color: #fff !important;
}

.calendarBtn:hover .calendarSpanBtn{
    color: #000 !important;
}

.fc-timegrid-event {
    margin-bottom: 14px !important;
}
.fc-event-main{
    text-wrap: auto;
}










/* --------------------------------maam hamna start style  -------------------------------- */
settings-panel-header{
    background:#fff !important;
}

.custom-search {
    width: 100%;
    padding: 0.54rem 0.5rem 0.54rem 3rem;
    font-size: 1rem;
    border-radius: 0.4rem;
    border: 1px solid #E1E3EA;
    background: #F9F9F9;
    box-shadow: none !important;
    color: #5a5f7d;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.search-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 300px;
}
.search-wrapper .search-icon {
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    color: #9aa0b5;
    font-size: 1rem;
    pointer-events: none;
}












.btn-falcon-default{
    color: #fff !important;
    background-color: #163a87 !important;
    border-color: #163a87 !important;
    -webkit-box-shadow: var(--falcon-btn-falcon-box-shadow);
    box-shadow: var(--falcon-btn-falcon-box-shadow);
}
.btn-falcon-default:hover{
    color: #000 !important;
    background-color: #fff !important;
}


.report-nav{
    position:sticky;
    z-index:999;
    top:77px;
  }
  .report-nav123 .card{
    background:#deefff;
  }
/* --------------------------------maam hamna style  end-------------------------------- */
/* --------------------------------27 aug 25  start-------------------------------- */
.select2-container {
    z-index: 9999 !important;
  }
  .select2-container--default .select2-selection--single {
    background-color: #fff !important;
    border: 1px solid #d8e2ef  !important;
    border-radius: 4px !important;
    padding: 0.3125rem 1rem !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    height: 40px !important;
    color: #d8e2ef  !important;
  }
    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 37px !important;
    }
    .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: #b6c1d2 !important;
    }
    .dropzone .dz-message{
        margin: 0.5em 0 !important;
    }
    .offcanvas-body .dropzone .dz-preview .dz-image {
        width: 120px;
        height: 120px;
    }



    
    .badge-bg-success-c{
        background: #198754 !important;
        color: #fff !important;
    }
    .badge-bg-primary-c{
        background: #0d6efd !important;
        color: #fff !important;
    }
    .badge-bg-pending-c{
        background: #6c757d !important;
        color: #fff !important;
    }
    .badge-bg-review-c{
        background: #ffc107 !important;
        color: #fff !important;
    }


    /* oct-02-25  */
    /* view page report header and footer  */
    .reports-footer-view,
    .reports-header-view{
        display: flex !important;
        width: 100%;
        /* position: fixed;
        left: 0;
        right: 0;  */
        height: 80px;
    }
    .reports-header-view{
        /* top: 0px; */
        margin-bottom:10px;
        margin-top:0px;
    }
    .reports-footer-view{
        /* bottom: 0; */
        margin-top:10px;
        margin-bottom:0px;
    }

    .header-left-view{
        -webkit-print-color-adjust: exact !important; /* Chrome, Safari */
        color-adjust: exact !important;              /* Firefox */
        print-color-adjust: exact !important;  
        /* background-color: #003366 !important;  */
        background-color: red !important; 
        position: relative;
     
        width: 20%;
        padding: 10px 20px 10px 8px;
        display: flex;
        align-items: center;
        gap: 10px;
        border-radius: 5px;
        /* slant goes upward on right side */
        clip-path: polygon(0 0,100% 0, calc(100% - 18px) 100%,0 100%);
        border-bottom-right-radius: 58px;
    }

    .header-right-view{
        -webkit-print-color-adjust: exact !important; /* Chrome, Safari */
        color-adjust: exact !important;              /* Firefox */
        print-color-adjust: exact !important;  
        background-color: #4caf50 !important; 
        width: 80%;
        position: relative;
        background: #4caf50; 
        flex: 1;
        color: #000;
        padding: 20px;
        text-align: right;
        clip-path: polygon(21px 0,100% 0,100% 100%,0 100%);
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-radius: 5px;
        border-top-left-radius: 58px;
    }
    .header-right-view h6{
        margin-bottom: 0;
    }

    .footer-left-view{
        -webkit-print-color-adjust: exact !important; /* Chrome, Safari */
        color-adjust: exact !important;              /* Firefox */
        print-color-adjust: exact !important;  
        background-color: #4caf50 !important; 
        width: 80%;
        background: #4caf50; 
        flex: 1;
        color: #000;
        padding: 20px;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-radius: 5px;
        border-bottom-right-radius: 58px;
        clip-path: polygon(
        0 0, 
        100% 0, 
        calc(100% - 18px) 100%,  
        0 100%
        );
    }
    .footer-right-view{
        -webkit-print-color-adjust: exact !important; /* Chrome, Safari */
        color-adjust: exact !important;              /* Firefox */
        print-color-adjust: exact !important;        /* Modern spec */
        background-color: #003366 !important; 
        color: #fff;
        width: 20%;
        padding: 10px 8px 10px 18px;
        display: flex;
        align-items: center;
        gap: 10px;
        border-radius: 5px;
        border-top-left-radius: 58px;
        /* slant goes upward on right side */
        clip-path: polygon(21px 0,100% 0,100% 100%,0 100%);
    }
    .footer-left-view h5{
        margin-bottom: 0;
    }



    .table-common-dsn {
        border: 1px solid #000 !important;
    }
    /* .table-common-dsn tr th {
        background-color: #F9F9F9;
        font-weight: 600;
    } */
    .table-common-dsn tr td, .table-common-dsn tr th {
        border: 1px solid #000 ;
        vertical-align: middle ;
        padding: 6px 10px;
        font-size: 14px;
        color: #63758A
    }

/* --------------------------------27 aug 25    end-------------------------------- */


#customer-auth-modal .dropzone,
#signature-Modal .dropzone{
    height: 235px;
    min-height: 180px;
  }
  #customer-auth-modal .dropzone .dz-message, 
  #signature-Modal .dropzone .dz-message {
    padding: 4.5rem 2rem;
  }
  #customer-auth-modal .dropzone .dz-preview,
  #signature-Modal .dropzone .dz-preview{
    margin-top: 1px !important;
    min-height: 60px !important;
  }
  #customer-auth-modal .dropzone .dz-preview .dz-image,
  #signature-Modal .dropzone .dz-preview .dz-image {
    height: 108px !important;
  }
  #customer-auth-modal #signature-pad,
  #signature-Modal #signature-pad{
    border: 2px solid rgba(0, 0, 0, .3) !important;
    border-radius: 6px; 
  }

  .line-wrapper {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 27px;
  }

  .line-wrapper::before,
  .line-wrapper::after {
    content: "";
    flex: 1;
    border-bottom: 2px solid #163a87;;
    
  }

  .line-wrapper:not(:empty)::before {
    margin-right: 1rem;
  }

  .line-wrapper:not(:empty)::after {
    margin-left: 1rem;
  }

  .line-text {
    font-weight: bold;
  }


.attach-radio-div {
    display: flex;
    justify-content: end;
    flex-wrap: wrap;
    margin-bottom: 10px;
  }
  .attach-radio {
    display: flex;
    align-items: center;
    gap: 5px;
  }








@media (min-width: 1200px) {
    .navbar-vertical.navbar-expand-xl {
        /* max-width: 14.6rem; */
        max-width: 15.5rem;
    }
    .navbar-vertical-collapsed-hover .navbar-vertical.navbar-expand-xl .navbar-collapse {
        width: 13.625rem !important;
    }
    .navbar-vertical-collapsed .navbar-vertical.navbar-expand-xl .navbar-vertical-content {
        padding-right: 1.6rem;
    }    
    .navbar-vertical.navbar-expand-xl .navbar-collapse {
        width: inherit;
    }
    .navbar-vertical.navbar-expand-xl .navbar-vertical-content {
        /* width: inherit; */
        width: 16.9vw;
        width: 14.3rem;
    }

    .navbar-vertical-collapsed .navbar-vertical.navbar-expand-xl .navbar-collapse {
        /* width: 4rem !important; */
        padding-left: 0.5rem;
    }
    .navbar-vertical-collapsed .navbar-vertical.navbar-expand-xl + .content .navbar-top {
        padding-left: 12.5rem;
    }

    .navbar-vertical.navbar-expand-xl + .content {
        margin-left: 16.625rem;
    }
}
@media (min-width: 1400px) {
    .navbar-vertical.navbar-expand-xl .navbar-vertical-content {
        /* width: inherit; */
        max-width: 16.5rem;
    }
    .navbar-vertical.navbar-expand-xl + .content {
        margin-left: 16.5rem;
    }
    .navbar-vertical.navbar-expand-xl + .footer {
        margin-left: 16.5rem;
    }
    .claps-logo{
        width: -webkit-fill-available;
    }
    .content .navbar-top {
        margin-right: -19px;
        margin-left: -15px;
        padding-left: 15px;
    }
    .search-box{
        margin-top: 1px;
    }
}

@media (min-width: 1600px) {}

.reports-footer ,
.reports-header {
    display: none;
}



.ck.ck-editor__editable_inline {
    height: 180px;
}

.normal-page{
    display: block;
}
 .table-wrapper-print{
    visibility: hidden;
    height: 0;
    overflow: hidden;
}


.force-print .normal-page { display: none !important; }
.force-print .table-wrapper-print {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
    width: 100% !important;
}





















































@media screen {   

    /* If page-level horizontal scroll appears, ensure body doesn’t overflow */
    /* html, body { overflow-x: hidden; } */

    .chart-container {
        display: block !important;
        overflow: visible !important;
    }
}    
@media print {
    .container{
        width: 100%;
        max-width: 100%;
    }

    .pot-row{
        width: 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    .no-print, nav, .btn, footer {
        display: none !important;
    }
    body {
        font-size: 12pt;
        color: #000 !important;
        background: #fff !important;
    }
   
    table {
        width: 100% !important;
        border-collapse: collapse !important;
    }
    table th, table td {
        font-size: 14px !important;
    }
    .container, .row, .col {
        padding: 0 !important;
        margin: 0 !important;
    }
    .report-nav nav{
        display:block !important;
    }
    .report-nav nav li{
        font-size:28px !important;
        font-weight:700 !important;
        border-bottom:1px solid #d8e2ef !important;
        margin-top:15px !important;
        margin-bottom:15px !important;
        padding-bottom:10px !important;
        color: #163a87 !important;
        width:100% !important;
    }
    .report-nav{
        display: none;
    }
    .report-nav-title{
        margin: 20px 10px 30px 15px;
        padding: 20px 10px 10px 0px;
        border-bottom: 1px solid #9aa0b5;
        font-size: 1.44rem;
        display: flex !important;
    }
    .card{
        box-shadow: none !important;
        padding: 0px !important;
        margin: 0px !important;
        margin-bottom: 10px !important;

    }
    .card-body{
        box-shadow: none !important;
        padding: 0px !important;
        margin: 0px !important;
        margin-bottom: 10px !important;
    }
    .card-body h4{
        font-size:22px !important;
        font-weight:600 !important;
        color: #163a87 !important;
    }
    .bg-primary {
        background-color: #163a87 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    .col-12-print{
        width: 100% !important;
    }
    .col-11-print{
        width: 90% !important;
    }
    .col-10-print{
        width: 80% !important;
    }

    .col-8-print{
        width: 66.7% !important;
    }
    .col-7-print { width: 58.33333333%!important; }

    .col-6-print{
        width: 50% !important;
    }
    .col-5-print{ width: 41.66666667%!important; }
    .col-4-print{
        width: 33.3% !important;
    }
    .col-2-print{
        width: 16.6% !important;
    }
    .print-w100{
        width: 100%;
    }
    .print-w50{
        width: 50%;
    }
    .print-w60{
        width: 60%;
    }
    .print-w70{
        margin-top: 10px;
        width: 70%;
    }
    .print-w90{
        margin-top: 20px;
        width: 90%;
        margin-left: 0;
        padding-left: 0;
    }
    .form-select-c{
        border: none !important;
        --falcon-form-select-bg-img: none !important;
        box-shadow: none !important;
    }
    .no-print {
        display: none !important;
    }
    h4, .h4 {
        font-size: 1.3rem;
    }
    .chart-container{
        margin-left: 0px !important;
        margin-top: 25px !important;
        padding-top: 25px !important;
        margin-bottom: 25px !important;
        padding-bottom: 25px !important;
    }
    .content {
        padding-right: 2px !important;
        padding-left: 2px !important; 
        margin-right: 0;
        margin-left: 0;
    }
    .container {
        max-width: 100%;
        margin: 0 !important;
    }

    .px-0 {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    @page {
        counter-increment: page;
    }
    body {
        counter-reset: page 0; 
    }
    
    @page {
        size: A4 !important;
        margin: 0px !important; 
        padding: 0 !important;
    }
    .pagenum::before {
        content: counter(page);
    }

    




    .normal-page{
        display: none;
    }
    .table-wrapper-print{
        visibility: visible !important;
        width: 100%;
        height: auto;
        margin: 0 !important;
        padding: 0 !important;
    }
    .print-table { 
        width: 100% !important; 
        border-collapse: collapse; 
        margin: 0 !important;
        padding: 0px !important;
    }
    .print-table .print-table-thead { 
        display: table-header-group;
        height: 130px;
    }   
    .print-table .print-table-tfoot { 
        display: table-footer-group; 
        height: 100px;
       
    }   
    .print-table tr, .print-table td { 
        page-break-inside: avoid !important; 
        break-inside: avoid !important; 
    }
    .reports-footer,
    .reports-header {
        display: flex !important;
        width: 100%;
        position: fixed !important;
        height: 80px;
        z-index: 9999;
        
        right: 0;
    }
    .reports-header {
        top: 0px;
    }
    .reports-footer {
        bottom: 0px;
    }

    .page-break {
        page-break-before: always;
    }
    
    .avoid-break {
        page-break-inside: avoid;
    }


    .d-print-none {
        display: none !important;
    }

    .header-left {
        -webkit-print-color-adjust: exact !important; 
        color-adjust: exact !important;             
        print-color-adjust: exact !important;  
        background-color: #003366 !important; 
        position: relative;
        width: 20%;
        padding: 10px 20px 10px 8px;
        display: flex;
        align-items: center;
        gap: 10px;
        border-radius: 5px;
        clip-path: polygon(0 0,100% 0, calc(100% - 18px) 100%,0 100%);
        border-bottom-right-radius: 58px;
    }

    .header-right {
        -webkit-print-color-adjust: exact !important; 
        color-adjust: exact !important;              
        print-color-adjust: exact !important;  
        background-color: #4caf50 !important; 
        width: 80%;
        position: relative;
        background: #4caf50; 
        flex: 1;
        color: #000;
        padding: 20px;
        text-align: right;
        clip-path: polygon(21px 0,100% 0,100% 100%,0 100%);
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-radius: 5px;
        border-top-left-radius: 58px;
    }

    .footer-left{
        -webkit-print-color-adjust: exact !important; 
        color-adjust: exact !important;             
        print-color-adjust: exact !important;  
        background-color: #4caf50 !important; 
        width: 80%;
        background: #4caf50; 
        flex: 1;
        color: #000;
        padding: 20px;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-radius: 5px;
        border-bottom-right-radius: 58px;
        clip-path: polygon(
        0 0, 
        100% 0, 
        calc(100% - 18px) 100%,  
        0 100%
        );
    }
    .footer-left h5{
        margin-bottom: 0;
    }
    .footer-right{
        -webkit-print-color-adjust: exact !important; 
        color-adjust: exact !important;              
        print-color-adjust: exact !important;        
        background-color: #003366 !important; 
        color: #fff;
        width: 20%;
        padding: 10px 8px 10px 18px;
        display: flex;
        align-items: center;
        gap: 10px;
        border-radius: 5px;
        border-top-left-radius: 58px;
        clip-path: polygon(21px 0,100% 0,100% 100%,0 100%);
    }
    .header-left img,
    .footer-right img{
        max-width: 100%;
        height: auto;
    }
    
    .reports-header-view,
    .reports-footer-view{
        display: none !important;
    }


    .report-title{
        margin-top: 10px;
        margin-bottom: 0px;
    }

    .print-pdf-preview {
        display: block !important;
        margin-top: 10px;
        page-break-inside: avoid;
        width: auto;
        background: #fff !important; 
        padding: 0;
    }

    .pdf-frame {
        width: 100% !important;
        height: 800px !important; 
        border: none !important;
        background: #fff !important;
        margin: 0
    }


    
 


    #chart, .chart-container {
        display: block !important;
        visibility: visible !important;
        overflow: visible !important;
        height: auto !important;
    }

    /* Fix SVG not appearing in print */
    #chart svg {
        width: 100% !important;
        height: 350px !important;  /* FIX: SVG height disappears without this */
        overflow: visible !important;
    }

    .col-8, .print-w90 {
        width: 100% !important;
        max-width: 100% !important;
    }

    
}