/*------------------------------
# Import font
-------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&family=Lato:wght@300;400;700&family=Georama:wght@400;500&family=Poppins&display=swap');

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
html {
    scroll-behavior: smooth;
}
  
body {
    font-family: "Open Sans", sans-serif;
    color: #323130;
    height: 100%;
    min-height: 100vh;
    background-color: #f6f4f8;
    background-image: url(https://images.unsplash.com/photo-1472068113808-609faf3a6cf1?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80);
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

h1, h2, h3, h4, h5, h6 {
    color: #424242;
    font-family: 'Georama', sans-serif;
}

h1 {
    color: #f7f7f7;
}

h2 {
    color: #5C527F;
}

h2 i {
    color: #5c5c5c;
}

h5 {
    color: #4B778D;    
}

.card-header {
    font-family: 'Georama', sans-serif;
    font-weight: 500;
    font-size: 1.2rem;
    color: #A03C78;    
}

nav {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    background: linear-gradient(135deg, #70e1f5 0%, #ffd194 100%);
    box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
    width: 100%;
    font-size: 1rem;
}

nav a {
    color: #186090 !important;
    transition: 0.3s;
}

nav a:hover {
    color: #0090a8 !important;
    transition: 0.3s;
}

thead.fixed {
    background-color: #ffffff;
    position: sticky;
    top: 0;
    z-index: 1;
}

/*---------------------
Welcome screen
---------------------*/
#index .card {
    width: 75%
}
@media (max-width: 576px) {
    #index .card {
      width: 100%
    }
  }

@media (max-width: 768px) {
    #index .card {

        width: 85%
    }
}

.budgetedhead {
    color: #4B778D;
}

.usedhead {
    color: #A03C78;
}

.remaininghead {
    color: #007065;
}

/*---------------------
Budget chart
---------------------*/
#budget .chart_size {
    width: 75vw;
    height: 60vh;
}

@media (max-width: 576px) {
    #budget .chart_size {
        width: 100%;
    }
}

/*---------------------
Expense chart
---------------------*/
#expense .chart_size {
    width: 50vw;
    height: auto;
}

@media (max-width: 576px) {
    #expense .chart_size {
        width: 100%;
    }
}
/*---------------------
Fixed expense
---------------------*/
#fixedexpense h5{
    color: #035397;
}