:root {
    --bg-color-header: #F7F7F7;
    --shadow-color: rgba(0, 0, 0, 0.2);
}

html {
    position: relative;
    font-size: 16px;
}

body {
    font-family: 'Montserrat', sans-serif;
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: 100vh;
    min-height: 100dvh; /* new browsers, to account for hidable address bar in some browsers */
    min-width: 360px;
    overflow: auto;
}

body > img {
    width: 70%;
    height: auto;
    margin-top: 29px;
}

header {
    background-color: var(--bg-color-header);
    box-shadow: 0 3px 5px var(--shadow-color);
    z-index: 1000;
}

.footer {
    min-height: 75px;
    background-color: var(--bg-color-header);
    box-shadow: 0 -3px 5px var(--shadow-color);
    z-index: 1000;
    flex-wrap: wrap;
    padding: 10px 0;
}

a {
    cursor: pointer;
}

h1, h2, h3, h4, h5 {
    margin: 0;
}

h1 {
    font-size: 24px;
    font-weight: 700;
}

#progressTable.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before { /* 99.9% not needed */
    top: 50%;
    margin-top: -9px;
    left: 8px;
}

.rad-table tr td.child {
    white-space: normal !important;
    word-break: break-word;
    max-width: 100%;
}
.rad-table tbody tr.child ul.dtr-details {
    width: 100%;
}
.rad-table :is(th, td) {
    padding: .5rem;
}

.dt-layout-row {
    margin: 0 !important;
}

.form .btn {
    width: 30px;
    border: 1px solid black;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: white;
    transition: all 0.3s ease;
    color: black;
    font-weight: 700;
}

input:focus-visible {
    outline-offset: -30px;
}

.arrow {
    width: 0;
    height: 0;
    transition: all 0.3s ease;
}

.arrow.right {
    border-left: 6px solid black;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

.arrow.left {
    border-right: 6px solid black;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

.form .btn:hover {
    background: black;
    border-color: black;
    color: white;
}

.btn:hover .arrow.right {
    border-left-color: white;
}

.btn:hover .arrow.left {
    border-right-color: white;
}

.fs-24 {
    font-size: 24px;
}

.bg-artillery-img {
    background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), url(/img/anti_aircraft_artillery.png) 0 0 / 100% 152% no-repeat;
    padding: 121px 10px; /* header img default height + margin top */
    display: flex;
    flex-grow: 1;
    justify-content: center;
    flex-direction: column;
}

.form > .form-floating {
    margin-bottom: 40px;
}

.form > .form-floating > label {
    margin: 0;
    padding: 0;
    top: -20px;
    color: black;
}

.form > .form-floating > input {
    background: transparent !important;
    border: 1px solid black !important;
    border-radius: 0;
    box-shadow: none !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.form > .form-floating > input {
    height: 48px;
    min-height: 48px;
}

form button[type=submit]:not(.no-height) {
    height: 48px;
}

.total-killed-container {
    margin-left: 120px;
    column-gap: 8px;
    font-size: 20px;
    font-weight: 600;
}

.active-station-container {
    margin-right: 30px;
    column-gap: 20px;
    font-size: 17px;
    margin-left: 10px;
}

.verification-code-form {
    padding-right: 2rem;
}

.validation-summary-errors ul {
    list-style: none;
    padding: 0;
    margin-bottom: 25px;
}

.report-span > li > a.active {
    text-decoration: underline;
    text-decoration-skip-ink: none;
    color: black;
    font-weight: 500;
}

.download-template-btn {
    margin-left: 50%;
}

.language-switcher {
    display: flex;
    width: 100px;
    right: 0;
    top: 70px;
}

.language-switcher > a {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    background-color: #C7C7C7;
    width: 40px;
    height: 24px;
    color: black;
    font-weight: 700;
    font-size: 10px;
    transition: all 0.3s ease;
    padding-top: 2px;
}

.language-switcher > a.active {
    background-color: white;
    color: #757575;
}

.language-switcher > a:hover:not(.active) {
    background-color: #757575;
    color: white;
}

.calendar {
    position: absolute;
    left: 30px;
    top: 6px;
}

#datetimepicker-from {
    width: 135px;
    padding: 6px 6px 6px 40px;
    border: 1px solid black;
    border-radius: 0px;
    border-right: 1px solid #D6D6D6;
}

#datetimepicker-to {
    width: 135px;
    padding: 6px 6px 6px 40px;
    border: 1px solid black;
    border-radius: 0px;
    border-left: none;
}

.bootstrap-datetimepicker-widget table td.active {
    background-color: black !important;
    color: #fff !important;
}

.bootstrap-datetimepicker-widget table td.today:before {
    border-bottom-color: black !important;
}

.bootstrap-datetimepicker-widget table td.active.today:before {
    border-bottom-color: white !important;
}

.bootstrap-datetimepicker-widget table td span.active {
    background-color: black !important;
}

.submit-filter-btn {
    border: 1px solid black !important;
    height: 38px !important;
    width: 38px !important;
    margin-left: 15px;
}

.arrow {
    width: 0;
    height: 0;
    transition: all 0.3s ease;
}

.arrow.right {
    border-left: 6px solid black;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

.fa:is(.fa-chevron-left, .fa-chevron-right) {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><path d="M32.5 96c0-12.9 7.8-24.6 19.8-29.6S78 64.2 87.1 73.4l160 160c12.5 12.5 12.5 32.8 0 45.3l-160 160c-9.2 9.2-22.9 11.9-34.9 6.9S32.5 428.9 32.5 416l0-320z"/></svg>');
    display: block;
    height: 10px;
    width: 5px;
    margin-left: 7.5px;
}
.fa.fa-chevron-left {
    transform: rotate(180deg);
}
.datepicker th:is(.next, .prev) {
    vertical-align: middle;
}

.submit-filter-btn:hover {
    background: black;
    border-color: black;
}

.submit-filter-btn:hover .arrow.right {
    border-left-color: white;
}

@media (max-width: 1212px) {
    .footer {
        justify-content: center !important;
    }
    .total-killed-container {
        margin-left: 10px;
    }
    .language-switcher {
        margin-right: 0px !important;
    }
    .download-template-btn {
        margin-left: 0px !important;
    }
}

@media (max-width: 1110px) {
    .header-items-container {
        justify-content: center !important;
    }
}

@media (max-width: 775px) {
    .language-switcher {
        margin-right: 0px !important;
    }
    .active-station-container {
        flex-direction: column;
        margin-left: 10px;
        margin-right: 0;
    }
    .footer {
        flex-direction: column;
    }
}

@media (max-width: 490px) {
    .header-items-container > a > img {
        width: 350px;
    }
    .total-killed-container {
        font-size: 16px;
    }
    .active-station-container {
        font-size: 11px;
    }
    .language-switcher {
        width: auto;
        right: 15px;
    }
}

@media (min-width: 992px) { /*lg*/
    .language-switcher {
        right: 15%;
    }
}

@media (min-width: 768px) { /*md*/
    html {
        font-size: 16px;
    }

    body > img {
        width: auto;
        max-height: 92px;
    }

    .bg-artillery-img {
        padding-left: 0;
        padding-right: 0;
    }

    .verification-code-form {
        padding-right: 0;
    }
}

@media (min-width: 576px) { /*sm*/
    .language-switcher {
        top: 29px;
    }
}

@media (max-height: 750px) {
    body > img {
        max-width: 400px;
    }
}