:root {
    --header-height: 76px;
    --sidebar-width: 200px;
    --sidebar-collapsed-width: 70px;
}

html {
    font-size: 14px;
    height: 100%;
    font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

input[type="radio"] {
    display: none;
}

body {
    --background-color: var(--bs-dark);
    --text-color: var(--bs-light);
    --wrapper-color: var(--bs-gray-dark);
    --text-color-rgb: 204,204,204;
    --nav-active-background-color: rgb(43, 47, 51);
    --nav-active-text-color: rgb(204,204,204);
    --border-color: #1a1a1a;
    --selection-border-color: var(--bs-gray-800);
    --selection-selected-border-color: var(--bs-light);
    --bs-body-color: var(--text-color);
    --list-item-bg-odd: #2d3237;
    --list-item-bg-even: #262a2f;
    /*--border-color: var(--bs-gray-dark);*/

    height: 100%;
    width: 100%;
    vertical-align: top;
    display: flex;
    flex-wrap: wrap;
    color: var(--text-color);
}

    body.darkmode-off {
        --background-color: var(--bs-light);
        --text-color: var(--bs-gray-dark);
        --wrapper-color: rgb(232, 232, 232);
        /*--text-color-rgb: 108,117,125;*/
        --text-color-rgb: 52,58,64;
        --nav-active-background-color: var(--bs-gray-400);
        --nav-active-text-color: var(--bs-gray-800);
        --border-color: var(--bs-gray-300);
        --selection-border-color: var(--bs-gray-400);
        --selection-selected-border-color: var(--bs-dark);
        --list-item-bg-odd: #ededed;
        --list-item-bg-even: #dedede;
    }

input[type="text"],
input[type="text"][readonly],
input[type="password"] {
    padding: .7rem 1rem .7rem 1rem;
    background-color: rgb(var(--select-custom-background-color-rgb));
    border: 1px solid var(--select-custom-border-color);
    color: var(--text-color);
    outline: none;
}

    input[type="text"]:focus,
    input[type="password"]:focus {
        outline: none;
        background-color: unset;
        background-color: rgb(var(--select-custom-background-color-rgb));
        color: var(--text-color);
    }


select {
    background-color: var(--background-color);
    border: var(--border-color);
    color: var(--text-color);
}

.flex-1 {
    flex: 1;
}

/*.flex-gap > :first-child {
    padding-right: 25px;
}

.flex-gap > :last-child {
    padding-left: 25px;
}*/

.flex-gap > * /*:not(:last-child):not(:first-child)*/ {
    padding-left: 25px;
    padding-right: 25px;
}

.w-0 {
    width: 0 !important;
    overflow: hidden;
    opacity: 0 !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    pointer-events: none !important;
}

.width-anim {
    transition: all linear .2s;
    white-space: nowrap;
    opacity: 1;
}

loading {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--background-color);
    display: none;
    z-index: 9;
}

    loading::after {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        animation: fa-spin 2s linear infinite;
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        line-height: 1;
        content: "\f021";
        width: fit-content;
        height: fit-content;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        left: 0;
        font-size: 30px;
        color: var(--text-color);
    }

    loading.show {
        display: block;
    }


.checkbox {
    border: 2px solid var(--selection-border-color);
    padding: 10px 20px;
    border-radius: 5px;
    vertical-align: top;
    /*height: 45px;*/
    cursor: pointer;
    user-select: none;
    display: block;
}

    .checkbox > input[type="checkbox"] {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .checkbox > span.icon {
        width: 21px;
        height: 21px;
        border: 2px solid var(--selection-selected-border-color);
        display: inline-block;
        margin-right: 10px;
    }

        .checkbox > span.icon > i {
            vertical-align: top;
            display: none;
        }

    .checkbox > span.text {
        vertical-align: top;
        display: inline;
        /*height: 21px;*/
    }

    .checkbox > input[type="checkbox"]:checked ~ span.icon > i {
        display: inline-block;
    }

.input-group > .input-group-append > .input-group-text,
.input-group > button.dropdown-toggle,
.input-group > button.input-group-append {
    background-color: rgba(var(--text-color-rgb), .05);
    border: 1px solid var(--select-custom-border-color);
    color: var( --text-color);
}

.input-group > button.dropdown-toggle {
}

    .input-group > button.dropdown-toggle::after {
        margin-left: 10px;
    }

.sidebar-logo {
    padding: 10px;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
}

.page-wrapper {
    border-radius: 20px;
    background-color: var(--background-color);
    padding: 40px 60px;
    display: inline-block;
    min-width: 300px;
    max-width: 90%;
}

h1 {
    font-size: 1.5rem;
}

.selection-box {
    border: 2px solid var(--selection-border-color);
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
    flex: 1;
    position: relative;
}

    .selection-box > .check-icon {
        display: none;
        position: absolute;
        top: 0;
        right: 0;
        background-color: var(--selection-selected-border-color);
        color: var(--background-color);
        border-radius: 0 5px 0 5px;
        width: 21px;
        height: 21px;
        text-align: center;
        line-height: 21px;
        font-size: 1rem;
    }

    .selection-box.box-row {
        display: block;
        text-align: left;
        margin-bottom: 20px;
    }

        .selection-box.box-row > i {
            font-size: 20px;
            vertical-align: middle;
        }

        .selection-box.box-row > .text {
            margin-top: 0;
            margin-left: 20px;
        }

input[type="radio"]:checked ~ .selection-box {
    border-color: var(--selection-selected-border-color);
}

    input[type="radio"]:checked ~ .selection-box > .check-icon {
        display: inline-block;
    }

.selection-box > i {
    font-size: 50px;
}

.selection-box > .text {
    margin-top: 20px;
}

.info-column {
    border-right: 1px solid var(--selection-border-color);
    overflow: hidden
}

    .info-column ul {
        list-style: circle;
    }

        .info-column ul > li {
            list-style: disc
        }

.info-text-content {
    display: inline-block;
    min-width: 100%;
}

.numberSelector {
    display: flex;
    flex-direction: row;
    max-width: 150px;
}

    .numberSelector > .count-label {
        flex: 1;
        text-align: center;
        align-content: center;
    }

.list-box {
    border: 2px solid var(--selection-border-color);
    border-radius: 10px;
    padding: 5px;
}

    .list-box > .list-item {
        display: block
    }

        .list-box > .list-item > div {
            border-radius: 5px;
            padding: 10px;
            background-color: var(--list-item-bg-even);
            cursor: pointer;
            border: 2px solid transparent;
        }

        .list-box > .list-item:nth-child(2n+1) > div {
            background-color: var(--list-item-bg-odd);
        }

        .list-box > .list-item:not(:last-child) > div {
            margin-bottom: 5px;
        }

        .list-box > .list-item:hover > div {
            background-color: var(--selection-border-color);
        }

        .list-box > .list-item > .selection-box > .btn {
            color: var(--text-color);
            position: absolute;
            right: 0;
            bottom: 0;
            top: 0;
            display: none;
        }

        .list-box > .list-item:hover > .selection-box > .btn {
            display: inline-block;
        }

    .list-box > input[type="radio"] {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .list-box > .list-item > input[type="radio"]:checked + div {
        border-color: var(--selection-selected-border-color)
    }

    .list-box > .list-item > div > span.icon {
        display: inline-block;
        text-align: center;
        width: 21px;
        height: 21px;
        line-height: 21px;
    }

.transfer-list {
    overflow: auto;
}

    .transfer-list .transfer-item {
        background-color: var(--background-color);
        box-shadow: 0 0 1rem rgba(0,0,0,.15);
        padding: 1rem 2rem;
        border-radius: 10px;
        display: flex;
        flex-direction: row;
    }

        .transfer-list .transfer-item .transfer-details-container {
            flex: 1;
        }


            .transfer-list .transfer-item .transfer-details-container .pointer-icon > svg {
                width: 25px;
                height: 25px;
                fill: var(--text-color);
            }


            .transfer-list .transfer-item .transfer-details-container .transfer-details {
                font-size: 14px;
                color: rgb(var(--text-color-rgb), .8);
            }

        .transfer-list .transfer-item .price-container span {
            vertical-align: middle;
        }

.dropdown-menu {
    background-color: rgb(var(--select-custom-background-color-rgb)) !important;
    border: 1px solid var(--select-custom-border-color) !important;
    color: var(--select-custom-text-color) !important;
}

    .dropdown-menu a {
        color: unset;
    }

.navbar-nav > .user-menu .user-image {
    border-radius: 50%;
    height: 2.1rem;
    width: 2.1rem;
    box-shadow: 0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23) !important;
    float: none;
    line-height: 10px;
    margin-right: .4rem;
    margin-top: -8px;
    vertical-align: middle;
    border-style: none;
}

table, table.table-striped,
.table-striped > tbody > tr:nth-of-type(2n+1) {
    color: var(--text-color) !important;
}

@media (max-width: 1199.98px) {
    .page-wrapper {
        padding: 40px 20px;
    }
}

@media (max-width: 991.98px) {
    .page-wrapper {
        max-width: unset;
        display: block;
        border-radius: 0;
        margin: 10px;
    }

    .column3 {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto 1fr;
        grid-gap: 20px;
        grid-template-areas:
            "info type"
            "info filter";
    }

        .column3 > .info-column {
            grid-area: info;
            position: relative;
            border: none;
            overflow: unset;
        }

        .column3 > .type-column {
            grid-area: type;
        }

        .column3 > .filter-column {
            grid-area: filter;
        }

        .column3 > .info-column::after {
            content: "";
            display: inline-block;
            right: -5px;
            top: 0;
            bottom: 0;
            width: 1px;
            position: absolute;
            border-right: 1px solid var(--selection-border-color);
        }

    #filterListContainer.w-0 {
        height: 0;
        overflow: hidden;
    }

    .flex-gap > * {
        padding-right: 0;
        padding-left: 0;
    }
}

@media (max-width: 767.98px) {

    .w-100-below-md {
        width: 100% !important
    }

    .main-wrapper :not(.input-group) button.btn {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .main-wrapper .input-group > button.btn {
        padding-top: .375rem;
        padding-bottom: .375rem;
    }

    .info-column {
        border-color: var(--border-color);
        border-style: solid;
        border-width: 0 0 1px 0;
        padding-bottom: 30px;
        margin-bottom: 30px;
    }

    .numberSelector {
        max-width: unset;
    }

    .flex-gap > * {
        padding-right: 0;
        padding-left: 0;
    }

    .transfer-list .transfer-item {
        display: block;
        padding: 1rem;
    }

        .transfer-list .transfer-item .transfer-direction-info,
        .transfer-list .transfer-item .transfer-details {
            display: grid;
            column-gap: 20px;
        }

        .transfer-list .transfer-item .transfer-direction-info {
            grid-template-columns: auto 1fr;
            grid-template-rows: auto 1fr;
            grid-template-areas:
                "icon departure"
                "icon arrival";
        }

            .transfer-list .transfer-item .transfer-direction-info .fa-arrow-right-long,
            .transfer-list .transfer-item .transfer-direction-info .pointer-icon {
                display: none
            }

            .transfer-list .transfer-item .transfer-direction-info .fa-route {
                grid-area: icon;
                align-self: center;
            }

            .transfer-list .transfer-item .transfer-direction-info .departurePointName {
                grid-area: departure;
                text-transform: uppercase;
            }

            .transfer-list .transfer-item .transfer-direction-info .arrivalPointName {
                grid-area: arrival;
                text-transform: uppercase;
                font-weight: bold;
            }

        .transfer-list .transfer-item .transfer-details {
            margin-bottom: 10px;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr auto;
            grid-template-areas:
                "date car"
                "time car";
        }

            .transfer-list .transfer-item .transfer-details .calendar-container {
                grid-area: date;
            }

            .transfer-list .transfer-item .transfer-details .clock-container {
                grid-area: time
            }

            .transfer-list .transfer-item .transfer-details .car-container {
                grid-area: car;
                align-self: center;
            }

    .list-box > .list-item > .selection-box > .btn {
        display: block;
    }
}

@media (max-width: 575.98px) {
    body {
        flex-direction: column;
        flex-wrap: nowrap;
    }

    aside {
    }

    footer {
        display: none;
    }

    aside .sidebar-logo {
        display: none;
    }

    aside > ul.nav {
        display: flex;
    }

    aside > ul > li {
        flex: 1
    }

        aside > ul > li:not(:last-child) {
            border-right: 1px solid var(--border-color)
        }
}