* {
    padding: 0;
    margin: 0;
    font-family: "DM Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.btn_primary {
    background: #9ACA3C;
    border: 1px solid #9ACA3C;
    padding: 10px 14px;
    border-radius: 8px;
    text-decoration: none;
    color: #FFFFFF;
    font-weight: 600;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .btn_primary img,
    .btn_bordered img {
        width: 20px;
        height: 20px;
        margin-right: 8px;
    }

.btn_bordered {
    background: #FFFFFF;
    border: 1px solid #BCBEC0;
    box-shadow: 0px 1px 2px 0px #1018280D;
    padding: 10px 14px;
    border-radius: 8px;
    text-decoration: none;
    color: #58595B;
    font-weight: 600;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* Sidebar .......................... */

.sidebar-container {
    padding: 20px 0 20px 16px !important;
    position: fixed;
    height: 100%;
}

.sidebar {
    padding: 32px 20px;
    width: 106px;
    height: 100%;
    background-color: #58595B;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
}

.sidebar-logo {
    width: 58px;
    height: 72px;
}

.main-menu {
    margin-top: 64px;
    justify-content: center;
}

    .main-menu .nav-item {
        margin-bottom: 10px;
    }

        .main-menu .nav-item .nav-link {
            width: 56px;
            height: 56px;
            border-radius: 16px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

            .main-menu .nav-item .nav-link img {
                max-width: 32px;
                max-height: 32px;
            }

            .main-menu .nav-item .nav-link.active {
                background-color: #9ACA3C;
            }

.bottom-menu {
    margin-top: auto;
    margin-bottom: 12px;
    border-top: 1px solid #F3F4F4;
    padding-top: 16px;
}

    .bottom-menu .logoutbtn {
        border: 1px solid #F04438;
        width: 58px;
        height: 58px;
        border-radius: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #F04438;
    }

    .bottom-menu button img {
        max-width: 36px;
        max-height: 36px;
    }

.main {
    margin-left: 154px;
    padding-right: 64px;
}

.right-sidebar {
    padding: 24px 0 20px 0;
    border-bottom: 1px solid #BCBEC0;
    margin-bottom: 32px;
}

    .right-sidebar h3 {
        font-weight: 600;
        font-size: 28px;
        line-height: 32px;
        margin-top: 0;
        color: #58595B;
    }

    .right-sidebar .dropdown .btn {
        padding: 0;
        margin-left: 16px;
    }

        .right-sidebar .dropdown .btn .profile-img {
            width: 46px;
            height: 46px;
            margin: 0;
            border-radius: 50%;
            background-color: #A0E79F;
            margin-right: 8px;
        }

        .right-sidebar .dropdown .btn h6 {
            font-weight: 600;
            font-size: 18px;
            line-height: 22px;
            color: #58595B;
        }

        .right-sidebar .dropdown .btn p {
            font-weight: 400;
            font-size: 12px;
            line-height: 16px;
            color: #58595B;
        }

        .right-sidebar .dropdown .btn img {
            height: 16px;
            width: 16px;
        }

    .right-sidebar .dropdown .arrow-down {
        height: 24px;
        width: 24px;
    }

.dropdown-menu {
    transform: translate3d(50px, 58px, 0px) !important;
}

.right-sidebar .dropdown .dropdown-item {
    font-size: 14px;
    color: #181D27;
    font-weight: 400;
}

    .right-sidebar .dropdown .dropdown-item:active {
        background-color: #00468C;
        color: #FFFFFF;
    }

@media (max-width:767px) {
    .sidebar-container {
        padding: 12px 0 12px 8px !important;
    }

    .sidebar {
        width: 65px;
        padding: 16px 5px;
    }

    .sidebar-logo {
        width: 46px;
        height: 58px;
    }

    .main-menu .nav-item .nav-link {
        width: 45px;
        height: 45px;
        border-radius: 8px;
    }

        .main-menu .nav-item .nav-link img {
            max-width: 28px;
            max-height: 28px;
        }

    .main-menu {
        margin-top: 40px;
    }

    .bottom-menu .logoutbtn {
        height: 45px;
        width: 45px;
    }

    .bottom-menu button img {
        max-width: 30px;
        max-height: 30px;
    }

    .main {
        margin-left: 85px;
        padding-right: 15px;
    }

    .right-sidebar h3 {
        font-size: 24px;
    }
}

@media (min-width:767px) and (max-width:991px) {
    .sidebar-container {
        padding: 16px 0 16px 12px !important;
    }

    .sidebar {
        padding: 24px 14px;
        width: 90px;
    }

    .main {
        margin-left: 120px;
        padding-right: 20px;
    }
}

@media (min-width:991px) and (max-width:1200px) {
    .sidebar {
        padding: 24px 14px;
        width: 95px;
    }

    .main {
        margin-left: 135px;
        padding-right: 32px;
    }
}


/* sidebar end ..............................  */


/* meetings .................................... */

.meetings {
    padding-bottom: 40px;
}

    .meetings h3 {
        font-weight: 600;
        font-size: 24px;
        line-height: 28px;
        color: #58595B;
    }

    .meetings p {
        font-weight: 400;
        font-size: 16px;
        line-height: 20px;
        color: #58595B;
        margin-bottom: 0;
    }

.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
}

.cards .card {
    padding: 20px;
    border-radius: 16px;
    border: none;
}

    .cards .card h6 {
        font-weight: 400;
        font-size: 20px;
        line-height: 24px;
        margin-bottom: 0;
    }

    .cards .card .img-container {
        width: 48px;
        height: 48px;
        border-radius: 12px;
    }

        .cards .card .img-container img {
            width: 30px;
            height: 30px;
        }

    .cards .card h3 {
        font-weight: 700;
        font-size: 56px;
        line-height: 56px;
        margin-bottom: 4px;
    }

    .cards .card .detail {
        margin-top: -20px;
    }

.cards .card1 {
    background-color: #F3F4F4;
}

    .cards .card1 .img-container {
        background-color: #58595B;
    }

    .cards .card1 h3,
    .cards .card1 h6 {
        color: #58595B;
    }

.cards .card2 {
    background-color: #ECFDF3;
}

    .cards .card2 .img-container {
        background-color: #039855;
    }

    .cards .card2 h3,
    .cards .card2 h6 {
        color: #039855;
    }

.cards .card3 {
    background-color: #FFFAEB;
}

    .cards .card3 .img-container {
        background-color: #DC6803;
    }

    .cards .card3 h3,
    .cards .card3 h6 {
        color: #DC6803;
    }

.cards .card4 {
    background-color: #FEF3F2;
}

    .cards .card4 .img-container {
        background-color: #D92D20;
    }

    .cards .card4 h3,
    .cards .card4 h6 {
        color: #D92D20;
    }

.table-outer .table-head {
    padding: 20px 24px;
    align-items: center;
}

    .table-outer .table-head .btn_bordered {
        font-size: 14px;
        padding: 10px 16px;
    }

    .table-outer .table-head .btn img {
        width: 20px;
        height: 20px;
    }

    .table-outer .table-head label {
        font-weight: 500;
        font-size: 12px;
        line-height: 18px;
        text-align: center;
        color: #FFFFFF;
        padding: 2px 8px;
        background-color: #9ACA3C;
        border-radius: 16px;
        margin-left: 8px;
    }

.table-outer {
    border: 1px solid #BCBEC0;
    border-radius: 12px;
    box-shadow: 0px 1px 2px 0px #0A0D120D;
    position: relative;
    margin-top: 32px;
}

.table {
    border-top: 1px solid #BCBEC0 !important;
}

    .table .form-check-input {
        border: 1px solid #BCBEC0;
        width: 20px;
        height: 20px;
        border-radius: 6px;
        box-shadow: none;
    }

        .table .form-check-input:checked {
            background-color: #58595B;
        }

    .table tr {
        border-color: #BCBEC0 !important;
    }

    .table .btn_bordered {
        padding: 6px !important;
    }

        .table .btn_bordered img {
            height: 20px;
            width: 20px;
        }

.btn_danger {
    color: #F04438;
    border: 1px solid #F04438;
}

.btn_green {
    color: #17B26A;
    border: 1px solid #17B26A;
}

.dt-page-info {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #58595B;
}

.StatusLbl {
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    border: 1px solid;
}

.lblPending {
    border-color: #B54708;
    color: #B54708;
    background-color: #FFFAEB;
}

.lblAccept {
    border-color: #067647;
    background-color: #ECFDF3;
    color: #067647;
}

.lblReject {
    border-color: #D92D20;
    background-color: #FEF3F2;
    color: #D92D20;
}

@media (max-width:575px) {

    .section-head,
    .table-head {
        justify-content: start;
        align-items: start;
        flex-direction: column;
    }

        .table-head .form-group {
            margin-bottom: 16px;
        }
}

@media (min-width:1200px) and (max-width:1400px) {
    .cards .card h6 {
        font-size: 18px;
    }

    .cards .card h3 {
        font-size: 50px;
    }
}

@media (min-width:767px) and (max-width:991px) {
    .cards .card h6 {
        font-size: 18px;
    }

    .cards .card h3 {
        font-size: 45px;
        line-height: 50px;
    }

    .cards .card .detail {
        margin-top: 0px;
    }
}


@media (max-width:767px) {

    .meetings h3 {
        font-size: 20px;
        line-height: 24px;
        margin-bottom: 4px;
    }

    .meetings p {
        font-size: 14px;
        line-height: 18px;
    }

    .table-outer .table-head .btn_bordered {
        padding: 10px 12px;
        margin-bottom: 12px;
    }

    .cards .card h3 {
        font-size: 40px;
        line-height: 40px;
    }

    .cards .card h6 {
        font-size: 16px;
        line-height: 20px;
    }

    .table-outer .table-head {
        padding: 10px 18px 0px 16px;
    }

    .meetings .table-head h3 {
        font-size: 18px;
    }

    div.dataTables_wrapper div.dataTables_paginate ul.pagination {
        margin-left: -10px;
        padding: 12px 0 16px 0;
        justify-content: space-between !important;
    }
}


/* notification ...................  */


.notification {
    padding-bottom: 40px;
}

    .notification h3 {
        font-weight: 600;
        font-size: 24px;
        line-height: 28px;
        color: #58595B;
    }

    .notification p {
        font-weight: 400;
        font-size: 16px;
        line-height: 20px;
        color: #58595B;
        margin-bottom: 0;
    }

    .notification .cards {
        margin-top: 48px;
    }

    .notification .card {
        border: 1px solid #BCBEC0;
        padding: 24px 32px;
        border-radius: 20px;
        height: 100%;
        overflow: hidden;
    }

    .notification .canvas {
        padding: 0 !important;
    }

    .notification .card-body {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .notification .card-heading {
        background-color: #F3F4F4;
        border-bottom: 1px solid #BCBEC0;
        padding: 16px 32px;
    }

        .notification .card-heading h3 {
            font-size: 18px;
        }

    .notification .card h3 {
        font-weight: 600;
        font-size: 18px;
        line-height: 20px;
        color: #58595B;
        margin-bottom: 4px;
    }

    .notification .card p {
        font-size: 14px;
        margin-bottom: 12px;
    }

    .notification .form-group {
        margin-top: 20px;
        max-width: 384px;
    }

        .notification .form-group label {
            font-weight: 600;
            font-size: 14px;
            line-height: 20px;
            color: #58595B;
            margin-bottom: 6px;
        }

            .notification .form-group label span {
                color: #9ACA3C;
            }

        .notification .form-group .form-control,
        .notification .form-group .form-select {
            padding: 10px 14px;
            box-shadow: 0px 1px 2px 0px #0A0D120D;
            border: 1px solid #BCBEC0;
            border-radius: 8px;
            font-size: 14px;
            line-height: 24px;
            color: #58595B;
        }

            .notification .form-group .form-control::placeholder {
                color: #58595B;
            }

        .notification .form-group textarea {
            height: 150px;
        }

.phone-container {
    width: 258px;
    height: 532px;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 40px;
}

.phone {
    width: 100%;
    height: 100%;
    z-index: 1;
}

.phoneContant {
    position: absolute;
    top: 0;
    padding: 10px 20px;
    max-width: 258px;
    width: 100%;
    height: 100%;
    max-height: 532px;
    border-radius: 28px;
    overflow: hidden;
    background-image: url(../assets/images/Wallpaper.png);
    background-size: cover;
}

.screen-content {
    min-height: 64%;
    max-height: 64%;
    display: flex;
    flex-direction: column;
    justify-content: end;
    padding: 20px 0 32px;
    position: relative;
    z-index: 1;
    overflow: auto;
}

.notification .notifications {
    width: 100%;
    background-color: #FFFFFFCC;
    border-radius: 12px;
    padding: 8px 12px;
    backdrop-filter: blur(30px);
    display: flex;
    align-items: center;
}

    .notification .notifications:not(:last-child) {
        margin-bottom: 10px;
    }

    .notification .notifications img {
        width: 32px;
        height: 40px;
    }

    .notification .notifications h6 {
        font-weight: 600;
        font-size: 13px !important;
        line-height: 13px !important;
        color: #222222;
        margin-bottom: 0;
    }

    .notification .notifications p {
        font-weight: 400;
        font-size: 11px;
        line-height: 100%;
        margin-bottom: 0;
        color: #3F3F3F;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        .notification .notifications p span {
            font-size: 9px;
        }


@media (max-width:991px) {
    .notification .card {
        padding: 24px 16px;
    }
}

@media (max-width:575px) {

    .notification h3 {
        font-size: 20px;
        line-height: 24px;
        margin-bottom: 4px;
    }

    .notification p {
        font-size: 14px;
        line-height: 18px;
    }

    .notification .cards {
        margin-top: 20px;
    }
}



/* Modals */



.meetingModalHeaderIcon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    border-width: 1px;
    border: 1px solid #BCBEC0;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .meetingModalHeaderIcon img {
        width: 24px;
        height: auto;
    }

.meetingNotificationModal .modalTitle {
    font-style: 16px;
}

.meetingNotificationModal .modal-content {
    border: 0 !important;
    color: #58595B;
}

.meetingNotificationModal .modal-dialog {
    max-width: 540px;
}

.meetingNotificationModal .modalInfo {
}

.btns_row {
    margin-left: -6px;
    margin-right: -6px;
}

    .btns_row .btnCol {
        padding-left: 6px;
        padding-right: 6px;
    }

.modalInfo {
    border: 1px solid #58595B;
    padding: 20px 24px;
    border-radius: 24px;
}

    .modalInfo img.userImg {
        min-width: 128px;
        width: 128px;
        height: 128px;
        object-fit: cover;
        object-position: center;
        border-radius: 8px;
        overflow: hidden;
    }

.status_label {
    font-size: 12px;
    padding: 4px 9px;
    border-radius: 16px;
    font-weight: 500;
}

    .status_label.sponsorStatus {
        background: #58595B;
        color: #fff;
    }

.info_dateTimeWrap .icon {
    min-width: 24px;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    background: #9ACA3C;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
}

.info_detail p {
    font-size: 14px;
    color: #9ACA3C;
}

.info_dateTimeWrap .dateTime {
    margin-top: 10px;
}

.info_dateTimeWrap .icon img {
    width: 16px;
}


.btn_bordered2 {
    box-shadow: 0px 1px 2px 0px #1018280D;
    padding: 10px 14px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #D92D20;
    background: #FEE4E2;
    color: #D92D20;
}

.dataTables_filter input {
    border: 1px solid #E8E8E9 !important;
    padding: 10px 14px 10px 38px;
    border-radius: 12px;
    background-image: url(../assets/icons/search.svg);
    background-repeat: no-repeat;
    background-position: 2% 50%;
    box-shadow: none !important;
    font-weight: 400;
    font-size: 14px;
    color: #69686D;
    width: 100% !important;
    box-shadow: none;
    margin-left: 0 !important;
}

.dataTables_filter {
    padding: 0 24px 24px 24px;
}

div#table_listing_length{
    margin-left: 1rem !important;
}

.Overlay {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background-color: #00000066;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

    .Overlay.active {
        opacity: 1;
        visibility: visible;
    }

.SidePanel {
    padding: 17px 14px 40px 24px;
    background-color: #FFFFFF;
    border-left: 14px solid #58595B;
    max-width: 380px;
    width: 100%;
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 99;
}

.panelBody {
    max-height: 75%;
    min-height: 75%;
    overflow-y: auto;
    margin-bottom: 20px;
}

.SidePanel.open {
    transform: translateX(0);
}

.SidePanel .panelHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
}


.SidePanel h3 {
    font-weight: 700;
    font-size: 28px;
    line-height: 28px;
    color: #000000;
    margin-bottom: 0;
}

.SidePanel .form-group {
    margin-bottom: 20px;
}

.SidePanel .form-group label {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #262423;
    margin-bottom: 6px;
}

.SidePanel .form-group .form-control,
.SidePanel .form-group .form-select {
    border: 1px solid #BCBEC0;
    border-radius: 8px;
    padding: 10px 14px;
    box-shadow: 0px 1px 2px 0px #0A0D120D;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: #262423;
}