@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

.login-main-wrap{width: 100%; height: 100vh; overflow-y: hidden; display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
.login-left-colum{display: flex; justify-content: center; align-items: center;}
.login-form{width: 90%; max-width: 450px; margin: 0 auto; display: flex; justify-content: start; flex-direction: column; gap: 30px;}
.login-form .brand-logo{width: 150px;}
.login-form .brand-logo img{width: 100%;}
form.login .head{width: 100%; margin-bottom: 15px;}
form.login .head h3{font-size: 28px; color: #2B3674;}
form.login .head p{font-size: 16px; color: #4D4D4D}
form.login .form-group{margin-bottom: 10px;}
form.login .form-group label{font-size: 16px; color: #4D4D4D}
form.login .form-group input{font-size: 16px; padding: 0.8rem 1rem; bprder: 1px solid #E0E5F2; border-radius: 10px;}
form.login .form-group input::placeholder{color: #A3AED0;}
form.login .form-select{font-size: 16px; padding: 0.8rem 1rem; bprder: 1px solid #E0E5F2; border-radius: 10px;}
.btn{background: #2B3674; color: #ffffff; border-radius: 10px; font-size: 14px;}
.login-form .btn:hover{background: #2B3674; color: #ffffff;}
.copyright{color: #515253; text-align: center;}

.login-right-colum{height: 100vh; overflow: hidden; border-radius: 0 0 0 25%;}
.login-form-brand{background: url('../img/login-bg.png') no-repeat; background-size: 100%; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;}
.login-form-brand .brand-logo{width: 70%;}
.login-form-brand .brand-logo img{width: 100%;}
.password-wrap{position: relative;}
.field-icon {position: absolute; top: 15px; right: 10px; z-index: 2;}

.navbar-nav-right .btn+.btn{margin-left: 10px; background: #2F881B; border-color: #2F881B;}

.sidebar{padding: 10px 12px;}
.sidebar .nav .nav-item{margin: 5px 0; padding: 0;}
.sidebar .nav .nav-item .nav-link{padding: 15px 15px;}
.sidebar .nav .nav-item .nav-link .menu-title{font-size: 16px; font-weight: 500;}
.sidebar .nav .nav-item .nav-link:hover .menu-title, .sidebar .nav .nav-item.active .nav-link .menu-title{color: #2F881B;}
.sidebar .nav .nav-item .nav-link img{filter: brightness(0) invert(1); margin-right: 10px; width: 16px;}
.sidebar .nav .nav-item .nav-link:hover img, .sidebar .nav .nav-item.active .nav-link img{filter: brightness(1) invert(0);}

.navbar-nav-right .btn-icon{
	width: 30px;
	height: 30px !important;
	display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: 1px solid #2B3674; 
    border-radius: 25%;
	transition: all 0.3s ease;
	margin-right: 0 !important;
}
.navbar-nav-right .btn-icon:hover {
    background: #2B3674;
    border-color: #9CA3AF;
    color: #fff !important;
}

.dashboard-card1-wrap{display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px;}
.dashboard-card1-wrap .card{background: #ffffff; border: 1px solid #2B409580; border-radius: 8px; padding: 15px;}
.dashboard-card1-wrap .card .icon{background: #DEDEFA; width: 40px; height: 40px; border-radius: 40px; border: 4px solid #EFEFFD; display: flex;
    justify-content: center; align-items: center;}
.dashboard-card1-wrap .card h3{font-size: 18px; line-height: 25px; font-weight: 500; color: #667085; min-height: 50px; margin: 10px 0;}
.dashboard-card1-wrap .card .counter{font-size: 18px;}
.dashboard-card1-wrap .card .counter span{background: #F0F1F3; color: #667085; padding: 5px 10px; border-radius: 15px; font-size: 14px;}
.dashboard-card1-wrap .card .counter span.green{background: #E7F4EE; color: #0D894F; padding: 5px 10px; border-radius: 15px; font-size: 14px;}
.dashboard-card1-wrap .card .counter span.red{background: #FEEDEC; color: #F04438;}

.upcoming-reminders{background: #ffffff; border: 1px solid #2B409580; border-radius: 8px; padding: 30px;}
.dashboard-card2-wrap{display: grid; gap: 30px; grid-template-columns: repeat(5, 1fr);}
.dashboard-card2-wrap .card{ padding: 15px; border: 1px solid #2B409580; border-radius: 8px; position: relative;}
.dashboard-card2-wrap .card .close{position: absolute; top: 15px; right: 15px; content: ''; font-size: 26px; color: #667085; cursor: pointer; }
.dashboard-card2-wrap .card .icon{background: #ffffff; width: 40px; height: 40px; border-radius: 8px; border: 1px solid #EFEFFD; display: flex;
    justify-content: center; align-items: center;}
.dashboard-card2-wrap .card h3{font-size: 16px; font-weight: 400; color: #667085; margin: 10px 0;}
.dashboard-card2-wrap .card h5{font-size: 16px; font-weight: 400; color: #000000;}
.dashboard-card2-wrap .card p{font-size: 14px; font-weight: 400; color: #000000;}
#heatmap { max-width: 900px; margin: auto; }

.project-card{background: #fff; border: 1px solid #EAECF0; border-radius: 8px;}
.project-card .header-card{padding: 15px; border-bottom: 1px solid #E5E6E9; display: flex; justify-content: space-between; align-items: center;}
.project-card .header-card .page-title{font-size: 20px; font-weight: 600; margin-bottom: 10px;}
.project-card .header-card p{color: #667085; margin: 0;}
.project-card .header-card .page-title .count{padding: 5px 10px; border-radius: 15px; font-size: 16px; color: #0070FF;}
.project-card .header-card .btns{display: flex; gap: 10px;}
.project-card .header-card .btns .delete-btn{font-size: 13px; line-height: 18px; padding: 4px 8px; color: #344054; text-decoration: none; border: 1px solid #D0D5DD; border-radius: 4px; display: flex; justify-content: start; align-items: center; gap: 5px;}
.project-card .header-card .btns .delete-btn i{color: #dc2626;}
.project-card .header-card .btns .delete-btn img{width: 14px;}
.project-card .header-card .btns .export-btn{font-size: 13px; line-height: 18px; padding: 4px 8px; color: #344054; text-decoration: none; border: 1px solid #D0D5DD; border-radius: 4px; display: flex; justify-content: start; align-items: center; gap: 5px;}
.project-card .header-card .btns .export-btn img{width: 14px;}
.project-card .header-card .btns .addnew-btn{font-size: 13px; line-height: 18px; padding: 4px 8px; background: #16a34a; color: #ffffff; text-decoration: none; border-radius: 4px; display: flex; justify-content: start; align-items: center; gap: 5px;}
.project-card .body-card{padding: 15px;}
.project-card .body-card table th{text-align: center; color: #667085; font-weight: 500;}
.project-card .body-card table td{text-align: center; color: #667085;}
.project-card .body-card table td .download-btn{color: #667085;}
.project-card .body-card table .dropdown-toggle:after{display: none;}
.project-card .body-card table .action-btns{display: flex; justify-content: center; gap: 20px;}
.project-card .body-card table .action-btns .trash{color: #525252;}
div.dataTables_wrapper div.dataTables_info, div.dataTables_wrapper div.dataTables_paginate, div.dataTables_wrapper div.dataTables_filter, .dataTables_length{padding: 15px;}
th{background: #FCFCFD !important; border-top: 1px solid #EAECF0 !important}
.dtfc-fixed-right{box-shadow: 0px 0px 4px 0px #00000033 !important;}
th.select-checkbox, td.select-checkbox{padding-right: 20px; position: relative;}
th.select-checkbox, td.select-checkbox img{width: 18px; height: 18px;}
th.select-checkbox::before, td.select-checkbox:before, th.select-checkbox::after, td.select-checkbox:after{left: 100% !important;}
.dataTables_paginate {text-align: center !important; float: none !important;}
.dataTables_wrapper .dataTables_paginate {display: flex; justify-content: center;}
/* Remove floats */
.dataTables_wrapper .col-md-7 {width: 100%;}
.dataTable-custome-filter-wrap{display: flex; flex-wrap: wrap !important; justify-content: start; align-items: center; gap: 5px; padding: 0 0 15px;}
.dataTable-custome-filter-wrap input{width: 150px; border: 1px solid #D0D5DD; border-radius: 4px; padding: 4px 8px; font-size: 13px;}
.dataTable-custome-filter-wrap input[type="search"]{width: 180px; background: #F3F7FA url(../img/tablefilter-icon/search.png) no-repeat center right 15px; background-size: 12px; border: none; border-radius: 4px; padding: 4px 8px; font-size: 13px;}
.dataTable-custome-filter-wrap input.datepicker{width: 140px; max-width: 150px; background: #FFFFFF url(../img/tablefilter-icon/date.png) no-repeat center right 15px; background-size: 12px; font-size: 13px; color: #808080; padding: 4px 8px;}
.dataTable-custome-filter-wrap input.datepicker::placeholder{font-size: 14px !important; color: #808080;}
.dataTable-custome-filter-wrap .from-group{border: 1px solid #D0D5DD; border-radius: 5px; padding: 0 10px; display: flex; justify-content: start; align-items: center; gap: 5px;}
.dataTable-custome-filter-wrap .from-group img{width: 18px;}
.dataTable-custome-filter-wrap .from-group select{border: 1px solid #D0D5DD; border-radius: 5px; padding: 9px 30px 9px 9px; background-position: right 0 center; font-size: 14px; color: #808080; width: 150px; display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.dataTable-custome-filter-wrap .from-group select:focus{outline: none; box-shadow: 0 0 0 0;}
.dataTable-custome-filter-wrap select{border: 1px solid #D0D5DD; border-radius: 4px; padding: 4px 25px 4px 8px; background-position: right 0 center; font-size: 13px; color: #808080; width: 140px; display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.dataTable-custome-filter-wrap select:focus{outline: none; box-shadow: 0 0 0 0; border-color: #D0D5DD;}
.dataTable-custome-filter-wrap input:focus{outline: none; box-shadow: 0 0 0 0; border-color: #D0D5DD;}
.calarders{display: flex; gap: 10px;}
.calarders input[type="date"]{padding: 8px; border: 1px solid #C4C9D7; border-radius: 5px;}
.dataTable-custome-filter-wrap .btn{border-radius: 5px;}
.dataTable-custome-filter-wrap .btn-primary{background-color: #2B4095; border-color: #2B4095; font-size: 13px; line-height: 22px; padding: 4px 8px; border-radius: 4px;}
.dataTable-custome-filter-wrap .btn-secondary{background-color: #2B4095; border-color: #2B4095; font-size: 13px; line-height: 22px; padding: 4px 8px; border-radius: 4px;}
.dataTable-custome-filter-wrap .btn-primary:focus{background-color: #16a34a; border-color: #16a34a;}
.dataTable-custome-filter-wrap .btn-secondary:focus{background-color: #16a34a; border-color: #16a34a;}
.inquiries-received-chart-card .rating{font-size: 16px; color: #05CD99; position: relative; padding-left: 15px; margin-left: 30px;}
.inquiries-received-chart-card .rating:after{position: absolute; left: 0; top: 5px; content:''; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #05CD99;}
.inquiries-received-chart-card .order-title{font-size: 20px; color: #2B3674;}
.inquiries-received-chart-card .order-title span{font-size: 14px; color:#A3AED0;}
.dataTables_scrollBody .dropdown-menu {right: 50px !important;transform: translate3d(0px, -10.8px, 0px) !important; /*top: -22px !important;*/
    padding: 10px; min-width: 14rem;}
.dataTables_scrollBody tr:last-child .dropdown-menu{transform: translate3d(0px, 10.8px, 0px) !important;}
.dataTables_scrollBody .dropdown-menu .item{text-decoration: none; font-size: 13px; color: #000000; border-bottom: 1px solid #A3AED0; padding: 10px;     display: flex; justify-content: start; align-items: center; gap: 10px; }
.dataTables_scrollBody .dropdown-menu .item img{width: 20px; height: auto;}
.dataTables_scrollBody .dropdown-menu .item i{margin-right: 10px;}
.dataTables_scrollBody .dropdown-menu .item:last-child{border-bottom: none;}
.dataTables_scrollBody {overflow-y: auto !important; scrollbar-width: thin; scrollbar-color: #888 #f1f1f1;}
.dataTables_scrollBody::-webkit-scrollbar {width: 8px; height: 8px;}
.dataTables_scrollBody::-webkit-scrollbar-track {background: #ffffff; border-radius: 10px;}
.dataTables_scrollBody::-webkit-scrollbar-thumb {background: #E0E1E3; border-radius: 10px;}
.dataTables_scrollBody::-webkit-scrollbar-thumb:hover {background: #E0E1E3;}

/*.dataTables_scrollBody tr+tr .dropdown-content{bottom: 100%;}*/

div.dataTables_wrapper div.dataTables_scroll{border: 1px solid #ddd;}
div.dataTables_scrollHead{border-left:1px solid #ddd !important; border-right: 1px solid #ddd !important;}
div.dataTables_scrollHead table.dataTable{margin-top: 0 !important;}
div.dataTables_scrollBody{border-left: 1px solid #ddd !important; border-right: 1px solid #ddd !important; min-height: 250px;}
table.dataTable thead > tr > th.sorting input{margin-left: 16px;}
table.dataTable td .address{width: 250px; white-space: normal; line-height: 20px;}
table.dataTable th, table.dataTable td{font-size: 13px; line-height: 20px; padding: 8px;}

.page-link.disabled, .disabled > .page-link{background-color: #fff;}
.page-link.active, .active > .page-link {color: var(--bs-pagination-disabled-color); pointer-events: none; background-color: #f9fafc; border-color: var(--bs-pagination-disabled-border-color);}

.badge{width: 100%; border-radius: 10px;}
.badge-high{background: #F9D9C2; color: #A7361D;}
.badge-medium{background: #F9F3C2; color: #927E14;}
.badge-low{background: #D7F9C2; color: #037847;}
.badge-ongoing{background: #EEF0F4; color: #667085;}

.page-title{font-family: 'Inter'; font-size: 20px; font-weight: 400; color: #060606; }

.add-new-inquiry-card {background: #fff; border: 1px solid #EAECF0; border-radius: 8px;}
.add-new-inquiry-card .header-card{padding: 15px; border-bottom: 1px solid #E5E6E9; display: flex; justify-content: space-between; align-items: center;}
.add-new-inquiry-card .header-card .page-title{font-size: 22px; margin-bottom: 10px; color: #2B4095;}
.add-new-inquiry-card .header-card p{color: #667085; margin: 0;}.add-new-inquiry-card .header-card .btns{display: flex; gap: 15px;}
.add-new-inquiry-card .header-card .btns{display: flex; justify-content: end; align-items: center; gap: 10px;}
.add-new-inquiry-card .header-card .btns h4{font-size: 18px; margin-bottom: 0; color: #2B4095;}
.add-new-inquiry-card .header-card .btns .status-btn{padding: 10px; background: #EB281B1A; color: #EB281B; text-decoration: none; border: none; border-radius: 25px;}
.add-new-inquiry-card .body-card{padding: 30px;}
.add-new-inquiry-card .body-card .heading-text{font-size: 18px; font-weight: 600; margin-bottom: 0; color: #2B4095;}
.seprater-line{background: #D9D9D9; width: 100%; height: 1px; margin: 1rem 0;}
.bg-gray-800 {background-color: rgb(94 187 72) !important;}

.add-new-inquiry-card input, .add-new-inquiry-card select, .add-new-inquiry-card textarea{font-size: 13px; padding: .3rem .75rem; border: 1px solid #408A7E; border-radius: 4px; color: #848484;}
.add-new-inquiry-card input:placeholder, .add-new-inquiry-card select:placeholder, .add-new-inquiry-card textarea:placeholder{color: #848484;}
.add-new-inquiry-card input:focus, .add-new-inquiry-card select:focus, .add-new-inquiry-card textarea:focus{outline: none; box-shadow: 0 0 0 0; border: 1px solid #408A7E;} 
.add-new-inquiry-card input[disabled], .add-new-inquiry-card select[disabled], .add-new-inquiry-card textarea[disabled]{background:#e6e6e6;}

.add-new-inquiry-card .field-wraps{display: grid; grid-template-columns: repeat(2,1fr);}

.grid-gap-15{gap: 150px;}
.grid-gap-10{gap: 100px;}

.font-inter{font-family: 'Inter';}
.font-size-14{font-size: 14px;}
.font-size-16{font-size: 16px;}
.font-size-18{font-size: 18px;}
.font-size-20{font-size: 20px;}
.font-size-22{font-size: 22px;}
.font-weight-400{font-weight: 400;}
.font-weight-500{font-weight: 500;}
.font-weight-600{font-weight: 600;}
.text-gray{color: #646363;}
.text-blue{color: #2B4095;}
.text-light-black{color: #060606;}

/* modal css */
.z-5011{z-index:5011;}
.modal-popup{background: #fff; border-radius: 10px; width: 600px; max-width: 90%;}
.modal-popup .heading-text{margin-top: 1rem; font-weight: 600;}
.modal-header{border-bottom: 1px solid #E8E6E6; padding: 10px 20px;}
.modal-header h2{margin: 0;}
.modal-header p{margin: 0;}
.modal-header-inner{display: flex; justify-content: start; align-items: center; gap: 20px;}
.modal-header-inner .icon{border: 1px solid #E4E7EC; border-radius: 8px; width: 45px; height: 45px; display: flex; justify-content: center; align-items: center; color: #858D9D;}
.modal-header-inner .icon img {width: 24px;}
.select2-container .select2-selection{height: auto !important; padding: .3rem .75rem;}
.select2-container--default .select2-selection__arrow{padding-top: 35px;}
.form-control, .typeahead, .tt-query, .tt-hint, .select2-container--default .select2-selection--single .select2-search__field, .select2-container--default .select2-selection--single, .form-select{border: 1px solid #ebedf2 !important; border-radius: 5px; min-height: 38px;}

select.form-select{font-size: 12px; padding: 14px; border-radius: 0;}

.modal-popup input, .modal-popup select, .modal-popup textarea {font-size: 13px; line-height: 1.5rem; padding: .3rem .75rem; border: 1px solid #408A7E; border-radius: 4px; color: #848484;}
.modal-popup input:focus, .modal-popup select:focus, .modal-popup textarea:focus{outline: none; box-shadow: 0 0 0 0; border: 1px solid #408A7E;}
.modal-popup .form-group{margin-bottom: 1.25rem;}

.modal-popup form::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

.modal-popup form::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 5px;
}

.modal-popup form::-webkit-scrollbar-thumb {
    background: #E0E1E3;
    border-radius: 5x;
}

.modal-popup form::-webkit-scrollbar-thumb:hover {
    background: #c0c0c0;
}

.checkbox-btns-group{display: flex; gap: 15px;}
.checkbox-btns-group .form-check{margin: 0; display: flex; justify-content: start; align-items: center; gap: 10px;}
.checkbox-btns-group .form-check .form-check-label{margin: 0;}
.checkbox-btns-group .form-check .form-check-input{margin: 0;}

.upload-files .file-item{padding: 4px 4px 4px 10px; border: 1px solid #408A7E; border-radius: 4px; margin-bottom: 10px;}
.upload-files .file-item .file-name{font-weight: normal; font-size: 14px;}
.upload-files .file-item .btn {background: #fff; font-size: 13px; padding: .3rem .75rem; border: none; border-radius: 4px; color: #dc2626; line-height: 24px;}
.upload-files .file-item .btn:hover{background: #fff; color: #dc2626;}

.upload-label {width: 100%; display: inline-block; padding: 16px 32px; background-color: #2e3fa8; color: #fff; font-size: 18px; font-weight: 500; border-radius: 8px; cursor: pointer; text-align: center; transition: background-color 0.3s; }
.upload-label:hover {background-color: #233283; }
.upload-input {display: none;}
.upload-container {margin: 20px 0;}
.departments{width: 100%;}
.add-new-inquiry-card .department {padding-bottom: 20px;}
.add-new-inquiry-card .department + .department{border-top: 2px solid #D9D9D9; padding-top: 20px;}
.add-new-inquiry-card .milestones {margin-top: 10px; border: 1px solid #EAECF0;}
.add-new-inquiry-card .milestone-header {display: grid; grid-template-columns: 1fr 1fr 1fr auto; background: #2B40951A; padding: 10px; font-size: 14px; font-weight: 500; text-align: center;}
.add-new-inquiry-card .milestone-row {display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 10px; padding: 10px; align-items: center;}
.add-new-inquiry-card .milestone-row + .milestone-row{border-top: 1px solid #EAECF0;}
.add-new-inquiry-card .add-more {color: #2e3fa8; font-weight: bold; cursor: pointer; font-size: 16px;}
.add-new-inquiry-card .add-milestone-btn{display: flex; justify-content: start; align-items: center; gap: 10px; background: #2B4095;
    width: 150px; padding: .3rem .75rem !important; font-size: 13px; color: #fff; border-radius: 4px; cursor: pointer;}
.add-new-inquiry-card .add-milestone-btn span{font-size: 14px; font-weight: 600; color: #fff;}

.add-new-inquiry-card .checkbox-btns-group .form-check .form-check-input{padding: 0;}

.add-new-inquiry-card .field-group{display: flex;}
.add-new-inquiry-card .field-group .btn{background: #2B4095; width: 150px; padding: .3rem .75rem !important; font-size: 13px; border-radius: 4px;}
.add-new-inquiry-card .field-group .btn i{font-size: 13px;}
.add-new-inquiry-card .field-group .btn:hover{background: #2B4095; color: #ffffff;}
.add-new-inquiry-card .projectdetail .btn{background: #fff; width: 100%; font-size: 13px; padding: .3rem .75rem; border: 1px solid #408A7E; border-radius: 4px; color: #dc2626; line-height: 24px; margin-top: 23px;}
.add-new-inquiry-card .projectdetail .btn:hover{background: #fff;  color: #dc2626;}
.add-new-inquiry-card .milestone-row .btn{background: #fff; width: 100%; font-size: 13px; padding: .3rem .75rem; border: 1px solid #408A7E; border-radius: 4px; color: #dc2626; line-height: 24px;}
.add-new-inquiry-card .milestone-row .btn:hover{background: #fff;  color: #dc2626;}  


.upload-box {background: #fff; border-radius: 10px; padding: 25px; width: 70%; margin: 0 auto; border: 1px solid #408A7E14;}
.file-list {margin-bottom: 20px;}
.file-item {padding: 4px 4px 4px 10px; border: 1px solid #408A7E; border-radius: 4px; margin-bottom: 10px;}
.file-info {display: flex; display: flex; align-items: center; justify-content: space-between; gap: 15px;}
.file-icon {width: 40px; height: 50px; display: flex; align-items: center; justify-content: center; font-weight: bold; color: #fff; border-radius: 6px;}
.xls { background: #2e7d32; }
.csv { background: #f57c00; }
.pdf { background: #d32f2f; }
.file-item .file-name{font-weight: normal; font-size: 14px;}
.file-item .btn {background: #fff; font-size: 13px; padding: .3rem .75rem; border: none; border-radius: 4px; color: #dc2626; line-height: 24px;}
.file-item .btn:hover{background: #fff; color: #dc2626;}

.file-details {display: flex; flex-direction: column;}
.file-name {font-weight: bold;}
.file-size {font-size: 12px; color: #777;}
.download {color: #1a73e8; font-weight: bold; cursor: pointer;}
.progress-bar {height: 6px; background: #e0e0e0; border-radius: 4px; overflow: hidden; margin-top: 5px;}
.progress {height: 100%; width: 0%; background: #64b5f6; transition: width 0.3s;}
.drop-zone {background: #F2F2F2; border: 2px dashed #BDBDBD; padding: 15px; text-align: center; border-radius: 8px; cursor: pointer;}
.drop-zone .picture{background: #DEE8FA; width: 30px; height: 30px; border-radius: 100px; margin: 10px auto; display: flex; justify-content: center; align-items: center;}
.drop-zone.dragover {background: #f0f8ff; border-color: #1a73e8;}
.drop-zone p{color: #858D9D;}
.drop-zone button {margin-top: 10px; padding: 8px 16px; background: #DEE8FA; border: none; border-radius: 6px; color: #2B4095; cursor: pointer;}

.switch-slider {
  display: flex;
  align-items: center;
  font-family: Arial, sans-serif;
  font-size: 14px;
}

.switch-slider input {
  display: none;
}

.switch-slider-slider {
  position: relative;
  width: 40px;
  height: 18px;
  background-color: #2B4095;
  border-radius: 34px;
  margin: 0 8px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.switch-slider-slider::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  left: 2px;
  top: 2px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.3s;
}

.switch-slider .input:checked + .switch-slider-slider {
  background-color: #25378b;
}

.switch-slider input:checked + .switch-slider-slider::before {
  transform: translateX(22px);
}

.switch input {display:none;}
.switch {display:inline-block; position:relative; padding-left: 50px;}
.switch span{font-size: 14px;}
/* Style Wired */
.switch .slider {position:absolute; top:0; bottom:0; left:0; right:0; border-radius:30px; width: 40px; height: 20px; margin: 0; background:#E2E3E4; cursor:pointer; border: 1px solid #E2E3E4; overflow:hidden; transition:.4s;}
.switch .slider:before {position:absolute; content:""; width:100%; height:100%; background:#fff; border-radius:30px; transform:translateX(-19px); transition:.4s;}
.switch input:checked + .slider:before {transform:translateX(19px);}
.switch input:checked + .slider {background:limeGreen; border: 1px solid limeGreen;}

.pe-popup-project-scope-name{display: flex; gap: 50px; margin-bottom: 1.25rem;}
.pe-popup-project-scope-name strong{display: block; font-size: 13px; font-weight:600; color: #101828;}
.pe-popup-project-scope-name span{font-size: 13px; font-weight:600; color: #757587;}

.upload-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.upload-box1 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.form-control {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  background-color: #fff;
}

#uploadBtn {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

#uploadBtn:hover {
  background-color: #0056b3;
}

.hidden-file {
  display: none;
}

.custom-file input[type="file"] {
  position: relative; 
  width: 100%;
}

.custom-file input[type="file"]::file-selector-button {
  position: absolute; 
  top: 15px;
  right: -22px;
  background-color: #2B4095; 
  width: 130px;
  color: transparent;
}

/* Faked label styles and icon */
.custom-file input[type="file"]::before {
  position: absolute;
  pointer-events: none;
  top: 10px;
  right: 100px;
  height: 20px;
  width: 20px;
  content: "";
  background: url(../img/upload.png) no-repeat;
  z-index: 1;
}

.custom-file input[type="file"]::after {
  position: absolute;
  pointer-events: none;
  top: 6px;
  right: 20px;
  color: #fff;
  content: "Upload File";
}

/* ------- From Step 1 ------- */

/* file upload button */
.custom-file input[type="file"]::file-selector-button {  
  border-radius: 4px;
  padding: 0 16px;
  height: 37px;
  cursor: pointer;
  background-color: #2B4095; 
  border: none;
  margin-left: 16px;
  transition: background-color 200ms; 
}

.custom-file input[type="file"]:hover::file-selector-button {
  background-color: #2B4095 !important;
}

/* file upload button hover state */
.custom-file input[type="file"]::file-selector-button:hover {
  background-color: #2B4095 !important;
  opacity: 1 !important;
}

/* file upload button active state */
.custom-file input[type="file"]::file-selector-button:active {
  background-color: #2B4095 !important;
}

.custom-file-addmore{display: flex; justify-content: space-between; align-items: center; gap: 10px;}
.custom-file.custom-file-addmore .btn {
    background: #fff;
    width: 40px;
    font-size: 13px;
    padding: .3rem .75rem;
    border: 1px solid #408A7E;
    border-radius: 4px;
    color: #dc2626;
    line-height: 24px;
}

/* Container */
.radio-group1 {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Hide default radio input */
.radio-group1 input[type="radio"] {
  display: none;
}

/* Custom label style */
.radio-group1 label {
  position: relative;
  padding-left: 26px;
  cursor: pointer
  user-select: none;
  font-size: 13px;
  font-weight: 500;
  color: #646363;
  margin: 0;
  line-height: 12px;
}

/* Outer circle */
.radio-group1 label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 16px;
  height: 16px;
  border: 2px solid #ccc;
  border-radius: 50%;
  transition: all 0.25s ease;
}

/* Inner filled circle */
.radio-group1 input[type="radio"]:checked + label::before {
  border-color: #17a589; /* green */
}

.radio-group1 input[type="radio"]:checked + label::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  width: 8px;
  height: 8px;
  background-color: #17a589;
  border-radius: 50%;
  transition: all 0.25s ease;
}

/* Active label text color */
.radio-group1 input[type="radio"]:checked + label {
  color: #000;
}

.tooltip {
  position: relative;
}

.tooltrip{position: relative;}
.tooltriptext{position: absolute;
    right: 0;
    width: max-content;
    visibility: hidden;
    opacity: 0;
    border: 1px solid #ebedf2;
    padding: 5px;
    font-size: 12px;
    bottom: 100%;
    background: #fff;
}
.tooltriptext:before{
    position: absolute; 
    bottom: -10px;
    right:40px; 
    content:''; 
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;  
    border-top: 10px solid #ebedf2;
}
.tooltrip:hover .tooltriptext{visibility: visible; opacity: 1;} 


label.required::after {content: " *"; color: red;}
.view-details-card {background: #fff; border: 1px solid #EAECF0; border-radius: 8px;}
.view-details-card .header-card{padding: 15px; border-bottom: 1px solid #E5E6E9; display: flex; justify-content: space-between; align-items: center;}
.view-details-card .header-card .page-title{font-size: 22px; margin-bottom: 10px; color: #2B4095;}
.view-details-card .header-card p{color: #667085; margin: 0;}
.view-details-card .header-card .btns{display: flex; gap: 15px;}
.view-details-card .header-card .btns{display: flex; justify-content: end; align-items: center; gap: 10px;}
.view-details-card .header-card .btns h4{font-size: 18px; margin-bottom: 0; color: #2B4095;}
.view-details-card .header-card .btns .status-btn{padding: 10px; background: #EB281B1A; color: #EB281B; text-decoration: none; border: none; border-radius: 25px;}
.view-details-card .body-card{padding: 30px;}
.view-details-card .body-card .heading-text{font-size: 22px; margin-bottom: 0; color: #2B4095;}
.view-details-card .seprater-line{background: #D9D9D9; width: 100%; height: 1px; margin: 1rem 0;}
.view-details-card .details-wrap{display: grid; grid-template-columns: repeat(5, 1fr); gap:20px;}
.view-details-card .details-wrap .details-block .icon{width: 20px; height: 20px;}
.view-details-card .details-wrap .details-block .icon img{width: 18px;}
.view-details-card .details-wrap .details-block .title{font-size: 14px; color: #101828;}
.view-details-card .details-wrap .details-block p{font-size: 13px;}

.view-details-card .key-contact-details{width: 100%; margin-top: 20px;}
.view-details-card .key-contact-details .header{display: flex; justify-content: start; align-items: center; gap: 10px;}
.view-details-card .key-contact-details .header h4{margin: 0;}
.view-details-card .key-contact-details .key-contact-details-cards{display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; padding: 20px;}
.view-details-card .key-contact-details .key-contact-details-cards .key-contact-details-card{border-radius: 30px; padding: 20px 30px; border: 1px solid #E2E6ED;}
.view-details-card .key-contact-details .key-contact-details-cards .key-contact-details-card ul{margin: 0; padding: 0; list-style: none;}
.view-details-card .key-contact-details .key-contact-details-cards .key-contact-details-card ul li{margin: 10px 0; font-size: 14px; color: #646363;}
.view-details-card .key-contact-details .key-contact-details-cards .key-contact-details-card ul li strong{display: block;}

.view-details-card .select-scope{width: 100%; margin-top: 20px;}  
.view-details-card .select-scope .header{display: flex; justify-content: start; align-items: center; gap: 10px;}  
.view-details-card .select-scope .header h4{margin: 0;}
.view-details-card .select-scope .header .form-select{max-width: 250px; outline-color: #408A7E; border-radius: 4px; padding: 4px 8px; font-size: 13px;}

.view-details-card .select-scope .select-scope-cards{display: grid; grid-template-columns: repeat(5, 1fr); padding: 15px 0; }
.view-details-card .select-scope .select-scope-cards .select-scope-card {position: relative; z-index: 1; margin: 10px 0;}
.view-details-card .select-scope .select-scope-cards .select-scope-card .sr-no{background: #2B4095; width: 30px; height: 30px; border-radius: 30px; text-align: center; font-size: 18px; font-weight: 600; color: #fff; line-height: 30px; margin: 10px auto;}
.view-details-card .select-scope .select-scope-cards .select-scope-card .sr-no::after{position: absolute; left: 0; top: 25px; content: ''; border-top: 2px dashed #C1BBEB; width: 50%; height: 2px; z-index: -1;}
.view-details-card .select-scope .select-scope-cards .select-scope-card .sr-no::before{position: absolute; right: 0; top: 25px; content: ''; border-top: 2px dashed #C1BBEB; width: 50%; height: 2px; z-index: -1;}
.view-details-card .select-scope .select-scope-cards .select-scope-card:nth-child(5n) .sr-no::before{display: none;}
.view-details-card .select-scope .select-scope-cards .select-scope-card:nth-child(5n+1) .sr-no::after{display: none;}
.view-details-card .select-scope .select-scope-cards .select-scope-card .title{display: flex; justify-content: start; align-items: center; gap: 5px; font-size: 14px; font-weight: 500; margin: 0 5%;}
.view-details-card .select-scope .select-scope-cards .select-scope-card .details{background: #F7F8FAFE; width: 90%; margin: 0 auto; border: 2px solid #F0F3F7; border-radius: 5px; padding: 10px;}
.view-details-card .select-scope .select-scope-cards .select-scope-card .details ul{margin: 0; padding: 0; list-style: none;}
.view-details-card .select-scope .select-scope-cards .select-scope-card .details ul ul li{font-size: 16px; color: #000;}
.view-details-card .select-scope .select-scope-cards .select-scope-card .details ul ul li img{width: 20px;}
.view-details-card .select-scope .load-more-btn{min-width: 200px; background: #2B40951A; border: 1px solid #2B40951A; border-radius: 5px; padding: 15px; font-size: 18px; font-weight: 500; color: #4D44B5; display: block; margin: 0 auto;}

.no-data{width: 500px;}

.view-details-card .documents{margin-top: 20px;}
.view-details-card .documents .header{border-bottom: 1px solid #D9D9D9; padding: 10px 0;}
.view-details-card .documents .header h4{margin: 0; color: #2B4095;}
.view-details-card .documents-wrap{width: 80%; margin: 20px auto; border-radius: 30px; padding: 20px; border: 1px solid #E2E6ED;}
.view-details-card .documents-wrap .doc-items{display: flex; flex-wrap: wrap; justify-content: center; gap: 20px;}
.view-details-card .documents-wrap .doc-items .doc-item{display: flex; justify-content: start; align-items: start; gap: 20px; border: 1px solid #D5D7DC; padding: 10px; min-width: 200px;}
.view-details-card .documents-wrap .doc-items .doc-item p{font-size: 14px; line-height: 16px; color: #9D9DA1; margin-bottom: 0;}
.view-details-card .documents-wrap .doc-items .doc-item p strong{font-weight: 600; display: block;}
.view-details-card .documents-wrap .add-more{width: 50px; background: #fff; border: 1px solid #2B40951A; border-radius: 5px; padding: 10px; font-size: 24px; font-weight: 500; color: #727385; display: block; margin: 20px auto 0;}


.invoice-history-card {background: #fff; border: 1px solid #EAECF0; border-radius: 8px;}
.invoice-history-card .header-card{padding: 15px; border-bottom: 1px solid #E5E6E9; display: flex; justify-content: space-between; align-items: center;}
.invoice-history-card .header-card .page-title{font-size: 20px; margin-bottom: 10px; color: #2B4095;}
.invoice-history-card .header-card p{color: #667085; margin: 0;}
.invoice-history-card .header-card .btns{display: flex; gap: 15px;}
.invoice-history-card .header-card .btns{display: flex; justify-content: end; align-items: center; gap: 10px;}
.invoice-history-card .header-card .btns h4{font-size: 18px; margin-bottom: 0; color: #2B4095;}
.invoice-history-card .header-card .btns .status-btn{padding: 10px; background: #EB281B1A; color: #EB281B; text-decoration: none; border: none; border-radius: 25px;}
.invoice-history-card .body-card{padding: 30px;}
.invoice-history-card .body-card .heading-text{font-size: 22px; margin-bottom: 0; color: #2B4095;}
.invoice-history-card .seprater-line{background: #D9D9D9; width: 100%; height: 1px; margin: 1rem 0;}
.invoice-history-card .details-wrap{background: #F9FAFB; display: flex; justify-content: space-between; gap:20px; border-radius: 10px;}
.invoice-history-card .details-wrap .details-block h4{font-size: 14px; color: #101828;}
.invoice-history-card .details-wrap .details-block p{margin: 0; font-size: 13px; color: #757587;}

.invoice-history-card .lists{margin-top: 15px;}
.invoice-history-card .lists .list{margin: 15px 0 0;}   
.invoice-history-card .lists .list h3{font-size: 16px; font-weight: 500; color: #2B4095;}
.invoice-history-card .lists .list .list-card{border: 1px solid #EAECF0; border-radius: 8px; padding: 15px; margin-top: 10px;}
.invoice-history-card .lists .list .list-card .details-wrap{background: #fff; margin-bottom: 20px;}
.invoice-history-card .lists .list .list-card table th, .invoice-history-card .lists .list .list-card table td{padding: 8px; font-size: 13px; text-align: center;}
.invoice-history-card .lists .list .list-card table th{background: #FCFCFD !important; color: #667085; font-weight: 500;}
.invoice-history-card .lists .list .list-card table td{color: #667085;}
.invoice-history-card .lists .list .list-card table td a{color: #667085;}

.cursor-pointer{cursor: pointer;}

.milestone-popup{max-width: 600px;}
.milestone-popup .modal-content{background-color: #fff;}
.milestone-popup .modal-header{gap: 10px}
.milestone-popup .modal-header .icon{border: 1px solid #E4E7EC; border-radius: 8px; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; color: #858D9D;}
.milestone-popup .modal-header .modal-title{font-size: 18px; color: #101828;}
.milestone-popup .modal-header p{font-size: 14px; color: #475467;}

.project-timeline-card{align-items: center;}
.project-timeline-card .dataTable-custome-filter-wrap{}
.timeline{max-height: 500px; padding: 0 20px; overflow: auto; }
.timeline .item{position: relative; padding: 15px;}
.timeline .item:before{position: absolute; left: 0; top: 40%; content: ''; border-left: 1px dashed #4D44B5; width: 30px; height: 100%;}
.timeline .item:after{position: absolute; left: -6px; top: 35%; content: ''; background: #fff; border: 3px solid #4D44B5; border-radius: 12px; width: 12px; height: 12px;}
.timeline .item:last-child::before{display: none;}
.timeline .item .date{font-family: inter; font-size: 14px; font-weight: 400; color: #A098AE;}
.timeline .item .amount{font-family: inter; font-size: 18px; font-weight: 700; color: #303972; margin: 10px 0; display: flex; gap: 15px;}
.timeline .item .amount .badge{width: auto;} 
.timeline .item p{font-family: inter; font-size: 14px; font-weight: 400; color: #303972; margin: 0;}

.milestone-popup .modal-body .btn-cancel{background: #fff; border: 1px solid #1018280D; border-radius: 5px;}
.milestone-popup .modal-body .btn-save{background: #5EBB48; border: 1px solid #5EBB48; border-radius: 5px; color: #fff;}
[data-bs-toggle="modal"]{cursor: pointer;}
.form-select:focus{box-shadow: 0 0 0 0; outline: noe;}

.datepicker.datepicker-dropdown, .datepicker.datepicker-inline{width: 250px; padding: 0 10px;}
.datepicker.datepicker-dropdown tfoot{font-size: 0.75rem;}
.datepicker.datepicker-dropdown .datepicker-days table.table-condensed thead tr th.datepicker-switch, .datepicker.datepicker-inline .datepicker-days table.table-condensed thead tr th.datepicker-switch{font-size: 0.75rem;}
.datepicker.datepicker-dropdown .datepicker-days table.table-condensed thead tr th.dow, .datepicker.datepicker-inline .datepicker-days table.table-condensed thead tr th.dow{font-size: 0.75rem;}
.datepicker.datepicker-dropdown .datepicker-days table.table-condensed tbody td.day, .datepicker.datepicker-inline .datepicker-days table.table-condensed tbody td.day{font-size: 0.75rem;}
.datepicker.datepicker-dropdown .datepicker-days table.table-condensed tbody td.day.today:before, .datepicker.datepicker-inline .datepicker-days table.table-condensed tbody td.day.today:before{width: 30px; height: 30px;}
.datepicker.datepicker-dropdown .datepicker-days table.table-condensed tfoot th{padding-top: 14px; background: #fff !important; border-top: none !important;}

.scroll-box::-webkit-scrollbar {width: 5px; height: 5px;}
.scroll-box::-webkit-scrollbar-track {background: #f1f1f1; border-radius: 10px;}
.scroll-box::-webkit-scrollbar-thumb {background: #888; border-radius: 10px;}
.scroll-box::-webkit-scrollbar-thumb:hover {background: #555;}

.project-timeline {margin: 0; padding-left: 0 !important;}
.project-timeline:before{display: none;}
.project-timeline .day-section h3 {margin-top: 20px; color: #333; font-size: 16px; border-bottom: none;}
.project-timeline .timeline-item {position: relative; padding: 0 0 20px 20px; border-left: 1px solid #A098AE; margin: 0 0 0 8px;}
.project-timeline .timeline-item:last-child{border-left: none;}
.project-timeline .timeline-item:before{position: absolute; left: 0; top: 15px; content: ''; border-left: 1px dashed #4D44B5; width: 30px; height: 100%; display: none;}
.project-timeline .timeline-item:after{position: absolute; left: -6px; top: 0px; content: ''; background: #fff; border: 3px solid #4D44B5; border-radius: 12px; width: 12px; height: 12px;}
.project-timeline .timeline-item:last-child::before{display: none;}
.project-timeline .timeline-item .time {font-size: 12px; color: #888; display: block; margin-bottom: 5px;}
.project-timeline .timeline-item p {margin: 0; font-size: 14px; color: #303972;}
.project-timeline .attachments {margin-top: 10px; align-items: center;}
.project-timeline .attachments img {width: 24px; border: none; margin-right: 5px;}

.message-popup{text-align: left; background: #16a34abf; box-shadow: 0 0 0 0 !important;}
.message-popup .popup-content{display: flex; justify-content: start; gap: 10px;}
.message-popup .popup-content span{color: #fff;}
.message-popup .popup-content img{width: 30px;}
.message-popup button{border: 1px solid #fff; padding: 0.3rem .75rem !important; font-size: 13px; font-weight: 600; margin-top: 10px;}

/* Pagination */
.project-pagination {display: flex; justify-content: center; margin: 20px 0;}
.project-pagination button {border: 1px solid #ddd; background: #fff; padding: 6px 12px; margin: 0 2px; cursor: pointer; border-radius: 4px;}
.project-pagination button.active {background: #4a56e2; color: #fff; border-color: #4a56e2;}
.project-pagination button:hover {background: #eee;}

.uploaded-files-card{background: #fff; border: 1px solid #EAECF0; border-radius: 8px;}  
.uploaded-files-card .header-card{padding: 15px 15px; border-bottom:1px solid #E5E6E9; display: flex; justify-content: space-between; align-items: center;}
.uploaded-files-card .header-card .page-title{font-size: 20px; color: #2B4095;}
.uploaded-files-card .header-card .page-title .count {background: #F7FAFF; padding: 5px 10px; border-radius: 15px; font-size: 16px; color: #0070FF;}
.uploaded-files-card .header-card p{color: #667085; margin: 0;}
.uploaded-files-card .header-card .btns{display: flex; gap: 15px;}
.uploaded-files-card .header-card .btns{display: flex; justify-content: end; align-items: center; gap: 10px;}
.uploaded-files-card .header-card .btns h4{font-size: 18px; margin-bottom: 0; color: #2B4095;}
.uploaded-files-card .header-card .btns .status-btn{padding: 10px; background: #EB281B1A; color: #EB281B; text-decoration: none; border: none; border-radius: 25px;}
.uploaded-files-card .body-card{padding: 15px;}
 
.uploaded-files-card .lists{width: 100%;}  
.uploaded-files-card .file-info{align-items: start; gap: 10px;}
.uploaded-files-card .lists .list{display: flex; justify-content: space-between; gap: 10px; margin-bottom: 20px;}
.uploaded-files-card .lists .list .icon{width: 20px;}
.uploaded-files-card .lists .list .file-name{display: flex; justify-content: space-between; gap: 10px;}
.uploaded-files-card .lists .list h4{font-size: 13px;}
.uploaded-files-card .lists .list p{font-size: 12px; color: #706F6F; margin: 0;}
.uploaded-files-card .lists .load-more-btn {min-width: 200px; background: #2B40951A; border: 1px solid #2B40951A; border-radius: 5px; padding: 15px; font-size: 18px; font-weight: 500; color: #4D44B5; display: block; margin: 0 auto;}

td .milestone-status .dropdown {position: relative; display: inline-block;}
td .milestone-status .dropbtn {background: #EEF0F4; border: 1px solid #CDD1D9; padding: 6px 30px 6px 12px; cursor: pointer; border-radius: 6px; text-align: left; width: 200px; display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative;}
td .milestone-status .dropbtn::after{font-family: FontAwesome; content:"\f107"; position: absolute; top: 7px; right: 7px; border-left: 1px solid #000; padding-left: 10px;}
td .milestone-status .dropdown-content {display: none; position: absolute; background: #fff; min-width: 200px; max-height: 170px; overflow-y: auto; border:1px solid #CDD1D9; border-radius: 6px; z-index: 1000; padding: 8px;}
td .milestone-status .dropdown-content label {display: block; padding: 6px; cursor: pointer; font-size: 13px; text-align: left;}
td .milestone-status .dropdown-content input {margin-right: 6px;}
td .milestone-status .dropdown.show .dropdown-content {display: block;}
td .milestone-status .dropdown-content::-webkit-scrollbar {width: 5px; height: 5px;}
td .milestone-status .dropdown-content::-webkit-scrollbar-track {background: #f1f1f1; border-radius: 10px;}
td .milestone-status .dropdown-content::-webkit-scrollbar-thumb {background: #888; border-radius: 10px;}
td .milestone-status .dropdown-content::-webkit-scrollbar-thumb:hover {background: #555;}

.back-btn, .back-btn:hover{background: transparent; color: red; border-color: red; border-radius: 4px; padding: 6px 12px;}

/* Priority Dropdown Styles */
.priority-dropdown {
    position: relative;
    display: inline-block;
    width: 100%;
}

.priority-btn {
    background: #F9D9C2;
    color: #A7361D;
    border: none;
    padding: 4px 8px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 10px;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    min-width: 80px;
    transition: all 0.3s ease;
}

.priority-btn:hover {
    opacity: 0.9;
}

.priority-btn.priority-high {
    background: #F9D9C2;
    color: #A7361D;
}

.priority-btn.priority-medium {
    background: #F9F3C2;
    color: #927E14;
}

.priority-btn.priority-low {
    background: #D7F9C2;
    color: #037847;
}

.priority-btn i {
    font-size: 12px;
    margin-left: 8px;
}

.priority-dropdown-content {
    display: none;
    position: absolute;
    background: #fff;
    min-width: 120px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    z-index: 1000;
    top: 100%;
    left: 0;
    right: 0;
    border: 1px solid #E5E7EB;
    overflow: hidden;
}
.dataTables_scrollBody tr:last-child .priority-dropdown-content{top:inherit; bottom: 100%;}

.priority-dropdown-content.show {
    display: block;
}

.priority-option {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: background-color 0.2s ease;
    border-bottom: 1px solid #F3F4F6;
    gap: 8px;
}

.priority-option:last-child {
    border-bottom: none;
}

.priority-option:hover {
    background-color: #F9FAFB;
}

.priority-option.selected {
    background-color: #F9D9C2;
    color: #A7361D;
}

.priority-option.selected[data-priority="medium"] {
    background-color: #F9F3C2;
    color: #927E14;
}

.priority-option.selected[data-priority="low"] {
    background-color: #D7F9C2;
    color: #037847;
}

.priority-option input[type="radio"] {
    margin: 0;
    accent-color: #2B4095;
    flex-shrink: 0;
}

.priority-option input[type="radio"]:checked {
    accent-color: #2B4095;
}

/* Acknowledgement Button Styles */
.acknowledgement-btn {
    background: #E8F5E9;
    color: #2E7D32;
    padding: 4px 8px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.3s ease;
    margin: 2px;
    display: inline-block;
}

.acknowledgement-btn:hover {
    background: #C8E6C9;
    border-color: #81C784;
}

.acknowledgement-btn:active {
    transform: translateY(1px); 
}

.acknowledgement-badge {
    padding: 4px 8px;
    border-radius: 25px; 
    font-size: 12px;
    font-weight: 500;  
    margin: 2px;
    display: inline-block;
}

.acknowledgement-badge.acknowledged {
    background: #E0E0E0;
    color: #616161;
    border: none;
}

.acknowledgement-badge.not-assigned {
    background: #F5F5F5;
    color: #9E9E9E;
    border: 1px solid #E0E0E0;
    font-style: italic;
}

/* Status Button Styles */
.status-btn {
    background: #EEF0F4;
    color: #667085;
    padding: 4px 8px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.3s ease;
    min-width: 80px;
}

.status-btn:hover {
    background: #E5E7EB;
    border-color: #9CA3AF;
}

.status-btn.status-ongoing {
    background: #D1FAE5;
    color: #059669;
    border-color: #A7F3D0;
}

.status-btn.status-onhold {   
    background: #FEE2E2;
    color: #DC2626;
    border-color: #FECACA;
}

.badge.badge-onhold {
    background: #FEE2E2;
    color: #DC2626;
}

/* Status Update Modal Styles */
/*#statusUpdateModal .modal-content {
    border-radius: 12px;
    border: none;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

#statusUpdateModal .modal-header {
    background: #F9FAFB;
    border-bottom: 1px solid #E5E7EB;
    border-radius: 12px 12px 0 0;
    padding: 20px 24px;
}

#statusUpdateModal .modal-header-inner {
    display: flex;
    align-items: center;
    gap: 16px;
}

#statusUpdateModal .modal-header .icon {
    width: 48px;
    height: 48px;
    background: #E0E7FF;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4F46E5;
    font-size: 20px;
}

#statusUpdateModal .modal-title {
    font-size: 20px;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

#statusUpdateModal .modal-header p {
    color: #6B7280;
    margin: 4px 0 0 0;
    font-size: 14px;
}

#statusUpdateModal .modal-body {
    padding: 24px;
}

#statusUpdateModal .form-group {
    margin-bottom: 20px;
}

#statusUpdateModal .form-group label {
    display: block;
    font-weight: 500;
    color: #374151;
    margin-bottom: 8px;
    font-size: 14px;
}

#statusUpdateModal .form-group .required {
    color: #DC2626;
}

#statusUpdateModal .form-select,
#statusUpdateModal .form-control {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#statusUpdateModal .form-select:focus,
#statusUpdateModal .form-control:focus {
    outline: none;
    border-color: #4F46E5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

#statusUpdateModal .form-control {
    resize: vertical;
    min-height: 80px;
}

#statusUpdateModal .modal-footer {
    background: #F9FAFB;
    border-top: 1px solid #E5E7EB;
    border-radius: 0 0 12px 12px;
    padding: 16px 24px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

#statusUpdateModal .btn {
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 14px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

#statusUpdateModal .btn-cancel {
    background: #F3F4F6;
    color: #374151;
    border: 1px solid #D1D5DB;
}

#statusUpdateModal .btn-cancel:hover {
    background: #E5E7EB;
}

#statusUpdateModal .btn-save {
    background: #4F46E5;
    color: white;
}

#statusUpdateModal .btn-save:hover {
    background: #4338CA;
}*/

.project-status-popup {max-width: 1000px;}
.project-status-popup .modal-content{background-color: #fff;}
.project-status-popup .modal-header{gap: 10px}
.project-status-popup .modal-header .icon{border: 1px solid #E4E7EC; border-radius: 8px; width: 45px; height: 45px; display: flex; justify-content: center; align-items: center; color: #858D9D;}
.project-status-popup .modal-header .icon img{width: 24px;}
.project-status-popup .modal-header .modal-title{font-size: 18px; color: #101828;}
.project-status-popup .modal-header p{font-size: 14px; color: #475467;}
.project-status-popup .modal-body .btn-cancel{background: #fff; border: 1px solid #1018280D; border-radius: 5px;}
.project-status-popup .modal-body .btn-save{background: #5EBB48; border: 1px solid #5EBB48; border-radius: 5px; color: #fff;}
.project-status-popup .modal-body .status-wrap{display: flex; justify-content: end; align-items: center; gap: 10px;}
.project-status-popup .modal-body .status-wrap .status{position: relative; padding-left: 25px; font-size: 14px; color: #667085;}
.project-status-popup .modal-body .status-wrap .status::after{width: 16px; height: 16px; border-radius: 100%; border: 2px solid #000; position: absolute; left: 0; top: 2px; content: '';}
.project-status-popup .modal-body .status-wrap .complete::after{background: #B3F38C; border-color: #037847;}
.project-status-popup .modal-body .status-wrap .pending::after{background: #ffcc80; border-color: #580E0E;}
.project-status-popup .modal-body .status-wrap .on-hold::after{background: #F17E74; border-color: #580E0E;}

.project-status-popup textarea.form-control{min-height: 1rem; max-height: 2rem; padding: 10px;} 
.project-status-popup select{min-height: 20px; font-size: 13px;}

.task-table {width: 100%; margin: 15px 0; border: 1px solid #e5e5e5;}
.task-table th, .task-table td {width:25%; border: 1px solid #e5e5e5; padding: 8px; font-size: 13px; text-align: center; vertical-align: middle;}
.task-table th {background: #f9f9f9; color:#667085; font-weight: 500; line-height: 20px;}
.task-table td .assign-options {display: flex; justify-content: center; gap: 20px; font-family: sans-serif; font-size: 13px; color: #555;}
.task-table td .assign-options .radio-btn {display: inline-flex; align-items: center; cursor: pointer; position: relative;}
.task-table td .assign-options .radio-btn input {display: none;}
.task-table td .assign-options .custom-radio {width: 16px; height: 16px; border: 1px solid #ccc; border-radius: 50%; margin-right: 8px; position: relative; box-sizing: border-box; transition: border-color 0.3s ease;}
.task-table td .assign-options .custom-radio::after {content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; background-color: transparent; border-radius: 50%; transform: translate(-50%, -50%) scale(0); transition: background-color 0.3s ease, transform 0.3s ease;}
.task-table td .assign-options .radio-btn input:checked + .custom-radio {border-color: #1abc9c;}
.task-table td .assign-options .radio-btn input:checked + .custom-radio::after {background-color: #1abc9c; transform: translate(-50%, -50%) scale(1);}
.task-table td .assign-engineer .dropdown-toggle{width: 100%; background-color: #EEF0F4; border-radius: 16px; font-size: 12px; color: #667085; display: block; padding: 5px; text-decoration: none; position: relative;}
.task-table td .assign-engineer .dropdown-toggle::after{position: absolute; top: 10px; right: 10px; border-left: 1px solid #667085; padding-left: 10px;}
.task-table td .assign-engineer .dropdown-toggle::before{position: absolute; top: 12px; left: 12px; content: ''; background: #667085; width: 5px; height: 5px; border-radius: 100%;}
.task-table td .assign-engineer .dropdown-menu{padding: 0; max-height: 150px; overflow: auto;}
.task-table select {width: 100%; padding: 2px 8px; border: none; border-radius: 16px; background-color: #EEF0F4; font-size: 12px; color: #667085;}
.task-table  .assign-engineer {position: relative;}
.task-table thead {position: sticky; top: 0; z-index: 2;}
.task-table tbody {display: block; min-height: 200px; max-height: 220px; overflow: auto;}
.task-table thead tr, .task-table tbody tr {display: table; width: 100%; table-layout: fixed;}
.task-table .engineer-item {display: flex; align-items: center; padding: 8px 10px; cursor: pointer; border-bottom: 1px solid #f0f0f0;}
.task-table .engineer-item:last-child {border-bottom: none;}
.task-table .engineer-item:hover {background-color: #f9f9f9;}
.task-table .engineer-item input[type="radio"] {display: none; margin-right: 8px;}
.task-table .engineer-item .custom-radio {width: 12px; height: 12px; border: 1px solid #ccc; border-radius: 50%; margin-right: 8px; position: relative; box-sizing: border-box; transition: border-color 0.3s ease;}
.task-table .engineer-item .custom-radio::after {content: ""; position: absolute; top: 50%; left: 50%; width: 4px; height: 4px; background-color: transparent; border-radius: 50%; transform: translate(-50%, -50%) scale(0); transition: background-color 0.3s ease, transform 0.3s ease;}
.task-table .engineer-item input:checked + .custom-radio {border-color: #1abc9c;}
.task-table .engineer-item input:checked + .custom-radio::after {background-color: #1abc9c; transform: translate(-50%, -50%) scale(1);}
.task-table .engineer-item img {width: 26px; height: 26px; border-radius: 50%; margin-right: 8px;}
.task-table .engineer-item .info {flex: 1;}
.task-table .engineer-item .name {display: block; font-size: 13px; font-weight: 500;}
.task-table .engineer-item .load-bar {display: flex; height: 16px; width: 140px;background: #F17E74; border-radius: 25px; text-align: center; overflow: hidden;}
.task-table .engineer-item .load-bar .green {background: #B3F38C; height: 100%; border-radius: 25px;}
.task-table .engineer-item .load-bar .red {background: #F17E74; height: 100%;}
.task-table .engineer-item .engineer-item .score {margin-left: 8px; font-weight: 600; color: #3b4ba3;}  

.resource-summary-chart-card .header {padding: 10px 0;}
.resource-summary-chart-card .header h4{font-size: 20px; font-weight: 500;}
.resource-summary-chart-card .header select {border: none; border-radius: 4px; padding: 4px 25px 4px 8px; background-position: right 0 center;    font-size: 13px; color: #808080; width: 120px; display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.resource-summary-chart-card .header select:focus{outline: none; box-shadow: 0 0 0 0;}
.resource-summary-chart-card .body{background: #fff; border: 1px solid #EAECF0; border-radius: 8px; padding: 30px 10px;}

.milestone-action-btns{gap: 10px !important;}
.milestone-action-btns .btn{font-size: 12px; font-weight: 500; padding: 4px 8px; border-radius: 25px;}
.milestone-action-btns .approve-btn{background: #D7F9C2; box-shadow: 0px 2px 2px 0px #00000040; color: #037847;}
.milestone-action-btns .resubmit-btn{background: #F9D9C2; box-shadow: 0px 2px 2px 0px #00000040; color: #A7361D;}
.milestone-action-btns .view-btn{background: #EEF0F4; box-shadow: 0px 2px 2px 0px #00000040; border-radius: 100px; padding: 4px; color: #667085;}
.milestone-action-btns .view-btn i{font-size: 12px;}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item .nav-link.notificationDropdown{height: auto; padding: 0;}
.navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-menu.notification-panel{position: absolute; top: 100%; padding: 0;}
.notification-panel .notification-item{padding: 8px 16px !important; margin: 5px;}
.notification-tabs .btn.filter-btn{min-width: 100px; padding: 4px 8px; font-size: 14px; font-weight: 500; line-height: 22px; border-radius: 4px; background: transparent; border: 1px solid #D0D5DD; color: #808080;}
.notification-tabs .btn.filter-btn.active{background:#f8f9fa; color: #1A1918;}

/* Table scrolling styles for project pages */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /*max-height: 70vh;*/
    overflow-y: auto;
}

.table-responsive::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.table-responsive::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: #E0E1E3;
    border-radius: 10px;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
    background: #c0c0c0;
}

#project {
    margin-bottom: 0;
}

#project thead th {
    background: #FCFCFD !important;
    border-top: 1px solid #EAECF0 !important;
    position: sticky;
    top: 0;
    z-index: 10;
}

/*#project tbody tr:hover {
    background-color: #f8f9fa;
}*/

/* Additional styles for group companies and other listing pages */
#project {
    min-width: 1200px; /* Ensure minimum width for all columns */
}

.new_date_range_filter_x {
    min-width: 25vh;
}

/* Targets the selects inside the month/header cell */
.daterangepicker .calendar-table th.month select {
    padding: 2px;
    margin: 0 2px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    outline: none;
    width: 70px;
    height: 25px;
    align-items: center;
}

/* Add a hover effect for better UX */
.daterangepicker .calendar-table th.month select:hover {
    border-color: #357ebd;
}

/* Style the options inside the dropdown */
.daterangepicker .calendar-table th.month select option {
    padding: 5px;
}

.menu-projet-title{color: #fff; text-align: center; padding: 10px; font-size: 20px;}


/*#project thead th {
    white-space: nowrap;
    padding: 12px 8px;
    font-size: 14px;
    font-weight: 600;
}

#project tbody td {
    padding: 12px 8px;
    font-size: 14px;
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.action-btns .dropdown-menu {
    right: 10px !important;
    transform: translate3d(0px, -10.8px, 0px) !important;
    padding: 10px;
    min-width: 200px;
}

.action-btns .dropdown-menu .item {
    text-decoration: none;
    font-size: 14px;
    color: #000000;
    border-bottom: 1px solid #A3AED0;
    padding: 10px;
    display: block;
}

.action-btns .dropdown-menu .item:last-child {
    border-bottom: none;
}

.action-btns .dropdown-menu .item img {
    margin-right: 10px;
    width: 16px;
    height: 16px;
}*/

.dataTables_wrapper .dataTables_scrollBody {
	min-height: 400px;
    max-height: 400px !important;
    overflow-y: auto !important;
}

.dataTables_wrapper .dataTables_scrollHead thead th {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 5;
}

.table-responsive {
    /*max-height: 400px; */       /* REQUIRED for vertical scroll */
    overflow-y: auto !important;
    overflow-x: auto;
}

/* Sticky header */
.table-responsive thead th {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 10; 
}

/* Fix border overlap (optional but better UI) */
.table-responsive thead th {
    border-bottom: 2px solid #dee2e6;
}

span[aria-current="page"] span{
	background-color: #2B3674 !important;
	color: #fff !important;
}

.table>:not(caption)>*>*{
	background-color: transparent;
	box-shadow: 0 0 0 0;
}

.table tbody tr:nth-child(even){
	background-color:#F9FAFB;
}

#project-detail thead th {
    background: #FCFCFD !important;
    border-top: 1px solid #EAECF0 !important;
    position: sticky;
    top: 0;
    z-index: 10;
}

  


@media(min-width: 1600px) and (max-width: 1800px){	
	.dataTables_wrapper .dataTables_scrollBody{
		min-height: 570px;
		max-height: 570px;
	}
}

@media(max-width: 1024px){
	.navbar .navbar-menu-wrapper .navbar-toggler {
        color: #fff;
        height: auto;
        border-radius: 10px;
        padding-left: 10px !important;
        padding-right: 10px !important;
        background: #2b3674;
        margin-right: 10px;
		font-family: "Inter", sans-serif;
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 5px;
        line-height: 26px;
    }
	.navbar .navbar-menu-wrapper .navbar-toggler span{font-size: 18px;}
	.fixed-top{left: 0;}
    .sidebar-offcanvas{left: -250px; right: inherit;}
    .sidebar-offcanvas.active{left: 0; right: inherit;}
	.sidebar .navbar-brand-wrapper{width: 150px !important;}
	
	.content-wrapper{padding: 100px 15px 15px 15px;}
	.dashboard-card1-wrap{ grid-template-columns: repeat(2, 1fr) !important; gap: 10px;}
	.dashboard-card1-wrap .card h3{font-size: 14px !important;}
	
	.add-new-inquiry-card .field-wraps { grid-template-columns: repeat(1, 1fr);}
    .grid-gap-15 {gap: 15px;}
}

@media(max-width: 768px){
	.login-main-wrap{ grid-template-columns: repeat(1, 1fr); height: auto;}
	.login-left-colum{order: 2;}
	.login-right-colum{order: 1; height: 20vh;}
	.login-form-brand{border-radius: 0 0 100px 100px;}
	
	.m-flex{display: flex; gap: 10px;  align-items: center;}
	.add-milestone-btn{margin-top: 10px !important;}
	.add-new-inquiry-card .milestones{overflow: auto;}
	.add-new-inquiry-card .milestone-header, .add-new-inquiry-card .milestone-row{width: 500px;}
	.add-new-inquiry-card .body-card{padding: 15px;}
	.modal-popup{max-width: 100%;}
	.project-card .header-card .page-title{font-size: 14px; margin-bottom: 0;}
	.project-card .header-card .page-title .count{padding: 5px 2px; font-size: 12px;}
	.invoice-history-card .lists .list .list-card{padding: 15px 0;}
	.invoice-history-card .details-wrap{flex-wrap: wrap; gap: 10px;}
	.invoice-history-card .details-wrap .details-block{width: 100% !important; text-align: left !important;}
	.invoice-history-card .body-card {padding: 15px;}
	.invoice-history-card .header-card{flex-wrap: wrap; gap: 10px;}
	.view-details-card .details-wrap {grid-template-columns: repeat(1, 1fr); gap: 10px;}
	.view-details-card .key-contact-details .key-contact-details-cards{
		grid-template-columns: repeat(1, 1fr);
		gap: 15px;
		padding: 20px 0;
	}
	
	.add-new-inquiry-card .header-card{flex-wrap: wrap; gap: 10px;}
	.project-card .header-card{flex-wrap: wrap; gap: 10px;}
	.project-card .header-card button{font-size: 12px; padding: 5px 10px !important; border-radius: 4px !important;}
	.project-card .header-card .btns{flex-wrap: wrap;}
	
}