a{
    color: #666666;
    text-decoration: none;
    font-family: MMB;
    font-size: 12px;
    }

.main{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100vw;
}

.backgroundImage{
    width: 100%;
    height: 95%;
    position: absolute;
    z-index: -1;
}

.background{
    width: 100%;
    height: 100%;
}

.logo{
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    width: 100%;
    margin-bottom: 50px;
    margin-top: 50px;
}

.logo img{
    width: 18rem;
    height: auto;
}

.formContainer{
    margin-top: 3rem;
    width: 60%;
    height: 92%;
}

.backBtnDiv{
    display: flex;
    justify-content: flex-end;
    color: #666666;
}

.backBtnDiv a {
    color: #666666;
    text-decoration: none;
}

.form-group{
    margin-top: 2rem;
    margin-bottom: 1rem;
  }

.mb-3{
    margin-top: 5rem;
}

/*Rahmen um die Eingabefelder weg und Striche unten drunter*/
.form-control, .form-select{
    font-family: MMB;
    margin-top: 3rem;
    border: none;
    border-bottom: 1px solid #666666;
    border-radius: 0;
    background-color: transparent;
}

/*Veränderungen am Bootstrap-Standardstyle wenn die Form-Control und Form-select angeklickt wird*/
.form-control:focus, .form-select:focus{
    outline: 0;
    box-shadow: none;
    background-color: transparent;
    border-color: transparent;
    border-bottom: 1px solid #666666;
  }

/*Opacity des Placeholders im Dropdown anpassen*/
.form-select{
    color: rgba(0,0,0,0.3);
    width: 75%;
}

/*Placeholder etwas abschwächen*/
.form-control::placeholder{
    opacity: 0.4;
}

/*Damit Write to Snow Water of Switzerland den gleiche look hat wie die Placeholder*/
.form-label{
    opacity: 0.4;
    font-family: MMB;
    margin-left: 12px;
}

/*Margin-Top und Anpassung Schrift für die Datenschutz Zustimmung*/ 
.form-check{
    margin-top: 3rem;
}

label{
    display: inline-block;
    color: #666666;
    font-family: 'MMB';
}

.form-check a{
   font-size: 1rem;
}


/*Submit- und Back-Button*/
.btn{
  border: 1px solid #666666 !important;
  --bs-btn-padding-x: 0.55rem;
  --bs-btn-padding-y: 0.25rem;
}

  /*Die Farbe der Strich un Haken ändern wenn die Validierung der Eingabe erfolgreich war*/
.form-control.is-valid, .was-validated .form-control:valid {
    border-color: black;
    background-image: none;
  }

.form-select.is-valid, .was-validated .form-select:valid{
        border-color: black;
  }

.form-select.is-valid:not([multiple]):not([size]), .form-select.is-valid:not([multiple])[size="1"], .was-validated .form-select:valid:not([multiple]):not([size]), .was-validated .form-select:valid:not([multiple])[size="1"]{
      --bs-form-select-bg-icon: none;
        color: rgba(0,0,0,1);
  }


/*Footer Bereich*/
    .footer{
    display: flex;
    width: 100vw;
    height: 3rem;
    justify-content: space-around;
    align-items: center;
    position: relative;
    }

    .footerImg{
    display: flex;
    justify-content: center;
    align-items: center;
    }

    .footer .footerImg img{
    height: auto;
    width: 1rem;
    }

    .footer p{
    font-size: 0.4rem;
    margin-top: auto;
    margin-bottom: auto;
    font-family: MMB;
    }




@media (min-width: 501px) and (max-width: 770px) {

    .formContainer{
        height: 91%;
        width: 80%;
    }

    .mb-3{
        margin-top: 3rem;
    }

    .footer p {
        font-size: 0.6rem;
    }
}

@media (min-height: 1014px){
    .main{
	height: 88vh;
    }
}

@media (orientation: landscape) and (max-width: 700px){
    .main{
        height: 228vh;
    }
}