/*
==================================
Table of content 
==================================

1. variable
2. Bootstrap default css
3. utility
4. text
5. body
6. button
7. form element
8. loader
9. header
10. avatar
11. sidebar
12. card
13. swiper sliders
14. list 
15. footer
16. dark mode
17. filter
18. Full calendar
19. Logo
20. Tabs
21. Tags
22. Thank you
23. RTL

*/



/*!
 * Bootstrap v5.0.1 (https://getbootstrap.com/)
 * Copyright 2011-2021 The Bootstrap Authors
 * Copyright 2011-2021 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */

:root {
    --bs-blue: #3c63e2;
    --bs-indigo: #3c63e2;
    --bs-purple: #3c63e2;
    --bs-pink: #d63384;
    --bs-red: #f73563;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffbd17;
    --bs-green: #00dfa3;
    --bs-teal: #0ab2be;
    --bs-cyan: #0dcaf0;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-primary: #3c63e2;
    --bs-secondary: #6c757d;
    --bs-success: #00dfa3;
    --bs-info: #0dcaf0;
    --bs-warning: #ffbd17;
    --bs-danger: #f73563;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
}

*,
*::before,
*::after {
    box-sizing: border-box;
}


.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(var(--bs-gutter-y) * -1);
    margin-right: calc(var(--bs-gutter-x) * -.5);
    margin-left: calc(var(--bs-gutter-x) * -.5);
}





.fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
}

.fixed-bottom {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
}

.sticky-top {
    position: sticky;
    top: 0;
    z-index: 1020;
}



.h-25 {
    height: 25% !important;
}

.h-50 {
    height: 50% !important;
}

.h-75 {
    height: 75% !important;
}

.h-100 {
    height: 100% !important;
}

.h-auto {
    height: auto !important;
}

.mh-100 {
    max-height: 100% !important;
}

.vh-100 {
    height: 100vh !important;
}

.min-vh-100 {
    min-height: 100vh !important;
}



.justify-content-start {
    justify-content: flex-start !important;
}

.justify-content-end {
    justify-content: flex-end !important;
}

.justify-content-center {
    justify-content: center !important;
}

.justify-content-between {
    justify-content: space-between !important;
}

.justify-content-around {
    justify-content: space-around !important;
}

.justify-content-evenly {
    justify-content: space-evenly !important;
}

.align-items-start {
    align-items: flex-start !important;
}

.align-items-end {
    align-items: flex-end !important;
}

.align-items-center {
    align-items: center !important;
}

.align-items-baseline {
    align-items: baseline !important;
}

.align-items-stretch {
    align-items: stretch !important;
}

.align-content-start {
    align-content: flex-start !important;
}

.align-content-end {
    align-content: flex-end !important;
}

.align-content-center {
    align-content: center !important;
}

.align-content-between {
    align-content: space-between !important;
}

.align-content-around {
    align-content: space-around !important;
}

.align-content-stretch {
    align-content: stretch !important;
}

.align-self-auto {
    align-self: auto !important;
}

.align-self-start {
    align-self: flex-start !important;
}

.align-self-end {
    align-self: flex-end !important;
}

.align-self-center {
    align-self: center !important;
}

.align-self-baseline {
    align-self: baseline !important;
}

.align-self-stretch {
    align-self: stretch !important;
}



/*!
 finwallapp customize css starts here 
 * finwallapp v2 (https://maxartkiller.com/)
 * Copyright 2021 Maxartkiller 
 */


/* 2. variables */

:root {
    --finwallapp-green: #00dfa3;
    --finwallapp-red: #f73563;
    --finwallapp-yellow: #ffbd17;
    --finwallapp-blue: #3c63e2;
    --finwallapp-rounded: 20px;
    --finwallapp-padding: 15px;
    --finwallapp-input-rounded: 10px;
    /* radial gradient colors */
    --finwallapp-theme-color-grad-1: #57bdff;
    --finwallapp-theme-color-grad-2: #4f77fb;
    --finwallapp-theme-color-grad-3: #6528cf;
    /* color schemes */
    --finwallapp-theme-color: #6500d8;
    --finwallapp-theme-text: #ffffff;
    --finwallapp-theme-text-primary: #000000;
    --finwallapp-theme-text-secondary: #999999;
    --finwallapp-theme-text-secondary-light: #bbbbbb;
    --finwallapp-theme-bordercolor: rgba(0, 0, 0, 0.1);
    --finwallapp-header: transparent;
    --finwallapp-header-active: #ffffff;
    --finwallapp-footer: #1E1E1E;
    --finwallapp-sidebar: var(--finwallapp-theme-color);
    --finwallapp-card-color: #ffffff;
    --finwallapp-page-bg-1: #ffffff;
    --finwallapp-page-bg-2: #eff6f9;
    --finwallapp-page-bg-3: #faf0fb;
    --finwallapp-page-text: #000000;
    --finwallapp-page-link: var(--finwallapp-theme-color);
}




:root {
    --finwallapp-theme-color-grad-1: #000000 !important;
    /* dominant black */
    --finwallapp-theme-color-grad-2: #1a1a1a !important;
    /* still dark */
    --finwallapp-theme-color-grad-3: #ffbd17 !important;
    /* subtle yellow (golden tone) */
}


.theme-light-radial-gradient,
body,
.loader-wrap {
    background: var(--finwallapp-page-bg-2);
    background: -moz-radial-gradient(30% 30%, ellipse cover, var(--finwallapp-page-bg-1) 0%, var(--finwallapp-page-bg-2) 50%, var(--finwallapp-page-bg-3) 100%);
    background: -webkit-radial-gradient(30% 30%, ellipse cover, var(--finwallapp-page-bg-1) 0%, var(--finwallapp-page-bg-2) 50%, var(--finwallapp-page-bg-3) 100%);
    background: radial-gradient(ellipse at 30% 30%, var(--finwallapp-page-bg-1) 0%, var(--finwallapp-page-bg-2) 50%, var(--finwallapp-page-bg-3) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='var(--finwallapp-page-bg-1)', endColorstr='var(--finwallapp-page-bg-3)', GradientType=1);
    background-attachment: fixed;
}






/* 8. loader */

.loader-wrap {
    height: 100%;
    width: 100%;
    margin: 0 auto;
    position: fixed;
    top: 0;
    z-index: 999;
}

.loader-wrap .loader-cube-wrap {
    width: 100px;
}



/* 19. Logo */

.logo-splash {
    width: auto;
    display: block;
    margin: 0 auto;
}

.logo-splash img {
    width: 100px;
    margin-bottom: 15px;
    border-radius: 25px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
}

.logo-small {
    width: auto;
    display: inline-block;
    vertical-align: middle;
    margin: 0 auto;
    line-height: 44px;
}

.logo-small img {
    width: 60px !important;
    margin: 0;
    padding: 3px;
    border-radius: 5px;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);
    margin-right: 8px;
    border: 0;
    vertical-align: middle;
}

.logo-small h5,
.logo-small .h5 {
    font-size: 18px;
    line-height: 18px;
    display: inline-block;
    margin: 0 auto;
    vertical-align: middle;
}

.logo-wallet {
    height: 70px;
    width: 70px;
    border-radius: 25px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    display: inline-block;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.logo-wallet .wallet-bottom {
    height: 70px;
    width: 70px;
    position: relative;
    border-radius: 25px;
    background-color: #ffbd17;
}

.logo-wallet .wallet-cards {
    height: 50px;
    width: 30px;
    top: 18px;
    left: 0px;
    position: absolute;
    border-radius: 15px;
    transform: rotate(0deg);
    background-color: #f73563;
    z-index: 3;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.25);
    animation: rotateanimation ease 2s infinite;
}

.logo-wallet .wallet-cards:after {
    content: "";
    position: absolute;
    border-radius: 15px;
    height: 50px;
    width: 30px;
    left: -5px;
    background-color: #434343;
    transform: rotate(-15deg);
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.25);
    z-index: -1;
}

.logo-wallet .wallet-cards::before {
    content: "";
    position: absolute;
    border-radius: 15px;
    left: -10px;
    height: 50px;
    width: 30px;
    transform: rotate(-30deg);
    background-color: #00dfa3;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.25);
    z-index: 3;
}

.logo-wallet .wallet-top img {
    padding: 10px;
    opacity: 0.8;
}

.logo-wallet .wallet-top {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70px;
    width: 45px;
    border-radius: 25px;
    top: 0;
    left: 0;
    position: absolute;
    background: var(--finwallapp-theme-color-grad-1);
    background: -moz-radial-gradient(30% 30%, ellipse cover, var(--finwallapp-theme-color-grad-1) 0%, var(--finwallapp-theme-color-grad-2) 50%, var(--finwallapp-theme-color-grad-3) 100%);
    background: -webkit-radial-gradient(30% 30%, ellipse cover, var(--finwallapp-theme-color-grad-1) 0%, var(--finwallapp-theme-color-grad-2) 50%, var(--finwallapp-theme-color-grad-3) 100%);
    background: radial-gradient(ellipse at 30% 30%, var(--finwallapp-theme-color-grad-1) 0%, var(--finwallapp-theme-color-grad-2) 50%, var(--finwallapp-theme-color-grad-3) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='var(--finwallapp-theme-color-grad-1)', endColorstr='var(--finwallapp-theme-color-grad-3)', GradientType=1);
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.25);
    z-index: 5;
    animation: widthtopanimation infinite 2s ease;
}

@keyframes rotateanimation {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(45deg);
        left: 28px;
    }
    80% {
        transform: rotate(45deg);
        left: 28px;
    }
    100% {
        transform: rotate(0deg);
    }
}

@keyframes widthtopanimation {
    0% {
        width: 100%;
    }
    20% {
        width: 65%;
    }
    85% {
        width: 65%;
    }
    100% {
        width: 100%;
    }
}