/* Navigation Bar Styles */
body {
    background-color: #f3f4f6;
}
.navbar {
    background-color: #0049ed !important; /* Blue background color */
    padding: 0;
}
.navbar-brand {
    color: #fff !important; /* White text color for brand */
    margin: 7px 20px 7px 0;
}
.navbar-toggler-icon {
    background-color: #fff; /* White color for toggler icon */
}
.navbar-nav .nav-link {
    color: #fff !important; /* White text color for menu items */
    padding: 25px 15px !important;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: #fff;
    font-weight: 500;
}
.navbar-nav .nav-link:hover {
    background-color: #0056b3; /* Darker blue on hover */
}
/* Dropdown Menu Styles */
.navbar-nav .dropdown-menu {
    background-color: #007bff; /* Blue background color for dropdown */
    margin-top: 0;
    border-radius: 0 0 10px 10px;
    border-top: 1px solid #336df1;
    background-color: #0049ed;
}
.navbar-nav .dropdown-menu a {
    color: #fff !important; /* White text color for dropdown items */
}
.navbar-nav .dropdown-menu a:hover {
    background-color: #0056b3; /* Darker blue on hover */
}
.content-wrap {
    border: none;
    border-radius: 5px;
    box-shadow: 2px 2px 4px rgba(0,0,0,.1);
    padding: 20px;
    /*margin-top: 20px;*/
}
h2 {
    font-family: 'Inter', sans-serif;
    font-size: 30px;
    font-weight: 500;
    color: #666;
}
/* .btn-primary {
    background: rgb(22,163,74);
    background: linear-gradient(343deg, rgba(22,163,74,1) 0%, rgba(22,163,74,1) 50%, rgba(109,197,138,1) 100%);
    box-shadow: 1px 1px 3px rgba(0,0,0,.1);
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 10px 15px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
}
.btn-primary:hover {
    border-color: #16A34A;
}
.btn-secondary {
    background-color: #eef2f7;
    box-shadow: 1px 1px 2px rgba(0,0,0,.1);
    color: #333;
    border: none;
    border-radius: 5px;
    padding: 10px 15px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
}
.btn-secondary:hover {
    background-color: #f1f1f1;
    color: #333;
} */

/*********************** data table start ***********************/
.dataTables_wrapper .dt-buttons {
    margin: 0 0 20px 0;
}
.dataTables_wrapper .dt-buttons .dt-button {
    background-color: #f9f9f9;
    border-radius: 0;
    float: left;
    padding: 5px 12px;
    color: #333;
    font-size: .8em;
    font-family: 'Inter', sans-serif;
    margin: 0;
}
.dataTables_wrapper .dt-buttons .dt-button:first-child {
    border-radius: 5px 0 0 5px;
}
.dataTables_wrapper .dt-buttons .dt-button:last-child {
    border-radius: 0 5px 5px 0;
}
.dataTables_wrapper .dt-buttons .dt-button:hover {
    color: #333;
    background-color: #f1f1f1;
}
.dataTables_wrapper .dataTables_length {
    margin-bottom: 20px;
    font-family: 'Inter', sans-serif;
    font-size: .9em;
}
.dataTables_wrapper .dataTables_length select {
    border-radius: 5px !important;
    color: #3d565f !important;
    border: 1px solid #ccc !important;
    margin: 0 5px !important;
}
.dataTables_wrapper .dataTables_filter {
    font-family: 'Inter', sans-serif;
    font-size: .8em;
    color: #6c757d !important;
    padding: 2px 0;
}
.dataTables_wrapper .dataTables_filter input {
    border-radius: 4px !important;
    color: #333 !important;
    border: 1px solid #dee2e6 !important;
    margin: 0 0 0 5px !important;
    max-width: 200px;
    padding: 4px !important;
}
.dataTables_wrapper .dataTable {
    /*border: 1px solid #ccc !important;
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0);*/
}
.dataTables_wrapper .dataTable thead th {
    vertical-align: top;
    /*border-top: 1px solid #e1e1e1;*/
    border-bottom: 1px solid #dee2e6;
    font-family: 'Inter', sans-serif;
    /*background-color: #e1e1e1;*/
    color: #6c757d;
    font-size: .85em;
    font-weight: 500;
    border-left: 0;
    padding: 12px;
}
.dataTables_wrapper .dataTable thead th:last-child {
    border-right: none;
}
.dataTables_wrapper .dataTable thead th:before {
    margin-bottom: 1px;
    opacity: .3 !important;
    font-size: .7em !important;
    line-height: .8em !important;
}
.dataTables_wrapper .dataTable thead th:after {
    margin-top: 1px;
    opacity: .3 !important;
    font-size: .7em !important;
    line-height: .8em !important;
}
.dataTables_wrapper .dataTable thead th.sorting_desc:before {
    opacity: .7 !important;
}
.dataTables_wrapper .dataTable thead th.sorting_desc:after {
    opacity: .3 !important;
}
.dataTables_wrapper .dataTable thead th.sorting_asc:before {
    opacity: .3 !important;
}
.dataTables_wrapper .dataTable thead th.sorting_asc:after {
    opacity: .7 !important;
}
.dataTables_wrapper .dataTable tbody tr td:last-child {
    border-right: 0;
}
.dataTables_wrapper .dataTable tbody tr {
    background-color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: .85em;
    color: #6c757d;
    box-shadow: 0 0 0 rgba(0,0,0,0);
}
.dataTables_wrapper .dataTable tbody tr td {
    border-bottom: 1px solid #dee2e6;
    color: #6c757d;
    border-left: 0;
    padding: 15px;
    vertical-align: middle;
}
.dataTables_wrapper .dataTable tbody tr td:last-child {
    border-right: 0;
}
.dataTables_wrapper .dataTable tbody tr.odd td,
.dataTables_wrapper .dataTable tbody tr.odd:hover td {
    background-color: #f6f7fb !important;
    box-shadow: 0 0 0 rgba(0,0,0,0);
}
.dataTables_wrapper .dataTable tbody tr.even td,
.dataTables_wrapper .dataTable tbody tr.even:hover td {
    background-color: #fff !important;
    box-shadow: 0 0 0 rgba(0,0,0,0);
}
.dataTables_wrapper .dataTable tbody tr td a {
    text-decoration: none;
}
table.dataTable.no-footer {
    border-bottom: none;
}
.dataTables_wrapper .actions-link .btn.btn-sm {
    padding: 0px;
    border-radius: 5px !important;
    margin: 0 5px 0 0;
    width: 30px;
    height: 30px;
}
.dataTables_wrapper .actions-link .btn-primary.btn-sm .fas {
    font-size: 1em;
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    background-color: transparent;
    padding: 0;
    line-height: 29px;
    margin: 0;
    width: 29px;
    color: #fff;
}
.dataTables_wrapper .action-btn a {
    color: #333;
    margin-right: 10px;
}
.dataTables_wrapper .action-btn a i {
    font-size: 18px;
}
.dataTables_wrapper .action-btn button {
    color: #333;
    margin-right: 5px;
    background-color: transparent;
    border: 0;
    display: flex;
    width: auto;
    padding: 0;
    white-space: nowrap;
}
.dataTables_wrapper .action-btn button i {
    font-size: 18px;
    margin-right: 5px;
}
.dataTables_wrapper .action-btn button
.dataTables_wrapper .dataTables_paginate {
    font-family: 'Inter', sans-serif;
    font-size: .95em;
    padding: 0 !important;
    margin-top: 20px;
    color: #333;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    font-family: 'Inter', sans-serif;
    font-size: .95em;
    border: none;
    background-color: #fafbfc;
    float: left;
    border: none !important;
    background-color: transparent;
    border-radius: 50% !important;
    margin: 0 5px !Important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: rgba(0,073,237,.1) !important;
    border-radius: 50% !important;
    color: #333 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    font-family: 'Inter', sans-serif;
    font-size: .95em;
    border: none !important;
    background: #0049ed !important;
    color: #fff !important;
    border-radius: 50% !important ;
}

.dataTables_wrapper .paginate_button.previous {
    margin-left: 0;
}
.dataTables_wrapper .paginate_button.previous,
.dataTables_wrapper .paginate_button.next {
    text-indent: -55555px;
    position: relative;
    margin: 0;
    font-family: 'Inter', sans-serif;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:active,
.dataTables_wrapper .dataTables_paginate .paginate_button:focus {
    background: transparent !important;
    box-shadow: none !important;
}
.dataTables_wrapper .paginate_button.previous:before {
    content: "<";
    position: absolute;
    top: 6px;
    left: 0;
    width: 20px;
    text-indent: 0;
}
.dataTables_wrapper .paginate_button.next:after {
    content: ">";
    position: absolute;
    top: 6px;
    left: 0;
    width: 20px;
    text-indent: 0;
}
.dataTables_wrapper .paginate_button.previous:hover,
.dataTables_wrapper .paginate_button.next:hover {
    background: transparent !important;
}
.dataTables_wrapper .paginate_button.previous.disabled {
    color: #e1e1e1 !important;
}
.dataTables_wrapper .paginate_button.next.disabled {
    color: #ccc !important;
}
.dataTables_wrapper .dataTables_paginate > span {
    float: left;
}
.dataTables_wrapper .dataTables_paginate > span .paginate_button {
    border: none !important;
    margin: 0;
}
.dataTables_wrapper .dataTables_info {
    font-family: 'Inter', sans-serif;
    font-size: .85em;
    color: #6c757d !important;
    padding-top: 25px !important;
}
/*********************** data table end ***********************/
/*********************** Form start ***********************/
.content-wrap .form-label {
    margin-bottom: 5px;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    color: #6e777f;
}
.content-wrap .form-control {
    color: #666;
    border-radius: 5px;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    padding: 10px 15px;
}
/*.content-wrap .form-control:focus {
    border:1px solid #06d6a0;
    box-shadow: none;
}
.content-wrap .form-control::placeholder {
    color:#8ea4ac;
    font-size:16px;
    line-height:24px;
    opacity:1
}
.content-wrap .form-control:-ms-input-placeholder,
.content-wrap .form-control::-webkit-input-placeholder {
    color:#8ea4ac;
    font-size:16px;
    line-height:24px;
    opacity:1
}*/
.content-wrap textarea.form-control {
    height: auto;
}
.small-btn {
    font-size: 13px;
    font-weight: 400;
    padding: 3px 8px;
}
.big-btn {
    font-weight: 400;
    font-size: 1em;
    font-weight: 600;
    padding: 9px 15px 9px 50px;
    position: relative;
}
.big-btn:hover {
    background-color: #066a4c;
    border-color: #066a4c;
}
.big-btn .fas {
    margin-right: 10px;
    font-size: .9em;
    background-color: rgba(0,0,0,.3);
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    padding: 14px 12px 0 12px;
    color: rgba(255,255,255,.8);
}
.big-btn:hover .fas {
    background-color: rgba(0,0,0,.5);
}
/*********************** Form end ***********************/
#dropdown-values-container {
    border: none !important;
    background-color: transparent;
    padding: 0 !important;
}
#dropdown-values-container .add-val-wrap {
    background-color: #fff;
    border: 1px solid #e1e1e1 !important;
    border-radius: 5px !important;
    padding: 15px;
}
#dropdown-values-list {
    margin-top: 10px;
}
#dropdown-values-list .val-add-wrap {
    background-color: #f6f7fb;
    border-radius: 5px;
}
#dropdown-values-list .val-add-wrap .col-9,
#dropdown-values-list .val-add-wrap .col-3 {
    padding: 0;
}
#dropdown-values-list .val-add-wrap .btn-remove-option {
    padding: 0px;
    width: 30px;
    height: 30px;
    float: right;
    margin: 2px 0;
}
.add-val-wrap .form-check .form-check-label {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
}
#dropdown-values-list .val-add-wrap .form-control-plaintext {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    padding-left: 10px;
}
.add-val-wrap .form-check .form-check-input {
    margin-top: 5px;
}
.is_required {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #666;
}
.swal2-modal .swal2-title {
    font-family: 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 600;
    text-align: left;
    padding: 20px 20px 0 20px;
}
.swal2-modal .swal2-input {
    color: #666;
    border-radius: 5px;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    padding: 10px 15px;
    height: 45px;
    z-index: 0;
    position: relative;
    margin: 20px;
}
.swal2-modal .swal2-input:focus {
    border:1px solid #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
/*.swal2-modal .swal2-input::placeholder {
    color:#8ea4ac;
    font-size:16px;
    line-height:24px;
    opacity:1
}
.swal2-modal .swal2-input:-ms-input-placeholder,
.swal2-modal .swal2-input::-webkit-input-placeholder {
    color:#8ea4ac;
    font-size:16px;
    line-height:24px;
    opacity:1
}*/
.swal2-modal .swal2-actions {
    margin: 0 20px;
    justify-content: space-between;
    display: block !important;
}
.swal2-modal .swal2-actions .swal2-styled {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    border-width: 0;
    border-radius: 5px;
    padding: 10px 15px;
    margin: 0 5px;
}
.swal2-modal .swal2-actions .swal2-styled.swal2-confirm {
    border-color: #16A34A;
    background: rgb(22,163,74);
    background: linear-gradient(343deg, rgba(22,163,74,1) 0%, rgba(22,163,74,1) 50%, rgba(109,197,138,1) 100%);
    box-shadow: 1px 1px 3px rgba(0,0,0,.1);
}
.swal2-validation-message {
    margin: 0 20px 20px;
}
.swal2-modal .swal2-actions .swal2-styled.swal2-cancel {
    background-color: #eef2f7;
    box-shadow: 1px 1px 2px rgba(0,0,0,.1);
    color: #333;
}
/************* category tree start *******************/
.content-wrap .select2 .selection .select2-selection {
    /*background-color: #f7fafb;
    border: 1px solid #f2f2f2;*/
    background-color: #fff;
    border: 1px solid #dee2e6;
    height: 45px;
    border-radius: 5px;
    padding: 5px;
    font-family: 'Inter', sans-serif;
}
.content-wrap .select2.select2-container--open.select2-container--below .selection .select2-selection {
    border-radius: 5px 5px 0 0;
}
.content-wrap .select2.select2-container--open.select2-container--above .selection .select2-selection {
    border-radius: 0 0 5px 5px;
}
.content-wrap .select2 .selection .select2-selection li {
    background: #dcebef;
    border: 1px solid #bad5dc;
    color: #666;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 600;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 35px;
    margin-top: 3px;
}
.content-wrap .select2 .selection .select2-selection li .select2-selection__choice__remove {
    padding: 2px 7px;
    font-size: 18px;
    border-right: 1px solid rgba(255,255,255,.3);
    color: #666;
    line-height: 18px;
}
.content-wrap .select2 .selection .select2-selection li .select2-selection__choice__remove:hover {
    background-color: #fff;
}
.content-wrap .select2 .selection .select2-selection li .select2-selection__choice__display {
    padding-right: 15px;
}
.content-wrap .select2-container--default .select2-selection--single .select2-selection__rendered {
    margin: 6px 0 0;
    line-height: 22px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #666;
}
.content-wrap .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 10px;
    width: 25px;
}
.content-wrap .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-width: 7px 6px 0 6px;
    margin-left: -10px;
    border-color: #666 transparent transparent transparent;
}
.content-wrap .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-width: 0 6px 7px 6px;
    margin-left: -10px;
    border-color: transparent transparent #666 transparent;
}
.select2-dropdown {
    border-color: #f2f2f2 !important;
    box-shadow: 0 2px 1px rgba(0,0,0,.1);
    padding: 13px;
    border-radius: 0 0 8px 8px !importnat;
}
.select2-dropdown .select2-search {
    padding: 0 0 10px 0;
}
.select2-dropdown .select2-search .select2-search__field {
    background-color: #f7fafb;
    border: 1px solid #f2f2f2 !important;
    height: 40px;
    border-radius: 5px;
    padding: 5px !important;
}
.select2-dropdown .select2-results .select2-results__options .select2-results__option {
    font-size: 14px;
    font-family: 'Inter', sans-serif;
}
.select2-dropdown .select2-results .select2-results__options .select2-results__option.select2-results__option--selected {
    background-color: #f7fafb !important;
    border-radius: 5px;
}
.select2-dropdown .select2-results .select2-results__options .select2-results__option.select2-results__option--highlighted {
    background-color: #0049ed !important;
    border-radius: 5px;
}
.s2-to-tree.select2-container li.select2-results__option[aria-selected="true"] > span.item-label {
    /*background-color: #f3fdff;*/
    background-color: transparent;
    color: #000;
}
.select_tree .select2 .selection .select2-selection {
    height: auto;
}
/************* category tree end *******************/
/*************** login form start *******************/
.login-form-wrap {
    background-color: #fff;
    border: 1px solid #e1e1e1;
    padding: 30px;
    border-radius: 20px;
}
.login-form-wrap h1 {
    color: #333;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    margin-bottom: 30px;
}
.login-form-wrap .login-form .form-control {
    height: 54px;
    border-radius: 8px;
    color: #3d565f;
    padding: 10px 20px;
    z-index: 0;
    position: relative;
    background-color: #f7fafb;
    border: 1px solid #f2f2f2;
    font-family: 'Inter', sans-serif;
}
.login-form-wrap .login-form .form-control:focus {
    border:1px solid #ccc;
    box-shadow: none;
}
.login-form-wrap .login-form .form-control::placeholder {
    color:#8ea4ac;
    font-size:16px;
    line-height:24px;
    opacity:1
}
.login-form-wrap .login-form .form-control:-ms-input-placeholder,
.login-form-wrap .login-form .form-control::-webkit-input-placeholder {
    color:#8ea4ac;
    font-size:16px;
    line-height:24px;
    opacity:1
}
.login-form-wrap .remember-link {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: #666;
}
.login-form-wrap .btn-link {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #333;
    padding-right: 0;
}
/*************** login form end *******************/
/*************** Dashboard Start ******************/
.dashboard-wrap .welcome-msg {
    font-family: 'Inter', sans-serif;
}
.dashboard-wrap .welcome-msg h1 {
    font-size: 20px;
    font-weight: 300;
    letter-spacing: 0;
    color: #333;
    font-family: 'Inter', sans-serif;
}
.dashboard-wrap .welcome-msg h1 b {
    font-weight: 600;
}
.dashboard-wrap .welcome-msg h6 {
    font-size: 14px;
    font-weight: 300;
    color: #666;
}
.dashboard-wrap .card {
    border: none;
    border-radius: 5px;
    box-shadow: 2px 2px 4px rgba(0,0,0,.1);
}
.dashboard-wrap .card h5 {
    font-family: 'Inter', sans-serif;
    color: #999 !important;
    font-size: 13px;
    font-weight: 400 !important;
    text-transform: uppercase;
}
.dashboard-wrap .card .count-number {
    font-family: 'Inter', sans-serif;
    color: #333 !important;
    font-size: 32px;
    font-weight: 600 !important;
    text-transform: uppercase;   
}
.dashboard-wrap .card .count-link {
    font-family: 'Inter', sans-serif;
    color: #666 !important;
    font-size: 12px;
    font-weight: 400 !important;
}
.dashboard-wrap .card .fas {
    position: absolute;
    right: 20px;
    bottom: 20px;
    background-color: #F4F4FF;
    border-radius: 5px;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    color: #231EF6;
}
.dashboard-wrap .card .fas:before {
    font-size: 22px;
}
.dashboard-wrap .card .card-header {
    background-color: transparent;
    border-color: rgba(0,0,0,.05) !important;
}
.dashboard-wrap .card .card-header h4.header-title {
    font-family: 'Inter', sans-serif;
    color: #333 !important;
    font-size: 16px;
    font-weight: 500 !important;
    margin-bottom: 0;
    padding: 7px 0;
}
.progress-wrap h5 {
    font-family: 'Inter', sans-serif;
    color: #666 !important;
    font-size: 12px;
    font-weight: 500 !important;
    margin: 0;
}
.progress-wrap .progress-value {
    font-family: 'Inter', sans-serif;
    color: #666 !important;
    font-size: 12px;
    font-weight: 700 !important;
    margin: 0;
}
.progress-wrap .progress-w-percent .progress-sm {
    height: 5px;
}
.time-graph .nav-item .nav-link {
    font-family: 'Inter', sans-serif;
    color: #666 !important;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    margin-left: 5px;
    background-color: #f9f9f9;
    padding: 5px 10px;
}
.time-graph .nav-item .nav-link.active {
    background-color: #F6F6FF;
    color: #231EF6 !important;
}
.renewal-data-wrap {
    background-color: #F6F6FF;
    border: 2px dotted #EFEFF7;
    border-right: none;
    border-left: none;
    margin: -17px -16px 0;
}
.renewal-data-wrap .box-wrap {
    border-right: 2px dotted #EFEFF7;
    padding: 11px 0;
}
.renewal-data-wrap .box-wrap:last-child {
    border-right: none;
}
.renewal-data-wrap .box-wrap .number {
    font-family: 'Inter', sans-serif;
    color: #333;
    font-size: 20px;
    font-weight: 500;
    text-align: center;
    line-height: 20px;
}
.renewal-data-wrap .box-wrap .number span {
    display: block;
    color: #666;
    font-size: 13px;
    padding-top: 4px;
    font-weight: 400;
}
.dashboard-wrap .card .datatable {
    border: none !important;
}
.dashboard-wrap .card .datatable th {
    /*background-color: #F6F6FF;*/
    font-family: 'Inter', sans-serif;
    color: #333;
    font-size: 13px;
    font-weight: 500;
    border: none !important;
}
.dashboard-wrap .card .datatable td {
    font-family: 'Inter', sans-serif;
    color: #333;
    font-size: 13px;
    font-weight: 300;
    border-bottom: 1px solid #f2f2f2;
    background-color: transparent !important;
}
/*************** Dashboard end ******************/
.editable {
    background-color: #f0f0f0; /* Light gray background */
    cursor: text; /* Cursor indicates it's editable */
}

/* Style for the tab content card */
.card {
    border-radius: 0.5rem;
}

/* Style for the table within the tab content */
.table {
    margin-bottom: 0; /* Remove the default margin-bottom */
}

.table th, .table td {
    padding: 0.75rem; /* Increase padding for better spacing */
    vertical-align: middle;
}

/* Style for the form input and button */
.form-group {
    margin-bottom: 1rem;
}

button.btn-primary {
    background-color: #007bff; /* Primary color */
    border-color: #007bff;
}

button.btn-primary:hover {
    background-color: #0056b3; /* Darken on hover */
    border-color: #0056b3;
}

.edit-icon {
    cursor: pointer;
    color: #007bff; /* Primary color */
}

.edit-icon:hover {
    color: #0056b3; /* Darken color on hover */
}
.breadcrumb {
    background: #fff; /* Change as needed */
    border-radius: .25rem;
    margin-bottom: 1rem;
    padding:20px;
}

.breadcrumb a {
    color: #007bff; /* Primary color */
}

.breadcrumb a:hover {
    color: #0056b3; /* Darken on hover */
}

/*********** page title for every page start *************/
.page-title-box .page-title-right {
    float: right;
}
.page-title-box h2 {
    float: left;
    color: #333;
    font-family: 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 500;
}
.page-title-box .page-title-right .breadcrumb {
    background-color: transparent;
    border-radius: 0;
    padding: 0;
    margin-top: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
}
.page-title-box .page-title-right .breadcrumb a {
    text-decoration: none;
}
.page-title-box .page-title-right .breadcrumb .breadcrumb-item + .breadcrumb-item:before {
    color: #999;
    padding: 0 7px 0 0;
}
.card {
    border: none;
    border-radius: 5px;
    box-shadow: 2px 2px 4px rgba(0,0,0,.1);
}
.card-body {
    padding: 20px;
}
.card-header.btn-head {
    padding: 20px;
}
.card-footer.btn-head {
    padding: 20px;
}
.card-header .btn.btn-secondary,
.card-footer .btn.btn-secondary {
    background-color: #eef2f7;
    box-shadow: 1px 1px 3px rgba(0,0,0,.1);
    color: #333;
    border: none;
    border-radius: 2px;
    padding: 8px 14px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
}
.card-header .btn.btn-link,
.card-footer .btn.btn-link {
    background-color: transparent;
    color: #0049ed;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
}

.card .card-header {
    background-color: transparent;
    border-color: rgba(0,0,0,.05) !important;
}
.card .card-header h4.header-title {
    font-family: 'Inter', sans-serif;
    color: #333 !important;
    font-size: 16px;
    font-weight: 500 !important;
    margin-bottom: 0;
    padding: 7px 0;
}
.bg-nav-pills {
    background-color: #f6f7fb;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
}
.bg-nav-pills .nav-item .nav-link {
    border-radius: 0;
    padding: 15px 30px;
    font-weight: 400;
}
.bg-nav-pills .nav-item .nav-link.active {
    color: #fff !important;
    position: relative;
}
.bg-nav-pills .nav-item .nav-link.active:after {
    content: "";
    position: absolute;
    width: 0; 
    height: 0; 
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #0049ed;
    bottom: -7px;
    left: 50%;
    margin-left: -5px;
}
.tab-pane .table-striped-columns {
    border: 1px solid #f6f6ff;
    border-bottom: 0;
}
.tab-pane .table-striped-columns td {
    background-color: #f6f6ff;
    border-bottom: 1px solid #f1f1ff;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #333;
    font-weight: 600;
}

.tab-pane .table-striped-columns > :not(caption) > tr > :nth-child(2n) {
    background-color: #fff;
    box-shadow: 0 0 0;
    font-weight: 400;
}
.tab-pane .btn-primary {
    background: #0049ed !important;
    box-shadow: 1px 1px 3px rgba(0,0,0,.1);
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 8px 14px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
}
.tab-pane h4 {
    font-family: 'Inter', sans-serif;
    color: #333 !important;
    font-size: 16px;
    font-weight: 500 !important;
    padding: 15px 0;
    margin-bottom: 0;
}

.tab-pane th {
    /*background-color: #F6F6FF;*/
    font-family: 'Inter', sans-serif;
    color: #333;
    font-size: 13px;
    font-weight: 500;
    border: none !important;
}
.tab-pane td {
    font-family: 'Inter', sans-serif;
    color: #333;
    font-size: 13px;
    font-weight: 300;
    border-bottom: 1px solid #f2f2f2;
    background-color: transparent !important;
}
.plate-info-card {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 2px 2px 4px rgba(0,0,0,.1);
}
.plate-info-card .row {
    margin-left: 0;
    margin-right: 0;
}
.plate-info-card .row .col-md-4,
.plate-info-card .row .col-md-10,
.plate-info-card .row .col-md-2 {
    padding-left: 0;
    padding-right: 0;
}
.plate-info-card .inner-wrap {
    padding: 18px;
    border-right: 2px dotted #EFEFF7;
    border-bottom: 2px dotted #EFEFF7;
}
.plate-info-card h5 {
    color: #999;
    font-size: 13px;
    font-weight: 400;
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
}
.plate-info-card .info {
    font-family: 'Inter', sans-serif;
    color: #333;
    font-size: 18px;
    font-weight: 500;
    text-align: left;
    line-height: 20px;
}
.plate-info-card .btn-primary {
    border: none;
    font-family: 'Inter', sans-serif;
    padding: 10px 0;
    font-weight: 500;
    font-size: 16px;
}
.plate-info-card .info-days {
    font-family: 'Inter', sans-serif;
    padding: 10px 0 0;
    font-weight: 400;
    font-size: 13px;
    color: #999;
    text-align: center;
}
.plate-info-card .status-active {
    font-family: 'Inter', sans-serif;
    padding: 8px 0 0;
    font-weight: 400;
    font-size: 13px;
    color: #999;
    text-align: center;
}
.plate-info-card .status-active span {
    color: green;
    font-weight: 600;
    text-transform: uppercase;
}
.plate-info-card .report-prob {
    font-family: 'Inter', sans-serif;
    padding: 8px 0 0;
    font-weight: 400;
    font-size: 13px;
    color: #f67e4f;
    text-align: center;
    background-color: transparent;
    border: none;
}
/*********** page title for every page end *************/



.report-problem-btn {
    background-color: #f44336;
    color: white;
    padding: 5px 10px;
    font-size: 12px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s, box-shadow 0.3s;
}

.report-problem-btn i {
    margin-right: 5px; /* Adds spacing between the icon and text */
}

.report-problem-btn:hover {
    background-color: #c12f25;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}


/*********** form start *************/
.form-group {
    margin-bottom: 20px;
}
.form-group label {
    margin-bottom: 5px;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    color: #6e777f;
}
.form-group label span {
    font-size: 13px;
    font-weight: 400;
}
.form-group .form-control {
    color: #666;
    border-radius: 5px;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    padding: 10px 15px;
}
.form-group .form-select {
    color: #666;
    border-radius: 5px;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    padding: 10px 15px;
}
/*********** form end *************/

/*********** Model Window Start ***********/
.modal-content {
    border-radius: 5px;
}
.modal-content .modal-header {

}
.modal-content .modal-header h5 {
    font-size: 16px;
    font-family: 'Inter', sans-serif;
}
.modal-content .modal-header .btn-close {
    padding: 5px;
}
.modal-content .modal-footer .btn-secondary {
    background-color: #eef2f7;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    color: #333;
    border: none;
    border-radius: 5px;
    padding: 10px 15px;
}
.modal-content .modal-footer .btn-primary {
    background: #0049ed;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 10px 15px;
}
.modal-body .form-group {
    margin-bottom: 20px;
}
.modal-body .form-group label {
    margin-bottom: 5px;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    color: #6e777f;
}
.modal-body .form-group .form-control {
    color: #666;
    border-radius: 5px;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    padding: 10px 15px;
}
/*********** Model Window end ***********/
/************ swal2-popup start ************/
.swal2-popup .swal2-title {
    text-align: center;
}
.swal2-popup .swal2-actions {
    text-align: center;
    padding-top: 10px;
}
.swal2-popup .swal2-actions .swal2-confirm {
    margin: auto;
}
/************ swal2-popup end ************/


#loadingOverlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.7);
    z-index: 11111; /* Increase this value so it's higher than the modal's z-index */
}


#loadingOverlay > div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
     z-index: 111111; /* Ensure it's above other content */
}

.spinner-border {
    width: 3rem; /* Increase the size of the spinner */
    height: 3rem;
}
.spinner-border {
    border-color: #004085;
    border-top-color: transparent; /* Gives the spinner its 'spinning' effect */
}

.alert-danger {
    background-color: #ffeff2;
    border: 1px solid #fedee5;
    margin-bottom: 30px;
}
.alert-danger ul {
    margin-bottom: 0;
}
.alert-danger ul li {
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    color: #642532;
}
.alert-danger p {
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    color: #642532;
    margin-bottom: 0;
}
.btn-success i:before {
    font-weight: bold !important;
}
.page-title-box .btn-secondary {
    padding: 0.25rem 0.5rem;
}
.summary-notes {
    display: flex;
    flex-direction: row;
}
.summary-notes .badge {
    border-radius: 3px;
    margin-right: 5px;
    padding: 0 8px 0 0;
    font-family: 'Inter', sans-serif;
    font-size: .9em !important;
    color: #333 !important;
}
.summary-notes .badge .fas {
    color: #333 !important;
    font-size: 12px;
    width: 27px;
    line-height: 27px;
    border-radius: 2px;
    margin-right: 6px;
}
.summary-notes .badge.bg-warning {
    background-color:rgba(255, 193, 5, .2) !important;
    border: 1px solid rgba(255, 193, 5, 1) !important;
}
.summary-notes .badge.bg-warning .fas {
    background-color:rgba(255, 193, 5, .8) !important;
}
.summary-notes .badge.bg-danger {
    background-color:rgba(220, 53, 69, .2) !important;
    border: 1px solid rgba(220, 53, 69, 1) !important;
}
.summary-notes .badge.bg-danger .fas {
    background-color:rgba(220, 53, 69, .8) !important;
}
.summary-notes .badge.bg-success {
    background-color:rgba(25, 135, 84, .2) !important;
    border: 1px solid rgba(25, 135, 84, 1) !important;
}
.summary-notes .badge.bg-success .fas {
    background-color:rgba(25, 135, 84, .8) !important;
}
.dataTables_wrapper .dataTable .action-btn .dropdown .btn {
    background-color: #fff;
    border: 1px solid #dee2e6;
    box-shadow: none;
    padding: 3px 7px 3px 10px;
}
.dataTables_wrapper .dataTable .action-btn .dropdown .btn:after {
    position: relative;
    top: 9px;
    margin-left: 6px;
}
.dataTables_wrapper .dataTable .action-btn .dropdown .dropdown-menu {
    padding: 3px 0;
}
.dataTables_wrapper .dataTable .action-btn .dropdown .dropdown-menu li {
    border-bottom: 1px solid #e1e1e1;
}
.dataTables_wrapper .dataTable .action-btn .dropdown .dropdown-menu li:last-child {
    border-bottom: none;
}
.dataTables_wrapper .dataTable .action-btn .dropdown .dropdown-menu li .dropdown-item {
    display: block;
    margin: 0;
    padding: 5px 10px;
    font-family: 'Inter', sans-serif;
    font-size: 13px !important;
    color: #333 !important;
    width: 100%;
    line-height: 20px;
}
.dataTables_wrapper .dataTable .action-btn .dropdown .dropdown-menu li .dropdown-item:hover {
    background-color: rgba(0,0,0,.05);
}
.dataTables_wrapper .dataTable .action-btn .dropdown .dropdown-menu li .dropdown-item .fas {
    font-size: 14px;
}
.dataTables_wrapper .dataTable .action-btn .dropdown .dropdown-menu li .dropdown-item .btn {
    background: transparent;
    padding: 0;
    font-family: 'Inter', sans-serif;
    color: #333 !important;
    border: 0;
    border-radius: 0;
    font-weight: 400;
    font-size: 13px;
}
.dataTables_wrapper .dataTable .action-btn .dropdown .dropdown-menu li .dropdown-item .btn:hover {
    background-color: transparent;
}