body {
    background-color: #293241;
    font-family: 'Open Sans', sans-serif;
    color: #6A707A;
}

.home-image {
    background-image: url(/img/money.jpg);
    background-size: cover;
}

.button-normal {
    color: #fff;
    background-color: #ee6c4d;
    transition: 0.5s;
}

.button-normal:hover {
    color: #fff;
    background-color: #b64c32;
}

.button-outline {
    color: #ee6c4d;
    border: 1px solid #ee6c4d;
    background-color: transparent;
    transition: 0.5s;
}

.button-outline:hover {
    color: #fff;
    background-color: #ee6c4d;
}

.button-chosen-icon {
    color: #e0fbfc;
    background-color: rgba(255, 255, 255, 0.15);
}

.button-chosen-icon:hover {
    background-color: rgba(255, 255, 255, 0.55);
}

.input-group-text {
    background-color: rgba(255, 255, 255, 0.1);
}

.form-control,
.form-select {
    background-color: rgba(255, 255, 255, 0.15);
}

.form-control:hover,
.form-control:focus,
.form-select:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-text-fill-color: white;
    -webkit-box-shadow: 0 0 0px 1000px transparent inset;
    box-shadow: 0px 0px 0px 1000px transparent;
    transition: background-color 5000s ease-in-out 0s;
}

.change-form {
    color: #3d5a80;
}

a.change-form:hover {
    color: #98c1d9;
    text-decoration: underline !important;
}

#password-input {
    padding-right: 50px !important;
}

.hidden-password {
    background-color: transparent;
    border: none;
    color: #293241;
    z-index: 4;
    padding-top: 0.75rem !important;
}

.showed-password {
    display: none;
    background-color: transparent;
    border: none;
    color: #293241;
    z-index: 4;
    padding-top: 0.75rem !important;
}

label.error,
li.error {
    color: red;
    font-size: 1rem;
    font-weight: 100;
    width: 100%;
    text-align: center;
    margin-top: 0.5rem;
}

.form-check {
    position: relative;
}

input[type=checkbox] {
    width: 20px;
    height: 20px;
}

#rememberMe:checked+label::before,
#setLimitCheckbox:checked+label::before {
    content: "";
    display: block;
    position: absolute;
    text-align: center;
    height: 21px;
    width: 21px;
    left: 0;
    top: 4px;
    background-color: #ee6c4d;
    border-radius: 3px;
    border: 1px solid rgb(150 150 150 / 30%);
}

#rememberMe:checked+label::after,
#setLimitCheckbox:checked+label::after {
    content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="white" viewBox="0 0 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"/></svg>');
    display: block;
    position: absolute;
    left: 3px;
    top: 4px;
}

.form-check-label {
    margin-top: 1px;
}

.forgot-password {
    margin-top: 1px;
}

a.forgot-password:hover {
    color: #98c1d9 !important;
    text-decoration: underline !important;
}

.alert {
    z-index: 2000 !important;
}

.nav-link {
    color: rgba(255, 255, 255, 0.55);
    transition: all 1s;
    font-size: 1.25rem;
}

.nav-link:hover,
.nav-link:focus {
    color: #fff;
    transform: translateX(0.5rem);
}

.content-link {
    color: rgba(255, 255, 255, 0.55);
    transition: all 0.5s;
}

.content-link:hover,
.content-link:focus {
    color: #fff;
}

.header {
    color: rgba(255, 255, 255, 0.55);
}

.content-user-pill {
    border-color: #ee6c4d !important;
}

.content-alert {
    width: 98%;
}

.budget-item,
.budget-item::placeholder,
.balance,
.form-label-budget-item {
    color: #e0fbfc;
}

.form-select,
.form-select option {
    color: rgba(255, 255, 255, 0.55);
    background: rgb(84, 91, 103);
}

.form-select:hover {
    background: rgb(115, 124, 138);
}

.balance-table {
    color: rgba(255, 255, 255, 0.55);
}

.balance-heading {
    font-size: 1.75rem;
    color: #e0fbfc;
}

td {
    padding: 0;
}

tbody tr {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

tbody tr:first-of-type {
    border: none;
}

.balance-table thead,
.balance-table tfoot {
    background-color: rgba(255, 255, 255, 0.2);
}

#date:focus,
#amount:focus {
    color: #e0fbfc;
}

[type="radio"]:checked,
[type="radio"]:not(:checked),
.select-delete-category:checked,
.select-delete-category:not(:checked) {
    position: absolute;
    left: -9999px;
    width: 0;
    height: 0;
    visibility: hidden;
}

.category-label {
    background-color: rgba(255, 255, 255, 0.15);
    color: #e0fbfc;
    transition: 300ms;
}

.form-check-input:checked+.form-check-label {
    background-color: #98c1d9;
}

.budget-item-radio {
    margin-right: -8px;
}

#incomeCategory-error,
#expenseCategory-error,
#paymentMethod-error {
    margin-top: 0;
}

option,
.modal {
    color: #293241;
}

.category-row {
    pointer-events: all;
    cursor: pointer;
    transition: 0.2s;
}

.category-row:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.budget-item-details {
    color: rgba(255, 255, 255, 0.4);
    display: none;
}

.settings-container {
    color: rgba(255, 255, 255, 0.55);
}

.setting-list {
    background-color: rgba(255, 255, 255, 0.55);
    color: #293241;
    pointer-events: all;
    cursor: pointer;
    transition: 0.5s;
}

.setting-list:hover {
    /* color: #e0fbfc; */
    background-color: rgba(255, 255, 255, 0.4);
}

.settings-input,
.settings-input:focus,
.settings-input-icon,
.settings-input-icon:focus {
    color: #e0fbfc;
}

.settings-form {
    display: none;
}

.settings-hidden,
.settings-showed {
    padding: 0 !important;
    margin-top: 2px !important;
}

.settings-icon-for-name-category {
    width: 25px !important;
}

.table-data-with-buttons {
    display: table-cell;
    width: 60px;
    height: 26px;
}

.button-form-change-budget-item {
    display: none;
    background-color: rgba(255, 255, 255, 0.2);
    width: 24px;
    height: 24px;
    font-size: 12px;
    line-height: 1;
}

.buttons-change-budget-item,
.fa-angle-up {
    display: none;
}

.balance-label-modal {
    color: inherit;
    border: 1px solid inherit;
    background-color: transparent;
    transition: 0.5s;
}

.form-check-input:checked+.balance-label-modal {
    color: #fff;
    background-color: #ee6c4d;
}

.change-modal #date:focus {
    color: #293241;
}


@media (max-width: 1400px) {
    .nav-link {
        font-size: 1rem;
    }

    .budget-item,
    .category-label,
    .budget-item-btn {
        font-size: 1rem !important;
    }

    .home-list {
        font-size: 1.5rem !important;
    }
}

@media (max-width: 575px) {
    .home-content {
        width: 100% !important;
    }


    .content-user,
    .content-logout,
    .content-logo {
        display: none !important;
    }

    .content-title {
        width: 100%;
        border-bottom: 0 !important;
        text-align: center;
        margin-top: 1rem;
    }

    .content-title h1 {
        font-size: 2.75rem;
    }

    .content-nav {
        width: 100%;
        background: linear-gradient(#00000054, #293241);
        --bs-bg-opacity: 1;
    }

    .content-main {
        width: 100%;
    }

    .form-label {
        text-align: center;
    }

    .alert {
        width: 100%;
        margin-top: 1rem;
    }

    .header {
        background-color: #00000054;
        margin-bottom: 0;
    }

    .balance-info {
        margin: 0;
        width: 100%;
    }

    .button-chosen-icon {
        width: 30% !important;
    }

    .button-settings {
        width: 100% !important;
        margin: 0.5rem 0 !important;
        border-radius: .25rem !important;
    }

    .settings-input {
        border-radius: .25rem !important;
    }

    .settings-input-icon {
        border-radius: 0 .25rem .25rem 0 !important;
    }

    .settings-hidden,
    .settings-showed {
        right: 2px !important;
    }

    .buttons-change-budget-item {
        display: block !important;
    }
}