/* Login */
body{
  padding:0px !important;
}


.login-container {
    padding: 45px 28px;
    border-radius: 12px;
    background-color: #fff;
    width:100%;
  }
  
  .step.hidden {
    display: none;
  }
  
  .step.active {
    display: block;
  }
  
  .logo {
    display: flex;
    justify-content: center;
    margin-bottom: 32px;
  }
  
  .logo img {
    width: 180px;
    height: auto;
  }
  
  .login-header {
    margin-bottom: 50px;
  }
  
  .login-header h2 {
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    text-align: left;
    margin: 0 auto;
    color: #2F2B3DC7;
  }
  
  .login-header p {
    font-size: 15px;
    font-weight: 400;
    line-height: 22px;
    text-align: left;
    color: #2F2B3DAD;
    margin-top: 8px;
  }

  .login-form-error-message {
    display: none;
    transition: 0.3s ease-in-out;
  }

  .password-error-message {
    display: none;
    transition: 0.3s ease-in-out;
  }
  
  .form-label {
    font-weight: 400;
    font-size: 11px;
    line-height: 11px;
    margin-bottom: 0px;
    color: rgba(47, 43, 61, 0.9);
  }
  
  .input-container {
    position: relative;
  }
  
  .form-label-container {
    padding: 3px 6px 0px 1px;
    position: absolute;
    background-color: white;
    width: fit-content;
    top: -8px;
    left: 10px;
    height: 17px;
  }
  
  #login-form .form-control {
    border-radius: 6px;
    border: 1px solid #C8C7CC;
    font-size: 13px;
    height: 50px;
    color: rgba(47, 43, 61, 0.9);
    font-weight: 400;
  }

  #login-form .form-control:focus{
    border: 2px solid #2092EC;
    box-shadow: 0px 2px 6px rgba(32, 146, 236, 0.3);
    outline: none;
  }

  
  .eye-contianer {
    position: absolute;
    border: none;
    outline: none;
    padding: 0;
    background-color: transparent;
    right: 10px;
    top: 15px;
  }
  .eye-closed{
    display: none;
  }
  
  .forget-password-btn-link {
    font-size: 15px;
    line-height: 23px;
    color: #089FF4;
    text-align: right;
    margin-top: 7px;
    display: block;
    text-decoration: none;
    font-weight: 400;
  }
  
  .btn-login,
  .btn-purchase-offer,
  .btn-company-select {
    width: 100%;
    background-color: #089FF4;
    color: #fff;
    border-radius: 4px;
    border: none;
    padding: 10px;
    font-size: 13px;
    line-height: 15px;
    font-weight: 500;
  }
  
  .btn-login {
    margin-top: 16px;
  }
  
  .btn-login:hover,
  .btn-purchase-offer:hover,
  .btn-company-select:hover {
    background-color: #0e86cb;
    color: #fff;
  }
  
  .or-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 15px 0;
  }
  
  .or-divider::before,
  .or-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #ddd;
  }
  
  .or-divider span {
    margin: 0 10px;
    color: #666;
  }
  
  .background-container {
    /* max-width: 100dvw;
    height: 100dvh; */
    position: relative;
  }
  .background-wrapper{
    display: flex;
    height: 100%;
  }

  .background-wrapper .right{
    min-width: 600px;
    display: flex;
    align-items: center;
    padding:0 66px;
    height: 70dvh !important;

  }
  
  .background-wrapper .left {
    background-color: #F8F7FA;
    height: 100% !important;
    background-image: url('../images/login-image.svg');
    background-size: 80% 60%;
    background-position: center bottom;
    background-repeat: no-repeat;
    padding: 0;
    margin: 0;
    height: 70dvh!important;
    flex: 1 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  
  }

  .background-wrapper .left {
    position: relative;

  }
  .background-wrapper .left .cover-logo-wrapper{
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 90% 80%;
    background-position: center;
  }
  .background-wrapper .left .cover-logo-wrapper .cover-logo{
    max-width: 100%;
    height: auto;
  }


  
  
  @media screen and (max-width: 1110px) {
    .background-wrapper .right{
      min-width: 400px;
      padding:0 16px;
    }
    
  }

  @media screen and (max-width: 980px) {
    .background-wrapper .left {
        display: none;
    }
    .background-wrapper .right {
        min-width: 100%;
        padding: 0 16px;
    }
    .background-wrapper .right .login-container{
      margin:0 auto;
    }
}



  .company-selection-header h2 {
    font-size: 18px;
    line-height: 24px;
    color: #2F2B3DC7;
    font-weight: 500;
    text-align: center;
    margin-bottom: 2rem;
  }
  #company-selection-form .input-container{
    position: relative;
  }

  #company-selection-form .form-label{
    color: #918F98;
    background-color: #fff;
    padding: 3px 6px 0px 1px;
    position: absolute;
    width: fit-content;
    top: -8px;
    left: 10px;
    height: 17px;
  }


#company:hover, #company:focus {
  border-color: #c4c4c4;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

#company option[value=""] {
  color: #585858;
}

#company option {
  background-color: #fff; 
  color: #696969; 
  padding: 10px; 
}

#company option:hover {
  background-color: #089ff4; 
}

#company-selection-form span.arrow-down {
  position: absolute;
  right:20px;
  top:40%;
}

/* Preloader styles */

button#btn-login {
    color: #fff;
    background: #089FF4;
}

button#btn-login:hover {
    background: #0e86cb;
    color: #fff;
}

button.btn.btn-company-select{
    color: #fff;
    background: #089FF4;
}

button.btn.btn-company-select:hover {
    background: #0e86cb;
    color: #fff;
}


/* Preloader Container */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff; /* Change to match your background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* Loader SVG Animation */
#loader svg {
    width: 80px;
    height: 80px;
    animation: rotate 1.5s linear infinite;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Optional: Add stroke dash animation for more advanced effect */
#loader svg circle {
    stroke-dasharray: 251; /* Circumference: 2 * π * r = 2 * 3.1416 * 40 ≈ 251 */
    stroke-dashoffset: 251;
    animation: dash 1.5s ease-in-out infinite;
}

@keyframes dash {
    0% {
        stroke-dashoffset: 251;
    }
    50% {
        stroke-dashoffset: 62.75; /* 25% of 251 */
    }
    100% {
        stroke-dashoffset: 251;
    }
}