@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@600&display=swap');


body {
  background-color: black;
}

main {
    height: 100vh;
    max-height: 110vh;
    width: 100%;
    display: flex;
}
#img-background {
    content: url("../../img/plans/cd_dubi_low.png");
    object-fit: cover ;
    max-width: 60%;
    height: auto;
    object-position: -8vw 0px;
}

#login-header-img {
    scale: 1;
    display: block;
    margin: auto;
    width: fit-content;
    margin-bottom: 1em;
}

.content-card {
  padding: 0em 10%;
}

.header-card {
  margin-bottom: -1em;
}

#login-title {
    font-size: 1.8em !important;
    padding: 0.25em 1em;
    color: white;
    font-family: "Quicksand", sans-serif;
    width: fit-content;
    margin: auto;
    text-align: center;
    border-radius: 2.5px;
}

.container {
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    background-color: black;
    width: 40%;
    height: 100% !important;
}


.flex-row-between {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}



.form-group {
    display: block;
    width: 100%;
}



#login {
    width: 85%;
    max-width: 500px;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#login * {
    font-family: "Quicksand" !important;
    font-size: 1.8vh;
    text-align: center;
}

#login-form {
    margin: auto;
    padding: 1em;
    border-radius: 1em;
    margin-top: 2em;
    margin-bottom: 2em;
    background-color: #F5F5F5;
    display: flex;
    flex-direction: column;
}

#login-form p:first-child {
    font-family: "Quicksand";
    font-weight: bolder;
    text-align: center;
}

input:not([type="checkbox"]):not([type="radio"]) , select {
    width: 100%;
    border-radius: 0.25em !important;
    display: block;
    padding: 0.5em;
    margin: 0.5em 0em;
}

.form-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.form-row div:not(:first-child) {
  padding-left: 1em;
}

.form-group-one-quarter {
  display: inline-block;
  width: 25%;
}

.form-group-three-quarter {
  display: inline-block;
  width: 75%;
}

.form-group-one-quarter input {
  display: block;
  width: 25%;
}

.form-group-three-quarter input {
  display: block;
  width: 75%;
}

input[type="checkbox"] {
    vertical-align: middle;
    margin-right: 5px;
    height: 1em;
  }

  label {
    vertical-align: middle;
    height: auto;
  }


  #login-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
  }

  .car-line {
     position: relative;
     height: auto;
     width: 5em;
  }

  #car-line-down {
    rotate: 180deg;
    margin-top: 2em;
    margin-bottom: 1em;
    left: 0px;
    align-self: flex-start;
  }

  #car-line-top {
    align-self: flex-end;
    right: 0px;
    margin-bottom: 2em;
    margin-top: 1em;
  }
  
  .steps {
    align-self: flex-end;
    left: 0px;
    margin-bottom: 2em;
    margin-top: 1em;
  }

  @media (max-width: 951px) and (orientation : portrait){
    * {
          box-sizing: border-box;
      }

      #login-title {
        font-size: 5.1vw !important;
        text-align: center;
      }
        #img-background {
            display: none;
        }

        #login-container {
            width: 100%;
        }

        #login * {
          font-size: 2.5vw;

      }

      #login-header-img {
        scale: 0.8;
      }
    
  }


  @media (max-width: 428px) and (orientation : portrait){
    * {
          box-sizing: border-box;
      }

      #login-title {
        font-size: 5.1vw !important;
        text-align: center;
      }
        #img-background {
            display: none;
        }

        #login-container {
            width: 100%;
        }

        #login * {
          font-size: 3.5vw;

      }

      #login-header-img {
        scale: 0.8;
      }
    
  }


  @media (max-width: 951px) and (orientation : landscape){
    * {
         
          box-sizing: border-box;
      }

        #img-background {
            display: none;
        }

        #login-container {
            width: 100%;
        }

        #login * {
          font-size: 5vh;
      }

      #login-header-img {
       scale: 1.2;
      }
    
  }