#header {
    display: flex;
    position: fixed;
    width: 100vw;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    border-bottom: 1px solid #eee;
    padding: 0 40px;
    background-color: #fff;
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.0274509804);
    z-index: 5;
}
#header.in-public {
    padding: 0 100px;
}
#header:not(.in-public) {
    transition: 0.3s;
    width: calc(100vw - 250px);
}
#header .brand-side {
    display: flex;
    align-items: center;
    gap: 15px;
}
#header .brand-side .brand-title {
    font-weight: 500;
    font-size: 25px;
}
#header .brand-side .logo {
    height: 60px;
    max-width: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}
#header .brand-side .logo img {
    width: 100%;
    height: 130%;
    object-fit: contain;
}
#header .notifications-box {
    position: relative;
}
#header .notifications-box .notifications-btn {
    position: relative;
}
#header .notifications-box .notifications-btn .notifications-count {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: red;
    width: 18px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    position: absolute;
    top: 0;
    right: 0;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}
#header .notifications-box .notifications-dropdown {
    position: absolute;
    top: 70px;
    left: 50%;
    translate: -50%;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.0901960784);
    width: 300px;
    opacity: 0;
    scale: 0;
    transition: 0.3s;
    transform-origin: top center;
}
#header .notifications-box .notifications-dropdown.show {
    opacity: 1;
    scale: 1;
}
#header .notifications-box .notifications-dropdown::before {
    content: "";
    border: 10px solid transparent;
    border-bottom-color: #686abe;
    position: absolute;
    top: -20px;
    left: 50%;
    translate: -50%;
}
#header .notifications-box .notifications-dropdown .top {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    background-color: #686abe;
    color: #fff;
    border-radius: 10px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding: 10px;
}
#header .notifications-box .notifications-dropdown .top .total {
    font-size: 14px;
}
#header .notifications-box .notifications-dropdown .loading-notifications-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.1215686275);
}
#header .notifications-box .notifications-dropdown .notifications-list {
    display: flex;
    flex-direction: column;
    gap: 10x;
    overflow-y: auto;
    height: 350px;
    padding: 10px;
    gap: 10px;
    border-bottom: 1px solid #ddd;
}
#header
    .notifications-box
    .notifications-dropdown
    .notifications-list
    .no-notifications {
    text-align: center;
}
#header
    .notifications-box
    .notifications-dropdown
    .notifications-list
    .notification-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px;
    border-radius: 10px;
    transition: 0.3s;
    border: 1px solid #ddd;
    color: #000;
}
#header
    .notifications-box
    .notifications-dropdown
    .notifications-list
    .notification-item:hover {
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.0941176471);
    scale: 1.02;
}
#header
    .notifications-box
    .notifications-dropdown
    .notifications-list
    .notification-item:hover
    .text
    .notification-bottom
    .buttons {
    opacity: 1;
}
#header
    .notifications-box
    .notifications-dropdown
    .notifications-list
    .notification-item.unread {
    background-color: #e8e9fc;
}
#header
    .notifications-box
    .notifications-dropdown
    .notifications-list
    .notification-item
    .icon,
#header
    .notifications-box
    .notifications-dropdown
    .notifications-list
    .notification-item
    .image-box
    .image {
    width: 40px;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #eee;
    color: #fff;
    border-radius: 50%;
    flex-shrink: 0;
}
#header
    .notifications-box
    .notifications-dropdown
    .notifications-list
    .notification-item
    .icon {
    background-color: #ddd;
}
#header
    .notifications-box
    .notifications-dropdown
    .notifications-list
    .notification-item
    .icon.red {
    background: linear-gradient(20deg, rgb(252, 38, 38), rgb(255, 162, 162));
}
#header
    .notifications-box
    .notifications-dropdown
    .notifications-list
    .notification-item
    .icon.green {
    background: linear-gradient(20deg, rgb(25, 179, 19), rgb(150, 224, 140));
}
#header
    .notifications-box
    .notifications-dropdown
    .notifications-list
    .notification-item
    .icon.blue {
    background: linear-gradient(20deg, rgb(17, 76, 204), rgb(140, 179, 224));
}
#header
    .notifications-box
    .notifications-dropdown
    .notifications-list
    .notification-item
    .icon.yellow {
    background: linear-gradient(20deg, rgb(204, 185, 17), rgb(215, 224, 140));
}
#header
    .notifications-box
    .notifications-dropdown
    .notifications-list
    .notification-item
    .icon.orange {
    background: linear-gradient(20deg, rgb(248, 157, 21), rgb(255, 216, 165));
}
#header
    .notifications-box
    .notifications-dropdown
    .notifications-list
    .notification-item
    .icon.purple {
    background: linear-gradient(20deg, rgb(94, 24, 224), rgb(195, 167, 247));
}
#header
    .notifications-box
    .notifications-dropdown
    .notifications-list
    .notification-item
    .icon.pink {
    background: linear-gradient(20deg, rgb(184, 24, 224), rgb(238, 167, 247));
}
#header
    .notifications-box
    .notifications-dropdown
    .notifications-list
    .notification-item
    .image-box {
    position: relative;
}
#header
    .notifications-box
    .notifications-dropdown
    .notifications-list
    .notification-item
    .image-box
    .image {
    overflow: hidden;
    border: 1px solid #ddd;
    cursor: pointer;
}
#header
    .notifications-box
    .notifications-dropdown
    .notifications-list
    .notification-item
    .image-box
    .image:hover
    img {
    filter: brightness(1.1);
    scale: 1.1;
}
#header
    .notifications-box
    .notifications-dropdown
    .notifications-list
    .notification-item
    .image-box
    .image
    img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.3s;
}
#header
    .notifications-box
    .notifications-dropdown
    .notifications-list
    .notification-item
    .image-box
    .icon {
    position: absolute;
    top: calc(100% - 5px);
    left: calc(100% - 5px);
    width: 20px;
    translate: -50% -50%;
}
#header
    .notifications-box
    .notifications-dropdown
    .notifications-list
    .notification-item
    .image-box
    .icon
    i {
    font-size: 9px;
}
#header
    .notifications-box
    .notifications-dropdown
    .notifications-list
    .notification-item
    .text {
    font-size: 13px;
    font-weight: 400;
    flex: 1;
}
#header
    .notifications-box
    .notifications-dropdown
    .notifications-list
    .notification-item
    .text
    a {
    font-size: 13px;
}
#header
    .notifications-box
    .notifications-dropdown
    .notifications-list
    .notification-item
    .text
    .bold-link {
    color: #000;
    font-weight: 600;
}
#header
    .notifications-box
    .notifications-dropdown
    .notifications-list
    .notification-item
    .text
    .bold {
    font-weight: 600;
}
#header
    .notifications-box
    .notifications-dropdown
    .notifications-list
    .notification-item
    .text
    .notification-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 20px;
}
#header
    .notifications-box
    .notifications-dropdown
    .notifications-list
    .notification-item
    .text
    .notification-bottom
    time {
    font-size: 11px;
    font-weight: 500;
}
#header
    .notifications-box
    .notifications-dropdown
    .notifications-list
    .notification-item
    .text
    .notification-bottom
    .buttons {
    overflow: hidden;
    opacity: 0;
    transition: 0.3s;
}
#header
    .notifications-box
    .notifications-dropdown
    .notifications-list
    .notification-item
    .text
    .notification-bottom
    .buttons
    .notification-btn {
    width: 20px;
    aspect-ratio: 1/1;
    height: unset;
    padding: 0;
}
#header
    .notifications-box
    .notifications-dropdown
    .notifications-list
    .notification-item
    .text
    .notification-bottom
    .buttons
    .notification-btn
    i {
    font-size: 10px;
}
#header .notifications-box .notifications-dropdown .bottom {
    padding: 0;
}
#header
    .notifications-box
    .notifications-dropdown
    .bottom
    .mark-all-as-read-btn {
    background-color: transparent;
    width: 100%;
    padding: 10px;
    height: unset;
    color: #000;
    font-weight: 500;
    font-size: 14px;
    border-radius: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
#header
    .notifications-box
    .notifications-dropdown
    .bottom
    .mark-all-as-read-btn:hover {
    border-color: transparent;
    background-color: #eee;
}
#header .user-side {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}
#header .user-side .buttons {
    display: flex;
    align-items: center;
    gap: 10px;
}
#header .user-side .buttons .show-language-dropdown-btn,
#header .user-side .buttons .notifications-btn {
    width: 40px;
    aspect-ratio: 1/1;
    height: unset;
    background-color: transparent;
    font-size: 20px;
    color: #000;
    transition: 0.3s;
}
#header .user-side .buttons .show-language-dropdown-btn:hover,
#header .user-side .buttons .notifications-btn:hover {
    background-color: #e8e9fc;
    border-color: transparent;
}
#header .user-side .user-box {
    position: relative;
}
#header .user-side .user-box .user-side-box {
    display: flex;
    padding: 5px 10px;
    border-radius: 10px;
    align-items: center;
    cursor: pointer;
    gap: 10px;
    transition: 0.2s;
}
#header .user-side .user-box .user-side-box:hover {
    background-color: #e8e9fc;
}
#header .user-side .user-box .user-image {
    width: 40px;
    aspect-ratio: 1/1;
    overflow: hidden;
    border-radius: 50%;
}
#header .user-side .user-box .user-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#header .user-side .user-box .user-name-box {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    flex-direction: row-reverse;
}
#header .user-side .user-box .user-name-box h3 {
    font-weight: 500;
    font-size: 13px;
}
#header .user-side .user-box .user-name-box i {
    margin-bottom: 1px;
}
#header .user-side .user-box .header-dropdown {
    position: absolute;
    top: 70px;
    left: 50%;
    translate: -50%;
    background-color: #fff;
    padding: 7px;
    border-radius: 10px;
    border: 1px solid #eee;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.0901960784);
    min-width: 170px;
    opacity: 0;
    scale: 0;
    transition: 0.3s;
    transform-origin: top center;
}
#header .user-side .user-box .header-dropdown::before {
    content: "";
    border: 10px solid transparent;
    border-bottom-color: #fff;
    position: absolute;
    top: -20px;
    left: 50%;
    translate: -50%;
}
#header .user-side .user-box .header-dropdown.show {
    opacity: 1;
    scale: 1;
}
#header .user-side .user-box .header-dropdown ul li a,
#header .user-side .user-box .header-dropdown ul li button {
    padding: 5px;
    display: inline-block;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    color: #555;
    font-size: 13px;
    transition: 0.3s;
    height: unset;
    border: none;
    border-radius: 7px;
}
#header .user-side .user-box .header-dropdown ul li a:hover,
#header .user-side .user-box .header-dropdown ul li button:hover {
    color: rgb(0, 132, 255);
    background-color: #eee;
}
#header .user-side .user-box .header-dropdown ul li a i,
#header .user-side .user-box .header-dropdown ul li button i {
    width: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
#header .user-side .user-box .header-dropdown ul li form {
    width: 100%;
}
#header .user-side .user-box .header-dropdown ul li form button {
    width: 100%;
}

body:not(.mobile-view).sidebar-closed #header {
    width: calc(100vw - 60px);
}

#ar
    #header
    .notifications-box
    .notifications-dropdown
    .notifications-list
    .notification-item
    .image-box
    .icon {
    left: 5px;
}

@media (max-width: 800px) {
    #header:not(.in-public) {
        padding: 0 20px;
    }
}
@media (max-width: 800px) {
    #header {
        padding: 0 20px !important;
        gap: 5px;
        padding: 0 15px;
    }
    #header:not(.in-public) {
        width: calc(100vw - 60px);
    }
    #header.in-public .brand-side {
        gap: 5px;
    }
    #header.in-public a {
        font-size: 14px;
        text-align: center;
    }
    #header .brand-side .brand-title {
        display: none;
    }
    #header .brand-side .buttons {
        padding: 0;
    }
    #header .brand-side .buttons .change-language-btn,
    #header .brand-side .buttons .notifications-btn {
        font-size: 13px;
        width: 30px;
    }
    #header .user-side .buttons {
        gap: 5px;
    }
    #header .user-side .buttons .notifications-btn,
    #header .user-side .buttons .show-language-dropdown-btn {
        width: 30px !important;
        padding: 0;
    }
    #header .user-side .buttons .notifications-btn i,
    #header .user-side .buttons .show-language-dropdown-btn i {
        font-size: 18px !important;
    }
    #header .user-side .buttons .notifications-btn .notifications-count,
    #header
        .user-side
        .buttons
        .show-language-dropdown-btn
        .notifications-count {
        top: -5px;
        right: -5px;
    }
    #header .user-side .user-box .user-side-box {
        padding: 0;
    }
    #header .user-side .user-box .user-name-box {
        display: none;
    }
    #header .user-side .user-box .user-image {
        width: 30px;
    }
    #header .header-dropdown,
    #header .notifications-dropdown,
    #header .change-language-dropdown {
        top: 75px !important;
        position: fixed !important;
        left: 20px !important;
        translate: unset !important;
        width: calc(100vw - 100px) !important;
        margin-left: 60px !important;
    }
    #header .change-language-dropdown {
        top: 55px !important;
    }
    #header .change-language-dropdown .language-option-btn {
        max-width: unset;
    }
    #header .header-dropdown button {
        max-width: unset;
    }
    #header.in-public .change-language-dropdown {
        width: calc(100vw - 40px) !important;
        margin-left: 0 !important;
    }
    #ar #header .header-dropdown,
    #ar #header .notifications-dropdown,
    #ar #header .change-language-dropdown {
        margin-left: 0 !important;
        margin-right: 60px !important;
    }
}
#sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: 250px;
    height: 100vh;
    background-color: #fff;
    border: 1px solid #ddd;
    border-top: none;
    border-bottom: none;
    transition: 0.3s;
    z-index: 6;
}
#sidebar .top {
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: space-between;
    border-bottom: 1px solid #ddd;
    height: 60px;
    padding: 10px 10px;
}
#sidebar .top .sidebar-title {
    font-weight: 500;
    max-width: 180px;
    transition: 0.3s;
    overflow: hidden;
    font-size: 16px;
    white-space: nowrap;
}
#sidebar .top .toggle-sidebar-btn {
    width: 40px;
    aspect-ratio: 1/1;
    height: unset;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: transparent;
    color: #000;
}
#sidebar .top .toggle-sidebar-btn:hover {
    background-color: #eee;
}
#sidebar .top .toggle-sidebar-btn i {
    transition: 0.3s;
}
#sidebar .menu {
    list-style: none;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 7px;
    overflow-y: auto;
    transition: 0.3s;
    padding: 7px;
    height: calc(100% - 60px);
}
#sidebar .menu .nav-group > .nav-link.active {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background-color: #686abe;
    color: #fff;
}
#sidebar .menu .nav-group > .nav-link.active .text {
    color: #fff;
}
#sidebar .menu .nav-group > .nav-link.active i {
    color: #fff !important;
}
#sidebar .menu .nav-group > .nav-link.active:hover {
    background-color: #686abe !important;
    filter: brightness(1.1);
}
#sidebar .menu .nav-group .sub-links-box {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 0 7px;
    border-radius: 10px;
    border: 1px solid transparent;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    max-height: 0;
    overflow: hidden;
    transition: 0.2s;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.0941176471) inset;
}
#sidebar .menu .nav-group .sub-links-box.show {
    padding: 7px;
    max-height: 200px;
    border-color: #ddd;
}
#sidebar .menu .nav-group .sub-links-box .nav-link {
    padding: 10px 7px !important;
}
#sidebar .menu .nav-link {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 10px;
    overflow: hidden;
    border-radius: 10px;
}
#sidebar .menu .nav-link .arrow-down {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 5px;
}
#sidebar .menu .nav-link .arrow-down i {
    font-size: 13px;
}
#sidebar .menu .nav-link.current {
    background-color: #e8e9fc;
    color: #03045e;
}
#sidebar .menu .nav-link.current::before {
    background-color: #03045e;
}
#sidebar .menu .nav-link.current .text {
    color: #03045e;
    font-weight: 600;
}
#sidebar .menu .nav-link.current:hover {
    background-color: #e8e9fc !important;
    filter: brightness(0.9);
}
#sidebar .menu .nav-link i {
    width: 25px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    flex-shrink: 0;
    color: #03045e;
}
#sidebar .menu .nav-link .text {
    font-size: 13px;
    font-weight: 500;
    color: #000;
    max-width: 250px;
    transition: 0.3s;
    overflow: hidden;
    white-space: nowrap;
}
#sidebar .menu .nav-link:not(.current):hover {
    background-color: #e8e9fc !important;
}

#ar #sidebar {
    left: unset;
    right: 0;
}
#ar #sidebar .top .toggle-sidebar-btn i {
    transform: rotate(180deg);
}
#ar #sidebar .menu .nav-link::before {
    right: unset;
    left: -40px;
}
#ar #sidebar.close .menu .nav-link::before {
    left: -100px;
}

body:not(.mobile-view).sidebar-closed .dashboard-container {
    margin-left: 60px;
}
body:not(.mobile-view)#ar.sidebar-closed .dashboard-container {
    margin-left: 0;
    margin-right: 60px;
}
body:not(.mobile-view) #sidebar.close {
    width: 60px;
}
body:not(.mobile-view) #sidebar.close .top {
    gap: 0;
    padding: 10px 8px;
}
body:not(.mobile-view) #sidebar.close .top .sidebar-title {
    max-width: 0;
}
body:not(.mobile-view) #sidebar.close .top .toggle-sidebar-btn i {
    rotate: 180deg;
}
body:not(.mobile-view) #sidebar.close .menu .nav-group > .nav-link .arrow-down {
    opacity: 0;
}
body:not(.mobile-view) #sidebar.close .menu .nav-group .sub-links-box {
    padding: 0;
}
body:not(.mobile-view)
    #sidebar.close
    .menu
    .nav-group
    .sub-links-box
    .nav-link {
    padding: 10px !important;
}
body:not(.mobile-view) #sidebar.close .menu .nav-link {
    padding: 10px;
    gap: 0;
}
body:not(.mobile-view) #sidebar.close .menu .nav-link .text {
    max-width: 0;
}

@media (max-width: 800px) {
    #sidebar {
        width: 60px;
    }
    #sidebar .top {
        gap: 0;
        padding: 10px 8px;
    }
    #sidebar .top .sidebar-title {
        max-width: 0;
    }
    #sidebar .top .toggle-sidebar-btn i {
        rotate: 180deg;
    }
    #sidebar .menu .nav-group .sub-links-box {
        padding: 0 0 !important;
    }
    #sidebar .menu .nav-group .sub-links-box.show {
        padding: 7px 0 !important;
    }
    #sidebar .menu .nav-group .sub-links-box .nav-link {
        padding: 10px 0;
    }
    #sidebar .menu .nav-link {
        padding: 10px;
        gap: 0;
    }
    #sidebar .menu .nav-link::before {
        translate: 100% -50%;
    }
    #sidebar .menu .nav-link .text {
        max-width: 0;
    }
    #sidebar .menu .nav-link .arrow-down {
        width: 0;
        opacity: 0;
    }
    #sidebar.close {
        width: 250px;
    }
    #sidebar.close .top .sidebar-title {
        max-width: 160px;
    }
    #sidebar.close .top .toggle-sidebar-btn i {
        rotate: 0deg;
    }
    #sidebar.close .menu .nav-link {
        gap: 10px;
    }
    #sidebar.close .menu .nav-link .text {
        max-width: 160px;
    }
    #sidebar.close .menu .nav-link .arrow-down {
        width: 5px;
        opacity: 1;
    }
}
#footer {
    padding: 20px 80px;
    border-top: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 2;
    width: 100%;
    background-color: #fff;
}
#footer .logo-side .image {
    width: 160px;
    height: 80px;
    display: flex;
    align-items: center;
    overflow: hidden;
    justify-content: flex-end;
}
#footer .logo-side .image img {
    height: 100%;
    object-fit: contain;
}
#footer .copyright-side {
    display: flex;
    flex-direction: column;
}
#footer .copyright-side .links-and-contact {
    display: flex;
    align-items: center;
    gap: 20px;
}
#footer .copyright-side .links-and-contact .links {
    display: flex;
    align-items: center;
    gap: 10px;
}
#footer .copyright-side .links-and-contact .links a {
    font-size: 14px;
    font-weight: 500;
    position: relative;
    border-bottom: 1px solid transparent;
    transition: 0.2s;
    color: #03045e;
}
#footer .copyright-side .links-and-contact .links a:hover {
    border-bottom-color: #03045e;
}
#footer .copyright-side .links-and-contact .links a::before {
    content: "";
    position: absolute;
    width: 1px;
    height: 100%;
    background-color: #03045e;
    left: -5px;
}
#footer .copyright-side .links-and-contact .links a:first-child::before {
    display: none;
}
#footer .copyright-side .links-and-contact .contact {
    display: flex;
    align-items: center;
    gap: 10px;
}
#footer .copyright-side .links-and-contact .contact a {
    width: 20px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #03045e;
    border: 1px solid transparent;
}
#footer .copyright-side .links-and-contact .contact a:hover {
    background-color: #fff;
    border-color: #03045e;
}
#footer .copyright-side .links-and-contact .contact a:hover i {
    color: #03045e;
}
#footer .copyright-side .links-and-contact .contact a i {
    color: #fff;
    font-size: 10px;
    transition: 0.3s;
}
#footer .copyright-side .copyright {
    color: #03045e;
    font-weight: 600;
    margin-top: 15px;
}

#ar footer .copyright-side .links-and-contact .links a:first-child::before {
    display: block;
}
#ar footer .copyright-side .links-and-contact .links a:last-child::before {
    display: none;
}

@media (max-width: 800px) {
    #footer {
        padding: 10px;
        flex-direction: column;
        align-items: flex-start;
    }
    #footer .logo-side .image {
        width: 150px;
        justify-content: flex-start;
    }
    #footer .copyright-side {
        gap: 10px;
    }
    #footer .copyright-side .copyright {
        font-size: 12px !important;
    }
    #footer .copyright-side .links-and-contact {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    #footer .copyright-side .links-and-contact .links {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    #footer .copyright-side .links-and-contact .links a {
        font-size: 12px;
    }
    #footer .copyright-side .links-and-contact .links a::before {
        display: none !important;
    }
    #footer .copyright-side .copyright {
        font-size: 14px;
        margin-top: 5px;
    }
}
.table {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 15px;
    padding: 20px;
    width: 100%;
    animation: showOpacity 1s;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.0745098039);
    transition: 0.3s;
}
.table:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1294117647);
}
.table .link-btn:hover {
    color: #03045e;
}
.table hr {
    width: 100%;
    margin: 20px 0;
}
.table form {
    margin-top: 0;
    width: fit-content;
}
.table input[type="checkbox"] {
    height: fit-content !important;
}
.table .yes-no-icon {
    width: 20px;
    aspect-ratio: 1/1;
    background-color: #aaa;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    color: #fff;
    font-size: 8px;
}
.table .yes-no-icon.fa-check {
    background-color: rgb(62, 165, 37);
}
.table .yes-no-icon.fa-x {
    background-color: rgb(233, 81, 81);
}
.table input,
.table select {
    border-radius: 30px;
    outline: none;
    border: 1px solid #ddd;
    padding: 0 10px;
    height: 35px !important;
}
.table .tools {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin-bottom: 20px;
    width: 100%;
}
.table .tools .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    gap: 20px;
}
.table .tools .top .table-title {
    font-size: 25px;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 10px;
}
.table .tools .top .table-title .icon {
    width: 40px;
    aspect-ratio: 1/1;
    background-color: #03045e;
    border-radius: 50%;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
}
.table .tools .top .buttons {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.table .tools .top .buttons form {
    border: none;
    padding: 0;
}
.table .tools .top .buttons form .download-list-input {
    display: none;
}
.table .tools .top .buttons .table-top-btn {
    min-width: 130px;
    height: 35px;
    white-space: nowrap;
    background-color: transparent;
    background-color: #03045e;
}
.table .tools .top .buttons .table-top-btn i {
    font-size: 18px;
}
.table .tools .top .buttons .table-top-btn:hover {
    background-color: transparent;
}
.table .tools .bottom {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}
.table .tools .bottom .left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.table .tools .bottom .left .table-add-btn {
    height: 35px;
}
.table .tools .bottom .left .table-search-box {
    border: 1px solid #ddd;
    border-radius: 30px;
    overflow: hidden;
    display: flex;
    align-items: center;
    height: 35px;
}
.table .tools .bottom .left .table-search-box input {
    border-radius: 0;
    border: none;
    flex-grow: 1;
    padding: 0;
    padding-left: 10px;
}
.table .tools .bottom .left .table-search-box .search-btn {
    width: 35px;
    aspect-ratio: 1/1;
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    color: #000;
}
.table .tools .bottom .left .table-search-box .search-btn:hover {
    border-color: transparent;
}
.table .tools .bottom .left .control-btns {
    display: flex;
    align-items: center;
    gap: 10px;
}
.table .tools .bottom .left .control-btns .control-btn {
    width: 30px;
    aspect-ratio: 1/1;
    height: unset;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    padding: 0;
}
.table .tools .bottom .left .control-btns .control-btn:hover {
    color: #fff;
    border-color: transparent;
}
.table .tools .bottom .left .control-btns .control-btn.disabled {
    background-color: #eee !important;
    cursor: not-allowed !important;
}
.table .tools .bottom .left .control-btns .control-btn:not(.disabled):hover {
    filter: brightness(1.1);
    background-color: #686abe;
}
.table .tools .bottom .left .control-btns .control-btn.unselect-all {
    background-color: rgb(0, 140, 255);
}
.table .tools .bottom .left .control-btns .control-btn.delete-selected {
    background-color: rgb(243, 98, 98);
}
.table .tools .bottom .left .sorted-by {
    background-color: #eee;
    padding: 5px 15px;
    border-radius: 5px;
    font-size: 13px;
}
.table .tools .bottom .right {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    width: fit-content;
}
.table .tools .bottom .right .link-btn {
    height: 35px !important;
}
.table .tools .bottom .right .filter-select .select-selected {
    height: 35px !important;
}
.table .hidden-btn {
    padding: 0;
    border: none;
    max-width: unset;
    min-width: unset;
    width: fit-content;
    border-radius: 0;
    background-color: transparent;
}
.table .table-bottom {
    display: flex;
    flex-direction: column;
}
.table .table-bottom .pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}
.table .table-bottom .pagination .right {
    display: flex;
    align-items: center;
    gap: 10px;
}
.table .table-bottom .pagination .right .pagination-text {
    font-size: 14px;
    color: #555;
}
.table .table-bottom .pagination .right .pagination-text span {
    font-weight: 500;
    color: #000;
}
.table .table-bottom .pagination .pagination-btns {
    display: flex;
    align-items: center;
    gap: 5px;
}
.table .table-bottom .pagination .pagination-btns .pagination-pages {
    display: flex;
    gap: 5px;
}
.table
    .table-bottom
    .pagination
    .pagination-btns
    .pagination-pages
    .pagination-btn {
    font-weight: 500;
    background-color: #ddd;
}
.table
    .table-bottom
    .pagination
    .pagination-btns
    .pagination-pages
    .pagination-btn.three-dots-btn {
    cursor: default;
}
.table
    .table-bottom
    .pagination
    .pagination-btns
    .pagination-pages
    .pagination-btn.three-dots-btn:hover {
    background-color: #ddd !important;
}
.table
    .table-bottom
    .pagination
    .pagination-btns
    .pagination-pages
    .pagination-btn.active {
    background-color: #03045e;
    color: #fff;
}
.table
    .table-bottom
    .pagination
    .pagination-btns
    .pagination-pages
    .pagination-btn.active:hover {
    background-color: #03045e !important;
}
.table .table-bottom .pagination .pagination-btns .pagination-btn {
    background-color: transparent;
    color: #000;
    width: 30px;
    aspect-ratio: 1/1;
    height: unset;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    padding: 0;
    transition: 0.2s;
}
.table .table-bottom .pagination .pagination-btns .pagination-btn i {
    font-size: 10px;
}
.table .table-bottom .pagination .pagination-btns .pagination-btn:hover {
    border-color: transparent;
    background-color: #eee !important;
}
.table .table-bottom .pagination .left {
    display: flex;
    align-items: center;
    gap: 5px;
}
.table .table-bottom .pagination .left .custom-select .select-selected {
    height: 35px;
}
.table
    .table-bottom
    .pagination
    .left
    .custom-select
    .select-items:not(.select-hide) {
    max-height: 140px !important;
}
.table .loading-spinner-box {
    display: flex;
    justify-content: center;
    align-items: center;
}
.table .loading-spinner-box .table-loading-spinner {
    width: 30px;
    margin-bottom: 20px;
}
.table .data-list {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 10px;
    overflow: hidden;
    overflow-x: auto;
    transition: 0.2s;
}
.table .data-list::-webkit-scrollbar {
    height: 6px;
}
.table .data-list .no-results-text {
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
.table .data-list .no-results-text i {
    width: 20px;
    aspect-ratio: 1/1;
    background-color: #03045e;
    color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
}
.table .data-list .data-row {
    width: 100%;
    display: grid;
    border-bottom: 1px solid #ddd;
}
.table .data-list .data-row:nth-child(odd) {
    background-color: rgba(241, 241, 241, 0.568627451);
}
.table .data-list .data-row.head-row {
    background-color: #ebebeb;
}
.table .data-list .data-row.head-row .data-item {
    padding: 10px;
    position: relative;
    font-weight: 500;
}
.table .data-list .data-row.head-row .data-item.controls-item {
    justify-content: center;
}
.table .data-list .data-row.head-row .data-item.active {
    background-color: #ddd;
}
.table .data-list .data-row.head-row .data-item.sortable {
    cursor: pointer;
    transition: 0.3s;
}
.table .data-list .data-row.head-row .data-item.sortable:hover {
    background-color: #ddd;
}
.table .data-list .data-row.head-row .data-item .sort-icon {
    position: absolute;
    right: 5px;
    top: 5px;
    display: flex;
    align-items: center;
    opacity: 0.5;
    gap: 2px;
}
.table .data-list .data-row.head-row .data-item .sort-icon i {
    font-size: 8px;
}
.table .data-list .data-row:last-child {
    border-bottom: none;
}
.table .data-list .data-row .data-item {
    position: relative;
    padding: 5px 7px;
    border-left: 1px solid #ddd;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    font-size: 12px;
}
.table .data-list .data-row .data-item a {
    font-size: 12px;
}
.table .data-list .data-row .data-item .description-item {
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limit to two lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.table .data-list .data-row .data-item .log-box {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 5px;
    background-color: #eee;
    padding: 5px 7px;
    border-radius: 5px;
    font-weight: 500;
    color: #fff;
}
.table .data-list .data-row .data-item .log-box i {
    width: 20px;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    color: #fff;
    background: rgba(255, 255, 255, 0.862745098);
    font-size: 10px;
}
.table .data-list .data-row .data-item .log-box.login {
    background-color: rgb(49, 202, 82);
}
.table .data-list .data-row .data-item .log-box.login i {
    color: rgb(49, 202, 82);
}
.table .data-list .data-row .data-item .log-box.logout {
    background-color: rgb(253, 153, 70);
}
.table .data-list .data-row .data-item .log-box.logout i {
    color: rgb(253, 153, 70);
}
.table .data-list .data-row .data-item .status-switch:hover {
    background-color: transparent;
}
.table .data-list .data-row .data-item .custom-select {
    min-width: unset !important;
    max-width: 100px;
}
.table .data-list .data-row .data-item .custom-select .select-selected {
    height: 35px;
    width: inherit;
}
.table .data-list .data-row .data-item.list-item {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.table .data-list .data-row .data-item.list-item .list-item-row {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    font-size: 11px;
    height: 18px;
}
.table
    .data-list
    .data-row
    .data-item.list-item
    .list-item-row:not(:last-child) {
    border-bottom: 1px solid #eee;
}
.table
    .data-list
    .data-row
    .data-item.list-item
    .list-item-row
    span:first-child {
    font-weight: 500;
}
.table .data-list .data-row .data-item.date {
    direction: ltr;
}
.table .data-list .data-row .data-item form {
    padding: 0;
    border: none;
}
.table .data-list .data-row .data-item .row-more-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 2;
    background-color: #fff;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.0941176471);
}
.table .data-list .data-row .data-item .row-more-dropdown .dropdown-list {
    list-style: none;
}
.table
    .data-list
    .data-row
    .data-item
    .row-more-dropdown
    .dropdown-list
    .dropdown-item
    button {
    background-color: transparent;
}
.table .data-list .data-row .data-item.controls-item {
    justify-content: flex-start;
}
.table .data-list .data-row .data-item.item-description {
    display: inline-block;
    text-align: center;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
}
.table .data-list .data-row .data-item .status-box {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 130px;
    background-color: #eee;
    padding: 5px 6px;
    border-radius: 5px;
    border: 2px solid #fff;
    font-size: 11px;
    font-weight: 500;
}
.table .data-list .data-row .data-item .image {
    width: 35px;
    height: 35px;
    overflow: hidden;
    border-radius: 50%;
    cursor: pointer;
}
.table .data-list .data-row .data-item .image:hover img {
    filter: brightness(1.1);
}
.table .data-list .data-row .data-item .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.3s;
}
.table .data-list .data-row .data-item .table-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25px;
    height: unset;
    aspect-ratio: 1/1;
    background-color: rgb(0, 162, 255);
    color: #fff;
    padding: 5px;
    border-radius: 7px;
}
.table .data-list .data-row .data-item .table-btn.with-text {
    width: fit-content;
    aspect-ratio: unset;
    height: 25px !important;
    padding: 2px 10px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.table .data-list .data-row .data-item .table-btn i {
    font-size: 12px;
}
.table .data-list .data-row .data-item .table-btn.table-edit-btn {
    background-color: rgb(0, 163, 0);
}
.table .data-list .data-row .data-item .table-btn.red {
    background-color: rgb(252, 88, 88);
}
.table .data-list .data-row .data-item .table-btn.red:hover {
    filter: brightness(1.3);
}
.table .data-list .data-row .data-item .table-btn.green {
    background-color: rgb(62, 165, 37);
}
.table .data-list .data-row .data-item .table-btn.green:hover {
    filter: brightness(1.1);
}
.table .data-list .data-row .data-item .table-btn.orange {
    background-color: rgb(233, 116, 7);
}
.table .data-list .data-row .data-item .table-btn.orange:hover {
    filter: brightness(1.1);
}
.table .data-list .data-row .data-item .table-btn.pink {
    background-color: rgb(238, 0, 198);
}
.table .data-list .data-row .data-item .table-btn.pink:hover {
    filter: brightness(1.1);
}
.table .data-list .data-row .data-item .table-btn.yellow {
    background-color: rgb(221, 192, 29);
}
.table .data-list .data-row .data-item .table-btn.yellow:hover {
    filter: brightness(1.1);
}
.table .data-list .data-row .data-item .table-btn:hover {
    border-color: transparent;
    filter: brightness(1.1);
}
.table .data-list .data-row .data-item .table-btn.disabled {
    background-color: rgb(223, 223, 223);
}
.table .data-list .data-row .data-item .table-btn.disabled:hover {
    filter: brightness(1);
}

#ar .table .bottom .table-search-box input {
    padding-left: 0;
    padding-right: 10px;
}
#ar .table .table-bottom .pagination .center .pagination-btns {
    direction: ltr;
}
#ar
    .table
    .table-bottom
    .pagination
    .center
    .pagination-btns
    .pagination-pages {
    direction: ltr;
}

@media (max-width: 800px) {
    .table .tools {
        align-items: center;
    }
    .table .tools .top .table-title {
        font-size: 18px;
    }
    .table .tools .bottom {
        flex-direction: column;
        align-items: center;
    }
    .table .tools .bottom .right {
        font-size: 12px;
        flex-wrap: wrap;
    }
    .table .tools .bottom .right a {
        font-size: 12px;
        flex-grow: 1;
    }
    .table .tools .bottom .left {
        font-size: 12px;
    }
    .table .tools .bottom .left select {
        flex-grow: 1;
        font-size: 12px;
    }
    .table .data-list .data-row .data-item {
        font-size: 12px;
        padding: 5px;
    }
    .table .pagination {
        flex-direction: column;
        gap: 20px;
    }
    .table .pagination .right {
        flex-wrap: wrap;
        justify-content: center;
        font-size: 12px;
    }
    .table .pagination .left {
        font-size: 12px;
    }
    .table-2 .table-bottom .pagination .right {
        display: none;
    }
}
.notes-section .top {
    gap: 10px;
}
.notes-section .top .left-side .title {
    font-weight: 400;
}
.notes-section .top .right-side {
    display: flex;
    align-items: center;
    gap: 10px;
}
.notes-section .top .right-side .found-notes-box {
    display: flex;
    align-items: center;
    gap: 10px;
}
.notes-section .top .right-side .found-notes-box .buttons {
    display: flex;
    align-items: center;
    gap: 5px;
}
.notes-section .top .right-side .found-notes-box .buttons button {
    width: 25px;
    height: unset;
    aspect-ratio: 1/1;
    padding: 0;
}
.notes-section .notes-box {
    margin-top: 20px;
}
.notes-section .notes-box .notes-form-box {
    margin-top: 20px;
}
.notes-section .notes-box .notes-form-box .notes-form {
    margin-top: 0;
    padding: 0;
    border: none;
    border-radius: none;
    flex-direction: row;
    gap: 10px;
}
.notes-section .notes-box .notes-form-box .notes-form .input-group {
    flex: 1;
    margin-bottom: 0;
}
.notes-section .notes-box .notes-form-box .notes-form .input-group textarea {
    margin-top: 0;
    height: 70px;
    box-shadow: none;
}
.notes-section
    .notes-box
    .notes-form-box
    .notes-form
    .input-group
    textarea:focus {
    border-color: #ddd;
}
.notes-section .notes-box .notes-list {
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 400px;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 10px;
    scroll-behavior: auto;
}
.notes-section .notes-box .notes-list .note-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.notes-section .notes-box .notes-list .note-item .image {
    width: 40px;
    aspect-ratio: 1/1;
    overflow: hidden;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    border: 1px solid #ddd;
    background-color: #fff;
}
.notes-section .notes-box .notes-list .note-item .image:hover img {
    filter: brightness(1.1);
    scale: 1.05;
}
.notes-section .notes-box .notes-list .note-item .image img {
    width: 100%;
    height: 100%;
    transition: 0.3s;
}
.notes-section .notes-box .notes-list .note-item .note-box {
    background-color: #eee;
    padding: 10px;
    border-radius: 10px;
    flex: 1;
    border: 1px solid #fff;
    transition: 0.3s;
}
.notes-section .notes-box .notes-list .note-item .note-box:hover {
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.0941176471);
}
.notes-section
    .notes-box
    .notes-list
    .note-item
    .note-box:hover
    .top
    .right
    .controls {
    max-width: 50px;
}
.notes-section .notes-box .notes-list .note-item .note-box .top {
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
    margin-bottom: 5px;
}
.notes-section .notes-box .notes-list .note-item .note-box .top .user-name {
    font-size: 14px;
    cursor: pointer;
    color: #000;
}
.notes-section .notes-box .notes-list .note-item .note-box .top .right {
    display: flex;
    align-items: center;
    gap: 5px;
}
.notes-section
    .notes-box
    .notes-list
    .note-item
    .note-box
    .top
    .right
    .controls {
    display: flex;
    align-items: center;
    gap: 5px;
    max-width: 0;
    overflow: hidden;
    transition: 0.2s;
}
.notes-section
    .notes-box
    .notes-list
    .note-item
    .note-box
    .top
    .right
    .controls
    .note-control-btn {
    width: 20px;
    aspect-ratio: 1/1;
    padding: 0;
    height: unset;
    border-radius: 5px;
    flex-shrink: 0;
}
.notes-section
    .notes-box
    .notes-list
    .note-item
    .note-box
    .top
    .right
    .controls
    .note-control-btn
    i {
    font-size: 10px;
}
.notes-section .notes-box .notes-list .note-item .note-box .top .right .date {
    font-size: 14px;
}
.notes-section .notes-box .notes-list .note-item .note-box .note-content {
    font-size: 13px;
}
.notes-section .notes-box .notes-list .note-item.found .note-box {
    border-color: rgb(62, 165, 37);
}

@media (max-width: 500px) {
    .notes-section .top .left-side .title {
        font-size: 20px;
    }
    .notes-section .notes-box {
        margin-top: 10px;
    }
    .notes-section .notes-box .notes-list .note-item {
        position: relative;
        flex-direction: column;
        margin-top: 20px;
    }
    .notes-section .notes-box .notes-list .note-item .image {
        position: absolute;
        left: 50%;
        top: 0;
        translate: -50% -50%;
    }
    .notes-section .notes-box .notes-list .note-item .note-box {
        width: 100%;
    }
    .notes-section .notes-box .notes-form-box {
        margin-top: 10px;
    }
}
@media (max-width: 400px) {
    .notes-section .notes-box .notes-list .note-item .top {
        flex-direction: column;
        align-items: flex-start;
    }
    .notes-section .notes-box .notes-list .note-item .top .right {
        flex-direction: row-reverse;
    }
}
.confirm-popup-bg {
    z-index: 7 !important;
}

.confirm-popup {
    position: fixed;
    width: 100%;
    max-width: 350px !important;
    background: #fff;
    top: 50%;
    left: 50%;
    z-index: 7;
    border-radius: 15px;
    padding: 20px;
    transform: translate(-50%, -50%);
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.16);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    text-align: center;
    min-height: 180px;
    animation: show-popup 0.4s !important;
    margin-top: 10px;
    width: 100%;
}
.confirm-popup.hide {
    display: none;
}
.confirm-popup .popup-title {
    font-weight: 500;
    font-size: 25px;
}
.confirm-popup .popup-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: start;
    width: 100%;
    padding: 0 15px;
    padding-top: 10px;
    border-top: 1px solid #ddd;
    max-height: 200px;
    overflow-y: auto;
}
.confirm-popup form {
    display: flex;
    flex-direction: column !important;
    gap: 10px;
    width: 100%;
    border: none;
    padding: 0;
    flex-direction: row;
    margin-top: 0;
}
.confirm-popup form .input-group {
    text-align: start;
}
.confirm-popup form .input-group .input {
    height: 35px;
}
.confirm-popup .buttons {
    display: flex;
    gap: 15px;
    align-items: center;
    width: 100%;
    margin-top: auto;
}
.confirm-popup button,
.confirm-popup a {
    width: 50%;
    height: 35px !important;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 30px;
    color: #fff;
    gap: 5px;
}
.confirm-popup button:hover,
.confirm-popup a:hover {
    border-color: transparent;
    color: #fff;
}
.confirm-popup button.confirm-btn,
.confirm-popup a.confirm-btn {
    background-color: rgb(255, 76, 76);
}
.confirm-popup button.confirm-btn:hover,
.confirm-popup a.confirm-btn:hover {
    background-color: rgb(253, 134, 134);
}
.confirm-popup button.confirm-btn.green,
.confirm-popup a.confirm-btn.green {
    background-color: rgb(62, 165, 37);
}
.confirm-popup button.confirm-btn.green:hover,
.confirm-popup a.confirm-btn.green:hover {
    filter: brightness(1.1);
}
.confirm-popup button.cancel-btn,
.confirm-popup a.cancel-btn {
    background-color: #aaa;
}
.confirm-popup button.cancel-btn:hover,
.confirm-popup a.cancel-btn:hover {
    background-color: #ccc;
}

@keyframes show-popup {
    from {
        opacity: 0;
        translate: 0 50px;
    }
    to {
        opacity: 1;
        translate: 0 0;
    }
}
.contract-popup-bg {
    z-index: 6 !important;
}

.contract-popup {
    position: fixed;
    width: 100%;
    max-width: 500px !important;
    background: #fff;
    top: 50%;
    left: 50%;
    z-index: 6;
    border-radius: 15px;
    padding: 15px;
    transform: translate(-50%, -50%);
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.16);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 180px;
    max-height: calc(100vh - 40px);
    animation: show-popup 0.4s !important;
}
.contract-popup.hide {
    display: none;
}
.contract-popup .popup-title {
    font-weight: 500;
    font-size: 25px;
}
.contract-popup .form {
    width: 100%;
    height: 100%;
    overflow-y: auto;
}
.contract-popup .form .custom-file-input {
    width: 100%;
}
.contract-popup .form .custom-file-input .file-preview {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
}
.contract-popup .form .custom-file-input .file-preview .file-box {
    flex-shrink: 0;
}
.contract-popup .form > .description {
    margin-bottom: 10px;
}
.contract-popup .form .switch {
    padding: 0;
}
.contract-popup .buttons {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 10px;
}

@keyframes show-popup {
    from {
        opacity: 0;
        translate: 0 50px;
    }
    to {
        opacity: 1;
        translate: 0 0;
    }
}
.invoice-popup-dark-bg {
    z-index: 6 !important;
}

.invoice-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    background-color: #fff;
    z-index: 6;
    transform: translate(-50%, -50%);
    width: calc(100% - 20px);
    max-width: 550px;
    height: calc(100% - 20px);
    max-height: 700px;
    border-radius: 10px;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1725490196);
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    animation: show-popup 0.4s !important;
}
.invoice-popup .invoice {
    width: 100%;
    height: 100%;
}
.invoice-popup .invoice .head,
.invoice-popup .invoice .info-section,
.invoice-popup .invoice .invoice-table {
    width: 100%;
    padding: 20px;
}
.invoice-popup .invoice .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.invoice-popup .invoice .head .left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.invoice-popup .invoice .head .left .title {
    font-size: 23px;
    font-weight: 500;
}
.invoice-popup .invoice .head .logo {
    width: 100px;
    aspect-ratio: 2/1;
    display: flex;
    justify-content: center;
    align-items: center;
}
.invoice-popup .invoice .head .logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.invoice-popup .invoice .head .date-side {
    display: flex;
}
.invoice-popup .invoice .head .date-side .date .title,
.invoice-popup .invoice .head .date-side .invoice-number .title {
    text-align: end;
    color: #aaa;
    font-size: 14px;
}
.invoice-popup .invoice .head .date-side .date .value,
.invoice-popup .invoice .head .date-side .invoice-number .value {
    font-weight: 500;
    color: #686abe;
}
.invoice-popup .invoice .info-section {
    display: flex;
    gap: 20px;
    background-color: #eee;
}
.invoice-popup .invoice .info-section .platform-side,
.invoice-popup .invoice .info-section .customer-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.invoice-popup .invoice .info-section .platform-side span,
.invoice-popup .invoice .info-section .customer-side span {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 15px;
}
.invoice-popup .invoice .info-section .platform-side span.title,
.invoice-popup .invoice .info-section .customer-side span.title {
    font-weight: 500;
    font-size: 20px;
}
.invoice-popup .invoice .info-section .platform-side span i,
.invoice-popup .invoice .info-section .customer-side span i {
    flex-shrink: 0;
    width: 20px;
    aspect-ratio: 1/1;
    background-color: #686abe;
    color: #fff;
    font-size: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}
.invoice-popup .invoice .info-section .customer-side span {
    direction: rtl;
}
.invoice-popup .invoice .invoice-table .content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.invoice-popup .invoice .invoice-table .content .invoice-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.invoice-popup .invoice .invoice-table .content .invoice-row:last-child {
    background-color: #eee;
}
.invoice-popup
    .invoice
    .invoice-table
    .content
    .invoice-row:last-child
    .invoice-item {
    border-bottom: none;
}
.invoice-popup .invoice .invoice-table .content .invoice-row .invoice-item {
    padding: 10px;
    border: 1px solid transparent;
    border-bottom-color: #eee;
}
.invoice-popup
    .invoice
    .invoice-table
    .content
    .invoice-row
    .invoice-item.title {
    color: #686abe;
    font-weight: 600;
}
.invoice-popup
    .invoice
    .invoice-table
    .content
    .invoice-row
    .invoice-item.value {
    text-align: end;
}
.invoice-popup .buttons {
    padding: 20px;
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
}
.invoice-popup .buttons button {
    flex: 1;
    height: 35px;
    font-weight: 500;
}
.invoice-popup .buttons button i {
    margin-top: 2px;
}
.invoice-popup .buttons button:hover {
    border-color: transparent;
    color: #fff;
    filter: brightness(1.2);
}
.invoice-popup .buttons button.print-invoice-btn {
    background-color: green;
}
.invoice-popup .buttons button.close-btn {
    background-color: #aaa;
}

#ar .invoice-popup .invoice .info-section .customer-side span {
    direction: ltr;
}

@media (max-width: 600px) {
    .invoice-popup {
        max-height: unset;
    }
    .invoice-popup .invoice .head .logo {
        width: 60px;
    }
    .invoice-popup .invoice .head .date-side .date,
    .invoice-popup .invoice .head .date-side .invoice-number {
        font-size: 11px;
    }
    .invoice-popup .invoice .info-section {
        flex-direction: column;
    }
    .invoice-popup .invoice .info-section .customer-side span,
    .invoice-popup .invoice .info-section .platform-side span {
        font-size: 12px;
        font-weight: 500;
    }
    .invoice-popup .invoice .info-section .customer-side span {
        direction: ltr;
    }
    .invoice-popup .invoice .invoice-table .invoice-row .invoice-item {
        font-size: 13px;
    }
}
.dashboard-container .companies-cards-page {
    padding: 0 !important;
}
.dashboard-container .companies-cards-page .tools-card {
    border-radius: 0;
    flex-grow: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}
.dashboard-container .companies-cards-page .tools-card .filters-side {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
}
.dashboard-container
    .companies-cards-page
    .tools-card
    .filters-side
    .search-box {
    min-width: 180px;
}

.cards-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    padding-top: 0;
}
.cards-list.no-data {
    display: flex;
    justify-content: center;
}
.cards-list .card {
    position: relative;
    height: fit-content;
    padding: 0;
    overflow: hidden;
    border: 1px solid transparent;
    transition: 0.3s;
    border-width: 3px;
}
.cards-list .card:hover {
    scale: 1.03;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1450980392);
}
.cards-list .card .cover {
    width: 100%;
    height: 70px;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: center;
    align-items: center;
}
.cards-list .card .cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cards-list .card .image {
    position: absolute;
    width: 80px;
    aspect-ratio: 1/1;
    left: 50%;
    translate: -50% -50%;
    top: 70px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1215686275);
    background-color: #fff;
    border: 2px solid #fff;
    cursor: pointer;
}
.cards-list .card .image:hover img {
    scale: 1.1;
    filter: brightness(1.1);
}
.cards-list .card .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.3s;
}
.cards-list .card .content {
    padding: 15px;
    margin-top: 30px;
}
.cards-list .card .content .title {
    text-align: center;
    font-weight: 500;
    font-size: 15px;
    margin: 10px 0;
    white-space: nowrap; /* Prevents the text from wrapping to a new line */
    overflow: hidden; /* Hides any text that overflows beyond the element's width */
    text-overflow: ellipsis; /* Adds the ellipsis (...) when the text overflows */
    max-width: 100%;
}
.cards-list .card .content .category {
    text-align: center;
    background-color: #eee;
    padding: 5px;
    border-radius: 5px;
    font-weight: 500;
}
.cards-list .card .content .info-list {
    display: flex;
    margin-top: 10px;
    flex-direction: column;
    margin-bottom: 10px;
    gap: 6px;
}
.cards-list .card .content .info-list .info-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
}
.cards-list .card .content .info-list .info-item .icon {
    width: 22px;
    aspect-ratio: 1/1;
    background-color: #03045e;
    color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 11px;
}
.cards-list .card .content a:hover {
    color: #03045e;
}

@media (max-width: 1000px) {
    .dashboard-container .page.companies-cards-page .tools-card {
        border-radius: 0 !important;
    }
    .dashboard-container .page.companies-cards-page .tools-card .filters-side {
        flex-wrap: wrap;
    }
}
@media (max-width: 500px) {
    .dashboard-container .page.companies-cards-page .cards-list {
        padding: 10px;
        padding-top: 0;
        gap: 10px;
    }
}
.companies-select-popup-bg {
    z-index: 6 !important;
}

.companies-select-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    z-index: 6;
    width: calc(100% - 20px);
    max-width: 700px;
}
.companies-select-popup hr {
    margin: 20px 0;
}
.companies-select-popup .top {
    gap: 10px;
}
.companies-select-popup .top .title {
    font-size: 20px;
    font-weight: 500;
}
.companies-select-popup .top .right {
    display: flex;
    align-items: center;
    gap: 20px;
}
.companies-select-popup .top .right .selected {
    display: flex;
    align-items: center;
    gap: 5px;
}
.companies-select-popup .top .right .close-btn {
    background-color: #fff;
    border-radius: 5px;
    width: 30px;
    aspect-ratio: 1/1;
    height: unset;
    padding: 0;
    color: #000;
    border-color: #ddd;
}
.companies-select-popup .top .right .close-btn:hover {
    background-color: red;
    color: #fff;
}
.companies-select-popup .filters-and-search {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.companies-select-popup .filters-and-search .filters {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 20px;
}
.companies-select-popup .filters-and-search .search-box {
    max-width: 200px;
}
.companies-select-popup .loading-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 20px;
}
.companies-select-popup .data-list {
    display: flex;
    flex-direction: column;
    border: 1px solid #ddd;
    border-bottom: 0;
    border-left-color: transparent;
    border-radius: 10px;
    overflow: hidden;
    max-height: 300px;
    overflow-y: auto;
}
.companies-select-popup .data-list .data-row {
    display: grid;
    grid-template-columns: 40px 1fr 1fr 1fr;
    border-bottom: 1px solid #ddd;
}
.companies-select-popup .data-list .data-row.head-row {
    background-color: #eee;
}
.companies-select-popup .data-list .data-row .data-item {
    padding: 5px 10px;
    border-left: 1px solid #ddd;
    display: flex;
    align-items: center;
}

#ar .companies-select-popup .data-list {
    border-right: none;
    border-left-color: #ddd;
}
#ar .companies-select-popup .data-list .data-row .data-item {
    border-left: none;
    border-right: 1px solid #ddd;
}

@media (max-width: 500px) {
    .companies-select-popup .top .title {
        font-size: 16px;
    }
    .companies-select-popup .filters-and-search .filters {
        flex-direction: column;
    }
    .companies-select-popup .data-list {
        font-size: 12px;
    }
}
.employee-select-popup-bg {
    z-index: 6 !important;
}

.employee-select-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    z-index: 6;
    width: calc(100% - 20px);
    max-width: 700px;
}
.employee-select-popup .top {
    gap: 10px;
}
.employee-select-popup .top .title {
    font-size: 20px;
    font-weight: 500;
}
.employee-select-popup .top .right {
    display: flex;
    align-items: center;
    gap: 20px;
}
.employee-select-popup .top .right .selected {
    display: flex;
    align-items: center;
    gap: 5px;
}
.employee-select-popup .top .right .close-btn {
    background-color: #fff;
    border-radius: 5px;
    width: 30px;
    aspect-ratio: 1/1;
    height: unset;
    padding: 0;
    color: #000;
    border-color: #ddd;
}
.employee-select-popup .top .right .close-btn:hover {
    background-color: red;
    color: #fff;
}
.employee-select-popup form {
    border: none;
    padding: 0;
}
.employee-select-popup form .input-group {
    margin-bottom: 0;
}
.employee-select-popup form .search-btn {
    width: 30px !important;
    padding: 0 10px;
}
.employee-select-popup form .buttons {
    margin-top: 20px;
}

.change-inquiry-popup-bg {
    z-index: 6 !important;
}

.change-inquiry-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    z-index: 6;
    width: calc(100% - 20px);
    max-width: 700px;
}
.change-inquiry-popup .top .card-title {
    font-size: 20px !important;
}
.change-inquiry-popup .top .close-btn {
    background-color: #fff;
    border-radius: 5px;
    width: 30px;
    aspect-ratio: 1/1;
    height: unset;
    padding: 0;
    color: #000;
    border-color: #ddd;
}
.change-inquiry-popup .top .close-btn:hover {
    background-color: red;
    color: #fff;
}
.change-inquiry-popup .proposal-requests-list {
    display: flex;
    flex-direction: column;
    overflow: auto;
    max-height: 300px;
}
.change-inquiry-popup .proposal-requests-list .row {
    display: grid;
    grid-template-columns: 30px 120px 1fr 120px;
    border-bottom: 1px solid #ddd;
    color: #000;
    transition: 0.3s;
    font-weight: 400;
    min-width: 450px;
}
.change-inquiry-popup .proposal-requests-list .row:not(.head-row):hover {
    background-color: #eee;
}
.change-inquiry-popup .proposal-requests-list .row.active {
    background-color: #eee;
}
.change-inquiry-popup .proposal-requests-list .row .row-item {
    padding: 10px;
    font-size: 14px;
}

#header_public {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 100px;
    height: 60px;
    position: fixed;
    width: 100vw;
    background-color: #fff;
    z-index: 3;
    border-bottom: 1px solid #eee;
}
#header_public.no-menu .nav-side {
    display: none;
}
#header_public.no-menu .buttons-side .link-btn {
    display: none;
}
#header_public.no-menu .logo-side .logo {
    margin: 0 !important;
}
#header_public.no-menu .logo-side .menu-btn {
    display: none;
}
#header_public .menu-btn {
    position: absolute;
    left: 20px;
    top: 50%;
    translate: 0 -50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    width: 40px;
    aspect-ratio: 1/1;
    padding: 0;
    display: none;
    transition: 0.6s;
}
#header_public .menu-btn span {
    display: inline;
    width: 20px;
    height: 3px;
    background-color: #03045e;
    transition: 0.3s;
}
#header_public .menu-btn.active {
    rotate: 360deg;
}
#header_public .menu-btn.active span {
    opacity: 0;
}
#header_public .menu-btn.active span:first-child {
    translate: 0 8px;
    rotate: 45deg;
    opacity: 1;
}
#header_public .menu-btn.active span:last-child {
    translate: 0 -8px;
    rotate: -45deg;
    opacity: 1;
}
#header_public .logo-side,
#header_public .buttons-side {
    flex: 1;
}
#header_public .nav-side {
    flex: 2;
}
#header_public .logo-side .logo {
    display: block;
    width: 100px;
    aspect-ratio: 2/1;
    overflow: hidden;
}
#header_public .logo-side .logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
#header_public .nav-side {
    display: flex;
    justify-content: center;
    transition: 0.5s;
}
#header_public .nav-side ul {
    display: flex;
    align-items: center;
    gap: 15px;
}
#header_public .nav-side ul li a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
    color: #000;
}
#header_public .nav-side ul li a:hover::before {
    width: 60px;
}
#header_public .nav-side ul li a::before {
    position: absolute;
    content: "";
    bottom: -5px;
    left: 50%;
    width: 0;
    height: 1px;
    background-color: #03045e;
    translate: -50%;
    transition: 0.2s;
}
#header_public .nav-side ul li a i {
    width: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #686abe;
    display: none;
}
#header_public .buttons-side {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

@media (max-width: 1200px) {
    #header_public {
        padding: 0 20px;
        grid-template-columns: repeat(2, 1fr);
    }
    #header_public .logo-side .logo {
        margin-left: 50px;
    }
    #header_public .menu-btn {
        display: flex;
    }
    #header_public .nav-side {
        position: absolute;
        left: -250px;
        top: 60px;
        background-color: #fff;
        border: 1px solid #eee;
        padding: 10px;
        min-width: 250px;
        border-top: none;
        height: calc(100vh - 80px);
        justify-content: flex-start;
    }
    #header_public .nav-side.active {
        left: 0;
    }
    #header_public .nav-side ul {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        gap: 0;
    }
    #header_public .nav-side ul li {
        width: 100%;
    }
    #header_public .nav-side ul li a {
        width: 100%;
        padding: 10px;
        border-radius: 10px;
    }
    #header_public .nav-side ul li a::before {
        left: 10px;
        translate: 0;
        bottom: 0;
    }
    #header_public .nav-side ul li a:hover {
        background-color: rgba(238, 238, 238, 0.5607843137);
    }
    #header_public .nav-side ul li a:hover::before {
        width: calc(100% - 20px);
    }
    #header_public .nav-side ul li a i {
        display: flex;
    }
    #ar #header_public .logo-side .logo {
        margin-left: 0;
        margin-right: 50px;
    }
    #ar #header_public .menu-btn {
        left: unset;
        right: 20px;
    }
    #ar #header_public .nav-side {
        left: unset;
        right: -250px;
    }
    #ar #header_public .nav-side.active {
        right: 0;
    }
}
@media (max-width: 500px) {
    #header_public {
        display: flex;
    }
    #header_public .logo-side {
        width: fit-content;
    }
    #header_public .buttons-side {
        padding: 5px;
    }
    #header_public .buttons-side .link-btn {
        width: 35px;
        padding: 0;
        aspect-ratio: 1/1;
    }
    #header_public .buttons-side .link-btn span {
        display: none;
    }
}
#footer_public {
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    z-index: 1;
    width: 100%;
    padding: 20px 50px;
}
#footer_public .logos {
    display: flex;
    align-items: center;
    flex-grow: 1;
    justify-content: flex-end;
    gap: 40px;
}
#footer_public .logos .logo-side,
#footer_public .logos .software-company-side {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#footer_public .logos .logo-side p,
#footer_public .logos .software-company-side p {
    text-align: center;
    height: 30px;
}
#footer_public .logos .logo-side .image,
#footer_public .logos .software-company-side .image {
    width: 80px;
    aspect-ratio: 2/1.5;
    overflow: hidden;
}
#footer_public .logos .logo-side .image img,
#footer_public .logos .software-company-side .image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
#footer_public .logos .logo-side .image {
    width: 160px;
}
#footer_public .main-side {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#footer_public .main-side .links {
    display: flex;
    align-items: center;
    gap: 16px;
}
#footer_public .main-side .links a {
    font-size: 14px;
    font-weight: 500;
    position: relative;
    border-bottom: 1px solid transparent;
    transition: 0.2s;
}
#footer_public .main-side .links a:hover {
    border-bottom-color: #03045e;
}
#footer_public .main-side .links a::before {
    content: "";
    position: absolute;
    width: 1px;
    height: 100%;
    background-color: #03045e;
    left: -8px;
}
#footer_public .main-side .links a:first-child::before {
    display: none;
}
#footer_public .main-side .copyright {
    font-weight: 600;
    color: #03045e;
    margin-top: 15px;
}
#footer_public .main-side .social-media {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}
#footer_public .main-side .social-media a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    padding: 0;
    aspect-ratio: 1/1;
    font-size: 17px;
    background-color: #03045e;
    border-radius: 50%;
    color: #fff;
    border: 1px solid transparent;
}
#footer_public .main-side .social-media a:hover {
    background-color: transparent;
    color: #03045e;
    border-color: #03045e;
}

#ar #footer_public .main-side .links a:first-child::before {
    display: block;
}
#ar #footer_public .main-side .links a:last-child::before {
    display: none;
}

@media (max-width: 800px) {
    #footer_public {
        flex-direction: column;
        padding: 40px 20px;
    }
    #footer_public .main-side .links {
        flex-direction: column;
        align-items: flex-start;
    }
    #footer_public .main-side .links a {
        padding: 0 15px;
    }
    #footer_public .main-side .links a::before {
        display: none !important;
    }
    #footer_public .main-side .links a::after {
        content: "";
        position: absolute;
        width: 7px;
        aspect-ratio: 1/1;
        background-color: #03045e;
        border-radius: 50%;
        top: 50%;
        left: 0;
        translate: 0 -50%;
    }
    #footer_public .logos {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }
    #ar #footer_public .main-side .links a::after {
        left: unset;
        right: 0;
    }
}
.snow-spawner {
    position: absolute;
    top: -30px;
    left: 0;
    width: 100%;
    height: 10px;
    z-index: 2;
}
.snow-spawner .snow-item {
    display: flex;
    width: 10px;
    height: 10px;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    top: 20px;
    transition: 0.3s;
    animation: snow-drop 8s linear forwards, shake 2s infinite ease-in-out;
}
@keyframes snow-drop {
    0% {
        top: 0;
    }
    100% {
        top: 110vh;
    }
}
@keyframes shake {
    0% {
        translate: 10px;
    }
    50% {
        translate: -10px;
    }
    100% {
        translate: 10px;
    }
}

.home-page {
    display: flex;
    gap: 20px;
    flex-grow: 1;
}
.home-page .statistics-cards-section {
    gap: 20px;
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.home-page .statistics-cards-section .statistics-card {
    background-color: #fff;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1176470588);
    transition: 0.3s;
    color: #fff;
}
.home-page .statistics-cards-section .statistics-card .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3294117647);
    padding-bottom: 10px;
}
.home-page .statistics-cards-section .statistics-card .top .side {
    display: flex;
    align-items: center;
    gap: 10px;
}
.home-page .statistics-cards-section .statistics-card .top .side .icon {
    width: 50px;
    aspect-ratio: 1/1;
    background-color: rgba(255, 255, 255, 0.1843137255);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25px;
    flex-shrink: 0;
}
.home-page .statistics-cards-section .statistics-card .top .value {
    padding: 0 10px;
    display: flex;
    font-size: 25px;
    font-weight: 600;
    display: flex;
    align-items: flex-end;
    gap: 3px;
}
.home-page .statistics-cards-section .statistics-card .top .value .currency {
    font-size: 13px;
    margin-bottom: 5px;
    font-weight: 400;
}
.home-page .statistics-cards-section .statistics-card .bottom {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    flex-grow: 1;
    height: 45px;
}
.home-page .statistics-cards-section .statistics-card .bottom .side .title {
    font-size: 13px;
}
.home-page .statistics-cards-section .statistics-card .bottom .side .value {
    font-size: 18px;
}
.home-page .statistics-cards-section .statistics-card .bottom .btn-side {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 50%;
}
.home-page
    .statistics-cards-section
    .statistics-card
    .bottom
    .btn-side
    .inside-card-link {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    color: #fff;
    background-color: rgba(255, 255, 255, 0.2470588235);
    padding: 8px 15px;
    border-radius: 30px;
    white-space: nowrap;
    font-size: 14px;
    max-width: 150px;
}
.home-page
    .statistics-cards-section
    .statistics-card
    .bottom
    .btn-side
    .inside-card-link:hover {
    background-color: rgba(255, 255, 255, 0.5215686275) !important;
}
.home-page .statistics-cards-section .statistics-card.green {
    background: linear-gradient(210deg, rgb(93, 224, 115), rgb(49, 124, 61));
}
.home-page .statistics-cards-section .statistics-card.pink {
    background: linear-gradient(210deg, rgb(255, 142, 249), rgb(183, 82, 192));
}
.home-page .statistics-cards-section .statistics-card.cyan {
    background: linear-gradient(210deg, rgb(111, 229, 238), rgb(52, 149, 161));
}
.home-page .statistics-cards-section .statistics-card.blue {
    background: linear-gradient(210deg, rgb(102, 182, 247), rgb(23, 83, 161));
}
.home-page .statistics-cards-section .statistics-card.yellow {
    background: linear-gradient(210deg, rgb(253, 228, 118), rgb(160, 145, 10));
}
.home-page .statistics-cards-section .statistics-card.orange {
    background: linear-gradient(210deg, rgb(247, 190, 105), rgb(177, 111, 36));
}
.home-page .statistics-cards-section .statistics-card.red {
    background: linear-gradient(210deg, rgb(255, 136, 136), rgb(219, 58, 58));
}
.home-page .statistics-cards-section .statistics-card.purple {
    background: linear-gradient(210deg, rgb(192, 169, 255), rgb(106, 58, 219));
}
.home-page .statistics-cards-section .statistics-card-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1176470588);
    transition: 0.3s;
    height: 40px;
    border-radius: 10px;
}
.home-page .statistics-cards-section .statistics-card-btn:hover {
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2666666667);
    filter: brightness(1.1);
}
.home-page .card {
    position: relative;
    overflow: hidden;
}
.home-page .card .bg-img {
    position: absolute;
    left: 0;
    z-index: 0;
    max-width: 350px;
}
.home-page .card .bg-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.home-page .card .logo,
.home-page .card .page-title,
.home-page .card .home-buttons-section {
    position: relative;
    z-index: 1;
}
.home-page .card .logo {
    max-width: 140px;
    aspect-ratio: 2/1.5;
    overflow: hidden;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.home-page .card .logo img {
    width: 100%;
    height: 130%;
    object-fit: contain;
}
.home-page .card .page-title {
    color: #03045e;
    font-size: 20px;
}
.home-page .card .home-buttons-section {
    display: grid;
    gap: 15px;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    margin-top: 20px;
}
.home-page .card .home-buttons-section a {
    aspect-ratio: 2/1;
    border-radius: 10px;
    border: 1px solid #ddd;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: #fff;
    transition: 1s;
    overflow: hidden;
}
.home-page .card .home-buttons-section a::before {
    content: "";
    position: absolute;
    width: 120%;
    height: 70%;
    background-color: #fff;
    opacity: 0.45;
    rotate: 45deg;
    right: -100%;
    top: -100%;
    transition: 1s;
    box-shadow: 0 0 20px 2px #fff;
}
.home-page .card .home-buttons-section a:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.062745098);
    background-color: rgba(200, 233, 255, 0.5019607843);
    transition: 0.2s;
}
.home-page .card .home-buttons-section a:hover::before {
    top: 20%;
    right: -65%;
    transition: 0.3s;
}
.home-page .card .home-buttons-section a i {
    width: 50px;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #686abe;
    font-size: 35px;
}
.home-page .card .home-buttons-section a span {
    font-size: 14px;
    font-weight: 600;
}

#en .home-page .card .bg-img {
    left: unset;
    right: 0;
}
#en .home-page .card .bg-img img {
    rotate: 180deg;
}

@media (max-width: 500px) {
    .home-page {
        gap: 10px;
    }
    .home-page .statistics-cards-section {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 10px;
    }
    .home-page .statistics-cards-section .statistics-card .top {
        gap: 20px;
        flex-wrap: wrap;
    }
    .home-page .statistics-cards-section .statistics-card .top .side .icon {
        width: 35px;
        font-size: 16px;
    }
    .home-page .statistics-cards-section .statistics-card .top .side .title {
        font-size: 14px;
    }
    .home-page .statistics-cards-section .statistics-card .top .value {
        font-size: 20px;
    }
    .home-page
        .statistics-cards-section
        .statistics-card
        .top
        .value
        .currency {
        margin-bottom: 3px;
    }
}
.profile-cover-photo {
    width: 100%;
    aspect-ratio: 4/1;
    margin-top: 60px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 250px;
    min-height: 100px;
    box-shadow: 0 -10px 15px rgba(0, 0, 0, 0.1764705882) inset;
    position: sticky;
    top: 60px;
}
.profile-cover-photo img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.profile-page {
    z-index: 2;
    flex-direction: row !important;
    background-color: #eee;
    border-radius: 10px;
    margin: 0 auto;
    width: 100%;
    max-width: 1200px;
    gap: 20px;
    margin-top: 0 !important;
    border: 1px solid #ddd;
    border-top: none;
    margin-bottom: 20px;
}
.profile-page .card.list-card,
.profile-page .card .list-section {
    flex-grow: 0;
}
.profile-page .card.list-card .list,
.profile-page .card .list-section .list {
    max-height: 300px;
    overflow-y: auto;
}
.profile-page .card.list-card .list .row,
.profile-page .card .list-section .list .row {
    display: grid;
    font-size: 12px;
}
.profile-page .card.list-card .list .row:not(:last-child),
.profile-page .card .list-section .list .row:not(:last-child) {
    border-bottom: 1px solid #ddd;
}
.profile-page .card.list-card .list .row.total-row,
.profile-page .card .list-section .list .row.total-row {
    font-weight: 600;
}
.profile-page .card.list-card .list .row .row-item,
.profile-page .card .list-section .list .row .row-item {
    padding: 5px;
}
.profile-page .card.list-card .list .row .row-item .image,
.profile-page .card .list-section .list .row .row-item .image {
    width: 25px;
    aspect-ratio: 1/1;
    overflow: hidden;
    border-radius: 50%;
    border: 1px solid #ddd;
    cursor: pointer;
}
.profile-page .card.list-card .list .row .row-item .image.square,
.profile-page .card .list-section .list .row .row-item .image.square {
    border-radius: 5px;
}
.profile-page .card.list-card .list .row .row-item .image:hover img,
.profile-page .card .list-section .list .row .row-item .image:hover img {
    filter: brightness(1.1);
    scale: 1.1;
}
.profile-page .card.list-card .list .row .row-item .image img,
.profile-page .card .list-section .list .row .row-item .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.3s;
}
.profile-page .card.list-card.approvals-series-list-card .list .row,
.profile-page .card .list-section.approvals-series-list-card .list .row {
    min-width: 500px;
}
.profile-page .card.list-card.recipients-list-card .list .row,
.profile-page .card .list-section.recipients-list-card .list .row {
    min-width: 400px;
}
.profile-page .section-title {
    font-weight: 500;
    font-size: 20px;
    padding: 10px 0;
}
.profile-page .permissions-section .count {
    font-size: 14px;
}
.profile-page .permissions-section .permissions-groups-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.profile-page .permissions-section .permissions-groups-list .permissions-group {
    border-bottom: 2px solid #eee;
}
.profile-page
    .permissions-section
    .permissions-groups-list
    .permissions-group
    .group-title {
    font-weight: 500;
    font-size: 18px;
}
.profile-page
    .permissions-section
    .permissions-groups-list
    .permissions-group
    .group-permissions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 10px 0;
}
.profile-page
    .permissions-section
    .permissions-groups-list
    .permissions-group
    .group-permissions
    .permission-item {
    display: flex;
    align-items: center;
    gap: 5px;
}
.profile-page
    .permissions-section
    .permissions-groups-list
    .permissions-group
    .group-permissions
    .permission-item
    i {
    width: 20px;
    aspect-ratio: 1/1;
    background-color: #03045e;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    color: #fff;
    font-size: 11px;
}
.profile-page
    .permissions-section
    .permissions-groups-list
    .permissions-group
    .group-permissions
    .permission-item
    i.fa-check {
    background-color: rgb(62, 165, 37);
}
.profile-page
    .permissions-section
    .permissions-groups-list
    .permissions-group
    .group-permissions
    .permission-item
    i.fa-x {
    background-color: rgb(233, 81, 81);
}
.profile-page .rating-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 20px;
}
.profile-page .rating-box .rating-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}
.profile-page .rating-box .rating-item .text {
    display: flex;
    justify-content: space-between;
    flex: 1;
    font-size: 10px;
    gap: 5px;
}
.profile-page .rating-box .rating-item .text .text-title {
    font-weight: 500;
    font-size: 12px;
}
.profile-page .rating-box .rating-item .text .text-value {
    white-space: nowrap;
    margin-top: 1px;
}
.profile-page .rating-box .rating-item .stars {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-top: 2px;
}
.profile-page .rating-box .rating-item .stars i {
    font-size: 11px;
    color: #ccc;
}
.profile-page .rating-box .rating-item .stars i.active {
    color: rgb(255, 187, 0);
}
.profile-page > .left {
    flex: 1.1;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex-shrink: 0;
}
.profile-page > .left .top-left-card {
    flex-grow: 0;
}
.profile-page > .left .top-left-card .main-info-box {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.profile-page > .left .top-left-card .main-info-box .image {
    position: absolute;
    top: -80px;
    left: 50%;
    translate: -50% 0;
    width: 120px;
    aspect-ratio: 1/1;
    overflow: hidden;
    border-radius: 50%;
    border: 5px solid #fff;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 5px 7px rgba(0, 0, 0, 0.137254902);
    cursor: pointer;
}
.profile-page > .left .top-left-card .main-info-box .image:hover img {
    scale: 1.1;
    filter: brightness(0.9);
}
.profile-page > .left .top-left-card .main-info-box .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.3s;
}
.profile-page > .left .top-left-card .main-info-box .title {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 5px;
    margin-top: 60px;
}
.profile-page > .left .top-left-card .main-info-box .category {
    background-color: #eee;
    padding: 5px 15px;
    border-radius: 5px;
    color: #686abe;
    margin-top: 10px;
    width: 100%;
    font-weight: 500;
}
.profile-page > .left .top-left-card .buttons {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.profile-page > .left .top-left-card .buttons a,
.profile-page > .left .top-left-card .buttons button {
    flex: 1;
    white-space: nowrap;
    font-size: 14px;
    min-width: 150px;
}
.profile-page > .left .top-left-card .buttons a:hover,
.profile-page > .left .top-left-card .buttons button:hover {
    color: #03045e;
}
.profile-page > .left .top-left-card .buttons a.bg-dark-green:hover,
.profile-page > .left .top-left-card .buttons button.bg-dark-green:hover {
    color: rgb(62, 165, 37);
}
.profile-page > .left .top-left-card hr {
    margin: 20px 0;
}
.profile-page > .left .top-left-card .address-boxes-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.profile-page > .left .top-left-card .address-boxes-list .address-box {
    display: flex;
    gap: 10px;
}
.profile-page > .left .top-left-card .address-boxes-list .address-box .icon {
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #03045e;
    color: #fff;
    border-radius: 50%;
    flex-shrink: 0;
    font-size: 12px;
    padding: 0;
}
.profile-page > .left .top-left-card .address-boxes-list .address-box span {
    display: flex;
    font-size: 12px;
    padding-top: 7px;
}
.profile-page
    > .left
    .top-left-card
    .address-boxes-list
    .address-box
    .text-title {
    font-size: 14px;
    font-weight: 500;
    min-width: 100px;
    padding-top: 4px;
}
.profile-page > .left .forms-card {
    flex-grow: 0;
}
.profile-page > .right {
    flex: 2;
    overflow: hidden;
}
.profile-page > .right .main-card {
    max-width: 800px;
}
.profile-page > .right .main-card .first-info-section .info-item,
.profile-page > .right .main-card .files-section,
.profile-page > .right .main-card .list-section {
    border-bottom: 2px solid #eee;
}
.profile-page > .right .main-card .files-section {
    display: flex;
    flex-direction: column;
    padding: 20px 0;
    gap: 10px;
}
.profile-page > .right .main-card .files-section .info-item {
    display: flex;
    gap: 10px !important;
    flex-direction: column;
    gap: 0;
    border-bottom: 0;
    padding: 10px;
    border-radius: 10px;
    background-color: #eee;
    overflow: hidden;
}
.profile-page > .right .main-card .files-section .info-item .info-item-title {
    max-width: unset;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
    display: flex;
    align-items: center;
    gap: 10px;
}
.profile-page
    > .right
    .main-card
    .files-section
    .info-item
    .info-item-title
    .expired,
.profile-page
    > .right
    .main-card
    .files-section
    .info-item
    .info-item-title
    .valid {
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    padding: 2px 7px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.profile-page
    > .right
    .main-card
    .files-section
    .info-item
    .info-item-title
    .expired
    i,
.profile-page
    > .right
    .main-card
    .files-section
    .info-item
    .info-item-title
    .valid
    i {
    color: inherit;
}
.profile-page
    > .right
    .main-card
    .files-section
    .info-item
    .info-item-title.space-between {
    justify-content: space-between;
}
.profile-page
    > .right
    .main-card
    .files-section
    .info-item
    .info-item-title
    .expired {
    background-color: rgba(255, 0, 0, 0.664);
}
.profile-page
    > .right
    .main-card
    .files-section
    .info-item
    .info-item-title
    .valid {
    background-color: rgb(62, 165, 37);
}
.profile-page > .right .main-card .files-section .info-item .info-item-value {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    overflow: hidden;
    transition: 0.3s;
}
.profile-page
    > .right
    .main-card
    .files-section
    .info-item
    .info-item-value
    .file-item {
    position: relative;
    width: 100px;
    aspect-ratio: 3/4;
    overflow: hidden;
    border-radius: 7px;
    border: 1px solid #ddd;
}
.profile-page
    > .right
    .main-card
    .files-section
    .info-item
    .info-item-value
    .file-item
    .download-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 25px;
    aspect-ratio: 1/1;
    z-index: 2;
    background-color: rgba(0, 0, 0, 0.2470588235);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.3568627451);
    color: #fff;
}
.profile-page
    > .right
    .main-card
    .files-section
    .info-item
    .info-item-value
    .file-item
    .download-btn:hover {
    background-color: rgba(0, 0, 0, 0.6235294118) !important;
    border-color: rgba(255, 255, 255, 0.662745098);
}
.profile-page
    > .right
    .main-card
    .files-section
    .info-item
    .info-item-value
    .file-item
    .image,
.profile-page
    > .right
    .main-card
    .files-section
    .info-item
    .info-item-value
    .file-item
    .pdf {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    cursor: pointer;
}
.profile-page
    > .right
    .main-card
    .files-section
    .info-item
    .info-item-value
    .file-item
    .image:hover
    img,
.profile-page
    > .right
    .main-card
    .files-section
    .info-item
    .info-item-value
    .file-item
    .image:hover
    iframe,
.profile-page
    > .right
    .main-card
    .files-section
    .info-item
    .info-item-value
    .file-item
    .pdf:hover
    img,
.profile-page
    > .right
    .main-card
    .files-section
    .info-item
    .info-item-value
    .file-item
    .pdf:hover
    iframe {
    filter: brightness(1.1);
    scale: 1.1;
}
.profile-page
    > .right
    .main-card
    .files-section
    .info-item
    .info-item-value
    .file-item
    .image
    img,
.profile-page
    > .right
    .main-card
    .files-section
    .info-item
    .info-item-value
    .file-item
    .image
    iframe,
.profile-page
    > .right
    .main-card
    .files-section
    .info-item
    .info-item-value
    .file-item
    .pdf
    img,
.profile-page
    > .right
    .main-card
    .files-section
    .info-item
    .info-item-value
    .file-item
    .pdf
    iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.3s;
}
.profile-page
    > .right
    .main-card
    .files-section
    .info-item
    .info-item-value
    .file-item
    .pdf {
    position: relative;
}
.profile-page
    > .right
    .main-card
    .files-section
    .info-item
    .info-item-value
    .file-item
    .pdf
    iframe {
    width: 160%;
}
.profile-page
    > .right
    .main-card
    .files-section
    .info-item
    .info-item-value
    .file-item
    .pdf::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 2;
}
.profile-page
    > .right
    .main-card
    .files-section
    .info-item
    .info-item-value
    .file-item
    .pdf::after {
    content: "PDF";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 25px;
    background-color: rgba(0, 0, 0, 0.4509803922);
    z-index: 2;
    color: #fff;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
}
.profile-page > .right .main-card .files-section .info-item .dates {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}
.profile-page
    > .right
    .main-card
    .files-section
    .info-item
    .dates
    .date-box
    .text {
    font-weight: 500;
}
.profile-page
    > .right
    .main-card
    .files-section
    .info-item
    .dates
    .date-box
    .date {
    font-size: 14px;
}
.profile-page .info-item {
    display: flex;
    gap: 20px;
    padding: 10px 0;
}
.profile-page .info-item .info-item-title {
    font-size: 14px;
    font-weight: 500;
    max-width: 250px;
    min-width: 100px;
    flex-shrink: 0;
    flex: 1;
    display: flex;
    height: fit-content;
    gap: 10px;
}
.profile-page .info-item .info-item-title i {
    width: 30px;
    height: 30px;
    background-color: #03045e;
    flex-shrink: 0;
    border-radius: 50%;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
}
.profile-page .info-item .info-item-title span {
    padding-top: 5px;
}
.profile-page .info-item .info-item-value {
    font-size: 13px;
    flex: 2;
    display: flex;
    align-items: center;
}
.profile-page .info-item .info-item-value.multi-values {
    display: grid;
    gap: 10px;
}
.profile-page .info-item .info-item-value.multi-values.row {
    display: flex;
    flex-wrap: wrap;
}
.profile-page .info-item .info-item-value.multi-values a.value-item {
    background-color: #eee;
    padding: 5px 10px;
    border-radius: 5px;
    border: 1px solid transparent;
}
.profile-page .info-item .info-item-value.multi-values a.value-item:hover {
    padding: 5px 15px;
    border-color: #686abe;
    background-color: #fff;
}
.profile-page .info-item .info-item-value.city-list {
    display: flex;
    gap: 5px;
    align-items: center;
    flex-wrap: wrap;
}
.profile-page .info-item .info-item-value.city-list .city-item {
    background-color: #eee;
    padding: 5px 7px;
    border-radius: 5px;
    text-align: center;
    min-width: 70px;
}

.user-profile-page {
    flex-direction: column !important;
    max-width: 600px;
}

@media (max-width: 1460px) {
    .profile-page {
        border: 10px;
        margin-bottom: 10px;
    }
}
@media (max-width: 1200px) {
    .profile-page .right .main-card .first-info-section .info-item {
        flex-direction: column;
        gap: 5px;
    }
    .profile-page
        .right
        .main-card
        .first-info-section
        .info-item
        .info-item-title,
    .profile-page
        .right
        .main-card
        .first-info-section
        .info-item
        .info-item-value {
        flex: unset;
    }
    .profile-page
        .right
        .main-card
        .first-info-section
        .info-item
        .info-item-title {
        max-width: unset;
    }
    .profile-page
        .right
        .main-card
        .first-info-section
        .info-item
        .info-item-value {
        padding: 0 40px;
    }
}
@media (max-width: 1100px) {
    .profile-page {
        flex-direction: column !important;
    }
    .profile-page .rating-box {
        background-color: #fff;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 7px 7px rgba(0, 0, 0, 0.0941176471);
    }
}
@media (max-width: 500px) {
    .profile-page {
        gap: 10px;
    }
    .profile-page .card,
    .profile-page .rating-box {
        padding: 15px !important;
    }
    .profile-page .left {
        gap: 10px;
        min-width: unset;
    }
    .profile-page .left .top-left-card .buttons {
        flex-direction: column;
    }
    .profile-page .left .top-left-card .buttons button,
    .profile-page .left .top-left-card .buttons a {
        width: 100%;
        max-width: 200px;
    }
}
#ar .profile-page .left .rating-box .rating-item .stars {
    direction: ltr;
}

.partner-profile {
    flex-direction: column !important;
    align-items: center;
}
.partner-profile .top-left-card {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}
.partner-profile .top-left-card .left {
    flex: 1;
    min-width: 300px;
}
.partner-profile .top-left-card .right {
    flex: 2;
    min-width: 250px;
    max-width: 500px;
}
.partner-profile .rating-box {
    background-color: #eee;
    padding: 10px;
    border-radius: 10px;
}
.partner-profile > .left,
.partner-profile > .right {
    width: 100%;
    flex: unset;
}
.partner-profile > .left .buttons button,
.partner-profile > .left .buttons a,
.partner-profile > .right .buttons button,
.partner-profile > .right .buttons a {
    max-width: 250px;
}
.partner-profile .right .card {
    padding: 10px;
    max-width: unset;
}
.partner-profile .right .tabs-btns {
    display: flex;
    align-items: flex-end;
    padding: 10px;
    padding-top: 20px;
    padding-bottom: 0;
    gap: 10px;
    background-color: #ccc;
    border-radius: 6px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: 0 -8px 15px rgba(0, 0, 0, 0.1764705882) inset;
    overflow-x: auto;
}
.partner-profile .right .tabs-btns .tab-btn {
    padding: 5px 15px;
    background-color: #eee;
    border-radius: 10px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    color: #000;
    box-shadow: 0 -5px 8px rgba(0, 0, 0, 0.1764705882) inset;
    white-space: nowrap;
}
.partner-profile .right .tabs-btns .tab-btn:hover {
    filter: brightness(1.1);
}
.partner-profile .right .tabs-btns .tab-btn.active {
    background-color: #fff;
    box-shadow: none;
    padding-bottom: 10px;
}
.partner-profile .right .tab {
    padding: 10px;
    padding-top: 20px;
}
.partner-profile .table {
    box-shadow: none;
    border: none;
    padding: 0;
}

@media (max-width: 1100px) {
    .partner-profile .rating-box {
        box-shadow: none;
    }
}
@media (max-width: 750px) {
    .partner-profile .top-left-card {
        flex-direction: column;
    }
    .partner-profile .top-left-card .left {
        min-width: unset;
    }
}
@media (max-width: 500px) {
    .dashboard-container .page.partner-profile {
        padding: 0 !important;
    }
    .dashboard-container .page.partner-profile .card {
        border-radius: 0 !important;
    }
    .dashboard-container .page.partner-profile .right .main-card {
        padding: 10px !important;
    }
    .dashboard-container .page.partner-profile .right .main-card .tab {
        padding: 0;
        padding-top: 10px;
    }
}
.edit-profile-page {
    justify-content: center;
    flex-direction: row !important;
}
.edit-profile-page .card {
    max-width: 800px;
}
.edit-profile-page .card form .box {
    max-height: unset;
}
.edit-profile-page .card form .bottom {
    justify-content: space-between;
}
.edit-profile-page .card form .bottom .hint {
    justify-content: flex-end;
}

.old-files-box {
    margin-bottom: 10px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 20px;
}
.old-files-box:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.old-files-box .old-files-title {
    font-weight: 400;
    font-size: 15px;
    margin-bottom: 5px;
    padding: 0 10px;
}
.old-files-box .old-files-list {
    display: flex;
    align-items: center;
    gap: 10px;
}
.old-files-box .old-files-list .file-box {
    position: relative;
    width: 100px;
    aspect-ratio: 3/4;
    overflow: hidden;
    border-radius: 7px;
    border: 1px solid #ddd;
}
.old-files-box .old-files-list .file-box .old-file-remove-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 25px;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.3843137255);
    border: 1px solid rgba(255, 255, 255, 0.2745098039);
    z-index: 2;
    border-radius: 5px;
    color: #fff;
    transition: 0.3s;
}
.old-files-box .old-files-list .file-box .old-file-remove-btn:hover {
    background-color: rgba(0, 0, 0, 0.5803921569);
}
.old-files-box .old-files-list .file-box .image,
.old-files-box .old-files-list .file-box .pdf {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    cursor: pointer;
    transition: 0.3s;
}
.old-files-box .old-files-list .file-box .image:hover,
.old-files-box .old-files-list .file-box .pdf:hover {
    filter: brightness(1.2);
}
.old-files-box .old-files-list .file-box .image:hover img,
.old-files-box .old-files-list .file-box .image:hover iframe,
.old-files-box .old-files-list .file-box .pdf:hover img,
.old-files-box .old-files-list .file-box .pdf:hover iframe {
    scale: 1.1;
}
.old-files-box .old-files-list .file-box .image img,
.old-files-box .old-files-list .file-box .pdf img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.old-files-box .old-files-list .file-box .image img,
.old-files-box .old-files-list .file-box .image iframe,
.old-files-box .old-files-list .file-box .pdf img,
.old-files-box .old-files-list .file-box .pdf iframe {
    transition: 0.3s;
}
.old-files-box .old-files-list .file-box .pdf {
    position: relative;
}
.old-files-box .old-files-list .file-box .pdf::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

@media (max-width: 600px) {
    .edit-profile-page {
        padding: 0 !important;
    }
    .edit-profile-page .card {
        border-radius: 0;
        padding: 10px;
    }
    .edit-profile-page .card form .box .form-tabs {
        padding: 10px;
    }
}
.current-subscription-card {
    flex-grow: 0 !important;
}
.current-subscription-card .card-title {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}
.current-subscription-card .card-title .free-trial-box {
    background-color: rgb(62, 165, 37);
    color: #fff;
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 5px;
    font-weight: 500;
}
.current-subscription-card .box {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}
.current-subscription-card .box p {
    font-size: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    flex: 1;
    white-space: nowrap;
    background-color: #ddd;
    padding: 10px;
    border-radius: 10px;
}
.current-subscription-card .box p .title {
    font-size: 14px;
    font-weight: 500;
}
.current-subscription-card .box p .value {
    font-size: 20px;
}
.current-subscription-card .buttons {
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
}
.current-subscription-card .buttons button {
    height: 35px;
}

@media (max-width: 700px) {
    .current-subscription-card .box {
        gap: 10px;
        flex-direction: column;
    }
    .current-subscription-card .box p {
        padding: 10px;
    }
    .current-subscription-card .buttons {
        margin-top: 10px;
    }
}
.view-proposal-request .left {
    flex: 1.5;
}

.view-proposal .left {
    flex: 1.5;
}
.view-proposal .list-card.approvals-series-list-card .list .row {
    min-width: 700px !important;
}
.view-proposal .quantity-list .list .row {
    min-width: 650px !important;
}
.view-proposal .payments-list .list .row {
    min-width: 900px !important;
}
.view-proposal .payments-list .list .row button {
    height: 25px !important;
}

.confirm-payment-popup-bg,
.purchase-order-bg {
    z-index: 7 !important;
}

.confirm-payment-popup,
.purchase-order-popup {
    position: fixed;
    width: 100%;
    max-width: 350px !important;
    background: #fff;
    top: 50%;
    left: 50%;
    z-index: 7;
    border-radius: 15px;
    padding: 20px;
    transform: translate(-50%, -50%);
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.16);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    min-height: 180px;
    animation: show-popup 0.4s !important;
    margin-top: 10px;
    width: 100%;
}
.confirm-payment-popup.hide,
.purchase-order-popup.hide {
    display: none;
}
.confirm-payment-popup .popup-title,
.purchase-order-popup .popup-title {
    font-weight: 500;
    font-size: 25px;
}
.confirm-payment-popup .popup-list,
.purchase-order-popup .popup-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: start;
    width: 100%;
    padding: 0 15px;
    padding-top: 10px;
    border-top: 1px solid #ddd;
    max-height: 200px;
    overflow-y: auto;
}
.confirm-payment-popup form,
.purchase-order-popup form {
    display: flex;
    flex-direction: column !important;
    gap: 10px;
    width: 100%;
    border: none;
    padding: 0;
    flex-direction: row;
    margin-top: 0;
}
.confirm-payment-popup form .input-group,
.purchase-order-popup form .input-group {
    text-align: start;
}
.confirm-payment-popup form .input-group .input,
.purchase-order-popup form .input-group .input {
    height: 35px;
}
.confirm-payment-popup form .custom-file-input,
.purchase-order-popup form .custom-file-input {
    width: 100%;
}
.confirm-payment-popup form .custom-file-input .file-preview,
.purchase-order-popup form .custom-file-input .file-preview {
    flex-wrap: nowrap;
    overflow-x: auto;
    width: 100%;
}
.confirm-payment-popup form .custom-file-input .file-preview .file-box,
.purchase-order-popup form .custom-file-input .file-preview .file-box {
    flex-shrink: 0;
}
.confirm-payment-popup .buttons,
.purchase-order-popup .buttons {
    display: flex;
    gap: 15px;
    align-items: center;
    width: 100%;
    margin-top: auto;
}
.confirm-payment-popup .buttons button,
.confirm-payment-popup .buttons a,
.purchase-order-popup .buttons button,
.purchase-order-popup .buttons a {
    width: 50%;
    height: 35px !important;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 30px;
    gap: 5px;
}
.confirm-payment-popup .buttons button.cancel-btn,
.confirm-payment-popup .buttons a.cancel-btn,
.purchase-order-popup .buttons button.cancel-btn,
.purchase-order-popup .buttons a.cancel-btn {
    background-color: #aaa;
}
.confirm-payment-popup .buttons button.cancel-btn:hover,
.confirm-payment-popup .buttons a.cancel-btn:hover,
.purchase-order-popup .buttons button.cancel-btn:hover,
.purchase-order-popup .buttons a.cancel-btn:hover {
    background-color: #ccc;
}

@keyframes show-popup {
    from {
        opacity: 0;
        translate: 0 50px;
    }
    to {
        opacity: 1;
        translate: 0 0;
    }
}
.inquiries-page {
    align-items: center;
}
.inquiries-page .inquiries-card {
    padding: 0;
    display: flex;
    flex-direction: column;
    flex-grow: 0;
    width: 100%;
    max-width: 1100px;
}
.inquiries-page .inquiries-card .top {
    padding: 10px;
    border-bottom: 1px solid #ddd;
    min-height: 60px;
    flex-wrap: wrap;
    gap: 10px;
}
.inquiries-page .inquiries-card .top .left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.inquiries-page .inquiries-card .top .left .icon {
    width: 35px;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: #03045e;
    color: #fff;
}
.inquiries-page .inquiries-card .top .left .card-title {
    font-size: 20px;
}
.inquiries-page .inquiries-card .top .center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
.inquiries-page .inquiries-card .top .center .proposal-request-name,
.inquiries-page .inquiries-card .top .center .proposal-request-number {
    font-weight: 400;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.inquiries-page .inquiries-card .top .center .proposal-request-name {
    font-size: 12px;
}
.inquiries-page .inquiries-card .top .right .change-proposal-request-btn {
    height: 35px;
}
.inquiries-page .inquiries-card .container {
    display: flex;
    padding: 0;
    margin-top: 0;
    flex-grow: 1;
}
.inquiries-page .inquiries-card .container .inquiries-sidebar {
    width: 250px;
    border-right: 1px solid #ddd;
    flex-shrink: 0;
    transition: 0.3s;
}
.inquiries-page .inquiries-card .container .inquiries-sidebar .top {
    display: flex;
    align-items: center;
    height: 50px;
    min-height: unset;
}
.inquiries-page
    .inquiries-card
    .container
    .inquiries-sidebar
    .top
    .sidebar-title {
    font-size: 16px;
    font-weight: 400;
}
.inquiries-page .inquiries-card .container .inquiries-sidebar .list {
    max-height: 450px;
    overflow-y: auto;
}
.inquiries-page
    .inquiries-card
    .container
    .inquiries-sidebar
    .list
    .supplier-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
    transition: 0.3s;
    color: #000;
    font-weight: 400;
}
.inquiries-page
    .inquiries-card
    .container
    .inquiries-sidebar
    .list
    .supplier-item.active {
    background-color: #eee;
}
.inquiries-page
    .inquiries-card
    .container
    .inquiries-sidebar
    .list
    .supplier-item:hover {
    background-color: #eee;
}
.inquiries-page
    .inquiries-card
    .container
    .inquiries-sidebar
    .list
    .supplier-item
    .image {
    width: 40px;
    aspect-ratio: 1/1;
    overflow: hidden;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid #ddd;
}
.inquiries-page
    .inquiries-card
    .container
    .inquiries-sidebar
    .list
    .supplier-item
    .image
    img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.inquiries-page
    .inquiries-card
    .container
    .inquiries-sidebar
    .list
    .supplier-item
    .text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex-grow: 1;
}
.inquiries-page
    .inquiries-card
    .container
    .inquiries-sidebar
    .list
    .supplier-item
    .text
    .company-name {
    font-size: 15px;
    white-space: nowrap; /* Prevent text from wrapping to the next line */
    overflow: hidden; /* Hide the overflowing text */
    text-overflow: ellipsis; /* Add three dots (...) at the end */
    width: 100px;
}
.inquiries-page
    .inquiries-card
    .container
    .inquiries-sidebar
    .list
    .supplier-item
    .text
    .last-msg {
    font-size: 12px;
    white-space: nowrap; /* Prevent text from wrapping to the next line */
    overflow: hidden; /* Hide the overflowing text */
    text-overflow: ellipsis; /* Add three dots (...) at the end */
    width: 100px;
}
.inquiries-page
    .inquiries-card
    .container
    .inquiries-sidebar
    .list
    .supplier-item
    .text
    .last-msg.green {
    font-weight: 600;
    color: rgb(62, 165, 37);
}
.inquiries-page
    .inquiries-card
    .container
    .inquiries-sidebar
    .list
    .supplier-item
    .side {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-self: flex-start;
}
.inquiries-page
    .inquiries-card
    .container
    .inquiries-sidebar
    .list
    .supplier-item
    .side
    .date {
    margin-top: 2px;
    font-size: 12px;
}
.inquiries-page
    .inquiries-card
    .container
    .inquiries-sidebar
    .list
    .supplier-item
    .side
    .icons {
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: flex-end;
}
.inquiries-page
    .inquiries-card
    .container
    .inquiries-sidebar
    .list
    .supplier-item
    .side
    .icons
    .icon {
    width: 15px;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    background-color: #999;
    font-size: 11px;
    border-radius: 50%;
}
.inquiries-page
    .inquiries-card
    .container
    .inquiries-sidebar
    .list
    .supplier-item
    .side
    .icons
    .icon.need-reply-icon {
    background-color: rgb(62, 165, 37);
}
.inquiries-page .inquiries-card .container .inquiry-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    height: 500px;
}
.inquiries-page .inquiries-card .container .inquiry-container .top-box {
    height: 50px;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px;
}
.inquiries-page .inquiries-card .container .inquiry-container .top-box .left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.inquiries-page
    .inquiries-card
    .container
    .inquiry-container
    .top-box
    .left
    .image {
    width: 35px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid #ddd;
    cursor: pointer;
}
.inquiries-page
    .inquiries-card
    .container
    .inquiry-container
    .top-box
    .left
    .image:hover
    img {
    filter: brightness(1.1);
    scale: 1.1;
}
.inquiries-page
    .inquiries-card
    .container
    .inquiry-container
    .top-box
    .left
    .image
    img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.3s;
}
.inquiries-page
    .inquiries-card
    .container
    .inquiry-container
    .top-box
    .left
    .text {
    display: flex;
    flex-direction: column;
}
.inquiries-page
    .inquiries-card
    .container
    .inquiry-container
    .top-box
    .left
    .text
    .company-name {
    color: #000;
    font-size: 14px;
}
.inquiries-page
    .inquiries-card
    .container
    .inquiry-container
    .top-box
    .left
    .text
    .view-proposal {
    font-size: 12px;
}
.inquiries-page .inquiries-card .container .inquiry-container .top-box .right {
    display: flex;
    align-items: center;
    gap: 10px;
}
.inquiries-page
    .inquiries-card
    .container
    .inquiry-container
    .top-box
    .right
    .inquiries-header-btns {
    display: flex;
    align-items: center;
    gap: 10px;
}
.inquiries-page
    .inquiries-card
    .container
    .inquiry-container
    .top-box
    .right
    .inquiries-header-btns
    .inquiry-header-btn {
    width: 35px;
    aspect-ratio: 1/1;
    padding: 0;
}
.inquiries-page
    .inquiries-card
    .container
    .inquiry-container
    .top-box
    .right
    .found-inquiries-box {
    display: flex;
    align-items: center;
    gap: 10px;
}
.inquiries-page
    .inquiries-card
    .container
    .inquiry-container
    .top-box
    .right
    .found-inquiries-box
    .buttons {
    display: flex;
    align-items: center;
    gap: 5px;
}
.inquiries-page
    .inquiries-card
    .container
    .inquiry-container
    .top-box
    .right
    .found-inquiries-box
    .buttons
    button {
    width: 25px;
    height: unset;
    aspect-ratio: 1/1;
    padding: 0;
}
.inquiries-page .inquiries-card .container .inquiry-container .inquiries-list {
    flex-grow: 1;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    scroll-behavior: auto;
}
.inquiries-page
    .inquiries-card
    .container
    .inquiry-container
    .inquiries-list
    .inquiry-item {
    display: flex;
    gap: 10px;
}
.inquiries-page
    .inquiries-card
    .container
    .inquiry-container
    .inquiries-list
    .inquiry-item
    .inquiry {
    border-radius: 10px;
    flex: 1;
    display: flex;
    align-items: flex-end;
    gap: 5px;
}
.inquiries-page
    .inquiries-card
    .container
    .inquiry-container
    .inquiries-list
    .inquiry-item
    .inquiry.found
    .content {
    border-color: rgb(62, 165, 37);
}
.inquiries-page
    .inquiries-card
    .container
    .inquiry-container
    .inquiries-list
    .inquiry-item
    .inquiry.from-me
    .content {
    background-color: rgb(207, 233, 255);
}
.inquiries-page
    .inquiries-card
    .container
    .inquiry-container
    .inquiries-list
    .inquiry-item
    .inquiry.reply {
    flex-direction: row-reverse;
}
.inquiries-page
    .inquiries-card
    .container
    .inquiry-container
    .inquiries-list
    .inquiry-item
    .inquiry.reply
    .content {
    border-bottom-right-radius: 0;
    align-items: flex-end;
}
.inquiries-page
    .inquiries-card
    .container
    .inquiry-container
    .inquiries-list
    .inquiry-item
    .inquiry.reply
    .content
    .question-box {
    align-items: flex-end;
}
.inquiries-page
    .inquiries-card
    .container
    .inquiry-container
    .inquiries-list
    .inquiry-item
    .inquiry.reply
    .content
    .bottom {
    flex-direction: row-reverse;
}
.inquiries-page
    .inquiries-card
    .container
    .inquiry-container
    .inquiries-list
    .inquiry-item
    .inquiry:not(.reply)
    .content {
    border-bottom-left-radius: 0;
}
.inquiries-page
    .inquiries-card
    .container
    .inquiry-container
    .inquiries-list
    .inquiry-item
    .inquiry.no-reply {
    align-items: center;
    justify-content: flex-end;
}
.inquiries-page
    .inquiries-card
    .container
    .inquiry-container
    .inquiries-list
    .inquiry-item
    .inquiry
    .image {
    width: 30px;
    aspect-ratio: 1/1;
    overflow: hidden;
    border-radius: 50%;
    border: 1px solid #ddd;
    flex-shrink: 0;
    cursor: pointer;
}
.inquiries-page
    .inquiries-card
    .container
    .inquiry-container
    .inquiries-list
    .inquiry-item
    .inquiry
    .image:hover
    img {
    filter: brightness(1.1);
    scale: 1.1;
}
.inquiries-page
    .inquiries-card
    .container
    .inquiry-container
    .inquiries-list
    .inquiry-item
    .inquiry
    .image
    img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.3s;
}
.inquiries-page
    .inquiries-card
    .container
    .inquiry-container
    .inquiries-list
    .inquiry-item
    .inquiry
    .content {
    background-color: #eee;
    padding: 10px 15px;
    border-radius: 20px;
    flex-grow: 1;
    font-size: 14px;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid transparent;
}
.inquiries-page
    .inquiries-card
    .container
    .inquiry-container
    .inquiries-list
    .inquiry-item
    .inquiry
    .content:hover
    .controls {
    max-width: 50px;
}
.inquiries-page
    .inquiries-card
    .container
    .inquiry-container
    .inquiries-list
    .inquiry-item
    .inquiry
    .content
    .text {
    display: flex;
}
.inquiries-page
    .inquiries-card
    .container
    .inquiry-container
    .inquiries-list
    .inquiry-item
    .inquiry
    .content
    .bottom {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
    margin-top: auto;
    padding-top: 2px;
}
.inquiries-page
    .inquiries-card
    .container
    .inquiry-container
    .inquiries-list
    .inquiry-item
    .inquiry
    .content
    .date {
    font-size: 12px;
    display: flex;
}
.inquiries-page
    .inquiries-card
    .container
    .inquiry-container
    .inquiries-list
    .inquiry-item
    .inquiry
    .content
    .controls {
    display: flex;
    align-items: center;
    gap: 5px;
    max-width: 0;
    overflow: hidden;
    transition: 0.2s;
}
.inquiries-page
    .inquiries-card
    .container
    .inquiry-container
    .inquiries-list
    .inquiry-item
    .inquiry
    .content
    .controls
    .inquiry-control-btn {
    width: 20px;
    aspect-ratio: 1/1;
    padding: 0;
    height: unset;
    border-radius: 5px;
    flex-shrink: 0;
}
.inquiries-page
    .inquiries-card
    .container
    .inquiry-container
    .inquiries-list
    .inquiry-item
    .inquiry
    .content
    .controls
    .inquiry-control-btn
    i {
    font-size: 10px;
}
.inquiries-page
    .inquiries-card
    .container
    .inquiry-container
    .inquiries-list.generalized-list
    .inquiry-item
    .inquiry
    .content {
    padding: 10px;
}
.inquiries-page
    .inquiries-card
    .container
    .inquiry-container
    .inquiries-list.generalized-list
    .inquiry-item
    .inquiry
    .content
    .question-box {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.7960784314);
    padding: 6px 10px;
    border-radius: 15px;
    margin-bottom: 5px;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.0941176471);
}
.inquiries-page
    .inquiries-card
    .container
    .inquiry-container
    .inquiries-list.generalized-list
    .inquiry-item
    .inquiry
    .content
    .question-box
    .title {
    font-weight: 500;
}
.inquiries-page
    .inquiries-card
    .container
    .inquiry-container
    .inquiries-list.generalized-list
    .inquiry-item
    .inquiry
    .content
    .question-box
    .question-text {
    font-size: 12px;
}
.inquiries-page .inquiries-card .container .inquiry-container .inquiries-form {
    border-top: 1px solid #ddd;
    padding: 10px;
}
.inquiries-page
    .inquiries-card
    .container
    .inquiry-container
    .inquiries-form
    form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.inquiries-page
    .inquiries-card
    .container
    .inquiry-container
    .inquiries-form
    form
    .multi-input {
    gap: 10px;
}
.inquiries-page
    .inquiries-card
    .container
    .inquiry-container
    .inquiries-form
    form
    .multi-input
    .input {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.inquiries-page
    .inquiries-card
    .container
    .inquiry-container
    .inquiries-form
    form
    .multi-input
    .input
    .inquiry-input {
    flex-grow: 1;
    height: 50px;
    max-height: 100px;
    resize: vertical;
}
.inquiries-page
    .inquiries-card
    .container
    .inquiry-container
    .inquiries-form
    form
    .input-group {
    margin-bottom: 0;
}
.inquiries-page
    .inquiries-card
    .container
    .inquiry-container
    .inquiries-form
    form
    .input-group
    .checkbox-input {
    display: flex;
    align-items: center;
    gap: 5px;
}
.inquiries-page
    .inquiries-card
    .container
    .inquiry-container
    .inquiries-form
    form
    .input-group
    .checkbox-input
    .switch {
    padding: 0;
}

#ar .inquiries-page .inquiries-card .container .inquiries-sidebar {
    border-right: none;
    border-left: 1px solid #ddd;
}
#ar
    .inquiries-page
    .inquiries-card
    .container
    .inquiry-container
    .inquiries-list
    .inquiry-item
    .inquiry
    .content {
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 0;
}
#ar
    .inquiries-page
    .inquiries-card
    .container
    .inquiry-container
    .inquiries-list
    .inquiry-item
    .inquiry.reply
    .content {
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 0;
}

@media (max-width: 1000px) {
    .inquiries-page .inquiries-card .container {
        position: relative;
    }
    .inquiries-page .inquiries-card .container .inquiries-sidebar {
        position: absolute;
        background-color: #fff;
        width: 60px;
        height: 100%;
        z-index: 4;
    }
    .inquiries-page .inquiries-card .container .inquiries-sidebar .top {
        display: none;
    }
    .inquiries-page .inquiries-card .container .inquiries-sidebar .list {
        overflow-x: hidden;
    }
    .inquiries-page .inquiries-card .container .inquiries-sidebar:hover {
        width: 250px;
    }
    .inquiries-page .inquiries-card .container .inquiry-container {
        margin-left: 60px;
    }
    .inquiries-page .inquiries-card .container .inquiry-container .top-box {
        height: unset;
        align-items: flex-start;
        flex-direction: column;
    }
    .inquiries-page
        .inquiries-card
        .container
        .inquiry-container
        .inquiries-list:not(.generalized-list)
        .inquiry-item {
        flex-direction: column;
    }
    .inquiries-page
        .inquiries-card
        .container
        .inquiry-container
        .inquiries-list:not(.generalized-list)
        .inquiry-item:not(:last-child) {
        padding-bottom: 10px;
        border-bottom: 1px solid #ddd;
    }
    #ar .inquiries-page .inquiries-card .container .inquiry-container {
        margin-left: 0;
        margin-right: 60px;
    }
}
@media (max-width: 800px) {
    .inquiries-page
        .inquiries-card
        .container
        .inquiry-container
        .inquiries-form
        .multi-input {
        flex-direction: row;
    }
}
.home-public-page {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}
.home-public-page .home-floating-btn {
    position: fixed;
    bottom: 20px;
    z-index: 2;
    width: 40px;
    aspect-ratio: 1/1;
    padding: 0;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 3px 5px 15px rgba(0, 0, 0, 0.2039215686);
}
.home-public-page .scroll-to-top-btn {
    opacity: 0;
    transition: 0.2s;
    right: 70px;
    font-size: 16px;
}
.home-public-page .scroll-to-top-btn.show {
    opacity: 1;
}
.home-public-page .scroll-to-top-btn:hover {
    background-color: rgba(255, 255, 255, 0.6705882353);
}
.home-public-page .whatsapp-btn {
    background-color: #25d366;
    right: 20px;
}
.home-public-page .whatsapp-btn:hover {
    background-color: green;
    color: #fff;
    border-color: transparent;
}
.home-public-page svg {
    position: relative;
    background-color: #fff;
    z-index: 1;
    height: 200px;
    width: 100%;
    background-color: rgb(245, 245, 245);
}
.home-public-page section {
    background-color: #fff;
    z-index: 1;
    padding: 80px 50px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.home-public-page section .content {
    max-width: 1200px;
}
.home-public-page section .top-box {
    width: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 40px;
}
.home-public-page section .top-box .description {
    font-size: 18px;
    color: #03045e;
    text-align: center;
    max-width: 800px;
}
.home-public-page section .top-box .title {
    position: relative;
    color: #03045e;
    padding: 10px 40px;
    border-radius: 5px;
    font-size: 25px;
    margin-bottom: 10px;
    text-align: center;
    border-radius: 40px;
    border-bottom: 1px solid #03045e;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.home-public-page section .top-box .title:hover .icon {
    rotate: 360deg;
}
.home-public-page section .top-box .title:hover::before {
    width: 0;
}
.home-public-page section .top-box .title .icon {
    color: #fff;
    background-color: #03045e;
    width: 50px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    transition: 0.5s;
}
.home-public-page section .top-box .title::before {
    content: "";
    position: absolute;
    top: 35px;
    left: 50%;
    width: 70px;
    height: 2px;
    border-radius: 5px;
    transform: translate(-50%, 0);
    background-color: #03045e;
    transition: 0.5s;
}
.home-public-page .top-section {
    position: relative;
    min-height: 100vh;
    width: 100vw;
    display: flex;
    background-color: #fff;
    z-index: 2;
    padding: 0;
    padding-top: 50px;
}
.home-public-page .top-section .bg-box {
    position: absolute;
    width: 100vw;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    filter: saturate(0);
}
.home-public-page .top-section .bg-box img {
    width: 50%;
    object-fit: cover;
}
.home-public-page .top-section svg {
    background-color: transparent;
    opacity: 0.1;
    rotate: 180deg;
    position: absolute;
    bottom: 0;
    left: 0;
}
.home-public-page .top-section .content {
    position: relative;
    z-index: 2;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.home-public-page .top-section .content .free-trial-btn {
    width: fit-content;
    margin-bottom: 100px;
}
.home-public-page .top-section .content .free-trial-btn:hover {
    background-color: transparent;
}
.home-public-page .top-section .content .slides {
    position: relative;
    display: flex;
    flex-grow: 1;
    z-index: 2;
}
.home-public-page .top-section .content .slides .slide {
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 0;
    transform: translate(-50%, -50%);
    transform-origin: top left;
    translate: -100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 400px;
    gap: 20px;
    flex-grow: 1;
}
.home-public-page .top-section .content .slides .slide.active {
    scale: 0.7;
}
.home-public-page .top-section .content .slides .slide .text {
    font-size: 40px;
    font-weight: 500;
    max-width: 400px;
    text-align: center;
}
.home-public-page
    .top-section
    .content
    .slides
    .slide
    .text
    span:nth-child(even) {
    color: #686abe;
}
.home-public-page #about_us {
    position: relative;
    width: 100vw;
    display: flex;
    justify-content: center;
}
.home-public-page #about_us .bg-box {
    position: fixed;
    z-index: 0;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    opacity: 0.1;
}
.home-public-page #about_us .content {
    align-items: center;
    display: flex;
    gap: 15px;
    z-index: 1;
}
.home-public-page #about_us .content aside {
    flex-basis: 1px;
    flex-grow: 1;
}
.home-public-page #about_us .content .left .title {
    font-size: 25px;
    color: #03045e;
    position: relative;
    margin-bottom: 30px;
}
.home-public-page #about_us .content .left .title::before {
    content: "";
    position: absolute;
    width: 70px;
    height: 2px;
    background-color: #686abe;
    bottom: -15px;
}
.home-public-page #about_us .content .right .box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px;
    border-radius: 5px;
}
.home-public-page #about_us .content .right .box:first-child {
    background-color: #03045e;
    color: #fff;
}
.home-public-page #about_us .content .right .box:first-child .icon {
    background-color: rgb(245, 245, 245);
}
.home-public-page #about_us .content .right .box:first-child .icon i {
    color: #03045e;
}
.home-public-page #about_us .content .right .box .icon {
    background-color: #03045e;
    border-radius: 50%;
    width: 50px;
    aspect-ratio: 1/1;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25px;
}
.home-public-page #about_us .content .right .box .icon i {
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}
.home-public-page #services .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
.home-public-page #services .content .service-box {
    display: flex;
    gap: 50px;
    width: 100%;
    padding: 20px;
    direction: ltr;
    border-bottom: 1px solid #eee;
    border-radius: 15px;
}
.home-public-page #services .content .service-box:hover {
    transition: 0.2s;
    background-color: #f8f8f8;
}
.home-public-page #services .content .service-box:hover .image {
    scale: 1.1;
}
.home-public-page #services .content .service-box * {
    direction: ltr;
}
.home-public-page #services .content .service-box:nth-child(odd) {
    direction: rtl;
}
.home-public-page #services .content .service-box:nth-child(odd) * {
    direction: rtl;
}
.home-public-page
    #services
    .content
    .service-box:nth-child(odd)
    .text
    .description::before {
    left: unset;
    right: 0;
}
.home-public-page #services .content .service-box .image {
    width: 200px;
    height: 150px;
    flex-shrink: 0;
    overflow: hidden;
    border: 1px solid #686abe;
    padding: 20px;
    border-radius: 10px;
    transition: 0.2s;
}
.home-public-page #services .content .service-box .image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.home-public-page #services .content .service-box .text .title {
    position: relative;
    font-size: 25px;
    font-weight: 500;
    color: #03045e;
    margin-bottom: 40px;
}
.home-public-page #services .content .service-box .text .title::before {
    content: "";
    position: absolute;
    bottom: -20px;
    width: 100px;
    height: 1px;
    border-radius: 5px;
    background-color: #03045e;
}
.home-public-page #services .content .service-box .text .description {
    position: relative;
    padding: 0 20px;
}
.home-public-page #services .content .service-box .text .description::before {
    position: absolute;
    content: "";
    display: inline-block;
    width: 10px;
    aspect-ratio: 1/1;
    border: 1px solid #03045e;
    border-radius: 50%;
    top: 12px;
    left: 0px;
    translate: 0 -50%;
}
.home-public-page #why_us {
    position: relative;
    min-height: 100vh;
}
.home-public-page #why_us .bg-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.home-public-page #why_us .bg-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.1;
    filter: saturate(0.5);
}
.home-public-page #why_us .content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.home-public-page #why_us .content .card {
    padding: 0;
    width: 100%;
    overflow: hidden;
    height: fit-content;
}
.home-public-page #why_us .content .card .card-btn {
    width: 100%;
    border-radius: 0;
    padding: 15px;
    font-size: 15px;
    font-weight: 600;
}
.home-public-page #why_us .content .card .card-btn:hover {
    background-color: #03045e;
    filter: brightness(1.6);
    color: #fff;
}
.home-public-page #why_us .content .card .card-btn:hover i {
    color: #fff;
}
.home-public-page #why_us .content .card .card-btn i {
    transition: 0.4s;
    rotate: 0deg;
}
.home-public-page #why_us .content .card.active .card-btn i {
    rotate: 180deg;
}
.home-public-page #why_us .content .card.active .description-box {
    padding: 20px;
    max-height: 1000px;
}
.home-public-page #why_us .content .card .description-box {
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 0;
    transition: 0.4s;
}
.home-public-page #why_us .content .card .description-box .description {
    position: relative;
    padding: 0 20px;
}
.home-public-page #why_us .content .card .description-box .description::before {
    position: absolute;
    content: "";
    display: inline-block;
    width: 7px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background-color: #03045e;
    top: 12px;
    left: 0px;
    translate: 0 -50%;
}
.home-public-page #why_us .content .card .description-box .description span {
    font-size: 14px;
    font-weight: 500;
}
.home-public-page
    #why_us
    .content
    .card
    .description-box
    .description
    span:first-child {
    color: #03045e;
    font-weight: 600;
    font-size: 16px;
}
.home-public-page #packages .content {
    display: grid;
    justify-content: center;
    align-items: center;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    width: 100%;
}
.home-public-page #packages .content .package-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px;
    gap: 20px;
    min-height: 400px;
    border-radius: 10px;
    border: 3px solid #fff;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-bottom-color: #03045e;
    border-top-color: #03045e;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.0666666667);
}
.home-public-page #packages .content .package-card:nth-child(even) {
    background-color: #03045e;
    color: #fff;
}
.home-public-page
    #packages
    .content
    .package-card:nth-child(even)
    .description-box
    .description::before {
    border-color: #fff;
}
.home-public-page
    #packages
    .content
    .package-card:nth-child(even)
    .link-btn.disabled {
    color: #fff;
    border-color: #fff;
}
.home-public-page #packages .content .package-card:hover {
    transition: 0.2s;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2470588235);
    transform: scale(1.03);
}
.home-public-page #packages .content .package-card .title {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 40px;
    border-left-color: transparent;
    border-right-color: transparent;
    text-align: center;
    font-size: 20px;
}
.home-public-page #packages .content .package-card .description-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 15px;
    font-size: 14px;
    font-weight: 500;
}
.home-public-page
    #packages
    .content
    .package-card
    .description-box
    .description {
    position: relative;
    padding: 0 20px;
    font-size: 15px;
}
.home-public-page
    #packages
    .content
    .package-card
    .description-box
    .description::before {
    position: absolute;
    content: "";
    display: inline-block;
    width: 10px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    border: 1px solid #03045e;
    top: 12px;
    left: 0px;
    translate: 0 -50%;
}
.home-public-page #packages .content .package-card .link-btn {
    margin-top: auto;
    text-align: center;
}
.home-public-page #packages .content .package-card .link-btn.disabled {
    background-color: transparent;
    color: #03045e;
    border-color: #03045e;
    cursor: default;
    font-weight: 500;
}
.home-public-page #contact {
    background-color: rgb(245, 245, 245);
}
.home-public-page #contact .content {
    width: 100%;
}
.home-public-page #contact .content .card {
    width: 100%;
    min-height: 650px;
    display: flex;
    padding: 0;
    overflow: hidden;
    border: 1px solid #ddd;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1215686275);
}
.home-public-page #contact .content .card .info-side,
.home-public-page #contact .content .card .form-side {
    width: 50%;
}
.home-public-page #contact .content .card .info-side {
    position: relative;
    min-height: 650px;
}
.home-public-page #contact .content .card .info-side .bg-box {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    overflow: hidden;
    display: flex;
    justify-content: flex-start;
    filter: brightness(0.4);
}
.home-public-page #contact .content .card .info-side .box {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    color: #fff;
    padding: 50px;
}
.home-public-page #contact .content .card .info-side .box .title {
    font-size: 25px;
    font-weight: 500;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #aaa;
}
.home-public-page #contact .content .card .info-side .box .phone-box {
    background-color: rgba(255, 255, 255, 0.2666666667);
    padding: 20px;
    border-radius: 10px;
    margin: 10px 0;
}
.home-public-page #contact .content .card .info-side .box .phone-box .phone {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 10px;
}
.home-public-page #contact .content .card .info-side .box .phone-box .phone a {
    color: #fff;
}
.home-public-page #contact .content .card .info-side .box .phone-box .phone i {
    background-color: rgba(255, 255, 255, 0.5803921569);
    width: 40px;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #03045e;
    border-radius: 50%;
}
.home-public-page #contact .content .card .info-side .box .social-media .list {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.home-public-page
    #contact
    .content
    .card
    .info-side
    .box
    .social-media
    .list
    a {
    background-color: #fff;
    color: #03045e;
    border-radius: 50%;
    width: 40px;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    border: 1px solid #fff;
}
.home-public-page
    #contact
    .content
    .card
    .info-side
    .box
    .social-media
    .list
    a:hover {
    background-color: transparent;
    color: #fff;
}
.home-public-page #contact .content .card .form-side {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 20px;
}
.home-public-page #contact .content .card .form-side .thank-you-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: rgb(18, 175, 52);
    border-radius: 10px;
    padding: 10px;
}
.home-public-page #contact .content .card .form-side .thank-you-box .icon {
    width: 50px;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25px;
    background-color: #fff;
    color: rgb(0, 185, 0);
    border-radius: 50%;
}
.home-public-page #contact .content .card .form-side .thank-you-box p {
    color: #fff;
    font-weight: 500;
}
.home-public-page #contact .content .card .form-side .title {
    font-size: 25px;
    font-weight: 500;
}
.home-public-page #contact .content .card .form-side hr {
    margin: 20px 0;
}
.home-public-page #contact .content .card .form-side .description {
    margin-bottom: 10px;
    font-weight: 500;
    font-size: 15px;
}
.home-public-page #contact .content .card .form-side form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-grow: 1;
}

#ar .home-public-page .top-section .bg-box {
    direction: ltr;
}
#ar .home-public-page .top-section .content .slides-nav {
    direction: ltr;
}
#ar
    .home-public-page
    #why_us
    .content
    .card
    .description-box
    .description::before {
    left: unset;
    right: 0;
}
#ar
    .home-public-page
    #packages
    .content
    .package-card
    .description-box
    .description::before {
    left: unset;
    right: 0;
}
#ar .home-public-page #contact .content .card .info-side .bg-box {
    direction: ltr;
}

@media (max-width: 900px) {
    .home-public-page #about_us .content {
        flex-direction: column;
    }
    .home-public-page #services .content .service-box {
        flex-direction: column;
        gap: 20px;
    }
    .home-public-page #services .content .service-box:nth-child(odd) {
        direction: ltr;
    }
    .home-public-page #services .content .service-box:nth-child(odd) * {
        direction: ltr;
    }
    .home-public-page
        #services
        .content
        .service-box:nth-child(odd)
        .text
        .description::before {
        left: 0;
    }
    .home-public-page #why_us .content .card.active .description-box {
        max-height: 2000px;
    }
    .home-public-page #contact .content .card {
        height: unset;
        flex-direction: column;
    }
    .home-public-page #contact .content .card .form-side,
    .home-public-page #contact .content .card .info-side {
        width: 100%;
    }
    #ar .home-public-page #services .content .service-box {
        direction: rtl;
    }
    #ar .home-public-page #services .content .service-box * {
        direction: rtl;
    }
    #ar
        .home-public-page
        #services
        .content
        .service-box
        .text
        .description::before {
        left: unset;
        right: 0;
    }
}
@media (max-width: 600px) {
    .home-public-page section {
        padding: 100px 20px;
    }
    .home-public-page .top-section .content .slides .slide .text {
        max-width: 250px;
        font-size: 25px;
    }
}
.login-page {
    position: relative;
    align-items: center;
    flex-wrap: wrap;
}
.login-page .bg-box {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.login-page .bg-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.login-page .container {
    display: flex;
    flex-direction: row;
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
    max-width: 1100px;
    gap: 20px;
    z-index: 2;
}
.login-page .container .left {
    flex: 1;
}
.login-page .container .left {
    color: #fff;
}
.login-page .container .left .page-title {
    font-weight: 500;
    font-size: 25px;
    margin-bottom: 10px;
}
.login-page .container .left .back-link-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #fff;
}
.login-page .container .left .steps {
    background-color: rgba(255, 255, 255, 0.2941176471);
    padding: 15px;
    border-radius: 10px;
}
.login-page .container .left .steps .step {
    color: #fff;
}
.login-page .container .left .steps .step:last-child {
    margin-bottom: 0;
}
.login-page .container .card {
    flex: 1.5;
    display: flex;
    flex-direction: column;
}
.login-page .container .card .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.login-page .container .card .top .card-title {
    font-size: 25px;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 10px;
}
.login-page .container .card .top .logo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    aspect-ratio: 2/1;
    overflow: hidden;
}
.login-page .container .card .top .logo img {
    width: 100%;
    height: 150%;
    object-fit: contain;
}
.login-page .container .card form {
    flex-grow: 1;
}
.login-page .container .card form .resend-otp-btn {
    height: 40px;
    padding: 0 20px;
    margin-top: 25px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    flex: 0.3;
}
.login-page .container .card form .resend-otp-btn i {
    margin-top: 3px;
}
.login-page .container .card form .step-box {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.login-page .container .card form .step-box .buttons {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
}
.login-page .container .card form .step-box .buttons button {
    flex-grow: 1;
}
.login-page .container .card form .step-box.hide {
    display: none;
}
.login-page .container .card form .step-box .submit-btn {
    margin-top: auto;
}
.login-page .container .card form hr {
    margin: 20px 0;
}
.login-page .container .card form .forgot-password-btn {
    margin: 0 10px;
    margin-left: auto;
    width: fit-content;
}
.login-page .container .card form .below-submit-link {
    text-align: center;
}
.login-page .container .card form .below-submit-link a {
    font-weight: 500;
}
.login-page .container .card form .submit-btn {
    margin-top: auto;
}
.login-page .container .card form .bottom-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    margin-top: 15px;
}
.login-page .container .card form .bottom-links .icon-link {
    width: 25px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background-color: #03045e;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    transition: 0.2s;
    border: 1px solid transparent;
}
.login-page .container .card form .bottom-links .icon-link:hover {
    background-color: #fff;
    color: #03045e;
    border-color: #03045e;
}

@media (max-width: 900px) {
    .login-page .container {
        flex-direction: column;
        padding: 10px;
        gap: 10px;
        max-width: 600px;
    }
    .login-page .container .card {
        border-radius: 10px;
    }
    .login-page .container .card .top .card-title {
        font-size: 18px;
    }
    .login-page .container .card form .submit-btn {
        max-width: unset;
        margin-top: 20px;
    }
    .login-page .container .card form .below-submit-link {
        font-size: 14px;
    }
    .login-page .container .card form .bottom-links a {
        font-size: 13px;
    }
}
@media (max-width: 800px) {
    .login-page .container .card .login-form .box .resend-otp-btn {
        margin-top: 0;
        flex: unset;
        max-width: 200px;
        margin-bottom: 20px;
    }
    .login-page .container .card .login-form .box .buttons {
        flex-direction: column;
        align-items: flex-start;
    }
    .login-page .container .card .login-form .box .buttons button {
        max-width: 250px;
    }
}
#ar .login-page .container .left .back-link-btn i {
    rotate: 180deg;
}
#ar .login-page .container .card form .forgot-password-btn {
    margin-left: 10px;
    margin-right: auto;
}

.admin-login-page {
    position: relative;
    align-items: center;
    flex-wrap: wrap;
}
.admin-login-page .bg-box {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.admin-login-page .bg-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.admin-login-page .container {
    display: flex;
    justify-content: center;
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
    max-width: 1200px;
    gap: 20px;
    z-index: 2;
}
.admin-login-page .container .left {
    flex: 1;
}
.admin-login-page .container .card {
    flex: 2;
    display: flex;
    flex-direction: column;
    max-width: 500px;
}
.admin-login-page .container .card .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.admin-login-page .container .card .top .card-title {
    font-size: 25px;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 10px;
}
.admin-login-page .container .card .top .logo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    aspect-ratio: 2/1;
    overflow: hidden;
}
.admin-login-page .container .card .top .logo img {
    width: 100%;
    height: 150%;
    object-fit: contain;
}
.admin-login-page .container .card form {
    flex-grow: 1;
}
.admin-login-page .container .card form .submit-btn {
    max-width: unset;
}
.admin-login-page .container .card form .resend-otp-btn {
    height: 40px;
    padding: 0 20px;
    margin-top: 25px;
    font-size: 14px;
    font-weight: 500;
    flex: 0.3;
}
.admin-login-page .container .card form .resend-otp-btn i {
    margin-top: 3px;
}
.admin-login-page .container .card form .step-box {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.admin-login-page .container .card form .step-box .general-hint,
.admin-login-page .container .card form .step-box .hint.success {
    width: 100%;
    display: flex;
    justify-content: center;
}
.admin-login-page .container .card form .step-box .buttons {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
}
.admin-login-page .container .card form .step-box .buttons button {
    flex-grow: 1;
}
.admin-login-page .container .card form .step-box.hide {
    display: none;
}
.admin-login-page .container .card form .step-box .submit-btn {
    margin-top: auto;
}
.admin-login-page .container .card form hr {
    margin: 20px 0;
}
.admin-login-page .container .card form .forgot-password-btn {
    margin: 0 10px;
    margin-left: auto;
    width: fit-content;
}
.admin-login-page .container .card form .below-submit-link {
    text-align: center;
}
.admin-login-page .container .card form .below-submit-link a {
    font-weight: 500;
}
.admin-login-page .container .card form .submit-btn {
    margin-top: auto;
}
.admin-login-page .container .card form .bottom-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    margin-top: 15px;
}
.admin-login-page .container .card form .bottom-links .icon-link {
    width: 25px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background-color: #03045e;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    transition: 0.2s;
    border: 1px solid transparent;
}
.admin-login-page .container .card form .bottom-links .icon-link:hover {
    background-color: #fff;
    color: #03045e;
    border-color: #03045e;
}

@media (max-width: 900px) {
    .admin-login-page .container {
        padding: 10px;
        gap: 10px;
    }
    .admin-login-page .container .card {
        border-radius: 10px;
    }
    .admin-login-page .container .card .top .card-title {
        font-size: 18px;
    }
    .admin-login-page .container .card form .submit-btn {
        max-width: unset;
    }
    .admin-login-page .container .card form .below-submit-link {
        font-size: 14px;
    }
    .admin-login-page .container .card form .bottom-links a {
        font-size: 13px;
    }
}
#ar .admin-login-page .container .card form .forgot-password-btn {
    margin-left: 10px;
    margin-right: auto;
}

.signup-page {
    position: relative;
    align-items: center;
    flex-wrap: wrap;
}
.signup-page .bg-box {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
    opacity: 1;
}
.signup-page .bg-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.signup-page .container {
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
    max-width: 1200px;
    gap: 20px;
    z-index: 2;
}
.signup-page .container .left {
    flex: 1;
}
.signup-page .container .left .page-title {
    font-weight: 500;
    font-size: 25px;
    margin-bottom: 10px;
}
.signup-page .container .left .back-link-btn {
    display: flex;
    align-items: center;
    gap: 5px;
}
.signup-page .container .left .back-link-btn:hover {
    color: #686abe;
}
.signup-page .container .card {
    flex: 2;
    display: flex;
    flex-direction: column;
}
.signup-page .container .card .steps .step {
    color: #000;
}
.signup-page .container .card form {
    flex-grow: 1;
}
.signup-page .container .card form hr {
    margin: 20px 0;
}
.signup-page .container .card form .forgot-password-btn {
    margin: 0 10px;
}
.signup-page .container .card form .below-submit-link {
    text-align: center;
}
.signup-page .container .card form .below-submit-link a {
    font-weight: 500;
}
.signup-page .container .card form .package-details-box {
    display: flex;
    align-items: center;
    background-color: #eee;
    padding: 15px;
    border-radius: 15px;
    border: 1px solid #ddd;
    gap: 20px;
}
.signup-page .container .card form .package-details-box .empty-box {
    width: 100%;
    text-align: center;
}
.signup-page .container .card form .package-details-box .left .title {
    font-weight: 500;
    font-size: 18px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}
.signup-page .container .card form .package-details-box .left .title i {
    width: 35px;
    aspect-ratio: 1/1;
    background-color: #03045e;
    color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
}
.signup-page
    .container
    .card
    form
    .package-details-box
    .left
    .descriptions-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.signup-page
    .container
    .card
    form
    .package-details-box
    .left
    .descriptions-list
    .description {
    position: relative;
    padding: 0 20px;
    font-size: 14px;
}
.signup-page
    .container
    .card
    form
    .package-details-box
    .left
    .descriptions-list
    .description::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    border: 1px solid #03045e;
    translate: 0 50%;
}
.signup-page .container .card form .package-details-box .right {
    max-height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border-radius: 10px;
    padding: 15px;
}
.signup-page .container .card form .package-details-box .right .price-text {
    font-size: 20px;
}
.signup-page .container .card form .package-details-box .right .price {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    font-weight: 600;
    color: rgb(1, 170, 1);
    display: flex;
    align-items: flex-end;
}
.signup-page .container .card form .package-details-box .right .price i {
    font-size: 13px;
    text-decoration: none;
    margin-bottom: 8px;
    color: #000;
    font-weight: 500;
    font-style: normal;
}
.signup-page .container .card form .submit-btn {
    margin-top: 20px;
}
.signup-page .container .card form .bottom-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    margin-top: 15px;
}
.signup-page .container .card form .bottom-links .icon-link {
    width: 25px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background-color: #03045e;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    transition: 0.2s;
    border: 1px solid transparent;
}
.signup-page .container .card form .bottom-links .icon-link:hover {
    background-color: #fff;
    color: #03045e;
    border-color: #03045e;
}

@media (max-width: 900px) {
    .signup-page .container {
        flex-direction: column;
        margin-top: 60px;
        padding: 10px;
        gap: 10px;
    }
    .signup-page .container .card {
        border-radius: 10px;
    }
    .signup-page .container .card .top .card-title {
        font-size: 18px;
    }
    .signup-page .container .card form .submit-btn {
        max-width: unset;
    }
    .signup-page .container .card form .below-submit-link {
        font-size: 14px;
    }
    .signup-page .container .card form .bottom-links a {
        font-size: 13px;
    }
}
@media (max-width: 600px) {
    .signup-page .container .card .steps {
        gap: 5px;
    }
    .signup-page .container .card .steps .step {
        font-size: 13px;
        max-width: 60px;
    }
    .signup-page .container .card .steps .step span {
        width: 30px;
    }
    .signup-page .container .card .steps .step span::before {
        width: 25px;
    }
    .signup-page .container .card .steps .step.done span::after {
        width: 25px;
    }
    .signup-page .container .card form {
        border: 1px solid #ddd;
    }
    .signup-page .container .card form .package-details-box {
        flex-direction: column;
    }
    .signup-page .container .card form .package-details-box .right {
        border-radius: 10px;
        width: 100%;
        aspect-ratio: unset;
    }
}
#ar
    .signup-page
    .card
    form
    .package-details-box
    .left
    .descriptions-list
    .description::before {
    left: unset;
    right: 0;
}
#ar .signup-page .card form .next-step-btn i,
#ar .signup-page .card form .previous-step-btn i {
    rotate: 180deg;
}

.account-creation-success-page {
    min-height: 100vh;
    background: linear-gradient(0deg, #686abe, #03045e, #03045e);
    display: flex;
    justify-content: center;
    align-items: center;
}
.account-creation-success-page * ::selection {
    background-color: #fff;
    color: #03045e;
}
.account-creation-success-page .square {
    position: fixed;
    width: 600px;
    aspect-ratio: 1/1;
    border-radius: 30px;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    rotate: 45deg;
    padding: 20px;
    overflow: hidden;
}
.account-creation-success-page .square:hover::before {
    opacity: 1;
}
.account-creation-success-page .square::after {
    content: "";
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    position: absolute;
    top: 5px;
    left: 5px;
    background-color: #03045e;
    border-radius: 25px;
}
.account-creation-success-page .square::before {
    content: "";
    position: absolute;
    top: -25%;
    left: -25%;
    width: 150%;
    height: 150%;
    opacity: 0;
    transition: 0.3s;
    background: linear-gradient(0deg, #03045e, #fff, #686abe, #fff);
    animation: rotate-border 3s linear infinite;
}
@keyframes rotate-border {
    0% {
        rotate: 0;
    }
    100% {
        rotate: 360deg;
    }
}
.account-creation-success-page .square .container {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    rotate: -45deg;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 0;
    padding: 0 10px;
    color: #fff;
    height: 100%;
    width: 100vw;
    max-width: 350px;
}
.account-creation-success-page .square .container .logo {
    width: 250px;
    aspect-ratio: 2/1;
    overflow: hidden;
}
.account-creation-success-page .square .container .logo img {
    width: 100%;
    height: 130%;
    object-fit: contain;
}
.account-creation-success-page .square .container .title {
    font-weight: 300;
    font-size: 60px;
    margin-bottom: -10px;
}
.account-creation-success-page .square .container .title2 {
    font-size: 25px;
}
.account-creation-success-page .square .container .descriptions {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 10px;
    margin-top: 30px;
}
.account-creation-success-page .square .container .descriptions .description {
    text-align: center;
    width: 100%;
}
.account-creation-success-page .square .container .buttons {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    width: 100%;
}
.account-creation-success-page .square .container .buttons .link-btn {
    flex: 1;
    width: 100%;
    border-color: #fff;
}

.forgot-password-page {
    position: relative;
    align-items: center;
    flex-wrap: wrap;
}
.forgot-password-page .bg-box {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.forgot-password-page .bg-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.forgot-password-page .container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
    max-width: 1200px;
    gap: 20px;
    z-index: 2;
}
.forgot-password-page .container .left {
    flex: 1;
}
.forgot-password-page .container .card {
    flex: 2;
    display: flex;
    flex-direction: column;
    max-width: 400px !important;
}
.forgot-password-page .container .card .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.forgot-password-page .container .card .top .card-title {
    font-size: 25px;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 10px;
}
.forgot-password-page .container .card .top .logo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    aspect-ratio: 2/1;
    overflow: hidden;
}
.forgot-password-page .container .card .top .logo img {
    width: 100%;
    height: 150%;
    object-fit: contain;
}
.forgot-password-page .container .card .description {
    text-align: center;
}
.forgot-password-page .container .card form {
    flex-grow: 1;
}
.forgot-password-page .container .card form hr {
    margin: 20px 0;
}
.forgot-password-page .container .card form .below-submit-link {
    text-align: center;
}
.forgot-password-page .container .card form .below-submit-link a {
    font-weight: 500;
}
.forgot-password-page .container .card form .submit-btn {
    margin-top: 20px;
    max-width: unset;
}

@media (max-width: 900px) {
    .forgot-password-page .container .card {
        border-radius: 10px;
    }
    .forgot-password-page .container .card .top {
        flex-direction: column-reverse;
        gap: 10px;
        margin-bottom: 10px;
    }
    .forgot-password-page .container .card .top .card-title {
        font-size: 20px;
    }
}
.reset-password-email-sent-page {
    min-height: 100vh;
    background: linear-gradient(0deg, #686abe, #03045e, #03045e);
    display: flex;
    justify-content: center;
    align-items: center;
}
.reset-password-email-sent-page * ::selection {
    background-color: #fff;
    color: #03045e;
}
.reset-password-email-sent-page .square {
    position: fixed;
    width: 600px;
    aspect-ratio: 1/1;
    border-radius: 30px;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    rotate: 45deg;
    padding: 20px;
    overflow: hidden;
}
.reset-password-email-sent-page .square:hover::before {
    opacity: 1;
}
.reset-password-email-sent-page .square::after {
    content: "";
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    position: absolute;
    top: 5px;
    left: 5px;
    background-color: #03045e;
    border-radius: 25px;
}
.reset-password-email-sent-page .square::before {
    content: "";
    position: absolute;
    top: -25%;
    left: -25%;
    width: 150%;
    height: 150%;
    opacity: 0;
    transition: 0.3s;
    background: linear-gradient(0deg, #03045e, #fff, #686abe, #fff);
    animation: rotate-border 3s linear infinite;
}
@keyframes rotate-border {
    0% {
        rotate: 0;
    }
    100% {
        rotate: 360deg;
    }
}
.reset-password-email-sent-page .square .container {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    rotate: -45deg;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 0;
    padding: 0 10px;
    color: #fff;
    height: 100%;
    width: 100vw;
    max-width: 350px;
}
.reset-password-email-sent-page .square .container .logo {
    width: 250px;
    aspect-ratio: 2/1;
    overflow: hidden;
}
.reset-password-email-sent-page .square .container .logo img {
    width: 100%;
    height: 130%;
    object-fit: contain;
}
.reset-password-email-sent-page .square .container .title {
    font-weight: 300;
    font-size: 50px;
    margin-bottom: -10px;
    text-align: center;
}
.reset-password-email-sent-page .square .container .title2 {
    font-size: 25px;
    text-align: center;
}
.reset-password-email-sent-page .square .container .descriptions {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 10px;
    margin-top: 10px;
}
.reset-password-email-sent-page .square .container .descriptions .description {
    text-align: center;
    width: 100%;
}
.reset-password-email-sent-page .square .container form {
    width: 100%;
}
.reset-password-email-sent-page .square .container .resend-btn {
    width: 100%;
    height: 35px;
    border-color: #fff;
    margin: 10px 0;
    max-width: unset;
}
.reset-password-email-sent-page .square .container .resend-btn i {
    margin-top: 3px;
}
.reset-password-email-sent-page .square .container .buttons {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    width: 100%;
}
.reset-password-email-sent-page .square .container .buttons .link-btn {
    flex: 1;
    width: 100%;
    border-color: #fff;
}

.not-found-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 10px;
}
.not-found-page .card {
    position: relative;
    max-width: 400px;
    text-align: center;
    padding: 20px;
    overflow: hidden;
}
.not-found-page .card::after {
    content: "";
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    position: absolute;
    top: 5px;
    left: 5px;
    background-color: #fff;
    border-radius: 5px;
}
.not-found-page .card::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    width: 170%;
    height: 150%;
    transition: 0.3s;
    background: linear-gradient(
        0deg,
        rgb(3, 117, 192),
        rgb(207, 233, 255),
        rgb(3, 117, 192)
    );
    animation: rotate-border 3s linear infinite;
}
@keyframes rotate-border {
    0% {
        rotate: 0;
    }
    100% {
        rotate: 360deg;
    }
}
.not-found-page .card .content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    min-height: 450px;
}
.not-found-page .card .content .image {
    width: 100%;
    aspect-ratio: 2/1;
}
.not-found-page .card .content .image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.not-found-page .card .content .title {
    font-weight: 400;
    margin-bottom: 10px;
}
.not-found-page .card .content .descriptions {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.not-found-page .card .content .buttons {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-top: auto;
}
.not-found-page .card .content .buttons .link-btn {
    flex: 1;
    white-space: nowrap;
    background-color: transparent;
    color: rgb(78, 163, 233);
    border-color: rgb(78, 163, 233);
}
.not-found-page .card .content .buttons .link-btn:hover {
    background-color: rgb(78, 163, 233);
    color: #fff;
}

@media (max-width: 400px) {
    .not-found-page .card .content {
        min-height: unset;
    }
    .not-found-page .card .content .buttons {
        margin-top: 20px;
        flex-direction: column;
    }
    .not-found-page .card .content .buttons .link-btn {
        width: 100%;
    }
}
.forbidden-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 10px;
}
.forbidden-page .card {
    position: relative;
    max-width: 400px;
    text-align: center;
    padding: 20px;
    overflow: hidden;
}
.forbidden-page .card::after {
    content: "";
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    position: absolute;
    top: 5px;
    left: 5px;
    background-color: #fff;
    border-radius: 5px;
}
.forbidden-page .card::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    width: 170%;
    height: 150%;
    transition: 0.3s;
    background: linear-gradient(0deg, #686abe, #e8e9fc, #686abe);
    animation: rotate-border 3s linear infinite;
}
@keyframes rotate-border {
    0% {
        rotate: 0;
    }
    100% {
        rotate: 360deg;
    }
}
.forbidden-page .card .content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    min-height: 450px;
}
.forbidden-page .card .content .image {
    width: 100%;
    aspect-ratio: 2/1;
}
.forbidden-page .card .content .image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.forbidden-page .card .content .title {
    font-weight: 400;
    margin-bottom: 10px;
}
.forbidden-page .card .content .descriptions {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.forbidden-page .card .content .buttons {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-top: auto;
}
.forbidden-page .card .content .buttons .link-btn {
    flex: 1;
    white-space: nowrap;
    background-color: transparent;
    color: #686abe;
    border-color: #686abe;
}
.forbidden-page .card .content .buttons .link-btn:hover {
    background-color: #686abe;
    color: #fff;
}

@media (max-width: 400px) {
    .not-found-page .card .content {
        min-height: unset;
    }
    .not-found-page .card .content .buttons {
        margin-top: 20px;
        flex-direction: column;
    }
    .not-found-page .card .content .buttons .link-btn {
        width: 100%;
    }
}
.too-many-requests-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 10px;
}
.too-many-requests-page .card {
    position: relative;
    max-width: 400px;
    text-align: center;
    padding: 20px;
    overflow: hidden;
}
.too-many-requests-page .card::after {
    content: "";
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    position: absolute;
    top: 5px;
    left: 5px;
    background-color: #fff;
    border-radius: 5px;
}
.too-many-requests-page .card::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    width: 170%;
    height: 150%;
    transition: 0.3s;
    background: linear-gradient(0deg, rgb(233, 199, 7), #fff, rgb(233, 199, 7));
    animation: rotate-border 3s linear infinite;
}
@keyframes rotate-border {
    0% {
        rotate: 0;
    }
    100% {
        rotate: 360deg;
    }
}
.too-many-requests-page .card .content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    min-height: 450px;
}
.too-many-requests-page .card .content .title {
    font-weight: 400;
    margin-bottom: 10px;
}
.too-many-requests-page .card .content .number {
    font-size: 100px;
    color: rgb(233, 199, 7);
    font-weight: 400;
}
.too-many-requests-page .card .content .descriptions {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.too-many-requests-page .card .content .buttons {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-top: auto;
}
.too-many-requests-page .card .content .buttons .link-btn {
    flex: 1;
    white-space: nowrap;
    background-color: transparent;
    color: rgb(233, 199, 7);
    border-color: rgb(233, 199, 7);
}
.too-many-requests-page .card .content .buttons .link-btn:hover {
    background-color: rgb(233, 199, 7);
    color: #fff;
}

@media (max-width: 400px) {
    .not-found-page .card .content {
        min-height: unset;
    }
    .not-found-page .card .content .buttons {
        margin-top: 20px;
        flex-direction: column;
    }
    .not-found-page .card .content .buttons .link-btn {
        width: 100%;
    }
}
.server-error-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 10px;
}
.server-error-page .card {
    position: relative;
    max-width: 400px;
    text-align: center;
    padding: 20px;
    overflow: hidden;
}
.server-error-page .card::after {
    content: "";
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    position: absolute;
    top: 5px;
    left: 5px;
    background-color: #fff;
    border-radius: 5px;
}
.server-error-page .card::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    width: 170%;
    height: 150%;
    transition: 0.3s;
    background: linear-gradient(
        0deg,
        rgb(161, 0, 0),
        rgb(255, 216, 216),
        rgb(161, 0, 0)
    );
    animation: rotate-border 3s linear infinite;
}
@keyframes rotate-border {
    0% {
        rotate: 0;
    }
    100% {
        rotate: 360deg;
    }
}
.server-error-page .card .content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    min-height: 450px;
}
.server-error-page .card .content .image {
    width: 100%;
    aspect-ratio: 2/1;
}
.server-error-page .card .content .image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.server-error-page .card .content .title {
    font-weight: 400;
    margin-bottom: 10px;
}
.server-error-page .card .content .number {
    font-size: 100px;
    color: #ccc;
    font-weight: 500;
    color: rgb(233, 81, 81);
}
.server-error-page .card .content .descriptions {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.server-error-page .card .content .buttons {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-top: auto;
}
.server-error-page .card .content .buttons .link-btn {
    flex: 1;
    white-space: nowrap;
    background-color: transparent;
    color: rgb(233, 81, 81);
    border-color: rgb(233, 81, 81);
}
.server-error-page .card .content .buttons .link-btn:hover {
    background-color: rgb(233, 81, 81);
    color: #fff;
}

@media (max-width: 400px) {
    .not-found-page .card .content {
        min-height: unset;
    }
    .not-found-page .card .content .buttons {
        margin-top: 20px;
        flex-direction: column;
    }
    .not-found-page .card .content .buttons .link-btn {
        width: 100%;
    }
}
.payment-page hr {
    margin: 0 !important;
}
.payment-page .payment-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
.payment-page .payment-box hr {
    width: 100%;
}
.payment-page .payment-box .payment-info {
    width: 100%;
    max-width: 340px;
}
.payment-page .payment-box .payment-info .top .package-name {
    font-weight: 400;
    font-size: 20px;
}
.payment-page .payment-box .payment-info .top .subscription-duration {
    font-size: 15px;
    font-weight: 400;
}
.payment-page .payment-box .payment-info .payment-table {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    border: 1px solid #ddd;
    margin-top: 10px;
}
.payment-page .payment-box .payment-info .payment-table .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.payment-page .payment-box .payment-info .payment-table .row:last-child .item {
    border-bottom: none;
}
.payment-page .payment-box .payment-info .payment-table .row .item {
    padding: 6px 10px;
    border-bottom: 1px solid #ddd;
}
.payment-page .payment-box .payment-info .payment-table .row .item:first-child {
    font-weight: 500;
    font-size: 12px;
}
.payment-page .payment-box .payment-info .payment-table .row .item:last-child {
    border-left: 1px solid #ddd;
    text-align: end;
}
.payment-page .payment-box .free-trial-box {
    width: 100%;
}
.payment-page .mysr-form-button {
    max-width: unset;
}

#ar #mysr-cc-number {
    direction: ltr !important;
}

@media (max-width: 768px) {
    .payment-page .payment-box .payment-info {
        max-width: unset;
    }
}
@media (max-width: 500px) {
    .payment-page .container {
        padding: 0;
    }
    .payment-page .container .card {
        border-radius: 0;
    }
    .payment-page .container .card form {
        border: none !important;
    }
    .payment-page .container .card form .payment-box {
        padding: 0 !important;
        overflow: visible !important;
    }
}
form {
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 10px;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
}
form.have-tabs {
    padding: 0;
}
form.have-tabs.have-scrollable-box {
    overflow: hidden;
}
form.have-tabs.have-scrollable-box .box {
    padding: 0;
}
form.have-tabs .form-tabs {
    padding: 20px;
}
form.have-tabs .form-tab-btns {
    z-index: 2;
    display: flex;
    justify-content: center;
    background-color: #eee;
    gap: 10px;
    padding: 20px;
    padding-bottom: 0;
    border-bottom: 20px solid #fff;
    box-shadow: 0 -10px 10px rgba(0, 0, 0, 0.1176470588) inset,
        0 5px 10px rgba(0, 0, 0, 0.1176470588);
}
form.have-tabs .form-tab-btns .form-tab-btn {
    background-color: #bbb;
    border-radius: 15px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1647058824);
    font-weight: 500;
}
form.have-tabs .form-tab-btns .form-tab-btn:hover {
    background-color: #fff;
    border-color: transparent;
    color: #000;
    box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.1215686275);
}
form.have-tabs .form-tab-btns .form-tab-btn.active {
    background-color: #fff;
    color: #000;
    box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.1215686275);
}
form.hidden-form {
    border: none;
    padding: 0;
    margin: 0;
    display: inline-block;
}
form .multi-input {
    display: flex;
    gap: 20px;
}
form .multi-input .buttons {
    display: flex;
    gap: 10px;
}
form .multi-input .input-group,
form .multi-input .info-group {
    flex: 1;
}
form .multi-input .input-group.fit-content,
form .multi-input .info-group.fit-content {
    flex: unset;
}
form .multi-input .align-with-input {
    margin-top: 25px;
    align-items: center;
    justify-content: center;
    height: 35px;
    margin-bottom: 0;
}
form button,
form .submit-btn,
form .next-step-btn,
form .previous-step-btn {
    margin-top: auto;
    height: 35px;
    width: 100%;
    max-width: 250px;
    font-size: 16px;
    font-weight: 500;
}
form .form-name {
    text-align: center;
    font-weight: 500;
    font-size: 25px;
    margin-bottom: 20px;
}
form .form-section-title {
    position: relative;
    font-weight: 500;
    font-size: 20px;
    color: #03045e;
    padding-bottom: 10px;
    margin-bottom: 10px;
}
form .form-section-title::before,
form .form-section-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 25px;
    width: 70px;
    height: 1px;
    background-color: #03045e;
}
form .form-section-title::after {
    left: 0;
    width: 20px;
}
form .info-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}
form .info-group .group-title {
    font-weight: 500;
    font-size: 14px;
    padding-bottom: 5px;
}
form .info-group .group-value {
    background-color: #eee;
    padding: 0 10px;
    border-radius: 10px;
    height: 40px;
    display: flex;
    align-items: center;
}
form .form-section-description {
    color: #000;
    font-size: 15px;
    margin-bottom: 10px;
    font-weight: 500;
}
form.have-scrollable-box {
    padding: 0;
}
form.have-scrollable-box .box {
    padding: 15px;
    flex-grow: 1;
}
form .bottom {
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
form .bottom .hint {
    flex-grow: 1;
}
form .bottom .buttons {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-grow: 1;
}
form .bottom .buttons button {
    margin-top: 0 !important;
    width: 100%;
}
form .scrollable-box {
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 15px;
    margin-bottom: 15px;
    box-shadow: 0 0 7px rgba(0, 0, 0, 0.0745098039) inset;
}
form .scrollable-box .top {
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}
form .scrollable-box .top p {
    font-size: 18px;
    font-weight: 500;
}
form .scrollable-box .top .total-box {
    font-weight: 400;
    font-size: 14px;
}
form .scrollable-box .list {
    margin-top: 15px;
    max-height: 210px;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
form .scrollable-box .list.rows {
    display: flex;
    flex-direction: column;
}
form .checkboxes-list {
    display: flex;
    gap: 20px;
    align-items: center;
    border: 1px solid #ddd;
    padding: 10px 0;
    border-radius: 30px;
    margin-top: 5px;
    flex-wrap: wrap;
}
form .requirements-box,
form .proposal-requirements-box {
    padding: 0;
}
form .requirements-box .top,
form .proposal-requirements-box .top {
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
}
form .requirements-box .list,
form .proposal-requirements-box .list {
    margin-top: 0;
    max-height: unset;
    overflow: unset;
    padding: 15px;
    border-bottom: 1px solid #ddd;
}
form .requirements-box .list .requirement-item,
form .proposal-requirements-box .list .requirement-item {
    padding: 15px;
    border-radius: 10px;
    background-color: #eee;
    border: 1px solid #ddd;
    padding-bottom: 20px;
}
form
    .requirements-box
    .list
    .requirement-item
    .answer-options
    .answer-options-top,
form
    .proposal-requirements-box
    .list
    .requirement-item
    .answer-options
    .answer-options-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #ccc;
}
form
    .requirements-box
    .list
    .requirement-item
    .answer-options
    .answer-options-top
    .title,
form
    .proposal-requirements-box
    .list
    .requirement-item
    .answer-options
    .answer-options-top
    .title {
    font-size: 18px;
    font-weight: 500;
}
form .requirements-box .list .switch,
form .proposal-requirements-box .list .switch {
    padding: 0;
}
form .requirements-box .requirement-preview,
form .proposal-requirements-box .requirement-preview {
    padding: 20px;
    padding-bottom: 10px;
    min-height: 200px;
}
form .proposal-requirements-box {
    overflow: visible;
}
form .proposal-requirements-box .list {
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: unset !important;
}
form .selected-companies-box .top {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
}
form .selected-companies-box .top .choose-companies-btn {
    height: 35px;
    max-width: 150px;
}
form .selected-companies-box .top .selected {
    display: flex;
    align-items: center;
    gap: 5px;
}
form .selected-companies-box .list {
    overflow-x: auto;
    display: flex;
    flex-direction: column;
}
form .selected-companies-box .list .row {
    display: grid;
    gap: 10px;
    grid-template-columns: 130px 1fr 35px;
    min-width: 500px;
}
form .selected-companies-box .list .row:not(:last-child) {
    border-bottom: 1px solid #ddd;
}
form .selected-companies-box .list .row .row-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
}
form .approvals-box .top {
    border-bottom: 1px solid #ddd;
    margin-bottom: 10px;
    padding-bottom: 10px;
}
form .approvals-box .list {
    overflow-x: auto;
}
form .approvals-box .list .approval-row {
    display: grid;
    align-items: center;
    padding: 10px 0;
    font-size: 14px;
    min-width: 600px;
}
form .approvals-box .list .approval-row .row-item .buttons {
    display: flex;
    align-items: center;
    gap: 10px;
}
form .approvals-box .list .approval-row .row-item .image {
    width: 40px;
    aspect-ratio: 1/1;
    overflow: hidden;
    border-radius: 50%;
    border: 1px solid #ddd;
    cursor: pointer;
}
form .approvals-box .list .approval-row .row-item .image:hover img {
    filter: brightness(1.1);
    scale: 1.1;
}
form .approvals-box .list .approval-row .row-item .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.3s;
}
form .approvals-box .list .approval-row:not(:last-child) {
    border-bottom: 1px solid #ddd;
}
form .input-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}
form .input-group.custom-checkbox {
    flex-direction: row;
}
form .input-group .radio-inputs {
    padding: 0 10px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 20px;
}
form .input-group .radio-inputs .radio {
    display: flex;
    align-items: center;
    gap: 10px;
}
form .input-group .radio-inputs .radio label,
form .input-group .radio-inputs .radio .input-label {
    padding: 0;
    margin: 0;
    flex: 1;
}
form .input-group .radio-inputs .radio label span,
form .input-group .radio-inputs .radio .input-label span {
    font-size: 13px;
}
form .input-group .radio-inputs .radio input {
    display: none;
}
form .input-group label,
form .input-group .input-label {
    font-size: 15px;
    padding: 0 10px;
}
form .input-group label .update-required-box,
form .input-group .input-label .update-required-box {
    padding: 2px 10px;
    border-radius: 5px;
    font-size: 11px;
    background-color: rgb(255, 179, 128);
    color: #fff;
    font-weight: 500;
}
form .input-group > textarea {
    border-radius: 20px;
    border-color: #ddd;
    height: 150px;
    margin-top: 5px;
    resize: vertical;
    min-height: 40px;
    max-height: 200px;
    padding: 10px 20px;
    transition: 0.3s;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.0666666667);
}
form .input-group > textarea.normal-height {
    height: 40px;
    overflow: auto; /* Allow scrolling */
    scrollbar-width: none; /* Hide scrollbar in Firefox */
    -ms-overflow-style: none; /* Hide scrollbar in IE 10+ */
    resize: vertical; /* Keep the resize icon */
}
form .input-group > textarea.normal-height::-webkit-scrollbar {
    display: none;
}
form .input-group > textarea:focus-within {
    border-color: #686abe;
    box-shadow: 0 4px 7px rgba(0, 0, 0, 0.1450980392);
}
form .input-group .input {
    position: relative;
    display: flex;
    background-color: #fff;
    border: 1px solid #ddd;
    height: 40px;
    border-radius: 30px;
    margin-top: 2px;
    transition: 0.3s;
    width: 100%;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.0666666667);
}
form .input-group .input:focus-within {
    border-color: #686abe;
    box-shadow: 0 4px 7px rgba(0, 0, 0, 0.1450980392);
}
form .input-group .input input {
    outline: none;
    border: none;
    width: calc(100% - 65px);
}
form .input-group .input .icon {
    width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}
form .input-group .input .icon i {
    color: #03045e;
    font-size: 18px;
}
form .select-item-with-search-group .input {
    height: fit-content;
    padding: 10px 0;
    gap: 15px;
    box-shadow: none !important;
    border-radius: 15px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    justify-content: space-between;
    flex-wrap: wrap;
}
form .select-item-with-search-group .input:focus-within {
    border-color: #ddd;
    box-shadow: none;
}
form .select-item-with-search-group .input .left {
    display: flex;
    align-items: center;
    flex: 1;
}
form .select-item-with-search-group .input .select-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    gap: 10px;
    flex: 1;
}
form .select-item-with-search-group .input .select-box .total {
    font-size: 13px;
    flex-shrink: 0;
}
form .select-item-with-search-group .input .select-box .search-box {
    height: 30px;
    margin: 0 5px;
    width: 100%;
    min-width: 150px;
    max-width: 200px;
}
form .select-item-with-search-group .input .select-box .search-box input {
    width: 100%;
}
form .select-item-with-search-group .list {
    display: flex;
    flex-direction: column;
    border: 1px solid #ddd;
    border-top: 0;
    border-radius: 15px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    overflow: hidden;
    max-height: 190px;
    overflow: auto;
}
form .select-item-with-search-group .list .list-row {
    display: grid;
    gap: 15px;
    padding: 6px 10px;
    transition: 0.3s;
    cursor: pointer;
}
form .select-item-with-search-group .list .list-row.active {
    background-color: #eee;
}
form .select-item-with-search-group .list .list-row:not(:last-child) {
    border-bottom: 1px solid #ddd;
}
form .select-item-with-search-group .list .list-row:hover {
    background-color: #eee;
}
form .select-item-with-search-group .list .list-row .row-item {
    font-size: 12px;
    min-width: 100px;
    display: flex;
    align-items: center;
}
form .select-item-with-search-group .list .list-row .row-item .image {
    width: 30px;
    aspect-ratio: 1/1;
    overflow: hidden;
    border-radius: 50%;
    border: 1px solid #ddd;
}
form .select-item-with-search-group .list .list-row .row-item .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
form .permissions-section {
    border: 1px solid #ddd;
    border-radius: 15px;
    margin-top: 20px;
    margin-bottom: 20px;
}
form .permissions-section .top {
    border-bottom: 1px solid #ddd;
    padding: 10px;
}
form .permissions-section .top .selected-permissions {
    display: flex;
    align-items: center;
}
form .permissions-section .top .selected-permissions .switch {
    margin: 0 10px;
}
form .permissions-section .permissions-list {
    padding: 0 20px;
    max-height: 400px;
    overflow: hidden;
    overflow-y: auto;
}
form .permissions-section .permissions-list .group {
    padding: 20px 0;
}
form .permissions-section .permissions-list .group:not(:last-child) {
    border-bottom: 1px solid #ddd;
}
form .permissions-section .permissions-list .group .group-title {
    font-weight: 500;
    font-size: 16px;
    margin-bottom: 10px;
}
form .permissions-section .permissions-list .group .group-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
form .collapsible-section.close .top-btn .fa-chevron-down {
    rotate: 0deg;
}
form .collapsible-section.close .section-content {
    display: none;
}
form .collapsible-section .top-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-radius: 30px;
    transition: 0.3s;
}
form .collapsible-section .top-btn .fa-chevron-down {
    transition: 0.3s;
    rotate: 180deg;
    display: none;
}
form .collapsible-section .top-btn .form-section-title {
    margin-bottom: 0;
    padding: 0;
    font-size: 18px;
    transition: 0.3s;
}
form .collapsible-section .top-btn .form-section-title::before,
form .collapsible-section .top-btn .form-section-title::after {
    display: none;
}

.form-table {
    margin: 10px 0;
}
.form-table .top {
    margin-bottom: 20px;
}
.form-table .top .left button {
    max-width: 100px;
}
.form-table .list {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    border: 1px solid #ddd;
    max-height: 400px;
    overflow: auto;
}
.form-table .list .row {
    min-width: 400px;
    display: grid;
    width: 100%;
    font-size: 14px;
}
.form-table .list .row:not(:last-child) .row-item {
    border-bottom: 1px solid #ddd;
}
.form-table .list .row.head-row {
    font-weight: 500;
}
.form-table .list .row.head-row .row-item {
    background-color: #eee;
}
.form-table .list .row.total-row {
    font-weight: 600;
}
.form-table .list .row .row-item {
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.form-table .list .row .row-item button {
    flex-shrink: 0;
    margin-top: 0;
}
.form-table .list .row .row-item input {
    height: 30px;
}
.form-table .list .row .row-item textarea {
    resize: vertical;
}
.form-table .list .row .row-item .input-with-text {
    height: 30px;
}

.proposal-quantity-table .list .row {
    min-width: 700px;
    grid-template-columns: 30px minmax(100px, 1fr) 100px 50px 170px 110px 100px 160px;
}

.implementation-timeline-table .list .row {
    min-width: 800px;
    grid-template-columns: 30px 1fr 1fr 1fr 1fr 60px;
}

.payments-table .list .row {
    min-width: 800px;
    grid-template-columns: 100px 1fr 1fr 1fr 1fr 60px;
}

.create-proposal-request-form > hr:not(:last-of-type),
.create-proposal-form > hr:not(:last-of-type) {
    border-color: #ddd;
    border-width: 3px;
}

.files-box {
    margin-bottom: 20px;
}
.files-box .files-title {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 10px;
}
.files-box .files-list {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.files-box .files-list .file-box {
    width: 100px;
    aspect-ratio: 3/4;
    overflow: hidden;
    border: 1px solid #ddd;
    border-radius: 10px;
}
.files-box .files-list .file-box .image,
.files-box .files-list .file-box .pdf {
    width: 100%;
    height: 100%;
    cursor: pointer;
}
.files-box .files-list .file-box .image:hover img,
.files-box .files-list .file-box .image:hover iframe,
.files-box .files-list .file-box .pdf:hover img,
.files-box .files-list .file-box .pdf:hover iframe {
    scale: 1.1;
    filter: brightness(1.1);
}
.files-box .files-list .file-box .image img,
.files-box .files-list .file-box .image iframe,
.files-box .files-list .file-box .pdf img,
.files-box .files-list .file-box .pdf iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.3s;
}
.files-box .files-list .file-box .image iframe,
.files-box .files-list .file-box .pdf iframe {
    width: 180%;
    height: 170%;
}
.files-box .files-list .file-box .pdf {
    display: flex;
    position: relative;
}
.files-box .files-list .file-box .pdf::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

#ar .form-section-title::before,
#ar .form-section-title::after {
    left: unset;
    right: 25px;
}
#ar .form-section-title::after {
    right: 0;
}

@media (max-width: 1000px) {
    form .requirements-box .list {
        padding: 0;
    }
    form .requirements-box .list .requirement-item {
        border-radius: 0;
        border: none;
        padding: 10px;
    }
    form .requirements-box .list .requirement-item .align-with-input {
        margin-top: 0;
    }
    form
        .requirements-box
        .list
        .requirement-item
        .align-with-input:not(.circle) {
        align-items: flex-start;
    }
    form .requirements-box .list .requirement-item .answer-options {
        margin-top: 20px;
    }
    form
        .requirements-box
        .list
        .requirement-item
        .answer-options
        .answer-options-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    form
        .requirements-box
        .list
        .requirement-item
        .answer-options
        .multi-input {
        gap: 0;
        margin-bottom: 20px;
    }
    form .permissions-section {
        margin-top: 10px;
    }
    form .permissions-section .permissions-list {
        padding: 0 10px;
    }
    form .permissions-section .permissions-list .group {
        padding: 10px 0;
    }
    form .permissions-section .permissions-list .group .group-list {
        grid-template-columns: 1fr;
    }
    form.have-tabs .form-tab-btns {
        padding: 10px;
        padding-top: 20px;
        padding-bottom: 0;
    }
    form.have-tabs .form-tab-btns .form-tab-btn {
        font-size: 12px;
        font-weight: 600;
        padding: 5px 10px;
    }
    form .multi-input {
        flex-direction: column;
        gap: 10px;
    }
    form hr {
        margin: 10px 0 !important;
    }
    form .scrollable-box .list {
        grid-template-columns: 1fr;
    }
    form .bottom {
        flex-direction: column;
        gap: 10px;
        padding-bottom: 0;
    }
    form .bottom .buttons {
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }
    form .input-group .radio-inputs {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* Style the wrapper div */
.custom-select {
    position: relative;
    display: inline-block;
    flex-grow: 1;
    min-width: 150px;
}

form .input-group .input .select-items {
    top: 100%;
    width: calc(100% + 10px);
    left: -30px;
}
form .input-group .input .select-items.select-hide {
    opacity: 1;
    translate: 0 0;
}
form .input-group .input .select-selected {
    max-width: calc(100% - 60px);
    padding: 0;
    border: none;
}

#ar form .input-group .input .select-items {
    left: unset !important;
    right: -30px !important;
}

.custom-select select {
    display: none; /* Hide the default dropdown */
}

/* Style the custom dropdown */
.select-selected {
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 16px;
    cursor: pointer;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    border: 1px solid #ddd;
    border-radius: 20px;
    width: 100%;
    padding: 0 15px;
    height: 35px;
    transition: 0.3s;
    background-color: #fff;
}
.select-selected.select-arrow-active {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.select-items {
    position: absolute;
    left: 0;
    background-color: #fff;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1019607843);
    width: 100%;
    z-index: 99;
    max-height: 175px;
    overflow-y: auto;
    border: 1px solid #ccc;
    border-top: none;
    border-radius: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    transition: 0.3s;
    margin-top: 1px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 7px;
    opacity: 1;
}

.select-hide {
    max-height: 0;
    border-top: none;
    border-bottom: none;
    padding: 0 7px;
    translate: 0 -10px;
    opacity: 0;
}

.select-items .select-option {
    padding: 6px 10px;
    font-size: 14px;
    cursor: pointer;
    transition: 0.3s;
    font-weight: 500;
    border-radius: 5px;
}

.select-items div:hover {
    background-color: #ddd !important;
}

.select-items .select-option.active {
    background-color: #eee;
    color: #686abe;
    font-weight: 600;
}

/* Active selected option */
.select-selected:after {
    content: "";
    position: absolute;
    top: calc(50% + 3px);
    translate: 0 -50%;
    right: 15px;
    border: 6px solid transparent;
    border-color: #03045e transparent transparent transparent;
    transition: 0.3s;
}

.select-selected.select-arrow-active:after {
    rotate: 180deg;
    translate: 0 calc(-50% - 6px);
}

#ar .select-selected:after {
    right: unset;
    left: 10px;
}

.change-language-box {
    position: relative;
}
.change-language-box .show-language-dropdown-btn {
    width: 40px;
    aspect-ratio: 1/1;
    padding: 0;
    background-color: transparent;
    color: #000;
    font-size: 22px;
}
.change-language-box .show-language-dropdown-btn:hover {
    border-color: #ddd;
}
.change-language-box .change-language-dropdown {
    position: absolute;
    top: 50px;
    left: 50%;
    translate: -50%;
    background-color: #fff;
    padding: 10px;
    transition: 0.3s;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.137254902);
    border-color: #eee;
    border: none;
    opacity: 0;
    scale: 0;
    width: 200px;
    transform-origin: top center;
}
.change-language-box .change-language-dropdown::before {
    content: "";
    border: 10px solid transparent;
    border-bottom-color: #fff;
    position: absolute;
    top: -20px;
    left: 50%;
    translate: -50%;
}
.change-language-box .change-language-dropdown * {
    white-space: nowrap;
}
.change-language-box .change-language-dropdown.show {
    opacity: 1;
    scale: 1;
}
.change-language-box .change-language-dropdown h4 {
    text-align: center;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    font-weight: 400;
}
.change-language-box .change-language-dropdown ul {
    display: flex;
    flex-direction: column;
    margin-top: 5px;
    gap: 5px;
}
.change-language-box .change-language-dropdown ul li {
    width: 100%;
}
.change-language-box .change-language-dropdown ul li .language-option-btn {
    background-color: transparent;
    color: #000;
    padding: 0;
    border: none;
    border-radius: 5px;
    padding: 7px;
    width: 100%;
    height: unset;
    justify-content: flex-start;
}
.change-language-box
    .change-language-dropdown
    ul
    li
    .language-option-btn:hover {
    border: none;
    background-color: #ddd;
}
.change-language-box
    .change-language-dropdown
    ul
    li
    .language-option-btn.active {
    background-color: #eee;
    color: #03045e;
}

.custom-file-input {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background-color: #eee;
    width: fit-content;
    padding: 10px;
    border-radius: 10px;
    margin-top: 5px;
}
.custom-file-input.single {
    width: 100%;
    align-items: center;
}
.custom-file-input.single .top {
    max-width: 200px;
}
.custom-file-input.single .file-preview {
    width: 100%;
    justify-content: center;
}
.custom-file-input.single .file-preview .file-box {
    width: 100%;
    max-width: 200px;
}
.custom-file-input.single .file-preview .file-box .remove-btn,
.custom-file-input.single .file-preview .file-box .file-name-box {
    display: none;
}
.custom-file-input.single.cover-photo .file-preview .file-box {
    max-width: 800px;
    aspect-ratio: 4/1;
    min-height: 120px;
}
.custom-file-input input[type="file"] {
    display: none;
}
.custom-file-input .top {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 10px;
    gap: 10px;
    width: 100%;
    justify-content: flex-start !important;
}
.custom-file-input .top label {
    background-color: #007bff;
    color: white;
    border-radius: 5px;
    width: 40px;
    aspect-ratio: 1/1;
    font-size: 16px;
    border-radius: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s;
    cursor: pointer;
}
.custom-file-input .top label:hover {
    background-color: #0056b3;
}
.custom-file-input .top .file-name {
    font-size: 15px;
    font-weight: 500;
    display: -webkit-box; /* Use flexbox */
    -webkit-box-orient: vertical; /* Define the box orientation */
    -webkit-line-clamp: 2; /* Limit to 2 lines */
    overflow: hidden; /* Hide overflow */
    max-width: 500px; /* Set maximum width */
}
.custom-file-input .file-preview {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.custom-file-input .file-preview .file-box {
    position: relative;
    margin-top: 10px;
    overflow: hidden;
    border: 1px solid #ccc;
    border-radius: 10px;
    width: 150px;
    aspect-ratio: 1/1;
}
.custom-file-input .file-preview .file-box .file-name-box {
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4392156863);
    width: 100%;
    padding: 2px 5px;
    color: #fff;
    display: -webkit-box; /* Required for using -webkit-line-clamp */
    -webkit-line-clamp: 2; /* Limit to 2 lines */
    -webkit-box-orient: vertical; /* Ensures the lines are laid out vertically */
    overflow: hidden; /* Hide overflowing text */
    text-overflow: ellipsis; /* Display ellipsis for overflowed text */
    word-break: break-word;
}
.custom-file-input .file-preview .file-box .image,
.custom-file-input .file-preview .file-box .pdf-box {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
    transition: 0.3s;
}
.custom-file-input .file-preview .file-box .image img:hover {
    filter: brightness(1.2);
    scale: 1.1;
}
.custom-file-input .file-preview .file-box .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.2s;
}
.custom-file-input .file-preview .file-box .remove-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 25px;
    aspect-ratio: 1/1;
    height: unset;
    background-color: #000000;
    color: #fff;
    padding: 0;
    border-radius: 5px;
    opacity: 0.6;
    z-index: 2;
    border: 1px solid #aaa;
}
.custom-file-input .file-preview .file-box .remove-btn:hover {
    opacity: 1;
}
.custom-file-input .file-preview .file-box .pdf-box {
    position: relative;
}
.custom-file-input .file-preview .file-box .pdf-box:hover {
    filter: brightness(0.9);
}
.custom-file-input .file-preview .file-box .pdf-box::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}
.custom-file-input .file-preview .file-box .pdf-box iframe {
    width: 100%;
    height: 100%;
    border: none;
    overflow: hidden;
    object-fit: cover;
}

.image-viewer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.3137254902);
    z-index: 8;
    justify-content: center;
    align-items: center;
    display: none;
    animation: show-image-viewer-bg 0.4s forwards;
}
@keyframes show-image-viewer-bg {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.image-viewer.show {
    display: flex;
}
.image-viewer .box {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    width: calc(100vw - 20px);
    height: calc(100vh - 20px);
    max-width: 840px;
    max-height: 1040px;
    z-index: -1;
    border-radius: 10px;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.0901960784);
    background-color: #fff;
    padding: 15px;
    animation: show-image-viewer-box 0.5s forwards;
}
@keyframes show-image-viewer-box {
    0% {
        top: -50%;
    }
    100% {
        top: 50%;
    }
}
.image-viewer .box .image {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 15px;
}
.image-viewer .box .image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.image-viewer .close-btn {
    position: fixed;
    top: 10px;
    right: 10px;
    width: 30px;
    aspect-ratio: 1/1;
    height: unset;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
    color: #fff;
    border-color: #ccc;
    border-radius: 5px;
    font-size: 20px;
    transition: 0.3s;
}
.image-viewer .close-btn:hover {
    background-color: rgba(255, 0, 0, 0.788);
    color: #fff;
}

@media print {
    body,
    body .dashboard-container {
        background-color: #fff !important;
    }
    .profile-cover-photo {
        display: none;
    }
    .partner-profile {
        border-radius: 0 !important;
        background-color: transparent;
    }
    .partner-profile > .left {
        display: none;
    }
    .partner-profile > .right {
        height: fit-content;
    }
    .partner-profile .main-card {
        padding: 0 !important;
        box-shadow: none !important;
        border-radius: 0;
    }
    .partner-profile .main-card .tabs-btns {
        display: none;
    }
    .partner-profile .main-card .tab {
        padding: 0;
    }
    .invoice-popup {
        top: 0;
        left: 0;
        transform: unset;
        width: 100%;
        height: 100%;
        max-width: unset;
        max-height: unset;
        border-radius: 0;
        box-shadow: unset;
    }
    .invoice-popup .buttons {
        display: none;
    }
    /* Preserve colors during printing */
    * {
        -webkit-print-color-adjust: exact;
        color-adjust: exact;
    }
    #sidebar,
    #header,
    #footer {
        display: none;
    }
    .dashboard-container {
        margin: 0 !important;
    }
    .dashboard-container .page {
        padding: 0 !important;
        margin: 0 !important;
    }
    .alert {
        display: none;
    }
    .table {
        border: none;
        padding: 0;
        margin-top: 20px;
        box-shadow: unset !important;
        border-radius: 0;
    }
    .table .tools {
        display: none;
    }
    .table .data-list {
        border-radius: 0;
    }
    .table .data-list .data-row {
        min-width: unset;
    }
    .table .data-list .data-row.head-row .data-item .sort-icon {
        display: none;
    }
    .table .data-list .data-row .data-item {
        font-size: 10px;
        flex-shrink: 1;
    }
    .table .data-list .data-row .data-item.item-checkbox {
        display: none;
    }
    .table .table-bottom {
        display: none;
    }
}
/* Hide the default checkbox */
.switch input {
    display: none;
}

/* The switch container */
.switch {
    position: relative;
    display: flex;
    gap: 10px;
}
.switch:not(.disabled) {
    cursor: pointer;
}
.switch.disabled .slider {
    background-color: #bbb;
}

/* The slider */
.slider {
    position: relative;
    width: 50px;
    height: 25px;
    background-color: #ddd;
    transition: 0.2s;
    border-radius: 34px;
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3568627451) inset;
    flex-shrink: 0;
}

.switch:hover:not(.disabled) .slider {
    filter: brightness(1.06);
}

/* The circle inside the slider */
.slider::before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    border: 1px solid #fff;
    background-color: white;
    transition: 0.1s;
    border-radius: 50%;
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.2862745098) inset;
}

/* Checked state */
input:checked + .slider {
    background-color: #4caf50;
}

input:checked + .slider::before {
    transform: translateX(24px);
}

/* Switch text styling */
.switch-text {
    font-size: 16px;
    color: #333;
}

.switch.checkbox {
    border-radius: 5px;
}
.switch.checkbox .slider {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    flex-shrink: 0;
    padding: 0;
    box-shadow: unset;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #fff;
}
.switch.checkbox .slider::before {
    display: none;
}
.switch.checkbox .slider i {
    background-color: transparent !important;
    opacity: 0;
    color: #fff;
    padding-top: 2px;
}
.switch.checkbox input:checked + .slider {
    background-color: rgb(0, 196, 0);
}
.switch.checkbox input:checked + .slider i {
    opacity: 1 !important;
}
.switch.disabled input:checked + .slider {
    background-color: #ccc;
}
.switch.disabled input:checked + .slider:hover {
    cursor: not-allowed;
    filter: brightness(1);
}

.alert {
    position: fixed;
    background-color: #fff;
    left: 50%;
    top: 20px;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1098039216);
    border: 1px solid #ddd;
    z-index: 6;
    animation: showAlert 0.5s;
    transition: 0.3s;
    overflow: hidden;
    transform: translate(-50%);
    max-width: 450px;
    min-width: 300px;
    transform-origin: top center;
}
.alert[data-type="success"] {
    border-color: rgb(62, 165, 37);
    background-color: rgb(215, 255, 230);
}
.alert[data-type="success"] .icon {
    background-color: rgb(62, 165, 37);
}
.alert[data-type="success"] .icon .fa-check {
    display: flex;
}
.alert[data-type="error"] {
    border-color: rgb(233, 81, 81);
    background-color: rgb(255, 216, 216);
}
.alert[data-type="error"] .icon {
    background-color: rgb(233, 81, 81);
}
.alert[data-type="error"] .icon .fa-circle-exclamation {
    display: flex;
}
.alert[data-type="warning"] {
    border-color: rgb(233, 199, 7);
    background-color: rgb(255, 244, 209);
}
.alert[data-type="warning"] .icon {
    background-color: rgb(233, 199, 7);
}
.alert[data-type="warning"] .icon .fa-triangle-exclamation {
    display: flex;
}
.alert[data-type="info"] {
    border-color: rgb(3, 117, 192);
    background-color: rgb(207, 233, 255);
}
.alert[data-type="info"] .icon {
    background-color: rgb(3, 117, 192);
}
.alert[data-type="info"] .icon .fa-info {
    display: flex;
}
@keyframes showAlert {
    0% {
        opacity: 0;
        scale: 0.9;
        translate: 0 -300px;
    }
    100% {
        opacity: 1;
        scale: 1;
        translate: 0;
    }
}
.alert .close-alert {
    position: absolute;
    top: 5px;
    right: 5px;
    padding: 0;
    width: 30px;
    aspect-ratio: 1/1;
    height: unset;
    border-radius: 50%;
    background-color: transparent;
    color: #000;
    transition: 0.2s;
}
.alert .close-alert:hover {
    color: #fff;
    background-color: rgb(255, 132, 132);
    border-color: #ddd;
}
.alert.hide {
    opacity: 0;
    scale: 0.9;
    translate: 0 10px;
}
.alert .top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.alert .top .icon {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    color: #fff;
    flex-shrink: 0;
}
.alert .top .icon i {
    display: none;
    font-size: 30px;
}
.alert .top .text .title {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 2px;
    cursor: default;
}
.alert .top .text .description {
    font-size: 14px;
    cursor: default;
}
.alert .progress-bar {
    width: calc(100% - 20px);
    height: 3px;
    background-color: rgba(0, 0, 0, 0.1215686275);
    position: absolute;
    bottom: 5px;
    left: 10px;
    background-origin: 0;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    justify-content: flex-end;
}
.alert .progress-bar .progress {
    width: 100%;
    background-color: #999;
    height: 100%;
    border-radius: 10px;
}

#ar .alert .close-alert {
    right: unset;
    left: 5px;
}

/* Custom radio button style */
.custom-radio {
    display: inline-block;
    position: relative;
    padding-left: 30px;
    cursor: pointer;
    font-size: 16px;
    transition: 0.3s;
}

/* Circle representing the radio button */
.custom-radio:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 20px;
    width: 20px;
    background-color: #eee;
    border-radius: 50%;
    border: 1px solid #aaa;
    transition: 0.2s;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3490196078) inset;
}

.custom-radio:after {
    content: "";
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 13px;
    box-shadow: -2px -2px 7px rgba(0, 0, 0, 0.2666666667) inset;
    aspect-ratio: 1/1;
    background-color: #00d41c;
    border-radius: 50%;
    transition: 0.2s;
    opacity: 0;
}

/* Inner dot when the radio button is checked */
input[type="radio"]:checked + .custom-radio:after {
    opacity: 1;
}

/* Adding hover effect */
.custom-radio:hover:before {
    background-color: #ccc;
}

#ar .custom-radio {
    padding: 0 30px;
}
#ar .custom-radio::before,
#ar .custom-radio::after {
    left: unset;
    right: 0;
}
#ar .custom-radio::after {
    right: -2px;
}

.steps {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}
.steps .step {
    color: #03045e;
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 30px;
}
.steps .step.last-step span::before,
.steps .step.last-step span::after {
    display: none;
}
.steps .step.active span {
    color: #fff;
    background-color: #03045e;
}
.steps .step.done span::before,
.steps .step.done span::after {
    background-color: #03045e;
}
.steps .step span {
    position: relative;
    width: 40px;
    aspect-ratio: 1/1;
    background-color: #ddd;
    color: #03045e;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.3s;
}
.steps .step span::before,
.steps .step span::after {
    content: "";
    position: absolute;
    top: calc(100% + 5px);
    left: 50%;
    width: 3px;
    height: 5px;
    background-color: #ddd;
    translate: -50%;
    border-radius: 10px;
}
.steps .step span::after {
    height: 30px;
    top: calc(100% + 15px);
}
.steps .step:last-child span::before,
.steps .step:last-child span::after {
    display: none;
}
.steps.horizontal {
    flex-direction: row;
    justify-content: center;
    gap: 25px;
}
.steps.horizontal .step {
    flex-direction: column;
    align-items: center;
    flex: 1;
    max-width: 100px;
    text-align: center;
    margin-bottom: 0;
}
.steps.horizontal .step.done span::after {
    width: 75px;
}
.steps.horizontal .step span::before,
.steps.horizontal .step span::after {
    top: 50%;
    left: calc(100% + 5px);
    height: 3px;
    width: 75px;
    translate: 0 -50%;
    background-color: #ddd;
}
.steps.horizontal .step span::after {
    background-color: #03045e;
    width: 0;
    transition: 0.3s;
}

#ar .steps.horizontal .step span::before,
#ar .steps.horizontal .step span::after {
    left: unset;
    right: calc(100% + 5px);
}

.icon-select-box {
    position: relative;
    align-items: center;
    width: fit-content !important;
}
.icon-select-box .selected-icon {
    width: 40px !important;
}
.icon-select-box .show-icons-btn {
    margin: 0 2px;
}

.icons-list-dark-bg {
    z-index: 6 !important;
}

.icons-list {
    width: 100vw;
    max-width: 505px;
    background-color: #fff;
    z-index: 2;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1098039216);
    border-radius: 10px;
    overflow-y: auto;
    position: fixed;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    border: 0 solid #ddd;
    height: 100vh;
    max-height: 0;
    transition: 0.3s;
    transform-origin: top left;
    z-index: 6;
}
.icons-list.active {
    max-height: 400px;
    border-width: 1px;
}
.icons-list .icon-group .group-top {
    padding: 7px 15px;
    border-bottom: 1px solid #ddd;
    background-color: rgba(238, 238, 238, 0.7725490196);
    cursor: pointer;
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.icons-list .icon-group .group-top:hover {
    background-color: rgba(221, 221, 221, 0.7960784314);
}
.icons-list .icon-group .group-top i {
    font-size: 10px;
}
.icons-list .icon-group .group-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 10px;
}
.icons-list .icon-group .group-list .icon {
    width: 35px;
    aspect-ratio: 1/1;
    border-radius: 8px;
    transition: 0.3s;
    cursor: pointer;
    border: 1px solid transparent;
    display: flex;
    justify-content: center;
    align-items: center;
}
.icons-list .icon-group .group-list .icon i {
    color: #000;
    transition: 0.3s;
    font-size: 22px;
}
.icons-list .icon-group .group-list .icon:hover {
    border-color: #686abe;
}
.icons-list .icon-group .group-list .icon:hover i {
    color: #686abe;
}
.icons-list .icon-group .group-list .icon.active {
    background-color: #686abe;
}
.icons-list .icon-group .group-list .icon.active i {
    color: #fff;
}

.info-box {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 10px;
    background-color: #fff;
    padding: 10px;
    border: 1px solid transparent;
    width: 100%;
}
.info-box .icon {
    width: 40px;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: #ddd;
    flex-shrink: 0;
    color: #fff;
}
.info-box .icon i {
    display: none;
    font-size: 20px;
}
.info-box[data-type="success"] {
    border-color: rgb(62, 165, 37);
    background-color: rgb(215, 255, 230);
}
.info-box[data-type="success"] .icon {
    background-color: rgb(62, 165, 37);
}
.info-box[data-type="success"] .icon .fa-check {
    display: flex;
}
.info-box[data-type="error"] {
    border-color: rgb(233, 81, 81);
    background-color: rgb(255, 216, 216);
}
.info-box[data-type="error"] .icon {
    background-color: rgb(233, 81, 81);
}
.info-box[data-type="error"] .icon .fa-circle-exclamation {
    display: flex;
}
.info-box[data-type="warning"] {
    border-color: rgb(233, 199, 7);
    background-color: rgb(255, 244, 209);
}
.info-box[data-type="warning"] .icon {
    background-color: rgb(233, 199, 7);
}
.info-box[data-type="warning"] .icon .fa-triangle-exclamation {
    display: flex;
}
.info-box[data-type="info"] {
    border-color: rgb(3, 117, 192);
    background-color: rgb(207, 233, 255);
}
.info-box[data-type="info"] .icon {
    background-color: rgb(3, 117, 192);
}
.info-box[data-type="info"] .icon .fa-info {
    display: flex;
}
.info-box .text {
    flex-grow: 1;
}
.info-box .text .bold {
    font-weight: 600;
}

.view-item-page {
    display: flex;
    justify-content: center;
    align-items: center;
}
.view-item-page .card {
    width: 100%;
    max-width: 800px;
}
.view-item-page .card .view-item-box .form-name {
    text-align: center;
    font-weight: 500;
    font-size: 25px;
    margin-bottom: 20px;
}
.view-item-page .card .view-item-box .view-section-title {
    position: relative;
    font-weight: 500;
    font-size: 20px;
    color: #03045e;
    padding-bottom: 10px;
    margin-bottom: 20px;
}
.view-item-page .card .view-item-box .view-section-title::before,
.view-item-page .card .view-item-box .view-section-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 25px;
    width: 70px;
    height: 1px;
    background-color: #03045e;
}
.view-item-page .card .view-item-box .view-section-title::after {
    left: 0;
    width: 20px;
}
.view-item-page .card .view-item-box .multi-item {
    display: flex;
    gap: 20px;
}
.view-item-page .card .view-item-box .info-group {
    flex: 1;
    margin-bottom: 20px;
    background-color: #eee;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.view-item-page .card .view-item-box .info-group .group-title {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    font-weight: 500;
    flex: 1;
    font-size: 14px;
    min-width: 150px;
    max-width: 250px;
}
.view-item-page
    .card
    .view-item-box
    .info-group
    .group-title
    .update-required-box {
    padding: 2px 10px;
    border-radius: 5px;
    font-size: 11px;
    background-color: rgb(255, 179, 128);
    color: #fff;
    font-weight: 500;
    white-space: nowrap;
}
.view-item-page .card .view-item-box .info-group .group-value {
    border-radius: 10px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    flex: 3;
    font-size: 14px !important;
}
.view-item-page .card .view-item-box .info-group .group-value .value-item {
    background-color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
}
.view-item-page .card .view-item-box .info-group .group-value a {
    font-size: 16px;
}
.view-item-page .card .view-item-box .info-group .group-value .check-icon {
    width: 25px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background-color: rgb(233, 81, 81);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.view-item-page .card .view-item-box .info-group .group-value .check-icon i {
    font-size: 11px;
}
.view-item-page
    .card
    .view-item-box
    .info-group
    .group-value
    .check-icon.active {
    background-color: rgb(62, 165, 37);
}
.view-item-page .card .view-item-box .info-group .update-required-switch {
    height: fit-content;
}
.view-item-page .card .view-item-box .info-group.file-group .group-value {
    height: fit-content;
}

#ar .view-section-title::before,
#ar .view-section-title::after {
    left: unset;
    right: 25px;
}
#ar .view-section-title::after {
    right: 0;
}

@media (max-width: 1200px) {
    .view-item-page .card .view-item-box .info-group {
        flex-direction: column;
        gap: 10px;
    }
}
@media (max-width: 800px) {
    .view-item-page .card .top {
        flex-wrap: wrap;
        gap: 10px;
    }
    .view-item-page .card .card-title {
        font-size: 20px !important;
    }
    .view-item-page .card .view-item-box .multi-item {
        gap: 0;
        flex-direction: column;
    }
    .view-item-page .card .view-item-box .info-group {
        margin-bottom: 10px;
    }
}
body {
    background-color: rgba(238, 238, 238, 0.4117647059);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
body .page {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

#ar * {
    direction: rtl;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    font-family: Tajawal, Arial, Helvetica, sans-serif;
}

pre {
    overflow: auto; /* Add scrollbars if content overflows */
    white-space: pre-wrap; /* Allow text to wrap */
    word-wrap: break-word; /* Break long words to prevent overflow */
}

.input-with-text {
    border-radius: 30px;
    height: 35px;
    width: 100%;
    display: flex;
    border: 1px solid #ddd;
    overflow: hidden;
    align-items: center;
    gap: 5px;
}
.input-with-text.readonly {
    background-color: #eee;
}
.input-with-text input {
    border-radius: 0;
    border: none;
    width: 100%;
    padding: 10px;
}
.input-with-text .text {
    padding: 10px;
}

.search-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 30px;
    max-width: 500px;
    width: 100%;
    height: 35px;
    overflow: hidden;
}
.search-box input {
    padding: 0 10px;
    border: none;
    width: 100%;
}
.search-box .search-btn {
    width: 40px;
    aspect-ratio: 1/1;
    height: unset;
    border-radius: 0;
    background-color: transparent;
    color: #000;
}
.search-box .search-btn:hover {
    border-color: transparent;
    background-color: #eee;
}

input,
textarea {
    border-radius: 30px;
    padding: 0 10px;
    outline: none;
    border: 1px solid #ddd;
}
input[readonly],
textarea[readonly] {
    background-color: #eee;
}

textarea {
    padding: 10px;
    min-height: 40px;
    border-radius: 10px;
}

.card-title {
    font-weight: 500;
    font-size: 20px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.dark-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.3294117647);
    animation: showDarkBg 0.4s;
    z-index: 3;
}
@keyframes showDarkBg {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

a,
.link-style {
    text-decoration: none;
    font-weight: 500;
    color: rgb(0, 124, 207);
    transition: 0.2s;
    padding: 0;
    background-color: transparent;
    border-radius: 0;
    border: none;
    cursor: pointer;
    font-size: 14px;
}
a:not(.table-btn):hover,
.link-style:not(.table-btn):hover {
    background-color: transparent;
    color: rgb(60, 184, 255);
}
a:not(.table-btn):hover img,
.link-style:not(.table-btn):hover img {
    filter: brightness(1.2);
}
a img,
.link-style img {
    transition: 0.3s;
}

.status-icon {
    width: 20px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    display: flex !important;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 10px;
    flex-shrink: 0;
}
.status-icon.active {
    background-color: rgb(62, 165, 37);
}
.status-icon.pending {
    background-color: rgb(233, 199, 7);
}
.status-icon.rejected {
    background-color: rgb(233, 81, 81);
}
.status-icon.inactive {
    background-color: rgb(123, 0, 161);
}
.status-icon.canceled {
    background-color: rgb(233, 116, 7);
}
.status-icon.deleted {
    background-color: #000;
}
.status-icon.approved {
    background-color: rgb(62, 165, 37);
}
.status-icon.expired {
    background-color: rgb(238, 0, 198);
}
.status-icon.update_required {
    background-color: rgb(233, 116, 7);
}
.status-icon.blocked {
    background-color: rgb(233, 81, 81);
}
.status-icon.draft {
    background-color: gray;
}
.status-icon.complete {
    background-color: rgb(3, 117, 192);
}

.required {
    color: red;
}
.required::after {
    content: "*";
}

button,
a.link-btn {
    border-radius: 30px;
    padding: 5px 20px;
    border: 1px solid transparent;
    background-color: #03045e;
    color: #fff;
    transition: 0.2s;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    height: 35px;
    gap: 5px;
    font-weight: 500;
}
button:hover,
a.link-btn:hover {
    border-color: #03045e;
    color: #03045e;
}
button:not(.circle):hover,
a.link-btn:not(.circle):hover {
    background-color: #fff;
}
button.circle,
a.link-btn.circle {
    width: 35px;
    height: 35px;
    padding: 0;
}
button.circle:hover,
a.link-btn.circle:hover {
    border-color: transparent;
    color: #fff;
    filter: brightness(1.2);
}
button.red,
a.link-btn.red {
    background-color: rgb(233, 81, 81);
}
button.gray,
a.link-btn.gray {
    color: #000;
    background-color: rgb(223, 223, 223);
}
button.green,
a.link-btn.green {
    background-color: rgb(62, 165, 37);
}
button.disabled,
a.link-btn.disabled {
    background-color: #ccc;
    cursor: not-allowed;
}
button.disabled:hover,
a.link-btn.disabled:hover {
    border-color: transparent;
    color: #fff;
    filter: brightness(1);
    background-color: #ccc;
}

.loading-spinner {
    display: flex;
    width: 25px;
    aspect-ratio: 1/1;
    border: 2px solid #03045e;
    border-radius: 50%;
    border-left-color: transparent;
    border-right-color: transparent;
    animation: rotate-loading-spinner 0.7s linear infinite;
}
.loading-spinner.white {
    border-top-color: #fff;
    border-bottom-color: #fff;
}
@keyframes rotate-loading-spinner {
    0% {
        rotate: 0;
    }
    100% {
        rotate: 360deg;
    }
}

.submit-btn .loading-spinner,
.btn-with-loading-spinner .loading-spinner {
    display: none;
}
.submit-btn.disabled,
.btn-with-loading-spinner.disabled {
    background-color: #ddd;
    color: #03045e;
    cursor: not-allowed;
}
.submit-btn.disabled span,
.submit-btn.disabled i,
.btn-with-loading-spinner.disabled span,
.btn-with-loading-spinner.disabled i {
    display: none;
}
.submit-btn.disabled .loading-spinner,
.btn-with-loading-spinner.disabled .loading-spinner {
    display: flex;
}
.submit-btn.paused,
.btn-with-loading-spinner.paused {
    color: #000;
    background-color: #ddd;
    cursor: not-allowed;
}
.submit-btn.paused:hover,
.btn-with-loading-spinner.paused:hover {
    border-color: transparent;
    color: #000;
    background-color: #ddd;
}

.stars-box {
    display: flex;
    align-items: center;
    gap: 2px;
}
.stars-box .star-btn {
    width: fit-content;
    height: fit-content;
    padding: 0;
    background-color: transparent;
    border-radius: 0;
}
.stars-box .star-btn:hover {
    border-color: transparent;
}
.stars-box .star-btn.current {
    cursor: default;
}
.stars-box .star-btn.changeable .star {
    font-size: 12px;
}
.stars-box .star {
    color: #ccc;
    font-size: 11px;
    transition: 0.3s;
}
.stars-box .star.active {
    color: rgb(255, 183, 28);
}
.stars-box:has(.star-btn:hover) .star-btn .star {
    filter: brightness(1.1);
}
.stars-box:has(.star-btn:hover) .star-btn:hover ~ .star-btn .star {
    filter: brightness(1);
}

.hint {
    padding: 0 10px;
    color: red;
    font-weight: 500;
    font-size: 14px;
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.hint.success {
    color: green;
}

.scroll-animate {
    transition: 1.5s;
}

ul {
    list-style: none;
}

.hide {
    display: none !important;
}

.container {
    padding: 20px 150px;
    margin-top: 60px;
    flex-grow: 1;
}

.form-page {
    align-items: center;
}
.form-page .card {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 800px;
}
.form-page .card > .top {
    gap: 10px;
    flex-wrap: wrap;
}
.form-page .card form {
    flex-grow: 1 !important;
}

.create-proposal-page .card {
    max-width: 900px;
}

.dashboard-container {
    background-color: #eeeeee;
    flex-grow: 1;
    transition: 0.3s;
    display: flex;
    flex-direction: column;
}
.dashboard-container .page {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    margin-top: 60px;
}

body:not(.mobile-view) .dashboard-container {
    margin-left: 250px;
}

.card {
    background-color: #fff;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.062745098);
    flex-grow: 1;
}
.card .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.card .top .card-title {
    font-size: 25px;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 10px;
}
.card .top .logo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    aspect-ratio: 2/1;
    overflow: hidden;
}
.card .top .logo img {
    width: 100%;
    height: 150%;
    object-fit: contain;
}
.card .top .buttons a:hover {
    color: #03045e;
}

/* Remove arrows in Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}

/* Remove arrows in Chrome, Safari, and Edge */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

hr {
    opacity: 0.8;
    margin: 10px 0;
    border: 2px solid #eee;
    border-radius: 10px;
}
hr.vertical {
    display: flex;
    flex-grow: 1;
    margin: 0 10px;
    border-width: 1px;
}

.show-password-btn {
    margin: 12px;
    cursor: pointer;
    transition: 0.3s;
}
.show-password-btn:hover {
    color: #686abe;
}

.bg-red {
    background-color: rgb(233, 81, 81) !important;
}
.bg-red:hover {
    border-color: transparent;
    color: #fff;
    filter: brightness(1.1);
}

.bg-blue {
    background-color: rgb(136, 200, 252) !important;
}

.bg-green {
    background-color: rgb(93, 255, 120) !important;
}

.bg-dark-green {
    background-color: rgb(0, 204, 27) !important;
}
.bg-dark-green:hover {
    border-color: transparent;
    color: #fff;
    filter: brightness(1.1);
}

.bg-dark-green {
    background-color: rgb(37, 185, 61) !important;
}
.bg-dark-green.link-btn:hover {
    color: rgb(37, 185, 61);
    background-color: transparent !important;
    border-color: rgb(37, 185, 61);
}

.bg-gray {
    background-color: gray;
}
.bg-gray:hover {
    color: gray;
    border-color: gray;
    background-color: #fff;
}

.bg-yellow {
    background-color: rgb(255, 212, 93) !important;
}

.bg-pink {
    background-color: rgb(252, 158, 255) !important;
}

.bg-purple {
    background-color: rgb(196, 134, 255) !important;
}

#ar .dashboard-container {
    margin-left: 0;
    margin-right: 250px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
    border: 1px solid #ddd;
}

.empty-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 15px;
    flex-direction: column;
}
.empty-box.with-large-icon {
    height: 100%;
}
.empty-box.with-large-icon .icon {
    font-size: 60px;
    color: #ddd;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #aaa;
    border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #888;
}

::selection {
    background-color: #03045e;
    color: #fff;
}

/* Width of the scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.info-text-box {
    position: relative;
    z-index: 3;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 15px;
    aspect-ratio: 1/1;
}
.info-text-box i {
    color: #aaa;
}
.info-text-box:hover .info-text {
    scale: 1;
    opacity: 1;
}
.info-text-box .info-text {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    background-color: #fff;
    padding: 10px;
    border-radius: 5px;
    cursor: default;
    border: 1px solid #eee;
    width: 100vw; /* Ensures a reasonable starting width */
    max-width: 250px; /* Limits width to avoid overly wide containers */
    white-space: normal; /* Allows text to wrap */
    word-wrap: break-word; /* Ensures long words wrap properly */
    font-size: 14px;
    scale: 0;
    opacity: 0;
    transition: 0.1s;
    transform-origin: top left;
}

.highlight-text-box {
    display: flex;
    background-color: #aaa;
    width: fit-content;
    padding: 3px 10px;
    font-size: 13px;
    border-radius: 5px;
    color: #fff;
}
.highlight-text-box.green {
    background-color: rgb(62, 165, 37);
}
.highlight-text-box.red {
    background-color: rgb(233, 81, 81);
}

.statistics-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.statistics-section .top-cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 20px;
}
.statistics-section .top-cards-container .data-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #ddd;
    padding: 10px 20px;
    border-radius: 10px;
    color: #fff;
}
.statistics-section .top-cards-container .data-card .icon {
    width: 50px;
    aspect-ratio: 1/1;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ddd;
    font-size: 25px;
}
.statistics-section .top-cards-container .data-card .text {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}
.statistics-section .top-cards-container .data-card .text .card-title {
    font-size: 18px;
}
.statistics-section .top-cards-container .data-card .text .card-value {
    font-weight: 600;
    font-size: 30px;
}
.statistics-section .top-cards-container .data-card.blue {
    background-color: rgb(92, 168, 255);
}
.statistics-section .top-cards-container .data-card.blue .icon {
    color: rgb(92, 168, 255);
}
.statistics-section .top-cards-container .data-card.green {
    background-color: rgb(0, 227, 150);
}
.statistics-section .top-cards-container .data-card.green .icon {
    color: rgb(0, 227, 150);
}
.statistics-section .top-cards-container .data-card.orange {
    background-color: rgb(254, 176, 25);
}
.statistics-section .top-cards-container .data-card.orange .icon {
    color: rgb(254, 176, 25);
}
.statistics-section .top-cards-container .data-card.red {
    background-color: rgb(255, 113, 113);
}
.statistics-section .top-cards-container .data-card.red .icon {
    color: rgb(255, 113, 113);
}
.statistics-section .charts-container {
    display: flex;
    gap: 20px;
}
.statistics-section .charts-container .chart-title {
    font-weight: 400;
    font-size: 18px;
    padding: 0 15px;
}
.statistics-section .charts-container .area-chart-box {
    width: 100%;
}
.statistics-section .charts-container .area-chart-box .top {
    margin-bottom: 10px;
}
.statistics-section .charts-container .area-chart-box .top .area-chart-select {
    max-width: 100px;
}
.statistics-section .charts-container .side-chart-box {
    min-width: 350px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.statistics-section .charts-container .side-chart-box .apexcharts-legend {
    width: 170px;
}

@media (max-width: 1100px) {
    .statistics-section .charts-container {
        flex-direction: column;
    }
    .statistics-section .charts-container .side-chart-box {
        flex-direction: row;
    }
    .statistics-section .charts-container .side-chart-box .donut-chart-box {
        flex: 1;
    }
}
@media (max-width: 1000px) {
    .container {
        padding: 20px;
    }
}
@media (max-width: 800px) {
    #en .dashboard-container {
        margin-left: 60px;
    }
    #ar .dashboard-container {
        margin-left: unset;
        margin-right: 60px;
    }
}
@media (max-width: 1000px) {
    .statistics-section .charts-container .side-chart-box {
        flex-direction: column;
        width: 100%;
    }
    .statistics-section .charts-container .side-chart-box .donut-chart-box {
        max-width: 350px;
        width: 100%;
    }
}
@media (max-width: 500px) {
    .container {
        padding: 0;
        padding-bottom: 20px;
    }
    .container .card {
        border-radius: 0;
    }
    .dashboard-container .page {
        padding: 10px;
        gap: 10px;
    }
    .dashboard-container .page .card {
        border-radius: 10px !important;
    }
    .dashboard-container .form-page {
        padding: 0 !important;
    }
    .dashboard-container .form-page .card {
        border-radius: 0 !important;
    }
    .dashboard-container .form-page .card > .top {
        flex-direction: column;
    }
    .dashboard-container .form-page .card .card-title {
        font-size: 18px !important;
    }
    .dashboard-container .view-item-page {
        padding: 0;
    }
    .dashboard-container .view-item-page .card {
        padding: 10px;
        border-radius: 0 !important;
    }
    .card {
        padding: 15px;
    }
    form {
        padding: 0;
        border: none;
    }
    .statistics-section {
        gap: 10px;
    }
    .statistics-section .top-cards-container {
        gap: 10px;
    }
    .statistics-section .charts-container {
        gap: 10px;
    }
    .statistics-section .charts-container .side-chart-box {
        gap: 10px;
    }
}

/*# sourceMappingURL=app.css.map */