body {
    font-family: "Lato", sans-serif;
  }
  
  :focus {
    outline: none;
  }
  
  .main-head {
    height: 150px;
    background: #fff;
  }
  
  .sidenav {
    height: 100%;
    width: 40%;
    background-color: #000;
    overflow-x: hidden;
    padding-top: 20px;
  }
  
  .main {
    padding: 0px 0px;
  }
  
  @media screen and (max-height: 450px) {
    .sidenav {
      padding-top: 15px;
    }
  }
  
  @media screen and (max-width: 450px) {
    .login-form {
      margin-top: 10%;
    }
  
    .register-form {
      margin-top: 10%;
    }
  }
  
  @media screen and (min-width: 768px) {
    .main {
      margin-left: 50%;
      align-items: center;
      height: 100%;
      width: 50%;
      float: right;
      background-image: url("../../assets/dist/img/login.png");
      background-position: center center;
      background-repeat: repeat;
      background-attachment: fixed;
      background-size: cover;
      position: absolute;
      background-color: #1d71b8 0% 0% no-repeat padding-box;
    }
  
    .sidenav {
      width: 50%;
      float: right;
      background-image: url("../../assets/dist/img/background_first.png");
      background-position: center center;
      background-repeat: repeat;
      background-size: cover;
      background-color: #1d71b8 0% 0% no-repeat padding-box;
      opacity: 1;
      padding: 10px;
    }
  
    .login-form {
      align-items: center;
    }
  
    .login-form img {
      margin-left: 60%;
      margin-top: 150px;
    }
  
    .register-form {
      margin-top: 20%;
    }
  }
  
  .login-main-text {
    margin-top: 20%;
    padding: 60px;
    color: #fff;
  }
  
  .login-main-text h2 {
    font-weight: 300;
  }
  
  .btn-black {
    background-color: #000 !important;
    color: #fff;
  }
  
  .circulo {
    height: 250px;
    width: 250px;
    background-color: #fff;
    border-radius: 50%;
    position: relative;
    align-items: center;
  }
  .circulo img {
    float: right;
    margin-right: 50px;
    margin-top: 25px;
  }
  
  .circulo_segundo {
  }
  
  .input {
    width: 100%;
    border: 0;
    border-bottom: 2px solid #fff;
    background: none;
    color: white;
    padding-left: 25px;
  }
  
  .input ~ .border {
    display: none;
    height: 0px;
  }
  
  .input:focus ~ .border {
    transition: 0.5s;
    border: none;
  }
  .border {
    /*  border: 3px solid */
  }
  
  .rounded-pill {
    border: 2px solid #0f70b7;
    padding: 10px;
    border-radius: 25px;
  }
  
  ::placeholder {
    color: white;
  }
  
  .container-fluid {
    padding-left: 0rem;
    padding-right: 0rem;
    margin: 0px;
  }
  
  .row {
    width: 100% !important;
    height: 100%;
    position: absolute;
  }
  .background-esquerdo {
    width: 100%;
    height: 100%;
    background-image: url("../../assets/dist/img/background_first.png");
    background-position: center center;
    background-repeat: repeat;
    background-attachment: fixed;
    background-size: cover;
    background-color: #1d71b8 0% 0% no-repeat padding-box;
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    padding-left: 0%;
  }
  
  .background-directo {
    margin: 0%;
    width: 100%;
    height: 100%;
    background-image: url("../../assets/dist/img/login.png");
    background-position: center center;
    background-repeat: repeat;
    background-attachment: fixed;
    background-size: cover;
    background-color: #1d71b8 0% 0% no-repeat padding-box;
    opacity: 1;
    position: absolute;
    padding: 2%;
  }

  
  
  @media only screen and (min-width: 960px) {
    /* styles for browsers larger than 960px; */
  }
  @media only screen and (min-width: 1440px) {
    /* styles for browsers larger than 1440px; */
  }
  @media only screen and (min-width: 2000px) {
    /* for sumo sized (mac) screens */
  }
  @media only screen and (max-device-width: 480px) {
    /* styles for mobile browsers smaller than 480px; (iPhone) */
  }
  @media only screen and (device-width: 768px) {
    /* default iPad screens */
  }
  /* different techniques for iPad screening */
  @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: portrait) {
    /* For portrait layouts only */
  }
  
  @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: landscape) {
    /* For landscape layouts only */
  }
  
  @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
    .col-esquerdo {
      display: none;
    }
  }
  
  /* Portrait */
  @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
  }
  
  /* Landscape */
  @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
  }
  
  /* ----------- iPhone 5, 5S, 5C and 5SE ----------- */
  
  /* Portrait and Landscape */
  @media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) {
    .button_class {
      width: 90% !important;
    }
    .input-container {
      width: 100% !important;
    }
  }
  
  /* Portrait */
  @media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
  }
  
  /* Landscape */
  @media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
  }
  
  /* ----------- iPhone 6, 6S, 7 and 8 ----------- */
  
  /* Portrait and Landscape */
  @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {
  }
  
  /* Portrait */
  @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
  }
  
  /* Landscape */
  @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
  }
  
  /* ----------- iPhone 6+, 7+ and 8+ ----------- */
  
  /* Portrait and Landscape */
  @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) {
  }
  
  /* Portrait */
  @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
  }
  
  /* Landscape */
  @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
  }
  
  /* ----------- iPhone X ----------- */
  
  /* Portrait and Landscape */
  @media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) {
  }
  
  /* Portrait */
  @media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
  }
  
  /* Landscape */
  @media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
  }
  
  form {
    max-width: 500px;
    margin: auto;
  }
  .formulario {
    margin-top: 30%;
  }
  .formulario img {
    display: block;
    margin: auto;
  }
  
  .erro_text {
    display: block;
    margin: auto;
  }
  .formulario h4 {
    color: white;
    margin-left: 10%;
    cursor: pointer;
  }
  .input-container {
    display: -ms-flexbox; /* IE10 */
    display: flex;
    width: 100%;
    margin-bottom: 15px;
  }
  
  .button_class {
    width: 100%;
    display: -ms-flexbox; /* IE10 */
    display: flex;
  }
  
  .icon {
    padding: 10px;
    background: none;
    color: #0f70b7;
    min-width: 50px;
    text-align: center;
  }
  
  .input-field {
    width: 100%;
    padding: 10px;
    border: none;
    outline: none;
    border-bottom: 2px solid #fff;
    background: none;
    color: white;
  }
  
  .input-field:focus {
    border: none;
    border-bottom: 2px solid #fff;
  }
  
  /* Set a style for the submit button */
  .btn {
    background-color: dodgerblue;
    border: 2px solid #0f70b7;
    padding: 10px;
    border-radius: 25px;
    color: white;
    border: none;
    cursor: pointer;
    width: 100%;
    margin-left: 8%;
    opacity: 0.9;
  }
  
  .btn:hover {
    opacity: 1;
  }
  
  .option_button {
    margin: auto;
    display: flex;
    position: absolute;
    margin-left: 130px;
  }