* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

:root {
    --primary-gradient: linear-gradient(135deg, #EAF4FF, #E0F5FF);
    --border-gradient: linear-gradient(135deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 50%, #FFFFFF 100%);
    --text-color: #3f3f3f;
    --card_-gradient: #FFFFFF;
    --card_bg: #AFAFAF;
    --page_bg: #EFEFEF;
    /*Black PRIMARY*/
    --primary-light: #E6E6E6;
    --primary-light-hover: #D9D9D9;
    --primary-light-active: #B0B0B0;
    --primary-normal: #000000;
    /*Blue SECONDARY*/
    --blue---light: #F1F8FC;
    --blue---light-hover: #E9F5FA;
    --blue---light-active: #D2E9F5;
    --blue---normal: #6FB9DE;
    --blue---normal-hover: #64A7C8;
    --blue---normal-active: #5994B2;
    --blue---dark: #538BA7;
    /*GRAY*/
    --gray-normal: rgba(71, 84, 103, 1);
    --gray-dark: rgba(52, 64, 84, 1);
    --gray-light: rgba(102, 112, 133, 1);
    --gray-lighter: rgba(152, 162, 179, 1);
    --gray-darker: rgba(29, 41, 57, 1);
    /*SYSTEM*/
    --system--danger--normal: rgba(240, 68, 56, 1);
    --system--danger--dark: rgba(217, 45, 32, 1);
    --system--danger--darker: rgba(180, 35, 24, 1);
    --system--danger--light: rgba(249, 112, 102, 1);
    --system--danger--lighter: rgba(253, 161, 155, 1);
    --system--warning--normal: rgba(247, 144, 9, 1);
    --system--warning--light: rgba(253, 176, 34, 1);
    --system--warning--lighter: rgba(254, 200, 75, 1);
    --system--warning--dark: rgba(220, 104, 3, 1);
    --system--warning--darker: rgba(181, 71, 8, 1);
    --system--success--normal: rgba(18, 183, 106, 1);
    --system--success--dark: rgba(3, 152, 85, 1);
    --system--success--darker: rgba(2, 122, 72, 1);
    --system--success--light: rgba(50, 213, 131, 1);
    --system--success--lighter: rgba(108, 233, 166, 1);
    --card-shadow: 0 1.6px 3.6px rgba(65, 128, 168, 0.028),
    0 4.4px 10px rgba(65, 128, 168, 0.02),
    0 10.6px 24.1px rgba(65, 128, 168, 0.052),
    0 35px 80px rgba(65, 128, 168, 0.02);
}

ul {
    list-style: none;
}

li,
p,
h2,
h5,
span,
ul {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: var(--primary-normal);
}

.form-control[disabled] {
    background-color: white !important;
    margin-top: 4px;
}
.cursor-pointer{
    cursor: pointer;
}
.gap-12 {
    gap: 12px;
}

.gap-20 {
    gap: 20px;
}

.gap-40 {
    gap: 40px;
}

.mb-16 {
    margin-bottom: 16px;
}

.mt-16 {
    margin-bottom: 16px;
}

.p-20 {
    padding: 20px;
}

.section-title {
    font-size: 18px;
    font-weight: bold;
    color: var(--gray-darker);
}

.main_btn {
    max-height: 40px;
    padding: 12px 28px;
    border-radius: 4px;
    border: 2px solid var(--primary-gradient);
    background: var(--primary-normal);
    text-decoration: none;
    font-size: 16px;
    color: var(--primary-light);
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
}

.secondary_btn,
.btn-secondary {
    max-height: 40px;
    padding: 12px 28px;
    border-radius: 4px;
    border: 2px solid var(--primary-gradient);
    background: var(--primary-light);
    text-decoration: none;
    font-size: 16px;
    color: var(--primary-normal);
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-success {
    max-height: 40px;
    padding: 12px 28px;
    text-decoration: none;
    font-size: 16px;
    color: var(--primary-light);
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    background-color: var(--system--success--darker);
    border-radius: 4px;
}

.btn-warning {
    background-color: var(--system--warning--dark);
    color: white
}

.btn-danger {
    max-height: 40px;
    padding: 12px 28px;
    border-radius: 4px;
    border: 2px solid var(--system--danger--light);
    background-color: var(--system--danger--light);
    text-decoration: none;
    font-size: 16px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
}

.link:hover {
    text-decoration: underline;
}

.light-border {
    border: 1px solid var(--blue---light-active);
}

.container-fluid {
    padding-left: 40px;
    padding-right: 40px;
}

svg {
    aspect-ratio: 1 / 1;
}

/*badges*/
.badge-blue {
    background-color: var(--blue---light);
    border: 1px solid var(--blue---dark);
    color: var(--blue---dark);
    padding: 4px 16px;
    border-radius: 24px;
    white-space: nowrap;
}

.badge-success {
    background-color: rgba(75, 254, 115, .2);
    border: 1px solid var(--system--success--darker);
    color: var(--system--success--darker);
    padding: 4px 16px;
    border-radius: 24px;
    white-space: nowrap;
}

.badge-warning {

    background-color: rgba(254, 200, 75, .2);
    border: 1px solid var(--system--warning--darker);
    color: var(--system--warning--darker);
    padding: 4px 16px;
    border-radius: 24px;
    white-space: nowrap;
}

.badge-danger {
    background-color: #FDD3D0;
    border: 1px solid var(--system--danger--darker);
    color: var(--system--danger--darker);
    padding: 4px 16px;
    border-radius: 24px;
    white-space: nowrap;
}

/*Options*/
.option-wrapper {
    display: inline-block;
}

.dropdown-menu-custom {
    background-color: #fff;
    border-radius: 6px;
    min-width: 120px;
    padding: 0.5rem 0;
    top: 100%;
    left: 0;
    z-index: 1000;
}

.dropdown-menu-custom li {
    list-style: none;
}

.dropdown-menu-custom .dropdown-item {
    display: block;
    padding: 8px 16px;
    text-decoration: none;
    color: #333;
    transition: background-color 0.2s;
}

.dropdown-menu-custom .dropdown-item:hover {
    background-color: #f5f5f5;
}

.option {
    cursor: pointer;
}

.option svg {
    color: var(--gray-normal) !important;
    width: 16px !important;
}

/*Inputs*/
.form-control {
    border: 2px solid var(--primary-light-active) !important;
    background-color: white;
    padding-top: 8px;
    padding-bottom: 8px;
    color: var(--primary-normal);
    width: 100%;
    display: block;
    text-align: right;
}

/*ALERT*/
.custom-alert {
    display: flex;
    align-items: center;
    padding: 1rem;
    border: 1px solid;
    border-radius: 0.75rem;
    font-size: 0.95rem;
    font-weight: 400;
    direction: rtl;
    margin: 1rem 0;
    transition: all 0.3s ease;
    border-right: 8px solid var(--system--success--dark);
}

.alert-icon {
    margin-left: 0.75rem;
    font-weight: bold;
    font-size: 1.2rem;
}

.alert-icon svg {
    width: 28px;
    height: 28px;
}

.info-alert {
    background-color: #F6FEF9;
    border-color: var(--system--success--light);
    color: #084298;
    border-right: 8px solid var(--system--success--dark);
}

.success-alert {
    background-color: #F6FEF9;
    border-color: var(--system--success--light);
    color: #2f855a;
    border-right: 8px solid var(--system--success--dark);
}

.warning-alert {
    background-color: #fffaf0;
    border-color: #fbd38d;
    color: #d69e2e;
    border-right: 8px solid var(--system--warning--dark);
}

.danger-alert {
    background-color: #fff5f5;
    border-color: #feb2b2;
    color: #c53030;
    border-right: 8px solid var(--system--danger--dark);
}
/* Styling for floating alerts */
.inline-alert {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999999;
    width: 100%;
    max-width: 500px; /* Or any width you prefer */
    animation: fadeInDown 0.5s;
}

.custom-alert {
    position: relative; /* Needed for positioning the close button */
    padding-right: 40px; /* Add space for the close button */
}

.close-alert {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: inherit;
    cursor: pointer;
    padding: 0;
    opacity: 0.7;
}

.close-alert:hover {
    opacity: 1;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate(-50%, -20px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

/*LOADER*/
.loader{
    background: linear-gradient(220deg, #F5F9FF 0%, #E2F1F9 100%);
    position: fixed;
    inset: 0 0 0 0;
    z-index: 9999999999;
}
.loader img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    max-width: 100px;
}
.loader svg{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) rotate(-90deg);
}
.draw-circle {
    animation: draw 1.5s ease-out forwards;
}

@keyframes draw {
    to {
        stroke-dashoffset: 0;
    }
}

/*BODY*/
body:not(.signup) {
    position: relative;
    background: linear-gradient(220deg, #F5F9FF 0%, #E2F1F9 100%);
    font-family: 'Lama Sans', sans-serif;
    min-height: calc(100vh + 100px);
    padding-bottom: 150px;
}

body.signup {
    background-color: #F3FDFF;
    font-family: 'Lama Sans', sans-serif;
}

body:not(.signup) {
    zoom: 85%;
}

/*SignUp*/
.signup > .d-flex > div {
    height: 100vh;
}

.signup .left-side {
    /*background-image: url("../images/signup.svg");*/
    background: #162536 url("../images/pattern.svg");
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    gap: 16px;
    position: relative;
    width: 40vw;
    overflow: hidden;
}

.signup .left-side h1 {
    font-size: 24px;
    font-weight: bold;
}

.signup .left-side p {
    font-size: 16px;
    max-width: 600px;
    opacity: .8;
    font-weight: 200;
    letter-spacing: 1.5px;
}

.signup .left-side img {
    border: 2px solid white;
    border-radius: 16px;
}


.signup .left-side svg path {
    width: 100%;
}

.left-side:after {
    content: '';
    width: 100px;
    height: 100px;
    position: absolute;
    top: -35px;
    right: -35px;
    background-image: url("../images/circle.svg");
    background-size: 100px 100px;
    animation: spin 5s linear infinite;
}

.left-side:before {
    content: '';
    width: 100px;
    height: 100px;
    position: absolute;
    bottom: -35px;
    left: -35px;
    background-image: url("../images/circle.svg");
    background-size: 100px 100px;
    transform: rotate(180deg);
    animation: spin1 5s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes spin1 {
    0% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(540deg);
    }
}

.signup .right-side {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    width: 50vw;
}

.signup .right-side form {
    width: 600px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.btn-check:checked + .btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check) + .btn:active {
    color: white;
    background-color: var(--primary-normal);
    border-color: var(--primary-normal);
}

.signup .right-side form a {
    color: var(--blue---normal) !important;
    text-decoration: none !important;
}

.signup .right-side form div {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.signup .right-side form div input,
.signup .right-side form div select {
    border: 2px solid var(--primary-normal);
    padding: 8px 12px;
    text-align: right;
}

/*nav*/
nav {
    padding: 16px 0;
    position: sticky;
    top: 0;
    z-index: 99999;
}

nav img {
    max-width: 80px;
}

nav .notification svg {
    width: 24px;
}

nav .notification {
    position: relative;
}

nav .notification svg {
    width: 24px;
    transition: .3s ease-in-out;
    cursor: pointer;
}

nav .notification svg:hover {
    transform: scale(1.1);
}

nav .notification ul {
    position: absolute;
    top: 50px;
    background-color: white;
    padding: 16px;
    border-radius: 16px;
    width: 280px;
    left: -10px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: var(--card-shadow);
    border: 1px solid #e5f2ff;
}

nav .notification ul li {
    padding: 12px 0;
}

nav .notification ul li:not(:last-child) {
    border-bottom: 1px solid #f1f1f1;
}

nav .add-waqf-btn {
    padding: 12px 28px;
    border: 1px solid var(--blue---normal);
    margin-left: 20px;
}

nav .add-waqf-btn svg {
    color: var(--blue---normal);
    width: 18px;
    margin-left: 8px;
}

/*Sidebar*/
.sidebar {
    width: 260px;
    min-height: calc(100vh - 100px);
    padding: 24px;
    border-radius: 12px 0 0 12px;
    position: fixed;
    top: 100px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.sidebar ul li {
    padding: 16px;
    white-space: nowrap;
}

.sidebar ul li.active {
    border-radius: 12px;
    background-color: var(--primary-normal);

}

.sidebar ul li.active a {
    color: white;

}

.sidebar svg {
    margin-left: 8px;
    max-width: 24px;
    max-height: 24px;

}
.sidebar .signout svg{
    color: var(--system--danger--normal);
}
.sidebar ul li.active svg {
    color: white;
}
/*Bottom nav*/
.bottom-nav{
    position: fixed;
    height: 70px;
    background-color: white;
    bottom: 0;
    right: 0;
    left: 0;
    display: flex;
    align-items: center;
}
.bottom-nav ul{
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
}
.bottom-nav ul li{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 8px;
    border-radius: 12px;
}
.bottom-nav ul li.active{
    background-color: var(--primary-normal);
}
.bottom-nav ul li.active a,
.bottom-nav ul li.active a svg{
    color: white;
}
.bottom-nav ul li a{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    color: var(--primary-normal);
}
.bottom-nav ul li a small{
    font-size: 12px;
    display: none;
}
.bottom-nav ul li.active a small{
    font-size: 12px;
    display: block;
}
.bottom-nav ul li svg{
    width: 28px;
    height: 28px;
    color: var(--primary-normal);
}
/*Content*/
.content {
    width: 100%;
    max-width: calc(100% - 260px);
    margin-right: auto;
    position: relative;
}

@media only screen and (max-width: 768px) {
    .content {
        max-width: 100% !important;
    }
}

.content.full-width {
    width: 100%;
    max-width: 100% !important;
    margin-right: auto;
}

/*Account Status*/

.account-status .progress-container {
    position: relative;
    height: 8px;
    background-color: #d1e9f7;
    border-radius: 4px;
}

.account-status a svg {
    color: white;
    width: 20px;
}

.account-status .progress-bar-blue {
    background-color: #55b6e5;
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease-in-out;
    position: relative;
}

.progress-bar-blue:after {
    content: 'خطوة واحدة متبقية';
    position: absolute;
    top: -24px;
    left: 0;
}

/*statistics*/
.awqaf-statistics span:not(.count) {
    font-size: 16px;
    font-weight: 400;
    color: var(--text-color);
}

.awqaf-statistics h6 {
    font-size: 32px;
    font-weight: 600;
}

.awqaf-statistics h6 svg {
    width: 24px;
}

.awqaf-statistics .card div svg {
    width: 36px;
    color: var(--blue---normal);
}

/*Awqaf cards*/
.waqf,
.ticket {
    cursor: pointer;
    transition: .3s ease-in-out;
}

.waqf .progress-bar,
.waqf .progress {
    --bs-progress-bar-bg: var(--blue---normal);
    --bs-progress-height: 8px;

}

.waqf .progress {
    margin-top: 8px;
    --bs-progress-bg: var(--blue---light-active);
}

.waqf:hover,
.ticket:hover {
    box-shadow: var(--card-shadow);
}

.waqf .waqf-name {
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.waqf svg {
    width: 24px;
    color: var(--blue---normal);
}

.waqf p,
.ticket p {
    font-size: 14px;
    font-weight: 400;
    opacity: .8;
    margin-bottom: 6px;
}

.waqf span {
    font-size: 12px;
}

/*Ticket cards*/
.ticket .ticket-title {
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ticket span {
    font-size: 12px;
}

.ticket .ticket-title svg {
    color: var(--blue---normal);
    width: 24px;
}

/*breadcrumb*/
.breadcrumb a.go-back {
    padding: 12px;
    border-radius: 8px;
}

.breadcrumb a svg {
    color: white;
    width: 12px;
}

.breadcrumb span {
    font-size: 20px;
    font-weight: 600;
}

/* Accordion */
.accordion-card.open .accordion-body {
    max-height: 400px;
    margin-top: 24px !important;
    opacity: 1;
}

.accordion-card.open .accordion-title svg {
    transform: rotate(180deg);

}

.accordion-card .accordion-body {
    max-height: 0px;
    overflow: hidden;
    margin-top: 0 !important;
    transition: .5s ease-in-out;
    opacity: 0;
}

.accordion-title {
    cursor: pointer;
}

.accordion-title span {
    color: var(--primary-normal);
    font-weight: 500;
}

.accordion-title svg {
    color: var(--primary-normal);
    width: 16px;

    transition: .5s ease-in-out;
}

.accordion-body label {
    display: block;
}

.accordion-body input:disabled {
    border: 2px solid var(--gray-dark);
    background-color: white;
    padding-top: 8px;
    padding-bottom: 8px;
    color: var(--primary-normal);
}

/*Files*/
.file-type {
    border-radius: 8px;
    background-color: var(--blue---light-hover);
    width: 60px;
    height: 60px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.file-type svg {
    width: 32px;
    color: var(--blue---normal);

}

.file .file-name {
    font-size: 18px;
}

.file .download-link svg {
    width: 24px;
    color: var(--primary-normal);
}

.upload-form {
    max-height: 0;
    overflow: hidden;
    transition: .5s ease-in-out;
}

.upload-form.open {
    max-height: 400px;
}
.upload-form.link.open {
    max-height: 600px;
}
.upload-form label {
    font-weight: 500;
}

/*Ticket*/
.chat-view {
    max-height: 300px;
    overflow-y: scroll;
}

.close-ticket svg {
    width: 18px;
}

.reply {
    margin-right: 24px;
}

/*nazir*/
.table {
    border-radius: 16px;
    overflow: hidden;
    padding-right: 20px;
}

table tr th {

    font-weight: 600;
}

.table tr td {

    font-weight: 400;
}

.table tr td:first-child,
.table tr th:first-child {
    width: 48px;
    border-left: 1px solid var(--blue---light);
}

.table td:not(:first-child),
.table th:not(:first-child) {
    width: 200px;
}

.table tr td,
.table tr th {
    font-size: 16px;
    padding: 16px !important;
    border-left: 1px solid var(--blue---light);
}

thead.table-light {
    --bs-table-bg: white !important;

}

.table-light {
    --bs-table-bg: var(--blue---light-hover) !important;
    --bs-table-border-color: #f1f1f1;
}

.table-hover tbody tr:hover {
    --bs-table-hover-bg: var(--blue---light-hover) !important;
}

.pagination {
    justify-content: end;
}

.table-pagination .page-link {
    color: var(--primary-normal);
}

.table-pagination .page-link:hover {
    z-index: 2;
    color: white;
    background-color: var(--primary-normal) !important;
    border-color: var(--bs-pagination-hover-border-color);
}

/*accepting waqf*/
.accepting-waqf .form-control {
    border: 2px solid var(--primary-normal) !important;
    background-color: white;
    padding-top: 8px;
    padding-bottom: 8px;
    color: var(--primary-normal);
    width: 100%;
    display: block;
    text-align: right;
}

form .custom-file-upload {
    display: flex;
    align-items: center;
    background-color: #000;
    color: #fff;
    border-radius: 8px;
    padding: 12px 16px 14px;
    margin-top: 8px;
    position: relative;
    gap: 8px;
}

form .file-text {
    font-size: 14px;
}

form .upload-icon {
    cursor: pointer;
    color: #fff;
}

form .upload-icon input {
    position: absolute;
    inset: 0 0 0 0;
    z-index: 999;
    opacity: 0;
    cursor: pointer;
}

form .upload-icon svg {
    width: 20px;
}

.popup {
    position: fixed;
    inset: 0 0 0 0;
    background-color: rgba(0, 0, 0, .3);
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(20px);
    gap: 16px;
}

.popup-form .bg-white {
    justify-content: flex-start !important;
}

.popup-form .popup-header {
    width: 100%;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--blue---light-active);
}
.popup-header span{
    font-size: 20px;
    font-weight: 500;
}
.popup-form .popup-header svg {
    width: 20px;
    height: 20px;
    color: var(--blue---normal);
    cursor: pointer;
}

.popup > div {
    width: 100%;
    height: 100%;
    max-width: 600px;
    max-height: 300px;
}

.popup-form > div {
    height: auto;
    max-height: max-content;
}

.popup svg {
    width: 60px;
    height: 60px;
    color: var(--system--success--dark);
}

.popup p {
    max-width: 360px;
    text-align: center;
}

.uncompleted-registration svg {
    color: var(--system--warning--dark);
    height: 60px;
    width: 60px;
}

/*Profile*/
.recent-action svg ,
.recent-announcement svg {
    width: 24px;
    height: 24px;
    color: var(--blue---normal);
}
.recent-announcement li{
    cursor: pointer;
}
.actions-list {
    position: relative;
}

.actions-list:before {
    content: '';
    position: absolute;
    height: 100%;
    width: 1px;
    border: 1px dashed var(--blue---normal);
    right: 15px;
    z-index: 0;
    top: 16px;
}

.actions-list li {
    padding: 16px 0 !important;
    margin-bottom: 4px;
    position: relative;
    z-index: 2;
}

.circle {
    width: 32px;
    height: 32px;
    background-color: var(--blue---normal);
    border-radius: 24px;
}

input[disabled] {
    background-color: white !important;
    border-color: var(--blue---light-hover) !important;
}
/*announcement*/
.recent-announcement img{
    width: 76px;
    height: 56px;
    object-fit: cover;
    border-radius: 4px;
}
.recent-announcement .flex-column{
    text-overflow: fade;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
}
/*chat*/
.message{
    max-width: 600px;
}
.selected-chat{
    background-color: var(--blue---light-hover);
}
/*nazir*/
.toggle .tabs div {
    cursor: pointer;
}

.toggle .active {
    background-color: var(--primary-normal);
    color: white;
    border-radius: 24px;
}

.dropdown-toggle {
    position: relative;
}

.dropdown-toggle::after {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    display: none;
    margin-right: 0;
    vertical-align: 0;
    content: "";
    border: 0;
    border-right: 1px solid whitesmoke;
    height: 100%;
    width: 34px;
    background-image: url("../images/chevron-down.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 8px;

}

.update-button svg {
    width: 20px;
    height: 20px;
    margin-left: 8px;
}

.dropdown-toggle {
    padding-left: 16px;
}

.dropdown-toggle img {
    margin-right: 28px;
    border-right: 1px solid black;
    display: block;
    height: 100%;
    padding: 12px 12px 12px 0;
}

.beneficiary-files p {
    color: var(--primary-normal);
    font-weight: bold;
    margin-top: 32px;
    margin-bottom: 16px;
}

.beneficiary-files .file {
    background-color: var(--blue---light) !important;
}

.toggle-tabs,
.method-tabs {
    border: 2px solid var(--primary-normal);
    border-radius: 4px;
}

.toggle-tabs label {
    cursor: pointer;
}

.toggle-tabs .toggle-option {
    cursor: pointer;
    background-color: white;
    color: black;
    transition: all 0.3s ease;
}

.toggle-tabs .toggle-option.active {
    background-color: black;
    color: white;
    border-color: black;
}

.method-tabs .tab {
    cursor: pointer;
}

.method-tabs .tab.active {
    background-color: black;
    color: white;
}

.beneficiary-box {
    position: relative;
    padding: 8px 12px;
    border: 1px solid var(--primary-normal);
    border-radius: 4px;
    margin: 8px 8px 0 0;
    background-color: white;
    font-size: 14px;
}

.beneficiary-box .remove-btn {
    position: absolute;
    top: -6px;
    left: -6px;
    background: #dc3545;
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 12px;
    text-align: center;
    line-height: 18px;
    cursor: pointer;
}

#addBeneficiaryBtn {
    font-size: 28px;
}

.adding-waqf input {
    border-width: 2px !important;
    margin-top: 4px;
}

.adding-waqf .steps {
    border-radius: 30px !important;
}

.adding-waqf .steps div {
    cursor: pointer;
    opacity: .7;
}

.adding-waqf .steps div.active {
    background-color: var(--primary-normal);
    color: white;
    border-radius: 28px;
    opacity: 1;
}

.custom-upload {
    background-color: var(--primary-normal);
    color: white;
    height: 100%;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.3s;
    min-height: 160px;
}

.file-box {
    border: 1px solid #E5E5E5;
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 8px;
}

.adding-waqf .custom-upload svg {
    max-width: 48px;
}

.adding-waqf .custom-upload:hover {
    background-color: #23272b;
}


.adding-waqf .hidden-input {
    display: none;
}

.waqf-popup p {
    max-width: 500px;
}

@keyframes flip-hourglass {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.hourglass-rotate {
    animation: flip-hourglass 4s infinite ease-in-out;
    transform-origin: center;
    display: inline-block;
    color: var(--primary-normal) !important;
    width: 60px;
    height: 60px;
}

.success-section svg {
    color: var(--system--success--normal);
    margin-bottom: 20px;
}

.btn-icon button {
    white-space: nowrap;
    align-items: center;
}

.btn-icon button svg {
    width: 20px;
}

.btn-icon button.btn-danger {
    background-color: var(--system--danger--dark);
}

.profile .col-md-8 .container-fluid,
.profile .col-md-4 .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.announcement-popup > div {
    max-width: 900px;
}
.announcement-popup > div img{
    max-height: 300px;
    object-fit: cover;
    object-position: bottom;
}
.announcement-popup > div p{
    max-width: 100%;
    text-align: right;
}
/*Admin*/
.custom-checkbox{
    width: 24px;
    height: 24px;
    cursor: pointer;
}
.element.card .element-name{
    font-weight: 500;
}
.element.card .element-name img{
    margin-left: 8px;
    width: 40px;
}
.element.card p{
    font-size: 16px;
    opacity: .6;
    margin-bottom: 8px;
}
.element.card h5{
    font-size: 18px;
    font-weight: 400;
}
.banner{
    max-height: fit-content;
    background-image: url("../images/banner.png");
    background-size: cover;
    background-position: center;
    border-radius: 16px;
    color: white;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
}
.banner h4{
    margin: 0;
}
.banner p{
    max-width: 700px;
    margin: 0;
    line-height: 1.6;
    color: #EFEFEF;
}
.banner a{
    background-color: white;
    color: var(--primary-normal);
}
.regeneration-request div p{
    opacity: .6;
    font-weight: 400;
    line-height: 1.5;
}
.regeneration-request strong{
    font-size: 16px;
}
@media only screen and (max-width: 768px) {
    body:not(.signup) {
        zoom: 95%;
    }
    .main_btn {
        max-height: 36px;
        padding: 8px 20px;
        border-radius: 4px;
        border: 2px solid var(--primary-gradient);
        background: var(--primary-normal);
        text-decoration: none;
        font-size: 14px;
        color: var(--primary-light);
        display: flex;
        align-items: center;;
        justify-content: center;
        white-space: nowrap;
    }

    .progress-bar-blue:after {
        content: 'خطوة واحدة متبقية';
        position: absolute;
        top: -18px;
        left: 0;
        font-size: 12px;
    }

    .section-title {
        font-size: 18px;
        font-weight: 500;
        color: var(--gray-darker);
    }
    .statistics-card span.count {
        font-size: 24px;
        font-weight: 600;
        color: var(--text-color);
    }
    .statistics-card .d-flex svg {
        width: 24px !important;
        color: var(--blue---normal);
    }
    nav img {
        max-width: 60px;
    }
    .row>* {

        padding-left: calc(var(--bs-gutter-x) * .3);
        padding-right: calc(var(--bs-gutter-x) * .3);
    }
    .account-status span {
        font-size: 14px;
    }

    .card.bg-white {
        margin: 8px 0;
    }

    .container-fluid {
        padding-left: 16px;
        padding-right: 16px;
    }

    .breadcrumb span {
        font-size: 15px;
        font-weight: 500;
    }

    .ticket .ticket-title {
        font-size: 16px;
        font-weight: 400;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .popup > div {
        width: 100%;
        height: 100%;
        max-width: calc(100vw - 4px);
    }

    .popup-form .popup-header {
        width: 100%;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--blue---light-active);
        align-items: center;
    }

    .popup-form .popup-header span {
        font-weight: 600;
    }

    .popup-form .popup-header svg {
        width: 28px;
        height: 28px;
        color: var(--blue---normal);
        cursor: pointer;
    }

    .file-filter {
        max-height: 0;
        overflow: hidden;
        transition: .3s ease-in-out;
    }

    .file-filter.open-filter {
        max-height: 300px;
        overflow: hidden;
        margin-top: 12px;
    }

    .reply {
        margin-right: 0px;
    }

    p.text-muted {
        font-size: 12px;
        margin: 0 !important;
    }

    .chat-view div.border {
        font-size: 16px;
    }


    .signup > .d-flex > div {
        height: auto;
    }

    .signup .left-side {
        width: 100vw;
        text-align: center;
        padding: 24px 0;
        background: linear-gradient(180deg, #111D2D 0%, var(--primary-normal, #000) 100%);
    }

    .signup .left-side h1 {
        font-size: 16px;
        font-weight: bold;
        line-height: 1.4;
    }
    .signup .left-side h1 span{
        height: 0;
        overflow: hidden;
    }
    .signup .left-side p {
        font-size: 14px;
        letter-spacing: .5px;
        width: calc(100% - 16px);
        display: none;
    }

    .signup .right-side {
        width: 100vw;
    }
    .right-side .helping-links p{
        font-size: 14px;
    }
    .signup .right-side label,
    .signup .right-side input{
        font-size: 14px;
    }
    .signup .right-side form div {
        gap: 4px;
    }
    .login .copyright{
        position: absolute;
        bottom: 0;
        font-size: 12px;
        text-align: center;
        width: 100%;
    }
    .signup .copyright{
        font-size: 12px;
    }

/* nazir pages*/
    .add-waqf-btn {
        padding: 6px 12px !important;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 4px !important;
    }
    .add-waqf-btn span{
        display: none;
        padding: 6px 12px;
    }
    .add-waqf-btn svg{
        margin: 0 !important;
    }
    .adding-waqf .steps div{
        font-size: 11px;
    }
     label{
        font-size: 15px;
    }
    input {
        border-width: 2px !important;
        margin:   2px 0 6px 0;
    }
    .adding-waqf .card:last-child{
        padding-left: 12px;
        padding-right: 12px;
    }
    .badge-danger,
    .badge-success,
    .badge-warning{
        font-size: 12px;
    }
    .table tr{
        white-space: nowrap;

    }
    .table th,
    .table td{
        font-size: 14px !important;
    }
    .update-button{
        width: 100%;
        margin-top: 8px;
    }
    .custom-alert {
        display: flex;
        align-items: center;
        padding: 0.4rem;
        border: 1px solid;
        border-radius: 0.75rem;
        font-size: 0.75rem;
        font-weight: 400;
        direction: rtl;
        margin: 1rem 0;
        transition: all 0.3s ease;
        border-right-width: 8px ;
        top: 50px;
        padding-left: 20px;
    }
    .file-type {
        border-radius: 8px;
        background-color: var(--blue---light-hover);
        width: 40px;
        height: 40px;
    }
    .file .file-name {
        font-size: 15px;
    }
    .open-upload-form a{
        width: 100%;
    }
    .banner{
        padding: 40px 12px;
    }
    .banner h4{
        margin: 0;
        font-size: 16px;
    }
    .banner p{
        margin: 0;
        font-size: 14px;
    }

    .bottom-nav .sub-bottom-nav{
        bottom: 80px;
        display: flex;
        flex-direction: column;
        max-width: 200px;
        left: 8px;
        justify-content: right;
        text-align: right;
    }
    .bottom-nav .sub-bottom-nav li{
        justify-content: right;
        text-align: right;
        max-width: 100%;
        padding: 8px;

    }
    .bottom-nav .sub-bottom-nav li:not(:last-child){
        border-bottom: 1px solid var(--blue---light);
        margin-bottom: 8px;
    }
    .s-request-card div p {
        font-size: 12px;
        opacity: .6;
        margin-bottom: 8px;
        font-weight: 500;
    }
    .s-request-card h5{
        font-size: 14px;
    }
}

/*Start Customize Form*/
label.required::after {
    content: " *";
    color: red;
}
.is-invalid {
    border: 1px solid red !important;
}
.invalid-feedback {
    color: red;
    font-size: 0.875rem;
}

/*End Customize Form*/

/*show and hide password */
.password-field .input-with-icon {
    position: relative;
}

.password-field .input-with-icon .toggle-password {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: 12px;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 1.15rem;
    line-height: 1;
    opacity: .8;
    user-select: none;
}
/*show and hide password */