/* custom styles for monysoft elments that is not different to bs5. when portal gets updated to bs5, this code shouldn't be updated. */

/*====================================== LOADING ======================================*/
.loading {font-size: 3rem; color: var(--monysoft-color-dark);}

/*====================================== Tile ======================================*/
.tile {margin-bottom: 1.25rem; background-color: #fff; border-radius: 6px; box-shadow: 0 0.5em 0.5em -0.125em rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.02); color: #4a4a4a; display: block; padding: 1.25rem; max-width: 120rem; border: 1px solid #f1f1f1;}
.tile-md {cursor: pointer; min-height: 12rem;}
.tile-md.tile-link {text-decoration: none;}
.tile.tile-expand {height: fit-content !important; max-height: fit-content !important;}
.tile:hover {box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);}
.tile-title {margin-bottom: 0.5rem;}
.tile-icon.material-icons {font-size: 3.5rem; vertical-align: bottom;}
span.tile-icon.material-icons-outlined {font-size: 3.5rem; vertical-align: bottom;}
.tile-md.tile-link:hover span.tile-icon.material-icons-outlined {color: var(--monysoft-color-hover);}
/* span.tile-icon.material-icons-outlined {font-size: 3rem; position: relative; top: 0.5rem;} */
.tile-label {font-size: var(--monysoft-font-size-lg); font-weight: normal; margin-bottom: 0; /*margin-left: 1rem;*/ cursor: pointer;}
.tile-label span {font-size: var(--monysoft-font-size-lg); font-weight: normal; margin-bottom: 0;}
.tile-sub-label {font-size: var(--monysoft-font-size-sm); font-weight: normal;}
.tile-md .tile-content {/* max-height: 3.5rem; */ overflow: hidden;}
.tile-lg .tile-content {max-height: 12rem; overflow: hidden;}
.tile-content.show-all-content {max-height: fit-content;}
.tile-action-btns {/*margin-left: var(--monysoft-tile-margin-left);*/ min-height: 1.5rem; padding-right: 1rem;}
.tile-action-btns .btn {float: right;}
.tile-overflow-link {position: relative; top: 1rem; text-decoration: underline;}
/* tablets and below */
@media (max-width: 991.98px) {
.tile-overflow-link {position: relative; top: 3rem;}
.row.tile-container-row {display: contents; width: 103%; margin-top: 0%;}
/* lg tile title size */
.tile-lg .tile-label span {font-size: var(--monysoft-font-size-md);}
.row.tile-container-row .col-lg-12, .row.tile-container-row .col-lg-6 {padding: 0;}
}

/*====================================== MY PROVIDER/SERVICE CONTAINER ======================================*/
.provider-container,
.service-container {
    display: inline-flex;
    width: 100%;
    padding: 1rem;
    border-radius: var(--bs-border-radius);
    border: 1px solid var(--bs-gray-200);
}

.provider-search-btn-container,
.service-search-btn-container {
    margin-left: 3rem;
}

#providerChangeBtn,
#serviceChangeBtn,
#providerCancelChangeBtn,
#serviceCancelChangeBtn {
    position: relative;
    top: 1rem;
}

.provider-name-container,
.service-name-container {
    width: 63rem;
}

.provider-search-container,
.service-search-container {
    position: relative;
    top: 1rem;
    width: 63rem;
    height: 7rem;
}

button[data-id="providerSelectPicker"],
button[data-id="serviceSelectPicker"] {
    background: white !important;
    color: black;
    border: 1px solid var(--bs-gray-500);
    border-radius: var(--bs-border-radius);
}

/*====================================== MANAGE USERS TABLE STYLE ======================================*/
#ManageProvider_Users_Grid input[type="checkbox"], #ManageService_Users_Grid input[type="checkbox"] {width: 2rem; height: 2rem;}
#ManageProvider_Users_Grid th:nth-child(4), #ManageProvider_Users_Grid td:nth-child(4) {text-align: center;}
#ManageService_Users_Grid td {text-align: left;}
#ManageService_Users_Grid th:nth-child(n + 5) {text-align: center;}
#ManageService_Users_Grid td:nth-child(n + 5) {text-align: center;}

/* col: full name */
#ManageService_Users_Grid th:nth-child(3) {width: 14% !important;}
/* col: email */
#ManageService_Users_Grid th:nth-child(4) {width: 23% !important;}
/* col: service access */
#ManageService_Users_Grid th:nth-child(5) {width: 13% !important;}
/* col: admin */
#ManageService_Users_Grid th:nth-child(6) {width: 18% !important;}
/* col: provider access */
#ManageService_Users_Grid th:nth-child(7) {width: 13% !important;}
/* email input and button container */
.manageUsers-email-input-container {display: inline-flex; width: 100%; height: 4rem;}
/* email input */
input#emailaddress_id {position: relative; top: 2px;}
/* email submit buttton */
#searchandaddbtn {width: 15rem; margin-left: 1rem;}

/*====================================== STYLED WARNINGS ======================================*/
.helper-text-highlighted:hover {color: #684700; border-color: #ffbc34; border-left-color: #ffad00; background-color: #ffffff;}
#notification-invoice-link {text-decoration: none;}
.loading-tile-container {margin-top: 3rem;}

/*====================================== PROVIDER & SERVICE DETAIL PAGE TOP BUTTON GROUP ======================================*/

/* mobile and below */
@media (max-width: 425px) {
#detail-btn-container .btn-group {width: 100%;}
}

/*====================================== REMOVE DEFAULT EXTRA MARGIN ON OOB PAGES ======================================*/
.columnBlockLayout {margin-top: 0px !important;}

/*====================================== (Dhanraj Manohare) ======================================*/
.row.sectionBlockLayout {margin: 0;}
.row.sectionBlockLayout .header-menu {background: #444444; margin: 0;}
.navbar-nav>li>a {padding-top: 0;}
.navbar-nav>li>a:hover, .navbar-nav>li>a:focus {text-decoration: none !important;}
nav.menu-bar .nav.navbar-nav {flex-direction: row; justify-content: space-around; width: 100%; display: table;}
nav.menu-bar .nav.navbar-nav li {border-bottom: transparent solid 5px; display: table-cell; text-align: center;}
nav.menu-bar .nav.navbar-nav a {padding: 14px 8px 8px; color: #fff;}
nav.menu-bar .nav.navbar-nav a i {margin-right: 2px;}
nav.menu-bar .nav.navbar-nav li:hover, nav.menu-bar .nav.navbar-nav li:focus {background: #0b3f47; border-bottom: #b9273a solid 5px; text-decoration: none !important;}
nav.menu-bar .nav.navbar-nav li a:hover, nav.menu-bar .nav.navbar-nav li a:focus {background: #0b3f47;}
button.navbar-toggler {margin-right: 0;}
.row.sectionBlockLayout table.navigation {margin: 0;}
.row.sectionBlockLayout table.navigation td {padding: 0;}
.row.sectionBlockLayout table.navigation td a {color: #fff; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 14px 8px 8px; border-bottom: transparent solid 5px;}
.row.sectionBlockLayout table.navigation td a:hover, .row.sectionBlockLayout table.navigation td a:focus {background: #000; border-bottom: #b9273a solid 5px; text-decoration: none !important;}
.menuclose {display: none;}

/*==================== Table ====================*/
table.table.table-striped {border: 1px solid var(--bs-gray-200);}
.gridHeader {font-family: Arial, Helvetica, sans-serif; font-weight: 400; font-size: 14px; white-space: nowrap;}
thead:not(.datepicker thead) {background: #2e808e;}
.table {margin: 0;}
.table td {vertical-align: middle; font-size: 14px;}
.table td a {color: #337ab7; white-space: nowrap;}
th, th a {color: white;}
th a:hover, th a:focus, th a:active {color: #e5e5e5;}
.view-grid .table td a {font-size: 15px;}
.view-grid ul.dropdown-menu {padding: 0; overflow: hidden;}
.view-grid ul.dropdown-menu a.dropdown-item {padding: 6px 16px;}
.grid-actions {padding: 9px; margin: 0;}

/*==================== Comman css ====================*/
.private-mode-banner {background: #2f4f4f;}
.sectionLayout {padding: 20px 12px;}
.boxviewcontainer {margin: 0 auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);}
.boxviewcontainer:empty {display: none;}

/*==================== Page Title ====================*/
.header-bar {background: #0b3f47; color: white; padding: 15px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; border-radius: 6px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}
.header-bar .icon {font-size: 22px; cursor: pointer; transition: transform 0.3s;}
.header-bar .icon:hover {transform: scale(1.1);}
.header-bar h1 {font-size: 18px; font-weight: 600; margin: 0; color: white !important;}

/*==================== Notifications ====================*/
.notification-msg {border-left: #b9273a solid 5px; border-right: #e1e1e1 solid 1px; border-top: #e1e1e1 solid 1px; border-bottom: #e1e1e1 solid 1px; box-shadow: none; padding: 1rem 1.25rem; margin-bottom: 20px; background-color: #fff; border-radius: 6px; color: #4a4a4a; display: block;}
.notification-msg i, .notification-msg h4 {margin: 0; font-size: 20px; color: #b9273a !important;}
.notification-msg p {margin: 0; font-size: 16px;}

/*==================== MyProfile - Edit User = New User = Admin MyProfile Page ====================*/
.profile-user-page .boxviewcontainer {margin: 20px 0;}
.profile-user-page .crmEntityFormView {border: none;}
.profile-user-page .crmEntityFormView .tab-title {font-size: 18px; border: none; background: #0b3f47; color: white !important; padding: 15px 20px; display: flex; align-items: center; gap: 12px; margin-bottom: 20px; margin-top: 0; border-radius: 6px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); font-weight: 600;}
/*.profile-user-page .crmEntityFormView .tab-title:before {content: "\f0c9"; font-family: var(--fa-style-family, "Font Awesome 6 Free"); font-weight: var(--fa-style, 900);}*/
.profile-user-page .crmEntityFormView .cell {padding: 10px 10px;}
.profile-user-page .crmEntityFormView .tab-column {padding: 10px !important; border: 1px solid #e0e0e0; background: #fafafa; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);}
.profile-user-page .crmEntityFormView .cell .field-label {font-size: 13px; font-weight: 600; background: transparent; margin-bottom: 4px;}
.profile-user-page .crmEntityFormView fieldset:last-child .view-grid.table-responsive {background: #ffff;}
.profile-user-page .crmEntityFormView input.form-control {padding: 10px 14px !important; border: 1px solid #bbb !important; border-radius: 6px; font-size: 14px; color: #333;}
.profile-user-page .crmEntityFormView .btn-default {padding: 9px 14px; border: 1px solid #bbb; border-radius: 6px;}
.profile-user-page h3.form-subgrid-heading:empty, .profile-user-page .crmEntityFormView fieldset:empty {display: none;}
.profile-user-page .crmEntityFormView fieldset {margin-top: 20px;}
.profile-user-page .crmEntityFormView fieldset:first-child {margin: 0;}
.profile-user-page .crmEntityFormView fieldset .section-title {padding: 0 8px; margin-bottom: 0; line-height: normal;}
.profile-user-page .crmEntityFormView fieldset .section-title h3 {margin:10px 0; font-size: 20px;}
.profile-user-page .crmEntityFormView .actions {margin-bottom: 0; border: none; padding: 0;}
.profile-user-page .crmEntityFormView .actions input {background: var(--monysoft-color-primary); color: white; border: none; padding: 9px 14px; border-radius: 6px; font-size: 14px; font-weight: 600; transition: all 0.3s ease; box-shadow: 0 2px 4px rgb(104 192 249 / 20%);}
.profile-user-page .crmEntityFormView .tab-column .control .view-toolbar.grid-actions {padding: 0 0 10px;}
.profile-user-page .crmEntityFormView .entity-form .tab {gap: 24px; display: flex;}
.profile-user-page .crmEntityFormView .tr .file-cell.cell {padding: 10px 0;}
.profile-user-page .crmEntityFormView .row.form-custom-actions .form-action-container-left {display: flex; gap: 10px;}
.profile-user-page .crmEntityFormView .row.form-custom-actions .form-action-container-left input#btnClose {background: #343a40; color: #fff;}

/*==================== Responsive Css ====================*/
@media (max-width: 1199.98px) {
.header-menu {display: none;}
.header-menu.navbar-collapse.show {display: block; height: 100%;}
nav.menu-bar .nav.navbar-nav {display: flex; justify-content: start;}
nav.menu-bar .nav.navbar-nav li {width: 100%; text-align: left;}
.row.sectionBlockLayout.menubar {width: 300px; position: fixed; top: 0; bottom: 0; padding: 0; z-index: 9999;}
.mobilemenu-overlay {background: rgb(0 0 0 / 20%); position: fixed; left: 0; right: 0; top: 0; bottom: 0;}
.menuclose.navbar-toggler {font-size: 20px; margin: 10px 10px 0 0; display: flex; align-items: center; justify-content: end; width: 100%; background: transparent !important; box-shadow: none;}
.menuclose i {color: #fff; border: 1px solid #fff; padding: 7px 11px;}
nav.menu-bar {position: relative; z-index: 99;}
}
@media (max-width: 991.98px) {
.mainContentTitle.text-end.my-1 {width: 70%;}
nav.menu-bar .nav.navbar-nav a {padding: 14px 14px 10px; margin: 0;}
.profile-user-page .crmEntityFormView .entity-form .tab {gap: 24px; display: block;}
.profile-user-page .crmEntityFormView .entity-form .tab .tab-column {width:100% !important; margin-bottom: 24px;}
/*nav.menu-bar .nav.navbar-nav li {padding: 10px 8px 6px; border-bottom: transparent solid 3px;}
nav.menu-bar .nav.navbar-nav li:hover, nav.menu-bar .nav.navbar-nav li:focus {border-bottom: #b9273a solid 3px;}*/
}
@media (max-width: 767.98px) {
.mainContentTitle.text-end.my-1 {width: 59%;}
.profile-user-page .crmEntityFormView .cell {margin-bottom: 0;}
.header-bar {padding: 12px 16px;}
.header-bar h1 {font-size: 16px;}
}
@media (max-width: 575.98px) {
.container {padding-left: 20px; padding-right: 20px;}
.static-top .navbar-brand {text-align: center; width: 100%;}
.mainContentTitle.text-end.my-1 .container {text-align: left;}
.mainContentTitle.text-end.my-1 {width: 100%;}
.header-bar {padding: 12px 16px;}
.header-bar h1 {font-size: 16px;}
}
@media (max-width: 478.98px) {
.empty-label label {display: none;}
.header-bar {display: block;}
.header-bar a.back-button {margin-top: 10px; display: block; text-align: center;}
.empty-label label {display: none;}
.doc-flex {display: block !important;}
.doc-flex .document-type-name {width: 100%; display: block;}
.row.sectionBlockLayout.menubar {width: 240px;}
}

/*==================== Sales Return Details ====================*/
/* Back Button */
.back-button {background: linear-gradient(135deg, #ff758c 0%, #e01f3f 100%); color: white; border: none; padding: 9px 14px; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 10px;}
a.back-button:hover {background: linear-gradient(135deg, #e12141 0%, #d41232 100%); color: #fff; text-decoration: none !important; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(255, 140, 0, 0.3);}

/* Filter Section */
.filter-section {display: flex; gap: 20px; align-items: flex-end; margin-bottom: 18px; flex-wrap: wrap; background: #fafafa; padding: 18px; border: 1px solid #e0e0e0; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);}
.filter-group {flex: 1; min-width: 220px;}
.filter-group label {display: block; margin-bottom: 8px; color: #333; font-size: 14px; font-weight: 600;}
.filter-input-wrapper {position: relative;}
.filter-select {width: 100%; padding: 10px 14px; border: 1px solid #bbb; border-radius: 6px; font-size: 14px; color: #333; background-color: #fff; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; transition: border-color 0.3s, box-shadow 0.3s;}
.filter-select:focus {outline: none; border-color: var(--monysoft-color-dark); box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);}
.filter-group .form-select {min-height: 42.6px;}

/* Retrieve Button */
.retrieve-button {background: var(--monysoft-color-primary); color: white; border: none; padding: 9px 14px; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 10px; transition: all 0.3s ease; white-space: nowrap; box-shadow: 0 2px 4px rgb(104 192 249 / 20%); min-height: 42.6px;}
.retrieve-button:hover {background: var(--monysoft-color-dark); transform: translateY(-1px); box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);}
.retrieve-button:active {transform: translateY(0);}

.contract-section {margin-top: 15px; margin-bottom: 15px;}
.contract-section:last-child {margin-bottom: 0;}
.contract-header {background: linear-gradient(135deg, #e8e8e8 0%, #f0f0f0 100%); padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; border-radius: 8px; transition: all 0.3s ease; border: 1px solid #ddd; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);}
.contract-header:hover {background: linear-gradient(135deg, #dee2e6 0%, #e9ecef 100%); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);}
.contract-title {flex: 1; color: #2c2c2c; font-size: 15px; font-weight: 500;}
.contract-actions {display: flex; align-items: center; gap: 15px;}
.expand-arrow {font-size: 16px; transition: transform 0.3s ease; color: #2c2c2c; cursor: pointer; font-weight: bold; user-select: none;}
.contract-content {display: none; background: white; padding: 20px; border-radius: 8px; margin-top: 4px; border: 1px solid #e0e0e0; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); animation: slideDown 0.3s ease;}
.status-label {display: inline-block; padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; background-color: #6c757d; color: white; margin-right: 8px;}
.recall-label {display: inline-block; padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; background-color: #ffc107; color: #000;}
.contract-content.expanded {display: block;}

@keyframes slideDown {
    from {opacity: 0; transform: translateY(-10px);}
    to {opacity: 1; transform: translateY(0);}
}

/* Instructions */
.instructions-panel {background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); padding: 20px 20px 14px; border-radius: 8px; margin-bottom: 20px; border-left: 5px solid var(--monysoft-color-dark); position: relative; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);}
.instructions-header {display: flex; align-items: center; gap: 12px; margin-bottom: 12px;}
/*.lightbulb-icon {font-size: 20px; line-height: normal;}*/
.instructions-header h4 {margin: 0; color: #333; font-size: 18px; font-weight: 600;}
.instructions-list {list-style: none; padding: 0; margin: 0;}
.instructions-list li {padding: 4px 0; padding-left: 30px; position: relative; color: #444; font-size: 14px; line-height: 1.6;}
.instructions-list li::before {content: "✓"; position: absolute; left: 0; color: var(--monysoft-color-dark); font-weight: bold; font-size: 14px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; background: white; border-radius: 50%; border: 2px solid var(--monysoft-color-dark);}

.content-wrapper {display: grid; grid-template-columns: 2fr 1fr; gap: 20px; margin-bottom: 20px;}
.agency-details-section {background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); padding: 20px; border: 1px solid #e0e0e0; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);}
.agency-details-section h3 {margin: 0 0 12px; color: #2c2c2c; font-size: 18px; font-weight: 600; border-bottom: 2px solid var(--monysoft-color-dark); padding-bottom: 12px;}
.agency-row {display: flex; align-items: start; gap: 15px; transition: background-color 0.3s; padding: 6px 0; border-radius: 6px;}
.agency-row:hover {background-color: #f5f5f5;}
.agency-row:last-child {border-bottom: none; margin-bottom: 0; padding-bottom: 0;}
.delete-btn {border: none; font-size: 16px; padding: 5px 10px; align-self: center; background: linear-gradient(135deg, #e12141 0%, #d41232 100%); border-radius: 6px; min-width: 35px; min-height: 35px; margin: 3px 0;}
.delete-btn:hover:not(:disabled) {background: #d70a0a;}
.delete-btn:disabled {background: #ccc !important; color: #999; cursor: not-allowed; opacity: 0.6;}
.form-field {flex: 1;}
.form-field label {display: block; margin-bottom: 4px; color: #333; font-size: 13px; font-weight: 600;}
.form-input {width: 100%; padding: 10px 14px; border: 1px solid #ccc; border-radius: 6px; font-size: 14px; transition: all 0.3s; color: #333; background-color: #fff;}
.form-input:focus {outline: none; border-color: var(--monysoft-color-dark); box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);}
.form-input:disabled {background-color: #e9ecef; color: #6c757d; cursor: not-allowed; opacity: 0.6;}
.required-asterisk {color: #dc3545; font-weight: bold; margin-left: 2px;}
.error-message {display: block; color: #dc3545; font-size: 12px; margin-top: 4px; min-height: 16px;}
.error-message:empty {display: none;}
.form-input.error {border-color: #dc3545; box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);}
.form-input.valid {border-color: #28a745;}
.primary-btn {background: var(--monysoft-color-primary); color: white; border: none; padding: 9px 14px; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 15px; transition: all 0.3s ease; box-shadow: 0 2px 4px rgb(104 192 249 / 20%);}
.primary-btn:hover:not(:disabled) {background: var(--monysoft-color-dark); transform: translateY(-1px); box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);}
.primary-btn:disabled {background: #6c757d; color: #fff; cursor: not-allowed; opacity: 0.6; transform: none;}
.summary-box {background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); padding: 20px; border: 1px solid #e0e0e0; border-radius: 8px; height: fit-content; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); position: sticky; top: 20px;}
.summary-box h3 {margin: 0 0 12px; color: #2c2c2c; font-size: 18px; font-weight: 600; border-bottom: 2px solid var(--monysoft-color-dark); padding-bottom: 12px;}
.summary-item {display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #e0e0e0; transition: background-color 0.3s;}
.summary-item:hover {background-color: #f0f0f0;}
.summary-item:last-of-type {border-bottom: none;}
.summary-item label {color: #666; font-size: 14px; font-weight: 500;}
.summary-item span {color: #2c2c2c; font-size: 14px; font-weight: 600;}
.history-link {text-align: right; padding-top: 20px;}
.history-link a {color: var(--monysoft-color-dark); text-decoration: none; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; transition: all 0.3s;}
.history-link a::after {content: "↻"; font-size: 16px;}
.history-link a:hover {text-decoration: underline; color: #5568d3;}
.action-buttons {display: flex; gap: 15px; justify-content: flex-end;}
.recall-button {background: linear-gradient(135deg, #e12141 0%, #d41232 100%); color: white; border: none; padding: 9px 14px; border-radius: 6px; font-size: 15px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 10px; transition: all 0.3s ease; box-shadow: 0 2px 4px rgba(255, 152, 0, 0.2);}
.recall-button:hover {background: linear-gradient(135deg, #e12141 0%, #d41232 100%); box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3); transform: translateY(-2px);}
.recall-button:active {transform: translateY(0);}
.save-button, .submit-button {background: var(--monysoft-color-primary); color: white; border: none; padding: 9px 14px; border-radius: 6px; font-size: 15px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 10px; transition: all 0.3s ease; box-shadow: 0 2px 4px rgb(104 192 249 / 20%);}
.save-button:hover, .submit-button:hover {background: var(--monysoft-color-dark); box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3); transform: translateY(-2px);}
.save-button:active, .submit-button:active {transform: translateY(0);}
.action-buttons .icon {font-size: 18px;}

.autocomplete-wrapper {position: relative; width: 100%;}
.autocomplete-dropdown {position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid #ccc; border-top: none; border-radius: 0 0 6px 6px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); max-height: 200px; overflow-y: auto; z-index: 1000; margin-top: -1px;}
.autocomplete-item {padding: 10px 14px; cursor: pointer; border-bottom: 1px solid #f0f0f0; transition: background-color 0.2s; font-size: 14px; color: #333;}
.autocomplete-item:hover, .autocomplete-item.active {background-color: #f4f6f8; color: var(--monysoft-color-primary);}
.autocomplete-item:last-child {border-bottom: none;}
.autocomplete-item strong {font-weight: 600; color: var(--monysoft-color-dark);}

@media (max-width: 1024.98px) {
.content-wrapper {grid-template-columns: 2fr 1.2fr;}
}
@media (max-width: 991.98px) {
.content-wrapper {grid-template-columns: 1fr;}
.summary-box {position: static;}
.filter-section {flex-direction: column; align-items: stretch;}
.filter-group {width: 100%;}
}
@media (max-width: 576px) {
.contract-content, .summary-box, .filter-section {padding: 16px;}
.contract-title {font-size: 13px;}
.action-buttons {flex-direction: column;}
.save-button, .submit-button, .recall-button {width: 100%; justify-content: center;}
}
@media (max-width: 479px) {
.agency-row {flex-direction: column; align-items: stretch;}
.delete-btn {margin-top: 0;}
.primary-btn {width: 100%;}
.save-button, .submit-button, .recall-button {width: 100% !important;}
}

/*==================== Manage compliance documents ====================*/
.section-label {color: #666; font-size: 14px; font-weight: 500; margin-bottom: 15px; padding-left: 4px;}
.documents-list {background: white; border-radius: 8px; border: 1px solid #e0e0e0; overflow: hidden;}
.document-type-section {border-bottom: 1px solid #e0e0e0;}
.document-type-section:last-child {border-bottom: none;}
.document-type-header {padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; transition: background-color 0.3s; background: white; gap: 12px;}
.document-type-header:hover {background-color: #f8f9fa;}
.doc-flex {display: flex; align-items: center; width: 100%; gap: 10px; row-gap: 5px;}
.document-type-name {color: #2c2c2c; font-size: 15px; font-weight: 500; flex: 1;}
.accordion-icon {font-size: 20px; font-weight: bold; color: #2e808e; transition: transform 0.3s; user-select: none; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;}
.document-type-content {display: none; padding: 20px 18px; background: white; border-top: 1px solid #f0f0f0;}
.document-type-content.expanded {display: block;}
.document-type-content.collapsed {display: none;}
.most-recent-section, .history-section {margin-bottom: 24px;}
.most-recent-section:last-child, .history-section:last-child {margin-bottom: 0;}
.most-recent-section h3, .history-section h3 {color: #2c2c2c; font-size: 16px; font-weight: 600; margin: 0 0 12px 0;}
.document-item {display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; padding: 8px 0;}
.document-item:last-child {margin-bottom: 0;}
.document-link {color: #28a745; text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.3s;}
.document-link:hover {color: #218838; text-decoration: underline;}
.status-badge {display: inline-block; padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; background-color: #6c757d; color: white;}
.status-badge.expired {background: linear-gradient(135deg, #e12141 0%, #d41232 100%);}
.status-badge.expiring-soon {background-color: #ffc107; color: #000;}
.status-badge.not-uploaded {background-color: #6c757d; color: white;}
.status-badge.valid {display: none;}
.expiry-date {color: #666; font-size: 14px; margin-left: 12px; white-space: nowrap;}
.expiry-date.expired {color: #999;}
.no-history {color: #999; font-size: 14px; font-style: italic; padding: 8px 0;}
.update-button {background: #28a745; color: white; border: none; padding: 8px 16px; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; margin-top: 12px; transition: all 0.3s ease; box-shadow: 0 2px 4px rgb(104 192 249 / 20%);}
.update-button:hover {background: #218838; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);}
.update-button:active {transform: translateY(0);}

@media (max-width: 768px) {    
.document-type-header {padding: 12px 16px;}
.document-type-content {padding: 16px;}
.document-item {flex-direction: column; align-items: flex-start; gap: 8px;}
.expiry-date {margin-left: 0;}
.update-button {width: 100%;}
}

/*==================== Status Report ====================*/
.salesreturn-table table .gridHeader {white-space: nowrap;}
.statusreport .entitylist {border: none;}
.statusreport .entitylist .content-panel {border: none;}
.statusreport .entitylist .card-body {margin: 0 auto; background: #fafafa; padding: 18px; border: 1px solid #e0e0e0; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);}
.statusreport .form-section {background: #fafafa; padding: 18px; border: 1px solid #e0e0e0; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);}
.statusreport .form-section .row {row-gap: 18px;}
.statusreport .form-section label {display: block; margin-bottom: 8px; color: #333; font-size: 14px; font-weight: 600;}
.statusreport .input-wrapper {flex: 1; position: relative;}
.statusreport .form-select, .statusreport .form-input {width: 100%; padding: 10px 14px; border: 1px solid #bbb; border-radius: 6px; font-size: 14px; color: #333; background-color: #fff; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; transition: border-color 0.3s, box-shadow 0.3s;}
.statusreport .form-input {cursor: text; background-image: none; padding-right: 14px;}
.statusreport .form-select:focus, .statusreport .form-input:focus {outline: none; border-color: var(--monysoft-color-primary); box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);}
.statusreport .date-range-wrapper {display: flex; align-items: center; gap: 12px;}
.statusreport .date-checkbox {width: 18px; height: 18px; cursor: pointer; margin: 0;}
.statusreport .date-range-inputs {display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: 1;}
.statusreport .date-select, .statusreport .month-select {padding: 10px 10px; border: 1px solid #bbb; border-radius: 6px; font-size: 14px; color: #333; background-color: #fff; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; padding-right: 28px; transition: border-color 0.3s, box-shadow 0.3s; width: 100%;}
.statusreport .date-select:focus, .statusreport .month-select:focus {outline: none; border-color: var(--monysoft-color-primary); box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);}
.statusreport .date-separator {color: #666; font-size: 14px; font-weight: 500;}
.statusreport .action-buttons {display: flex; gap: 15px; margin-top: 20px;}
.statusreport .btn-view-report, .statusreport .btn-reset {border: none; padding: 9px 14px; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: all 0.3s ease; box-shadow: 0 2px 4px rgb(104 192 249 / 20%);}
.statusreport .btn-view-report {background: var(--monysoft-color-primary); color: white;}
.statusreport .btn-view-report:hover {background: var(--monysoft-color-dark); transform: translateY(-1px); box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);}
.statusreport .btn-view-report:active {transform: translateY(0);}
.statusreport .btn-reset {background: linear-gradient(135deg, #e12141 0%, #d41232 100%); color: white;}
.statusreport .btn-reset:hover {background: linear-gradient(135deg, #e12141 0%, #d41232 100%); transform: translateY(-1px); box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);}
.statusreport .btn-reset:active {transform: translateY(0);}
.statusreport .btn-view-report i, .statusreport .btn-reset i {font-size: 16px;}
.statusreport .content-panel.card.entitylist-filter li.entitylist-filter-option-group.list-inline-item {width: 33.33%; margin: 0; float: left; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: calc(var(--bs-gutter-x) * .5);}
.statusreport .content-panel.card.entitylist-filter ul.list-inline {row-gap: 18px; --bs-gutter-x: 1.25rem; --bs-gutter-y: 0; display: flex; flex-wrap: wrap; margin-top: calc(-1 * var(--bs-gutter-y)); margin-right: calc(-.5 * var(--bs-gutter-x)); margin-left: calc(-.5 * var(--bs-gutter-x)); margin-bottom: 20px;}
.statusreport .content-panel.card.entitylist-filter li.entitylist-filter-option-group.list-inline-item .entitylist-filter-option-text {width: 100%; flex-wrap: nowrap;}
.statusreport .content-panel.card.entitylist-filter ul.list-inline label.entitylist-filter-option-group-label {display: block; margin-bottom: 8px; margin-top: 0; color: #333; font-size: 14px; font-weight: 600;}
.statusreport .content-panel.card.entitylist-filter ul.list-inline span.input-group-text,
.statusreport .content-panel.card.entitylist-filter ul.list-inline span.input-group-addon {min-height: 42.6px; display: flex; align-items: center; border-radius: 6px 0 0 6px;}
.statusreport .content-panel.card.entitylist-filter ul.list-inline .form-control {padding: 8px 14px; min-height: 42.6px; border: 1px solid #bbb;}
.statusreport .view-toolbar.grid-actions {padding: 0 0 15px;}
.statusreport .view-grid.table-responsive table.table.table-striped tr th {width: auto !important; min-width: 100px;}
.statusreport .view-toolbar.grid-actions .btn-info {background: var(--monysoft-color-primary); color: white; border: none; padding: 9px 14px; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: all 0.3s ease; box-shadow: 0 2px 4px rgb(104 192 249 / 20%);}
.statusreport .view-toolbar.grid-actions .btn-info:hover:not(:disabled) {background: var(--monysoft-color-dark); transform: translateY(-1px); box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);}
.statusreport .view-toolbar.grid-actions .btn-info:disabled {background: #6c757d; color: #fff; cursor: not-allowed; opacity: 0.6; transform: none;}

@media (max-width: 991.98px) {
.statusreport .content-panel.card.entitylist-filter li.entitylist-filter-option-group.list-inline-item {width: 50%;}
.action-buttons.return {display: block;}
.action-buttons.return button {margin: 10px 0; width: 100%;}
}
@media (max-width: 767.98px) {
.statusreport .form-section {padding: 16px;}
.statusreport .input-wrapper {width: 100%;}
.statusreport .action-buttons {flex-direction: column;}
.statusreport .btn-view-report, .statusreport .btn-reset {width: 100%; justify-content: center;}
}
@media (max-width: 575.98px) {
.statusreport .content-panel.card.entitylist-filter li.entitylist-filter-option-group.list-inline-item {width: 100%;}
}
@media (max-width: 479.98px) {
.statusreport .date-range-wrapper {align-items: flex-start;}
.statusreport .date-range-inputs {width: 100%; flex-wrap: wrap;}
.statusreport .date-select, .statusreport .month-select {width: 48%;}
.statusreport .date-separator {width: 100%; text-align: center;}
.statusreport .view-toolbar.grid-actions .btn-info {margin: 5px 0 !important; width: 100%;}
.statusreport .view-toolbar.grid-actions .toolbar-actions {display: block !important; float: none !important;}
.statusreport .view-toolbar.grid-actions .toolbar-actions .input-group {width: 100% !important;}
}

/*==================== Import Invoice ====================*/
p.invoice-upload {color: #444; font-size: 14px;}
.chooseFile button {width: auto; padding: 10px 40px 10px 20px; cursor: pointer; background-color: #f5f5f5; border: 1px solid #bbb; border-radius: 6px; font-size: 14px; color: #333;}
.chooseFile button:hover {background-color: #e9ecef; border-color: #999;}
.chooseFile button span {color: #666; font-size: 14px;}


/*==================== Loader ====================*/
/* custom css for loader*/
#loader {
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(255,255,255,0.8);
    z-index: 9999;
    display: none;
}

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

#loader::after {
    content: '';
    display: block;
    position: absolute;
    left: 48%;
    top: 40%;
    width: 100px;
    height: 100px;
    border-style: solid;
    border-color: #3498db;
    border-top-color: transparent;
    border-width: 7px;
    border-radius: 50%;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}