@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');

:root {
    /*--navbar-height: 5rem;*/
    --navbar-height: 3rem;
    --gray-one: #F0F0F0;
    --gray-two: #DCDEE3;
    --gray-three: #00000029;
    --green-one: #CBE54E;
    --green-two: #94B447;
    --green-three: #55BB88;
    --green-four: #D3DD18;
    --blue-one: #006C8C;
    --white: #FFFFFF;
    /*--font-color-base: #3B5284;*/
    --font-color-base: #2c3e50;
    --border-radius-base: 10px; /*20*/
    --border-radius-base-small: 5px; /*10*/
    --horizontal-outer-padding: 2rem;
    --primaryDark: #2c3e50;
    --primaryFontInDark: #ffffff;
    --primaryFontInLight: #000000;
    --primaryDarkBackground: #546e7a;
    --primaryDarkDefault: #eee;
    --primaryDarkHovered: #607d8b;
    --primaryDarkSelected: #00695c;
    --primaryGreen: #00695c;
    --primaryLightGreen: #b2dfdb;
    /*--primaryBlue: #64b5f6;*/
    --primaryBlue: #2980b9;
    --primaryLightBlue: #e3f2fd;
    /*--primaryOrange: #ffcc80;*/
    --primaryOrange: #f39c12;
/*    --primaryLightOrange: #fff3e0;*/
    --primaryLightOrange: #ffcf62;
    /*--primaryRed: #ef5350;*/
    --primaryRed: #c0392b;
    --primaryLightRed: #ffebee;
    --primaryGray: #00000029;
    --primaryDarkOrange: #ff6f00;
    --primaryDarkBlue: #0d47a1;
}

html, body {
    height: 100%;
    font-family: 'Open Sans', sans-serif;
    color: var(--font-color-base);
    overflow-x: hidden;
  
}

app {
    height: 100%;
    position: relative;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.navbar {
    height: var(--navbar-height);
    /*background: var(--gray-one);*/
    background: var(--primaryDarkBackground);
    display: flex;
    justify-content: stretch;
    align-items: center;
    margin: 0px;
    padding: 0px;
    /*gap: 1.3rem;*/ /*1.5*/
    /*    box-shadow: 0px 3px 6px var(--gray-three);
    border-bottom-left-radius: var(--border-radius-base);
    border-bottom-right-radius: var(--border-radius-base);*/
    z-index: 15;
}

.navbarShadow {
    height: var(--navbar-height);
    width: 100%;
    background: var(--primaryDark);
    display: inline-flex;
    justify-content: stretch;
    align-items: center;
    gap: 1.3rem; /*1.5*/
    padding: 0px;
    margin: 0px;
    box-shadow: 0px 3px 6px var(--gray-three);
    /*border-bottom-left-radius: var(--border-radius-base);
    border-bottom-right-radius: var(--border-radius-base);*/
    /* z-index: 15;*/
}

.navbarDivider {
    height: auto;
    background-color: white;
    width: 1px;
    padding: 0px;
    margin: 0px;
}

.navbar .logo-wrapper {
    margin-right: auto;
}

    .navbar .logo-wrapper .logo {
        /*height: auto;*/
        height: 2rem;
    }

.navbar .button-wrapper {
    display: flex;
    gap: 1rem;
    align-items: center;
}

    .navbar .button-wrapper .circle {
        background: var(--green-one);
        height: 1.3rem;
        width: 1.3rem;
        border-radius: var(--border-radius-base);
    }

    .navbar .button-wrapper .label {
        font-size: 1.3rem;
        font-weight: bold;
        color: var(--primaryFontInDark);
    }

.active .label {
    color: var(--green-two) !important;
}

.nav-link {
    color: var(--primaryFontInDark) !important;
    font-size: 1.1rem !important;
}


.noScroll {
    overflow-y: hidden;
}

/*//layoutlvl2*/
.mapBox {
    grid-row: 1;
    grid-column: 2;
    height: 100% !important;
    box-shadow: 0px 3px 6px var(--gray-three);
    /*border-bottom-left-radius: var(--border-radius-base);*/
    border-bottom-right-radius: var(--border-radius-base);
    border-top-left-radius: var(--border-radius-base);
    border-top-right-radius: var(--border-radius-base);
    background: var(--primaryDarkBackground);
    color: var(--primaryFontInDark);
    display: grid;
    grid-template-rows: 50px 1fr 200px;
}

.mapBoxNoChat {
    grid-row: 1;
    grid-column: 2;
    height: 100% !important;
    box-shadow: 0px 3px 6px var(--gray-three);
    /*border-bottom-left-radius: var(--border-radius-base);*/
    border-bottom-right-radius: var(--border-radius-base);
    border-top-left-radius: var(--border-radius-base);
    border-top-right-radius: var(--border-radius-base);
    background: var(--primaryDarkBackground);
    color: var(--primaryFontInDark);
    display: grid;
    grid-template-rows: 50px 1fr 1px;
}

.mapBoxDriversNoChat {
    grid-row: 1;
    grid-column: 1/3;
    height: 100% !important;
    box-shadow: 0px 3px 6px var(--gray-three);
    /*border-bottom-left-radius: var(--border-radius-base);*/
    border-bottom-right-radius: var(--border-radius-base);
    border-top-left-radius: var(--border-radius-base);
    border-top-right-radius: var(--border-radius-base);
    background: var(--primaryDarkBackground);
    color: var(--primaryFontInDark);
    display: grid;
    grid-template-rows: 50px 1fr 1px;
}

.mapBoxMax {
    grid-row: 1;
    grid-column: 2/4;
    height: 100% !important;
    box-shadow: 0px 3px 6px var(--gray-three);
    border-bottom-right-radius: var(--border-radius-base);
    border-top-left-radius: var(--border-radius-base);
    border-top-right-radius: var(--border-radius-base);
    background: var(--primaryDarkBackground);
    color: var(--primaryFontInDark);
    display: grid;
    grid-template-rows: 50px 1fr 200px;
}

.mapBoxHidden {
    display: none;
    visibility: hidden;
}



.main2 {
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-rows: 1fr 0px;
    /*grid-template-columns: minmax(150px, 200px) minmax(500px, 600px) minmax(250px, 1fr);*/
    grid-template-columns: minmax(150px, 230px) minmax(500px, 600px) minmax(250px, 1fr);
    gap: 0.5rem;
    row-gap: 0px;
    background: var(--primaryDarkBackground);
    padding-left: 0.1rem;
    padding-right: 0.1rem;
    padding-bottom: 0.4rem;
}

    .main2 .map-wrapper {
        height: 100%;
        position: relative;
        background: var(--primaryDarkBackground);
        color: var(--primaryFontInDark);
        width: 100% !important;
    }

    .main2 .top .header {
        font-size: 1.5rem;
        font-weight: bold;
    }

.main2NewRideOpened {
    height: 100%;
    width: 100%;
    display: grid;
    /*grid-template-rows: 1fr 0px 200px;*/
    grid-template-rows: 1fr 200px;
    /*grid-template-columns: minmax(400px, 0.40fr) minmax(250px, 0.50fr) minmax(150px, 0.10fr);*/
    grid-template-columns: minmax(150px, 230px) minmax(500px, 600px) minmax(250px, 1fr);
    gap: 0.5rem;
    row-gap: 0px;
    background: var(--primaryDarkBackground);
    padding-left: 0.1rem;
    padding-right: 0.1rem;
    padding-bottom: 0.1rem;
}

    .main2NewRideOpened .map-wrapper {
        height: 100%;
        position: relative;
        background: var(--primaryDark);
        color: var(--primaryFontInDark);
    }

    .main2NewRideOpened .top .header {
        font-size: 1.5rem;
        font-weight: bold;
    }


.mainLogin {
    height: 100%;
    display: flex;
    background: var(--primaryDarkBackground);
}

.main {
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-rows: 70px 0px 1fr 0px 200px;
    /*grid-template-columns: minmax(400px, 0.40fr) minmax(250px, 0.50fr) minmax(150px, 0.10fr);*/
    grid-template-columns: minmax(500px, 600px) minmax(250px, 1fr) minmax(150px, 200px);
    gap: 1rem;
    row-gap: 0px;
    background: var(--primaryDarkBackground);
    padding-left: 0rem;
    padding-right: 0rem;
    padding-bottom: 0rem;
}




.main .top-container {
    display: flex;
    background: var(--white);
    box-shadow: 0px 3px 6px var(--gray-three);
    /*border-top-left-radius: var(--border-radius-base);*/
    border-top-right-radius: var(--border-radius-base);
    /*grid-column: 1*/ /*/ span 2*/ /*;
        display: grid;
        grid-template-columns: 300px;*/
    align-items: center;
    vertical-align: bottom;
    background: var(--primaryDark);
    color: var(--primaryFontInDark);
}

        .main .top-container .page-header {
            font-size: 3rem;
            font-weight: bold;
            margin-left: 0.5rem;
            margin-bottom: 0 !important;
            color: inherit;
        }

    .main .map-wrapper {
        grid-row: 3;
        grid-column: 1;
        height: 100%;
        position: relative;
        box-shadow: 0px 3px 6px var(--gray-three);
        /*border-bottom-left-radius: var(--border-radius-base);*/
        border-bottom-right-radius: var(--border-radius-base);
        background: var(--primaryDark);
        color: var(--primaryFontInDark);
    }

    /*//fake kvuli roztazeni mapy*/
    .main .map-wrapper2 {
        grid-row: 3;
        grid-column: 1;
        height: 100%;
        position: relative;
        box-shadow: 0px 3px 6px var(--gray-three);
        /*border-bottom-left-radius: var(--border-radius-base);*/
        border-bottom-right-radius: var(--border-radius-base);
        background: var(--primaryDark);
        color: var(--primaryFontInDark);
    }

    .main .top-panel {
        grid-row: 3; /*2*/
        grid-column: 2;
        background: var(--primaryDark);
        color: var(--primaryFontInDark);
        box-shadow: 0px 3px 6px var(--gray-three);
        border-radius: var(--border-radius-base);
        padding: 2rem var(--horizontal-outer-padding);
    }

    .main .top .header {
        font-size: 1.5rem;
        font-weight: bold;
    }

#mapId {
    position: absolute;
    z-index: 0; /*tom*/
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /*border-radius: var(--border-radius-base) !important;*/
    /*border-bottom-left-radius: var(--border-radius-base) !important;*/
    border-bottom-right-radius: var(--border-radius-base) !important;
}

    #mapId > div.leaflet-control-container > div.leaflet-top.leaflet-left > div {
        border: 1px solid #E9E9E9;
        box-shadow: 0px 3px 6px #00000029;
        border-radius: 8px;
        background: var(--white);
    }

        #mapId > div.leaflet-control-container > div.leaflet-top.leaflet-left > div > a.leaflet-control-zoom-in,
        #mapId > div.leaflet-control-container > div.leaflet-top.leaflet-left > div > a.leaflet-control-zoom-out {
            color: var(--green-four);
            background: transparent;
        }

#mapId2 {
    position: absolute;
    z-index: 0; /*tom*/
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /*border-radius: var(--border-radius-base) !important;*/
    /*border-bottom-left-radius: var(--border-radius-base) !important;*/
    border-bottom-right-radius: var(--border-radius-base) !important;
}

    #mapId2 > div.leaflet-control-container > div.leaflet-top.leaflet-left > div {
        border: 1px solid #E9E9E9;
        box-shadow: 0px 3px 6px #00000029;
        border-radius: 8px;
        background: var(--white);
    }

        #mapId2 > div.leaflet-control-container > div.leaflet-top.leaflet-left > div > a.leaflet-control-zoom-in,
        #mapId2 > div.leaflet-control-container > div.leaflet-top.leaflet-left > div > a.leaflet-control-zoom-out {
            color: var(--green-four);
            background: transparent;
        }


/*nefunguje mi musim stop mit lokalne var stylesss*/
/*asi si udelam vlastni css a to napojim */
/*.eSuccessColors {
    background-color: darkseagreen;
    color: white;
}

.eWarningColors {
    background-color: orangered;
    color: white;
}

.eWarningColr {
    color: orangered;
}
.eInfoColors {
    background-color: var(--primaryDarkBackground);
    color: var(--primaryFontInDark);
}*/

.mat-autocomplete-popup {
    z-index: 1 !important;
    /*width: 20px !important;
    position: fixed !important;
    top: initial !important;
    z-index: 1000 !important;
    background-color: red !important;*/
}

.mat-autocomplete-list {
    z-index: 1 !important;
    /*position: fixed !important;
    top: initial !important;
    z-index: 1000 !important;*/
}


/*#region barvy*/
.hoveredDarkItem {
    background-color: var(--primaryDarkHovered);
    color: var(--primaryFontInDark);
}

.hoveredDarkItemContent {
    background-color: var(--gray-two);
    color: var(--font-color-base);
}

.selectedDarkItem {
    background-color: var(--primaryDarkSelected);
    color: var(--primaryFontInDark);
}


.darkItemDefault .defaultDarkItem {
    background-color: var(--primaryDarkDefault);
}

.darkItemGreen {
    background-color: var(--primaryGreen);
    color: var(--primaryFontInDark);
}

.darkItemContentGreen {
    background-color: var(--primaryLightGreen);
    color: var(--font-color-base);
}

.selectedDarkItemContent {
    background-color: var(--primaryLightGreen);
    color: var(--font-color-base);
}

.darkItemBlue {
    background-color: var(--primaryBlue);
    color: var(--primaryFontInDark);
}

.darkItemContentBlue {
    background-color: var(--primaryLightBlue);
    color: var(--font-color-base);
}

.darkItemOrange {
    background-color: var(--primaryOrange);
    color: var(--primaryFontInDark);
}

.darkItemContentOrange {
    background-color: var(--primaryLightOrange);
    color: var(--font-color-base);
}

.darkItemRed {
    background-color: var(--primaryRed);
    color: var(--primaryFontInDark);
}

.darkItemContentRed {
    background-color: var(--primaryLightRed);
    color: var(--font-color-base);
}

.darkItemGray {
    background-color: var(--primaryGray);
}

.panelHeaderColors -option -text {
    color: var(--primaryFontInDark) !important;
}
/*#endregion barvy*/

.advice {
    text-align: center;
    vertical-align: middle;
    background-color: lightgoldenrodyellow;
    height: 60px;
    margin-top: 5px;
}

/*//global design helpers*/


:root .tableHeader {
    background-color: lightgoldenrodyellow;
}

::deep .tableHeader {
    background-color: lightgoldenrodyellow;
}

:root .hidden {
    visibility: hidden;
}

::deep .hidden {
    visibility: hidden;
}

:root .shown {
    visibility: visible;
}

::deep .shown {
    visibility: visible;
}

:root .contentBox {
    height: 100%;
    overflow-y: auto;
}

:root .content {
    padding-right:2px;
}

:root .table tr:hover {
    background: #ebebdf;
}

::deep .table tr:hover {
    background: #ebebdf;
}

:root .table .tableHeader:hover {
    background: #fafad6;
}

::deep .table tableHeader:hover {
    background: #fafad6;
}


.backgroundCss {
    background: var(--white) !important;
}
.fa-brands {
margin-right:5px;
}
/*::deep .contentBox {
    height: 100%;
    overflow-y: auto;
}*/
/*.material-icons {
    vertical-align: middle !important;
}*/


.vip .detailBox.voucher {
    z-index:2 !important;
}

@media only screen and (max-width: 900px) and (min-width: 200px) {
    .vip .detailBox.voucher {
        width: 320px;
        height: auto;
    }
}

    @media only screen and (max-width: 1100px) and (min-width: 400px) {
        html, body {
            line-height: 1;
        }

        .nav-link {
            font-size: 1rem !important;
        }



        .main2 {
            grid-template-columns: minmax(150px, 230px) minmax(345px, 600px) minmax(250px, 1fr);
        }

        .side-panel .pickupPlace, .side-panel .destinationPlace {
            font-size: 0.9rem !important;
            display: block;
            padding: 5px 0;
            border-bottom: 1px solid black;
            text-align: left;
        }


        .mdc-chip {
            font-size: 0.7rem !important;
            height: 23px !important;
            padding: 0 8px !important;
        }

        .side-panel .rides-holder table td, .rideBox .secondLine {
            display: table-row;
        }

        .side-panel .rides-holder table .fa-taxi {
            margin-top: 6px;
        }

        .form-control {
            padding: 0;
        }

        .mdc-fab--mini {
            width: 30px !important;
            height: 30px !important;
        }

        .mdc-fab .mdc-fab__icon {
            font-size: 19px !important;
        }

        .form-control, .blazored-typeahead__input {
            height: calc(1em + 0.75rem + 2px) !important;
        }

        .d-flex.card {
            margin-bottom: 5px;
        }

        .rideMonitorTopBox {
            display: none;
        }

        .side-panel .calendarIcon {
            position: absolute;
            top: 7px;
            margin-left: 167px;
        }

        .side-panel .settingsIcon {
            position: absolute;
            top: 7px;
            margin-left: 205px;
        }

        .material-icons {
            font-size: 19px !important;
        }

        .ml-1, .mx-1 {
            margin-left: 0 !important;
        }

        .RidesToggles {
            margin-bottom: 5px;
        }

        .rideMonitorTopBox {
            display: none;
        }

        .side-panel .calendarIcon {
            position: absolute;
            top: 7px;
            margin-left: 167px;
        }

        .side-panel .settingsIcon {
            position: absolute;
            top: 7px;
            margin-left: 205px;
        }

        .material-icons {
            font-size: 19px !important;
        }

        .ml-1, .mx-1 {
            margin-left: 0 !important;
        }

        .RidesToggles {
            margin-bottom: 5px;
        }

        .main2NewRideOpened {
            grid-template-columns: minmax(10%, 25%) minmax(0, 0) minmax(70%, 75%);
        }

            .main2NewRideOpened .mapBoxNoChat {
                display: none;
            }

            .main2NewRideOpened .header {
                display: none;
            }

            .main2NewRideOpened .RidesToggles {
                display: none;
            }

        .rideTitle .mat-h5 {
            font-size: 1.2em !important;
        }
    }
}


@media only screen and (max-width: 900px) and (min-width: 400px) {
    .main2 {
            grid-template-columns: minmax(100px, 230px) minmax(300px, 600px) minmax(250px, 1fr);
    }

    @media only screen and (max-width: 1290px) and (min-width: 1001px) {
        .main2 {
            grid-template-columns: minmax(150px, 200px) minmax(400px, 400px) minmax(250px, 1fr);
        }

        .side-panel .pickupPlace, .side-panel .destinationPlace {
            font-size: 0.8rem !important;
        }

        .rides-holder td {
            line-height: 0.85rem;
            vertical-align: top;
        }

            .rides-holder td .material-icons {
                font-size: 18px;
            }

            .rides-holder td .mr-2.float-right {
                padding: 8px;
            }

            .rides-holder td .mr-2 {
                font-size: 0.9em;
            }
    }