/* GENERAL  */

html, body {
    margin: 0;
    padding: 0;
    font-family: Arial;
    font-size: 13px;
}

body span,
body p,
body button,
body a,
body div {
    font-family: Arial;
    font-size: 13px;
}

#app {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 0;
    border: 0px
}

.app {
    overflow-y: auto;
    overflow-x: hidden;
}

/* GENERAL - Loader */
    .spinner-screen--circular-progress {
        position: absolute;
        z-index: 1000;
    }

    .circular-progress--wrapper {

    }

    .circular-progress__circular-progress {

    }

    .circular-progress__circular-progress svg {
        
    }

    .circular-progress__circular-progress svg circle {
        
    }

/* GENERAL - SECTION */
    .section {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

/* GENERAL - CONTAINERS */
    .container {
        margin: 0px !important;
    }

    .container__inner {
        padding: 0px !important;
    }

    .container--lists {
        margin: 0px !important; 
        padding: 0px !important;   
    }

/* GENERAL - BUTTONS */

    button.button {
        border: 0px;
        background-color: #F36F20;
        padding: 5px 50px;
        line-height: 1em;
        width: 200px;
        margin: 0px;
        text-transform: none;
        display: block;
        border-radius: 5px !important;
        -webkit-box-shadow: 3px 3px 5px 1px rgba(0,0,0,0.75);
        -moz-box-shadow: 3px 3px 5px 1px rgba(0,0,0,0.75);
        box-shadow: 3px 3px 5px 1px rgba(0,0,0,0.75);
        -webkit-appearance: none;
        width: -webkit-fill-available;
    }

    button.button span {
        color: white !important;
        padding: 10px 0px 10px 0px;
    }

    button.button span > span {
        color: black;
        font-size: 13px;
        font-weight: normal;
        line-height: 1em;
        letter-spacing: 0em;
    }

    button.button .icon {
        display: none;
    }

    button.button:hover {
        cursor: pointer;
        cursor: hand;
        background-color: #F36F20;              
    }   

    button.button:focus {
        cursor: pointer;
        cursor: hand;
        background-color: #F36F20;
        border-color: #F36F20;
    }

    button.button:disabled {
        opacity: 0.5;
        color: #333333;
        background-color: #888888;
    }

    .custom-radio {
flex-basis: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 7px;
        margin-top: 7px;
    }
                
@media all and (-ms-high-contrast:none)
    {
                                *::-ms-backdrop, .custom-radio /* IE11 */
                                { 
                                               flex-basis: auto !important;
                                               margin-right: 0 !important;
                                               margin-bottom: 7px;
                                               margin-top: 7px;
                                }
    }


    .custom-radio input:checked ~ label {
        background-color: #F36F20;
    }

    .custom-radio input:checked ~ label span {
        color: white;
    }

    .custom-radio__button {
        background-color: white;
        border: 1px solid #F36F20;
        color: black;
        border-radius: 5px;
    }

    .custom-radio__button:focus,
    .custom-radio__button:hover {
        background-color: #F36F20;
    }

    .custom-radio__button span {
        text-transform: none;
    }

/* GENERAL - CARDS */

    .card {
        box-shadow: none;
    }

    /* Icon */
        .card__header div {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

    /* Title */
        .card__title {
            text-align: center;
            font-size: 18px;
        }

        .card__title span {
            text-align: center;
            font-size: 18px;
        }

    /* Card controls */
        .card__actions {
            display: flex !important;
            flex-direction: column;
        }

        .card__actions button span {
            font-size: 13px;
        }

    /* card controls - Children */
        .card__children { 
            display: flex;
            flex-direction: column;
        }

        .card__children .custom-radio__button {
            width: 100%;
        }




   /*
     Card control items 
        .card__children {
            
            max-width: 600px;
            margin: 0 auto;
        }

        .card__children .custom-radio {
            margin: 10px;
        }

        .card__children .custom-radio__button {
            width: 100%;
        }
   */

/* GENERAL - Google Maps - Autosuggest */
    .react-autosuggest__suggestions-container {

    }   

    .react-autosuggest__suggestion {
        list-style-type: none;
        margin-bottom: 10px;
    }

    .react-autosuggest__suggestions-list {
        padding: 0;
    }

    .autocomplete-item__text--bold {
        font-weight: bold;
    }

    .autocomplete-item__text--secondary {
        padding-left: 15px;
    }

/* GENERAL - Google Maps - GPS location button */
    .google-map-location-button {
        -webkit-box-shadow: 3px 3px 5px 1px rgba(0,0,0,0.75);
        -moz-box-shadow: 3px 3px 5px 1px rgba(0,0,0,0.75);
        box-shadow: 3px 3px 5px 1px rgba(0,0,0,0.75);
        background-color: white;
    }

/* TOP BAR */
    .app-bar {
        box-shadow: none;
    }

    .app-bar__toolbar {
        height: 60px !important;
        border: 0px solid black;
        background-color: white;
        display: flex;
        justify-content: space-between;  
        margin: 0;
        padding: 0;
        background-image: url(./img/logo-ea.png); 
        background-position: right 10px top 5px;
        background-size: 60px;                 
    }

        .app-bar__icon {             
            width: 200px;
            height: 60px;
            background-image: url(./img/logo-op.png); 
            background-position: left 10px top 17px;
            background-size: 120px; 
            margin: 0;
            padding: 0;
        }

        .app-bar__title {
            display: none;
        }

/* HOMEPAGE */

    .section--home {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .section--home .container {
       display: flex;
       flex-direction: column;
       justify-content: center;
    }

        /* Images */
        .section--home .container--images {
            display: none;
        }

        /* Content */
        .section--home .container--content {
            padding-top: 20px;    
        }

            .section--home .container--content .title {
                text-align: center;
            }

            .section--home .container--content .subtitle {
                text-align: center;
            }

            .section--home .container--content .subtitle > span {
                font-size: 20px;
                font-weight: normal;
                line-height: 0;
                letter-spacing: 0em;
            }  

            .section--home  .container--content .description {
                text-align: center;
                margin: 20px 0px 20px 0px;
            } 

        /* Actions */

        .section--home .container--actions {
                
        }

            .section--home .container--actions .container__inner {
                display: flex;
                flex-direction: column;
                justify-content: center;
                margin: 0;
                padding: 0;
            }

            .section--home .button {
                width: 100%;
                margin-bottom: 20px;
            }    


            .section--home .container--actions > .container__inner .container--emergency {
                display: none;
            }

       

        /* Legend */
            .section--home .container--legend {
                display: none;       
            }
      
/* INFORMATION PAGE */

    .section--information {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .section--information .container {
       display: flex;
       flex-direction: column;
       justify-content: center;
    }

    /* Input underline */
        .field.field--is-focus > div::after,
        .react-autosuggest__input--focused::after,
        .field--vehicledmbrand > div > div::after,
        .field--vehicledmmodel > div > div::after {
            background-color: #F36F20;
            border-bottom: 2px solid #F36F20; 
        }

    /* Header */
        .section--information .section__header {
            background-color: #515254;
            color: white;
            margin-bottom: 10px;
        }

        .section--information .section__header .header__container {
            text-align: center;    
        }

        .section--information .section__header .header__container h2 {
            font-size: 13px !important;   
            padding: 15px;
        }

        .section--information .section__header .header__container h2 span {
            font-size: 13px;
            font-weight: normal;
            line-height: 0;
            letter-spacing: 0em;   
        }

    /* Form */
        .section--information .container--form   {
            width: 100%;
        } 

        .section--information .container--form .container__inner  {
            width: 100%;
        } 

        .section--information .container--form .container__inner .field {
            margin-bottom: 15px; 
        }

        .section--information .container--form .container__inner .field--text {
            font-family: Arial;
            font-size: 13px;    
        }

        .section--information .container--form .container__inner .field--select {
            font-family: Arial;
            font-size: 13px;   
        } 

        .section--information .container--form .container__inner .field > div::before {
            background-color: transparent;
            margin-left: 5px;
        }

        .section--information .react-autosuggest__input--focused::after {
            background-color: black;
        }

        /* Country codes dropdown list */

            .section--information .field--reqdmphonenumber input {
                padding-left: 45px;
            }

            .section--information .flag-dropdown {
                top: auto;
                bottom: -43px;
                background-color: transparent;
                border: 0;
                outline: none;
            }

            .section--information .flag-dropdown .country {
                font-size: 10px;
            }

        /* Plate number */

            .section--information .field--vehicledmcarplate {
                position: relative;
                margin-top: 10px;
            }

            .section--information .field--vehicledmcarplate > div {
                margin-top: 4px;
            }

            .section--information .field--vehicledmcarplate label {
                left: 40px;
                top: 2px;
                font-family: Arial;
                font-size: 13px;  
            }

            input:-webkit-autofill {
                background-color: #ffffff;
                -webkit-box-shadow: 0 0 0 80px white inset;
            }

            .section--information .field--vehicledmcarplate::after {
                content: '';
                position: absolute;
                width: 20px;
                height: 65px;
                background-color: #F36F20;
                border-top-left-radius: 6px;
                border-bottom-left-radius: 6px;
                top: 0px;
            }

            .section--information .field--vehicledmcarplate input {
                padding-left: 40px;
                padding-bottom: 20px;
                padding-top: 26px;
                border-top-left-radius: 6px;
                border-bottom-left-radius: 6px;
            }

        /* Continue button */
            .section--information .button {
                margin: 0 auto;
            }

    /* Neúspěšné ověření */
        .modal--ineligibility .modal__actions-container {
            display: flex;
            flex-direction: column;
        }

        .modal--ineligibility .modal__actions-container .button {
            width: 100%;
            margin: 0px 10px 10px 10px;
            padding: 20px
        }

        .modal--ineligibility .modal__actions-container .button span {
            margin: 0;
            padding: 0;
            font-size: 13px;
        }

        .modal--ineligibility .button--primary {
        }

        .modal--ineligibility .button--secondary {
        }

/* VEHICLE LOCATION */

    .section--vehicle-location {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .section--vehicle-location .container {
       display: flex;
       flex-direction: column;
       justify-content: center;
       margin: 0;
    }


    /* Header  */
    .section--vehicle-location .google-map-input-vehicleLocation {
        text-align: center;
        position: absolute;
        z-index: 500;
        background-color: #515254;
        color: white;
        left: 0;
        height: auto;
     }

     .section--vehicle-location .google-map-input-vehicleLocation span {
        padding: 10px;
        font-size: 13px;
        font-weight: normal;
        line-height: 0;
        letter-spacing: 0em;
     }

     .section--prefered-destination .google-map-input-preferredDestination {
        text-align: center;
        position: absolute;
        z-index: 500;
        background-color: #515254;
        color: white;
        left: 0;
        height: auto;
     }

     .section--prefered-destination .google-map-input-preferredDestination span {
        padding: 10px;
        font-size: 13px;
        font-weight: normal;
        line-height: 0;
        letter-spacing: 0em;
     }

    /* Map */
        .section--vehicle-location .google-map {
            position: absolute;
            bottom: 0;
        }

    /* Address searchbox */
        .section--vehicle-location .autocomplete {
            position: absolute;
            z-index: 1;
            top: 130px;
            padding: 15px;
        }

        .section--vehicle-location .autocomplete input {
            padding: 15px;
        }

    /* Position marker */
        .section--vehicle-location .google-map-marker {
            background: url(./img/marker.png) center center no-repeat;
            background-color: transparent;
            height: 63px;
            width: 50px;
        }

        .section--vehicle-location .google-map-marker span {
            display: none;
        }

    /* Continue button */
        .section--vehicle-location .button--confirm {
            width: 200px;
        }    

    /* Highway questions & park questions */
        .card--highway .button {
            margin-bottom: 20px;
        }

            .card--highway-direction .button {
                margin: 0 auto;
                margin-top: 20px;
            }

        .card--car-park .button {
            margin-bottom: 20px;       
        }

/* INCIDENTS */

     /* Header */
        .section--incidents .section__header {
            background-color: #515254;
            color: white;
            margin-bottom: 10px;
        }

        .section--incidents .section__header .header__container {
            text-align: center;    
        }

        .section--incidents .section__header .header__container h2 {
            font-size: 13px !important;   
            padding: 15px;
        }

        .section--incidents .section__header .header__container h2 span {
            font-size: 13px;
            font-weight: normal;
            line-height: 0;
            letter-spacing: 0em;   
        }


    /* Events */
        .section--incidents .grid-list-tile {
            text-align: left;
        }

        .section--incidents .grid-list {
            display: block;
        }

        .section--incidents .grid-list .incident {
            width: 100% !important;
            height: auto !important;
            padding: 0 !important;
        }

        .section--incidents .button {
            width: 100%;
            background-color: white;
        }                                 

        .section--incidents .button:focus {
            background-color: #F36F20;
        }

        .section--incidents .incident__button {
            display: block;
            box-shadow: none;
            margin-top: 0;
            margin-bottom: 0;
            border: none;
            border-top: 1px solid #d8d8d8;
            border-radius: 0px !important;
            position: relative;
            padding-left: 45px;
            padding-top: 5px;
            padding-bottom: 5px;
            transition: all 0.3s ease;
        }

        .section--incidents button.button span {
            color: black !important;
        }

        .section--incidents button.button:hover span {
            color: black !important;
        }

        .section--incidents li:first-child .incident__button {
            border-top: 0px;
        }

        .incident__title {
            background-color: transparent;
            text-align: left;
            position: static;
        }

        .incident__title span {
            font-size: 13px !important;
            color: black !important;
        }

        .incident__image {
            position: absolute;
            left: 10px;
            top: 50%;
            margin-top: -19px;
            width: 38px;
            height: 38px;
        }

        /* Event images */

            .incident--ACC .incident__image {
                /*background-image: url('./img/icon_event-ACC.png');       
                background-size: 38px;*/
            }

            .incident--OBR .incident__image {
                /*background-image: url('./img/icon_event-OBR.png');       
                background-size: 38px;*/
            }

            .incident--BAT .incident__image {
                /*background-image: url('./img/icon_event-BAT.png');       
                background-size: 38px;*/
            }

            .incident--FTS .incident__image {
                /*background-image: url('./img/icon_event-FTS.png');       
                background-size: 38px;*/
            }

            .incident--ETA .incident__image {
                /*background-image: url('./img/icon_event-ETA.png');       
                background-size: 38px;*/
            }

            .incident--OIN .incident__image {
                /*background-image: url('./img/icon_event-OIN.png');       
                background-size: 38px;*/
            }


    /* Event details */

        /* Event detail -  Title  */
            .section--events .card__title {
                line-height: 1em;
            }

            .section--events .card__title span {
                font-size: 13px;
            }

        /* Event detail - COntent */
            .section--events .card__content {
                padding-top: 0px;
                margin-bottom: 48px;
            }

        /* Event detail - Buttons */
            .section--events .card__content .button {
                border: 0px;
            }

            .section--events .custom-radio {
                border: 0px;
                background-color: white;
                color: black;
                line-height: 1em;
                text-transform: none;
                border-radius: 5px !important;
                -webkit-box-shadow: 3px 3px 5px 1px rgba(0,0,0,0.75);
                -moz-box-shadow: 3px 3px 5px 1px rgba(0,0,0,0.75);
                box-shadow: 3px 3px 5px 1px rgba(0,0,0,0.75);    
            }

        /* Event details - Images */
            .section--events .card__icon {
                width: 48px;
                height: 48px;
                background-color: white;
                text-indent: -9999px;
                background-size: 48px;
                background-position: center center;  
            }
        
            .card--NUMBER_OF_PASSENGER_1_TO_4_PLUS .card__icon {
                background-image: url('./img/icon_passenger.png');
            }

            .card--OUT_OF_ROAD .card__icon {
                background-image: url('./img/icon_out-of-road.png');
            }

            .card--VEHICLE_MOVING .card__icon {
                background-image: url('./img/icon_vehicle-moving.png');       
            }

            .card--ADDITIONAL_SERVICE .card__icon {
                background-image: url('./img/icon_additional-services.png');   
            }

            .card--SPARE_TIRE .card__icon {
                background-image: url('./img/icon_spare-wheel.png');
            }

            .card--NUMBER_OF_AXLES .card__icon {
                background-image: url('./img/icon_rental-car.png');
            }


        /* Event detail - Number of passengers */
            .card--NUMBER_OF_PASSENGER_1_TO_4_PLUS .card__children {
                flex-direction: row !important;
            }

            .card--NUMBER_OF_PASSENGER_1_TO_4_PLUS .card__children .custom-radio {
                margin: 7px !important;
                flex-basis: 100% !important;
            }

            .card--NUMBER_OF_PASSENGER_1_TO_4_PLUS .card__children .custom-radio .custom-radio__button {
                min-width: auto;                   
            }

        /* Event detail - Out of road */
            .card--OUT_OF_ROAD .card__children {
                flex-direction: column-reverse;
            }

        /* Event detail - Number of axles (car rental) */
            .card--NUMBER_OF_AXLES .card__children .custom-radio:not(:nth-child(1)):not(:nth-child(2)) {
                display: none;
            }

            .card--NUMBER_OF_AXLES .card__children {
                flex-direction: column-reverse;
            }

        /* Event detail - Additional services */
            .card--ADDITIONAL_SERVICE .card__children {
                flex-direction: column-reverse;
            }

        /* Event detail - Continue button */
            .section--events .container--actions .container__inner {
                margin-bottom: 20px;
            }

            .section--events .container--actions {
                width: auto;
            }

            .section--events .button {
                margin: 0 auto;
            }

/* DESTINATION */

    /* Snackbar */
    .snackbar {
        position: absolute;
        top: 56px;
        z-index: 1000;
    }

    .snackbar .snackbar__content {
        background-color: #515254;
        padding: 15px; 
    }

    .snackbar .snackbar__content > div {
        padding: 0px;
    }

    .snackbar > div > div {
        width: 100%;
        text-align: center;
    }

    /* Map */
        .section--garage-destination .google-map {
            position: absolute;
            bottom: 0;
        }

        /* Address searchbox */
            .section--garage-destination .autocomplete {
                position: absolute;
                top: 128px;
                padding: 15px;
            }

            .section--garage-destination .autocomplete input {
                padding: 15px;
            }

        /* Position marker */
            .section--garage-destination .google-map-marker {
                background: url(./img/marker.png) center center no-repeat;
                background-color: transparent;
                height: 63px;
                width: 50px;
            }

            .section--garage-destination .google-map-marker span {
                display: none;
            }

        /* Garage card */
            .section--garage-destination .card-header {
                display: none;
            }    

        /* Buttons on garage card */
            .section--garage-destination .button-wrapper-clear {
                
            }

            .section--garage-destination .button-wrapper-clear .button  {
                display: flex;        
            }

            .section--garage-destination .button-wrapper-clear .button span {
                padding: 0 !important;
                margin: 0 !important;  
                font-size: 13px;      
            }

            .section--garage-destination .button-wrapper-clear .button--clear {
                margin-right: 10px; 
                padding: 20px;   
                display: none;
            }

            .section--garage-destination .button-wrapper-clear .button--confirm {
                margin-left: 10px; 
                padding: 20px;   
            }

        /* Custom destination button */
            .section--garage-destination .button--other {
                display: flex;
                padding: 20px;
                display: none;
            }

            .section--garage-destination .button--other span {
                padding: 0 !important;
                margin: 0 !important; 
                font-size: 13px;
            }


        

    /* Map */
        .section--prefered-destination .google-map {
            position: absolute;
            bottom: 0;
        }

        /* Address searchbox */
            .section--prefered-destination .autocomplete {
                position: absolute;
                top: 128px;
                padding: 15px;
            }

            .section--prefered-destination .autocomplete input {
                padding: 15px;
            }

        /* Position marker */
            .section--prefered-destination .google-map-marker {
                background: url(./img/marker.png) center center no-repeat;
                background-color: transparent;
                height: 63px;
                width: 50px;
            }

            .section--prefered-destination .google-map-marker span {
                display: none;
            }   

        /* Preffered destination - COntinue button */
        .section--prefered-destination .button--confirm {
            width: 200px;
        }          

/* Question - Highway? */          
     .card--highway .card__icon {
        width: 48px;
        height: 48px;
        background-color: white;
        text-indent: -9999px;
        background-image: url('./img/icon_highway.png');
        background-size: 48px;
        background-position: center center;
    }

    .card--highway-direction .card__icon {
        width: 48px;
        height: 48px;
        background-color: white;
        text-indent: -9999px;
        background-image: url('./img/icon_direction.png');
        background-size: 48px;
        background-position: center center;
    }

/* Question - Parking? */          
     .card--car-park .card__icon {
        width: 48px;
        height: 48px;
        background-color: white;
        text-indent: -9999px;
        background-image: url('./img/icon_parking.png');
        background-size: 48px;
        background-position: center center;
    }
       

/* SUMMARY */

     /* Header */
        .section--confirmation .section__header {
            background-color: #515254;
            color: white;
            margin-bottom: 10px;
        }

        .section--confirmation .section__header .header__container {
            text-align: center;    
        }

        .section--confirmation .section__header .header__container h2 {
            font-size: 13px !important;   
            padding: 15px;
        }

        .section--confirmation .section__header .header__container h2 span {
            font-size: 13px;
            font-weight: normal;
            line-height: 0;
            letter-spacing: 0em;   
        }

    /* Section */

        /* Section - Title */
            .confirmation-list__header {
                background-color: #f0f1f5;
                color: black;
                border-radius: 7px;
                position: relative;
            }

            .confirmation-list__header {
                font-weight: normal;
            }

        /* Section - Item title*/
            .confirmation-list-item > div:first-child > span > span {
                font-weight: bold;
            }

        /* Section - Towing destination */
            .confirmation-list--section-4 .confirmation-list-item--vehicule-destination > div:first-child {
                display: none;
            }

        /* Section - Preffered towing destination */
            .confirmation-list--section-4 .confirmation-list-item--vehicule-preferred-destination > div:first-child {
                display: none;
            }

        /* Buttons */
            .section--confirmation .container--actions .button {
                margin: 0 auto;
            }

            .section--confirmation .container--actions .button--confirm {
                
            }

            .section--confirmation .container--actions .button--confirm span {
                color: white;
            }

            .section--confirmation .container--actions .button--cancel {
                box-shadow: none;
                border: 0px;
                padding: 5px;
                margin-top: 30px;
                margin-bottom: 30px;
                background-color: white !important;
            }

            .section--confirmation .container--actions .button--cancel span {
                font-size: 13px;
                padding: 5px;
                color: black !important;
            }

    /* Cancellation */

        .modal--cancellation .modal__actions-container {
            display: flex;
            flex-direction: column;
        }

        .modal--cancellation .modal__actions-container .button {
            width: 100%;
            margin: 0px 10px 10px 10px;
            padding: 20px
        }

        .modal--cancellation .modal__actions-container .button span {
            margin: 0;
            padding: 0;
            font-size: 13px;
        }

        .modal--cancellation .button--primary {
        }

        .modal--cancellation .button--secondary {
        }


/* SEND REQUEST */
    .section--end-confirmation .container--images {
        display: none;
    }

    .section--end-confirmation .container--content {
        padding: 20px;
        text-align: center;
    }

/* CALL ME BACK */
    .section--call-me-back .container--images {
        display: none;
    }

    .section--call-me-back .container--content {
        padding: 20px;
        text-align: center;
    }

/* CANCEL REQUEST */
    .section--cancellation .container--images {
        display: none;
    }

    .section--cancellation .container--content {
        padding: 20px;
        text-align: center;
    }