@charset "UTF-8";
@media screen and (min-aspect-ratio: 13/9) {

    .done-image-img {
        width: auto;
        height: 100%;
        pointer-events: none;
    }

    .text-data-input-container {
        padding-left: 1em;
        display: inline-block;
        margin-left: 15px;
    }

    .input-field {
        display: block;
        border: 1px solid #333333;
        padding: 15px 15px;
        margin-right: 20px;
        font-size: 16px;
        box-sizing: border-box;
        width: 90%;
        flex-grow: 0;
        line-height: 20px;
        -webkit-appearance: none;
    }

    .buttons-container {
        position: absolute;
        bottom: 0;
        right: 0;
        z-index: 4;
        width: 15%;
        /*height: 15vh;*/
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        display: flex;
        align-items: center;
        justify-content: space-around;
        align-content: center;
        flex-direction: column;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        padding-left: 15px;
        padding-right: 15px;
    }

    .car-foreshortening {
        position: absolute;
        top: 0;
        left: 0;
        transform: translate(10%, 25%);
        z-index: 3;
        width: 75%;
        height: 70vh;
        background-color: rgba(255, 255, 255, 0.01);
        display: flex;
        align-items: center;
        justify-content: space-around;
        opacity: 0.5;
        user-select: none;
    }

    .stage-container {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 4;
        width: 45%;
        height: 4.5em;
        background-color: rgba(0, 0, 0, 0.6);
        display: grid;
        align-items: center;
        justify-items: center;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        border-radius: 0 0 15px 0;
        grid-template-columns: 1fr 2fr 1fr;
        grid-template-rows: 1fr;
        gap: 0px 0px;
        grid-template-areas:
                "left-button-top status-bar-area right-button-top";
    }

    .button-container.secondary .button {
        transition: .3s transform ease;
    }

    .button-container.secondary .button.hidden {
        transform: translateX(20px);
    }

    .button-container.secondary {
        width: 3.3em;
        height: 3.3em;
    }

    .button-container {
        width: 4.5em;
        height: 4.5em;
        display: flex;
        justify-content: center;
        z-index: 3;
        transition: .2s transform ease;
        user-select: none;
    }

    .input-data-container {
        display: grid;
        z-index: 4;
        background-color: rgb(255, 255, 255);
        -webkit-overflow-scrolling: auto;
        overflow: scroll;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        position: fixed;
    }


    .input-data {
        display: grid;
        grid-template-columns: 50% 50%;
        /*grid-template-rows: 80px 80px 35px 35px 35px 35px 50px;*/
        gap: 20px 0px;
        grid-template-areas:
            "first-form-item first-form-item"
            "second-form-item third-form-item"
            "fourth-form-item fifth-form-item"
            "sixth-form-item seventh-form-item"
            "eighth-form-item ninth-form-item"
            "tenth-form-item eleventh-item";
        z-index: 4;
        background-color: rgb(255, 255, 255);
        -webkit-overflow-scrolling: auto;
        overflow: scroll;
        top: 4.6em;
        bottom: 0;
        left: 0;
        right: 0;
        position: fixed;
    }

    .how-much-cars-are-ready-container {
        grid-area: first-form-item
    }

    .text-data-input-container second-item {
        grid-area: second-form-item
    }

    .text-data-input-container third-item {
        grid-area: third-form-item
    }

    .text-data-input-container fourth-item {
        grid-area: fourth-form-item
    }

    .text-data-input-container fifth-item {
        grid-area: fifth-form-item
    }

    .text-data-input-container sixth-item {
        grid-area: sixth-form-item
    }

    .text-data-input-container seventh-item {
        grid-area: seventh-form-item
    }

    .text-data-input-container eighth-item {
        grid-area: eighth-form-item
    }

    .text-data-input-container ninth-item {
        grid-area: ninth-form-item
    }

    .text-data-input-container tenth-item {
        grid-area: tenth-form-item
    }

    .text-data-input-container eleventh-item {
        grid-area: eleventh-form-item
    }

    .text-data-input-container.fifth-item {
        display: flex;
        align-items: flex-end;
    }


    #numberOfFinishedSides {

        /*float: left;*/
    }

    .done-image {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%);
        width: auto;
        height: 100%;
        padding-left: 0;
        padding-right: 0;
        margin-left: auto;
        margin-right: auto;
        display: block;
        z-index: 3;
    }


    .how-much-cars-are-ready-container {
        padding: 1em;
        border-bottom: black solid 0.5px;
        text-align: center;
        justify-content: space-around;
        align-items: center;
        vertical-align: middle;
        background-color: #ececec;;
        display: flex;
        height: 2.5em;
        position: fixed;
        flex-direction: row;
        top: 0;
        left: 0;
        right: 0;
        padding-left: 50%;
    }

    .text-data-input-container.fifth-item {
        display: inline-block;
    }
}

@media screen and (max-aspect-ratio: 13/9) {

    .done-image-img {
        left: 0;
        width: 100%;
        height: auto;
        pointer-events: none;
    }

    .text-data-input-container {
        padding-left: 1em;
    }

    .text-data-input-container.second-item {
        padding-left: 1em;
        padding-top: 0.5em;
    }

    .input-field {
        display: block;
        border: 1px solid #333333;
        padding: 15px 15px;
        margin-right: 20px;
        font-size: 16px;
        box-sizing: border-box;
        width: 90%;
        flex-grow: 0;
        line-height: 20px;
        -webkit-appearance: none;
    }

    .buttons-container {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 4;
        width: 100%;
        /*height: 15vh;*/
        background-color: rgba(0, 0, 0, 0.6);
        display: flex;
        align-items: center;
        justify-content: space-around;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        padding-bottom: 15px;
        padding-top: 15px;
    }

    .car-foreshortening {
        position: absolute;
        top: 50%;
        left: 50%;
        right: 0;
        z-index: 3;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 14em;
        background-color: rgba(255, 255, 255, 0.01);
        display: flex;
        align-items: center;
        justify-content: space-around;
        /*backdrop-filter: blur(5px);*/
        /*-webkit-backdrop-filter: blur(5px);*/
        opacity: 0.5;
    }

    .stage-container {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 4;
        width: 100%;
        height: 4em;
        background-color: rgba(0, 0, 0, 0.6);
        display: grid;
        align-items: center;
        justify-items: center;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        grid-template-columns: 1fr 2fr 1fr;
        grid-template-rows: 1fr;
        gap: 0px 0px;
        grid-template-areas:
                "left-button-top status-bar-area right-button-top";
    }


    .button-container.secondary .button {
        transition: .3s transform ease;
    }

    .button-container.secondary .button.hidden {
        transform: translateY(20px);
    }

    /*.button-container.top.left {*/
    /*    position: fixed;*/
    /*    left: 7vw;*/
    /*}*/
    /*.button-container.top.right {*/
    /*    position: fixed;*/
    /*    right: 7vw;*/
    /*}*/
    .button-container.secondary {
        /*width: 7vh;*/
        /*height: 7vh;*/
        /*padding-top: 2vh;*/
        width: 3.3em;
        height: 3.3em;
        padding-top: 1em;
    }


    .button-container {
        /*width: 10vh;*/
        /*height: 10vh; */
        width: 4.5em;
        height: 4.5em;
        display: flex;
        justify-content: center;
        z-index: 3;
        transition: .2s transform ease;
        user-select: none;
    }

    /*.input-data-container {*/
    /*    overflow-y: auto;*/
    /*    overflow-x: hidden;*/
    /*    position: fixed;*/
    /*    top: 4em;*/
    /*    bottom: 0;*/
    /*    left: 0;*/
    /*    right: 0;*/
    /*    z-index: 4;*/
    /*    background-color: rgb(255, 255, 255);*/
    /*    !*display: inline-block;*!*/
    /*    !*justify-content: center;*!*/
    /*    !*align-items: center ;*!*/
    /*    -webkit-overflow-scrolling: auto;*/
    /*    display: table-cell;*/
    /*    vertical-align: middle;*/
    /*    overflow : scroll;*/
    /*}*/
    .input-data-container {
        display: grid;
        top: 4em;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 4;
        position: fixed;
    }


    .input-data {
        display: grid;
        grid-template-columns: 1fr;
        /*grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;*/
        grid-template-rows: 100px 100px 100px 100px 50px 50px 50px 50px 50px 50px 50px;
        gap: 0px 0px;
        grid-template-areas:
            "first-form-item"
            "second-form-item"
            "third-form-item"
            "fourth-form-item"
            "fifth-form-item"
            "sixth-form-item"
            "seventh-form-item"
            "eighth-form-item"
            "ninth-form-item"
            "tenth-form-item"
            "eleventh-form-item";
        z-index: 4;
        background-color: rgb(255, 255, 255);
        -webkit-overflow-scrolling: auto;
        overflow: scroll;
        top: 8.5em;
        bottom: 0;
        left: 0;
        right: 0;
        position: fixed;
    }

    .how-much-cars-are-ready-container {
        grid-area: first-form-item
    }

    .text-data-input-container second-item {
        grid-area: second-form-item
    }

    .text-data-input-container third-item {
        grid-area: third-form-item
    }

    .text-data-input-container fourth-item {
        grid-area: fourth-form-item
    }

    .text-data-input-container fifth-item {
        grid-area: fifth-form-item
    }

    .text-data-input-container sixth-item {
        grid-area: sixth-form-item
    }

    .text-data-input-container seventh-item {
        grid-area: seventh-form-item
    }

    .text-data-input-container eighth-item {
        grid-area: eighth-form-item
    }

    .text-data-input-container ninth-item {
        grid-area: ninth-form-item
    }

    .text-data-input-container tenth-item {
        grid-area: tenth-form-item
    }

    .text-data-input-container eleventh-item {
        grid-area: eleventh-form-item
    }

    #numberOfFinishedSides {
        /*position: absolute;*/
        /*width: 60%;*/
        word-wrap: normal;
        float: left;
    }

    .done-image {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 0;
        width: 100%;
        height: auto;
        padding-left: 0;
        padding-right: 0;
        /*margin-left: auto;*/
        /*margin-right: auto;*/
        z-index: 3;
        /*bottom: 0;*/
        /*right: 0;*/

    }


    .how-much-cars-are-ready-container {
        padding: 1em;
        border-bottom: black solid 0.5px;
        text-align: center;
        justify-content: space-around;
        align-items: center;
        vertical-align: middle;
        background-color: #ececec;;
        display: flex;
        height: 2.5em;
        position: fixed;
        top: 4em;
        left: 0;
        right: 0;
    }

}


@media screen and (orientation: portrait) {

    /*.text-data-input-container {*/
    /*    padding-left: 1em;*/
    /*}*/

    /*.text-data-input-container.second-item {*/
    /*    padding-left: 1em;*/
    /*    padding-top: 0.5em;*/
    /*}*/

    /*.input-field {*/
    /*    display: block;*/
    /*    border: 1px solid #333333;*/
    /*    padding: 15px 15px;*/
    /*    margin-right: 20px;*/
    /*    font-size: 16px;*/
    /*    box-sizing: border-box;*/
    /*    width: 90%;*/
    /*    flex-grow: 0;*/
    /*    line-height: 20px;*/
    /*    -webkit-appearance: none;*/
    /*}*/

    /*.buttons-container {*/
    /*    position: absolute;*/
    /*    bottom: 0;*/
    /*    left: 0;*/
    /*    right: 0;*/
    /*    z-index: 4;*/
    /*    width: 100%;*/
    /*    !*height: 15vh;*!*/
    /*    background-color: rgba(0, 0, 0, 0.6);*/
    /*    display: flex;*/
    /*    align-items: center;*/
    /*    justify-content: space-around;*/
    /*    backdrop-filter: blur(5px);*/
    /*    -webkit-backdrop-filter: blur(5px);*/
    /*    padding-bottom: 15px;*/
    /*    padding-top: 15px;*/
    /*}*/

    /*.car-foreshortening {*/
    /*    position: absolute;*/
    /*    top: 50%;*/
    /*    left: 50%;*/
    /*    right: 0;*/
    /*    z-index: 3;*/
    /*    transform: translate(-50%, -50%);*/
    /*    width: 100%;*/
    /*    height: 14em;*/
    /*    background-color: rgba(255, 255, 255, 0.01);*/
    /*    display: flex;*/
    /*    align-items: center;*/
    /*    justify-content: space-around;*/
    /*    !*backdrop-filter: blur(5px);*!*/
    /*    !*-webkit-backdrop-filter: blur(5px);*!*/
    /*    opacity: 0.5;*/
    /*}*/

    /*.stage-container {*/
    /*    position: absolute;*/
    /*    top: 0;*/
    /*    left: 0;*/
    /*    right: 0;*/
    /*    z-index: 4;*/
    /*    width: 100%;*/
    /*    height: 4em;*/
    /*    background-color: rgba(0, 0, 0, 0.6);*/
    /*    display: grid;*/
    /*    align-items: center;*/
    /*    justify-items: center;*/
    /*    backdrop-filter: blur(5px);*/
    /*    -webkit-backdrop-filter: blur(5px);*/
    /*    grid-template-columns: 1fr 2fr 1fr;*/
    /*    grid-template-rows: 1fr;*/
    /*    gap: 0px 0px;*/
    /*    grid-template-areas:*/
    /*            "left-button-top status-bar-area right-button-top";*/
    /*}*/


    /*.button-container.secondary .button {*/
    /*    transition: .3s transform ease;*/
    /*}*/

    /*.button-container.secondary .button.hidden {*/
    /*    transform: translateY(20px);*/
    /*}*/

    /*!*.button-container.top.left {*!*/
    /*!*    position: fixed;*!*/
    /*!*    left: 7vw;*!*/
    /*!*}*!*/
    /*!*.button-container.top.right {*!*/
    /*!*    position: fixed;*!*/
    /*!*    right: 7vw;*!*/
    /*!*}*!*/
    /*.button-container.secondary {*/
    /*    !*width: 7vh;*!*/
    /*    !*height: 7vh;*!*/
    /*    !*padding-top: 2vh;*!*/
    /*    width: 3.3em;*/
    /*    height: 3.3em;*/
    /*    padding-top: 1em;*/
    /*}*/


    /*.button-container {*/
    /*    !*width: 10vh;*!*/
    /*    !*height: 10vh; *!*/
    /*    width: 4.5em;*/
    /*    height: 4.5em;*/
    /*    display: flex;*/
    /*    justify-content: center;*/
    /*    z-index: 3;*/
    /*    transition: .2s transform ease;*/
    /*    user-select: none;*/
    /*}*/

    /*!*.input-data-container {*!*/
    /*!*    overflow-y: auto;*!*/
    /*!*    overflow-x: hidden;*!*/
    /*!*    position: fixed;*!*/
    /*!*    top: 4em;*!*/
    /*!*    bottom: 0;*!*/
    /*!*    left: 0;*!*/
    /*!*    right: 0;*!*/
    /*!*    z-index: 4;*!*/
    /*!*    background-color: rgb(255, 255, 255);*!*/
    /*!*    !*display: inline-block;*!*!*/
    /*!*    !*justify-content: center;*!*!*/
    /*!*    !*align-items: center ;*!*!*/
    /*!*    -webkit-overflow-scrolling: auto;*!*/
    /*!*    display: table-cell;*!*/
    /*!*    vertical-align: middle;*!*/
    /*!*    overflow : scroll;*!*/
    /*!*}*!*/
    /*.input-data-container {*/
    /*    display: grid;*/
    /*    top: 4em;*/
    /*    bottom: 0;*/
    /*    left: 0;*/
    /*    right: 0;*/
    /*    z-index: 4;*/
    /*    position: fixed;*/
    /*}*/


    /*.input-data {*/
    /*    display: grid;*/
    /*    grid-template-columns: 1fr;*/
    /*    !*grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;*!*/
    /*    grid-template-rows: 100px 100px 100px 100px 50px 50px 50px 50px 50px 50px 50px;*/
    /*    gap: 0px 0px;*/
    /*    grid-template-areas:*/
    /*        "first-form-item"*/
    /*        "second-form-item"*/
    /*        "third-form-item"*/
    /*        "fourth-form-item"*/
    /*        "fifth-form-item"*/
    /*        "sixth-form-item"*/
    /*        "seventh-form-item"*/
    /*        "eighth-form-item"*/
    /*        "ninth-form-item"*/
    /*        "tenth-form-item"*/
    /*        "eleventh-form-item";*/
    /*    z-index: 4;*/
    /*    background-color: rgb(255, 255, 255);*/
    /*    -webkit-overflow-scrolling: auto;*/
    /*    overflow: scroll;*/
    /*    top: 8.5em;*/
    /*    bottom: 0;*/
    /*    left: 0;*/
    /*    right: 0;*/
    /*    position: fixed;*/
    /*}*/

    /*.how-much-cars-are-ready-container {*/
    /*    grid-area: first-form-item*/
    /*}*/

    /*.text-data-input-container second-item {*/
    /*    grid-area: second-form-item*/
    /*}*/

    /*.text-data-input-container third-item {*/
    /*    grid-area: third-form-item*/
    /*}*/

    /*.text-data-input-container fourth-item {*/
    /*    grid-area: fourth-form-item*/
    /*}*/

    /*.text-data-input-container fifth-item {*/
    /*    grid-area: fifth-form-item*/
    /*}*/

    /*.text-data-input-container sixth-item {*/
    /*    grid-area: sixth-form-item*/
    /*}*/

    /*.text-data-input-container seventh-item {*/
    /*    grid-area: seventh-form-item*/
    /*}*/

    /*.text-data-input-container eighth-item {*/
    /*    grid-area: eighth-form-item*/
    /*}*/

    /*.text-data-input-container ninth-item {*/
    /*    grid-area: ninth-form-item*/
    /*}*/

    /*.text-data-input-container tenth-item {*/
    /*    grid-area: tenth-form-item*/
    /*}*/

    /*.text-data-input-container eleventh-item {*/
    /*    grid-area: eleventh-form-item*/
    /*}*/

    /*#numberOfFinishedSides {*/
    /*    !*position: absolute;*!*/
    /*    !*width: 60%;*!*/
    /*    word-wrap: normal;*/
    /*    float: left;*/
    /*}*/

    /*.done-image {*/
    /*    position: absolute;*/
    /*    top: 0;*/
    /*    left: 0;*/
    /*    width: 100%;*/
    /*    padding-left: 0;*/
    /*    padding-right: 0;*/
    /*    margin-left: auto;*/
    /*    margin-right: auto;*/
    /*    z-index: 3;*/
    /*    bottom: 0;*/
    /*    right: 0;*/

    /*}*/


    /*.how-much-cars-are-ready-container {*/
    /*    padding: 1em;*/
    /*    border-bottom: black solid 0.5px;*/
    /*    text-align: center;*/
    /*    justify-content: space-around;*/
    /*    align-items: center;*/
    /*    vertical-align: middle;*/
    /*    background-color: #ececec;;*/
    /*    display: flex;*/
    /*    height: 2.5em;*/
    /*    position: fixed;*/
    /*    top: 4em;*/
    /*    left: 0;*/
    /*    right: 0;*/
    /*}*/


}

@media screen and (orientation: landscape) {


    /*.text-data-input-container {*/
    /*    padding-left: 1em;*/
    /*    display: inline-block;*/
    /*    margin-left: 15px;*/
    /*}*/

    /*.input-field {*/
    /*    display: block;*/
    /*    border: 1px solid #333333;*/
    /*    padding: 15px 15px;*/
    /*    margin-right: 20px;*/
    /*    font-size: 16px;*/
    /*    box-sizing: border-box;*/
    /*    width: 90%;*/
    /*    flex-grow: 0;*/
    /*    line-height: 20px;*/
    /*    -webkit-appearance: none;*/
    /*}*/

    /*.buttons-container {*/
    /*    position: absolute;*/
    /*    bottom: 0;*/
    /*    right: 0;*/
    /*    z-index: 4;*/
    /*    width: 15%;*/
    /*    !*height: 15vh;*!*/
    /*    height: 100%;*/
    /*    background-color: rgba(0, 0, 0, 0.6);*/
    /*    display: flex;*/
    /*    align-items: center;*/
    /*    justify-content: space-around;*/
    /*    align-content: center;*/
    /*    flex-direction: column;*/
    /*    backdrop-filter: blur(5px);*/
    /*    -webkit-backdrop-filter: blur(5px);*/
    /*    padding-left: 15px;*/
    /*    padding-right: 15px;*/
    /*}*/

    /*.car-foreshortening {*/
    /*    position: absolute;*/
    /*    top: 0;*/
    /*    left: 0;*/
    /*    transform: translate(10%, 25%);*/
    /*    z-index: 3;*/
    /*    width: 75%;*/
    /*    height: 70vh;*/
    /*    background-color: rgba(255, 255, 255, 0.01);*/
    /*    display: flex;*/
    /*    align-items: center;*/
    /*    justify-content: space-around;*/
    /*    opacity: 0.5;*/
    /*    user-select: none;*/
    /*}*/

    /*.stage-container {*/
    /*    position: absolute;*/
    /*    top: 0;*/
    /*    left: 0;*/
    /*    z-index: 4;*/
    /*    width: 45%;*/
    /*    height: 4em;*/
    /*    background-color: rgba(0, 0, 0, 0.6);*/
    /*    display: grid;*/
    /*    align-items: center;*/
    /*    justify-items: center;*/
    /*    backdrop-filter: blur(5px);*/
    /*    -webkit-backdrop-filter: blur(5px);*/
    /*    border-radius: 0 0 15px 0;*/
    /*    grid-template-columns: 1fr 2fr 1fr;*/
    /*    grid-template-rows: 1fr;*/
    /*    gap: 0px 0px;*/
    /*    grid-template-areas:*/
    /*            "left-button-top status-bar-area right-button-top";*/
    /*}*/

    /*.button-container.secondary .button {*/
    /*    transition: .3s transform ease;*/
    /*}*/

    /*.button-container.secondary .button.hidden {*/
    /*    transform: translateX(20px);*/
    /*}*/

    /*.button-container.secondary {*/
    /*    width: 3.3em;*/
    /*    height: 3.3em;*/
    /*}*/

    /*.button-container {*/
    /*    width: 4.5em;*/
    /*    height: 4.5em;*/
    /*    display: flex;*/
    /*    justify-content: center;*/
    /*    z-index: 3;*/
    /*    transition: .2s transform ease;*/
    /*    user-select: none;*/
    /*}*/

    /*.input-data-container {*/
    /*    display: grid;*/
    /*    z-index: 4;*/
    /*    background-color: rgb(255, 255, 255);*/
    /*    -webkit-overflow-scrolling: auto;*/
    /*    overflow: scroll;*/
    /*    top: 0;*/
    /*    bottom: 0;*/
    /*    left: 0;*/
    /*    right: 0;*/
    /*    position: fixed;*/
    /*}*/


    /*.input-data {*/
    /*    display: grid;*/
    /*    grid-template-columns: 50% 50%;*/
    /*    !*grid-template-rows: 80px 80px 35px 35px 35px 35px 50px;*!*/
    /*    gap: 20px 0px;*/
    /*    grid-template-areas:*/
    /*        "first-form-item first-form-item"*/
    /*        "second-form-item third-form-item"*/
    /*        "fourth-form-item fifth-form-item"*/
    /*        "sixth-form-item seventh-form-item"*/
    /*        "eighth-form-item ninth-form-item"*/
    /*        "tenth-form-item eleventh-item";*/
    /*    z-index: 4;*/
    /*    background-color: rgb(255, 255, 255);*/
    /*    -webkit-overflow-scrolling: auto;*/
    /*    overflow: scroll;*/
    /*    top: 4.6em;*/
    /*    bottom: 0;*/
    /*    left: 0;*/
    /*    right: 0;*/
    /*    position: fixed;*/
    /*}*/

    /*.how-much-cars-are-ready-container {*/
    /*    grid-area: first-form-item*/
    /*}*/

    /*.text-data-input-container second-item {*/
    /*    grid-area: second-form-item*/
    /*}*/

    /*.text-data-input-container third-item {*/
    /*    grid-area: third-form-item*/
    /*}*/

    /*.text-data-input-container fourth-item {*/
    /*    grid-area: fourth-form-item*/
    /*}*/

    /*.text-data-input-container fifth-item {*/
    /*    grid-area: fifth-form-item*/
    /*}*/

    /*.text-data-input-container sixth-item {*/
    /*    grid-area: sixth-form-item*/
    /*}*/

    /*.text-data-input-container seventh-item {*/
    /*    grid-area: seventh-form-item*/
    /*}*/

    /*.text-data-input-container eighth-item {*/
    /*    grid-area: eighth-form-item*/
    /*}*/

    /*.text-data-input-container ninth-item {*/
    /*    grid-area: ninth-form-item*/
    /*}*/

    /*.text-data-input-container tenth-item {*/
    /*    grid-area: tenth-form-item*/
    /*}*/

    /*.text-data-input-container eleventh-item {*/
    /*    grid-area: eleventh-form-item*/
    /*}*/

    /*.text-data-input-container.fifth-item {*/
    /*    display: flex;*/
    /*    align-items: flex-end;*/
    /*}*/


    /*#numberOfFinishedSides {*/

    /*    !*float: left;*!*/
    /*}*/

    /*.done-image {*/
    /*    position: absolute;*/
    /*    top: 0;*/
    /*    left: 0;*/
    /*    width: 100%;*/
    /*    height: 100%;*/
    /*    padding-left: 0;*/
    /*    padding-right: 0;*/
    /*    margin-left: auto;*/
    /*    margin-right: auto;*/
    /*    display: block;*/
    /*    z-index: 3;*/
    /*}*/


    /*.how-much-cars-are-ready-container {*/
    /*    padding: 1em;*/
    /*    border-bottom: black solid 0.5px;*/
    /*    text-align: center;*/
    /*    justify-content: space-around;*/
    /*    align-items: center;*/
    /*    vertical-align: middle;*/
    /*    background-color: #ececec;;*/
    /*    display: flex;*/
    /*    height: 2.5em;*/
    /*    position: fixed;*/
    /*    flex-direction: row;*/
    /*    top: 0;*/
    /*    left: 0;*/
    /*    right: 0;*/
    /*    padding-left: 50%;*/
    /*}*/

    /*.text-data-input-container.fifth-item {*/
    /*    display: inline-block;*/
    /*}*/

}

.button-container top left {
    grid-area: left-button-top;
}

#status-bar {
    grid-area: status-bar-area;
}

.button-container top right {
    grid-area: right-button-top;
}


select::-ms-expand {
    display: block;
}

.input-label.required:after {
    content: "*";
    color: black;
}

input[type="date"] {
    display: block;
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    font-family: "RenaultLifeCyWebWeb-Light", sans-serif;
    vertical-align: center;
    height: 3em;
    line-height: 3em;
}

input {
    font-family: "RenaultLifeCyWebWeb-Light", sans-serif;
    line-height: 3em;
}


body, html {
    margin: 0;
    padding: 0;
    overflow: hidden;
    -webkit-text-size-adjust: none;
}

@font-face {
    font-family: RenaultLifeCyWebWeb-Light;
    src: url("../resources/fonts/RenaultLifeCyWebWeb-Light.woff") format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    font-family: "RenaultLifeCyWebWeb-Light", sans-serif;
}
.progress-bar-container{
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: fixed;
    pointer-events: none;
    width: 12em;
    height: 2em;
    border: #333 1px solid;
    z-index: 1000;
    pointer-events: none;
}

.progress-bar-container.hidden{
    opacity: 0;
}

.progress-bar {
    background-color: #3da35a;
    width: 0%;
    height: 100%;


}

.progress-bar-container.hidden{
    opacity: 0;
}

.progress-bar span {
    display: inline-block;
    width: 100%;
    height: 100%;
    -webkit-transition: width .4s ease-in-out;
    -moz-transition: width .4s ease-in-out;
    -ms-transition: width .4s ease-in-out;
    -o-transition: width .4s ease-in-out;
    transition: width .4s ease-in-out;
}

@-webkit-keyframes animate-shine {
    0% {opacity: 0; width: 0;}
    50% {opacity: .5;}
    100% {opacity: 0; width: 95%;}
}

@-moz-keyframes animate-shine {
    0% {opacity: 0; width: 0;}
    50% {opacity: .5;}
    100% {opacity: 0; width: 95%;}
}

.shine span {
    position: relative;
}

.shine span::after {
    content: '';
    opacity: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #fff;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;

    -webkit-animation: animate-shine 2s ease-out infinite;
    -moz-animation: animate-shine 2s ease-out infinite;
}


.select {
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position-x: 100%;
    background-position-y: 15px;
    margin-right: 2rem;
}

#manager-name {
    width: 90%;
}

button:focus {
    outline: 0
}


.checkbox {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

.checkbox + label {
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    user-select: none
}

.checkbox + label::before {
    content: '';
    display: inline-block;
    width: 1.3em;
    height: 1.3em;
    flex-shrink: 0;
    flex-grow: 0;
    border: 1px solid #adb5bd;

    margin-right: 0.5em;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50% 50%;
}

.checkbox:checked + label::before {
    border-color: #fc3;
    background-color: #333;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
}

/*.checkbox:not(:disabled):not(:checked)+label:hover::before {*/
/*    border-color: #b3d7ff;*/
/*}*/

/*.checkbox:not(:disabled):active+label::before {*/
/*    background-color: #b3d7ff;*/
/*    border-color: #b3d7ff;*/
/*}*/

/*.checkbox:focus+label::before {*/
/*    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);*/
/*}*/

/*.checkbox:focus:not(:checked)+label::before {*/
/*    border-color: #80bdff;*/
/*}*/

.checkbox:disabled + label::before {
    background-color: #e9ecef;
}

.video-container {
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

#video {
    display: block;
    min-width: 100%;
    min-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#video.hidden {
    opacity: 0;
}


.done-image-img.hidden {
    display: none;
}



.side-contour.hidden {
    display: none;
}

input:focus {
    background-color: rgb(230, 250, 255);
    border: 1.5px solid #555;
}


.input-label {
    display: block; /* add this */
    padding-bottom: 5px;
    font-weight: bold;
}

.submit-button {
    /*position: absolute;*/
    float: left;
    padding: 10px 10px;
    right: 2em;
    transition: .2s transform ease;
    user-select: none;
    color: #333;
    background-color: #fc3;
    border: none;
    cursor: pointer;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
    flex-wrap: nowrap;
    font-size: 1em;
    display: inline-block;
    font-family: "RenaultLifeCyWebWeb-Light", sans-serif;

    width: auto;
    height: auto;
    padding: 15px 20px;
    background-color: #fc3;
    border: none;
    cursor: pointer;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
    color: #333;
    flex-wrap: nowrap;
    font-size: 1em;
    display: inline-block;
    font-family: "RenaultLifeCyWebWeb-Light", sans-serif;
}

.submit-button.inactive {
    background-color: #ccc;
    pointer-events: none;
    color: gray;
}

.submit-button:active {
    transform: scale(0.8);
}

#status-bar-text {
    clear: both;
    text-align: center;
}

.submit-button:focus, .submit-button:active {
    -webkit-tap-highlight-color: transparent;
    outline: none;
}


.step-info {
    font-size: 0.6em;
}


.input-data-container.hidden {
    display: none;
}

.warning {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.5);
    z-index: 10;
    justify-content: center;
}

.warning-box {
    position: fixed;
    top: 50%;
    left: 50%;
    width: auto;
    transform: translate(-50%, -50%);
    background-color: #333;
    border: 1px solid rgba(0, 0, 0, 0.8);
    border-radius: 8px;
    padding: 10px 20px;
    display: grid;
    vertical-align: top;
    grid-template-columns:minmax(8em, max-content) minmax(8em, max-content);
    grid-template-rows: 1fr 0.5fr 1fr;
    gap: 15px 15px;
    grid-template-areas:
            "label label"
            "label label"
            "left-button right-button";
}

#warning-label {
    grid-area: label;
}

#reject-button {
    grid-area: left-button;
}

#confirm-button {
    grid-area: right-button;
}

.text-data-input-container.last {
    margin-bottom: 1em;
    padding-bottom: 1em;
}

.final-window {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 100;
    text-align: center;
    vertical-align: center;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.final-window.hidden {
    display: none;
}


#warning-label {
    padding: 0.5em;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    color: white;
    font-size: 1.2em;
}

.flat-button {
    /*padding: 1vw;*/
    /*margin: fill;*/
    width: auto;
    height: auto;
    padding: 15px 20px;
    background-color: #fc3;
    border: none;
    cursor: pointer;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
    color: #333;
    flex-wrap: nowrap;
    font-size: 1em;
    display: inline-block;
    justify-content: center;
    font-family: "RenaultLifeCyWebWeb-Light", sans-serif;
}

.button-label {
    margin-left: auto;
    margin-right: auto;
}

#confirm-button {
    float: right;
}

#reject-button {
    float: left;
}

.buttons-container.hidden {
    display: none;
}

.warning.hidden {
    display: none;
}


.done-image.hidden {
    display: none;
}

.car-status-side-button {
    border: 1px;
    padding: 1vw;
    width: 100%;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 25%;
    cursor: pointer;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
    user-select: none;
}

.side-contour {
    height: auto;
    max-width: 90%;

    vertical-align: top;
    -o-object-fit: cover;
    object-fit: cover;
}

.car-foreshortening.hidden {
    display: none;
}

#picture {
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
}

.button-container.top {
    width: 3em;
    height: 3em;
}

.what-stage-label {
    font-size: 1.4em;
    height: 100%;
    color: white;
    word-wrap: break-word;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.button-container:focus, .button-container:active {
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

.icon {
    position: center;
    width: 70%;
    height: 70%;
    pointer-events: none;
}

.icon.main {
    width: 45%;
    height: 45%;
}

input {
    text-indent: 10px;
}

.canvas {
    position: absolute;
    background: rgba(0, 0, 0, 0);
    padding-left: 0;
    padding-right: 0;
    top: 0;
    bottom: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 100%;
    height: 100%;
}

.canvas.hidden {
    display: none;
}

#result {
    position: absolute;
    top: 20%;
    font-size: 24px;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    text-align: center;
    padding: 10px 0;
    color: white;
}

#result.hidden {
    display: none;
}

.spinner-wrapper {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .2s all ease;
    z-index: 100;
}

.spinner {
    display: flex;
    justify-content: center;
}

.spinner::after {
    content: "";
    width: 50px;
    height: 50px;
    border: 10px solid #dddddd;
    border-top-color: black;
    border-radius: 50%;
    animation: spinner 1s ease-in-out infinite;
}

@keyframes spinner {
    to {
        transform: rotate(1turn);
    }
}

.spinner-wrapper.hidden {
    opacity: 0;
    pointer-events: none;
}

.file-input {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    bottom: 1vh;
    left: 1vw;
}

.button {
    border: 1px;
    padding: 1vw;
    width: 100%;
    background-color: #333;
    border-radius: 25%;
    cursor: pointer;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);

}

.button:focus {
    outline: none;
    user-select: none;
}

.button.camera {
    border-radius: 50%;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
    background-color: #333;
}

.button.camera.hidden {
    border-radius: 25%;
}

.button.upload, .button.camera {
    transition: .1s border-radius ease;
}

.button.upload.hidden {
    border-radius: 100%;
}

.button-container:active {
    transform: scale(0.8);
}

.button.hidden {
    opacity: 0;
    pointer-events: none;
    position: absolute;
}

.blink-overlay {
    position: absolute;
    width: 100%;
    height: 100vh;
    z-index: 3;
    pointer-events: none;
}

.animation-shown {
    animation: .3s blink;
}

@keyframes blink {
    50% {
        background-color: rgba(255, 255, 255, 0.5);
    }
}

#canvas2 {
    z-index: 100;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

#checkmark-path {
    stroke-dasharray: 99.47578430175781;
    stroke-dashoffset: -99.47578430175781;
    fill: transparent;
}

#success-checkmark.animate #checkmark-path {
    animation: 2s ease forwards draw;
    opacity: 1;
}

.success-checkmark-container {
    transform: translate(0, 35%);
    width: 120px;
    height: 300px;
    margin: 0 auto;
    z-index: 105;
    pointer-events: none;
}

@keyframes draw {
    0% {
        opacity: 1;
        stroke-dashoffset: -99.47578430175781;
        fill: transparent;
        transform: translateY(0);
    }

    35% {
        stroke-dashoffset: 0;
        fill: transparent;
    }

    60% {
        fill: #3da35a;
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        fill: #3da35a;
        stroke-dashoffset: 0;
        opacity: 0;
        transform: translateY(-10px);
    }
}

.failure-cross-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 300px;
    margin: 0 auto;
    z-index: 105;
    pointer-events: none;
}

#cross-path {
    /*stroke-dasharray: 1234;*/
    /*stroke-dashoffset: 3140;*/
    fill: transparent;
}

#failure-cross.animate #cross-path {
    /*stroke: red;*/
    animation: 2s ease forwards drawCross;
}

#failure-cross {
    width: 100%;
    height: 100%;
}

@keyframes drawCross {
    0% {
        opacity: 1;
        stroke-dashoffset: -99.47578430175781;
        fill: transparent;
        transform: translateY(0);
    }

    35% {
        stroke-dashoffset: 0;
        fill: transparent;
    }

    60% {
        fill: red;
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        fill: red;
        stroke-dashoffset: 0;
        opacity: 0;
        transform: translateY(-10px);
    }
}

.background{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background: black;
    z-index: 2;
}

.background.hidden{
    opacity: 0;
}