:root {
    --color-primary: #2031CF;
    --color-primary-darken: #1d2ba7;
    --color-primary-inverse: #68F0FF;
    --color-secondary: #F50606;
    --color-secondary-light: #fac6c6;
    --color-tertiary: #F5F5F5;
    --color-tertiary-dark: #ECECEC;
    --color-tertiary-darken: #9A9A9A;
}




.swiper-button-next{
    right:-10px;
}
.swiper-button-prev{
    left: 0px !important;;
}

.swiper-button-next,
.swiper-button-prev{
    width:50px;
    height:50px;
    padding:20px;
    border-radius:50%;
    background-color:#fff;
    top: 40% !important;;
}
.swiper-button-next::after,
.swiper-button-prev::after{
    font-size:22px !important;
    font-weight: bold;
}

.loader {
    z-index: 1000;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 50%);
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader .body {
    max-width: 300px;
    max-height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}



.form {
    /* padding-bottom: 4rem; */
    background-color: var(--color-tertiary);
}

form.form legend {
    color: var(--color-secondary);
    font-weight: bold;
    /* font-size: 2rem; */
    text-transform: uppercase;
    margin-bottom:2rem;
}

form.form label {
    color: #9A9A9A;
    text-transform: uppercase;
}

form.form .input-chain .icon {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-primary);
    /* border: 1px solid var(--color-primary); */
    color: var(--color-tertiary);
    padding: 1.280rem;
}

form.form .butn {
    padding: .8rem 1.5rem;
    background-color: var(--color-primary);
    color: var(--color-tertiary);
    border: 0px;
    font-size: inherit;
    text-transform: uppercase;
    display: inline-block;
    cursor: pointer;
}

form.form .butn-danger {
    background-color: var(--color-secondary);
}

form.form .butn+small {
    display: block;
    margin-top: 2rem;
    color: var(--color-secondary);
}

.form .form-options a {
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: inline-block;
    margin-top:1rem;
}

/* Styles for Login, signup reset_password  */

.gateway_wrapper {
    background-color: var(--color-primary);
    min-height: 100vh;
    height: 100vh;
    overflow-y: auto;
    padding: 2rem 0;
}

.gateway_wrapper .card {
    background-color: var(--color-tertiary);
    padding: 2rem;
}

.gateway_wrapper .card .disabed {
    background-color: var(--color-tertiary-dark)!important;
    cursor: not-allowed;
}

input[name="restpass"] {
    display: none;
}

.form_progressbar {
    position: relative;
    padding-bottom: 2rem;
    display: flex;
    width: 100%;
    justify-content: space-between;
    color: var(--color-tertiary);
    background-color: var(--color-primary);
    text-align: center;
    font-size:1rem;
}

.form_progressbar::after {
    content: '';
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: .5rem;
    background-color: var(--color-primary-darken);
    position: absolute;
    left: 0;
    bottom: 0rem;
}

.button-chain::after {
    content: '';
    clear: both;
    display: table;
}

.form_progressbar span {
    display: block;
    z-index: 1;
    position: relative;
    width: 10rem;
}

.form_progressbar span::after {
    content: '';
    display: block;
    width: 100%;
    height: .5rem;
    position: absolute;
    left: 0;
    bottom: -2rem;
    background-color: transparent;
    transition: all 0.5s ease;
    /* background-color: var(--color-tertiary); */
}

.form input[type="radio"]#detail:checked~.form_progressbar span.detail::after {
    background-color: var(--color-primary-inverse);
}

.form input[type="radio"]#detail:checked~.form_progresswrapper .defCard {
    margin-left: 0px;
}

.form input[type="radio"]#otp:checked~.form_progressbar span.otp::after {
    background-color: var(--color-primary-inverse);
}

.form input[type="radio"]#otp:checked~.form_progresswrapper .defCard {
    margin-left: -100%;
}

.form input[type="radio"]#reset:checked~.form_progressbar span.reset::after {
    background-color: var(--color-primary-inverse);
}

.form input[type="radio"]#reset:checked~.form_progresswrapper .defCard {
    margin-left: -200%;
}

.form_progresswrapper {
    display: flex;
    width: 100%;
}

.form_progresswrapper .card {
    flex-shrink: 0;
    width: 100%;
    transition: all .5s ease;
}


/* Styles for Dashboard */

.dashboard_layout {
    display: flex;
    min-height: 100vh;
    padding: 1.2rem;
    background-color: var(--color-tertiary);
    overflow: hidden;
}

.dashboard_layout aside.aside {
    max-width: 30rem;
    width: 20rem;
    background-color: var(--color-primary);
    height: calc(100vh - 2.4rem);
    overflow: hidden;
    overflow-y: auto;
    margin-right: 1.5rem;
    border-top-left-radius: 1.5rem;
    border-bottom-left-radius: 1.5rem;
    transition: width .3s ease;
}

.dashboard_layout #dashboard_input {
    display: none;
}

.dashboard_layout #dashboard_input:checked~aside.aside {
    width: 0px;
    margin-right: 0px;
}

.dashboard_layout main.main {
    flex: 1;
    height: 100%;
    overflow: hidden;
}

.dashboard_layout main.main header.header {
    text-transform: uppercase;
    height: 5rem;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items:center;
    padding: 0 2rem;
    border-top-right-radius: 1.5rem;
}

.dashboard_layout main.main header.header .header_icon {
    font-size: 1.2rem;
    color: var(--color-primary);
    cursor: pointer;
    margin:0;
}

.dashboard_layout main.main header.header .brand {
    font-size: 1rem;
    font-weight: bold;
    color: var(--color-secondary);
}

.dashboard_layout main.main section.main_content {
    max-height: calc(100vh - 5rem);
    height: calc(100vh - 5rem);
    overflow: hidden;
    overflow-y: auto;
    padding-bottom: 2rem;
}

.dashboard_layout .balance_card {
    background-color: var(--color-primary-darken);
}

.dashboard_layout .savings_card {
    background-color: #00BE59;
}

.dashboard_layout .loan_card {
    background-color: var(--color-secondary);
}

.dashboard_layout .balance_status .card {
    height: auto;
    color: var(--color-tertiary);
    display: flex;
    justify-content: space-between;
    padding: 2rem;
    border-radius: .5rem;
}

.dashboard_layout .balance_status .card_description {
    display: flex;
    flex-direction: column;
    font-weight: bold;
}

.dashboard_layout .balance_status .card_description i {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.dashboard_layout .balance_status .card_amount {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 2rem;
}

.dashboard_layout .balance_status .card_amount span {
    display: block;
}

.dashboard_layout .balance_status .card_amount span:nth-of-type(2) {
    font-size: 1rem;
    color: rgb(219, 219, 219);
}

.dashboard_layout .balance_status .divider {
    width: .1rem;
    height: 100%;
    background-color: var(--color-tertiary-dark)
}

.graph_card {
    box-shadow: 0 25px 30px rgba(0, 0, 0, 10%);
}

.quick_links .card {
    display: block!important;
    height: auto;
}

.quick_list {
    display: block;
    text-decoration: none;
    padding: 1.6rem;
    display: flex;
    justify-content: space-between;
    width: 100%;
    color: black;
}

.quick_list:hover {
    background-color: rgb(238, 255, 240);
}

.quick_list:not(:last-of-type) {
    border-bottom: 1px solid rgb(224, 224, 224);
}

.quick_icon {
    font-size: 2rem;
    width: 4rem;
    height: 4rem;
    color: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}


/* Accont page */

.dashboard_layout .accounts {
    width: 100%;
}

.dashboard_layout .card {
    width: 100%;
    background-color: #fff;
    box-shadow: 0 25px 30px rgba(0, 0, 0, 10%);
    /* overflow: auto;
    overflow-x: hidden; */
    height:100%;
}


/* Forms page */

.dashboard_layout .forms .form_card {
    width: auto;
    height: auto;
    box-shadow: 0 25px 30px rgba(0, 0, 0, 10%);
    font-size: 1.7rem;
}

.dashboard_layout .forms .form_card .form_list {
    padding: 2rem;
    border-bottom: 1px solid rgb(207, 207, 207);
    flex-wrap: wrap;
    align-items: center;
}

.dashboard_layout .forms .form_card .form_list div:nth-of-type(1) {
    min-width: 35rem;
}

.dashboard_layout .forms .form_card .form_list p {
    color: var(--color-secondary)
}

.dashboard_layout .forms .form_card .form_list .form_actions a {
    font-weight: 500;
    padding: .5rem 2rem;
    border: 1px solid;
    border-radius: 2rem;
    text-decoration: none;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.dashboard_layout .forms .form_card .form_list .form_actions a:hover {
    background-color: var(--color-tertiary);
}

.dashboard_layout .forms .form_card .form_list .form_actions a:nth-child(1) {
    color: var(--green);
}

.dashboard_layout .forms .form_card .form_list .form_actions a:nth-child(2) {
    color: var(--color-primary);
}


/* Form page */

.form-page.tab .content>div:not(:nth-of-type(1)) {
    overflow: auto;
    overflow-x: hidden;
}

.form-page div#pending table.table tbody a {
    border: 1px solid;
}


/* newpurchasepgae */

.newpurchase {
    min-height: 100%;
    padding: 0px;
}

.newpurchase .nav {
    padding: 1.5rem;
    border-bottom: 1px solid #d8d8d8;
    align-items: center;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: #fff;
    margin-bottom: 2rem;
}

.newpurchase .nav .purchase_details {
    display: flex;
}

.newpurchase .nav .purchase_details i {
    font-size: 2.5rem;
}

.newpurchase .nav .purchase_details span {
    display: inline-block;
    border: 1px solid;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    position: absolute;
    top: -1.2rem;
    right: -1.2rem;
    color: var(--color-tertiary);
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
}

.newpurchase .nav .purchase_details .cart {
    color: var(--color-primary);
    margin-right: 6rem;
    position: relative;
}

.newpurchase .nav .purchase_details .cart span {
    background-color: var(--color-primary);
}

.newpurchase .nav .purchase_details .wish {
    color: var(--color-secondary);
    position: relative;
}

.newpurchase .nav .purchase_details .wish span {
    background-color: var(--color-secondary);
}

.newpurchase .nav input {
    padding: 1.5rem 2rem;
    width: 40rem;
    border-radius: 30rem;
    background-color: var(--color-tertiary);
    border: 0px;
    outline: 0px;
}

.newpurchase .card {
    background-color: var(--color-tertiary);
    height: auto;
    border: 1px solid rgb(211, 211, 211);
    border-radius: .8rem;
    box-shadow: none;
}

.newpurchase .card .head .badge-group {
    background-color: rgba(165, 165, 165, 0.2);
    width: 100%;
    margin: 0px;
    padding: 1rem;
    position: absolute;
    top: 0;
}

.newpurchase .card .head .badge-group a {
    padding: 1rem 1.5rem;
    text-decoration: none;
    border-radius: 20rem;
    background-color: var(--color-tertiary);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

.newpurchase .card .head .badge-group a:hover {
    background-color: var(--color-tertiary-darken);
    color: var(--color-tertiary)!important;
}

.purchasehistorypage .card {
    box-shadow: none !important;
}

.cartpage .main_item {
    text-align: left!important;
    column-count: 2;
    vertical-align: text-top;
}

.cartpage .main_item img {
    width: 8rem;
    height: 8rem;
    border-radius: 1rem;
    margin-right: 1rem;
    float: left;
    border: 1px solid rgb(216, 216, 216);
}

.cartpage input[type="number"] {
    padding: 1rem;
    max-width: 10rem;
    border-radius: 1rem;
    border: 1px solid rgb(201, 201, 201);
    color: inherit;
    outline: none;
}

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

.documentpage .uploadBtn {
    display: inline-block;
    position: sticky;
    right: 2rem;
    bottom: 2rem;
    display: flex;
    justify-content: flex-end;
    padding-right: 3rem;
    font-size:1rem;
}

@media(max-width:900px) {
    .swiper-button-next,
    .swiper-button-prev{
        display:none!important;
    }
    
    /* general */
    .dashboard_layout aside.aside {
        position: fixed;
        left: 0px;
        top:5em;
        z-index: 100;
        padding-top:0em;
        border-top-left-radius: 0px;
    }
    .dashboard_layout aside.aside ul {
        padding-left: .8em;
    }
    .dashboard_layout main.main header.header {
        position: relative;
        z-index: 2;
        padding: 0 1rem;

    }
    /* Form page */
    .form-page div .card {
        padding: 0!important;
        /* margin-top: 7rem; */
    }
    .form-page div table.table tbody a:nth-child(1) {
        margin: 0!important;
        margin-bottom: 1rem!important;
    }
    .form-page div table.table tbody a {
        display: block;
        max-width: 100%;
        width: 10rem!important;
        color: #111;
    }
    .documentpage table td a {
        display: inline-block;
        text-align: center;
        width: 100% !important;
    }
}

.graph-container{
    height: 230px; 
}

@media(max-width:750px) {
    /* html {
        font-size: 9px;
    } */
    
    /* Styles for Login, signup reset_password  */
    .dashboard_layout{
        padding:0px;
    }

    .dashboard_layout main.main section.main_content {
        padding: 16px;
    }
    
    .graph-container{
        height: auto; 
    }
    canvas{
       min-height: 300px!important; 
    }

   
    .gateway_wrapper {
        background-color: var(--color-primary);
    }
    .gateway_wrapper [class^=take-] {
        padding: 0px;
        margin: 0px!important;
        padding: 0px !important;
    }
    .gateway_wrapper .chain {
        margin: 0px!important;
        padding: 0px !important;
    }
    .gateway_wrapper .form,
    .gateway_wrapper .card {
        background-color: var(--color-primary);
    }
    .gateway_wrapper form.form legend {
        color: var(--color-tertiary);
    }
    .gateway_wrapper .card form.form label,
    .gateway_wrapper .card label,
    .gateway_wrapper small {
        color: var(--color-tertiary-dark)!important;
    }
    .gateway_wrapper form.form .input-chain .icon {
        background-color: var(--color-tertiary-dark);
        color: var(--color-primary);
    }
    .gateway_wrapper #loginform.form label {
        color:var(--light);
    }
    .gateway_wrapper .form.form .butn {
        line-height: 1.5em;
        background-color: var(--red);
    }
    .gateway_wrapper .form .form-options a {
        color: var(--color-tertiary-dark)!important;
    }
    /* Dashoboard styles */
    /* .dashboard_layout main.main header.header .brand {
        display: none;
        margin-left: 3rem;
    }
    .dashboard_layout #dashboard_input:checked~main.main header.header .brand {
        display: block;
    } */
    .dashboard_layout aside.aside {
        max-width: 70vw;
        width: 70vw;
        /* background-color: var(--color-primary);
        height: calc(100vh - 2.4rem);
        overflow: hidden;
        overflow-y: auto;
        margin-right: 1.5rem;
        border-top-left-radius: 1.5rem;
        border-bottom-left-radius: 1.5rem;
        transition: width .3s ease; */
    }
    .quick_links {
        margin-top: 1.5em;
    }
    /* acount page */
    .dashboard_layout .chain {
        margin: 0!important;
    }
    /* forms page */
    form.form .butn {
        padding: 1rem 1.2rem;
    }
    .dashboard_layout .forms .chain {
        margin: 0!important;
    }
    .form .form_progresswrapper .card {
        padding: 1.5em!important;
    }
    .forms .form_card .form_list div:nth-of-type(1) {
        flex-basis: 1;
        margin-bottom: 2rem;
    }
    /* newpurchasepgae */
    .newpurchase .nav {
        justify-content: center;
    }
    .purchasehistorypage {
        padding: 0px!important;
    }
}

@media(max-width:350px) {
    /* forms page */
    .form {
        /* margin-top: 5rem; */
    }
    /*form page */
    .form-page div#pending .card {
        /* margin-top: 22rem; */
    }
}