:root {
    --theme-primary: #294261;
    --theme-secondary: #fca521;
    --theme-btn-border: #233a55;
    --theme-light: #f7fbff;
    --theme-secondary-light: #fca5211f;
    --primary: rgb(41, 41, 97);
    --primary-light: rgb(41, 41, 97, 0.12);
    --red: rgb(234, 12, 12);
    --red-light: rgba(234, 12, 12, 0.12);
    --orange: rgb(255, 140, 50);
    --orange-light: rgba(255, 140, 50, 0.12);
    --green: rgb(3, 201, 136);
    --green-light: rgba(3, 201, 136, 0.12);
    --purple: rgb(147, 54, 180);
    --purple-light: rgba(147, 54, 180, 0.12);
    --sky: rgb(0, 181, 239);
    --sky-light: rgba(0, 181, 239, 0.12);
    --yellow: rgb(255, 216, 0);
    --yellow-light: rgba(255, 216, 0, 0.12);
    --pink: rgb(235, 31, 72);
    --pink-light: rgba(235, 31, 72, 0.12);
    --blue: rgb(0, 46, 220);
    --blue-light: rgba(0, 46, 220, 0.12);
    --yesb: rgb(235, 31, 72);
    --yesb-light: rgba(235, 31, 72, 0.12);
    --sbin: rgb(0, 181, 239);
    --sbin-light: rgba(0, 181, 239, 0.12);
    --wraper-height: 100vh;
    --table-head: #e4f2ff;
    --link: #294261;
}

body {
    font-weight: normal;
    font-style: normal;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-smooth: always;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    height: 100%;
    overflow-x: hidden;
    font-family: 'Open Sans', sans-serif !important;
    background: #ffffff;
    font-size: 14px;
    height: 100%;
    overflow: hidden;
}

/******************************************sidenav*************************************/

.sidenav {
    height: 100%;
    width: 250px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 25px;
    margin-left: 40px;
    cursor: pointer;
    height: 25px;
    background: #000;
    color: #fff !important;
    border-radius: 50%;
    width: 42px;
    justify-content: center;
    display: flex;
    align-items: center;
    margin: 6px;
}

.prepaid-card-wrapper{
    float: center;
    width: 100%;
    height: 100vh;
    padding: 240px 40px;
    font-size: 16px;
}
/*TuPeCard Style*/
.tupe-card-wrapper {
    float: center;
    width: 100%;
    height: 100vh;
    padding: 10px 0;
}
.tupe-card-wrapper .atm-block {
    position: relative;
    width: 1012px;
    height: 638px;
    background: #a6a6a6;
    border-radius: 25px;
    margin: 0;
}
.tupe-card-wrapper .atm-block .logo-1 {
    display: inline-block;
    position: absolute;
    left: 40px;
    top: 40px;
    /*background: #fff; */
    padding: 10px;
    border-radius: 10px;
    /*width: 230px;*/
}
.tupe-card-wrapper .atm-block .logo-1 img {
    width: 350px;
    /* height: 100%; */
    display: block;
    margin: 0 auto;
}
.tupe-card-wrapper .atm-block .qr-code {
    display: inline-block;
    position: absolute;
    right: 40px;
    top: 40px;
}
.tupe-card-wrapper .atm-block .qr-code canvas {
    border-radius: 20px;
}
.tupe-card-wrapper .atm-block .qr-code img {
    width: 300px;
    border-radius: 20px;
}
.tupe-card-wrapper .atm-block .anim-img {
   display: inline-block;
    position: absolute;
    left: calc(56% - 100px);
    top: 40px;
}
.tupe-card-wrapper .atm-block .anim-img img {
    width: 120px;
}
.tupe-card-wrapper .atm-block .right-cjs {
    position: absolute;
    display: inline-block;
    right: calc(41% - 100px);
    bottom: 40px;
    text-align: center;
}
.tupe-card-wrapper .atm-block .right-cjs img {
    display: inline-block;
    max-width: 250px;
}
.tupe-card-wrapper .atm-block .wifi {
    position: absolute;
    display: inline-block;
    left: 40px;
    top: 265px;
    text-align: center;
}
.tupe-card-wrapper .atm-block .wifi img {
    display: inline-block;
    max-width: 80px;
    transform: rotate(90deg);
}
.tupe-card-wrapper .atm-block .school-text {
    position: absolute;
    display: inline-block;
    left: calc(53% - 100px);
    top: 265px;
    text-align: center;
}
.tupe-card-wrapper .atm-block .school-text span {
    font-size: 28px;
    font-weight: 800;
    color: #e34124;
    display: block;
}
.tupe-card-wrapper .atm-block .right-bottom {
    position: absolute;
    display: inline-block;
    right: 40px;
    bottom: 40px;
    text-align: center;
}
.tupe-card-wrapper .atm-block .right-bottom img {
    display: inline-block;
    max-width: 260px;
    background: #ffffff;
    padding: 10px;
    border-radius: 20px;
}
.tupe-card-wrapper .atm-block .right-bottom span {
    display: block;
    font-size: 28px;
    text-transform: uppercase;
    color: var(--theme-primary);
    font-weight: bold;
    margin-top: 10px;
}
.tupe-card-wrapper .atm-block .number {
    position: absolute;
    display: inline-block;
    left: 40px;
    bottom: 180px;
    text-align: center;
}
.tupe-card-wrapper .atm-block .number span {
    display: inline-block;
    margin-right: 20px;
    font-size: 78px;
    font-weight: bold;
    color: var(--theme-primary);
}
.tupe-card-wrapper .atm-block .date {
    position: absolute;
    display: inline-block;
    left: 46px;
    bottom: 100px;
}
.tupe-card-wrapper .atm-block .date .valid {
    display: inline-block;
    margin-right: 20px;
    font-size: 24px;
    font-weight: normal;
    color: #000000;
    float: left;
}
.tupe-card-wrapper .atm-block .date .month-y {
    display: inline-block;
    float: left;
}
.tupe-card-wrapper .atm-block .date .month-y .month-text {
    display: block;
    font-size: 24px;
    font-weight: normal;
    color: #000000;
}
.tupe-card-wrapper .atm-block .date .month-y .date-text {
    display: block;
    font-size: 26px;
    font-weight: bold;
    color: #e34124;
}
.tupe-card-wrapper .atm-block .name-block {
    position: absolute;
    display: inline-block;
    left: 46px;
    bottom: 40px;
    font-size: 30px;
    font-weight: bold;
    color: #000000;
    text-transform: uppercase;
    text-overflow: ellipsis;
    width: 400px;
    white-space: nowrap;
    overflow: hidden;
    text-align: left;
}
.tupe-card-section {
    height: 
    background: #fff !important;
    text-align: -webkit-center;
}

.page-a4, .tupe-a4 {
    width: 210mm;
    /*height: 297mm;*/  
    height: 365mm;
    margin: 0mm auto;
    border: 1px #D3D3D3 solid;
    border-radius: 5px;
    background: white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.tupe-a4 {
    padding: 8mm 36mm;
}

.page-break{
    page-break-after: always;
}

.tupe-a4 .atm-block{
    zoom: 42%;
    margin-bottom: 18mm;
}

.card{
    border-radius: 10px;
}
.input-checkbox{
    zoom: 1.4;
}

.nav-devider{
    margin-bottom: 1rem !important;
    border-top: 5px solid rgba(0, 0, 0, .1);
}

/*
@page {
    size: A4;
    margin: 0;
}*/

@media print {
    .page-a4, .tupe-a4 {
        margin: 0;
        border: initial;
        border-radius: initial;
        width: initial;
        min-height: initial;
        box-shadow: initial;
        background: initial;
        page-break-after: always;
    }

    .tupe-a4{
        float: left;
    }
}

@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 15px;
    }

    .sidenav a {
        font-size: 18px;
    }
}

.closebtn {}

/*********************************end-*****************************/

a:hover {
    text-decoration: none !important;
}


.inner-design {
    height: 90vh;
    width: 100%;
    background-size: cover;
    justify-content: center;
    display: flex;
    align-items: center;
}

.f-p {

    color: #332549;
    font-weight: bold;
    font-size: 13px;
    margin-bottom: 10px;
}

.bg-m-b-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.high-light {
    font-weight: 600;
    color: #332549;
}

.footer-section {
    background: #fff;
    padding: 10px;
    box-shadow: 0 0 10px #a2a2a2;
}

.footer-section p {
    margin-bottom: 0;
}

.footer-section a {}

.c-f {

    text-align: center;

}

.bg-light-nav .c-w {
    color: #332549 !important;
}

.label-current {
    color: #050505 !important;
    font-size: 14px !important;
    position: unset !important;
    font-weight: 600;
    margin-bottom: 0;
}



.max-wth-align {
    max-width: 47% !important;
}



.navbar-height-vh {
    height: 12vh !important;
}

.fc-version {
    color: #4e4e4e;
    font-size: 14px;
    position: absolute;
    right: 27px;
}

.algn-fp {
    float: right;
}

.algn-fp a {
    color: #000;
    text-decoration: none;
    text-decoration-line: none;
}

/***************************************index*****************************************/
.wraper-main {
    margin-top: 55px;
    overflow: auto;
    height: var(--wraper-height);
}


div.content {
    margin-left: 249px;
    padding: 1px 16px;
    overflow: auto;
    transition: all 0.5s;
}

@media screen and (max-width: 700px) {
    .sidebar {
        width: 100%;
        height: auto;
        position: relative;
    }

    .sidebar a {
        float: left;
    }

    div.content {
        margin-left: 0;
    }
}


.sidebar i {
    padding-right: 22px;
    font-size: 18px;
}

.ml-auto,
.mx-auto {
    margin-left: auto !important;
    margin-right: 50px;
}


.header-inner {
    height: 8vh !important;
}


/*.dashbored-inner {
    justify-content: space-between;
    background: #f5f5f5;
    padding: 5px;
    border-radius: 15px;
    box-shadow: 0 3px 20px rgba(0, 0, 0, .16);
    border: 1px solid #e2e2ff;
    margin-bottom: 15px;

}

.inner-bakl {
    background: #f5f5f5;
    padding: 10px 15px;
    border-radius: 10px;
    min-height: 150px;
    font-weight: 700;
    color: #000;
}

.inner-bakl h5 {
    font-weight: 700;
    color: #e34124;
    border-bottom: 1px solid var(--theme-secondary);
    padding-bottom: 10px;
}*/

.dashbored-inner {
    justify-content: space-between;
    padding: 15px;
    border-radius: 15px;
    box-shadow: 0 3px 20px rgba(0, 0, 0, .16);
    border: 1px solid #e2e2ff;
    margin-bottom: 15px;
}
 
.inner-bakl {
    background: var(--theme-light);
    padding: 10px 20px;
    border-radius: 5px;
    min-height: 150px;
    font-weight: 700;
}

.inner-bakl p,
.inner-bakl h2 {
    color: #222222;
}

.inner-bakl h2 {
    color: #222222;
}
 
.inner-bakl h6 {
    color: #222222;
}

.inner-bakl h5 {
    font-weight: 700;
    color: var(--theme-primary);
    padding-bottom: 10px;
}

/* .btn-add button {

    background: #fff !important;
    border-radius: 5px !important;
    padding: 8px 10px !important;
    margin-left: 10px !important;
    color: #011f3f;
    border: none !important;

}

.btn-add {
    margin-left: auto;
    text-align: right;
} */

.table-bank-tra {
    background: #fff;
}

.table-bank-tra tr td,
.table-bank-tra th {
    border: none !important;
}

.table-bank-tra .bg-change {
    background: #f2f2f4 !important;
}

.table-bank-tra th {
    padding: 18px !important;
}

.table-bank-tra .table-style {
    border-bottom: 1px solid #e4e7e7 !important;
}

.table-bank-tra .table-style td {
    padding: 20px !important;
}

.bg-change th {
    color: #011f3f;
    font-size: 14px;
    font-weight: 600;
    flex: 1;
}

/* the icons */

.input-datepicker,
.input-daterange,
.input-daterange .input-group-addon {
    position: relative;
}

.input-datepicker .form-control,
.input-daterange .form-control {
    padding-left: 32px;
}

.input-datepicker:before,
.input-daterange:before,
.input-daterange .input-group-addon:before {
    content: "\e916";
    font-family: "Material Icons" !important;
    font-weight: normal;
    font-style: normal;
    font-size: 16px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    position: absolute;
    z-index: 9;
    pointer-events: none;
}

.input-datepicker:before {
    top: 9px;
    left: 8px;
}

.input-daterange:before {
    top: 9px;
    left: 8px;
}

.input-daterange .input-group-addon:before {
    top: 9px;
    left: 100%;
    margin-left: 8px;
}

.table-style {
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

.table-style:hover {
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.02);
    background: #f4f4f4;
}

.header-part {
    background: #f2f2f4 !important;
    display: flex;
    align-items: center;
    padding: 10px 0;
}

.header-part p {
    color: #011f3f;
    font-size: 14px;
    font-weight: 600;
    flex: 1;
    margin: 0 5px;
}

.table-thead-part {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #e4e7e7;
    background: #fff;
    cursor: default;
}

.table-thead-part p {
    color: #838383;
    font-size: 14px;
    font-weight: 500;
    margin: 0 5px;
    flex: 10.5 !important;
}


.inner-label-h6 label {
    color: #303030;
    font-size: 14px;
    font-weight: 600;
}

.inner-label-h6 h6 {
    color: #011f3f;
    font-size: 14px;
    font-weight: 500;
    margin-top: 5px;
    letter-spacing: 1px;
}

.details-page {
    padding: 15px;
    background: #011f3f;
    border-radius: 5px;
}

.details-page h6 {
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    text-align: left;
    margin: 5px 0;
}

.back-btn {
    background: #0857ab !important;
    border: none !important;
    float: right !important;
}


.input-group-text {
    border: none !important;
    border-left: 1px solid #000 !important;
}

.b-r {
    border: none !important;
    border-right: 1px solid #000 !important;
}

.webhooks-content {
    color: #011f3f;
    font-size: 13px;
    font-weight: 600;
}

.webhooks-content .middle-content {
    color: #011f3f;
    font-size: 13px;
    font-weight: 400;
}

.configure-t {
    color: #0857ab;
    font-size: 13px;
    cursor: pointer;
    font-weight: 500;
}

.email-verfy {
    color: #011f3f;
    font-size: 13px;
    font-weight: 600;
}

/*************************toggle button**********************/
.switch {
    position: relative;
    display: inline-block;
    width: 35px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .38);
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 0px;
    top: -3px;
    bottom: 4px;
    background-color: #f5f5f5;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked+.slider {
    background-color: var(--theme-secondary);
}

input:focus+.slider {
    box-shadow: 0 0 1px var(--theme-secondary);
}

input:checked+.slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
    height: 15px;
    width: 35px;
}

.slider.round:before {
    border-radius: 50%;
    box-shadow: 0 2px 1px -1px rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 1px 3px 0 rgba(0, 0, 0, .12);
}

.chnge-pass {
    align-items: center;
    color: #0857ab;
    margin-top: 15px;
    cursor: pointer;
    font-weight: 500;
    margin-left: 5px;
    font-size: 14px;
}

.button-popup {
    color: var(--theme-primary) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border: 1px solid var(--theme-primary) !important;
    padding: 7px 12px !important;
    margin-left: 10px !important;
    min-width: 100px !important;
    border-radius: 20px !important;
    background: transparent !important;
}


.width-modal {
    width: 530px !important;
}

.label-conten-t {
    display: block;
    color: #011f3f;
    text-align: left;
    font-weight: 500;
    font-size: 13px !important;
}

/********************input new*************/



.container-inner {
    position: relative;
    max-width: 80%;
    background: #fff;
    width: 100%;
    border-radius: 1px;
    margin-bottom: 20px;
}

.container-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
    -webkit-transform: scale(0.98);
    transform: scale(0.98);
    -webkit-transition: -webkit-transform 0.28s ease-in-out;
    transition: -webkit-transform 0.28s ease-in-out;
    transition: transform 0.28s ease-in-out;
    transition: transform 0.28s ease-in-out, -webkit-transform 0.28s ease-in-out;
    z-index: -1;
}

.container-inner:hover::before {
    -webkit-transform: scale(1);
    transform: scale(1);
}

.button-container {
    text-align: center;
}

.container-inner fieldset {
    margin: 0 0 3rem;
    padding: 0;
    border: none;
}


.form-inline>.form-group,
.form-inline>.btn {
    display: inline-block;
    margin-bottom: 0;
}

.form-help {
    margin-top: 0.125rem;
    margin-left: 0.125rem;
    color: #b3b3b3;
    font-size: 0.8rem;
}

.checkbox .form-help,
.form-radio .form-help,
.form-group .form-help {
    position: absolute;
    width: 100%;
}

.checkbox .form-help {
    /*position: relative;*/
    margin-bottom: 1rem;
}

.form-radio .form-help {
    padding-top: 0.25rem;
    margin-top: -1rem;
}


.form-group textarea {
    resize: none;
}




.checkbox {
    margin-top: 3rem;
    margin-bottom: 1rem;
}

.checkbox .helper {
    color: #999;
    position: absolute;
    top: 0;
    left: 0;
    width: 1rem;
    height: 1rem;
    z-index: 0;
    border: 0.125rem solid currentColor;
    border-radius: 0.0625rem;
    -webkit-transition: border-color 0.28s ease;
    transition: border-color 0.28s ease;
}

.checkbox .helper::before,
.checkbox .helper::after {
    position: absolute;
    height: 0;
    width: 0.2rem;
    background-color: #337ab7;
    display: block;
    -webkit-transform-origin: left top;
    transform-origin: left top;
    border-radius: 0.25rem;
    content: '';
    -webkit-transition: opacity 0.28s ease, height 0s linear 0.28s;
    transition: opacity 0.28s ease, height 0s linear 0.28s;
    opacity: 0;
}

.checkbox .helper::before {
    top: 0.65rem;
    left: 0.38rem;
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
    box-shadow: 0 0 0 0.0625rem #fff;
}

.checkbox .helper::after {
    top: 0.3rem;
    left: 0;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.checkbox label:hover .helper {
    color: #337ab7;
}

.checkbox input:checked~.helper {
    color: #337ab7;
}

.checkbox input:checked~.helper::after,
.checkbox input:checked~.helper::before {
    opacity: 1;
    -webkit-transition: height 0.28s ease;
    transition: height 0.28s ease;
}

.checkbox input:checked~.helper::after {
    height: 0.5rem;
}

.checkbox input:checked~.helper::before {
    height: 1.2rem;
    -webkit-transition-delay: 0.28s;
    transition-delay: 0.28s;
}

.radio+.radio,
.checkbox+.checkbox {
    margin-top: 1rem;
}

.checkbox label,
.form-radio label {
    position: relative;
    cursor: pointer;
    padding-left: 2rem;
    text-align: left;
    color: #333;
    display: block;
}

.checkbox input,
.form-radio input {
    width: auto;
    opacity: 0.00000001;
    position: absolute;
    left: 0;
}

.button-inner {
    padding-top: 0px;
    margin: auto;
    display: block;
}

.button-inner button {
    background-color: var(--theme-primary) !important;
    border: none !important;
}

.btn-main-logout {
    padding: 6px 25px !important;
    border-radius: 24px !important;
}

/**********************************chatbox*******************/
.open-button {
    background: linear-gradient(#0857ab, #11c9cc);
    color: white;
    padding: 11px 12px;
    border: none;
    cursor: pointer;
    /* opacity: 0.8; */
    position: fixed;
    bottom: 23px;
    right: 28px;
    /* width: 280px; */
    border-radius: 50%;
}

/* The popup chat - hidden by default */
.chat-popup {
    display: none;
    position: fixed;
    bottom: 0;
    right: 15px;
    border: 3px solid #f1f1f1;
    z-index: 9;
}

/* Add styles to the form container */
.form-container {
    max-width: 420px;
    background-color: white;
    height: 682px;
}

/* Full-width textarea */
.form-container textarea {
    width: 100%;
    padding: 15px;
    margin: 5px 0 22px 0;
    border: none;
    background: #f1f1f1;
    resize: none;
    min-height: 200px;
}

/* When the textarea gets focus, do something */
.form-container textarea:focus {
    background-color: #ddd;
    outline: none;
}

/* Set a style for the submit/send button */
.form-container .btn {
    background-color: #4CAF50;
    color: white;
    padding: 16px 20px;
    border: none;
    cursor: pointer;
    width: 100%;
    margin-bottom: 10px;
    opacity: 0.8;
}

/* Add a red background color to the cancel button */
.form-container .cancel {
    background-color: red;
}

/* Add some hover effects to buttons */
.form-container .btn:hover,
.open-button:hover {
    opacity: 1;
}

.width-style {

    width: 100px;
}

.inner-chat {
    background: #000;
}


.wrapper-2 header,
section,
footer {
    width: 100%;
}

.wrapper-2 header {
    height: 66px;
    background: #212128;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    line-height: 24px;
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
}

.wrapper-2 header h6 {
    text-align: center;
    flex-grow: 1;
    font-family: 'Roboto Condensed';
    font-size: 20px;
    font-weight: normal;
    margin: 0 0 2px 0;
}

.wrapper-2 header .material-icons {
    color: rgba(255, 255, 255, 0.6);
    vertical-align: bottom;
    position: relative;
}

.wrapper-2 header .material-icons:hover:after {
    position: absolute;
    top: 50% !important;
    left: 50% !important;
    margin-top: -18px;
    margin-left: -18px;
    content: '';
    display: block;
    background: rgba(255, 255, 255, 0.08);
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
}

.wrapper-2 section {
    flex: auto;
    background: #FAFAFA;
    max-height: 500px;
    overflow: auto;
}

.wrapper-2 section .scroll {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.wrapper-2 section .message-wrapper {
    padding: 5px 0;
    display: flex;
    flex-direction: row;
    width: 100%;
    box-sizing: border-box;
}

.wrapper-2 section .message-wrapper .message-box {
    order: 1;
    position: relative;
    display: inline-block;
    font-size: 13px;
    line-height: 18px;
    font-weight: 400;
    font-family: Roboto;
}

.wrapper-2 section .message-wrapper .ago {
    font-size: 11px;
    align-self: center;
    white-space: nowrap;
    padding: 6px;
    color: rgba(33, 33, 40, 0.7);
    font-family: Roboto;
}

.wrapper-2 section .message-wrapper.in {
    justify-content: flex-start;
    padding-right: 6px;
}

.wrapper-2 section .message-wrapper.in .message-box {
    background: #212128;
    padding: 12px 20px 12px 50px;
    left: -30px;
    margin-right: -30px;
    border-radius: 0 10px 10px 0;
    color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 30px -5px rgba(33, 33, 40, 0.4);
}

.wrapper-2 section .message-wrapper.in .ago {
    order: 2;
}

.wrapper-2 section .message-wrapper.out {
    justify-content: flex-end;
    padding-left: 6px;
}

.wrapper-2 section .message-wrapper.out .message-box {
    background: #ffffff;
    padding: 12px 50px 12px 20px;
    right: -30px;
    margin-left: -30px;
    border-radius: 10px 0 0 10px;
    color: #212128;
    box-shadow: 0 0 30px -5px rgba(33, 33, 40, 0.3);
}

.wrapper-2 section .message-wrapper.out .ago {
    order: 0;
}

.wrapper-2 footer {
    min-height: 56px;
    height: 56px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.wrapper-2 footer div {
    position: relative;
    padding: 12px;
    width: 100%;
    background: #212128;
}

.wrapper-2 footer div .search {
    background: #ffffff;
    color: #212128;
    border: 0;
    -box-shadow: 0 0 30px -5px rgba(33, 33, 40, 0.4);
    width: 100%;
    border-radius: 10px;
    padding: 7px 12px;
    box-sizing: border-box;
    outline: none;
    font-size: 13px;
    line-height: 18px;
    font-weight: 400;
    font-family: Roboto;
}

.wrapper-2 .ripple {
    position: relative;
    transform: translate3d(0, 0, 0);
}

.wrapper-2 .ripple:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10, 10);
    opacity: 0;
    transition: transform .5s, opacity 1s;
}

.wrapper-2 .ripple:active:after {
    transform: scale(0, 0);
    opacity: .3;
    transition: 0s;
}


.chat-images {
    width: 28px;
}


.loader {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 10000 !important;
}

.swal2-container {
    z-index: 10001 !important;
}

.loader .spinner-border {
    width: 5rem;
    height: 5rem;
    color: var(--theme-primary);
}

.loader-div .modal-backdrop {
    z-index: 10000;
}

.hide {
    display: none !important;
}

label.error {
    color: #bd0909;
    font-size: 15px;
    margin-bottom: 0rem;
    font-weight: 500;
}


.pull-right {
    float: right;
}

.pull-left {
    float: left;
}

.pull-center {
    float: center;
}

.read-only {
    background-color: #f0f0f0 !important;
    pointer-events: none;
}
.pagination{
    margin-bottom: 0px;
}
ul.showTotalPage {
    float: right;    
    margin-bottom: 0px;
}
ul.showTotalPage li {
    list-style: none;   
}


/*********************css-new****************/
.req-star {
    color: red;
}

.date-picker-label {
    position: absolute;
    left: 0px;
    top: -18px;
    font-size: 13px;
    color: #969696;
}

.icon-calender-add {
    position: absolute;
    top: 9px;
    right: 5px;
    z-index: 1;
}

.react-datepicker-popper {
    z-index: 99 !important;
}

.react-datepicker-wrapper {
    display: inline-block;
    padding: 0;
    border: 0;
    width: 100%;
    cursor: pointor;
}

.container-inner .form-group .bar:focus {
    border-bottom: 3px solid red;
}

.mr-15 {
    margin-right: 15px;
}

.heading-div {
    margin-bottom: 3px;
}

.page-title {
    margin-top: 8px;
    margin-left: 10px;
    font-size: 18px;
    font-weight: 600;
    color: var(--theme-primary);
}

.p-3 {
    padding: 1rem !important;
    padding-top: 5px !important;
}


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

.center {
    text-align: center;
}

.form-check-input {
    position: absolute;
    margin-top: 1rem !important;
    margin-left: -1.25rem;
    zoom: 1.5;
}

.form-check-label {
    margin-top: 1.4rem !important;
}


.filter-div {
    padding-bottom: 10px;
    padding-top: 10px;
    padding-left: 20px;
    border-top: 1px solid #011f3f;
    background-color: #fff;
    margin-left: 7px;
}

.filter-button {
    margin-top: 10px;
}


.transfer-div {
    padding-bottom: 10px;
    border-top: 1px solid #d7d9db;
    background-color: #fff;
    width: 50%;
    padding-left: 15px !important;
}

.beneficiary-list {
    margin: 10px !important;
}

.beneficiary-detail {
    border-top: 1px solid #d7d9db;
    background-color: #fff;
    padding: 10px;
}

.alert-detail {
    height: 42vh;
}

.alert>ul {
    margin: 0;
    padding: 0px 10px;
}

.card.card-danger{
    border: 1px solid#f8d7da;
    color: #721c24;
}

.card.card-danger > .card-header{
    background: #f8d7da;
    border-bottom: 1px solid #f5c6cb;
}

.card.card-danger .form-control{
    border: 1px solid #f5c6cb !important;
}

.mt0 {
    margin-top: 0px !important;
}

.pl0 {
    padding-left: 0px !important;
}

.swal2-input {
    width: 230px !important;
}

.mpin-form input {
    width: 35px !important;
    height: 35px;
    padding: 0;
    margin-right: 20px;
    margin-top: 5px;
    margin-bottom: 5px;
    text-align: center;
    font-weight: bold;
    font-size: 20px;
    vertical-align: top;
    border: 1px solid gray;
    border-radius: 5px;
}

.news-updates {
    position: relative;
    overflow-x: scroll;
    max-width: 100%;
    outline: 0;
    direction: ltr;
}

.marquee {
    top: 6em;
    position: relative;
    box-sizing: border-box;
    animation: marquee 10s linear infinite;
}

.marquee:hover {
    animation-play-state: paused;
}

/* Make it move! */
@keyframes marquee {
    0% {
        top: 1em
    }

    100% {
        top: -11em
    }
}

.readWriteAccess {
    opacity: .8 !important;
    pointer-events: none;
    cursor: none;
}

.pointer {
    cursor: pointer;
}

label.success {
    color: #0062cc;
    font-size: 14px;
    margin-bottom: 0rem;
}

.custom-select-box {
    width: 130px !important;
    border: 1px solid #011f3f !important;
}

.filter-btn {
    margin-top: 10px;
}

.primary-div {
    width: 50% !important;
}

.middle-div {
    width: 3% !important;
    padding: 10px 0px;
    text-align: center;
}

.secondary-div {
    width: 46% !important;
}

.multiple-select {
    min-height: 50vh;
    width: 100% !important;
    overflow-y: auto;
    padding-left: 2px;
    padding-top: 2px;
    overflow: auto !important;
}

.multiple-select:focus {
    color: #495057;
    border-color: #80bdff;
    outline: 0;
}

.mt-15 { margin-top: 15px; }
.mt-20 { margin-top: 20px; }
.mt-21 { margin-top: 21px; }
.mt-22 { margin-top: 22px; }
.mt-23 { margin-top: 23px; }
.mt-24 { margin-top: 24px; }
.mt-25 { margin-top: 25px; }
.mt-26 { margin-top: 26px; }
.mt-27 { margin-top: 27px; }
.mt-28 { margin-top: 28px; }
.mt-29 { margin-top: 29px; }
.mt-30 { margin-top: 30px; }

.height-50 { height: 50px; }
.height-100 { height: 100px; }
.height-150 { height: 150px; }
.height-200 { height: 200px; }
.height-250 { height: 250px; }
.height-300 { height: 300px; }
.height-350 { height: 350px; }

.help-text {
    color: #737373;
    font-size: 0.8rem;
}

.multiple-select optgroup option {
    margin-left: -10px;
    padding-left: 0px;
    padding-top: 0px;
}

th.large-heading {
    width: 3% !important;
}

.form-checkbox {
    zoom: 1.5;
}

.table {
    margin-bottom: 0rem;
}

.text-credit {
    color: var(--theme-primary);
    font-weight: 700;
    font-size: 13px;
}

.text-debit {
    color: #f80909;
    font-weight: 700;
    font-size: 13px;
}

.modal-body .inner-label-h6 label {
    margin-top: 0px;
    margin-bottom: 0rem;
    letter-spacing: 1px;
}

.modal-body.transaction-view .row {
    margin-bottom: 0px;
}

.credit-score-menu a button.active {
    background-color: #011f3f !important;
    color: #fff !important;
}

.credit-score-menu a:hover:not(button.active) {
    background: #e4e7e7 !important;
    color: #fff !important;
}

.mb5 {
    margin-bottom: 5px;
}

.credit-score-section {
    border: 1px solid #011f3f;
    padding: 2px 5px;
}

.container-full {
    position: relative;
    max-width: 100%;
    background: #fff;
    width: 100%;
    border-radius: 1px;
}

.font-12 {
    font-size: 11px;
    text-align: center;
}

.font-11 {
    font-size: 11px;
}

.font-10 {
    font-size: 10px;
}

.font-9 {
    font-size: 9px;
}

.rang {
    text-align: center;
    position: relative;

}

.rang-title {
    display: inline-block;
    width: 200px;
}

.rang-number {
    width: 100%;
    margin-top: 40px;
    text-align: center;
    border-width: 0;
    font-size: 50px;
    font-weight: 900;
    background-color: #fff;
    color: #0093d7;
}

.rang-slider[type=range] {
    width: 250px;
    margin-top: 10px;
    -webkit-appearance: none;
}

.rang-slider::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    background: #000 !important;
    border-radius: 50%;
    cursor: pointer !important;
    border: 2px solid #fff;
}

.rang-slider[type=range]:focus {
    outline: none;
}

input[type=range] {
    display: inline !important;
}

.rang-slider[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 20px;
    background: #2072ac;
    border-radius: 25px;

    cursor: pointer;
}

.rang-slider[type=range]:focus::-webkit-slider-runnable-track {
    background: #3790cc;
}

.meter {
    display: block;
    width: 250px;
    height: 155px;
    margin: 0 auto;

}

.meter-left {
    -webkit-transform: skewX(-2deg) skewY(1deg);
    transform: skewX(-2deg) skewY(1deg);
    stroke-width: 40px;
    stroke-dashoffset: 253;
    stroke-dasharray: 101 400;
    stroke: #ff0000;
    fill: none;
}

.meter-center {
    stroke-width: 40px;
    stroke-dashoffset: 128;
    stroke-dasharray: 70 400;
    stroke: #ffa500;
    fill: none;
}

.meter-inner {
    -webkit-transform: skewX(2deg) skewY(1deg);
    transform: skewX(2deg) skewY(1deg);
    stroke-width: 40px;
    stroke-dashoffset: 8;
    stroke-dasharray: 94 323;
    stroke: #ffff00;
    fill: none;
}

.meter-inner-2 {
    -webkit-transform: skewX(2deg) skewY(1deg);
    transform: skewX(2deg) skewY(1deg);
    stroke-width: 40px;
    stroke-dashoffset: 8;
    stroke-dasharray: 159 327;
    stroke: #7dd459;
    fill: none;
}

.meter-right {
    -webkit-transform: skewX(2deg) skewY(1deg);
    transform: skewX(2deg) skewY(1deg);
    stroke-width: 40px;
    stroke-dashoffset: 8;
    stroke-dasharray: 219 326;
    stroke: #009750;
    fill: none;
}

.meter-clock {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transform-origin: 137px 146px;
    transform-origin: 137px 146px;
    fill: black;
}

.meter-clock-2 {
    -webkit-transform: rotate(-54deg);
    transform: rotate(-6deg);
    -webkit-transform-origin: 137px 146px;
    transform-origin: 137px 146px;
    fill: black;
}

.meter-circle {
    fill: black;
}

.text-wrap h4 {
    position: absolute;
    top: 70%;
    left: -2%;
    transform: rotate(-78deg);
    font-size: 11px;
}

.text-wrap2 h4 {
    position: absolute;
    top: 29%;
    left: 18%;
    transform: rotate(-42deg);
    font-size: 11px;
}

.text-wrap3 h4 {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: rotate(0deg);
    font-size: 11px;
}

.text-wrap4 h4 {
    position: absolute;
    top: 34%;
    left: 84%;
    transform: rotate(44deg);
    font-size: 11px;
}

.text-wrap5 h4 {
    position: absolute;
    top: 76%;
    left: 96%;
    transform: rotate(82deg);
    font-size: 11px;
}

.meter-number h1 {
    background: #378fcb;
    width: 100px;
    height: 100px;
    font-size: 42px;
    border-radius: 50%;
    justify-content: center;
    display: flex;
    align-items: center;
    margin: auto;
    color: #fff;
}

.meter-number {
    text-align: center;
}

.meter-top {
    margin-top: 30px;
}

.meter-number h4 {
    margin-top: 15px;
}

.credit-score-value {
    margin-top: 18%;
    margin-left: 50px;
}

.score-icon i.fas,
.score-icon i.fa {
    font-size: 50px;
    padding-top: 12px;
    margin-bottom: 5px;
}

.b-b {
    border-bottom: 1px solid #000 !important;
    margin: 0px !important;
}

.padding0 {
    padding: 0px !important;
}

.mt-10 {
    margin-top: 10px;
}

.loan-history {
    overflow: scroll;
    height: 60vh;
}

.report-logo-img {
    width: 25%;
    padding-left: 0px;
    padding-top: 5px;
    padding-bottom: 5px;
}

hr {
    margin-left: 0px;
    margin-top: 0rem !important;
    margin-bottom: 0rem !important;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, .1);
}

.report-details {
    border: 2px dotted #9d9999;
    margin-left: 0px !important;
    margin-right: 0px !important;
    padding: 5px 0px;
}

h6.heading:after {
    content: '';
    width: 40px;
    height: 3px;
    background-color: #858282;
    position: absolute;
    margin-top: 20px;
    margin-left: 15px;
    left: 0;
}

.p {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 11px;
    color: #b56227;
}

.score-img {
    width: 100%;
}

.dateTime {
    display: none;
}

.form-signin p.para {
    text-align: justify;
    color: #646464;
    font-weight: 400;
}

.login-wrap {
    padding: 20px;
    margin-bottom: 35px;
    border: 1px solid var(--theme-primary);
}

.form-signin {
    /* max-width: 840px; */
    margin: 10px auto 0;
}

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

.bt-1 {
    border-top: 1px solid #5b6e84;
}

.form-signin .form-signin-heading {
    background: var(--theme-primary);
    padding: 20px;
}

@media print {
    #printButton {
        display: none;
    }

    .dateTime {
        display: block !important;
    }
}

.va-badge{
    width: 100% !important;
    padding: 13px 5px !important;
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 10px;
}

.va-profile-pic{
    border: 1px solid var(--theme-secondary); 
    max-width: 151px; 
    max-height: 202px;
    border-radius: 10px;
}

.va-profile-pic img{
    border-radius: 10px;
}

.va-org-logo{
    border: 1px solid var(--theme-secondary); 
    /*max-width: 125px; */
    /*max-height: 125px;*/
    padding: 10px;
    border-radius: 10px;
}

.va-org-logo img{
    border-radius: 10px;
}

.vc-details {
    padding: 15px;
    background: var(--theme-light);
    border-radius: 10px;
    min-height: 230px;
    position: relative;
    /*color: var(--theme-primary);*/
    font-weight: 600;
    /*margin-bottom: 10px;*/
    /*border: 1px solid #e2e2ff;*/
    /*box-shadow: 0 3px 20px rgb(0 0 0 / 16%)*/
}

.vc-details div.row {
    line-height: 25px;
}

.vc-details hr {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
    border-top: 1px solid transparent;
    border-color:#e2e2ff;
}

.vc-details.va-box .row {
    margin-bottom: 5px !important;
}

.t-c {
    text-align: center;
}

.t-c-white {
    color: #fff !important;
}

.qr-code a {
    font-size: 20px;
    text-align: center;
    color: #222222;
}

.qr-code a {
    color: #222222 !important;
}

.ml-10 {
    margin-left: 10px;
}


.vendor-action {
    width: 27%;
}


.page-item.active .page-link {
    z-index: 3;
    color: #fff !important;
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
}

.page-link {
    position: relative;
    display: block;
    padding: .5rem .75rem;
    margin-left: -1px;
    line-height: 1.25;
    background-color: #fff;
    border: 1px solid #dee2e6;
    color: var(--theme-primary);
}

.react-datepicker__input-container {
    position: relative;
    display: inline-block;
    width: 100%;
    z-index: 2;
}

.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
    margin-top: 20px;
}

.max-wth-align-register {
    margin-top: 50px !important;
}

.scroll-contnet .row.col-md-12 {
    margin-top: 0px;
    margin-bottom: 0px;
    line-height: 28px;
}

.swal2-content {
    font-size: 14px !important;
}

.font-50 {
    font-size: 50px;
}

.font-35 {
    font-size: 35px;
}

.font-15 {
    font-size: 15px;
}

.QR-logo {
    width: 250px;
    margin-top: 30px;
}

.QR-UPI-logo {
    width: 600px;
}

#QRTable {
    width: 1000px;
    text-align: center;
    font-size: 13px;
    margin-top: 0px;
    font-weight: 500;
    text-align: left;
    height: 295px;
    padding-left: 20px;
    padding-right: 20px;
    font-family: calibri;
}

#QRTable td {
    text-align: center;
    vertical-align: middle;
}

.qr-print-popup {
    max-width: 1050px !important;
}

.label-asterisk {
    font-size: 8px;
    color: red;
    top: 2px;
    position: absolute;
    margin-left: 1px;
}
.input-label {
    font-weight: bold;
}
.form-group > .require {
    border: solid 1px red;
    box-shadow: 0 0 0 0.2rem #fc21211f
}

@media print {

    header,
    footer {
        display: none;
    }

    @page {
        size: auto;
        margin: 10mm;
    }
}

/*20-02-22 CSS*/
::-webkit-scrollbar {
    background-color: none;
    width: 10px;
    height: 10px;
}
.sidebar-inner::-webkit-scrollbar {
    background-color: none;
    width: 0px;
    height: 0px;
}
::-webkit-scrollbar-button{
    width: 0;
    height: 0;
    display: none;
}
::-webkit-scrollbar-corner{
    background-color: transparent;
}
::-webkit-scrollbar-thumb{
    background-color: rgba(0,0,0,.2);
    box-shadow: inset 1px 1px 0px rgba(0,0,0,.10), inset 0px -1px 0px rgba(0,0,0,.07);
}
::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0,0,0,.4);
    box-shadow: inset 1px 1px 1px rgba(0,0,0,.25);
}
::-webkit-scrollbar-thumb:active {
    background-color: rgba(0,0,0,.5);
    box-shadow: inset 1px 1px 3px rgba(0,0,0,.35);
}
::-webkit-scrollbar:hover {
    background-color: rgba(0,0,0,.13);
    box-shadow: inset 1px 1px 1px rgba(0,0,0,.25);
}
*:hover::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

a,
button {
    -webkit-transition: ease-in-out all 0.5s;
    transition: ease-in-out all 0.5s;
    text-decoration: none;
    outline: none;
}

a:hover,
a:focus,
button:hover,
button:focus {
    -webkit-transition: ease-in-out all 0.5s;
    transition: ease-in-out all 0.5s;
    text-decoration: none;
    outline: none;
}

/*body.login-body > div, body.login-body > div > div, body.login-body > div > div > div{
  height: 100%;
}*/
.login-header {
    display: block;
    width: 100%;
    float: left;
    padding: 10px 15px;
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.1);
    height: 50px;
    background: var(--theme-primary);
    position: fixed;
    z-index: 9;
    left: 0px;
    top: 0px;
}

body,
html {
    height: 100%;
}

.login-header .navbar-toggler {
    display: none;
}

.login-header .navbar-brand {
    display: inline-block;
    padding: 0px;
    margin: 0px;
    float: left;
}

.logo-img {
    display: inline-block;
    padding: 0px;
    margin: 0px;
    width: 147px;
    border-radius: 6px;
}

.login-header .right-links {
    display: inline-block;
    float: right;
}

.login-header .right-links .navbar-nav {
    display: block;
    float: left;
    margin-top: 0;
}

.login-header .right-links .navbar-nav li {
    display: inline-block;
    float: left;
    list-style: none;
    padding: 0px;
    margin: 0px 0 0 15px;
}

.footer-company {
    padding: 8px 15px;
    background: #ffffff;
    text-align: center;
    color: #303030;
    position: fixed;
    bottom: 0;
    left: 0%;
    width: 100%;
    font-size: 12px;
    border-top: 1px solid #e9e9e9;
    height: auto !important;
    z-index: 9;
}

.footer-company p {
    margin: 0px;
    font-size: 12px;
}

.footer-company a {
    color: var(--theme-primary);
    font-weight: normal;
    transition: ease-in-out all 0.5s;
    font-size: 12px;
    transition: ease-in-out all 0.5s;
}

.footer-company a:hover {
    color: var(--theme-primary);
}

.log-in {
    float: left;
    width: 100%;
    /*height: calc(100% - 123px);*/
    padding-bottom: 50px;
    padding-top: 50px;
    overflow-y: auto;
    height: 90vh;
}

.log-in .inner-log-in {
    float: left;
    width: 100%;
    /*height: 100%;*/
}

/*.log-in .inner-log-in .container{
  height: 100%;
  display: flex;
  align-items: center;
}*/
.log-in .inner-log-in .login-detais {
    float: left;
    width: calc(100% - 400px);
    padding-right: 40px;
}
.log-in .inner-log-in .login-detais.full-width {
    width: 100%;
    padding-right: 0;
}

.log-in .inner-log-in .login-detais h4 {
    display: block;
    width: 100%;
    font-size: 20px;
    color: #303030;
    margin-bottom: 15px;
}

.log-in .inner-log-in .login-detais .banner-img {
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: 10px;
    margin-bottom: 15px;
}

.log-in .inner-log-in .login-detais .banner-img img {
    max-width: 100%;
}

.log-in .inner-log-in .login-detais p {
    font-size: 16px;
    color: #303030;
    font-weight: normal;
    margin-bottom: 15px;
}

.log-in .inner-log-in .form-aside {
    float: left;
    width: 400px;
    padding: 30px 40px;
    background: #ffffff;
    border-radius: 25px;
    box-shadow: 0 20px 30px 10px rgb(36 36 36 / 16%);
    margin-top: 40px;
}

.log-in .inner-log-in .form-aside .log-in-form {
    float: left;
    width: 100%;

}

.log-in .inner-log-in .form-aside .log-in-form h4 {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 20px;
    color: #303030;
    margin-bottom: 15px;
}

.log-in .inner-log-in .form-aside .log-in-form .form-group {
    margin-bottom: 15px;
}

.log-in .inner-log-in .form-aside .log-in-form .form-group label {
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #303030;
    margin-bottom: 8px;
}

.log-in .inner-log-in .form-aside .log-in-form .form-group .error {
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #ed3237;
    margin-bottom: 0px;
}

.fp-text {
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    margin-bottom: 10px;
    color: var(--theme-secondary);
    transition: ease-in-out all 0.5s;
}

.fp-text:hover {
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: var(--theme-secondary);
}

.form-control {
    border-radius: 6px;
    border: solid 1px #c5bbc9;
    color: #303030;
    outline: none;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    padding: .5rem .75rem;
}

.form-control:focus {
    border-radius: 6px;
    border: solid 1px var(--theme-secondary);
    color: #303030;
    outline: none;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    box-shadow: 0 0 0 0.2rem var(--theme-secondary-light);
}

.btn-secondary {
    background-color: #2d2d30;
    border-color: #303030;
    outline: none;
}

.btn-secondary:hover {
    background-color: #000000;
    border-color: #000000;
    outline: none;
}

.modal .modal-header {
    padding: 10px 15px;
    position: relative;
    border-radius: 10px 10px 0 0;
    /*background-image: linear-gradient(to right, var(--theme-primary), var(--theme-secondary));*/
    color: #151531 !important;
}

.modal .modal-header .modal-title {
    display: inline-block;
    font-size: 20px;
    font-weight: 500;
    /*color: #303030;*/
}

.modal .modal-header .close {
    display: inline-block;
    font-size: 20px;
    color: #303030;
    margin: 0px;
    position: absolute;
    right: 0px;
    top: 0px;
    outline: none;
}

#index {
    display: block;
    width: 100%;
    padding-top: 66px;
    height: 100%;
}

.navbar.main-header {
    display: block;
    width: 100%;
    float: left;
    padding: 16px 15px;
    box-shadow: 0 0 10px 1px rgb(0 0 0 / 10%);
    height: 66px;
    background: var(--theme-primary);
    position: fixed;
    z-index: 9;
    left: 0px;
    top: 0px;
}

.navbar.main-header .menu-bar {
    float: left;
    display: inline-block;
    margin-right: 20px;
    font-size: 18px;
    color: #ffffff;
    margin-top: 10px;
}

.navbar.main-header .navbar-brand {
    float: left;
    display: inline-block;
    margin-right: 10px;
    padding: 0px;
    margin: 0px;
    height: 100%;
    vertical-align: middle;
}
.navbar.main-header .navbar-brand img {
    max-height: 100%;
    vertical-align: middle;
}

.navbar.main-header .navbar-toggler {
    display: none;
}

.navbar.main-header .nav-right {
    display: inline-block;
    float: right;
    padding: 0px;
    margin: 0px;
    margin-top: 0px;
}

.navbar.main-header .nav-right .nav-li {
    list-style: none;
    display: inline-block;
    float: left;
    position: relative;
    margin-left: 10px;
}

.navbar.main-header .nav-right .nav-li span {
    display: inline-block;
    font-size: 14px;
    color: #ffffff;
    font-weight: normal;
}

.navbar.main-header .nav-right .nav-li span i {
    margin-right: 5px;
}

.navbar.main-header .nav-right .nav-li .nav-link {
    outline: none;
    cursor: pointer;
    box-shadow: 0 0 0;
    font-size: 14px;
    padding: 0.40rem 0.75rem;
    line-height: 1.5;
    border-radius: 0.2rem;
    color: #ffffff;
    border: 1px solid transparent;
    border-color: #d1d1f033;
    display: inline-block;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.navbar.main-header .nav-right .nav-li .nav-link:hover {
    background: #d1d1f033;
    border-color: var(--theme-primary);
}
.navbar.main-header .nav-right .nav-li .nav-link.active {
    background: #d1d1f033;
    border-color: var(--theme-primary);
}

.navbar.main-header .nav-right .nav-li .dropdown-menu, .dropdown .dropdown-menu {
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 8px 16px 0 rgb(140 119 149 / 15%);
    padding: 5px;
    border: 0px;
}

.navbar.main-header .nav-right .nav-li .dropdown-menu .dropdown-item, .dropdown .dropdown-menu .dropdown-item {
    padding: 10px;
    background: #ffffff;
    border: 0px;
    font-weight: 500;
    color: #303030;
    font-size: 14px;
    border-radius: 5px;
    margin: 0px;
}

.navbar.main-header .nav-right .nav-li .dropdown-menu .dropdown-item i, .dropdown .dropdown-menu .dropdown-item i {
    display: inline-block;
    width: 26px;
    text-align: center;
    margin-right: 5px;
}

.navbar.main-header .nav-right .nav-li .dropdown-menu .dropdown-item:hover, .dropdown .dropdown-menu .dropdown-item:hover {
    background: #f9f8f9;
}

.navbar.main-header .nav-right .nav-li .dropdown-menu.right, .dropdown .dropdown-menu.right {
    left: auto;
    right: 0px;
}

div.content {
    margin-left: 250px;
    padding: 15px 15px 50px;
}

.sidebar {
    position: fixed;
    left: 0;
    top: 66px;
    bottom: 35px;
    width: 250px;
    padding: 15px 0px 20px 15px;
    overflow: hidden;
    z-index: 9;
    transition: all 0.5s;
}

.sidebar .sidebar-inner {
    background: var(--theme-light);
    border-radius: 15px;
    height: 100%;
    position: relative;
    display: block;
    width: 100%;
    overflow-y: auto;
    padding: 10px 10px;
}

.sidebar .sidebar-inner a {
    border-left: 0px;
    padding: 7px 10px 7px 10px;
    border-radius: 6px;
    position: relative;
    margin-bottom: 3px;
    font-size: 15px;
    color: #303030;
    text-decoration: none;
    position: relative;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: block;
    transition: ease-in-out all 0s;
    width: 100%;
}

.sidebar .sidebar-inner a i {
    padding-right: 0;
    font-size: 14px;
    width: 24px;
    text-align: center;
    margin-right: 8px;
    transition: ease-in-out all 0s;
    color: #303030;
}

.sidebar .sidebar-inner a.active,
.sidebar .sidebar-inner a:hover {
    background: var(--table-head);
    transition: ease-in-out all 0s;
}

.sidebar .sidebar-inner a.active i,
.sidebar .sidebar-inner a:hover i {
    color: var(--theme-primary);
}

.sidebar .sidebar-inner a:before,
.sidebar .sidebar-inner a:before {
    transition: ease-in-out all 0s;
}

.sidebar .sidebar-inner a.active:before,
.sidebar .sidebar-inner a:hover:before {
    content: '';
    position: absolute;
    top: 4px;
    bottom: 4px;
    right: 6px;
    width: 4px;
    border-radius: 2px;
    background: var(--theme-primary);
    transition: ease-in-out all 0s;
}

.title-heading {
    float: left;
    width: 100%;
    padding: 10px 15px;
    margin: 0 0 15px;
    border-radius: 10px;
    background: var(--theme-light);
}

.title-heading .page-title {
    display: inline-block;
    float: left;
    margin: 6px 0px 0px;
    padding: 0px;
    font-size: 22px;
    font-weight: 500;
    color: var(--theme-primary);
}

.btn {
    outline: none;
    box-shadow: 0 0 0;
    font-size: 14px;
}

.table .btn{
    margin: 3px;
}

.btn:hover,
.btn:focus,
.btn:active {
    outline: none;
    box-shadow: 0 0 0 !important;
}

body .table {
    border: 0px;
}

body .table thead {
    position: sticky;
    top: 0;
}

body .table thead tr th {
    padding: 10px 15px !important;
    font-size: 14px !important;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #565656 !important;
    border: 0px;
    background: var(--table-head);
    background-color: var(--table-head);
    vertical-align: top;
}

body .table thead tr th:first-child {
    border-radius: 6px 0 0 6px;
}

body .table thead tr th:last-child {
    border-radius: 0 6px 6px 0;
}

body .tnc-popup .table thead tr th:first-child, body .tnc-popup .table thead tr th:last-child {
    border-radius: 0;
}

body .table tbody tr td {
    padding: 10px 15px;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #484848;
    border: 0px;
    vertical-align: middle !important;
    border-bottom: 1px solid var(--table-head);
}

body .tnc-popup .table tbody tr td {
    border: 1px solid var(--table-head);
    background: #fff;
}

body .table tbody tr:hover td {
    background: var(--theme-light);
}

body .table tbody tr.row-primary td {
    background: #cce5ff;
    border-bottom: 1px solid var(--table-head);
}

body .table tbody tr.row-primary:hover td {
    background: var(--theme-light);
    border-bottom: 1px solid var(--table-head);
}

body .table tbody tr.row-success td {
    background: #d4edda;
    border-bottom: 1px solid #c3e6cb;
}

body .table tbody tr.row-success:hover td {
    background: #c3e6cb;
    border-bottom: 1px solid #c3e6cb;
}

body .table tbody tr.row-danger td {
    background: #f8d7da;
    border-bottom: 1px solid #f5c6cb;
}

body .table tbody tr.row-danger:hover td {
    background: #f5c6cb;
    border-bottom: 1px solid #f5c6cb;
}

body .table tbody tr.row-warning td {
    background: #fff3cd;
    border-bottom: 1px solid #ffeeba;
}

body .table tbody tr.row-warning:hover td {
    background: #ffeeba;
    border-bottom: 1px solid #ffeeba;
}

body .table tbody tr.row-info td {
    background: #d1ecf1;
    border-bottom: 1px solid #bee5eb;
}

body .table tbody tr.row-info:hover td {
    background: #bee5eb;
    border-bottom: 1px solid #bee5eb;
}

body .table tbody tr.row-theme td {
    background: #d6d8d9;
    border-bottom: 1px solid #c6c8ca;
}

body .table tbody tr.row-theme:hover td {
    background: #c6c8ca;
    border-bottom: 1px solid #c6c8ca;
}


.table-link {
    font-size: 14px;
    color: var(--link);
    font-weight: 600;
}
.table-link:hover,
.table-link:focus {
    color: var(--theme-secondary);
}
.common-link {
    color: var(--link);
}
.common-link:hover,
.common-link:focus {
    color: var(--theme-secondary);
}

.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    margin-left: -1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.max-width-100 {
    max-width: 100%;
}

.form-group .error {
    width: 100%;
    margin-top: 0;
    font-size: 12px;
    color: #dc3545;
    font-weight: normal;
}

.width-200 {
    width: 200px;
    display: inline-block;
}

.badge {
    /*font-size: 10px;*/
    font-weight: 600;
    padding: 6px 8px;
    text-transform: uppercase;
    border: none;
}

/*.badge-success {
    border: 1px solid #0d541d;
}

.badge-danger {
    border: 1px solid #811a24;
}*/

.news-alert ul {
    padding: 0px 5px;
}
.news-alert .alert-desc {
    height: 170px;
    max-height: 170px;
    overflow: auto;
}
.news-alert .alert {
    padding: 10px 5px 10px 15px;
    box-shadow: 0 3px 10px rgb(0 0 0 / 16%);
}
.news-alert .alert:hover {
    box-shadow: 0 3px 15px rgb(0 0 0 / 35%);
}
.news-alert .alert hr {
    margin-bottom: 0.5rem !important;
}
body .btn-light {
    color: #212529;
    background-color: var(--table-head);
    border-color: var(--table-head);
}
body .btn-theme{
    background: var(--theme-primary);
    border-color: var(--theme-btn-border);
    color: #ffffff;
}
body .btn-theme.disabled, .btn-theme:disabled{
    background: var(--theme-primary);
    border-color: var(--theme-btn-border);
    color: #ffffff;
}
body .btn-theme:hover, body .btn-theme:active, body .btn-theme:focus{
    background: var(--theme-btn-border);
    border-color: var(--theme-btn-border);
    color: #ffffff;
}
body .btn-theme:not(:disabled):not(.disabled).active, body .btn-theme:not(:disabled):not(.disabled):active, body .show>.btn-theme.dropdown-toggle{
    background: var(--theme-btn-border);
    border-color: var(--theme-btn-border);
    color: #ffffff;
}
body .btn-outline-theme{
    background: #ffffff;
    border-color: var(--theme-btn-border);
    color: var(--theme-primary);
}
body .btn-outline-theme:hover, body .btn-outline-theme:active, body .btn-outline-theme:focus{
    background: var(--theme-btn-border);
    border-color: var(--theme-btn-border);
    color: #ffffff;
}
body .btn-outline-theme:not(:disabled):not(.disabled).active, body .btn-outline-theme:not(:disabled):not(.disabled):active, body .show>.btn-outline-theme.dropdown-toggle{
    background: var(--theme-btn-border);
    border-color: var(--theme-btn-border);
    color: #ffffff;
}
.btn-xs{
    padding: .10rem 0.35rem;
}
.btn-mark-settled{
    position: fixed;
    top: 150px;
    right: 25px;
    cursor: pointer;
    z-index: 99999;
}

.setting-tabs{
    display: block;
    width: 100%;
    position: relative;
}
.setting-tabs .nav.nav-pills{
    display: block;
    width: 100%;
    position: relative;
}
.setting-tabs .nav.nav-pills .nav-item{
    display: inline-block;
}
.setting-tabs .nav.nav-pills .nav-item .nav-link{
    display: inline-block;
    margin-right: 15px;
    background: var(--theme-light);
    border-radius: 5px;
    font-size: 14px;
    color: #666666;
    font-weight: normal;
    text-decoration: none;
    border: 1px solid var(--theme-light);
    position: relative;
    margin-bottom: 15px;
}
.setting-tabs .nav.nav-pills .nav-item .nav-link:hover, .setting-tabs .nav.nav-pills .nav-item .nav-link.active{
    background: #ffffff;
    color: #222222;
    border-color: var(--theme-primary);
}
.setting-tabs .nav.nav-pills .nav-item .nav-link.active:before{
    content: '';
    position: absolute;
    left: calc(50% - 8px);
    bottom: -5px;
    width: 16px;
    height: 5px;
    background: var(--theme-primary);
    border-radius: 5px;
}
.setting-tabs .tab-content{
    display: block;
    position: relative;
    width: 100%;
    border: 1px solid #e9e9e9;
    border-radius: 10px;
    padding: 15px;
}
.nav-link.disabled{
    background: #D3D3D3 !important;
}
.rows{
    float: left;
    width: 100%;
}

.form-control.disabled{
    background: #e9ecef;
}

.btn-outline-golden {
    color: var(--theme-secondary) !important;
    border-color: var(--theme-secondary) !important;
}
.btn-outline-golden:hover {
    color: var(--theme-primary) !important;
    background-color: var(--theme-secondary) !important;
    border-color: var(--theme-secondary) !important;
}

body .btn-golden {
    color: #fff;
    background: var(--theme-secondary);
    border-color: #f89601;
}

body .btn-golden:hover, body .btn-golden:active, body .btn-golden:focus {
    color: #fff;
    background: #e34124;
    border-color: #e83212;
}
.hide-w{
    display: none !important;
}
.collapse-menu{
    width: 24px;
    height: 24px;
    background: var(--theme-primary);
    box-shadow: 0 4px 8px 0 rgb(140 119 149 / 15%);
    display: -webkit-inline-flex;
    display: -moz-inline-flex;
    display: -ms-inline-flex;
    display: -o-inline-flex;
    display: inline-flex;
    -ms-align-items: center;
    align-items: center;
    justify-content: center;
    color: #fff;
    right: 50%;
    margin-right: -16px;
    bottom: 10px;
    top: auto;
    border-radius: 50%;
    position: absolute;
}
.collapse-aside .collapse-menu{
    transform: rotate(180deg);
}
.collapse-aside .sidebar{
    width: 86px;
    transition: all 0.5s;
}
.collapse-aside .sidebar .sidebar-inner a{
    text-overflow: unset;
}
.collapse-aside .sidebar .sidebar-inner a span{
    display: none;
}
.collapse-aside div.content{
    margin-left: 86px;
    transition: all 0.5s;
}
.collapse-aside .sidebar .sidebar-inner a.active:before, .collapse-aside .sidebar .sidebar-inner a:hover:before{
    top: 8px;
    bottom: 8px;
}

.box-view {
    background: #f5f5f5;
    padding: 10px 15px;
    margin: 0px;
    border-radius: 10px;
    word-wrap: break-word;
    overflow: auto;
    max-height: 535px;
    margin-bottom: 15px;
    border: 1px solid #f5f5f5;
}

.box-view label {
    margin-bottom: 0px;
    color: #888;
    font-size: 13px;
    font-weight: bold;
}

.box-view .text-val {
    margin-bottom: 10px;
}

.box-view h5 {
    color: var(--theme-secondary);
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}

.box-white {
    background-color: #ffffff !important;
}
.box-light {
    color: #818182;
    background-color: #fdfdfe;
}

.box-success {
    color: #155724;
    background-color: #d4edda !important;
    border-color: #c3e6cb;
}
.box-success h5{
    border-bottom: 1px solid #c3e6cb;
}
.box-success .table thead tr th{
    background-color: #155724;
    color: #fff !important;
}
.box-success .table tbody tr td{
    border-bottom: 1px solid #c3e6cb;
}
.box-success .table tbody tr:hover td{
    background: #c3e6cb;
}

.box-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}
.box-danger h5{
    border-bottom: 1px solid #f5c6cb;
}
.box-danger .table thead tr th{
    background-color: #721c24;
    color: #fff !important;
}
.box-danger .table tbody tr td{
    border-bottom: 1px solid #f5c6cb;
}
.box-danger .table tbody tr:hover td{
    background: #f5c6cb;
}

.box-info {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
}
.box-info h5{
    border-bottom: 1px solid #bee5eb;
}
.box-info .table thead tr th{
    background-color: #0c5460;
    color: #fff !important;
}
.box-info .table tbody tr td{
    border-bottom: 1px solid #bee5eb;
}
.box-info .table tbody tr:hover td{
    background: #bee5eb;
}

.box-primary {
    color: #004085;
    background-color: #cce5ff;
    border-color: #b8daff;
}
.box-primary h5{
    border-bottom: 1px solid #b8daff;
}
.box-primary .table thead tr th{
    background-color: #004085;
    color: #fff !important;
}
.box-primary .table tbody tr td{
    border-bottom: 1px solid #b8daff;
}
.box-primary .table tbody tr:hover td{
    background: #b8daff;
}

.box-secondary {
    color: #383d41;
    background-color: #e2e3e5;
    border-color: #d6d8db;
}
.box-secondary h5{
    border-bottom: 1px solid #d6d8db;
}
.box-secondary .table thead tr th{
    background-color: #383d41;
    color: #fff !important;
}
.box-secondary .table tbody tr td{
    border-bottom: 1px solid #d6d8db;
}
.box-secondary .table tbody tr:hover td{
    background: #d6d8db;
}

.box-warning {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
}
.box-warning h5{
    border-bottom: 1px solid #ffeeba;
}
.box-warning .table thead tr th{
    background-color: #856404;
    color: #fff !important;
}
.box-warning .table tbody tr td{
    border-bottom: 1px solid #ffeeba;
}
.box-warning .table tbody tr:hover td{
    background: #ffeeba;
}

.tnc-popup .btn-accept {
    position: fixed;
    z-index: 9999;
    bottom: 10px;
    left: 51%;
}

.tnc-popup .btn-cancel {
    position: fixed;
    z-index: 9999;
    bottom: 10px;
    right: 51%;
}

.tnc-popup .box-view {
    max-height: 10535px;
}

.section-h {
    color: var(--theme-secondary);
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}

.btn-toggle {
    color: #212529;
    background-color: #f8f9fa;
    border-color: var(--theme-secondary);
}

.btn-toggle:not(:disabled):not(.disabled).active, .btn-toggle:not(:disabled):not(.disabled):active, .show>.btn-toggle.dropdown-toggle {
    color: #ffffff;
    background-color: var(--theme-secondary);
    border-color: var(--theme-secondary);
}

.btn-toggle:hover {
    color: #212529;
    background-color: #e2e6ea;
    border-color: #dae0e5;
}

.btn-toggle.toggle-1 {
    /*color: var(--theme-secondary);*/
    background-color: #f8f9fa;
    border-color: var(--theme-secondary);
}

.btn-toggle.toggle-2 {
    color: #e34124;
    background-color: #f8f9fa;
    border-color: #e34124;
}

.btn-toggle.toggle-1:not(:disabled):not(.disabled).active, .btn-toggle.toggle-1:not(:disabled):not(.disabled):active, .show>.btn-toggle.toggle-1.dropdown-toggle {
    color: #ffffff;
    background-color: var(--theme-secondary);
    border-color: var(--theme-secondary);
}

.btn-toggle.toggle-2:not(:disabled):not(.disabled).active, .btn-toggle.toggle-2:not(:disabled):not(.disabled):active, .show>.btn-toggle.toggle-2.dropdown-toggle {
    color: #ffffff;
    background-color: #e34124;
    border-color: #e34124;
}

.text-bg{
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;    
    min-width: 60px;
    padding: .375rem .75rem; 
    border-radius: .25rem;
    line-height: 1.5;
}
.text-bg-lg{
    padding: .50rem .75rem; 
}
.text-bg-primary{
    background: var(--primary-light);
    color: var(--primary);
}
.text-bg-red{
    background: var(--red-light);
    color: var(--red);
}
.text-bg-orange{
    background: var(--orange-light);
    color: var(--orange);
}
.text-bg-green{
    background: var(--green-light);
    color: var(--green);
}
.text-bg-purple{
    background: var(--purple-light);
    color: var(--purple);
}
.text-bg-sky{
    background: var(--sky-light);
    color: var(--sky);
}
.text-bg-yellow{
    background: var(--yellow-light);
    color: var(--yellow);
}
.text-bg-blue{
    background: var(--blue-light);
    color: var(--blue);
}
.text-bg-pink{
    background: var(--pink-light);
    color: var(--pink);
}
.text-bg-yesb{
    background: var(--yesb-light);
    color: var(--yesb);
}
.text-bg-sbin{
    background: var(--sbin-light);
    color: var(--sbin);
}
.agreement-pdf{
    height: 500px;
    width: 100%;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,.125);
}

.aeps-banner{
    box-shadow: 0 1px 2px 0 rgba(60,64,67,0.302), 0 1px 3px 1px rgba(60,64,67,0.149);
    /*border: 1px solid rgba(0,0,0,.125);*/
    border-radius: 10px;
    padding: 20px;
}

.gradient-bg-vital-ocean{
    background: linear-gradient(90deg, #1CB5E0 0%, #000851 100%);
}
.gradient-bg-kale-salad{
    background: linear-gradient(90deg, #00C9FF 0%, #92FE9D 100%);
}
.gradient-bg-disco-club{
    background: linear-gradient(90deg, #FC466B 0%, #3F5EFB 100%);
}
.gradient-bg-shady-lane{
    background: linear-gradient(90deg, #3F2B96 0%, #A8C0FF 100%);
}
.gradient-bg-retro-wagon{
    background: linear-gradient(90deg, #FDBB2D 0%, #22C1C3 100%);
}
.gradient-bg-fresco-crush{
    background: linear-gradient(90deg, #FDBB2D 0%, #3A1C71 100%);
}
.gradient-bg-cucumber-water{
    background: linear-gradient(90deg, #e3ffe7 0%, #d9e7ff 100%);
}
.gradient-bg-sea-salt{
    background: linear-gradient(90deg, #4b6cb7 0%, #182848 100%);
}
.gradient-bg-par-four{
    background: linear-gradient(90deg, #9ebd13 0%, #008552 100%);
}
.gradient-bg-ooey-gooey{
    background: linear-gradient(90deg, #0700b8 0%, #00ff88 100%);
}
.gradient-bg-bloody-mimosa{
    background: linear-gradient(90deg, #d53369 0%, #daae51 100%);
}
.gradient-bg-lovely-lilly{
    background: linear-gradient(90deg, #efd5ff 0%, #515ada 100%);
}
.gradient-bg-aqua-spray{
    background: linear-gradient(90deg, #00d2ff 0%, #3a47d5 100%);
}
.gradient-bg-mello-yellow{
    background: linear-gradient(90deg, #f8ff00 0%, #3ad59f 100%);
}
.gradient-bg-dusty-cactus{
    background: linear-gradient(90deg, #fcff9e 0%, #c67700 100%);
}
.gradient-bg-aeps{
    background: linear-gradient(90deg, #ffdaa1 0%, #efd5ff 100%);
}

:focus-visible {
    outline: var(--theme-secondary) auto 1px;
    background: var(--theme-secondary-light) !important;
    background-color: var(--theme-secondary-light) !important;
}

.wp-30{
    width: 30%;
}
.wp-68{
    width: 68%;
}
.inline-block{
    display: inline-block;
}
.btn-check {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
}
.btn-check-label {
    position: relative;
    margin-bottom: 10px !important;
    width: 100%;
    height: 51px;
    color: #888;
    cursor: pointer;
    font-weight: 400;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: var(--table-head);
    border: none;
    padding: .375rem .75rem;
    line-height: 1.5;
    border-radius: 10px;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.btn-check:active+.btn-check-label, .btn-check:checked+.btn-check-label, .btn-check-label.active, .btn-check-label.dropdown-toggle.show, .btn-check-label:active {
    color: #fff;
    background-color: var(--theme-primary);
    border-color: #28a745;
}
.btn-check:active+.btn-check-label>.check-icon, .btn-check:checked+.btn-check-label>.check-icon, .btn-check-label.active>.check-icon, .btn-check-label.dropdown-toggle.show>.check-icon, .btn-check-label:active>.check-icon {
    display: block;
}
.btn-check-label .text {
    font-size: 13px;
    font-weight: bold;
    padding: 0px 35px 0px 30px;
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.btn-check-label .icon {
    position: absolute;
    top: 0px;
    left: 0px;
    background: var(--theme-primary);
    border-radius: 10px 0px 0px 10px;
    padding: 15px 8px;
    color: #ffffff;
    font-weight: bold;
    width: 36px;
    text-align: center;
}
.btn-check-label .badge{
    position: absolute;
    top: 0px;
    right: 0px;
    font-size: 9px;
    background: #666;
    border-radius: 0px 10px;
    padding: 2px 8px;
    color: #c6c6c6;
    font-weight: bold;
}
.btn-check-label .check-icon {
    display: none;
    position: absolute;
    top: 0px;
    right: 0px;
    border-radius: 10px 0px 0px 10px;
    padding: 15px 6px 10px 6px;
    color: #28a745;
    font-weight: bold;
    width: 36px;
    text-align: center;
    font-size: 18px;
}

.card-widget {
    display: flex;
    align-items: center;
    width: 150px;
    height: 150px;
    border-radius: 16px;
    /*margin-bottom: 25px;*/
    border: none;
    /*box-shadow: 0 1px 2px 0 rgba(0,0,0,0.302), 0 1px 3px 1px rgba(0,0,0,0.149);*/
}
.card-widget .detail {
    color: var(--theme-primary);
    font-size: 16px;
    font-weight: 600;
    padding: 10px;
    background-size: 100%;
    line-height: 1.5;
    margin: auto;
    text-transform: uppercase;
}
.card-widget img {
    position: relative;
    width: 50px;
    margin-top: 25px;
    -webkit-filter: opacity(.5) drop-shadow(0 0 0 var(--theme-primary));  
    filter: opacity(.5) drop-shadow(0 0 0 var(--theme-primary));
}
.card-bbps {
    display: inline-block;
}
.card-bbps .detail {
    font-size: 13px;
    text-transform: none;
    font-weight: bold;
}

.min-h-50 {
    min-height: 50px;
}
.min-h-100 {
    min-height: 100px;
}
.min-h-150 {
    min-height: 150px;
}
.min-h-200 {
    min-height: 200px;
}
.min-h-250 {
    min-height: 250px;
}
.min-h-300 {
    min-height: 300px;
}
.min-h-350 {
    min-height: 350px;
}
.min-h-400 {
    min-height: 400px;
}
.min-h-450 {
    min-height: 450px;
}
.min-h-500 {
    min-height: 500px;
}

@media (max-width:1440px) {
    
}
@media (max-width:1399px) {
    .table-responsive .table{
        width: 1400px;
    }
}

@media (max-width:1199px) {
    .qr-print-popup{
        max-width: 100% !important;
    }
    #QRTable{
        width: 100%;
    }
}

@media (max-width:991px) {
    .log-in .inner-log-in .login-detais{
        width: 100%;
        padding-right: 0px;
        text-align: center;
    }
    .log-in .inner-log-in .login-detais .banner-img{
        display: none;
    }
    .log-in .inner-log-in .form-aside{
        width: 100%;
    }
    .QR-logo{
        width: 150px;
    }
    .font-50{
        font-size: 20px;
    }
    .font-35{
        font-size: 16px;
    }
    #QRTable svg{
        width: 85% !important;
        height: auto !important;
    }
    .collapse-menu svg{
        width: 15px !important;
        height: 15px !important;
    }
    .QR-UPI-logo{
        width: 60%;
    }
    .box-view{
        max-height: 100%;
    }
}

@media (max-width:767px) {
    .log-in .inner-log-in .form-aside{
        margin-top: 20px;
        padding: 20px 15px;
    }
    .hide-w{
        display: block !important;
    }
    .hide-m{
        display: none !important;
    }
    .title-heading .page-title{
        display: block;
        width: 100%;
        margin-top: 0px;
        margin-bottom: 8px;
    }
    .title-heading .page-title ~ .pull-right{
        display: block;
        width: 100%;
    }
    .title-heading .page-title ~ .pull-right .text-right{
        text-align: left !important;
    }
    .title-heading .page-title ~ .pull-right .btn{
        margin-bottom: 5px;
        display: block;
        width: 100%;
        text-align: center;
        margin-left: 0px !important;
        margin-right: 0rem!important;
    }
    .mpin-form input{
        margin-right: 2px;
        width: 30px !important;
        height: 32px;
        font-size: 14px;
    }
    .collapse-aside div.content{
        margin-left: 66px;
    }
    div.content{
        margin-left: 66px;
    }
    .title-heading .page-title{
        font-size: 18px;
    }
    .title-heading .page-title ~ .pull-right .text-right .btn, .title-heading .page-title ~ .pull-right .text-right .btn.ml-2{
        margin-left: 0px !important;
        margin-right: 0rem!important;
    }
    .title-heading .page-title ~ .pull-right .text-right .btn.ml-3{
        margin-left: 0px !important;
        margin-right: 0rem!important;
    }
    .sidebar{
        padding: 0px 0px 20px 0px;
        width: 200px;
    }
    .collapse-aside .sidebar{
        width: 66px;
    }
    .collapse-menu{
        margin-right: -12px;
    }
    .sidebar .sidebar-inner{
        border-radius: 0 15px 15px 0;
    }
    .setting-tabs .nav.nav-pills .nav-item .nav-link{
        margin-right: 8px;
        padding: 6px;
        font-size: 12px;
    }
    .box-view{
        max-height: 100%;
    }

    *:hover::-webkit-scrollbar {
        width: 0px;
        height: 0px;
    }

    ::-webkit-scrollbar {
        width: 0px;
        height: 0px;
    }
}

@media print {
    .QR-logo{
        width: 250px;
    }
    .font-50{
        font-size: 50px;
    }
    .font-35{
        font-size: 35px;
    }
    #QRTable svg{
        width: 600px !important;
        height: 600px !important;
    }
    .QR-UPI-logo{
        width: 600px;
    }
}