body {
    background-color: #fff;
}

#login-button {
    background-color: #fff;
    border-color: rgb(0, 112, 186);
    color: rgb(0, 112, 186);
    border-radius: 25px;
}

#login-button:hover {
    background-color: rgb(0, 112, 186);
    color: #fff;
}

#registration-button {
    background-color: rgb(0, 112, 186);
    border-radius: 25px;
    margin-left: 9px;
}

#registration-button:hover {
    background-color: #fff;
    color: rgb(0, 112, 186);
}

.navbar-brand {
    color: rgb(0, 112, 186);
    font-weight: bold;
}

.navbar-brand:hover {
    color: rgb(0, 96, 161);
}

.icon-square {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    background-color: rgb(0, 112, 186);
    color: white;
}

#hanging-icons > p {
    text-align: center;
}

#registration-text, #login-text, #forgot-text {
    color: rgb(0, 112, 186);
    font-weight: bold;
    text-decoration: none;
}

#registration-text:hover, #login-text:hover, #forgot-text:hover {
    text-decoration: underline;
}

.registration-container, .login-container, .profile-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px;
}

.limits {
    width: 300px;
    height: 382px;
    padding: 0px;
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 20px;
    text-align: center;
}

.input-group-text, .form-control {
    border-radius: 25px;
}

.registration-container div {
    width: 300px;
}

.login-container div {
    width: 300px;
}

.profile-container div {
    width: 300px;
}

#data-confirmation-button {
    width: 300px;
    background-color: rgb(0, 112, 186);
    border-radius: 25px;
    margin-bottom: 16px;
}

#data-confirmation-button:hover {
    background-color: #fff;
    color: rgb(0, 112, 186);
}

.nav-link.active {
    font-weight: bold;
    color: rgb(121, 122, 122) !important;
}

.number, thead, .money {
    color: rgb(0, 112, 186);
}

.short-description {
    font-weight: bold;
}

.form-select {
    width: 300px;
    border-radius: 25px;
}

.list-group {
    border-radius: 25px;
}

.form-check-input:checked {
    background-color: rgb(0, 112, 186);
    border-color: rgb(0, 112, 186);
}

.add-cancel-buttons {
    display: flex;
    justify-content: space-between;
}

#add-button {
    width: 140px;
    background-color: rgb(0, 112, 186);
    border-radius: 25px;
}

#add-button:hover {
    background-color: #fff;
    color: rgb(0, 112, 186);
    border-color: rgb(0, 112, 186);
}

#cancel-button {
    width: 140px;
    background-color: rgb(208, 70, 70);
    border-color: rgb(208, 70, 70);
    border-radius: 25px;
}

#cancel-button:hover {
    background-color: #fff;
    color: rgb(208, 70, 70);
}

.dropdown-toggle, .dropdown-menu, .table-container h3 {
    color: rgb(0, 0, 0, 0.65);
}

.table-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 20px;
}

.incomes-container, .expenses-container, .balance-container, .settings-container {
    max-width: 800px;
    min-width: 600px;
    border: 2px rgb(222, 226, 230) solid;
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 20px;
    margin-left: 20px;
    margin-right: 20px;
}

.balance-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.incomes-expenses-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 1400px;
}

tbody {
    border-top-color: rgb(121, 122, 122);
}

.sum {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(4, 1fr);
}

.first-sum-column {
    text-align: end;
}

.secound-sum-column {
    text-align: start;
    padding-left: 20px;
}

.green-text {
    color: rgb(28, 167, 28) !important;
}

.messages {
    text-align: center;
}

.errorMessages {
    color: red !important;
}

#piechart {
    height: 400px;
    width: 600px;
}

#piechart > div {
    left: 30px !important;
}

.add-button {
    width: 200px;
    background-color: rgb(25, 135, 84);
    border-radius: 25px;
}

.add-button:hover {
    background-color: #fff;
    color: rgb(25, 135, 84);
    border-color: rgb(25, 135, 84);
}

.edit-button {
    width: 200px;
    background-color: rgb(0, 112, 186);
    border-radius: 25px;
}

.edit-button:hover {
    background-color: #fff;
    color: rgb(0, 112, 186);
    border-color: rgb(0, 112, 186);
}

.delete-button {
    width: 200px;
    background-color: rgb(208, 70, 70) !important;
    border-color: rgb(208, 70, 70) !important;
    border-radius: 25px;
}

.delete-button:hover {
    background-color: #fff !important;
    color: rgb(208, 70, 70) !important;
    border-color: rgb(208, 70, 70) !important;
}

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

#table-margin {
    margin-bottom: 0px !important;
    border-collapse: separate;
    border-spacing: 1px;
}

.delete-income-expense {
    width: 300px;
    background-color: rgb(208, 70, 70) !important;
    border-color: rgb(208, 70, 70) !important;
    border-radius: 25px;
}

.delete-income-expense:hover {
    background-color: #fff !important;
    color: rgb(208, 70, 70) !important;
    border-color: rgb(208, 70, 70) !important;
}

#edit-income-category-id, #edit-expense-category-id, #edit-payment-method-id {
    display: none;
}

@media (min-width: 1401px) {
    .settings-container {
        min-width: 800px;
    }

    .incomes-container, .expenses-container, .balance-container {
        min-width: 630px;
    }
}

@media (min-width: 850px) and (max-width: 1400px) {
    .incomes-container, .expenses-container, .balance-container, .settings-container {
        min-width: 800px;
    }

    #piechart {
        height: 400px;
        width: 600px;
    }

    .incomes-expenses-container {
        width: auto;
    }
}

@media (min-width: 651px) and (max-width: 849px) {
    .incomes-container, .expenses-container, .balance-container, .settings-container {
        min-width: 600px;
    }

    #piechart {
        height: 350px;
        width: 500px;
    }

    .incomes-expenses-container {
        width: auto;
    }
}

@media (min-width: 536px) and (max-width: 650px) {
    .incomes-container, .expenses-container, .balance-container, .settings-container {
        padding: 5px;
        min-width: 495px;
    }

    #piechart {
        height: 300px;
        width: 400px;
    }

    .flexible-button {
        width: 150px !important;
    }

    .incomes-expenses-container {
        width: auto;
    }
}

@media (min-width: 200px) and (max-width: 535px) {
    .incomes-container, .expenses-container, .balance-container, .settings-container {
        padding: 5px;
        min-width: 425px;
    }

    .settings-container {
        padding: 5px;
        min-width: 385px;
    }

    #piechart {
        height: 200px;
        width: 300px;
    }

    .flexible-button {
        width: 80px !important;
    }

    .incomes-expenses-container {
        width: auto;
    }

    #add-income-category-id, #add-expense-category-id, #add-payment-method-id, #add-limit-settings, #edit-income-category-id, #edit-expense-category-id, #edit-payment-method-id {
        width: 50px !important;
    }

    .edit-button, .delete-button {
        width: 160px;
    }
}