:root {
    --body-bg: #dcdcdc;
    --white-color: #fff;
    --black-color: #000;
    --text-color1: #231E1E80;
    --text-color2: #231E1E;
    --text-color3: #2D2E2A;
    --text-color4: #4E5247;
    --text-color5: #64695C;
    --text-color6: #757575;
    --font-Inter: "Inter", sans-serif !important;
}

body {
    background: var(--body-bg);
    font-family: var(--font-Inter) !important;
}

@keyframes moveBorder {
    0% {
        width: 0;
    }

    100% {
        width: 100%;
    }
}

/* fonts sizing */
.fs-7 {
    font-size: 0.825rem;
}

.fs-8 {
    font-size: 0.75rem;
}


.error-indicator {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background-color: #FDCFB4;
    width: 0;
}

.error-indicator.active {
    animation: moveBorder 5s linear forwards;
}



.login-page .card {
    border-radius: 8px;
    border: 1px solid #E9EAEB;
    background: #FFF;
    box-shadow: 0px 4px 16px 0px rgba(78, 78, 78, 0.05), 0px 0px 8px 0px rgba(78, 78, 78, 0.10);
    padding: 20px;
}

.mb_30 {
    margin-bottom: 30px;
}

.heading1 h1 {
    font-weight: 600;
    font-size: 32px;
    line-height: 40px;
}

.heading1.follow-instructions h1 {
    font-size: 24px;
    font-weight: 600;
    line-height: 40px;
}

.cursor-pointer {
    cursor: pointer;
}

.form-control,
.form-select {
    height: 40px;
}

input[type="checkbox"] {
    accent-color: black;
}

/* input[type="radio"] {
    background-color: black;
    accent-color: black;
} */


.login-form .form-control {
    font-size: 11px;
    font-weight: 400;
}

.login-page .form-control:focus {
    background-color: inherit;
    border-color: inherit;
    box-shadow: none;
}

.zoomed-out {
    transform: scale(0.9);
    /* 80% of original size */
    transform-origin: top left;
    /* Optional: control the anchor point */
}


.login-page p {
    font-weight: 400;
    font-size: 14px;
    color: var(--text-color2);
    line-height: 150%;
}

.changes {
    padding: 4px 8px;
}

.forgot-password a {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-color1);
    text-decoration: none;
}

.continuewithemail .btn-primary {
    background: #c8c7c7;
    border-radius: 4px;
    padding: 10px 8px;

    font-weight: 600;
    font-size: 12px;
    color: #fff;
    border: 1px solid #c8c7c7;
}

.dashboard-page {
    position: relative;
    margin-top: 68px;
}

.content-part {
    position: absolute;
    right: 0;
    left: 0;
    top: 100px;
}

.sidebar {
    position: fixed;
    height: 100vh;
    overflow: auto;
    left: 0;
    width: 250px;
    transition: width 0.3s ease;
}

.sidebar.closed {
    width: 0;
    display: none;
}

.body_container {
    width: calc(100% - 250px);
    position: absolute;
    right: 0;
    left: 250px;
    transition: width 0.3s ease;
}

.body_container.fullwidth .header_top .sidebar-toggle {
    left: 20px !important;
}

.body_container.fullwidth {
    width: 100%;
    left: 0;
}

.sidebar::-webkit-scrollbar {
    display: none;
}

.continuewithemail .btn-primary:hover {
    background-color: #0a0909b2;
    border: 1px solid #0a0909b2;
}

.login-another-way h6 {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-color2);
}

.login-another-way .btn-dark {
    border: 1px solid #D2D2E980;
    border-radius: 4px;
    background-color: #fff;

    font-weight: 600;
    font-size: 12px;
    color: var(--text-color2);
    padding: 10px 8px;
}

.login-another-way .btn-dark:hover {
    background-color: inherit;
    border: 1px solid var(--black-color);
    color: var(--black-color);
}

.signup h6,
.signup a {
    font-weight: 400;
    font-size: 14px;
    color: var(--text-color2);
}

.login-form img {
    cursor: pointer;
}

.forgot-back {
    position: absolute;
    bottom: 80px;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.forgot-back h6 {
    font-weight: 400;
    font-size: 14px;
    color: var(--text-color2);
}

.forgot-back a {
    font-weight: 600;

    font-size: 14px;
    color: var(--text-color1);
}

.follow-page h2 {
    font-weight: 600;
    font-size: 24px;
    color: var(--text-color2);
}

.follow-page p {
    font-size: 13px;
    color: var(--text-color2);
}

.follow-instructions a {
    color: var(--text-color2);
}

.sidebar-header {
    justify-content: inherit;
    padding: 8px 10px;
}

.sidebar-header li {
    list-style-type: none;
}

.sidebar-nav .nav-link,
.sidebar-header .nav-link {
    font-weight: 400;
    color: var(--text-color3);
    font-size: 14px;
    padding: 8px 10px;
}

.sidebar-nav .nav-title {
    font-weight: 600;
    color: var(--text-color4);
    font-size: 10px;
}

.nav-group.show.active .nav-link.nav-group-toggle {
    margin-bottom: 2px;
}

.nav-group.show.active .nav-link.nav-group-toggle,
.sidebar-nav .nav-group>.nav-group-toggle:hover,
.sidebar-nav .nav-link:hover,
.sidebar-nav .nav-link.active,
.sidebar-header .nav-link:hover,
.sidebar-header .nav-link.active {
    background-color: var(--text-color5);
    color: var(--white-color);
}

.sidebar-nav .nav-link.active .nav-icon,
.sidebar-nav .nav-link:hover .nav-icon {
    color: var(--text-white);
}

.sidebar-nav .nav-group.show>.nav-group-toggle:after,
.sidebar-nav .nav-group>.nav-group-toggle:hover:after {
    background: #fff
}

.nav-group.show.active .nav-link.nav-group-toggle img,
.sidebar-nav .nav-link:hover img,
.sidebar-nav .nav-link.active img,
.sidebar-header .nav-link:hover img,
.sidebar-header .nav-link.active img {
    filter: brightness(0) invert(1);
}

.sidebar-nav svg.nav-icon,
.sidebar-header svg.nav-icon {
    width: 20px;
    height: 20px;
    color: var(--text-color4);
}

.sidebar-nav .nav-link:hover svg.nav-icon,
.sidebar-nav .nav-link.active svg.nav-icon,
.sidebar-header .nav-link:hover svg.nav-icon,
.sidebar-header .nav-link.active svg.nav-icon {
    color: var(--text-white);
}

.sidebar-header .nav-link {
    display: block;
    border-radius: .375rem;
}

.sidebar-header .nav-link svg.nav-icon {
    margin-right: 9px;
}

.user-header .sidebar-brand {
    display: flex;
}

.user-header .sidebar-brand img {
    width: 50px;
    height: 50px;
    border-radius: 100px;
    margin-right: 10px;
}

.user-header h5 {
    font-weight: 600;
    color: var(--black-color);
    line-height: 10px;
    font-size: 14px;
}

.dropdown-item.active,
.dropdown-item:active {
    color: var(--cui-dropdown-link-color) !important;
    background-color: #fff !important;

}

.user-header span.user-role {
    font-weight: 500;
    font-size: 12px;
    color: var(--text-color6);
    text-transform: uppercase;
}

.user-header .sidebar-brand {
    text-decoration: none;
}

.top-header a.header-link {
    background-color: #fff;
    border-radius: 5px;
    padding: 10px 7px;
    top: 11px;
    right: 16px;
    position: fixed;
}

.body_container.fullwidth .top-header a.header-link {
    left: 96%;
}

.top-header a.header-link svg {
    width: 24px;
    height: 24px;
    color: #2E374C;
}

.icon-menu {
    position: absolute;
    right: 15px;
    top: 14px;
    width: 39px !important;
    height: 40px !important;
    border-radius: 7px;
    padding: 5px;
    cursor: pointer;
    z-index: 1;
    display: none;
}

.mobile.d-none {
    display: block !important;
}

.top-header a.header-link.active,
.top-header a.header-link:hover {
    background-color: #fff;
}

.top-header a.header-link.active svg,
.top-header a.header-link:hover svg {
    color: #C1C7CD;
}

.top-header {
    padding: 9px 20px
}

.top-header .badge {
    position: absolute;
    right: 9px;
    top: 6px;
    border-radius: 100px;
}

.header_top {
    min-height: 68px;
    background: #00000014;
    position: fixed;
    width: 100%;
    z-index: 2;
}

.page-header .btn {
    position: relative;
}

.page-header {
    height: 215px;
    /* background-color: #64695C; */
    position: relative;
    background: url('../image/header-img.png') no-repeat center center;
    background-size: cover;
    padding: 30px 24px;
}

.page-header::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, #64695C 0%, rgba(100, 105, 92, 0.00) 100%);
}

.page-header h3 {
    font-weight: 500;
    font-size: 32px;
    color: var(--white-color);
}

.page-header span {
    font-size: 14px;
    font-weight: 400;
    color: #fff;
}

/* drop down react toggle remove icon  */
.no-caret::after {
    display: none !important;
}


.table-style {
    height: 400px;
    overflow-y: auto;
    overflow-x: auto;
    scrollbar-color: #DADADA #EEE;
}

.scroll-hidden {
    overflow-y: auto;
    scrollbar-width: thin;
    /* For Firefox */
    scrollbar-color: #A0A0A0 transparent;
    /* thumb + track */
}

/* For WebKit (Chrome, Safari) */
.scroll-hidden::-webkit-scrollbar {
    width: 6px;
}

.scroll-hidden::-webkit-scrollbar-track {
    background: transparent;
    /* hide the track */
}

.scroll-hidden::-webkit-scrollbar-thumb {
    background-color: #A0A0A0;
    /* scrollbar thumb */
    border-radius: 4px;
}

.scroll-hidden::-webkit-scrollbar-button {
    display: none;
    /* remove arrows */
}

th,
td {
    white-space: nowrap;
}

.scroll-hidden::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari */
}

.table-layout .table-header h5 {
    font-weight: 600;
    font-size: 13.65px;
    color: #181D27;
    float: left;
}

.table-layout .table-header .btn {
    font-weight: 500;
    font-size: 10.24px;
    color: #181D27;
    float: right;
    background-color: inherit;
    text-decoration: underline;
    border: none;
}

.table-second-header h5 {
    font-weight: 600;
    font-size: 11.95px;
    color: #535862;
    float: left;
    line-height: 21px;
}

.table-second-header span {
    font-weight: 600;
    font-size: 13.65px;
    color: #535862;
    float: right;
}

.table-body h5,
.table-body p {
    font-weight: 500;
    font-size: 10.75px;
    color: #181D27;
    padding-bottom: 10px;
}

.table-body h5 {
    float: left;
    line-height: 7px;
}

.table-body p {
    float: right;
    line-height: 0;
}

.row-table {
    padding: 10px 10px 25px 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #E0E0E0;
}

.table-body h6 {
    font-weight: 500;
    font-size: 12.75px;
    color: #181D27;
    float: left;
    line-height: 17px;
}

.table-body h6 span {
    font-weight: 500;
    font-size: 10.75px;
    color: #181D27B2;
}

.page-header .btn {

    font-weight: 600;
    font-size: 12px;
    color: #3D3D3D;
    border-radius: 4px;
    align-content: center
}

.icon_button {
    position: absolute;
    top: 29%;
    left: 28%;
}

.table thead th,
.table tbody th {
    color: #202020;
    font-size: 12px;
    font-weight: 700;
    background-color: #fafafa;
}

.table tbody td,
.table thead th {
    align-content: center;
    text-align: center;
}

.table tbody td {
    font-weight: 500;
    padding-top: 10px !important;
    font-size: 14px;
}

.table tbody td:first-child,
.table thead th:first-child {
    text-align: left;
}

.table_bottom .btn {
    display: flex;
    color: var(--Gray-700, #414651);
    font-size: 14px;
    background-color: #fff;
}

.table tbody td p {
    font-size: 14px;
    font-weight: 400;
}

.user_table {
    padding: 6px 4px;
    border-radius: 6px;
    border: 1px solid #E7E5E4;
    box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
    text-align: left;
    align-items: center;
}

p.user_table img {
    float: left;
    margin-top: -4px;
}

.user_border_none,
.user_table.dashboard-1 {
    border: none;
    box-shadow: none;
}

p.user_table.dashboard-1 img {
    margin-top: 0;
}

.status-active {
    font-size: 12px;
    border-radius: 6px;
    border: 1px solid #E7E5E4;
    box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
    padding: 2px 10px 2px 20px;
    position: relative;
    color: #6C6460;
}

.status-active::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 100px;
    background-color: #95BF0B;
    position: absolute;
    top: 30%;
    left: 8px;
}

.status-inactive {
    font-size: 12px;
    border-radius: 6px;
    border: 1px solid #E7E5E4;
    box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
    padding: 2px 10px 2px 20px;
    position: relative;
    color: #6C6460;
}

.status-inactive::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 100px;
    background-color: #ff2323;
    position: absolute;
    top: 30%;
    left: 8px;
}

.actionpopup {
    width: 110px;
    height: auto;
    padding: 0;
    margin: 0;
    border-radius: 4px;
    background: -var(--body-bg);
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.30), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
    z-index: 1;
}

.form-select:focus {
    border-color: #00000040;
    outline: 0;
    box-shadow: 0 0 0 .25rem #00000040;
}

.form-select:focus {
    border-color: #00000040;
    outline: 0;
    box-shadow: 0 0 0 .25rem #00000040;
}

.form-control:focus {
    border-color: #00000040;
    outline: 0;
    box-shadow: 0 0 0 .25rem #00000040;
}

.form-check-input:checked {
    background-color: black;
    border-color: #000000;
    box-shadow: none
}

.pagination {
    margin: 0 auto;
}

.pagination button {
    width: 35px;
    height: 35px;
    border-radius: 8px;
    color: #535862;
    border: inherit;
}

h5.card-title {
    font-weight: 500;
    font-size: 18px;
    color: #242424;

}

.pagination button.active,
.pagination button:hover {
    background: #FAFAFA;
    color: #252B37;
}

.table_header .btn img {
    float: inline-start;
    margin-right: 3px;
}

.table_header .btn,
table button {
    color: #242424;
    font-weight: 500;
    font-size: 14px;
    height: fit-content;
}

.sidebar-toggle {
    position: absolute;
    top: 18px;
    left: -15px;
    box-shadow: 0px 4px 16px 0px rgba(78, 78, 78, 0.05), 0px 0px 8px 0px rgba(78, 78, 78, 0.10);
    background: #EFF1ED;
    border-radius: 4px;
    padding: 4px;
}

.search_box .form-control,
.search_box .input-group-text {
    border: inherit;
    background-color: inherit;
    font-size: 14px;
    color: #616161;
}

.mp-0 .mb-lg-3 {
    margin-bottom: 0 !important;
}

.search_box {
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.14), 0px 0px 3px 0px rgba(0, 0, 0, 0.12);
    border-radius: 4px;
    width: 215px;
    height: fit-content;
}

.search_box .form-control:focus {
    box-shadow: none;
}

.popup-overlay::after {
    width: auto;
    content: '';
    position: fixed;
    background: rgba(0, 0, 0, 0.096);
    backdrop-filter: blur(5px);
    top: 0;
    bottom: 0;
    left: 250px;
    right: 0;
    z-index: 4;
    height: 100vh;
}

.body_container.fullwidth .popup-overlay::after,
.body_container.fullwidth .popup-overlay .popup {
    left: 0;
}

.after {
    position: relative;
}

.after::before {
    content: '';
    position: absolute;
    background-color: #eee;
    width: 1px;
    height: 40px;
    right: -9px;
    top: -5px;
}

.filter .mb-3 {
    margin-bottom: 0 !important;
}

.filter .mb-3 label {
    display: none;
}

.popup {
    background-color: var(--white-color);
    width: clamp(300px, 80vw, 750px);
    position: fixed;
    top: 12%;
    z-index: 999;
    border-radius: 8px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease-in-out;
}

/* custompopup */
.custompopup {
    background-color: var(--white-color);
    position: fixed;
    top: 35%;
    left: 45%;
    transform: translateX(-50%);
    z-index: 999;
    width: clamp(300px, 80vw, 750px);
    /* FIXED */
    max-height: 60vh;
    border-radius: 8px;
    overflow-y: auto;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
    transition: 0.2s ease-in-out;
}


/* .popup-body {    previously used height: 350px; overflow: auto; }
    overflow: auto;
    height: 350px;
} */

.popup-body {
    overflow-y: auto;
    max-height: 70vh;
    padding: 20px;
}

.popup-header {
    border-bottom: 1px solid #eee;
}

.popup-body,
.popup-footer,
.popup-header {
    padding: 12px 20px;
}

.popup-footer {
    border-top: 1px solid #eee;
}

.popup-header h5 {
    color: #181D27;
    font-size: 20px;
    font-weight: 600;
}

label {
    color: #616161;
    margin-bottom: 5px;
}

label,
.form-control,
select,
.form-select {
    font-size: 12px;
    font-weight: 500;

}

.top-10 {
    top: -10px;
}

.popup .top-1 {
    top: -1px;
}

.form-control,
.form-select,
textarea {
    color: #4F4F4F;
    border-radius: 4px;
    background: #F5F5F5;
    height: auto;
}

.bg-form {
    background: #F5F5F5;
    border-radius: 4px;
    padding: 8px;
}

.bg-form h6 {
    color: #393939;
    font-size: 12.6px;
    font-weight: 500;
}

.form p {
    color: #535862;
    font-size: 14px;
    font-weight: 400;
}

.btn {
    font-size: 14px;
    font-weight: 500;
    border-radius: 4px;
    padding: 8px 15px;
}

.btn-edit {
    color: #4E5247;
    background: #EFF1ED;
}

.btn-edit img {
    float: inline-start;
}

.input-group-text {
    color: #4E5247;
    font-size: 14px;
    font-weight: 500;
    border: 0;
    border-radius: 4px;
    padding: 8px 10px;
}

.form-style label {
    color: #242424;
    font-size: 14px;
    font-weight: 400;
}

.popup-footer .btn {
    padding: 9px 20px;
    font-size: 14px;
    font-weight: 500;
}

.btn-outline-dark {
    color: #4E5247;
}

.btn-dark {
    background-color: #4E5247;
    border-color: #4E5247;
}

.bg-form h6 span {
    font-weight: 400;
    color: #C0C2BF;
    font-weight: 400;
}


.user_border .user_table {
    border: none;
    box-shadow: none;
}

.form .table tbody td p {
    font-weight: 500;
    color: #1B1918;
}

.delete-button {
    color: #CB1316;
    border: 1px solid #CB1316;
}

.delete-button:hover {
    background-color: #CB1316;
    color: #fff;
}

.icon-delete {
    width: 84px;
    height: 84px;
    padding: 16px 15.5px 16px 16.5px;
    justify-content: center;
    align-items: center;
    border-radius: 93.333px;
    background: #64695C;
    margin: 0 auto;
}

.delete-modal {
    text-align: center;
}

.delete-modal h4 {
    color: #231E1E;
    font-size: 24px;
    font-weight: 600;
}

.delete-modal p {
    color: #231E1E;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.delete-modal .popup {
    width: 475px;
}

.height-100 {
    height: 100vh;
}

.dropdown-icon {
    position: absolute;
    top: 7px;
    right: 3px;
}

.mb_0 .mb-3 {
    margin-bottom: 0 !important;
}

.usertype .form-select {
    padding: 6px 8px;
    border-radius: 4px;
    border: 1px solid #A8ADA1;
    background-color: inherit;
    font-weight: 500;
    color: #242424;
}

.usertype .dropdown-icon {
    top: 7px;
    right: 3px;
}

.clearall {
    color: rgba(36, 36, 36, 0.50);
    font-weight: 500;
    text-decoration: underline;
}

.table_font12 .table th {
    font-size: 12px;
}

.text_start .table tbody td p span {
    font-weight: 500;
}

.font_category td:nth-child(2) {
    font-weight: 700;
}

.text_start td:nth-child(5),
.text_start th:nth-child(5),
.text_start td:nth-child(9),
.text_start th:nth-child(9),
.text_start td:nth-child(8),
.text_start th:nth-child(8),
.text_start td:last-child,
.text_start th:last-child {
    text-align: center !important;
}

.text-color2,
.text-color1,
.text-color3 {
    padding: 2px 8px;
    border-radius: 16px;
    font-size: 12px;
}

.text-color2 {
    border: 1px solid #B2DDFF;
    background: #EFF8FF;
    color: #175CD3;
}

.text-color1 {
    border: 1px solid #E9D7FE;
    background: #F9F5FF;
    color: #8C4FD6;
}

.text-color3 {
    border: 1px solid #ABEFC6;
    background: #ECFDF3;
    color: #067647;
    font-weight: 500;
    float: inline-start;
    width: 100%;
    text-align: center;
    margin-left: .5rem;
}

.text-color3,
.text-color4,
.text-color5 {
    padding: 2px 8px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    text-align: center;
    margin-left: .5rem;
    float: inline-start;
    white-space: nowrap;
}

/* ✅ Normal */
.text-color3 {
    border: 1px solid #ABEFC6;
    background: #ECFDF3;
    color: #067647;
}

/* 🔴 High */
.text-color4 {
    border: 1px solid #FECACA;
    background: #FEF2F2;
    color: #B91C1C;
}

/* 🔵 Low */
.text-color5 {
    border: 1px solid #BFDBFE;
    background: #EFF6FF;
    color: #1D4ED8;
}

/* ✅ Shared icon styles */
.text-color3 img,
.text-color4 img,
.text-color5 img {
    width: 14px;
    height: 14px;
    margin-top: -2px;
    display: inline-block;
}


.text-color3 img {
    margin-right: 3px;
    margin-top: -2px;
    display: inline-block;
}

.priority-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 4px;
    margin-top: -2px;
    background-color: currentColor;
    /* Dynamically from icon-colorX */
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Color classes */
.icon-color3 {
    background-color: #067647;
}

.icon-color4 {
    background-color: #B42318;
}

.icon-color5 {
    background-color: #175CD3;
}

.associations .table .user_table {
    display: flex;
    float: inline-end;
}

.user-img {
    background-color: #F5F5F5;
    width: 96px;
    height: 96px;
    border-radius: 100%;
    padding: 30px;
}

.collapse.show {
    visibility: visible;
}

.user-img img {
    margin: 0 auto;
}

.text_start .table tbody td,
.text_start .table thead th {
    text-align: left !important;
}

.button-upload {
    padding: 10px 16px;
    display: inline-flex;
    color: #4E5247;
    border-radius: 4px;
    background: #EFF1ED;
    font-size: 14px;
}


.draganddrop h5 {
    color: #0F0F0F;
    font-size: 24px;
    font-weight: 400;
}

.draganddrop h6 {
    font-size: 18px;
    font-weight: 500;
}

.draganddrop p {
    color: #676767;
    font-size: 12px;
    font-weight: 400;
}

.event-timeline .event-heading {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #EFF1ED;
    font-weight: 500;
}

.add-button .btn {
    background: #EFF1ED;
    color: #4E5247;
}

.event-list .btn {
    border-radius: 8px;
    border: 1px solid #DADADA;
    padding: 12px 14px;
}


.form-control:focus {
    outline: none;
    box-shadow: none;
}

.form-control:focus {
    border-color: #ced4da;
    /* default gray */
    box-shadow: none;
}


input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    height: 8px;
    background: linear-gradient(to right, #2196f3 0%, #2196f3 50%, #ddd 50%, #ddd 100%);
    border-radius: 5px;
    outline: none;
}

/* Chrome, Safari, Edge – Thumb */
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: #2196f3;
    cursor: pointer;
    margin-top: -6px;
    /* align center */
    border: none;
}

/* Firefox – Thumb */
input[type=range]::-moz-range-thumb {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: #2196f3;
    cursor: pointer;
    border: none;
}

/* Firefox – Track */
input[type=range]::-moz-range-track {
    height: 8px;
    background: #ddd;
    border-radius: 5px;
}

/* Firefox – Filled Track */
input[type=range]::-moz-range-progress {
    height: 8px;
    background: #2196f3;
    border-radius: 5px;
}











.event-timeline p {
    color: #616161;
}

.event-timeline .event-list p span {
    padding: 11px;
    border-radius: 60px;
    background: #EFF1ED;
    font-size: 12px;
    font-weight: 600;
}

.event-timeline {
    border-left: 1px solid #C0C4B9;
    padding-left: 30px;
    margin-left: 20px;
}

.add-button,
.event-list {
    position: relative;
}

.add-button::before,
.event-list::before {
    content: '';
    position: absolute;
    left: -46.3px;
    top: 5px;
    width: 32px;
    height: 32px;
    padding: 6px 5.5px 6px 6.5px;
    border-radius: 39.024px;
    z-index: 2;
}

.icon_plus {
    position: absolute;
    filter: brightness(0) invert(1);
    left: -40px;
    top: 11px;
    z-index: 3;
}

.add-button::before {
    background: #64695C;
    border: 1px solid #64695C;
}

.event-list::before {
    border: 1px solid #64695C;
    background: #fff;
    top: 10px;
}

.badge-dark {
    background-color: #0F0F0F;
    border-radius: 4px;
    padding-top: 7px;
    padding-bottom: 7px;
}

.page-sidebar p.message {
    color: #2D2E2A;
    font-size: 11px;
    font-weight: 400;
    padding: 8px;
    border-radius: 4px;
    background-color: #eff1ed;
}

.page-sidebar h6 {
    color: #616161;
    font-size: 14px;
    font-weight: 500;
}

.page-sidebar h6 span {
    font-weight: 500;
    color: #242424;
}

.page-sidebar h5 {
    font-size: 16px;
    color: #616161;
    font-weight: 600;
}

.page-sidebar h5 span {
    color: #242424;
}

.reporttable th {
    font-size: 16px;
    color: #181D27;
    font-weight: 600;
}


.reporttable h5 {
    font-size: 20px;
    color: #181D27;
    font-weight: 600;
}

.reporttable td {
    font-weight: 500;
    font-size: 14px;
}

.reporttable td,
.reporttable th {
    color: #1B1918;
}

.after.right_6::before {
    right: -6px;
}

.page-sidebar ul.nav li.nav-item {
    width: 100%;
    display: block;
}

.page-sidebar ul.nav {
    border: 0;
}

.page-sidebar ul.nav li.nav-item a.nav-link {
    color: #7A8072;
    font-size: 14px;
    font-weight: 400;
    border: 0;
    width: 100%;
    border: 1px solid #fff;
    display: inline-flex
}

.page-sidebar ul.nav li.nav-item a.nav-link:hover,
.page-sidebar ul.nav li.nav-item a.nav-link.active {
    color: #fff;
    border-radius: 4px;
    border: 1px solid #919689;
    background: #64695C;
}

.page-sidebar ul.nav li.nav-item a.nav-link:hover img,
.page-sidebar ul.nav li.nav-item a.nav-link.active img,
.page-sidebar.settings ul.nav li.nav-item:last-child a.nav-link:hover img,
.page-sidebar.settings ul.nav li.nav-item:last-child a.nav-link.active img {
    filter: brightness(0) invert(1);
}

.page-sidebar ul.nav li.nav-item:last-child a.nav-link:hover img,
.page-sidebar ul.nav li.nav-item:last-child a.nav-link.active img {
    filter: none;
}

.security p {
    color: #616161;
    font-size: 15px;
    font-weight: 500;
}

.security .btn-light {
    border-radius: 4px;
    background: #EFF1ED;
    border-color: #EFF1ED;
    font-weight: 500;
    color: #4E5247;
    padding: 5px 16px;
}

.security h5 {
    font-size: 18px;
    font-weight: 600;
}

.end .end {
    float: inline-end;
}

.notification_bar {
    position: absolute;
    top: 67px;
    right: 273px;
    bottom: 20px;
    margin: 0 auto;
    width: 355px;
    max-height: calc(100vh - 87px);
    height: fit-content;
    background-color: #fff;
    z-index: 2;
    border-radius: 5px;
    overflow: auto;
}

.body_container.fullwidth .notification_bar {
    right: 32px;
}

.notification_bar::-webkit-scrollbar {
    display: none;
}

.notification_bar h5 {
    font-size: 16px;
    color: #141414;
    font-weight: 600;
}

.noticount {
    border-radius: 15px;
    font-size: 14px;
    font-weight: 500;
    background-color: #474747;
}

.noticount .mark {
    font-weight: 500;
    font-size: 12px;
    color: #474747;
}

.bg-color1 {
    background: #EFF1ED;
    border-bottom: 1px solid #DCDEE4;
    border-top: 1px solid #DCDEE4;
}

.notification_bar .badge.badge-dark {
    border-radius: 20px;
    background: #4E5247;
    padding: 11px 6px;
    width: 35px;
    height: 35px;
    font-size: 14px;
    font-weight: 600;
}

.notification_bar h6 {
    color: #141414;
    font-size: 12px;
    font-weight: 600;
}

.notification_bar .time,
.notification_bar p.subtext,
.notification_bar p.comment {
    color: #696F8C;
    font-size: 12px;
    font-weight: 500;
}

.notification_bar p.subtext {
    line-height: 18px;
}

.notification_bar p.comment {
    padding: 8px 12px;
    border-left: 2px solid #4E5247;
}

.label-moves {
    position: absolute;
    top: 52px;
    font-weight: bold;
    background-color: #000000cc;
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    user-select: none;
    pointer-events: none;
    white-space: nowrap;
}

.form-range:focus {
    outline: none;
    box-shadow: none;
}

.form-range {
    height: inherit;
}


.slider {
    width: 100%;
}

.slider::-webkit-slider-thumb {
    cursor: pointer;
}

.font-13 {
    font-size: 13px !important;
}

.font-12 {
    font-size: 12px !important;
}

.font-12 table th,
.font-12 table td {
    font-size: 12px;
}

.table tbody td p {
    font-size: 13px;
}

.second-left .table th:nth-child(2),
.second-left .table td:nth-child(2) {
    text-align: left !important;
}

.bg-dark,
.btn-dark {
    background-color: #4E5247 !important;
    border-color: #4E5247 !important;
}

.box-2 {
    border-radius: 0px 8px 8px 0px;
    background: #EFF1ED;
    padding: 50px 32px;
}

.box-1 {
    border-radius: 8px 0px 0px 8px;
    background: rgba(239, 241, 237, 0.20);
    padding: 20px 15px;
}

.unit_count {
    color: #1B1918;
    font-size: 16px;
    font-weight: 700;
    line-height: 25px;
}

.box-1 h6,
.box-3 h6 {
    color: #1B1918;
    font-size: 20px;
    font-weight: 500;
    line-height: normal;
}

.box-1 h5 {
    color: #1B1918;
    font-size: 52px;
    font-weight: 600;
}

.box-1 h5 span {
    color: #1B1918;
    font-size: 17px;
    font-weight: 600;
    text-transform: uppercase;
}

p.bg-1 {
    border-bottom: 1px solid #E0E0E0;
    background: #F0F0F0;
    font-size: 10px;
    text-overflow: ellipsis;
    color: #242424;
    font-weight: 400;
    padding: 5px 0;
}

p.annually {
    color: rgba(0, 0, 0, 0.70);
    font-size: 12px;
    font-weight: 500;
}

.box-2 h6 {
    color: #000;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 24px;
}

.box-2 li {
    color: rgba(0, 0, 0, 0.70);
    font-size: 16px;
    margin: 8px 0;
    font-weight: 500;
}

.box-2 li svg {
    margin-right: 14px;
}

.box-3 .badge {
    border-radius: 4px;
    font-weight: 500;
    font-size: 10px;
    letter-spacing: 0.08px;
    text-transform: uppercase;
}

.text-body p.label {
    color: #616161;
    font-size: 14px;
    font-weight: 400;
    margin: 4px 0;
}

.text-body p.value {
    color: #242424;
    margin: 4px 0;
    font-size: 14px;
    font-weight: 500;
}

.Units {
    color: #181D27;
    font-size: 16px;
    font-weight: 600;
}

.graph span {
    color: #767676;
    font-size: 14px;
    font-weight: 600;
}

span.bold {
    color: #404040;
}

tspan.total {
    color: #404040;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
}

tspan.number {
    color: #404040;
    font-size: 40px;
    font-weight: 600;
}

th input[type="checkbox"],
td input[type="checkbox"] {
    width: 14px;
    height: 14px;
}

.carousel p.span {
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.20);
    backdrop-filter: blur(22px);
    padding: 3px 15px;
    width: fit-content;
    margin: 0 auto;
}

.carousel h5 {
    color: #fff;
    font-size: 38px;
    font-weight: 600;
}

.carousel p.slider-content {
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    line-height: 140%;
}

.carousel-caption {
    top: 65px;
    left: 25%;
    right: 25%;
}

.carousel-indicators button {
    width: 52px;
    height: 8px;
    border-radius: 6666px;
    background: #919689;
    border: inherit;
    margin: 0 2px;
}

.carousel-indicators button.active {
    width: 112px;
    background: #fff;
}


.table_header .form-select {
    border-radius: 4px;
    border: 1px solid #A8ADA1;
    height: 42px;
    font-weight: 500;
    color: #242424;
    font-size: 12px;
    background-color: #fff;
    margin: 0 5px;
}

.table_header .dropdown-icon {
    top: 9px;
    right: 0px;
}

.table_header .mb-3 {
    margin-bottom: 0 !important;
}

.wait-screen h2 {
    color: #4E5247;
    font-size: 50px;
    font-weight: 700;
}

textarea.form-control {
    height: inherit;
}

.event-list .date-time {
    font-size: 12px;
    color: #727272;
    font-weight: 400;
}

.viewright h6 {
    color: #181D27;
    font-size: 16px;
    font-weight: 600;
}

.viewright .btn {
    padding: 3px 10px;
    font-weight: 500;
    font-size: 13px;
    color: #242424;
    border: 1px solid #242424;
}

.viewright p {
    color: #616161;
    font-size: 14px;
    font-weight: 400;
}

.viewright p span {
    font-weight: 500;
    color: #242424;
}

.dashboard-design p {
    color: #7B809A;
    text-align: right;
    font-size: 12.6px;
    font-weight: 500;
}

.dashboard-design h6 {
    color: #434343;
    text-align: right;
    font-size: 21.6px;
    font-weight: 700;
}

.icon_dashboard {
    border-radius: 7.2px;
    background-color: #4E5247;
    position: absolute;
    left: 9px;
    padding: 8px;
    top: -15px;
}

.icon_dashboard img {
    filter: brightness(0) invert(1);
}

.dashboard-design .btn-dark {
    font-size: 12.2px;
}

.user-dashboard .card-body {
    padding: 1px;
}

.user-dashboard .card .card {
    border: 0;
}

.user-dashboard table tr th,
.user-dashboard table tr td {
    text-align: left;
}

.user-header .sidebar-brand {
    display: inherit;
    white-space: pre-line;
    line-height: 12px;
}

.user-header .sidebar-brand img {
    float: left;
}

.page-sidebar .payment ul.nav li.nav-item a.nav-link {
    padding: 11px 5px !important;
    position: relative;
    font-size: 12px;
}

.page-sidebar .payment ul.nav li.nav-item a.nav-link p {
    display: flex;
    align-items: center
}

.page-sidebar .payment ul.nav li.nav-item a.nav-link p::after {
    content: '';
    background: #D9D9D9;
    width: 1px;
    height: 17px;
    position: absolute;
    left: 19px;
    bottom: -8px;
}

.page-sidebar .payment ul.nav li.nav-item:last-child a.nav-link p::after {
    display: none;
}

.page-sidebar .payment ul.nav li.nav-item a.nav-link,
.page-sidebar .payment ul.nav li.nav-item a.nav-link.active {
    border: inherit;
    color: rgba(0, 0, 0, 0.80) !important;
}

.page-sidebar .payment ul.nav li.nav-item a.nav-link span {
    border: 1px solid #D9D9D9;
    width: 30px;
    height: 30px;
    color: rgba(0, 0, 0, 0.80);
    font-size: 12px;
    font-weight: 400;
    border-radius: 100%;
    margin-right: 10px;
    text-align: center;
    padding: 6px;
}

.page-sidebar .payment ul.nav li.nav-item a.nav-link.active,
.page-sidebar .payment ul.nav li.nav-item a.nav-link:hover {
    background: inherit;
    border: inherit;
    color: #7A8072;
}

.page-sidebar .payment ul.nav li.nav-item a.nav-link.active p span {
    background: #64695C;
    color: #64695C;
}

.page-sidebar .payment ul.nav li.nav-item a.nav-link.active p::before {
    content: '';
    position: absolute;
    top: 16px;
    left: 10px;
    display: block;
    padding: 1px;
    width: 20px;
    height: 20px;
    background: url(../image/icons/Check.png);
    background-size: contain;
}

.page-sidebar .payment ul.nav li.nav-item a.nav-link.active {
    font-weight: 600;
}

.accordion-item .accordion-header .accordion-button {
    background-color: #fff;
    border: none;
    color: #616161;
    font-size: 12px;
    font-weight: 500;
    padding: 10px;
    box-shadow: none;
}

.accordion-item {
    border: none;
}

.accordion-body {
    color: #616161;
    font-size: 14px;
    padding: 3px 10px 0 10px;
}

.accordion-button::after {
    display: none;
}

.accordion-body h6 {
    color: #181D27;
}

.accordion-button:not(.collapsed):after,
.accordion-button:after {
    color: #616161;
}

.accordion-item {
    border-left: inherit;
    border-right: inherit;
    border-top: inherit;
}

.accordion-button:focus {
    box-shadow: none;
}

.accordion-body .popup-body {
    height: 370px;
}

.accordion-body .popup-body .draganddrop .image img {
    width: 107.5px !important;
    height: 107.5px !important;
}

.box {
    padding: 9px 7px 10px 7px;
    border-radius: 8px;
    border: 1px solid #D5D7DA;
    background: #FFF;
    width: -webkit-fill-available;
}

.box h6 span.status-active {
    color: #181D27;
    font-size: 13px;
    font-weight: 600;
    box-shadow: none;
    border: inherit;
    border-radius: inherit;
    padding: inherit;
    padding-left: 13px;
}

.box h6 span.status-active::before {
    width: 8px;
    height: 8px;
    left: 0;
    top: 21%;
}

.box p {
    color: #181D27;
    font-size: 9.2px;
    font-weight: 400;
    line-height: 130%;
    letter-spacing: 0.12px;
}

.status-active.good::before {
    background-color: #B28B17;
}

.status-active.fair::before {
    background-color: #C74D19;
}

.status-active.poor::before {
    background-color: #B31C1C;
}

.status-active.failing::before {
    background-color: #F30C0C;
}

.payment-header h5 span {
    color: #F4F6F9;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.4px;
}

.payment-header h5 {
    color: #F4F6F9;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.1px;
    line-height: 20px;
}

.page-sidebar p {
    margin-bottom: 5px;
    color: #616161;
    font-size: 14px;
    font-weight: 400;
}

.page-sidebar p span {
    color: rgb(0, 0, 0);
    font-weight: 500;
}

.Mastercard {
    border-radius: 6px;
    border: 1px solid #F5F5F5;
    padding: 7px 8px;
}

.newcard {
    position: relative;
}

.newcard input.form-control {
    padding-left: 60px !important;
}

.email-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    max-width: 100%;
    cursor: pointer;
}


.newcard::after {
    content: '';
    position: absolute;
    background: url("/image/icons/visa.svg");
    border-radius: 6px;
    padding: 7px 8px;
    width: 50px;
    height: 30px;
    background-repeat: no-repeat;
    background-position: center;
    top: 32px;
    left: 2px;
}

.workorder table th,
.workorder table td {
    text-align: left;
}

.input-error-border {
    border-color: red !important;
}

.no-filter {
    filter: none !important;
    opacity: 1 !important;
}

.login-page .popup {
    width: 450px;
    left: 0;
    top: 30%;
}

.login-page .popup_centerfix {
    left: auto !important;
}


.login-page .popup-overlay::after {
    left: 0;
}

.login-page .popup-body {
    height: inherit;
}

.login-page .popup .popup-footer .btn.btn-dark {
    display: none;
}

.login-page .popup .popup-footer .btn.btn-outline-dark.me-3 {
    margin-right: 0 !important;
}

.current-value {
    margin-top: 20px;
}

.dropdown-high {
    z-index: 999 !important;
    /* higher than sidebar or other containers */
    position: absolute;
    /* ensures stacking applies */
}

/* design sweetalert 
 */

/* 🔹 Smaller icon (default ~5rem → reduced) */
.swal2-icon {
    transform: scale(0.7);
    /* 50% size */
    margin: 4px auto;
}

/* 🔹 Title font-size (default ~27px) */
.swal2-title {
    font-size: 20px;
    /* match site’s heading scale */
    font-weight: 600;
    /* optional, if headings are bold */
    margin: 4px 0;
}

/* 🔹 Body text (default ~16px–18px) */
.swal2-html-container {
    font-size: 18px;
    /* closer to your average text */
    line-height: 1.4;
    /* keeps it readable */
}

/* 🔹 Buttons (default are a bit bulky) */
.swal2-styled.swal2-confirm,
.swal2-styled.swal2-cancel {
    font-size: 16px;
    /* button text size */
    padding: 6px 14px;
    /* less padding for compact feel */
    border-radius: 4px;
    /* match your site’s buttons */
}

/* carousels css */

.carousel-indicators [data-bs-target] {
    width: 30px;
    height: 6px;
    background-color: rgba(255, 255, 255, 0.4);
    border: none;
    border-radius: 10px;
    transition: all 0.3s ease;
    padding: 0;
}

.carousel-caption {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    top: 0 !important;
    left: 9% !important;
    width: 29.3rem;
}

.maine-image {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: rgba(217, 217, 217, 1);
    border-radius: 1.25rem;
    padding: 0.5rem;
    z-index: 1;
    /*  Ensures this sits above the ::before layer */
}

.maine-image::before {
    content: '';
    position: absolute;
    top: -25%;
    right: 65%;
    border-radius: 1.25rem;
    opacity: 0.3;
    background: #D9D9D9;
    width: 8.625rem;
    height: 7.75rem;
    flex-shrink: 0;
    z-index: -1;
    /*  Keeps this behind .maine-image content */
}

/* tabe under lin */
.underline-bar {
    display: block;
    width: 100%;
    height: 3px;
    border-top-left-radius: 25%;
    border-top-right-radius: 25%;
    background-color: #95BF0B;
    margin: 0 auto;
}

/* ADD SOME ANIMATION TO THE BAR */

.underline-bar {
    animation: underline-bar 1s ease-in-out infinite;

}

.vertical-line {
    width: 2px;
    border-radius: 25%;
}

/* pop delete  model */


.popupNoti {
    background-color: var(--white-color);
    width: clamp(300px, 80vw, 750px);
    position: fixed;
    left: 16.5%;
    right: 0;
    margin: 0 auto;
    top: 25%;
    z-index: 9;
    border-radius: 8px;
    overflow-y: auto;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease-in-out;
}

/* #########################-----Calender---------------########################################## */

.fc-day-today .fc-col-header-cell-cushion {
    color: #000;
    font-weight: 700;
}

.fc-daygrid-day-number {
    text-decoration: none !important;
    color: #000 !important;
}

.fc-daygrid-day-top {
    color: #000 !important;
    display: flex;
    justify-content: left;
    align-items: left;
}

.fc-daygrid-event:hover {
    background: inherit !important;
    cursor: default !important;
}

.fc-daygrid-event:focus {
    box-shadow: none !important;
    outline: none !important;
}

.fc-daygrid-event {
    background: transparent !important;
    border: none !important;
}


/* Subtle borders and clean background */
.fc-theme-standard td,
.fc-theme-standard th {
    border-color: #eaeaea;
}

.fc-scrollgrid {
    border: none !important;
}

.fc-col-header {
    border-bottom: none !important;
}

.fc-scrollgrid-sync-inner {
    text-align: left !important;
}

.fc .fc-col-header-cell-cushion {
    text-decoration: none !important;
}

/* Softer time labels */
.fc-timegrid-slot-label {
    color: #7a7a7a;
    font-size: 12px;
    font-weight: 400;
    padding-right: 8px;
}

/* Compact hour rows */
.fc-timegrid-slot {
    height: 40px !important;
    background-color: rgba(250, 250, 250, 1);
}

/* Event styling */
.fc-event {
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    padding-left: 6px !important;
    color: #fff !important;
    box-shadow: none !important;
}

/* “2 more” link styling */
.fc-more-link {
    font-size: 11px !important;
    color: #777 !important;
    background: #f5f5f5 !important;
    border-radius: 4px;
    padding: 1px 6px;
    display: inline-block;
    margin-top: 2px;
}

/* Remove gray lines at top */
.fc-scrollgrid-sync-inner {
    background-color: #fff !important;
}

.css-19rfed5-MuiStack-root {
    margin-left: 0 !important;
}

.fc-v-event {
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    padding-left: 6px !important;
    color: #fff !important;
    box-shadow: none !important;
    background-color: transparent !important;
    border: 0 !important;
}

/* week view calender */
/* Make event container clean like list */
.fc-timegrid-col-events {
    padding: 0 4px !important;
}

/* Stack events cleanly (no FC overlap) */
.fc-timegrid-event-harness {
    position: relative !important;
    left: 0 !important;
    margin-bottom: 6px !important;
    width: 100% !important;
}

/* Completely remove default FC UI */
.fc-timegrid-event {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.css-5wchs2-MuiDateCalendar-root {
    width: 100% !important;
    height: 100% !important;
}

.custom-calendar-popover .MuiPaper-root {
    position: absolute !important;

    /* 👇 YOUR CUSTOM POSITION HERE */
    top: 40% !important;
    left: 30% !important;

    transform: none !important;

    /* Optional styling */
    border-radius: 12px;
    padding: 8px;
}

/* calender MUI POPUP */
.custom-calendar .MuiPickersDay-today {
    background-color: #000000 !important;
    border: 2px solid #000000 !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    font-weight: 700 !important;
}

.custom-calendar .MuiPickersDay-root.MuiPickersDay-today {
    background-color: #000000 !important;
    /* your color */
    color: rgb(255, 255, 255) !important;
    border-radius: 50% !important;
    border: 1px solid #000000 !important;
}

.custom-calendar .MuiDayCalendar-weekContainer:has(.MuiPickersDay-today) {
    background-color: #eeeeee;
    border-radius: 8px;
    padding: 4px 0;
}

.scroll-hidden1 {
    -ms-overflow-style: none;
    /* Edge */
    scrollbar-width: none;
    /* Firefox */
}

.scroll-hidden1::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari */
}

.css-w6tl5u-MuiPaper-root {
    width: 100% !important;
    height: 100% !important;
}

/* AUTO ARRANGE FORM */
.auto-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.auto-form-grid .form-field {
    display: flex;
    flex-direction: column;
}

.auto-form-grid .form-field.full {
    grid-column: span 2;
}

/* Mobile */
@media (max-width: 768px) {
    .auto-form-grid {
        grid-template-columns: 1fr;
    }

    .auto-form-grid .form-field.full {
        grid-column: span 1;
    }
}


/* notification bar */

.notification-item {
    transition: all 1s ease;
}

.notification-item.removing {
    opacity: 0;
    transform: translateX(16px);
    height: 0;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
}