div.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 118.9%;
    z-index: 9999;
    opacity: 1;
    transition: .2s;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.32);
}

.transparent {
    opacity: 0 !important;
}

.hidden1 {
    display: none !important;;
}

.pl {
    position: relative;
    width: 12em;
    height: 12em; }
.pl__dot {
    background: #fff;
    position: absolute;
    top: calc(50% - 0.5em);
    left: calc(50% - 0.25em);
    width: 0.5em;
    height: 0.5em;
    transform-origin: 50% 100%; }
.pl__dot:nth-child(1) {
    animation: dot1 8s linear infinite;
    transform: rotate(0deg) translateY(-5.5em); }
.pl__dot:nth-child(2) {
    animation: dot2 8s linear infinite;
    transform: rotate(30deg) translateY(-5.5em); }
.pl__dot:nth-child(3) {
    animation: dot3 8s linear infinite;
    transform: rotate(60deg) translateY(-5.5em); }
.pl__dot:nth-child(4) {
    animation: dot4 8s linear infinite;
    transform: rotate(90deg) translateY(-5.5em); }
.pl__dot:nth-child(5) {
    animation: dot5 8s linear infinite;
    transform: rotate(120deg) translateY(-5.5em); }
.pl__dot:nth-child(6) {
    animation: dot6 8s linear infinite;
    transform: rotate(150deg) translateY(-5.5em); }
.pl__dot:nth-child(7) {
    animation: dot7 8s linear infinite;
    transform: rotate(180deg) translateY(-5.5em); }
.pl__dot:nth-child(8) {
    animation: dot8 8s linear infinite;
    transform: rotate(210deg) translateY(-5.5em); }
.pl__dot:nth-child(9) {
    animation: dot9 8s linear infinite;
    transform: rotate(240deg) translateY(-5.5em); }
.pl__dot:nth-child(10) {
    animation: dot10 8s linear infinite;
    transform: rotate(270deg) translateY(-5.5em); }
.pl__dot:nth-child(11) {
    animation: dot11 8s linear infinite;
    transform: rotate(300deg) translateY(-5.5em); }
.pl__dot:nth-child(12) {
    animation: dot12 8s linear infinite;
    transform: rotate(330deg) translateY(-5.5em); }

/* Dark theme */
@media (prefers-color-scheme: dark) {
    \:root {
        --bg: #17181c;
        --fg: #e3e4e8; } }

/* Animations */
@keyframes dot1 {
    0% {
        transform: rotate(0deg) translateY(-5.5em); }
    4.16667% {
        transform: rotate(30deg) translateY(0em); }
    50% {
        transform: rotate(360deg) translateY(0em); }
    95.83333% {
        transform: rotate(690deg) translateY(0em); }
    100% {
        transform: rotate(690deg) translateY(-5.5em); } }

@keyframes dot2 {
    0%, 4.16667% {
        transform: rotate(30deg) translateY(-5.5em); }
    8.33333% {
        transform: rotate(60deg) translateY(-0.5em); }
    50% {
        transform: rotate(360deg) translateY(-0.5em); }
    91.66667% {
        transform: rotate(660deg) translateY(-0.5em); }
    95.83333%, 100% {
        transform: rotate(660deg) translateY(-5.5em); } }

@keyframes dot3 {
    0%, 8.33333% {
        transform: rotate(60deg) translateY(-5.5em); }
    12.5% {
        transform: rotate(90deg) translateY(-1em); }
    50% {
        transform: rotate(360deg) translateY(-1em); }
    87.5% {
        transform: rotate(630deg) translateY(-1em); }
    91.66667%, 100% {
        transform: rotate(630deg) translateY(-5.5em); } }

@keyframes dot4 {
    0%, 12.5% {
        transform: rotate(90deg) translateY(-5.5em); }
    16.66667% {
        transform: rotate(120deg) translateY(-1.5em); }
    50% {
        transform: rotate(360deg) translateY(-1.5em); }
    83.33333% {
        transform: rotate(600deg) translateY(-1.5em); }
    87.5%, 100% {
        transform: rotate(600deg) translateY(-5.5em); } }

@keyframes dot5 {
    0%, 16.66667% {
        transform: rotate(120deg) translateY(-5.5em); }
    20.83333% {
        transform: rotate(150deg) translateY(-2em); }
    50% {
        transform: rotate(360deg) translateY(-2em); }
    79.16667% {
        transform: rotate(570deg) translateY(-2em); }
    83.33333%, 100% {
        transform: rotate(570deg) translateY(-5.5em); } }

@keyframes dot6 {
    0%, 20.83333% {
        transform: rotate(150deg) translateY(-5.5em); }
    25% {
        transform: rotate(180deg) translateY(-2.5em); }
    50% {
        transform: rotate(360deg) translateY(-2.5em); }
    75% {
        transform: rotate(540deg) translateY(-2.5em); }
    79.16667%, 100% {
        transform: rotate(540deg) translateY(-5.5em); } }

@keyframes dot7 {
    0%, 25% {
        transform: rotate(180deg) translateY(-5.5em); }
    29.16667% {
        transform: rotate(210deg) translateY(-3em); }
    50% {
        transform: rotate(360deg) translateY(-3em); }
    70.83333% {
        transform: rotate(510deg) translateY(-3em); }
    75%, 100% {
        transform: rotate(510deg) translateY(-5.5em); } }

@keyframes dot8 {
    0%, 29.16667% {
        transform: rotate(210deg) translateY(-5.5em); }
    33.33333% {
        transform: rotate(240deg) translateY(-3.5em); }
    50% {
        transform: rotate(360deg) translateY(-3.5em); }
    66.66667% {
        transform: rotate(480deg) translateY(-3.5em); }
    70.83333%, 100% {
        transform: rotate(480deg) translateY(-5.5em); } }

@keyframes dot9 {
    0%, 33.33333% {
        transform: rotate(240deg) translateY(-5.5em); }
    37.5% {
        transform: rotate(270deg) translateY(-4em); }
    50% {
        transform: rotate(360deg) translateY(-4em); }
    62.5% {
        transform: rotate(450deg) translateY(-4em); }
    66.66667%, 100% {
        transform: rotate(450deg) translateY(-5.5em); } }

@keyframes dot10 {
    0%, 37.5% {
        transform: rotate(270deg) translateY(-5.5em); }
    41.66667% {
        transform: rotate(300deg) translateY(-4.5em); }
    50% {
        transform: rotate(360deg) translateY(-4.5em); }
    58.33333% {
        transform: rotate(420deg) translateY(-4.5em); }
    62.5%, 100% {
        transform: rotate(420deg) translateY(-5.5em); } }

@keyframes dot11 {
    0%, 41.66667% {
        transform: rotate(300deg) translateY(-5.5em); }
    45.83333% {
        transform: rotate(330deg) translateY(-5em); }
    50% {
        transform: rotate(360deg) translateY(-5em); }
    54.16667% {
        transform: rotate(390deg) translateY(-5em); }
    58.33333%, 100% {
        transform: rotate(390deg) translateY(-5.5em); } }

@keyframes dot12 {
    0%, 45.83333% {
        transform: rotate(330deg) translateY(-5.5em); }
    50% {
        transform: rotate(360deg) translateY(-5.5em); }
    54.16667%, 100% {
        transform: rotate(360deg) translateY(-5.5em); } }

.top-buttons {
    display: flex;
    justify-content: space-evenly;
    align-items: flex-end;
}

table.table.table-bordered {
    margin-top: 9px;
}

form.bottom-buttons {
    display: flex;
    justify-content: space-evenly;
}

#app > main > table > thead > tr {
    background: #6c757d;
    color: #fff;
}

a:hover {
    color: #ffffff;
    text-decoration: none;
}
a {
    /* color: #000; */
    color: #6c757d;
    text-decoration: none !important;
}

#prev-month:hover a,
#next-month:hover a,
#next-day:hover a,
#prev-day:hover a {
    color: #ffffff;
}

.hidden {
    display: none !important;
}

#states-background {
    position: absolute;
    z-index: 99999;
    align-items: center;
    display: flex;
    justify-content: center;
}

#states-background {
    width: -webkit-fill-available;
    height: -webkit-fill-available;
    background: rgb(0, 0, 0, .6);
}

.states-popup-content {
    display: flex;
    background: #efefef;
    width: 32vw;
    height: 32vw;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
}

.states-popup-buttons {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-left: 15px;
    align-self: normal;
}


div#states-popup {
    display: flex;
    justify-content: center;
    align-items: center;
}

#states-popup > div > div.list-group > div {
    overflow-y: scroll;
}

.list-group {
    width: 60%;
    height: 91%;
}

td {
    cursor: pointer;
}

.selected-rent {
    opacity: .4;
    transition: .2s ease;
}

#app > main > form > input[type=text]:nth-child(2) {
    width: 18vw;
}

#app > main > form > input[type=text]:nth-child(3) {
    width: 6vw;
}

#app > main > form > input[type=text]:nth-child(4) {
    width: 30vw;
}

div#add-state,
div#edit-state{
    position: absolute;
    width: -webkit-fill-available;
    height: -webkit-fill-available;
    background: rgba(0, 0, 0, .6);
    z-index: 999999;
    display: flex;
    justify-content: center;
    align-items: center;
}

div#add-state-popup,
div#edit-state-popup {
    width: 26vw;
    height: 15vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #efefef;
    border-radius: 4px;
}

form#add-state-form,
form#edit-state-form {
    display: flex;
    flex-direction: column;
    width: inherit;
    height: inherit;
    justify-content: space-evenly;
    align-items: flex-start;
    margin-left: 22%;
}

form#add-state-form input,
form#edit-state-form input {
    width: fit-content;
    min-width: 3.5vw;
    margin-top: 3%;
}

form#add-state-form label,
form#edit-state-form label {
    min-width: 5.5vw;
}

#add-state-form > div:nth-child(3) > input[type=submit],
#edit-state-form > div:nth-child(3) > input[type=submit] {
    height: 100%;
    transition: .2s ease;
    border: 1px solid #808080;
    border-radius: 3px;
    margin-left: 27px;
    margin-top: 0;
}

#add-state-close,
#edit-state-close,
#ok-edit-state-close,
#create-car-popup-buttons > input[type=submit],
#edit-car-popup-buttons > input[type=submit],
#exit-create-car-popup,
#exit-edit-car-popup {
    border: 1px solid #808080;
    border-radius: 3px;
    height: 100%;
    margin-left: 27px;
    transition: .2s ease;
    cursor: pointer;
    min-width: 5vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

#add-state-close:hover,
#edit-state-close:hover,
#ok-edit-state-close:hover,
#add-state-form > div:nth-child(3) > input[type=submit]:hover,
#edit-state-form > div:nth-child(3) > input[type=submit]:hover,
#create-car-popup-buttons > input[type=submit]:hover,
#edit-car-popup-buttons > button:hover,
#exit-edit-car-popup:hover,
#exit-create-car-popup:hover {
    background: #808080;
}

#add-state-form > div:nth-child(3),
#edit-state-form > div:nth-child(3) {
    display: flex;
    justify-content: center;
    align-items: center;
}

#states-popup > div > div.list-group > a,
#edit-states-popup > div > div.list-group > a {
    border: 2px solid #6c757d;
}

#states-popup > div > div.list-group > div > a {
    cursor: pointer;
}

div#cars-background,
#create-car-background,
#edit-car-background {
    height: -webkit-fill-available;
    width: -webkit-fill-available;
    background: rgb(0, 0, 0, .5);
    z-index: 9999999;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
}

div#cars-popup {
    width: 47vw;
    height: 73vh;
    background: #efefef;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    border-radius: 4px;
}

#create-car-popup,
#edit-car-popup {
    width: 24vw;
    height: 65vh;
    background: #efefef;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    border: 2px solid #6c757d;
}

#create-car-form,
#edit-car-form {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    height: -webkit-fill-available;
}

div#cars-popup-buttons {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    height: 100%;
}

#cars-popup-table > table > tbody {
    overflow-y: scroll;
}

#cars-popup-table > table > tbody > tr > th,
#cars-popup-table > table > tbody > tr > td {
    padding: 0;
    cursor: pointer;
    transition: .2s ease;
}
#cars-popup-table > table > tbody > tr {
    transition: .1s ease;
}

#cars-popup-table > table > tbody > tr:hover {
    background: #808080;
}

div#cars-popup-table {
    min-width: 29rem;
    align-self: flex-start;
    margin-top: 1.3rem;
}

.price-by-day input[type="text"] {
    width: 6.5rem;
    height: 1.5rem;
}

.price-by-day label {
    width: 6.5rem;
    border: 1px solid #6c757d;
    height: 1.5rem;
    border-radius: 4px;
}

div#create-car-popup-buttons,
div#edit-car-popup-buttons {
    display: flex;
}

#create-car-form > div.car-number-input > label,
#edit-car-form > div.car-number-input > label {
    min-width: 5rem;
}

.chosen-car {
    background: #808080;
}

div#rent-background {
    position: absolute;
    z-index: 99999999;
    display: flex;
    background: rgba(0, 0, 0, .5);
    width: -webkit-fill-available;
    min-height: -webkit-fill-available;
    justify-content: center;
    align-items: center;
}

div#additional-rent-info,
div#client-info-inputs,
div#rent-prices,
#rents-button {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

div#rent-price-amounts {
    display: flex;
}

div#rent-prices {
    display: flex;
    flex-direction: row;
    width: 76%;
    justify-content: space-evenly;
}

div#rent-edit-popup {
    width: 46rem;
    height: max-content;
    background: #efefef;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    border-radius: 4px;
    padding-bottom: 15px;
}

#client-info-inputs > div > label {
    min-width: 5rem;
}

#client-info-inputs {
    align-self: flex-start;
    margin-left: 1rem;
}

#rent-from-date,
#acceptance-date {
    width: 10vw;
}

input#rent-give-days,
#acceptance-time,
#rent-mark {
    width: 6vw;
}


div#give-date {
    display: flex;
    align-items: baseline;
    width: 87%;
    justify-content: space-evenly;
}

div#rent-acceptance-date {
    display: flex;
    width: 82%;
    justify-content: space-evenly;
    margin-top: 3vh;
}

#rent-acceptance-date > div:nth-child(1),
#rent-acceptance-date > div:nth-child(2) {
    display: flex;
    flex-direction: column;
}

#client-info-inputs {
    margin-left: 7.5vw;
    margin-top: 4vh;
    width: 71%;
}

#client-info-inputs > div > input[type=text],
#additional-rent-info {
    width: 27.42rem;
}

#rent-state {
    width: 11vw;
}

#additional-rent-information {
    width: 71%;
}

#additional-rent-information > div > label,
#rent-prices > div:nth-child(1) > label,
#rent-price-amounts > div:nth-child(1) > label,
#rent-price-amounts > div:nth-child(2) > label,
#rent-price-amounts > div:nth-child(1) > div:nth-child(1) > label,
#rent-price-amounts > div:nth-child(1) > div:nth-child(2) > label,
#rent-marks-input > label,
#rent-states-input > label {
    min-width: 5rem;
}

#additional-rent-information {
    margin: 4vh;
}

#rent-price,
#rent-amount,
#rent-paid {
    width: 8.4vw;
}

#rent-price-amounts > div:nth-child(1) {
    margin-right: 2rem;
}

#rents-button > button {
    margin-bottom: 2vh;
}

#rent-background > form {
    border: 3px solid #6e6e6e;
    border-radius: 5px;
}

td.rent {
    padding: 0 !important;;
}

.rent > div {
    display: flex;
    margin-left: -13.7px;
}

@media screen and (max-width: 1900px) {
    .rent > div {
        display: flex;
        margin-left: -11px;
    }
}

.rent > div div {
    width: 100%;
    height: 58px;
}

.mark {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: hidden;
    background: transparent;
}

#acceptance-time-input {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

td.rent {
    max-width: 55px;
    content-visibility: auto;
}

div#deleteRent {
    margin-top: 0.6rem;
}

#rents-button > div:nth-child(3) {
    margin-bottom: 0.6rem;
}

#rent-prices > div:nth-child(1) > div:nth-child(1) > label {
    margin-right: 0.54rem;
}

#rent-price {
    width: 9.3vw !important;
}