/*
*
* ==========================================
* Common CSS
* ==========================================
*
*/


:root {
    --blue: #FF725E;
    --blue: #32b9eb;
    --white: #fff;
    --black: #000;
    --grey: #5e5d72;
    --light-blue: #FFC0B7;
    --light-blue: #b4eafd;
    --red: #af3641;
    --light-grey: #F0F6FE;
    /* --admin-main: #00204a; */
    --admin-main: #303c49;
    --light-grey: #f4f2f0;
}

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    font-family: "Poppins-Ragular";
    list-style-type: none;
}

html {
    scroll-behavior: smooth;
}

a:hover {
    text-decoration: none;
}

:focus-visible {
    outline: none !important;
}

/* Body Styles */
body {
    margin: 0px;
    padding: 0px;
    font-family: "Poppins-Ragular";
    box-sizing: border-box;
}


.container,
.container-lg,
.container-md,
.container-sm,
.container-xl {
    max-width: 1440px;
}

button:focus {
    box-shadow: none !important;
}

/* ------------------ Admin Login Start--------------------- */

.admin-login-main {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: var(--light-grey);
}

.login-sec {
    width: 50%;
    margin: auto;
    background-color: var(--white);
    padding: 50px;
    box-shadow: rgba(100, 100, 111, 0.1) 0px 7px 29px 0px;
}

.login-logo {
    width: 100%;
    display: flex;
    justify-content: center;
}

    .login-logo img {
        height: 80px;
    }


.form-group {
    width: 100%;
    position: relative;
}

    .form-group input {
        width: 100%;
        border-radius: 8px;
        padding: 10px 20px;
        border: 1px solid #c1c1c1;
    }


input.input-submit {
    width: 100%;
    background-color: var(--blue);
    color: #fff;
    font-weight: 500;
    border: none;
    padding: 10px 30px;
    border-radius: 8px;
}

.remember-me input {
    width: auto !important;
}

.remember-me a {
    display: flex;
    justify-content: end;
    color: var(--blue);
}


.form-group p {
    text-align: center;
}


.form-group label {
    font-size: 14px;
}

.region-form {
    text-align: center;
}

.region-label {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
}

    .region-label svg {
        display: block;
        vertical-align: middle;
    }

    .region-label select {
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        opacity: 0;
        width: 100%;
    }



.password-feild {
    width: 100%;
    position: relative;
}


    .password-feild input {
        height: 40px;
    }

.eye-toggle {
    background: none;
    border: none;
    color: #337ab7;
    font-size: 12px;
    font-weight: 600;
    position: absolute;
    right: 0;
    top: 0;
    transform: translate(-6px, 10px);
    z-index: 9;
    margin: 0;
    padding: 0;
}

.remember-me {
    margin-top: 15px;
}

.remember-me-label {
    display: flex;
    align-items: center;
    gap: 5px;
}

.login-form {
    width: 100%;
    margin-top: 20px;
}


.email-confirm {
    width: 100%;
}

    .email-confirm h1 {
        font-size: 32px;
        font-weight: bold;
        color: #000;
        margin-bottom: 20px;
    }

    .email-confirm p {
        font-size: 18px;
        color: #333;
        margin-bottom: 8px;
        margin-top: 20px;
    }

    .email-confirm a {
        width: 100%;
        position: relative;
        margin-top: 30px;
    }

        .email-confirm a:before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            height: 1px;
            width: 100%;
            background: rgb(0, 0, 0);
            background: linear-gradient(90deg, rgb(2 136 251) 0%, rgba(255, 255, 255, 1) 100%);
        }

        .email-confirm a:after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            height: 1px;
            width: 100%;
            background: rgb(255, 255, 255);
            background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgb(2 136 251) 100%);
        }






/* -----------------------admin start------------------ */

button {
    background-color: transparent;
    border: none;
    outline: none;
}

.admin-header {
    width: 100%;
    padding: 14px 30px;
    display: flex;
    align-items: center;
    justify-content: start;
    position: relative;
    /* position: fixed; */
    /* top: 0px;
    left: 0px; */
    z-index: 1;
    background-color: var(--white);
    border-bottom: 1px solid #dfdfdf;
    /* box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; */
}

.admin-header-logo img {
    height: 70px;
    /* margin-right: 100px;  */
}

.admin-header-group {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.admin-header-left {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    gap: 18px;
}

.admin-header-icon {
    border: none;
    outline: none;
    background-color: transparent;
    border-radius: 50px;
}


.admin-header-right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    gap: 0px 18px;
}

.admin-header-alert {
    position: relative;
}

.admin-header-alert-icon {
    position: relative;
}

    .admin-header-alert-icon i {
        font-size: 18px;
        width: 40px;
        height: 40px;
        line-height: 38px;
        border-radius: 50%;
        text-align: center;
        background-color: #f0f6fe;
        transition: all linear .3s;
        -webkit-transition: all linear .3s;
        -moz-transition: all linear .3s;
        -ms-transition: all linear .3s;
        -o-transition: all linear .3s;
    }

    .admin-header-alert-icon sup {
        position: absolute;
        top: -10px;
        right: -1px;
        z-index: 1;
        font-size: 9px;
        font-weight: bold;
        height: 20px;
        width: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 15px;
        background-color: var(--light-blue);
        color: #333;
    }


/* admin user dropdown */


/*-----------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------
section css start 
-----------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------*/



/* admin sidebar */



#sidebar {
    min-width: 300px;
    max-width: 300px;
    /* height: 100vh; */
    height: calc(100vh - 100px);
    /* background: #022C44; */
    background: #fff;
    color: #022C44;
    position: relative;
    z-index: 1;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}

    #sidebar.active {
        min-width: 95px;
        max-width: 95px;
        text-align: center;
    }

#content {
    width: 100%;
    height: calc(100vh - 100px);
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    background-color: #ebebeb;
    /* background-color: #FAFAFB; */
}



.thin-scrolling {
    overflow-y: auto;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}





.admin-sidebar.active .menu-text {
    display: none;
}

.admin-sidebar ul li a .nav-text {
    /* margin-left: 40px;
    position: absolute;
    min-width: 200px; */
}

.admin-sidebarCollapse {
}


.admin-sidebar-menu {
    padding: 0;
    margin: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

.sidebar-top-ul {
    list-style: none;
    flex-grow: 1;
}

.bottom-menu {
    flex-shrink: 0;
    width: 100%;
    border-top: 1px solid #dfdfdf;
    display: flex;
    justify-content: space-evenly;
}

#sidebar.active .bottom-menu {
    display: block;
}

.sidebar-bottom-a {
    height: 50px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: 1px solid #dfdfdf;
}

    .sidebar-bottom-a:last-child {
        border: 0;
    }

    .sidebar-bottom-a:hover {
        background-color: var(--admin-main);
    }

        .sidebar-bottom-a:hover svg {
            fill: var(--white);
        }

    .sidebar-bottom-a svg {
        height: 28px;
        fill: var(--admin-main);
    }

.admin-sidebar-menu-item.active .sidebar-bottom-a svg {
    fill: #fff;
}

.head-profile-btn span {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    width: 40px;
    background-color: #b8dbff;
    border-radius: 50%;
    font-weight: bold;
    cursor: pointer;
    font-size: 14px;
}

.head-main-dropdown {
    list-style: none;
    padding: 0px;
    margin: 0;
}

.dropdown-menu.dropdown-menu-right.head-profile-dropdown-menu {
    padding: 0;
}

.hmd-text {
    padding: 20px;
}

.hmd-btn {
    padding: 0px;
}

    .hmd-btn button {
        width: 100%;
        text-align: left;
        padding: 5px 20px;
    }

        .hmd-btn button:hover {
            background: #f0f6fe;
            border-radius: 0;
        }

.head-main-dropdown h1 {
    font-size: 18px;
    font-weight: bold;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 10px;
}

.head-main-dropdown li hr {
    padding: 0;
    margin: 0;
}

.head-main-dropdown p {
    font-size: 12px;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 400;
}


ul,
ol {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

.admin-sidebar-menu-item {
    /* margin-bottom: 3px; */
}

.admin-sidebar-menu-btn {
    width: 100%;
    padding: 0 30px;
    height: 51px;
    display: flex;
    align-items: center;
    gap: 0 18px;
    border-bottom: 1px solid #dfdfdf;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
    border-top: 0;
}

admin-sidebar.active .admin-sidebar-menu-btn {
    justify-content: center;
}

/* .admin-sidebar-menu-item:first-child {
    border-top: 1px solid #dfdfdf;
} */

.admin-sidebar-menu-item:hover,
.admin-sidebar-menu-item.active {
    background-color: var(--admin-main);
}


    .admin-sidebar-menu-item:hover .menu-svg svg,
    .admin-sidebar-menu-item.active .menu-svg svg {
        fill: var(--white);
    }


    .admin-sidebar-menu-item:hover .menu-text,
    .admin-sidebar-menu-item.active .menu-text {
        color: var(--white);
    }


.admin-sidebar-menu-btn span {
    color: var(--admin-main);
}

.menu-text {
}

.menu-svg svg {
    height: 22px;
    fill: var(--admin-main);
}


/* main sec css */
.admin-main {
    /* padding: 0 25px; */
    background-color: #F4F4F4;
}



.dashboard-sec {
    background-color: var(--white);
    width: 100%;
    padding: 10px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 40px;
    height: 250px;
}

.dashboard-svg svg {
    height: 100px;
    fill: var(--grey);
}

.dashboard-text h5 {
    font-size: 20px;
    font-family: "Poppins-SemiBold";
    margin-top: 20px;
    text-transform: uppercase;
    color: var(--grey);
    text-align: center;
}


.dashboard-text h2 {
    font-size: 24px;
    font-family: "Poppins-SemiBold";
    margin-top: 20px;
    text-transform: uppercase;
    color: var(--grey);
}


/* user css */
.admin-main-top {
    background-color: var(--white);
    box-shadow: rgb(149 157 165 / 20%) 0px 8px 24px;
    width: 100%;
    height: 50px;
    /* padding: 5px 20px; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* margin-top: 40px; */
    border-radius: 0px;
    background: #2ac44d;
}

    .admin-main-top a {
        font-size: 24px;
        font-family: "Poppins-Bold";
        margin: 0;
        color: var(--admin-main);
        text-transform: uppercase;
    }

        .admin-main-top a i {
            margin-right: 5px;
        }

    .admin-main-top h1 {
        font-size: 18px;
        font-family: "Montserrat";
        margin: 0;
        color: var(--white);
        text-transform: uppercase;
        margin: 0;
        padding: 5px 0 5px 22px;
        font-weight: bold;
    }

.am-top-right-btn {
    display: flex;
}

    .am-top-right-btn button {
        padding: 0px;
        background: transparent;
        color: var(--white);
        width: 50px;
        height: 50px;
        border-radius: 0;
        border-left: 1px solid #dfdfdf;
    }

        .am-top-right-btn button:hover {
            background: #fff;
            color: #33c357;
        }

.admin-add {
    display: flex;
    justify-content: start;
    gap: 10px;
}

    .admin-add a {
        font-size: 18px;
    }

    .admin-add span,
    .admin-add h6 {
        font-size: 18px;
        font-family: "Poppins-Bold";
        margin: 0;
        color: var(--admin-main);
        text-transform: uppercase;
        margin: 0;
        opacity: .5;
    }


.admin-main-body-main {
    padding: 35px 20px;
}

    .admin-main-body-main.alt {
        background-color: transparent;
    }

.main-admin-padding {
    padding: 0 20px;
}

.admin-main-body {
    background-color: var(--white);
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    width: 100%;
    padding: 40px 20px;
    border-radius: 10px;
}

    .admin-main-body .tableResponsiveAlt {
        height: 400px !important;
    }

    .admin-main-body h1 {
        font-size: 22px;
        font-family: "Poppins-SemiBold";
        margin-bottom: 0;
    }

/* admin table */

.admin-table-div {
    width: 100%;
    overflow: auto;
}

.admin-table {
    width: 100%;
    margin-top: 30px;
    font-size: 14px;
}

    .admin-table tbody tr:nth-child(even) {
        background-color: #F3FBFF;
    }

.admin-head-tr {
    border-radius: 10px 10px 0 0;
    background-color: var(--admin-main);
    color: var(--white);
}

    .admin-head-tr th {
        font-weight: 100;
    }

        .admin-head-tr th:first-child {
            border-radius: 5px 0 0 0;
        }

        .admin-head-tr th:last-child {
            border-radius: 0 5px 0 0;
            width: 0;
        }

.admin-table td,
.admin-table th {
    padding: 10px 10px;
}

.admin-table td,
.admin-table th {
    border-right: 1px solid #F0F0F0;
}

    .admin-table td:last-child {
        border: none;
    }

.admin-td-name-sec {
    display: flex;
    align-items: center;
    gap: 0 10px;
}

.admin-td-name {
}

.table-profile {
    height: 25px;
    width: 25px;
    border-radius: 50px;
}

    .table-profile img {
        height: inherit;
        width: inherit;
    }

.admin-td-btn {
    display: flex;
    gap: 0 10px;
}

.admin-btn {
    height: 30px;
    width: 30px;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0;
}


    .admin-btn:focus {
        box-shadow: none !important;
    }

    .admin-btn svg {
        height: 13px;
    }

.admin-edit {
    background-color: #DDFBE9;
}

    .admin-edit:hover {
        background-color: transparent;
        border: 1px solid #1A9F53;
    }

    .admin-edit svg {
        fill: #1A9F53;
    }


.admin-view {
    background-color: #def6ff;
}

    .admin-view:hover {
        background-color: transparent;
        border: 1px solid var(--blue);
    }

    .admin-view svg {
        fill: var(--blue);
    }


.admin-delete {
    background-color: #FFDFE4;
}

    .admin-delete:hover {
        background-color: transparent;
        border: 1px solid #F11133;
    }

    .admin-delete svg {
        fill: #F11133;
    }


.adminGeneratePassword {
    background-color: #ffe9df;
}

    .adminGeneratePassword:hover {
        background-color: transparent;
        border: 1px solid #ff9261;
    }
    .adminGeneratePassword i {
        font-size: 12px;
        color: #ff9261;
    }


.admin-change-ps {
    background-color: #dfecff;
}

    .admin-change-ps:hover {
        background-color: transparent;
        border: 1px solid #22469e;
    }


    .admin-change-ps svg {
        fill: #22469e;
    }



.admin-ac-badge {
    line-height: 22px;
    border-radius: 6px;
    padding: 0px 7px 1px;
    text-transform: capitalize;
    font-size: 13px;
    width: fit-content;
    margin: 0;
}

    .admin-ac-badge.active {
        color: #187d44;
        background: #bdf5d3;
    }

    .admin-ac-badge.pending {
        color: #a808c3;
        background: #f6caff;
    }

    .admin-ac-badge.blocked {
        color: #e00b2b;
        background: #ffc4cd;
    }

tfoot .pagerButton {
    display: inline-block;
    background: #fff;
    color: var(--admin-main);
    /*border: 1px solid var(--admin-main);*/
    padding: 2px 8px;
    border-radius: 5px;
}

    tfoot .pagerButton.active {
        background: var(--admin-main);
        color: var(--white);
    }

.admin-table-footer {
    display: block;
    text-align: center;
    margin-top: 20px;
}




/* admin responsive */

@media screen and (max-width: 1200px) {

    #sidebar {
        min-width: 0;
        max-width: 0;
    }

        #sidebar.active {
            min-width: 200px;
            max-width: 200px
        }

    .admin-sidebar.active .menu-text {
        display: block;
    }

    .dashboard-svg svg {
        height: 70px;
    }

    .dashboard-text h1 {
        font-size: 18px;
    }

    .admin-main-body {
        overflow: auto;
    }
}

@media screen and (max-width: 800px) {

    #sidebar.active {
        min-width: 250px;
        max-width: 250px;
    }
}











/* filter css */

/* .filter-area{
    width: 100%;
    margin-top: 20px;
    position: relative;
}

.filter-area input{
    width: 100%;
    padding: 0 10px;
    height: 40px;
    border-radius: 5px;
    border: 1px solid var(--admin-main);
    font-size: 12px;
}

.filter-search{
    position: absolute;
    right: 0;
    top: 0;
    transform: translate(-5px, 7px);
    color: var(--admin-main);
} */


.sec-filters {
    width: 100%;
    border: 1px solid #e3e3e3;
    margin-top: 0;
}

.sec-filters-inner {
    width: 100%;
    padding: 10px 20px;
}

h1.sec-filters-title {
    font-size: 20px;
    background: var(--light-grey);
    padding: 10px 20px;
}

.filter-area {
    width: 100%;
    margin-top: 20px;
    position: relative;
}

    .filter-area input {
        width: 100%;
        padding: 10px 0;
        font-size: 14px;
        color: var(--admin-main);
        margin-bottom: 30px;
        border: none;
        border-bottom: 1px solid var(--admin-main);
        outline: none;
        background: transparent;
    }

    .filter-area textarea {
        width: 100%;
        padding: 10px 0;
        font-size: 14px;
        color: var(--admin-main);
        margin-bottom: 30px;
        border: none;
        border-bottom: 1px solid var(--admin-main);
        outline: none;
        background: transparent;
        resize: vertical;
    }


    .filter-area label {
        position: absolute;
        top: -20px;
        left: 0;
        padding: 10px 0;
        font-size: 12px;
        color: var(--admin-main);
        pointer-events: none;
        transition: .5s;
    }

    .filter-area .filter-area-span {
        position: absolute;
        padding-top: 10px;
        font-size: 18px;
        font-weight: 600;
    }

    .filter-area select {
        width: 100%;
        padding: 10px 0;
        font-size: 14px;
        color: var(--admin-main);
        margin-bottom: 30px;
        border: none;
        border-bottom: 1px solid var(--admin-main);
        outline: none;
        background: transparent;
    }

        .filter-area input:focus ~ label,
        .filter-area input:valid ~ label,
        .filter-area select:valid ~ label,
        .filter-area textarea:valid ~ label {
            top: -20px !important;
            left: 0 !important;
            color: #757575 !important;
            font-size: 12px !important;
        }

        .filter-area select:focus ~ label,
        .filter-area select:valid ~ label {
            top: -20px;
            left: 0;
            color: var(--blue);
            font-size: 12px;
        }


.filter-area-btn {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 20px 0;
    gap: 20px;
}

.change-ps-btn {
    width: 100%;
    display: flex;
    justify-content: start;
    margin: 20px 0;
    gap: 20px;
}

    .change-ps-btn .main-btn {
        /* background-color: var(--red);
        color: var(--white);
        border-width: 1px;*/
        -webkit-box-align: center;
        align-items: center;
        border-radius: 2px;
        border-color: transparent;
        border-style: solid;
        border-width: 1px;
        cursor: pointer;
        letter-spacing: 0.66px;
        text-transform: uppercase;
        transition-duration: 0.1s;
        transition-timing-function: cubic-bezier(0.33, 0, 0.67, 1);
        vertical-align: middle;
        background-color: var(--red);
        color: var(--white);
        font-size: 13px;
        font-weight: bold;
        padding: 5px 15px;
    }

.main-btn {
    width: 200px;
    padding: 10px 20px;
    background-color: var(--white);
    border: 1px solid var(--admin-main);
    color: var(--admin-main);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    display: inline-block;
    /* box-shadow: inset 0 0 0 0 var(--admin-main);
    -webkit-transition: ease-out 0.4s;
    -moz-transition: ease-out 0.4s;
    transition: ease-out 0.4s; */
}

    .main-btn:hover {
        background-color: var(--admin-main);
        border: 1px solid var(--admin-main);
        color: var(--white);
    }

.search-btn {
    background: var(--blue);
    color: #fff;
    border-color: var(--blue);
}

.clear-btn {
    background: #f44336;
    color: #fff;
    border-color: #f44336;
}

.fill-btn {
    background-color: var(--admin-main);
    border: 1px solid var(--white);
    color: var(--white);
}

    .fill-btn:hover {
        background-color: transparent;
        border: 1px solid var(--admin-main);
        color: var(--admin-main);
    }

.main-btn.main-btn-primary {
    background-color: var(--admin-main);
    border: 1px solid var(--white);
    color: var(--white);
}


.add-user-model-dialog {
    width: 70%;
    max-width: 70%;
}

.admin-table-profile {
    position: relative;
    border: 1px solid #e3e3e3;
    background-color: #e3e3e3;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
}

.admin-table-profile-input {
    opacity: 0.0;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}





.dbt-button {
    width: 90%;
    min-width: 90%;
    max-width: 90%;
    margin-top: 25px;
}

    .dbt-button button {
        border-radius: 2px;
        letter-spacing: 0.66px;
        background-color: rgb(249, 249, 249);
        border: 1px solid rgb(204, 204, 204);
        color: var(--black);
        font-size: 14px;
        height: 35px;
        width: inherit;
        min-width: inherit;
        max-width: inherit;
        font-weight: 600;
        display: flex;
        justify-content: center;
        align-items: center;
    }

.dbt-button-dropdown {
    display: flex;
}

    .dbt-button-dropdown span svg {
        height: 14px;
    }


.dropdown-menu.dbt-dropdown-menu {
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(204, 204, 204);
    border-radius: 2px;
    box-shadow: rgb(0 0 0 / 15%) 0px 2px 4px 0px;
    margin-top: 0;
    margin-left: 0;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    transform: translate3d(0px, 34px, 0px) !important;
    left: 0 !important;
    top: 0 !important;
}

.btn:not(:disabled):not(.disabled) {
    cursor: pointer;
}

.dropdown-menu.dbt-dropdown-menu a {
    font-size: 12px;
    font-weight: 400;
    background: transparent;
    border: 0px;
    border-radius: 0px;
    color: var(--black);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.admin-add-user {
    margin-top: 0;
}


/* change password */


.change-ps-body {
    width: 100%;
    position: relative;
    overflow: auto;
    /* padding: 50px 100px; */
}



.mpb-sec-title h1 {
    font-size: 24px;
    font-family: 'Poppins-Bold';
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 12px;
}



.mpb-sec {
    background-color: var(--white);
    border-radius: 2px;
    box-shadow: rgb(149 157 165 / 20%) 0px 8px 24px;
    padding: 20px 50px;
}



/* select file */
.mbp-select-profile {
    width: 100%;
    position: relative;
    padding: 20px 0;
}

    .mbp-select-profile [type="file"] {
        height: 0;
        overflow: hidden;
        width: 0;
        position: absolute;
        left: 0;
        top: 0;
    }

        .mbp-select-profile [type="file"] + label {
            display: flex !important;
            justify-content: center;
            flex-direction: column;
            background: #efefef;
            border-radius: 5px;
            color: var(--black);
            cursor: pointer;
            font-size: inherit;
            font-weight: 500;
            outline: none;
            padding: 80px 50px;
            position: relative;
            transition: all 0.3s;
            vertical-align: middle;
            margin-bottom: 0;
        }

    .mbp-select-profile svg {
        height: 100px;
    }

    .mbp-select-profile span {
        text-align: center;
    }


/*  */

.mbp-right {
    width: 60%;
}

.mbp-details-form input {
    -webkit-appearance: none;
    width: 100%;
    height: auto;
    font-size: 12px;
    font-weight: 500;
    background: none;
    transition: all 0.15s ease;
    padding: 15px 10px;
    border-radius: 5px;
    border: none;
    box-shadow: rgb(149 157 165 / 10%) 0px 8px 24px;
    background-color: #efefef;
    border: 1px solid #cccccc;
}

.mbp-details-form.Alt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px 0;
}

    .mbp-details-form.Alt input {
        -webkit-appearance: none;
        width: 100%;
        height: auto;
        font-size: 12px;
        font-weight: 500;
        background: none;
        transition: all 0.15s ease;
        padding: 10px 10px;
        border-radius: 5px;
        border: none;
        box-shadow: rgb(149 157 165 / 10%) 0px 8px 24px;
        background-color: #efefef;
        border: 1px solid #cccccc;
        /*margin-left: 70%;*/
    }

span.labelAlt {
    font-size: 16px;
    width: 60%;
    /*text-align: center;*/
    font-weight: 500;
}


.mbp-details-form select {
    width: 100%;
    height: auto;
    font-size: 12px;
    font-weight: 500;
    background: none;
    transition: all 0.15s ease;
    padding: 15px 10px;
    border-radius: 5px;
    border: none;
    box-shadow: rgb(149 157 165 / 10%) 0px 8px 24px;
    background-color: #efefef;
    border: 1px solid #cccccc;
}


.mpb-sec-title h1 {
    font-size: 24px;
    font-family: 'Poppins-Bold';
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 12px;
}

.sf-right-row {
    align-items: center;
}

.mpb-sec-left {
    padding: 0px;
}

    .mpb-sec-left h6 {
        font-size: 22px;
        font-weight: 600;
        margin-bottom: 10px;
        color: var(--black);
    }

    .mpb-sec-left p {
        font-size: 14px;
        margin-bottom: 0px;
        color: #333;
    }

.details-form {
    position: relative;
    margin: auto;
    width: 100%;
    margin: 20px 0;
}

    .details-form.Alt {
        position: relative;
        margin: auto;
        width: 40%;
    }

.show-pass {
    position: absolute;
    top: 12px;
    right: 4%;
    font-size: 14px;
}

span.label {
    font-size: 12px;
    position: absolute;
    top: -9px;
    left: 15px;
    /* transform: translate(-715px, -17px); */
    /* background-color: white; */
    padding: 0 10px;
    width: auto;
    text-align: center;
    font-weight: 600;
}



.ps-required-fields {
    text-align: left;
    font-size: 12px;
    color: #818080;
    margin-top: 14px;
}


/*  */

.progress {
    height: 3px !important;
}

.show-pass {
    position: absolute;
    top: 12px;
    right: 4%;
    font-size: 14px;
}

.login-show-pass {
    top: 40px;
}

.progress-bar-danger {
    background-color: #e90f10;
}

.progress-bar-warning {
    background-color: #ffad00;
}

.progress-bar-success {
    background-color: #02b502;
}

.fa-eye {
    color: #022255;
    cursor: pointer;
}

.ex-account p a {
    color: #f6086e;
    text-decoration: underline;
}

.fa-circle {
    font-size: 6px;
}

.fa-check {
    color: #02b502;
}





/* user change ps model */

.user-change-ps-model .modal-title {
    font-weight: bold;
    color: var(--white);
}

.user-change-ps-model .modal-header button span {
    color: var(--white);
    text-shadow: none;
}

.user-change-ps-model .modal-header {
    background-color: var(--admin-main);
}

/* .user-change-ps-model .modal-dialog {
    max-width: 50%;
} */

.admin-or {
    width: 100%;
    text-align: center;
    position: relative;
}

    .admin-or h6 {
        background-color: var(--white);
        width: fit-content;
        text-align: center;
        position: relative;
        margin: auto;
        z-index: 11;
        padding: 0 5px;
    }

    .admin-or:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        transform: translate(0px, 9px);
        height: 1px;
        width: 100%;
        background-color: #e1dede;
    }

.temp-ps {
    width: 100%;
    position: relative;
}

    .temp-ps a {
        background: var(--admin-main);
        color: var(--white);
        border: 1px solid var(--admin-main);
        padding: 5px 10px;
        border-radius: 3px;
    }

.temp-ps-genrated {
    position: relative;
    border: 1px dashed #cccccc;
    padding: 20px;
    cursor: pointer;
}

    .temp-ps-genrated p.gen-ps-top {
        position: absolute;
        top: 0;
        left: 0;
        transform: translate(10px, -12px);
        width: fit-content;
        padding: 0 5px;
        background-color: var(--white);
        font-size: 12px;
        margin: 0;
    }

    .temp-ps-genrated p.gen-ps-bottom {
        display: none;
        position: absolute;
        bottom: 0;
        right: 0;
        transform: translate(-10px, 10px);
        width: fit-content;
        padding: 0 5px;
        background-color: var(--white);
        font-size: 12px;
        margin: 0;
        color: #347cb4;
        font-weight: bold;
    }

    .temp-ps-genrated:hover p.gen-ps-bottom {
        display: block;
    }


.temp-ps-genrated-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

    .temp-ps-genrated-inner h6 {
        margin: 0;
        font-size: 20px;
        font-weight: bold;
    }

    .temp-ps-genrated-inner i {
        color: #337ab7;
    }

.filter-area label.key-label {
    position: absolute;
    top: -20px;
    left: 0;
    color: var(--blue);
    font-size: 12px;
    padding: 10px 0;
    font-size: 12px;
    pointer-events: none;
    transition: .5s;
}

.filter-area label.template-body-label {
    position: relative !important;
    color: var(--blue);
    font-size: 12px;
    padding: 0;
    font-size: 12px;
    pointer-events: none;
    transition: .5s;
}

.place-text {
    margin-left: 23%;
    color: #303c49 !important;
    font-size: 9px !important;
}


.adminDetails-main {
    width: 100%;
    padding: 20px;
    border-radius: 5px;
}

.adminBody-title {
    width: 100%;
    position: relative;
    margin-bottom: 20px;
}

    .adminBody-title h1 {
        font-size: 28px;
        font-family: "Poppins-SemiBold";
    }

    .adminBody-title.altFlex {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 5px;
    }

        .adminBody-title.altFlex h1 {
            margin-bottom: 0;
        }

.adminDetails-inner {
    background-color: var(--white);
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    width: 100%;
    padding: 20px;
    border-radius: 5px;
}

.customeAvtar {
    width: 100%;
    margin-bottom: 30px;
    position: relative;
    height: 250px;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

    .customeAvtar img {
        height: 100%;
        width: auto;
        max-height: 100%;
    }

.customeDetails {
    width: 100%;
    position: relative;
    margin-bottom: 30px;
}

    .customeDetails p {
        font-size: 14px;
        margin-bottom: 10px;
        color: #647c96;
        margin-bottom: 8px;
    }

    .customeDetails h1 {
        font-size: 20px;
        font-family: "Poppins-SemiBold";
        margin: 0;
        margin-bottom: 0;
    }

.plan-details-left,
.plan-details-right {
    background-color: var(--white);
    box-shadow: rgb(149 157 165 / 20%) 0px 8px 24px;
    border-radius: 10px;
    width: 100%;
}

.planDetails-standard {
    height: 460px;
    overflow: auto;
}

.upgradeplan-title {
    width: 100%;
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: flex-start;
    /* padding: 0 0 20px 0; */
}

.plan-status {
    width: 100%;
}

    .plan-status h1 {
        font-size: 22px;
        font-family: "Poppins-SemiBold";
        margin: 0;
        margin-bottom: 10px;
    }

    .plan-status p {
        font-size: 14px;
        margin-bottom: 10px;
        color: #717171;
    }

.plans-details-left-bottom {
    width: 100%;
    position: relative;
    padding-bottom: 10px;
}

.plans-details-left-top {
    padding: 20px 20px 0px 20px;
}

.plans-details-left-bottom ul {
    padding: 0;
}

.plans-details-left-bottom li {
    margin: 10px 0;
}

    .plans-details-left-bottom li h6 {
        font-size: 12px;
        padding: 5px 30px;
        /*margin-top: 5px;*/
    }

.plan-detail-links {
    display: flex;
    gap: 10px;
    font-size: 16px;
    color: #717171;
    font-family: "Poppins-Medium";
    padding: 5px 30px;
}

    .plan-detail-links span svg {
        height: 22px;
        fill: #717171;
    }

.plan-status p span {
    font-weight: bold;
}

.plan-details-center {
    overflow: hidden auto !important;
}

.plan-details-right {
    padding: 20px;
}

.plan-price-table {
    width: 100%;
    position: relative;
    margin-top: 30px;
}

    .plan-price-table table {
        width: 100%;
        position: relative;
        border: 1px solid #e3e3e3;
        color: #767676;
        font-size: 14px;
    }

    .plan-price-table thead {
        background-color: #f5f5f5;
        padding: 20px;
    }

    .plan-price-table tr {
        border-bottom: 1px solid #e3e3e3;
        vertical-align: baseline;
    }

    .plan-price-table th,
    .plan-price-table td {
        padding: 10px;
    }

.billing-details {
    width: 100%;
    position: relative;
    border: 1px solid #e3e3e3;
    padding: 20px;
}

.plan-details-right h1 {
    font-size: 22px;
    font-family: "Poppins-SemiBold";
    margin: 0;
}

.plan-details-right-top {
    margin-top: 30px;
    width: 100%;
    position: relative;
}

    .plan-details-right-top h1 {
        font-size: 16px;
        color: var(--black);
        font-family: "Poppins-Medium";
        display: flex;
        gap: 8px;
        margin: 0;
    }

    .plan-details-right-top p {
        font-size: 14px;
        color: #717171;
        margin-top: 8px;
        margin-bottom: 0;
    }

    .plan-details-right-top a {
        font-size: 14px;
        margin-top: 8px;
        margin-bottom: 0;
    }

.manage-plans-sec {
    padding: 0;
    border: 1px solid #adadad;
    border-radius: 10px;
}

.invoice-table {
    font-weight: 400;
    /* border-collapse: separate; */
    border-spacing: 0px;
    color: rgb(30, 30, 30);
    width: 100%;
    font-size: 14px;
}

    .invoice-table tr {
        width: 100%;
        display: flex;
        align-items: center;
        background: #fff;
        padding: 10px 30px;
        border-radius: 5px;
        border: 0;
        padding: 10px 30px;
    }

    .invoice-table td, .invoice-table th {
        padding: 15px 0;
        width: 100%;
        border-bottom: none !important;
        border-top: none !important;
    }

    .invoice-table tr {
        border-bottom: 1px solid rgb(233, 233, 233);
        width: 100%;
        display: flex;
        align-items: center;
    }

.invoice-btn {
    display: flex;
    justify-content: center;
}

    .invoice-btn button {
        background-color: var(--red);
        border: none;
        color: var(--white);
        border-radius: 3px;
        height: 30px;
        width: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 2px;
    }

.plan-details-a {
    font-family: 'Poppins-Medium';
    color: var(--blue);
}

.invoice-table-head tr {
    background: #e9ecef;
}



.customeAvtar .without-profile {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgb(204, 204, 204);
    border-radius: 10px;
}

    .customeAvtar .without-profile i {
        font-size: 100px;
    }

.modal-content {
    width: 100%;
}

    .modal-content h1 {
        font-size: 28px;
        font-family: "Poppins-Bold";
        text-align: center;
        letter-spacing: .5px;
        margin-top: 30px;
    }

    .modal-content p {
        font-size: 18px;
        text-align: center;
    }

.modal-header.sign-delete-model-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #dee2e6;
    background: #b4eafd;
}

.modal-header {
    width: 100%;
    position: relative;
    display: table;
    border: none;
    margin-bottom: 30px;
}

.sign-delete-model-header {
    margin-bottom: 0 !important;
}

.modal-header.sign-delete-model-header p {
    margin: 0;
}

.sign-delete-model-header .close {
    position: absolute;
    right: 0;
    top: 0;
    width: 30px;
    height: 30px;
    background: var(--red);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    border-radius: 30px;
    z-index: 1;
    opacity: 1;
}

.signature-model-top {
    border-bottom: 1px solid #dee2e6;
    padding: 20px;
}

.signature-model-footer {
    justify-content: flex-start;
}

.halfWidthModal-dialog {
    width: 25%;
    max-width: 25%;
}




.model-inp {
    position: relative;
    margin: auto;
    width: 100%;
    margin-bottom: 15px;
}

    .model-inp input {
        width: 100%;
        padding: 8px 12px;
        font-size: 12px;
        font-weight: 500;
        border: 1px solid #cccccc;
        border-radius: 5px;
        color: #757575;
        transition: all 0.15s ease;
    }

.model-textbox {
    padding: 10px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #000 !important;
}

.model-inp textarea {
    width: 100%;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid #cccccc;
    border-radius: 10px;
    color: #757575;
    transition: all 0.15s ease;
    resize: none;
}

.model-inp select {
    width: 100%;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid #cccccc;
    border-radius: 5px;
    color: #757575;
    transition: all 0.15s ease;
}

    .model-inp select option {
        font-size: 12px;
        background-color: #f0f8ff;
        color: #000000;
        font-weight: 400;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

.alt-model-inp {
    display: flex;
    flex-direction: column;
}

label {
    font-size: 12px;
    color: #757575 !important;
    font-weight: 500;
}

.select-city-dd select {
    background-color: rgba(255, 255, 255, 0.9);
    width: 100%;
    padding: 5px;
    border: 1px solid #f2f2f2;
    border-radius: 2px;
    height: 3rem;
    /*display: none;*/
}

.select-city-dd .select-wrapper {
    position: relative;
}

.dropdown-content.select-dropdown {
    position: absolute;
    width: 100% !important;
    top: 36px !important;
    height: fit-content !important;
    max-height: 250px !important;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    background-color: #fff;
    display: none;
    opacity: 0;
    z-index: 999;
}

.select-city-dd .select-dropdown.dropdown-content li.selected {
    background-color: rgba(0, 0, 0, 0.03);
}

.select-city-dd .dropdown-content li {
    list-style-type: none;
    clear: both;
    color: #000;
    cursor: pointer;
    line-height: 1.3rem;
    width: 100%;
    text-align: left;
    text-transform: none;
    padding: 0 10px;
}

    .select-city-dd .dropdown-content li > a, .select-city-dd .dropdown-content li > span {
        font-size: 0.9rem;
        color: #4285f4;
        display: block;
        padding: 0.5rem 0;
    }


.select-city-dd .select-wrapper .caret {
    position: absolute;
    right: 0;
    top: 3px;
    bottom: 0;
    margin: 0;
    z-index: 0;
    fill: rgba(0, 0, 0, 0.87);
}

.select-city-dd .disabled, .select-city-dd :disabled {
    pointer-events: none !important;
}

.select-city-dd.dropdowncheckbox select {
    display: none;
}

.dropdowncheckbox .select-wrapper ul {
    background-color: #f0f8ff !important;
}

.queue-col-select {
    display: flex !important;
    align-items: center;
}


.requiredfield label {
    position: relative;
}

    .requiredfield label:after {
        content: "*";
        position: absolute;
        color: red;
        padding-left: 2px;
        font-size: 14px;
    }

.requiredfield span {
    color: red !important;
}

.cardNotes {
    width: 100%;
    position: relative;
    margin-top: 10px;
    display: flex;
    align-items: start;
    gap: 10px;
}

    .cardNotes p {
        font-size: 12px;
        font-family: 'Poppins-Ragular';
        text-align: left;
        color: red;
        margin: 0;
    }



.manage-profile-body {
    width: 100%;
    height: calc(100vh - 112px);
    position: relative;
    overflow: auto;
    background-color: #E9E9E9;
    /* padding: 50px 100px; */
    padding: 50px;
}

    .manage-profile-body::-webkit-scrollbar {
        display: none;
    }

.mpb-sec {
    background-color: var(--white);
    border-radius: 2px;
    box-shadow: rgb(149 157 165 / 20%) 0px 8px 24px;
    padding: 41px 41px;
}

.orderAmount-content {
    width: 100%;
    position: relative;
}

.model-inp {
    position: relative;
    margin: auto;
    width: 100%;
    margin-bottom: 15px;
}

    .model-inp input {
        width: 100%;
        padding: 8px 12px;
        font-size: 12px;
        font-weight: 500;
        border: 1px solid #cccccc;
        border-radius: 5px;
        color: #757575;
        transition: all 0.15s ease;
    }

    .model-inp textarea {
        width: 100%;
        padding: 8px 12px;
        font-size: 13px;
        font-weight: 500;
        border: 1px solid #cccccc;
        border-radius: 10px;
        color: #757575;
        transition: all 0.15s ease;
        resize: none;
    }

    .model-inp select {
        width: 100%;
        padding: 8px 12px;
        font-size: 12px;
        font-weight: 500;
        border: 1px solid #cccccc;
        border-radius: 5px;
        color: #757575;
        transition: all 0.15s ease;
    }

        .model-inp select option {
            font-size: 12px;
            background-color: #f0f8ff;
            color: #000000;
            font-weight: 400;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

.alt-model-inp {
    display: flex;
    flex-direction: column;
}

label {
    font-size: 12px;
    color: #757575 !important;
    font-weight: 500;
}

.select-city-dd select {
    background-color: rgba(255, 255, 255, 0.9);
    width: 100%;
    padding: 5px;
    border: 1px solid #f2f2f2;
    border-radius: 2px;
    height: 3rem;
    /*display: none;*/
}

.select-city-dd .select-wrapper {
    position: relative;
}

.dropdown-content.select-dropdown {
    position: absolute;
    width: 100% !important;
    top: 36px !important;
    height: fit-content !important;
    max-height: 250px !important;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    background-color: #fff;
    display: none;
    opacity: 0;
    z-index: 999;
}

.select-city-dd .select-dropdown.dropdown-content li.selected {
    background-color: rgba(0, 0, 0, 0.03);
}

.select-city-dd .dropdown-content li {
    list-style-type: none;
    clear: both;
    color: #000;
    cursor: pointer;
    line-height: 1.3rem;
    width: 100%;
    text-align: left;
    text-transform: none;
    padding: 0 10px;
}

    .select-city-dd .dropdown-content li > a, .select-city-dd .dropdown-content li > span {
        font-size: 0.9rem;
        color: #4285f4;
        display: block;
        padding: 0.5rem 0;
    }


.select-city-dd .select-wrapper .caret {
    position: absolute;
    right: 0;
    top: 3px;
    bottom: 0;
    margin: 0;
    z-index: 0;
    fill: rgba(0, 0, 0, 0.87);
}

.select-city-dd .disabled, .select-city-dd :disabled {
    pointer-events: none !important;
}

.select-city-dd.dropdowncheckbox select {
    display: none;
}

.dropdowncheckbox .select-wrapper ul {
    background-color: #f0f8ff !important;
}

.queue-col-select {
    display: flex !important;
    align-items: center;
}


.requiredfield label {
    position: relative;
}

    .requiredfield label:after {
        content: "*";
        position: absolute;
        color: red;
        padding-left: 2px;
        font-size: 14px;
    }

.requiredfield span {
    color: red !important;
}

.card-elements {
    width: 100%;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid #cccccc;
    border-radius: 5px;
    color: #757575;
    transition: all 0.15s ease;
}


.multiBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

span.mandatory-field-symbol {
    color: var(--red);
}

.admin-copy {
    height: 20px;
    margin-bottom: 50%;
}



/* preloader */
.no-scroll {
    overflow: hidden;
}

.preloader {
    width: 100%;
    height: 100%;
    position: fixed;
    background: #fff;
    z-index: 11111;
    text-align: center;
    opacity: .80;
}

.preloader_inner {
    position: absolute;
    left: 45%;
    top: 35%;
    text-align: center;
}

.loader {
    border: 3px solid #d6336c;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    border-left-color: transparent;
    border-right-color: transparent;
    animation: rotate 2s cubic-bezier(0.26, 1.36, 0.74, -0.29) infinite;
}

.loader_level1 {
    border: 3px solid #d6336c;
    width: 160px;
    position: absolute;
    top: 30px;
    left: 30px;
    height: 160px;
    border-radius: 50%;
    border-left-color: transparent;
    border-right-color: transparent;
    animation: rotate 2s cubic-bezier(0.26, 1.36, 0.74, -0.29) infinite;
}

.loader_level2 {
    border: 3px solid #3bc9db;
    width: 180px;
    height: 180px;
    position: absolute;
    top: 20px;
    border-left-color: transparent;
    border-right-color: transparent;
    animation: rotate2 2s cubic-bezier(0.26, 1.36, 0.74, -0.29) infinite;
    left: 20px;
}

.loader_level3 {
    border: 3px solid #d6336c;
    width: 200px;
    height: 200px;
    position: absolute;
    top: 10px;
    left: 10px;
    border-left-color: transparent;
    border-right-color: transparent;
    animation: rotate 2s cubic-bezier(0.26, 1.36, 0.74, -0.29) infinite;
}

.loader_level4 {
    border: 3px solid #3bc9db;
    width: 220px;
    height: 220px;
    position: absolute;
    top: 0;
    left: 0;
    border-left-color: transparent;
    border-right-color: transparent;
    animation: rotate2 2s cubic-bezier(0.26, 1.36, 0.74, -0.29) infinite;
}

@keyframes rotate {
    0% {
        transform: rotateZ(-360deg);
    }

    100% {
        transform: rotateZ(0deg);
    }
}

@keyframes rotate2 {
    0% {
        transform: rotateZ(360deg);
    }

    100% {
        transform: rotateZ(0deg);
    }
}

.preloader-text {
    color: #767676;
    font-size: 20px;
    position: absolute;
    top: 0;
    left: 0;
    font-family: "Pacifico-Regular";
    transform: translate(70px, 90px);
}

.add-newCard {
    width: 100%;
    position: relative;
    margin: 10px 0;
}


.savedCard {
    position: relative;
    background: #fff;
    padding: 20px;
    margin: 10px 0;
    /*width: 400px;*/
    height: 230px;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* margin-bottom: 30px; */
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}

.savedCards-top {
    display: flex;
    align-items: self-start;
    justify-content: space-between;
    width: 100%;
}

    .savedCards-top h1 {
        font-size: 18px;
        font-family: 'Poppins-Bold';
        margin: 0;
    }

.saveCard-img {
    height: 22px;
}

    .saveCard-img img {
        max-height: 100%;
        width: auto;
    }

.savedCards-number {
    margin: 22px 0;
    width: 100%;
    position: relative;
}

    .savedCards-number p {
        font-size: 12px;
        font-family: 'Poppins-Medium';
        color: #757575;
        margin: 0;
    }

    .savedCards-number h1 {
        font-size: 16px;
        margin: 0;
        color: #000;
        font-family: 'Poppins-Bold';
        letter-spacing: 3px;
    }

.defaultCard {
    position: absolute;
    top: 0;
    left: 0;
    background: #404040;
    padding: 5px 10px;
    border-radius: 0 0 5px 0;
}

    .defaultCard h2 {
        font-size: 18px;
        margin: 0;
        font-family: 'Poppins-Bold';
        background-image: linear-gradient( to right, #a07f0d 0, #e7be2f 28%, #dcbf59 50%, #e7be2f 70%, #a07f0d 100% );
        color: transparent;
        -webkit-background-clip: text;
    }

.savedCards-bottom {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .savedCards-bottom p {
        font-size: 10px;
        font-family: 'Poppins-Medium';
        color: #757575;
        margin: 0;
    }

    .savedCards-bottom h1 {
        font-size: 14px;
        margin: 0;
        color: #000;
        font-family: 'Poppins-Bold';
    }

.savedCards-btns {
    width: 100%;
    height: 100%;
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    transition: .5s ease;
    background: #0000005c;
    z-index: 1;
    transition: 1s ease;
    backdrop-filter: blur(3px);
}

.savedCard:hover .savedCards-btns {
    display: flex;
    align-items: center;
    justify-content: center;
    display: flex;
    transition: 1s ease;
}


.add-newCard button {
    position: relative;
    border: 1px dashed #333;
    background: #fff;
    height: 220px;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}


.add-newCard i {
    font-size: 50px;
    color: #757575;
}

.savedCards-btnsInner {
    display: flex;
    gap: 5px;
}

    .savedCards-btnsInner button {
        border: 0;
        height: 30px;
        width: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
        color: #fff;
    }

        .savedCards-btnsInner button.deleteCards {
            background: #dc3545;
        }

        .savedCards-btnsInner button.editCards {
            background: #0DD17F;
        }

/**/
.saveCards-main .bgColor1 {
    background: #FFEFBA;
    background: -webkit-linear-gradient(to right, #FFFFFF, #FFEFBA);
    background: linear-gradient(to right, #FFFFFF, #FFEFBA);
}

.saveCards-main .bgColor2 {
    background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
}

.saveCards-main .bgColor3 {
    background-image: radial-gradient(circle 248px at center, #16d9e3 0%, #30c7ec 47%, #46aef7 100%);
}

.saveCards-main .bgColor4 {
    background: #F2994A; /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #F2C94C, #F2994A); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #F2C94C, #F2994A); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.saveCards-main .bgColor5 {
    background: #ff6e7f; /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #bfe9ff, #ff6e7f); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #bfe9ff, #ff6e7f); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}


.orderAmount-img {
    width: 100%;
    position: relative;
    display: flex;
    flex-flow: revert;
    gap: 16px;
    margin: 22px 0;
    flex-wrap: wrap;
}

    .orderAmount-img img {
        width: 55px;
        flex: 0 1;
    }


.label {
    font-size: 12px;
    color: #757575 !important;
    font-weight: 500;
}


.modal-card-dialog {
    /*margin: auto;*/
    width: 40% !important;
    max-width: 40% !important;
    max-height: calc(100vh - 162px);
    transform: translate(0,0px) !important;
}


.savedCard-expiry-row {
    width: 100%;
    position: relative;
    display: flex;
}


.adminAltWhite {
    background-color: var(--white) !important;
    padding: 30px 0;
}

.adminSidebarAlt {
    border-right: 1px solid #dfdfdf !important;
}

.listTopMain {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.couponCardMain {
    margin: 15px 0;
}

.filterMain {
    display: flex;
    gap: 15px;
    align-items: center;
    width: 60%;
}

.filterIconMain {
    background-color: #E5F8FF;
    border-radius: 4px;
    padding: 8px 14px;
}

    .filterIconMain i {
        font-size: 18px;
        color: #0B81FE;
    }

.filterTxtMain {
    width: 30%;
}

    .filterTxtMain input[type="text"] {
        font-size: 13px;
        border-radius: 4px;
        padding: 8px 12px;
        font-weight: 500;
        border: 1px solid #cccccc;
        color: #757575;
        width: 100%;
    }

.filterDropdownMain {
    width: 30%;
}

    .filterDropdownMain select {
        font-size: 13px;
        border-radius: 4px;
        padding: 8px 12px;
        font-weight: 500;
        border: 1px solid #cccccc;
        color: #757575;
        width: 100%;
    }

.filterBtnsMain {
    display: flex;
    gap: 10px;
    align-items: center;
}

.filterSearch button {
    background-color: #3CC7D2;
    border: 1px solid #3CC7D2;
    padding: 6px 14px;
}

    .filterSearch button i {
        color: var(--white);
        font-size: 17px;
    }

.filterCancel button {
    background-color: #DC3545;
    border: 1px solid #DC3545;
    padding: 6px 14px;
}

    .filterCancel button i {
        color: var(--white);
        font-size: 18px;
    }

.generateMain button {
    border-radius: 4px;
    border-color: transparent;
    border-style: solid;
    border-width: 1px;
    cursor: pointer;
    letter-spacing: 0.66px;
    transition-duration: 0.1s;
    transition-timing-function: cubic-bezier(0.33, 0, 0.67, 1);
    vertical-align: middle;
    background-color: #0DD17F;
    color: var(--white);
    font-size: 13px;
    font-weight: bold;
    padding: 8px 15px;
}

.cardListMain {
    padding: 35px 0;
}

.couponCardInner {
    display: flex;
    align-items: center;
    height: 210px;
    position: relative;
}

.couponCardLeft {
    width: 50px;
    height: 100%;
    position: relative;
    vertical-align: middle;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px 0 0 10px;
}

.couponCardInner .bgLeft1 {
    background: linear-gradient(50deg, #0EA1D7, #47C4F2);
    background: -webkit-linear-gradient(50deg, #0EA1D7, #47C4F2);
}

.couponCardInner .bgLeft2 {
    background: linear-gradient(50deg, #4A55A8, #897CE1);
    background: -webkit-linear-gradient(50deg, #4A55A8, #897CE1);
}

.couponCardInner .bgLeft3 {
    background: linear-gradient(50deg, #E54C85, #F9707E);
    background: -webkit-linear-gradient(50deg, #E54C85, #F9707E);
}

.couponCardInner .bgLeft4 {
    background: linear-gradient(50deg, #079980, #63EFA0);
    background: -webkit-linear-gradient(50deg, #079980, #63EFA0);
}

.couponCardInner .bgLeft5 {
    background: linear-gradient(50deg, #D86314, #F8A757);
    background: -webkit-linear-gradient(50deg, #D86314, #F8A757);
}

.bgLineImage {
    position: absolute;
    top: 10%;
}

.verticalText {
    transform: rotate(180deg);
    white-space: nowrap;
    writing-mode: vertical-rl;
    font-size: 22px;
    font-weight: 600;
    color: var(--white);
}

.couponCardRight {
    border: 1px dashed #cccccc;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    width: 100%;
    padding: 15px 20px;
    border-left: none;
    border-radius: 0 10px 10px 0;
}

.couponTitle h2 {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 12px;
    width: 92%;
}

.couponCodeStatus {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed #cccccc;
    padding-bottom: 10px;
}

.verticalText {
    font-size: 18px;
}

.couponCodeInner h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 0;
}

.couponStatusInner p {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 0;
    display: flex;
    align-items: baseline;
    gap: 5px;
}

    .couponStatusInner p span {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        display: inline-block;
    }

.couponStatusActive p {
    color: #1A9F53;
}

    .couponStatusActive p span {
        background-color: #1A9F53 !important;
    }

.couponStatusDraft p {
    color: #eb7926;
}

    .couponStatusDraft p span {
        background-color: #eb7926 !important;
    }

.couponStatusExpired p {
    color: #DC3545;
}

    .couponStatusExpired p span {
        background-color: #DC3545 !important;
    }

.couponDesc {
    padding-top: 6px;
}

    .couponDesc p {
        font-size: 15px;
        font-weight: 500;
        margin-bottom: 0;
        color: #9F9F9F;
    }

.couponBottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

.couponBottomLeft {
    display: flex;
    gap: 5px;
    align-items: center;
}

    .couponBottomLeft h6 {
        font-size: 15px;
        font-weight: 600;
        margin-bottom: 0;
    }

    .couponBottomLeft p {
        font-size: 15px;
        font-weight: 600;
        margin-bottom: 0;
        color: #91191F;
    }

.couponBottomRight {
    display: flex;
    gap: 6px;
    align-items: center;
}

    .couponBottomRight span {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 0;
    }

.redemption {
    display: flex;
    align-items: center;
}

    .redemption .mask {
        width: 32px;
        height: 32px;
        overflow: hidden;
        border-radius: 50%;
        border: 3px solid var(--white);
    }

        .redemption .mask:nth-child(2) {
            z-index: 10;
            margin-left: -15px;
        }

.mask img {
    max-width: 100%;
    height: auto;
}

.couponContext {
    padding: 6px 15px;
    border-radius: 0 10px 0 10px;
    background-color: #32B9EB;
    color: var(--white);
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
}

    .couponContext i {
        font-size: 17px;
    }

.contextContent {
    display: none;
    position: absolute;
    top: 0px;
    right: 3px;
    margin-top: 40px;
    background-color: #f9f9f9;
    min-width: max-content;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    border-radius: 5px;
}

    .contextContent a {
        display: block;
        padding: 6px 5px;
    }

    .contextContent.show {
        display: block;
    }

.admin-main-bordered {
    border: 1px solid #BFEEFF;
    border-radius: 10px;
    padding-bottom: 15px;
}

h1.filterTitle {
    font-size: 16px;
    font-weight: 600;
    background: #E5F8FF;
    padding: 15px 20px;
    color: #13A4D9;
    text-transform: uppercase;
    border-radius: 10px 10px 0 0;
}

.filterMainArea {
    padding: 10px 20px;
}

.filter-area select {
    width: 100%;
    padding: 10px 0;
    font-size: 14px;
    color: var(--admin-main);
    margin-bottom: 30px;
    border: none;
    border-bottom: 1px solid var(--admin-main);
    outline: none;
    background: transparent;
}

.couponGenerateBottom {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    /* justify-content: space-between; */
    align-items: baseline;
    height: 100%;
    margin: 10px 0;
}

    .couponGenerateBottom svg {
        height: 12px;
        width: 12px;
    }

        .couponGenerateBottom svg path {
            fill: #ff3232;
        }

    .couponGenerateBottom span {
        font-size: 15px;
        font-weight: 500;
        color: #ff3232;
    }

.couponTypeMain {
    display: flex;
    gap: 25px;
    align-items: center;
    /* height: 30%; */
    margin: 22px 0;
}

.couponTypeInner {
    width: 16rem;
    position: relative;
    display: flex;
    gap: 5px;
    padding: 0;
    background: #d0f2ff;
    line-height: 3rem;
    border-radius: 100px;
    align-items: center;
    z-index: 1;
}

    .couponTypeInner input {
        visibility: hidden;
        position: absolute;
        top: 0;
    }

    .couponTypeInner label {
        font-size: 15px;
        font-weight: 500;
        margin-bottom: 0;
        width: 50%;
        padding: 0;
        margin: 0;
        text-align: center;
        cursor: pointer;
        color: var(--blue);
    }

.switch-wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    padding: 5px 6px;
    z-index: 3;
    transition: transform .5s cubic-bezier(.77, 0, .175, 1);
}

.CouponSwitch {
    border-radius: 100px;
    background: var(--blue);
    height: 100%;
    z-index: 1;
    color: var(--white);
}

    .CouponSwitch div {
        font-size: 15px;
        font-weight: 500;
        width: 100%;
        text-align: center;
        opacity: 0;
        display: block;
        color: var(--white);
        transition: opacity .2s cubic-bezier(.77, 0, .175, 1) .125s;
        will-change: opacity;
        position: absolute;
        top: 0;
        left: 0;
    }

.couponTypeInner input:nth-of-type(1):checked ~ .switch-wrapper {
    transform: translateX(0%);
}

.couponTypeInner input:nth-of-type(2):checked ~ .switch-wrapper {
    transform: translateX(100%);
}

.couponTypeInner input:nth-of-type(1):checked ~ .switch-wrapper .CouponSwitch div:nth-of-type(1) {
    opacity: 1;
}

.couponTypeInner input:nth-of-type(2):checked ~ .switch-wrapper .CouponSwitch div:nth-of-type(2) {
    opacity: 1;
}


.generate-coupon {
    width: max-content !important;
    padding: 2px 7px !important;
    position: absolute;
    right: 5px;
}

    .generate-coupon i {
        font-size: 13px;
    }

.generateBtnMain {
    margin: 30px 0 10px 0;
    text-align: center;
}

.filterAreaHide, .couponGenerateBottom {
    display: none;
}

    .filterAreaHide.active, .couponGenerateBottom.active {
        display: block;
    }

.emptyCoupons {
    min-height: 60vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .emptyCoupons h1 {
        font-size: 26px;
        font-weight: 600;
        color: #303c49;
    }


.checkboxDowngradeCoupon {
    margin: 20px 5px 15px 5px;
    display: flex;
    gap: 10px;
    align-items: center;
}

.checkboxDowngradeCouponLabel {
    margin-bottom: 0;
    font-size: 15px;
}

.checkboxDowngradeCoupon input[type="checkbox"] {
    width: 15px;
    height: 15px;
}


/* Upgrade Downgrade Plan*/


.signature-page-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}


.upgrade-plan-section {
    width: 100%;
    position: relative;
}

.upgradeplan-inner {
    width: 100%;
    height: 700px;
    position: relative;
    background-color: var(--white);
    border-radius: 10px;
    box-shadow: rgb(149 157 165 / 20%) 0px 8px 24px;
    padding: 25px 25px;
    margin: 10px 0px 50px 0;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.upgradeplan-title {
    width: 100%;
}

.upgradeplan-title {
    width: 100%;
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: flex-start;
    /*padding: 0 0 20px 0;*/
}

.upgradeplan-title-plan {
    text-align: center;
    border-bottom: 1px solid lightgray;
    padding: 10px 0;
}

.upgradeplan-title-content h1 {
    font-size: 28px;
    font-family: "Poppins-SemiBold";
    margin: 0;
}

.upgradeplan-title-content p {
    font-size: 14px;
    font-family: "Poppins-medium";
    margin: 0;
    color: gray;
}

.upgradeplan-title img {
    width: 40px;
}



.upgradeplan-content {
    width: 100%;
    margin-top: 20px;
    /* height: 180px; */
    flex-grow: 1;
}

    .upgradeplan-content p {
        font-size: 14px;
        color: #474747;
    }


    .upgradeplan-content .pricing-ul .pricing-li {
        list-style-type: disc !important;
        margin: 10px 0;
        font-size: 14px;
    }

    .upgradeplan-content .pricing-ul {
        padding-left: 30px;
    }

.pricing-amount {
    margin: 30px;
    flex-grow: 0;
}

    .pricing-amount h2 {
        color: #0756ee;
        display: flex;
        gap: 5px;
        flex-direction: column;
        font-family: "Poppins-SemiBold";
        text-align: center;
    }

h2.pricing-price {
    position: relative;
    font-size: 42px;
    width: fit-content;
    margin: auto;
}

.pricing-amount-free h2 {
    color: #000000;
    display: flex;
    gap: 5px;
    flex-direction: column;
    font-family: "Poppins-SemiBold";
    text-align: center;
    font-size: 25px;
}

h2.pricing-price:before {
    content: '\f155';
    font-family: FontAwesome;
    position: absolute;
    left: -19px;
    font-size: 24px;
    /* font-weight: 700; */
    top: -4px;
}

.pricing-amount span {
    font-size: 16px;
    color: #757575;
    width: 100%;
    display: block;
    text-align: center;
}


.sub-type {
    margin: 20px 0;
}

    .sub-type label {
        color: #000000;
        font-weight: 600;
        font-size: 15px;
    }

    .sub-type select {
        font-size: 15px;
    }


.manage-plan-body {
    background-color: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}


/**********************************************************************************************************************/


.orderAmount-main {
    position: relative;
    width: 100%;
    background: #fff;
    padding: 15px;
    border-radius: 10px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    height: 100%;
    overflow: auto;
}

.orderAmount-mainAlt {
    height: 160px;
}

.orderAmount-top {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
}

    .orderAmount-top h5 {
        font-size: 20px;
        font-weight: 700;
        color: #383737;
        margin: 0;
    }

.orderAmount-content {
    width: 100%;
    position: relative;
}

.amount-text {
    background-color: #32b9eb;
    padding: 5px 10px;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    border-radius: 5px;
}

    .amount-text span {
        font-size: 18px;
        font-weight: 700;
        color: #fff;
    }

.usermonthsText {
    font-size: 14px;
    font-weight: 600;
}

.applyCoupon .model-inp {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    margin-bottom: 10px;
}

.applyCoupon p {
    font-size: 12px;
    font-family: "Poppins-Medium";
    text-align: left;
    color: #0dd17f;
    margin: 0;
}

.applyCoupon-btn {
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 5px;
    color: var(--white);
    border: 0;
    background-color: #0DD17F;
    transition: all 0.15s ease;
}

.removeCoupon-btn {
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 5px;
    color: var(--white);
    border: 0;
    transition: all 0.15s ease;
    background-color: red;
}

.invalidCoupon {
    color: red !important;
}

.orderAmount-img {
    width: 100%;
    position: relative;
    display: flex;
    flex-flow: revert;
    gap: 16px;
    margin: 22px 0;
    flex-wrap: wrap;
}

    .orderAmount-img img {
        width: 55px;
        flex: 0 1;
    }

.orderAmount-type {
    width: 100%;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .orderAmount-type h6 {
        font-size: 14px;
        margin: 0;
        color: #757575;
    }

        .orderAmount-type h6 span {
            font-weight: 600;
            color: #000;
        }

    .orderAmount-type a {
        color: #32b9eb;
        font-family: 'Poppins-Medium';
    }

.arCall-btn {
    position: fixed;
    width: 50px;
    height: 50px;
    bottom: 60px;
    right: 40px;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    box-shadow: 2px 2px 3px #999;
    transition: 0.2s ease-in;
    z-index: 2;
    background-color: #0b81fe;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .arCall-btn svg {
        fill: #fff;
        height: 22px;
    }

.orderAmount-topRight {
    width: auto;
}

.amountLegend {
    width: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: end;
}

    .amountLegend del {
        font-size: 14px;
        font-family: "Poppins-SemiBold";
    }

.orderAmount-topRight p {
    font-size: 14px;
    font-family: "Poppins-Medium";
    text-align: right;
    color: #0dd17f;
}

    .orderAmount-topRight p span {
        font-size: 14px;
        font-family: "Poppins-Medium";
        text-align: right;
        color: #0dd17f;
    }

.paymentStatus {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 5px;
    align-items: center;
    margin-bottom: 12px;
}

    .paymentStatus i {
        font-size: 70px;
        color: #0dd17f;
    }

    .paymentStatus h1 {
        font-size: 26px;
        margin: 0;
        color: #0dd17f;
        margin-top: 5px;
        font-family: 'Poppins-Medium';
    }

    .paymentStatus h6 {
        margin: 0;
        font-size: 18px;
        font-family: 'Poppins-Medium';
        color: #4c4c4c;
        text-align: center;
        margin-top: 10px;
        line-height: 1.4;
        width: 90%;
    }


/*************************************************************************************************************************************/
.workspaceMain {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .workspaceMain h4 {
        font-size: 22px;
        color: #000;
        font-family: 'Poppins-SemiBold';
        margin: 0;
    }

    .workspaceMain p {
        font-size: 14px;
        margin: 0;
        color: #757575;
        text-align: left;
    }

.downgradeModal-footer {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
}

    .downgradeModal-footer button {
        font-size: 14px;
    }

.downgradeApplicable {
    font-size: 13px;
    color: #0756ee;
}

.planEndText {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

    .planEndText span {
        color: red;
        font-size: 11px;
    }


.radio-main {
    display: flex;
    gap: 20px;
    align-items: center;
}

.radio-inner {
    display: flex;
    gap: 6px;
    align-items: center;
}

    .radio-inner label {
        margin-bottom: 0;
        font-size: 14px;
    }

.buyLicenceTop p {
    font-size: 15px;
    text-align: right;
}

.buyLicenceTop .licenceDiscountText {
    background-color: #ceffef;
    padding: 3px 10px;
    color: #14ab46;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
}

.detailTitleButton {
    background-color: var(--red);
    border: none;
    color: var(--white);
    border-radius: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px 10px;
    transition: 0.1s all linear;
}

    .detailTitleButton:hover {
        color: var(--white);
        background-color: #0e65d1;
    }

.btn-gridEdit {
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-gridDelete {
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-gridEdit svg {
    height: 16px;
    width: 16px;
}

.btn-gridDelete svg {
    height: 16px;
    width: 16px;
}

.workspaceIconsMainDiv {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ===================================== */
.modal-fullwidth-dialog {
    width: 60%;
    max-width: 60%;
}

.companyCardMain {
    background-color: #ffffff;
    padding: 18px 20px;
    /* margin: 10px 0; */
    border-radius: 15px;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.1s linear;
    position: relative;
    border: 1px solid #ededed;
    margin-bottom: 30px;
}

.companyAddCardMain {
    background-color: #f4f4f4;
    justify-content: center;
    cursor: pointer;
}

.companyCardInner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

    .companyCardInner svg {
        height: auto;
        width: 45px;
    }

        .companyCardInner svg path {
            fill: #cbcbcb;
        }

    .companyCardInner h5 {
        font-size: 16px;
        color: #b2b2b2;
    }



.companyContextMain {
    position: absolute;
    top: 16px;
    right: 13px;
    cursor: pointer;
}
.companyContext {
    padding: 5px 13px;
    border-radius: 6px;
    background-color: #efefef;
    color: var(--white);
    /*position: absolute;
    top: 16px;
    right: 13px;
    cursor: pointer;*/
}

    .companyContext i {
        font-size: 16px;
        color: #ababab;
    }

.companyContextDropdown {
    top: 12px;
    right: 7px;
}

.companyAddressMain {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 14px;
    color: #444;
    padding: 0 0 15px 0;
    /*border-bottom: 1px solid #ededed;*/
}

    .companyAddressMain .companyName {
        font-weight: 600;
    }

.companyNumbers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    padding: 13px 0 0 0;
    border-top: 1px solid #f2f2f2;
}

.companyNumberInner {
    display: flex;
    gap: 3px;
    align-items: center;
}

    .companyNumberInner span {
        font-size: 12px;
        color: #212529;
        font-weight: 600;
    }

#content.adminMainAlt {
    overflow-y: hidden;
}

/* ====================lined-textfiled================= */
.input-lined input {
    width: 100%;
    padding: 6px 10px;
    font-size: 14px;
    color: var(--admin-main);
    margin-bottom: 10px;
    border: 1px solid #e4e4e4;
    border-radius: 5px;
    outline: none;
    background: #fff;
}

.input-lined select {
    width: 100%;
    padding: 8px 10px;
    font-size: 14px;
    color: var(--admin-main);
    margin-bottom: 10px;
    border: 1px solid #e4e4e4;
    border-radius: 3px;
    outline: none;
    background: #fff;
}

.input-lined label {
    color: #757575;
    font-size: 12px;
}

.input-lined textarea {
    width: 100%;
    padding: 6px 10px;
    font-size: 14px;
    color: var(--admin-main);
    margin-bottom: 10px;
    border: 1px solid #e4e4e4;
    border-radius: 5px;
    outline: none;
    background: #fff;
}

.taxationSubFieldMain {
    padding: 14px 20px 14px 35px;
    border-radius: 14px;
    background-color: #f6f6f6;
    position: relative;
    margin-bottom: 20px;
}

.taxationSubFieldInner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.taxationSubTextfield {
    display: flex;
    align-items: center;
    gap: 15px;
}

.subTextfieldDelete span {
    background-color: #ffcccc;
    padding: 10px;
    border-radius: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.subTextfieldDelete i {
    color: #eb5959;
}

.subfieldDragable {
    position: absolute;
    top: 50%;
    left: -10px;
    transform: translate(0%, -50%);
}

.dragableThumb {
    background-color: #32b9eb;
    padding: 9px 9px;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: grab;
}

    .dragableThumb i {
        color: #ffffff;
        font-size: 16px;
    }

.addTaxationSubfield {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 0 10px 0;
}

    .addTaxationSubfield::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 20px;
        width: 42%;
        transform: translate(0px, -50%);
        margin: auto;
        border-radius: 20px;
        height: 2px;
        background-color: #ededed;
    }

    .addTaxationSubfield::after {
        content: '';
        position: absolute;
        top: 50%;
        right: 20px;
        width: 42%;
        transform: translate(0px, -50%);
        margin: auto;
        border-radius: 20px;
        height: 2px;
        background-color: #ededed;
    }

.addEmailSubfield {
    margin: 15px 0 15px 0;
}

    .addEmailSubfield::before {
        width: 40%;
    }

    .addEmailSubfield::after {
        width: 40%;
    }


.addMore-btn {
    background: var(--blue);
    color: #fff;
    border-color: var(--blue);
    /* width: 200px; */
    padding: 8px 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

    .addMore-btn:hover {
        background: var(--blue);
        color: #fff;
        border-color: var(--blue);
    }

    .addMore-btn i {
        font-size: 13px;
    }

fieldset {
    border: 1px solid #e2e2e2;
    padding: 15px 20px;
    border-radius: 10px;
}

    fieldset legend {
        width: fit-content;
        padding: 4px 10px;
        font-size: 13px;
        border-radius: 4px;
        font-weight: 600;
        background-color: #32b9eb;
        color: #ffffff;
    }

.filter-area .filterAreaLabel {
    top: -30px;
}
.filter-area .filterAreaHeader {
    font-size: 14px;
    color: #444;
    padding: 10px 10px;
    background-color: #f2f2f2;
    border-radius: 8px;
    margin-top: 30px;
}

.planAmountTextMain {
    display: flex;
    background-color: #32b9eb;
    padding: 5px 10px;
    color: #fff;
    border-radius: 5px;
    align-items: baseline;
    gap: 5px;
}
.planAmountTextPrice {
    font-size: 18px;
    font-weight: 700;
    gap: 5px;
    align-items: center;
    display: flex;
}
.planUserMonths {
    font-size: 14px;
    font-weight: 500;
}


.adminDashBody {
    padding: 10px 30px 20px 30px;
}

.dashStatesTitle {
    padding: 15px 0;
}

    .dashStatesTitle h6 {
        font-size: 16px;
        color: var(--admin-main);
        font-weight: 600;
        margin: 0;
    }

.customerStateInner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 16px;
}

.customerStateCard {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100px;
    background-color: var(--white);
    width: 100%;
    padding: 10px 25px;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s linear;
}

    .customerStateCard:hover {
        background-color: var(--admin-main);
    }

        .customerStateCard:hover .customerStateContent h5 {
            color: var(--white);
        }

        .customerStateCard:hover .customerStateContent h6 {
            color: var(--white);
        }

        .customerStateCard:hover .customerStateIcon span {
            background-color: var(--white);
        }

.customerStateContent h5 {
    font-size: 27px;
    color: var(--admin-main);
    font-weight: 600;
    margin-bottom: 3px;
}

.customerStateContent h6 {
    font-size: 14px;
    color: var(--grey);
    font-weight: 500;
    margin-bottom: 0;
}

.customerStateIcon span {
    border-radius: 8px;
    padding: 11px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #3f3f3f1c;
}

    .customerStateIcon span i {
        font-size: 20px;
        color: var(--admin-main);
    }

.dashStatesSection {
    margin-top: 10px;
}

.dashCardInner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 15px;
    row-gap: 15px;
}

.dashCardBody {
    /* height: 200px; */
    background-color: var(--white);
    width: 100%;
    padding: 15px 15px;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s linear;
    position: relative;
}

    .dashCardBody:hover {
        background-color: var(--admin-main);
    }

        .dashCardBody:hover .dashCardBodyMiddle h5 {
            color: var(--white);
        }

        .dashCardBody:hover .dashCardBodyMiddle h6 {
            color: var(--white);
        }

        .dashCardBody:hover .dashCardBodyTop span {
            background-color: #ffffff33;
            color: var(--white);
        }

.dashCardBodyTop {
    position: absolute;
    right: 15px;
    top: 15px;
}

    .dashCardBodyTop span {
        background-color: #3f3f3f1c;
        font-size: 12px;
        color: var(--admin-main);
        font-weight: 600;
        margin-bottom: 0;
        padding: 3px 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 3px;
    }

.dashCardBodyMiddle {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 5px;
    height: 150px;
}

    .dashCardBodyMiddle h5 {
        font-size: 36px;
        color: var(--admin-main);
        font-family: "Poppins-SemiBold";
        margin-bottom: 0px;
    }

    .dashCardBodyMiddle h6 {
        font-size: 14px;
        color: var(--grey);
        font-weight: 500;
        margin-bottom: 0;
    }

.paymentLinkText {
    color: #0e7aff;
    font-size: 14px;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.paymentLinkFieldsMain {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    column-gap: 20px;
    row-gap: 20px;
    height: auto;
    max-height: 160px;
    overflow: auto;
}

.inputLinedAlt {
    position: relative;
}

    .inputLinedAlt input[type = "text"] {
        margin-bottom: 0px;
    }

.newPaymentLinkField input[type = "text"] {
    margin-bottom: 0px;
}

.deleteFieldBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffe9e9;
    padding: 8px 10px;
    border-radius: 0px 5px 5px 0px;
    position: absolute;
    right: 0px;
    top: 3%;
}

    .deleteFieldBtn i {
        font-size: 15px;
        color: #ff4e4e;
    }

.paymentLinkEditorMain {
    width: 100%;
}

.paymentLinkFilterArea {
    margin-top: 10px;
}

    .paymentLinkFilterArea input {
        margin-bottom: 15px;
    }