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;
  }
}

/* Esconder a div em telas entre 1920px e 1920px de altura */
@media only screen and (min-height: 1920px) and (max-height: 1920px) and (orientation: portrait) {
.col-esquerdo {
  display: none;
}
}
/* Esconder a div em telas entre 1600px e 1600px de altura */
@media only screen and (min-height: 1600px) and (max-height: 1600px) and (orientation: portrait) {
.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;
}