* {
    box-sizing: border-box;
  }
  
  .main-container {
    min-height: 100vh;
    background: url(../img/background.png);
    
    display: flex;
    align-items: center;
    justify-content: center;
    background-position: center;
    background-size: cover;
    font-family: 'Rubik', sans-serif;
    font-size: 13px;
    background-attachment: fixed;
    
  }
  
  .main-container a {
    text-decoration: none;
  }
  
  .main-container .login-wrapper {
    background-color:#EDEDF5;
    -webkit-box-shadow: 0px 0px 172px 6px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 172px 6px rgba(0,0,0,0.2);
    box-shadow: 0px 0px 172px 6px rgba(0,0,0,0.2); 
  
    width: 100%;
    max-width: 900px;
    min-height: 520px;
    display: flex;
  }
  
  /* Estilos del contenedor del formulario */
  .main-container .login-wrapper .form-wrapper {
    min-width: 50%;
    
    display: flex;
    flex-direction: column;
  }
  
  /* Estilos del header del formulario */
  .main-container .login-wrapper .form-wrapper .form-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    
    padding: 15px;
    margin-top: 15px;
  
    font-weight: 900;
  }
  
  .main-container .login-wrapper .form-wrapper .form-header .fa-arrow-left,
  .main-container .login-wrapper .form-wrapper .form-header .register-link,
  .main-container .login-wrapper .form-wrapper .form-container .forgot-pass {
    color: #686b72;
  }
  
  /* Estilos del formulario y sus mensajes */
  .main-container .login-wrapper .form-wrapper .form-container {
    padding:30px 30px 0px 30px;
  }
  
  .main-container .login-wrapper .form-wrapper .form-container .form-messages {
    text-align: center;
    line-height: 20px;
    margin-bottom: 30px;
  }
  
  .main-container .login-wrapper .form-wrapper .form-container .form-messages h2 {
    margin-bottom: 15px;
    margin-top: 30px;
    font-size: 40px;
    font-weight: 700;
  }
  
  
    .input-icons img { 
              position: absolute; 
          } 
            
          .input-icons { 
              width: 100%; 
              margin-bottom: 10px; 
          } 
            
          .icon { 
            padding: 10px;  
            min-width: 48px;  
            margin-top: 11px;
          } 
  
          .icon2 { 
            padding: 10px;  
            min-width: 45px;
            margin-top: 4px;
          } 
            
          .input-field { 
            width: 100%;
      margin-bottom: 15px;
      background-color: #fff;
      border: none;
      padding: 20px 12px 20px 56px;
      border-radius: 4px;
      font-size: 15px;
          } 
  .main-container .login-wrapper .form-wrapper .form-container .form a {
    display: block;
  }
  
  .main-container .login-wrapper .form-wrapper .form-container .form .forgot-pass {
    text-align: right;
    font-weight: 600;
  }
  
  .main-container .login-wrapper .form-wrapper .form-container .form .continue-btn {
      margin-top: 20px;
      margin-bottom: 30px;
      padding: 18px 40px;
      border-radius: 50px;
      background-color: #F0AD4E;
      color: #000;
      text-align: center;
      font-size: 17px;
      margin-right: 20px;
  }
  .main-container .login-wrapper .form-wrapper .form-container .form .cancel-btn {
      margin-top: 20px;
      margin-bottom: 30px;
      padding: 18px 40px;
      border-radius: 50px;
      border: 1px solid #131722;
      color: #000;
      text-align: center;
      font-size: 17px;
  }
  /* Separador */
  .main-container .login-wrapper .form-wrapper .form-container .separator {
    border:1px solid #dfdfe8;
    margin-bottom: 35px;
  }
  
  /* Otras opciones de login */
  .main-container .login-wrapper .form-wrapper .form-container .login-options {
    margin: 20px 20px;
    text-align: center;
  }
  
  .main-container .login-wrapper .form-wrapper .form-container .login-options .login-text {
    margin-bottom: 15px;
  }
  
  .main-container .login-wrapper .form-wrapper .form-container .login-icons {
    font-size: 20px;
  }
  
  .main-container .login-wrapper .form-wrapper .form-container .login-icons .fa-facebook-square,
  .main-container .login-wrapper .form-wrapper .form-container .login-icons .fa-google,
  .main-container .login-wrapper .form-wrapper .form-container .login-icons .fa-twitter {
    color: #4694a8;
    padding: 0px 10px;
  }
  
  /* Estilos del lado derecho */
  
  .main-container .image-wrapper {
    background:url(../img/login-images.svg);
    background-position: center;
    background-size: cover;
  
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
        width: 100%;
  }
  
  .main-container .image-wrapper .image-message {
      color: #131313;
      line-height: 20px;
      padding: 50px 70px 8px 40px;
      display: flex;
      flex-direction: row;
  }
  
  .main-container .image-wrapper .image-message .image-hr-container {
    margin: 5px 20px;
  }
  
  .main-container .image-wrapper .image-message .image-hr-container .image-hr {
    border: 1px solid #000;
    min-width: 30px;
  }
  
  .main-container .image-wrapper .image-message .image-text h2 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 15px;
  }
  .login-btn{
    display: flex;
  }
  
  /*[ Responsive ]*/
  
  @media (max-width: 768px) {
  
    .main-container{
       padding: 20px;
    }
    .main-container .login-wrapper {
      max-width: 100%;
      min-height: auto;
      display: block;
      border-radius: 3px;
  
    }
    .login-btn{
    display: block;
    }
    .main-container .login-wrapper .form-wrapper .form-container .form .login-button{
      margin-right: 0px;
    }
    .image-wrapper{display: none !important;}
    .main-container .login-wrapper .form-wrapper {
      min-width: 100%;
      display: flex;
      flex-direction: column;
  }
  }
  
  @media (max-width: 576px) {
      .main-container .login-wrapper .form-wrapper .form-container .form-messages h2{
          font-size: 25px;
      }
      .main-container .login-wrapper .form-wrapper .form-container {
          padding:22px 15px 0px 15px;
      }
      .digit-group input{margin:10px 4px !important;}
  }
  
  
  
  /********** OTP ***********/
  .splitter {
          padding: 0 5px;
          color: #;
          font-size: 24px;
      }
  .digit-group  input {
          width: 60px;
          height: 60px;
          border: none;
          line-height: 50px;
          text-align: center;
          font-size: 24px;
          font-family: 'Raleway', sans-serif;
          font-weight: 600;
          color: #000;
          margin: 0 7px;
      }
  
  
  .prompt {
      margin-bottom: 20px;
      font-size: 20px;
      color: white;
  }
  a.resend-code {
      text-align: center;
      padding: 20px 0px;
      color: #121621;
  }
  
  
  /*********** intrest page ***********/
  .btn.intrest-btn {
      background: white;
      margin: 4px 3px;
      padding: 8px 20px;
      border: 1px solid #e4e4e4;
      border-radius: 150px;
      color:#000;
  }
  
  .btn.intrest-btn.active {
      background:#f0ad4e !important;
  }
  .btn.intrest-btn:hover {
      background:#f0ad4e !important;
  }
  .btn.intrest-btn img {
      width: 29px;
      margin-right: 6px;
  }
  .btn.focus, .btn:focus {
      outline: 0;
      box-shadow: 0 0 0 0.2rem rgb(240 173 78 / 29%);
  }
  
  select.form-control.form-control-lg {
      width: 100%;
      margin-bottom: 22px;
      background-color: #fff;
      border: none;
      padding: 5px 12px 5px 50px;
      border-radius: 4px;
      font-size: 15px;
  }
  select.form-control-lg:not([size]):not([multiple]) {
      height: calc(2.875rem + 17px);
  }
  
  .are-you-interested .form-control.form-control-lg {
      padding: 5px 12px 5px 16px;
  }
  
  
  
  /********** rounded check ************/
  .rounded-check {
    position: relative;
  }
  
  .round label {
      background-color: #fff;
      border: 1px solid #ccc;
      border-radius: 50%;
      cursor: pointer;
      height: 28px;
      right: 23px;
      position: absolute;
      top: 12px;
      width: 28px;
  }
  .check-text h3 {
      font-size: 23px;
      font-weight: 600;
  }
  .round label:after {
    border: 2px solid #fff;
    border-top: none;
    border-right: none;
    content: "";
    height: 6px;
    left: 7px;
    opacity: 0;
    position: absolute;
    top: 8px;
    transform: rotate(-45deg);
    width: 12px;
  }
  
  .round input[type="checkbox"] {
    visibility: hidden;
  }
  
  .round input[type="checkbox"]:checked + label {
      background-color: #f0ad4e;
      border-color: #f0ad4e;
  }
  
  .round input[type="checkbox"]:checked + label:after {
    opacity: 1;
  }
  
  
  a.viewer {
      padding: 16px;
      text-align: center;
      background: #ffba57;
      font-size: 22px;
      color:#101010;
      font-weight: 700;
      border-radius: 4px;
  }
  a.creator{
      padding: 16px;
      text-align: center;
      background:#101010;
      font-size: 22px;
      color: #ffba57;
      font-weight: 700;
      border-radius: 4px;
  }
  
  .modal-body {
      padding: 37px;
  }
  
  
  
  /***************** communication css ************/
  .communication-box {
      text-align: center;
      background: #131721;
      padding: 24px;
      border-radius: 9px;
      margin-bottom: 28px;
  }
  .communication-box .img img {
      width: 88px;
  }
  .communication-box .text h4 {
      color: #ededf5;
      padding-top: 18px;
      font-weight: 500;
      font-size: 22px;
  }
  .form-messages img {
    width: 253px;
}