html {
    scroll-behavior: smooth;
}

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

:root {
    --primary-color: #2F2951;
    --secondary-color: #E6261B;
    --brand-green: #BFD85A;
    --brand-light: #69638F;
    --brand-dark: #312E40;
    --light-blue: #483F7C;
    --white-color: #ffffff;
    --bg-color1: #F6F2EB;
    --gray1: #D7D4CF;
    --gray2: #E0DFD3;
    --gray3: #A7A7A7;
    --font-size: 16px;
    --radius: 35vmin;
    --frame-size: calc(var(--radius) / 3);
    --d-outer: calc(var(--radius) * 2);
    --d-inner: calc(var(--d-outer) - var(--frame-size));
    --fonts: calc(var(--radius) / 10);
}

body {
    font-family: "Figtree", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--primary-color);
    background-color: var(--bg-color1);
}

    body.dashboard:before {
        content: "";
        width: 100%;
        height: 100vh;
        background-image: url('../images/Dashboard-Vector.svg');
        position: fixed;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center calc(100% - 70px);
        z-index: 0;
    }

    body.dashboard.brand-bg:before {
        background-color: #F9EEED;
        background-image: url(../images/dashboard-vector-red.svg);
    }

/* global css */
.dashboard-container {
    padding: 32px 20px;
    z-index: 11;
}

.db-width {
    max-width: 1320px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
}

.h1 {
    font-size: 128px;
    line-height: 0.9;
}

.h2 {
    font-size: 64px;
    line-height: 1.2;
}

.h3 {
    font-size: 48px;
    font-weight: 400;
    line-height: 1.3;
}

.h4 {
    font-size: 40px;
    font-weight: 400;
    line-height: 1.2;
}

.h5 {
    font-size: 28px;
    font-weight: 400;
    line-height: 1.2;
}

.h6 {
    font-size: 24px;
    line-height: 1.36;
}

.medium {
    font-weight: 500;
}

.fw-600 {
    font-weight: 600;
}

figure {
    margin: 0 0 0 0;
}

img {
    max-width: 100%;
    display: inline-block;
}

.relative {
    position: relative;
}

.mb1 {
    margin-bottom: 1rem !important;
}

.mb2 {
    margin-bottom: 2rem !important;
}

.gap-10 {
    gap: 10px;
}

p {
    margin-bottom: 0px;
}

.fs-20 {
    font-size: 20px;
}

.fs-16 {
    font-size: 16px;
}

.fs-14 {
    font-size: 14px;
}

.fs-12 {
    font-size: 12px;
}

ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.secondary-color {
    color: var(--secondary-color);
}

.bg-white {
    background-color: var(--white-color);
}

.db-box {
    border-radius: 20px;
}

.db-btn, #scanner__dashboard_section button {
    padding: 12px 12px;
    border-radius: 12px;
    background-color: var(--secondary-color);
    border: 1px solid var(--secondary-color);
    color: var(--white-color);
    text-decoration: none;
    display: flex;
    gap: 8px;
    width: fit-content;
    transition: all .3s ease-in-out;
    cursor: pointer;
    align-items: center;
}

    .db-btn .btn-icon {
        width: 24px;
        height: 24px;
    }

.sm_btn {
    padding: 8px 12px;
    border-radius: 8px;
}

    .sm_btn .btn-icon {
        width: 20px;
        height: 20px;
    }

.db-btn .btn-icon.nm-icon {
    display: inline-block;
}

.db-btn .btn-icon.hvr-icon {
    display: none;
}

.blue-btn, #scanner__dashboard_section button {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.db-btn:hover .btn-icon.nm-icon {
    display: none;
}

.db-btn:hover .btn-icon.hvr-icon {
    display: inline-block;
}

.db-btn:hover, #scanner__dashboard_section button:hover {
    background-color: var(--light-blue);
    color: var(--white-color);
    border-color: var(--light-blue);
    transition: all .3s ease-in-out;
}

.border-btn {
    background-color: transparent;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    text-decoration: none;
    transition: all .3s ease;
}

.white-border-btn {
    border-color: var(--white-color);
    color: var(--white-color);
}

.border-btn:hover {
    background-color: transparent;
    border-color: var(--secondary-color);
    color: var(--secondary-color);
    transition: all .3s ease;
}
/* end global css */

/* account pages */
/* header & footer */
.copyright, .copyright a {
    color: var(--gray3);
    text-underline-offset: 2px;
    transition: color .3s ease-in-out;
}

    .copyright a:hover {
        color: var(--secondary-color);
    }
/* end header & footer */
.login-page_width {
    padding-top: 24px;
    padding-bottom: 24px;
    padding-left: 24px;
    padding-right: 24px;
    max-width: 1360px;
    width: 100%;
    min-height: 100vh;
    margin-left: auto;
    margin-right: auto;
}

.account-template main {
    min-height: calc(100vh - 110px);
    padding-bottom: 25px;
}

.account-box {
    width: calc(45% - 25px);
    max-width: 430px;
    margin-top: 100px;
}

.account-box_img {
    width: 55%;
}

.account--wrapper {
    gap: 25px 25px;
}

.account-cont_head {
    margin-bottom: 55px;
}

.account-form_wrap {
    margin-bottom: 55px;
}

.account-form label, .db-form .form-col label {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 2px;
}

.cursor-pointer {
    cursor: pointer;
}

.invalid {
    border: 1px solid #ff0000 !important;
}

.account-form label span, .db-form .form-col label span {
    color: var(--secondary-color);
}

.account-form input, .db-form .form-col input, .db-form .form-col select, select.db-select {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--gray2);
    background-color: var(--white-color);
    border-radius: 12px;
    font-size: 16px;
    color: var(--brand-dark);
    outline: none;
    transition: border .3s ease;
}

    .account-form input::placeholder, .db-form .form-col input::placeholder, .db-form .form-col select::placeholder, select.db-select::placeholder {
        font-size: 16px;
        color: var(--gray3);
    }

    .account-form input[type=checkbox] {
        display: none;
        cursor: pointer;
    }

    .account-form input:hover, .db-form .form-col input:hover, .db-form .form-col select:hover, select.db-select:hover {
        border-color: var(--gray3);
        transition: border .3s ease-in-out;
    }

    .account-form input:focus, .account-form input:focus-visible,
    .db-form .form-col input:focus, .db-form .form-col input:focus-visible,
    .db-form .form-col select:focus, .db-form .form-col select:focus-visible,
    select.db-select:focus, select.db-select:focus-visible {
        border-color: var(--brand-green);
        transition: border .3s ease-in-out;
        box-shadow: none;
    }

.ac-form_col .form_check label {
    position: relative;
    cursor: pointer;
    outline: none;
}

    .ac-form_col .form_check label:before {
        content: '';
        -webkit-appearance: none;
        background-color: transparent;
        border: 2px solid var(--gray2);
        padding: 0px !important;
        width: 18px;
        height: 18px;
        display: inline-block;
        position: relative;
        vertical-align: middle;
        cursor: pointer;
        margin: 0px 8px 0px 0px;
        border-radius: 4px;
        outline: none;
    }

    .ac-form_col .form_check label:hover:before, .ac-form_col .form_check input:checked + label:before {
        border-color: var(--brand-dark);
    }

.ac-form_col .form_check input:checked + label:before {
    background-color: var(--brand-dark);
}

.ac-form_col .form_check input:checked + label:after {
    content: '';
    display: block;
    position: absolute;
    top: 5px;
    left: 7px;
    width: 5px;
    height: 11px;
    border: solid var(--brand-green);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    outline: none;
}

.form_link {
    color: var(--primary-color);
    text-underline-offset: 4px;
    font-size: 14px;
    transition: color .3s ease-in-out;
}

    .form_link:hover {
        color: var(--secondary-color);
    }

button[type="submit"]:not(.db-btn, .border-btn) {
    width: 100%;
    padding: 12px 20px;
    border: none;
    outline: none;
    border-radius: 12px;
    background-color: var(--secondary-color);
    color: var(--white-color);
    font-size: 16px;
    transition: all .3s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

    button[type="submit"]:not(.db-btn, .border-btn):hover {
        background-color: var(--light-blue);
        transition: all .3s eae-in-out;
    }

button[type="submit"] .button-icon {
    width: 24px;
}

    button[type="submit"] .button-icon.hvr-btn-icon {
        display: none;
    }

button[type="submit"]:hover .button-icon.nm-btn-icon {
    display: none;
}

button[type="submit"]:hover .button-icon.hvr-btn-icon {
    display: inline-block;
}

.ac-form_col .form_radio {
    gap: 10px 40px;
    margin-top: 24px;
}

.form-col .form_radio {
    gap: 10px 40px;
    margin-top: 5px;
}

[type="radio"]:checked,
[type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}

    [type="radio"]:checked + label,
    [type="radio"]:not(:checked) + label {
        position: relative;
        padding-left: 28px;
        cursor: pointer;
        font-size: 16px;
        display: inline-flex;
        color: var(--primary-color);
        align-items: center;
    }

        [type="radio"]:checked + label:before,
        [type="radio"]:not(:checked) + label:before {
            content: '';
            position: absolute;
            left: 0;
            top: 4px;
            width: 19px;
            height: 19px;
            border: 1px solid #D6DBE8;
            border-radius: 100%;
            background: #fff;
        }

        [type="radio"]:checked + label:after,
        [type="radio"]:not(:checked) + label:after {
            content: '';
            width: 12px;
            height: 12px;
            background: #E6261B;
            position: absolute;
            top: 7.3px;
            left: 3.2px;
            border-radius: 100%;
            -webkit-transition: all 0.2s ease;
            transition: all 0.2s ease;
        }

        [type="radio"]:not(:checked) + label:after {
            opacity: 0;
            -webkit-transform: scale(0);
            transform: scale(0);
        }

        [type="radio"]:checked + label:after {
            opacity: 1;
            -webkit-transform: scale(1);
            transform: scale(1);
        }

    [type="radio"]:checked + label {
        color: var(--secondary-color);
    }

        [type="radio"]:checked + label:before {
            border-color: #2F2951;
        }
/*@media (max-height: 800px) {
    .account-box {
        margin-top: 45px;
    }
    .account-cont_head, .account-form_wrap {
        margin-bottom: 28px;
    }
}*/
/* responsive */
@media (min-width: 1025px) {
    .account-box_img img {
        position: absolute;
        height: calc(100vh - 48px);
        top: -50px;
        right: 0;
        width: 100%;
        object-fit: cover;
        border-radius: 24px;
        max-height:807px;
    }
}

@media (max-width: 1024px) {
    .account-template .main-content {
        padding-top: 140px;
    }

    .login-page_width {
        padding: 0px 24px 40px 24px;
    }

    .account-template main {
        min-height: unset;
        padding-bottom: 25px;
    }

    .account-box {
        max-width: 100%;
        width: 100%;
        margin-top: 0px;
    }

    .account-cont_head {
        margin-bottom: 40px;
    }

    .account-box_img {
        width: 100%;
    }

        .account-box_img img {
            width: 100%;
            object-fit: cover;
            border-radius: 20px;
        }

    .account-cont_head .h3 {
        font-size: 32px;
    }

    .account-template .header-wrap {
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
        padding: 40px 24px 10px 24px;
        background-color: var(--bg-color1);
        transition: padding .4s ease-in-out;
    }

    .account-template .sticky .header-wrap {
        padding-top: 15px;
        transition: padding .3s ease-in-out;
    }

    .account-form input, .db-form .form-col input, .db-form .form-col select, select.db-select {
        padding: 10px 15px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .account-box {
        max-width: calc(50% - 25px);
        width: 100%;
    }

    .account-box_img {
        width: 50%;
    }

    .account-template .main-content {
        min-height: calc(100vh - 90px);
    }

    .account-box_img figure, .account-box_img img {
        height: 100%;
    }
}

@media (max-width: 767px) {
    .mbfs-14 {
        font-size: 14px;
    }

    .mb-mb12 {
        margin-bottom: 12px !important;
    }

    .mb-mb32 {
        margin-bottom: 32px;
    }

    .account-template .sticky .header-wrap {
        box-shadow: 0 0 10px 0 #cecece;
    }

    .account-box_img {
        display: none;
    }

    .account-template main {
        padding-bottom: 55px;
    }
}

@media (max-width: 640px) {
    .edit-txt {
        width: 100%;
    }
}

/* end responsive */
/* end account pages */

/* dashboard pages */
/* sidebar */
aside.sidebar {
    position: fixed;
    max-width: 251px;
    width: 100%;
    height: calc(100vh - 64px);
    left: clamp(20px, calc((100% - 1320px) / 2), calc((100% - 1320px) / 2));
    top: 32px;
}

.dashboard .main-content {
    width: calc(100% - 251px);
    padding: 0 0 0 16px;
    margin: 0 0 0 auto;
}

.sidebar .sidebar-header {
    padding: 40px 40px;
}

.sidebar-header svg {
    max-width: 100%;
}

.sidebar .sidebar-menu {
    padding: 40px 0;
    height: calc(100% - 120px);
    overflow-y: visible;
}

.sidebar .sidebar-item:not(:last-child) {
    margin-bottom: 12px;
}

.sidebar-menu_divider {
    margin: 24px 40px 24px 40px;
    height: 1px;
    background: var(--gray2);
}

.sidebar .sidebar-menu ul {
    max-height: 100%;
    overflow: auto;
}

    .sidebar .sidebar-menu ul::-webkit-scrollbar-track {
        border-radius: 10px;
    }

    .sidebar .sidebar-menu ul::-webkit-scrollbar {
        width: 5px;
    }

    .sidebar .sidebar-menu ul::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background-color: var(--gray2);
    }

.sidebar-menu ul .sidebar-item a {
    padding: 8px 15px 8px 40px;
    color: var(--primary-color);
    text-decoration: none;
    gap: 12px;
    transition: all .3s ease-in-out;
}

.sidebar-menu ul .sidebar-item.active a {
    font-weight: 600;
    background-color: transparent;
}

.sidebar-menu ul .sidebar-item a:hover {
    font-weight: 600;
    background-color: #E6261B14;
    transition: all .3s ease-in-out;
}

    .sidebar-menu ul .sidebar-item a:hover:before, .sidebar-menu ul .sidebar-item.active a:before {
        content: "";
        width: 4px;
        height: 24px;
        background: var(--secondary-color);
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
    }

.sidebar-menu ul .sidebar-item .mi-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    object-position: center;
}

.sidebar-menu .sidebar-item a .nm-icon {
    display: inline-block;
}

.sidebar-menu .sidebar-item a:hover .nm-icon, .sidebar-menu .sidebar-item.active a .nm-icon {
    display: none;
}

.sidebar-menu .sidebar-item a .hvr-icon {
    display: none;
}

.sidebar-menu .sidebar-item a:hover .hvr-icon, .sidebar-menu .sidebar-item.active a .hvr-icon {
    display: inline-block;
}

.sidebar-menu .sidebar-name {
    padding: 0 15px 0 40px;
}
/* end sidebar */
/* header */
header.main-header.db-box {
    padding: 24px 24px;
    margin-bottom: 16px;
}

.organization-info {
    gap: 12px;
}

.org-details .org-head_title {
    line-height: 1.5;
}

button.mobile-nav-toggle {
    padding: 0;
    background: transparent;
    border: none;
    outline: none;
    z-index: 1111;
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.mobile-nav-toggle span.nav-menu-icon {
    border: none;
    cursor: pointer;
    display: flex;
    height: 20px;
    position: relative;
    transform: rotate(0);
    transition: transform .5s ease-in-out;
    width: 25px;
    will-change: transform;
}

    .mobile-nav-toggle span.nav-menu-icon span {
        background: var(--brand-dark);
        border-radius: 2px;
        display: block;
        height: 2px;
        left: 0;
        opacity: 1;
        position: absolute;
        transform: rotate(0);
        transition: transform .25s ease-in-out;
        width: 100%;
    }

        .mobile-nav-toggle span.nav-menu-icon span:nth-child(2), span.nav-menu-icon span:nth-child(3) {
            top: 8px;
        }

        .mobile-nav-toggle span.nav-menu-icon span:first-child {
            top: 0px;
        }

        .mobile-nav-toggle span.nav-menu-icon span:nth-child(4) {
            top: 16px;
        }
/* end header */

/* welcome dashboard */
section.db-main-content {
    padding: 40px 40px;
    min-height: calc(100vh - 175px);
}

.welcome-content {
    margin-top: 150px;
}

    .welcome-content h1 {
        margin-bottom: 40px;
    }

    .welcome-content .db-btn {
        margin-left: auto;
        margin-right: auto;
    }

section.db-full-main-content{
    min-height: calc(100vh - 64px);
}
/* end welcomdashboard */
/* responsive */
/* sidebar */
@media (max-width: 1024px) {
    .sidebar .sidebar-header {
        padding: 28px 10px 28px 24px;
    }

    .sidebar-menu ul .sidebar-item a {
        padding: 8px 15px 8px 25px;
    }

    .sidebar-menu .sidebar-name {
        padding: 0 15px 0 25px;
    }

    .sidebar-menu_divider {
        margin: 24px 25px;
    }

    aside.sidebar {
        max-width: 200px;
    }

    body:not(.account-template) .main-content {
        width: calc(100% - 200px);
    }

    section.db-main-content {
        padding: 25px 15px;
    }
}

@media (max-width: 767px) {
    .menu-open .dashboard-container {
        max-height: 100vh;
        overflow: hidden;
    }

    .dashboard-container {
        padding: 15px 15px;
    }

    aside.sidebar {
        max-width: 100vw;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        height: unset;
        background: transparent !important;
    }

    .db-box {
        border-radius: 12px;
    }

    .sidebar .sidebar-header {
        padding: 15px 15px;
        text-align: center;
        position: fixed;
        max-width: 100vw;
        width: 100%;
        background: var(--white-color);
        border-radius: 0 0 10px 10px;
        z-index: 11;
    }

    .sidebar .sidebar-menu {
        position: absolute;
        top: 68px;
        width: 100%;
        height: fit-content;
        padding: 15px 0 25px 0;
        border-radius: 0 0 10px 10px;
        background: var(--white-color);
        transform: translateY(-120%);
        transition: transform .4s ease-in-out;
    }

    .menu-open .sidebar .sidebar-menu {
        transform: translateY(0%);
        transition: transform .4s ease-in-out;
    }

    .sidebar-header svg {
        margin-left: 28px;
    }

    .main-content {
        padding: 10px 0 0 0;
        width: 100%;
    }

    section.db-main-content {
        padding: 15px 15px;
        height: auto;
        min-height: calc(100vh - 200px) !important;
    }

    header.main-header.db-box {
        padding: 15px 15px;
        margin-bottom: 10px;
    }
}
/* end sidebar */
/* end responsive */
/* dashboard global css */

.db-title img {
    width: 32px;
}

.gap1 {
    gap: 16px;
}

.gap05 {
    gap: 8px;
}

.col4 {
    width: calc(calc(100% / 3) - 11px);
}

.mb05 {
    margin-bottom: 8px;
}

.mt16 {
    margin-top: 16px;
}

.mt24 {
    margin-top: 24px;
}

.mb1 {
    margin-bottom: 16px;
}

.mb32 {
    margin-bottom: 32px;
}

.mb24 {
    margin-bottom: 24px;
}

.mb16 {
    margin-bottom: 16px;
}

.mb12 {
    margin-bottom: 12px;
}

.mb4 {
    margin-bottom: 4px;
}

.ml4 {
    margin-left: 4px;
}

.fw500 {
    font-weight: 500;
}

.fw600 {
    font-weight: 600;
}

.white {
    color: var(--white-color);
}

.gray-color {
    color: #7F7A98;
}

.db-borderbox {
    padding: 16px 16px;
    border: 1px solid var(--gray2);
    border-radius: 12px;
    height: 100%;
}

.db-darkbox {
    padding: 16px 16px;
    background-color: var(--primary-color);
    border-radius: 12px;
}

.gap24 .col8 {
    width: calc(67% - 12px);
}

.gap24 .col4 {
    width: calc(33% - 12px);
}

.gap24 .col7 {
    width: calc(65% - 12px);
}

.gap24 .col5 {
    width: calc(35% - 12px);
}

.icon__button {
    width: 40px;
    height: 40px;
    padding: 8px 8px;
    border-radius: 8px;
    background-color: var(--primary-color);
    border: none;
    outline: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.db-link_icon {
    width: 24px;
    height: 24px;
    transition: all .2s ease;
    outline: none;
    filter: brightness(0) invert(1);
}

    .db-link_icon:hover {
        transition: all .3s ease;
    }

.icon__button:hover .db-nm_icon {
    display: none;
}

.icon__button .db-hvr_icon {
    display: none;
}

.icon__button:hover .db-hvr_icon {
    display: block;
}

a.db-txt-link {
    color: var(--primary-color);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color .3s ease;
}

    a.db-txt-link:hover {
        color: var(--secondary-color);
        transition: color .3s ease;
    }
/* end dashboard global css */
/* causes */
.db-bordered-list .db-list_col {
    padding: 8px 8px 8px 16px;
    border: 1px solid var(--gray2);
    border-radius: 8px;
    transition: all .3s ease;
}

    .db-bordered-list .db-list_col:hover {
        background-color: var(--bg-color1);
        border-color: var(--bg-color1);
        transition: all .3s ease;
    }

.db-iconlist_col {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

    .db-iconlist_col img {
        width: 18px;
        height: 18px;
        margin-top: 2px;
    }
/* end causes */
/* dashboard popup */
.btn-close {
    background: transparent;
    padding: 0 !important;
    width: 30px;
    height: 30px;
    opacity: 1;
    margin: 0 0 0 auto;
}

    .btn-close img {
        min-width: 27px;
        width: 27px;
        height: 27px;
    }

.modal-dialog {
    max-width: 550px;
    width: 100%;
}

.modal-content {
    padding: 24px 24px;
    border-radius: 20px;
    border: none;
    width: 100%;
}

.event-popup .modal-dialog {
    max-width: 450px;
}

.event-popup .modal-content {
    padding-bottom: 55px;
}

.event-popup .checkin-col {
    padding: 16px 16px;
    border-radius: 12px;
    border: 1px solid var(--gray2);
}

    .event-popup .checkin-col:not(:last-child) {
        margin-bottom: 12px;
    }

#deleteuserModal .modal-content {
    min-height: 450px;
}

.db-popupbox {
    padding: 16px 16px;
    border-radius: 12px;
}

    .db-popupbox.green-box {
        background: #BFD85A29;
    }

    .db-popupbox.red-box {
        background: #FDEEED;
    }

.modal-body {
    padding: 0 0;
}

.db-iconlist_col span {
    display: block;
}

.form-col {
    width: 100%;
}

    .form-col label {
        width: 100%;
        font-weight: 600;
        font-size: 14px;
        margin-bottom: 4px;
    }

        .form-col label span {
            color: var(--secondary-color);
        }

    .form-col textarea {
        padding: 14px 16px;
        border-radius: 12px;
        border: 1px solid var(--gray2);
        width: 100%;
        height: 150px;
        resize: none;
        color: var(--primary-color);
        outline: none;
        font-size: 16px;
    }

        .form-col textarea::placeholder {
            color: var(--gray3);
        }

    .form-col select {
        position: relative;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M15.0678 1H8.93222C3.37111 1 1 3.37111 1 8.93222V15.0678C1 20.6289 3.37111 23 8.93222 23H15.0678C20.6289 23 23 20.6289 23 15.0678V8.93222C23 3.37111 20.6289 1 15.0678 1ZM21.46 15.0678C21.46 19.7856 19.7856 21.46 15.0678 21.46H8.93222C4.21444 21.46 2.54 19.7856 2.54 15.0678V8.93222C2.54 4.21444 4.21444 2.54 8.93222 2.54H15.0678C19.7856 2.54 21.46 4.21444 21.46 8.93222V15.0678Z' fill='%232F2951'/%3E%3Cpath d='M16.6444 11.1078L12.6111 15.3978C12.44 15.5811 12.22 15.6667 12 15.6667C11.78 15.6667 11.56 15.5811 11.3889 15.3978L7.35556 11.1078C7.02556 10.7533 7.02556 10.1667 7.35556 9.82444C7.68556 9.47 8.23556 9.47 8.56556 9.82444L12 13.4667L15.4344 9.82444C15.7644 9.47 16.3144 9.47 16.6444 9.82444C16.9744 10.1667 16.9744 10.7533 16.6444 11.1078Z' fill='%232F2951'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: calc(100% - 15px) center;
        background-size: 22px;
        -webkit-appearance: none;
        -moz-appearance: none;
        text-indent: 1px;
        text-overflow: '';
    }

        .form-col select option, .form-ewrapper .form-col select option:hover {
            color: var(--primary-color);
        }

            .form-col select option:hover {
                background: var(--bg-color1);
            }

.submit-col button {
    margin: 18px 0 0 auto;
    min-width: 100px;
    text-align: center;
    justify-content: center;
}

.qr-img {
    text-align: center;
    padding: 30px;
    max-width: 250px;
    margin: 0 auto;
    border-radius: 12px;
    border: 1px solid var(--gray2);
}

.upload-qr .db-btn {
    margin: 0 auto;
}

.db-bordered-list label {
    position: relative;
}

input.volunteer-checkbox {
    position: absolute;
    /*top: 0;*/
    left:90%;
    /*right: 0;*/
    width: 16px;
    height: 16px;
}

.btn-multiple-checkin-out {
    left: 25%;
    position: relative;
}

label .db-list_col {
    width: 100%;
}
/* end dashboard popup */
/* end dashboard pages */
/* causes pages */
.back-wrap a {
    color: var(--primary-color);
    text-decoration: none;
}

.back-wrap img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.db-form__inner.half__inner {
    width: calc(45% - 8px);
}
/* end causes pages */
/* gigs pages */
body.bg-type2 {
    background: #F9EEED;
}

body.dashboard.bg-type2:before {
    background-image: url('../images/Secondary-bg-Vector.svg');
}

.upload-container {
    border: 1px dashed var(--gray2);
    border-radius: 16px;
    width: 100%;
    padding: 24px;
    cursor: pointer;
    transition: border .3s ease-in-out;
}

.upload-label {
    cursor: pointer;
}

.upload-icon img {
    width: 44px;
    height: 44px;
}

input#file-upload {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
}

#preview-img {
    max-width: 100px;
    width: 100%;
}

.upload-container.add-new {
    min-height: 315px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-style: solid;
}

    .upload-container.add-new label.upload-label {
        flex-direction: column;
        text-align: center;
    }

.upload-container:hover, textarea:hover {
    border-color: var(--gray3);
    transition: border .3s ease-in-out;
}

.upload-container:focus, .upload-container:focus-visible, textarea:focus, textarea:focus-visible {
    border-color: var(--brand-green);
    transition: border .3s ease-in-out;
}

.form-btn-wrap.full-col {
    width: 100%;
}

.gallery-sm-img {
    max-width: calc(25% - 6px);
    width: 100%;
}

.edit-photobar {
    padding: 16px 24px;
    border-radius: 12px;
    background: #F9EEED;
    font-weight: 500;
}

.photo-grid-col {
    border-radius: 8px;
    width: calc(25% - 12px);
}

.photo-link-wrap {
    padding: 12px 16px;
    background: #E0DFD333;
    border: 1px solid #E0DFD3;
    border-radius: 0 0 8px 8px;
}

.photo-grid-col figure {
    width: 100%;
}

.photo-grid-col img {
    width: 100%;
    border-radius: 8px 8px 0 0;
    height: 160px;
    object-fit: cover;
}

#savephotoModal .modal-dialog {
    max-width: 1060px;
    padding:20px;
}

#savephotoModal .modal-content {
    padding: 0;
    position: relative;
    overflow: hidden;
}

    #savephotoModal .modal-content .btn-close {
        position: absolute;
        right: 15px;
        top: 15px;
        z-index: 11;
        background: #ffffff;
    }

    #savephotoModal .modal-content .img_description {
        padding: 24px 32px;
    }

    #savephotoModal .modal-content figure {
        margin-top: -1px;
    }

img#photoPreviewModal {
    width: 100%;
    max-height: 70vh;
    object-fit: cover;
}

.btn-close {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .btn-close img {
        min-width: 20px;
        width: 20px;
        height: 20px;
    }

.edit-txt {
    padding: 14px 16px;
    border-radius: 8px;
    width: calc(100% - 220px);
    border: 1px solid var(--brand-green);
}

.db-bordered-list .db-lg-list_col.lightred:not(:hover) {
    border: 1px solid #E6261B1F;
}
/* ends gigs pages */
/* users */
.db-bordered-list .db-lg-list_col {
    padding: 12px 20px 12px 16px;
    border-radius: 12px;
}

.col-divider {
    width: 1px;
    height: 16px;
    background-color: var(--gray2);
}

.gap24px {
    column-gap: 24px;
}

.type-label {
    min-width: 66px;
    width: auto;
    max-width: fit-content;
    padding: 3px 14px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 6px;
    text-align: center;
}

    .type-label.gray {
        color: var(--white-color);
        background: #312E40CC;
    }

    .type-label.lightgreen {
        background: #BFD85A80;
    }

.lightred {
    background: #E6261B14;
}

.lightorange {
    background: #FFB97880;
}

.lightgray {
    background: #2F295129;
}

.delete-icon {
    width: 24px;
    height: 24px;
    background-color: var(--secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    transition: background .3s ease;
}

    .delete-icon img {
        width: 20px;
    }

    .delete-icon:hover {
        background-color: var(--primary-color);
        transition: background .3s ease;
    }

.max-280 {
    max-width: 280px;
    width: 100%;
    margin: 0 auto;
}

.w24 {
    width: 24px;
}

.db-bg-borderbox {
    background: #E0DFD333;
    border: 1px solid var(--gray2);
    border-radius: 12px;
}

.p16 {
    padding: 16px 16px;
}

.gap05 .col4 {
    width: calc(calc(100% / 3) - 5.5px);
}

.db-bg-borderbox .img-col img {
    border-radius: 8px;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
/* end users */
/* profile */
.db__titlebar {
    padding-bottom: 24px;
    margin: 40px 0 24px 0;
    border-bottom: 1px solid var(--gray2);
}

.db-form .light-col label {
    color: var(--gray3);
}

.db-form .light-col input {
    background: #E0DFD329;
}

.form-col.half-col {
    width: calc(50% - 8px);
}

button.ryt-btn {
    margin: 0 0 0 auto;
}

.upload-container.lightgreen {
    border-color: var(--brand-green);
    background: #BFD85A0D;
}

    .upload-container.lightgreen .upload-icon img {
        width: 30px;
        height: 20px;
    }
/* end profile */
/* causes info */
.p24 {
    padding: 24px;
}

.gap4px {
    gap: 4px;
}

.info-titlebar {
    padding-bottom: 32px;
    margin: 64px 0 32px 0;
    border-bottom: 1px solid var(--gray2);
}

ul.icon__list a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color .2s ease;
}

    ul.icon__list a:hover {
        color: var(--secondary-color);
    }

.edit-name .name-field {
    padding: 11px 16px;
    font-size: 20px;
    border: 1px solid var(--brand-green);
    border-radius: 12px;
    color: var(--primary-color);
    width: calc(100% - 230px);
}

    .edit-name .name-field::placeholder {
        color: var(--primary-color);
    }

.edit-name {
    width: 100%;
}

.org-logo.w55 {
    width: 55px;
}

.db-bg-borderbox.lightgreen {
    background: #BFD85A47;
    border: 1px solid #B2CF3F47;
}

.word-break {
    word-break: break-all;
}

.org-logo.w32 {
    width: 32px;
}
/* end causes info */
/* submissions */
.mb12 {
    margin-bottom: 12px;
}

.quick-filters {
    border-radius: 12px;
}

.lightbrand-bg {
    background: #F9EEED;
}

.single-subbox {
    padding: 12px 16px;
    border-radius: 12px;
    background: #F9EEED;
}

.gray-badge {
    padding: 4px 8px;
    border-radius: 6px;
    background-color: var(--gray2);
}
/* end submissions */
/* today */
.min-width80 {
    width: 80px;
}

.icon-btn {
    padding: 0 0;
    background: transparent;
    border: none;
    outline: none;
}

    .icon-btn .db-hvr_icon {
        display: none;
    }

    .icon-btn:hover .db-nm_icon {
        display: none;
    }

    .icon-btn:hover .db-hvr_icon {
        display: block;
    }

    .icon-btn .db-hvr_icon img {
        width: 25px;
        height: 25px;
        object-fit: contain;
    }

.empty-event-wrap {
    margin-top: 110px;
}

img.w50 {
    width: 50px;
}

.lightgreen-box {
    background-color: #F5F9E4;
}

.modal-body img.w40 {
    width: 40px;
}
/* end today */
/* events */
.mr24 {
    margin-right: 24px;
}

.time-badge, .time-badge:hover {
    background-color: #B7B7B780 !important;
    border-color: #B7B7B780 !important;
    color: var(--primary-color) !important;
    gap: 5px;
}

.max-btn_full {
    max-width: calc(50% - 8px);
    width: 100%;
    text-align: center;
    justify-content: center;
}

.p24-16 {
    padding: 24px 16px;
}

.event-overvire_inner:not(:last-child) {
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--gray2);
}

.event-overvire_inner img {
    width: 20px;
}

.db-btn.sm_btn.light-bg-border-btn {
    background-color: #DCDCDC;
    border: 1px solid #B0B0B0;
    color: var(--primary-color);
}

.days-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
}

.day-option {
    position: relative;
}

    .day-option input {
        display: none;
    }

.days-container label.day-option {
    width: auto;
}

    .days-container label.day-option span {
        display: inline-block;
        padding: 5px 5px;
        border: 1px solid var(--primary-color);
        border-radius: 8px;
        color: var(--primary-color);
        cursor: pointer;
        transition: all 0.3s;
        width: 53px;
        text-align: center;
    }

.day-option input:checked + span {
    border-color: var(--secondary-color);
    color: var(--secondary-color);
}

.day-option span:hover {
    border-color: var(--secondary-color);
    color: var(--secondary-color);
}

.form-col .half {
    width: calc(50% - 8px);
}

.db-form .form-col input.custom-date, .db-form .form-col input.custom-time {
    padding-left: 45px !important;
}

.db-form .form-col input.custom-date {
    background-image: url(../images/date-icon.svg);
    background-repeat: no-repeat;
    background-position: 16px center;
    background-size: 20px;
}

.db-form .form-col input.custom-time {
    background-image: url(../images/time-icon.svg);
    background-repeat: no-repeat;
    background-position: 16px center;
    background-size: 20px;
}

.form-divider {
    margin: 16px 0;
    width: 100%;
    height: 1px;
    background: var(--gray2);
}

.popup-list li img {
    width: 16px;
    object-fit: contain;
}

.popup-checkbox input, .popup-checkbox label {
    margin: 0 !important;
    font-weight: 400;
}

.mt24 {
    margin-top: 24px;
}
/* end events */

/* dashboard responsive */
@media (max-width: 1199px) {
    .db-form__inner.half__inner {
        width: calc(50% - 8px);
    }
}

@media (max-width: 1024px) {
    h1, .h1 {
        font-size: 75px;
    }

    h2, .h2 {
        font-size: 42px;
    }

    h3, .h3 {
        font-size: 40px;
    }

    h4, .h4 {
        font-size: 34px;
    }

    h5, .h5 {
        font-size: 24px;
    }

    h6, .h6 {
        font-size: 22px;
    }

    .mb24 {
        margin-bottom: 20px;
    }

    .mt24 {
        margin-top: 20px;
    }

    .gap24 {
        gap: 20px 16px;
    }

    .gap24px {
        column-gap: 16px;
    }

    .md-full {
        width: 100% !important;
    }

    .md-col6 {
        width: calc(50% - 8px);
    }

    form .gap1 {
        gap: 10px;
    }

    .db-form__inner.half__inner .form-col.half-col {
        width: 100%;
    }

    .db-list_col .gap1 {
        row-gap: 7px;
    }
    /* dashboard */
    .welcome-content {
        margin: 50px 25px;
    }

    .submit-col button {
        margin-top: 15px;
    }

    .db-form__inner.half__inner {
        width: calc(50% - 8px);
    }
    /* end dashboard */
    /* cause info */
    .cause-infobox .col {
        flex: unset;
        width: calc(50% - 8px);
    }
    /* end cause info */
    /* events */
    @media (max-width: 1199px) {
        .db-form__inner.half__inner {
            width: 100%;
        }
    }
    /* end events */
    /* gigs */
    .photo-grid-col {
        width: calc(33.33% - 11px);
    }

        .photo-grid-col img {
            height: 145px;
        }

    #savephotoModal .modal-content .img_description {
        padding: 18px 25px;
    }
    /* end gigs */
}

@media (max-width: 767px) {
    h1, .h1 {
        font-size: 38px;
    }

    h2, .h2 {
        font-size: 32px;
    }

    h3, .h3 {
        font-size: 28px;
    }

    h4, .h4 {
        font-size: 26px;
    }

    h5, .h5 {
        font-size: 22px;
    }

    h6, .h6 {
        font-size: 20px;
    }

    .fs-18 {
        font-size: 16px;
    }

    .fs-20 {
        font-size: 18px;
    }

    .mb24 {
        margin-bottom: 15px;
    }

    .mt24 {
        margin-top: 15px;
    }

    .mb05 {
        margin-bottom: 5px;
    }

    .md-col6 {
        width: 100%;
    }

    .dashboard .main-content {
        margin: 75px 0 0 0;
        padding: 0;
        width: 100% !important;
    }

    section.db-main-content {
        min-height: unset;
    }

    .organization-info img {
        max-width: 28px;
    }

    .db-btn {
        padding: 8px 10px;
    }

    .modal-dialog {
        margin: 0 auto;
        padding: 0 10px;
    }

    .modal-content {
        padding: 10px 15px 20px 15px;
        border-radius: 15px;
    }

    .icon__button {
        width: 32px;
        height: 32px;
        padding: 5px;
    }

    .db-list_col .gap1 {
        row-gap: 7px;
    }

    .db-bordered-list .db-lg-list_col {
        padding: 10px 10px;
    }

    .single-subbox, .lightbrand-bg {
        padding: 10px 10px;
        border-radius: 10px;
    }

    .db-bg-borderbox {
        padding: 15px 10px;
        border-radius: 10px;
    }

    .form-col.half-col {
        width: 100%;
    }

    .form-col select {
        background-size: 18px;
    }
    /* dashboard */
    .db-form__inner.half__inner {
        width: 100%;
    }
    /* end dashboard */
    /* profile */
    .sm-mb1 {
        margin-bottom: 16px;
    }

    .upload-container {
        padding: 15px 15px;
    }

    .upload-label {
        flex-wrap: wrap;
    }
    /* end profile */
    /* submission */
    .filter-container.gap1 {
        gap: 10px;
    }

    .mb-element-full > * {
        max-width: 100%;
        width: 100%;
    }

    .db-list_col .col-auto {
        max-width: 100%;
    }

    .mb-element-full {
        gap: 5px;
    }

        .mb-element-full .col-divider {
            display: none;
        }
    /* end submission */
    /* today */
    .empty-event-wrap {
        margin: 50px 20px 50px 20px;
    }

    img.w50 {
        width: 40px;
    }

    .gap24px {
        column-gap: 12px;
    }
    /* end today */
    /* cause info */
    .cause-infobox .col {
        width: 100%;
    }
    /* end cause info */
    /* events */
    .form-divider {
        margin: 10px 0;
    }
    /* end events */
    /* gigs */
    .photo-grid-col {
        width: calc(50% - 8px);
    }

        .photo-grid-col img {
            height: 140px;
        }

    .photo-link-wrap {
        padding: 10px;
    }

    #savephotoModal .modal-content .img_description {
        padding: 15px 20px;
    }

    .upload-container.add-new {
        min-height: 150px;
    }
    /* end gigs */
}

@media (max-width: 640px) {
    /* events */
    .form-col .half {
        width: 100%;
    }
    /* end events */
}
/* end dashboard responsive */