@font-face {
    src: url("./fonts/Roboto.ttf");
    font-family: "Roboto", sans-serif;
}

body {
    font-family: Roboto, sans-serif;
}

.balance-block {
    font-weight: bold;
}

.pills-time-interval {
    margin-left: -10px;
}

.pills-time-interval .nav-item {
    margin: 0 10px;
}

.pills-time-interval .nav-link {
    width: 100px;
    border: 1px solid #6C757D;
    color: #6C757D;
    transition: .5s all;
}

.pills-time-interval .nav-link:hover {
    border: 1px solid #6C757D;
    background-color: #6C757D;
    color: white;
}

.nav .list-group-item, .link-text {
    transition: .5s all;
}


.nav .list-group-item:hover {
    background-color: #0d6efd;
    border: 1px solid #0d6efd;
}

.nav .list-group-item:hover .link-text {
    color: white;
}

.nav-item .nav-link:hover, .nav-item .active, .nav-item .nav-link:hover svg path, .nav-item .btn-toggle:hover {
    background-color: #0d6efd;
}

.nav-item .nav-link:hover svg path, .nav-item .active svg path {
    fill: white;
    transition: .5s all;
}

.nav-item .nav-link:hover .link-text, .nav-item .active .link-text, .nav-item .btn-toggle:hover .link-text {
    color: white !important;
}

.sidebar-menu.open {
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: .5s all;
}

.nav-item.pill-item .nav-link:hover {
    background-color: #6C757D;
}

.nav-item.pill-item .nav-link.active {
    background-color: #6C757D;
}

.date-field {
    transition: .5s all;
    color: #adb5bd;
    border-bottom: 2px solid #adb5bd;
    display: none;
}

.date-field[type="date"] {
    all: unset;
    width: 110px;
    display: none;
}

input[type="date"]::-webkit-datetime-edit-fields-wrapper {
    color: #6C757D;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    margin-left: 5px;
}

.date-field:hover {
    color: #50565b;
    border-bottom: 2px solid #50565b;
}

.date-span {
    transition: .5s all;
    color: #adb5bd;
    border-bottom: 2px solid #adb5bd;
}

.date-span:hover {
    color: #50565b;
    border-bottom: 2px solid #50565b;
}

.burger {
    display: none;
    transition: .5s all;
}

.close-menu {
    z-index: 101;
    display: none;
    width: 24px;
    height: 24px;
    fill: #6969e7;
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
    transition: .5s all;
}

.close-menu.open {
    display: block;
}

.content-block .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    background-color: #6C757D;
}

.btn-toggle[aria-expanded="true"] {
    background-color: #0d6efd;
    transition: .5s all;
}

.btn-toggle::after {
    content: url("data:image/svg+xml,%3Csvg width='7' height='14' viewBox='0 0 7 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.145063 13.3539C0.051021 13.2601 -0.00183105 13.1327 -0.00183105 12.9999C-0.00183105 12.867 0.051021 12.7397 0.145063 12.6459L5.79206 6.99987L0.145063 1.35387C0.0185907 1.2274 -0.0308022 1.04306 0.0154897 0.8703C0.0617817 0.697536 0.196726 0.562593 0.36949 0.5163C0.542254 0.470008 0.726591 0.519401 0.853063 0.645873L6.85306 6.64587C6.9471 6.73968 6.99996 6.86705 6.99996 6.99987C6.99996 7.1327 6.9471 7.26007 6.85306 7.35387L0.853063 13.3539C0.759259 13.4479 0.63189 13.5008 0.499063 13.5008C0.366235 13.5008 0.238867 13.4479 0.145063 13.3539Z' fill='%23052C65'/%3E%3C/svg%3E%0A");
}

.btn-toggle:hover::after {
    content: url("data:image/svg+xml,%3Csvg width='7' height='14' viewBox='0 0 7 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.145063 13.3539C0.051021 13.2601 -0.00183105 13.1327 -0.00183105 12.9999C-0.00183105 12.867 0.051021 12.7397 0.145063 12.6459L5.79206 6.99987L0.145063 1.35387C0.0185907 1.2274 -0.0308022 1.04306 0.0154897 0.8703C0.0617817 0.697536 0.196726 0.562593 0.36949 0.5163C0.542254 0.470008 0.726591 0.519401 0.853063 0.645873L6.85306 6.64587C6.9471 6.73968 6.99996 6.86705 6.99996 6.99987C6.99996 7.1327 6.9471 7.26007 6.85306 7.35387L0.853063 13.3539C0.759259 13.4479 0.63189 13.5008 0.499063 13.5008C0.366235 13.5008 0.238867 13.4479 0.145063 13.3539Z' fill='white'/%3E%3C/svg%3E");
}

.btn-toggle[aria-expanded="true"]::after {
    content: url("data:image/svg+xml,%3Csvg width='7' height='14' viewBox='0 0 7 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.145063 13.3539C0.051021 13.2601 -0.00183105 13.1327 -0.00183105 12.9999C-0.00183105 12.867 0.051021 12.7397 0.145063 12.6459L5.79206 6.99987L0.145063 1.35387C0.0185907 1.2274 -0.0308022 1.04306 0.0154897 0.8703C0.0617817 0.697536 0.196726 0.562593 0.36949 0.5163C0.542254 0.470008 0.726591 0.519401 0.853063 0.645873L6.85306 6.64587C6.9471 6.73968 6.99996 6.86705 6.99996 6.99987C6.99996 7.1327 6.9471 7.26007 6.85306 7.35387L0.853063 13.3539C0.759259 13.4479 0.63189 13.5008 0.499063 13.5008C0.366235 13.5008 0.238867 13.4479 0.145063 13.3539Z' fill='white'/%3E%3C/svg%3E");
}

.btn-toggle[aria-expanded="true"] .link-text {
    color: white !important;
}

.btn-toggle[aria-expanded="true"]::after {
    fill: white;
}

.card {
    width: 352px;
}

.operation-input {
    max-width: 397px;
}

.form-signup .input-group, .form-login .input-group {
    width: 400px;
}

.add-category-card {
    height: 119px;
    box-sizing: border-box;
    cursor: pointer;
    transition: .5s all;
}

.add-category-card:hover {
    border: 1px solid gray;
}

.add-category-card .card-body {
    color: #ced4da;
    transition: all .5s;
}

.add-category-card:hover .card-body {
    color: gray;
}

.expense-name-input {
    width: 397px;
}

tr {
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}

.table th, .table td {
    padding: 13px 0;
    word-wrap: break-word;
    white-space: normal;
}

td svg, td a {
    cursor: pointer;
    text-decoration: none;
}

.person-info .person-name-text.logout, .logout-btn {
    display: none;
    transition: all .5s;
}

.person-info .logout-btn.active {
    display: block;
    transition: all .5s;
}

.person-icon {
    cursor: pointer;
}

.modalBackground {
    display: none;
    background: rgba(0, 0, 0, 0.45);
    position: fixed;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 2;
    animation: blackout .3s forwards;
}

.modal-window {
    position: absolute;
    width: 530px;
    height: 184px;
    top: calc(50% - 92px);
    left: calc(50% - 265px);
    border-radius: 12px;
    background-color: rgb(255, 255, 255);
    border: 1px solid #CED4DA;
    animation: move-in .7s forwards alternate;
}

.modal-body {
    position: relative;
}

@keyframes move-in {
    0% {
        transform: translateY(-50px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes blackout {
    0% {
        background: rgba(0, 0, 0, 0);
    }
    100% {
        background: rgba(0, 0, 0, 0.45);
    }
}