:root {
    --lightBackgroundColor: #979e86;
}

a {
    text-decoration: none;
}

p {
    margin: auto;
}

body {
    color: white;
    background-color: var(--lightBackgroundColor);
    font-family: "Open Sans";
    height: 100%;
}

h1 {
    text-align: center;
}

h2, h3, h4, h5 {
    margin: 3%;
}

.col-lg-12 h2 {
    margin: 1%;
}

.flash {
    padding: 5px;
    border-radius: 10px;
}

@media only screen and (max-width: 1028px) {
    .flashVisibility {
        display: none;
    }
}

.darkMode {
    background-color: #012918;
    color: white;
}

.lightMode {
    background-color: var(--lightBackgroundColor);
    /* background-color: #979e86; */
    color: #012918;
}

/* BASE TEMPLATE - NAVBAR SECTION */

.navbar {
    border-bottom: 1px solid;
}

.navbar-img {
    margin-right: 10px;
}

@media only screen and (min-width: 600px) {
    .navbarBtn {
        width: 100px;
    }
}

@media only screen and (max-width: 599px) {
    .navbar-btn {
        display: none;
    }
}

.hamburgerMenu {
    text-align: center;
}

.hamburgerMenu li {
    display: block;
    padding: 10px;
    text-align: center;
}

.hamburgerMenu li:hover {
    background-color: white;
    color: #012918;
}

@media only screen and (min-width: 1028px) {
    .hamburgerMenuBtn {
        display: none;
    }
}

.hamburgerMenuBtn:hover {
    color: lightgrey;
}

.navbarCollapseBtn {
    width: 100%;
    /* margin:auto; */
}

.forgot-psswrd-btn {
    margin-left: 10px;
}

.form-control {
    width: 250px;
}

.side-navbar {
    text-decoration: none;
    padding-left: 0;
}

@media only screen and (min-width: 600px) {
    .sidebar {
        position: fixed;
        left: 0;
        top: 56.8px;
        bottom: 0;
        width: 190px;
        border-right: 1px solid;
    }
}

@media only screen and (max-width: 599px) {
    .sidebar {
        display: none;
    }
}

.sidebar li {
    display: block;
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid;
}

.sidebar li:hover {
    background-color: white;
    color: #012918;
}

.dropdown-menu {
    width: 100%;
}

.show {
    padding: 0;
    border: 0;
    border-radius: 0;
}

.dropdown-menu li {
    display: block;
    padding: 10px;
    /* color: white; */
    text-align: left;
    border-bottom: 1px solid;
}

.dropdown-menu a {
    padding: 0;
}

.dropdown-menu li:hover {
    background-color: white;
    color: #012918;
}

/* BASE TEMPLATE - ACTION AREA */
@media only screen and (min-width: 600px) {
    .actionArea {
        position: absolute;
        left: 190px;
        right: 0;
        top: 56.8px;
        bottom: 40px;
        padding: 15px
    }
}

@media only screen and (max-width: 599px) {
    .actionArea {
        position: absolute;
        left: 0;
        right: 0;
        top: 56.8px;
        bottom: 40px;
        padding: 15px
    }
}

/* BASE TEMPLATE - ACTION AREA - PROFILE */

.shortSummary {
    display: inline-block;
    width: 100%;
    padding: 1%;
    margin-bottom: 15px;
    border: 1px solid;
    border-radius: 10px;
}

.summary {
    text-align: left;
}

.incomeSummary {
    color: green;
}

.expenseSummary {
    color: red;
}

/* BASE TEMPLATE - ACTION AREA - ADD INCOME / EXPENSE */

@media only screen and (min-width: 801px) {
    .infoBox {
        text-align: center;
        width: 50%;
        padding: 1%;
        margin-bottom: 15px;
        border: 1px solid;
        border-radius: 10px;
    }
}

@media only screen and (max-width: 800px) {
    .infoBox {
        text-align: center;
        width: 100%;
        padding: 1%;
        margin-bottom: 15px;
        border: 1px solid;
        border-radius: 10px;
    }
}

@media only screen and (min-width: 801px) {
    .setupDataBox {
        text-align: center;
        width: 50%;
        padding: 1%;
        margin-bottom: 40px;
        border: 1px solid;
        border-radius: 10px;
    }
}

@media only screen and (max-width: 800px) {
    .setupDataBox {
        text-align: center;
        width: 100%;
        padding: 1%;
        margin-bottom: 40px;
        border: 1px solid;
        border-radius: 10px;
    }
}

.setupDataInput {
    width: 90%;
    margin: 5px auto;
    background-color: lightgrey;
    border: 0;
}

.setupDataInput::placeholder {
    color: black;
}

.setupDataInput.comentaryInput {
    resize: none;
}

/* BASE TEMPLATE - ACTION AREA - BALANCE SHEET */

.actionArea .row {
    padding-bottom: 40px;
}

.balanceSheetHeadingBox {
    text-align: center;
    border: 1px solid;
    border-radius: 10px;
    padding: 1%;
}

.balanceSheetBox {
    text-align: center;
    padding: 1%;
    border: 1px solid;
    border-radius: 10px;
}

.sheet {
    display: block;
    text-decoration: none;
    margin: 2% auto;
    border-radius: 10px;
}

@media only screen and (max-width: 1028px) {
    .chart {
        margin: 3% auto;
        width: 100%; 
        height: 300px;
    }
}

@media only screen and (min-width: 1028px) {
    .chart {
        margin: 3% auto;
        width: 100%; 
        height: 500px;
    }
}

/* BASE TEMPLATE - EDIT CATEGORIES / PAYMENT */

@media only screen and (min-width: 801px) {
    .editDataBox {
        position: relative;
        text-align: center;
        width: 25%;
        padding: 1%;
        margin-bottom: 15px;
        border: 1px solid;
        border-radius: 10px;
    }
}

@media only screen and (max-width: 800px) {
    .editDataBox {
        position: relative;
        text-align: center;
        width: 100%;
        padding: 1%;
        margin-bottom: 15px;
        border: 1px solid;
        border-radius: 10px;
    }
}


.deleteCategoryBtn {
    position: absolute;
    right: -12px;
    top: -12px;
    background-color: #012918;
    border-radius: 60%;
    color: white;
}

.deleteCategoryBtn:hover {
    color: #dc3545;
    background-color: white;
}

.editCategoryInput {
    width: 90%;
    margin: 5px auto;
    background-color: lightgrey;
    border: 0;
}

.editCategoryBtn {
    margin: 5px auto;
    width: 50%;
}

.modal-content {
    border: 1px solid;
}

/* BASE TEMPLATE - FOOTER */

.footer {
    height: 40px;
    left: 0;
    width: 100%;
    border-top: 1px solid;
    text-align: center;
    padding: 8px;
 }

/* INDEX -> INFORMATION SECTION */
@media only screen and (max-width: 1028px) {
    .loginSection {
        display: none;
    }
}

.loginSection .input-group {
    display: inline-flex;
    margin: auto;
    width: auto;
}

.loginInput {
    margin-right: 5px;
    background-color: lightgrey;
    border: none;
    display: inline-block; 
}

.hamburgerMenuInput {
    background-color: lightgrey;
    border: none;
}

.hamburgerMenuInputGroup {
    width: 100%;
    margin-top: 5px;
}

.hamburgerMenuInput::-moz-focus-inner{
    border: red 1px;
}

.hamburgerMenuCollapseBtn {
    width: 100%;
    margin: auto;
    margin-top: 5px;
}

.infoSection .row {
    margin: 60px 0 40px;
}

@media only screen and (min-width: 1028px) {
    .infoHomeBox {
        position: relative;
        text-align: center;
        border: 1px solid;
        border-radius: 10px;
        padding: 3%;
        margin: 2%;
        height: 500px;
    }
}

@media only screen and (max-width: 1028px) {
    .infoHomeBox {
        position: relative;
        text-align: center;
        border: 1px solid;
        border-radius: 10px;
        padding: 3%;
        margin: 2%;
    }
}

.information {
    display: block;
    text-decoration: none;
    color: white;
}

.infoHeader {
    text-align: left;
}

.infoList {
    text-align: left;
    margin: 3%;
    margin-bottom: 20%;
}

.registerBtn {
    width: 90%;
    left: 5%;
    margin-top: 10px;
    position: absolute;
    bottom: 5%;
}

/* INDEX - REGISTER SECTION */

.my-input {
    width: 90%;
    margin: 10px auto;
}

.submitBtn {
    width: 90%;
    margin: 10px auto;
}

.setupRegisterDataBox .input-group {
    width: 90%;
    margin: auto;
}

.input-group .setupDataInput {
    margin: 0 auto;
    background-color: lightgrey;
    border: 0;
}

.input-group .input-group-text {
    margin: 0 auto;
    background-color: lightgrey;
    border: 0;
}

/* INDEX - FORGOT PASSWORD */
@media only screen and (max-width: 1028px) {
    .setupRegisterDataBox {
        text-align: center;
        width: 100%;
        padding: 1%;
        margin-bottom: 15px;
        background-color: #012918;
        border: 1px solid white;
        border-radius: 10px;
        margin: 15px auto;
    }
}

@media only screen and (min-width: 1028px) {
    .setupRegisterDataBox {
        text-align: center;
        width: 25%;
        padding: 1%;
        margin-bottom: 15px;
        background-color: #012918;
        border: 1px solid white;
        border-radius: 10px;
        margin: 15px auto;
    }
}

@media only screen and (max-width: 1028px) {
    .infoRegisterBox {
        text-align: center;
        width: 100%;
        padding: 1%;
        margin: 15px;
        background-color: #012918;
        border: 1px solid white;
        border-radius: 10px;
    }
}

@media only screen and (min-width: 1028px) {
    .infoRegisterBox {
        text-align: center;
        width: 50%;
        padding: 1%;
        margin: 15px auto;
        background-color: #012918;
        border: 1px solid white;
        border-radius: 10px;
    }
}

@media only screen and (max-width: 1028px) {
    .infoErrorBox {
        color: white;
        width: 100%;
        margin: 15px;
        padding: 1%;
        margin: auto;
        background-color: #012918;
        border: 1px solid;
        border-radius: 10px;
    }
}

@media only screen and (min-width: 1028px) {
    .infoErrorBox {
        color: white;
        width: 25%;
        margin: 15px auto;
        padding: 1%;
        margin: auto;
        background-color: #012918;
        border: 1px solid;
        border-radius: 10px;
    }
}

/* SETUP */

.btn-delete {
    margin: 5px auto;
    width: 90%;
}