/**
*File: css/responsive.css
*
*css file for custom responsive styles for login page
*
*@package css
*@author Florian Fritzsche
*@version 1.0
*@copyright Copyright (c) 2021, Florian Fritzsche
*17.11.2021
*
*/

/***** Login page content *****/


@media screen and (max-device-width : 1024px) and (orientation : portrait) {

    div.col-sm-offset-3 {
        margin-left: 15%;
    }


    img.login_logo {
        height: 30px;
    }

    .btn-action h4 {
        font-size: 1rem;
    }

    .datetime-input {
        font-size: 1rem !important;
    }

    #header_div h4 {
        font-size: 1rem;
    }

    #header_div p {
        font-size: 0.7rem;
    }

    .arrival-content-box i {
        font-size: 2em;
    }

    .departure-content-box i {
        font-size: 2em;
    }

    .loading_start-content-box i {
        font-size: 2em;
    }

    .loading_end-content-box i {
        font-size: 2em;
    }

    .fotos_div {
        margin-top: 50px;
    }
}


@media screen and (max-device-width : 767px) and (orientation : portrait) {

    /*
    HEADER
    */

    .topic img {
        height: 30px !important;
        float: right;
    }

    #logo {
        height: 30px !important;
        max-width: 100%;
        float: right;
    }

    div.col-sm-offset-3 {
        margin-left: 0;
    }

    .btn-action h4 {
        font-size: 0.5rem;
    }

    /*
    CLEANING
    */

    #header_div_cleaning h4 {
        font-size: 1rem;
    }

    .info-header-cleaning {
        height: 120px;
    }

    .normal-panel h1 {
        font-size: 1.5rem;
    }

    .normal-panel h2 {
        font-size: 1.0rem;
    }

    .last-arrival-content-box {
        margin-left: 5%;
        margin-right: 5%;
    }

    .arrival-content-box {
        margin-left: 5%;
        margin-right: 5%;
        height: 150px;
        max-width: 40%;
    }

    .arrival-content-box div {
        top: 30%;
    }

    .arrival-content-box p {
        font-size: 0.7em !important;
    }

    #foto_cleaning_comment {
        width: 90%;
    }

    #cleaning_foto_div {
        width: 100px;
    }

    .upload-input {
        font-size: 10px;
        width: 100px;
    }

    .upload-preview-foto {
        height: 25px;
    }

    .last-departure-content-box {
        margin-left: 5%;
        margin-right: 5%;
    }

    .departure-content-box {
        margin-left: 5%;
        margin-right: 5%;
        height: 150px;
        max-width: 40%;
    }

    .departure-content-box div {
        top: 30%;
    }

    .departure-content-box p {
        font-size: 0.7em !important;
    }

    .datetime-input {
        font-size: 0.8rem !important;
    }

    .error_div {
        line-height: 1;
        top: 70% !important;
    }

    /*
    LOADING
     */

    #header_div h4 {
        font-size: 0.5rem;
    }

    #header_div p {
        font-size: 0.5rem;
    }

    .last-loading_start-content-box {
        margin-left: 5%;
        margin-right: 5%;
    }

    .loading_start-content-box {
        margin-left: 5%;
        margin-right: 5%;
        height: 150px;
        max-width: 40%;
    }

    .loading_start-content-box div {
        top: 30%;
    }

    .loading_start-content-box p {
        font-size: 0.7em !important;
    }

    .last-loading_end-content-box {
        margin-left: 5%;
        margin-right: 5%;
    }

    .loading_end-content-box {
        margin-left: 5%;
        margin-right: 5%;
        height: 150px;
        max-width: 40%;
    }

    .loading_end-content-box div {
        top: 30%;
    }

    .loading_end-content-box p {
        font-size: 0.7em !important;
    }

    .load_infos_box {
        margin: 5%;
    }

    .number-input {
        font-size: 1em !important;
    }

    .upload-btn-wrapper {
        width: 100px;
    }

    .btn span{
        font-size: 12px;
    }

    .fotos_div h3{
        font-size: 1rem;
        width: 40% !important;
    }

    .foto_comment {
        width: 40%;
    }

    #add_foto {
        width: 40%;
    }

    #add_foto img {
        max-width: 100px;
    }

	.form-bottom-lang  {
		padding: 5px 2px 0px 2px;
	}
	
	.form-bottom-lang .btn-action h4 {
	    font-size: 0.7rem;
	}
	
	.login-screen input {
	    font-size: 1.25rem !important;
	}
	
	.info-header {
	    height: 75px;
	}
}