@import "../fonts/fonts.css";
body,
html {
    height: 100%;
    width: 100%;
    -webkit-text-size-adjust: none;
    -webkit-font-smoothing: antialiased;
    font-synthesis: none;
    margin: 0;
    padding: 0;
}

.body-wrapper {
    padding: 0;
    width: 100%;
    height: 100%;
    font-size: 16px; 
}
#login-screen .bg-image-container {
    position: absolute;
    width: 100%;
    height: 100%;
}

#login-screen .loader {
    border: 3px solid rgba(0, 0, 0, .2);
    border-radius: 50%;
    border-top: 3px solid #fff;
    width: 0.938rem;
    height: 0.938rem;
    animation: spin 1s linear infinite;
    display: inline-block;
    vertical-align: middle;
    margin: 0 !important;
    opacity: 0.7;
}

#login-screen #loginbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 0.7rem;
}

#login-screen .bg-image-container .transparent-container {
    background-color: #385cb5;
    width: 100%;
    position: absolute;
    height: 100%;
    top: 0;
    opacity: 70%;
}

#login-screen .bg-image-container img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#login-screen .inner-container {
    position: relative;
    padding: 3.75rem 3.75rem 0 3.75rem;
    height: 100%;
    width: 100%;
}

#login-screen .inner-container .top-section {
    display: flex;
    justify-content: space-between;
}

#login-screen .inner-container .top-section .left-section .language-selector-box {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}
#login-screen .inner-container .top-section .left-section .drop-down-box {
    width: 8.375rem;
    height: 6rem;
    box-shadow: 0 0.1875rem 0.75rem 0 rgba(102, 102, 102, 0.25);
    border-radius: 0.75rem;
    background-color: #fff;
    position: relative;
    padding: 0.5rem;
    display: none;
}
#login-screen .inner-container .top-section .left-section .drop-down-box.showBox {
    display: block;
}

#login-screen .inner-container .top-section .left-section .drop-down-box .change-lagn-btn {
    border: 0;
    padding: 0.5rem 0.75rem;
    color: #333;
    font-size: 1rem;
    font-family: 'Poppins-Regular', sans-serif;
    background: #fff;
    z-index: 1;
    position: relative;
    cursor: pointer;
}

#login-screen .inner-container .top-section .left-section .drop-down-box .change-lagn-btn.selected {
    color: #385cb5;
}

#login-screen .inner-container .top-section .left-section .language-selector-box .chosen-language-btn{
    position: relative;
    width: 4.5rem;
    height: 3rem;
    border: 0;
    border-radius: 0.75rem;
    border: 1px solid #385cb5;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    z-index: 1;
    align-items: center;
    background-color: #E4ECEC;
}
#login-screen .eye-icon {
    position: absolute;
    cursor: pointer;
    display: flex;
    right: 1rem;
    height: 100%;
    display: flex;
    top: 0;
    width: 1.5rem;
    flex-wrap: wrap;
    align-content: center;
}
#login-screen .eye-icon img {
    height: auto;
    object-fit: contain;
    width: 100%;
}
#login-screen .eye-icon.hidden {
    display: none;
}

#login-screen .inner-container .top-section .left-section .language-selector-box .chosen-language-btn .flag-img {
    width: 1.5rem;
    display: flex;
    height: 1.5rem;
}
#login-screen .inner-container .top-section .left-section {
    width: 8.375rem;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    position: relative;
    align-content: flex-end;
    gap: 0.5rem;

}

#login-screen .inner-container .top-section .right-section {
    margin-right: -3.75rem;
    margin-top: -3.75rem;
}

#login-screen .inner-container .top-section .left-section .language-selector-box .chosen-language-btn .flag-img img {
    width: 100%;
    object-fit: contain;
}

#login-screen .inner-container .top-section .left-section .language-selector-box .choosen-language {
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 1rem;
    font-family: 'Poppins-Regular', sans-serif;
    color: #333;
}
#login-screen .inner-container .top-section .right-section .logo-holder {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-end;
}

#login-screen .inner-container .top-section .right-section .logo-holder img {
    object-fit: contain;
    max-width: 100%;
    width: 100%;
    height: auto;
}
#login-screen .copyright-container {
    position: absolute;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    padding-bottom: 1rem;
}
#login-screen .copyright-container div {
    color: #fff;
    font-size: 0.875rem;
    font-family: 'Poppins-Regular', sans-serif;
}
#login-screen .sign-in-container {
    color: #fff;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    flex-wrap: wrap;
    /* padding-left: 5.625rem; */
}
#login-screen .login-container-custom {
    display: flex;
    align-items: center;
    flex-direction: column;
    flex-wrap: wrap;
    padding: 0 3.75rem 0 3.75rem;
    position: absolute;
    top: 0;
    height: 100%;
    justify-content: center;
    align-content: flex-end;
    width: 100%;
}
#login-screen .sign-in-form {
    display: flex !important;
    /* gap: 1.25rem; */
    flex-wrap: wrap;
    justify-content: flex-end;
    /* flex-direction: column; */
    flex-wrap: wrap;
    align-items: flex-end;
    flex-direction: column;
}
#login-screen .sign-in-form .form-group input[type="text"],
#login-screen .sign-in-form .form-group input[type="password"]{
    height: 100%;
    border: 0;
    background: none;
    color: #fff;
    width: 100%;
    padding: 0;
    font-family: 'Poppins-Medium',sans-serif;
    font-size: 1rem;
    outline: 0;
}

#login-screen .sign-in-form .form-group:focus-visible, 
#login-screen .sign-in-form .form-group:focus,
#login-screen .sign-in-form .form-group:active,
#login-screen .sign-in-form .form-group:focus-within {
    border: 1px solid rgba(0, 95, 97, 1);
    outline: 0;
}

#login-screen .sign-in-form .form-group {
    width: 17.1875rem;
    height: 3.25rem;
    background: rgba(255, 255, 255, 0.32);
    position: relative;
    border: 1px solid #fff;
    border-radius: 0.375rem;
    margin-bottom: 0;
    display: flex;
    padding: 0 10px;
    gap: 6px;

}
#login-screen .sign-in-form .input-icons {
    /* position: absolute; */
    /* display: inline-block; */
    /* padding: 0 1rem 0 1rem; */
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    align-content: center;
    /* top: 0; */
}
#login-screen .sign-in-form .input-icons img {
    width: 100%;
    height: auto;
    object-fit: contain;
}
#login-screen .sign-in-form .input-container {
    display: flex;
    width: 35.625rem;
    column-gap: 1.25rem;
    flex-wrap: wrap;
    /* margin-bottom: 2rem; */
    row-gap: 1rem;
}

#login-screen .sign-in-form .sign-in-btn {
    font-family: 'Poppins-Medium',sans-serif;
    font-size: 1rem;
    border: 0;
    border-radius: 0.375rem;
    width: 12.5rem;
    background-color: rgba(198, 170, 118, 1);
    height: 3.25rem;
    color: #000;
}

#login-screen .sign-in-form .sign-in-btn:hover {
    background-color: rgba(210, 188, 147, 1);
}

#login-screen .sign-in-intro {
    margin-bottom: 1.75rem;
    width: 35.625rem;
}

#login-screen .sign-in-form .error-feedback {
    font-family: 'Poppins-Medium', sans-serif;
    /*display: none;*/
    border-radius: 0.5rem;
    color: rgba(166, 13, 13, 1);
    font-size: 0.875rem;
    width: 23.6875rem;
    height: 2.5rem;
    background-color: #feecec;
    max-width:none;
}

#login-screen .sign-in-form .error-icon {
    margin-right: 0.25rem;
    margin-left: 0.5rem;
}
#login-screen .sign-in-form .feedback-container {
    flex-wrap: wrap;
    height: 100%;
    align-items: center;
}

#login-screen .signIn-text {
    font-family: 'NAUSS-Bold',sans-serif;
    color: #fff;
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}
#login-screen .signIn-intro-txt {
    font-family: 'Poppins-Regular',sans-serif;
    font-size: 1.125rem;
}

/* Styles for input placeholder text */
#login-screen .sign-in-form .form-group input[type="text"]::placeholder,
#login-screen .sign-in-form .form-group input[type="password"]::placeholder {
    color: #fff;
    font-size: 1rem;
}
#login-screen .sign-in-form .form-group input:-internal-autofill-selected {
    background-color: transparent;
}
/* Styles for input placeholder text when focused */
#login-screen .sign-in-form .form-group input[type="text"]:focus::placeholder {
    color: #fff; /* Set placeholder text color when input is focused */
}
#login-screen .footer-btn-container {
    gap: 2.5rem;
    align-items: center;
    flex-wrap: wrap;
}
#login-screen .forget-pwd-link {
    color: #fff;
    text-decoration: none;
    font-family: 'Poppins-Medium', sans-serif;
    font-size: 1rem;
}
input::-ms-reveal,
input::-ms-clear {
    display: none;
}
input::-ms-reveal,
input::-ms-clear {
    display: none;
}
input[type="password"]::-webkit-contacts-auto-fill-button,
input[type="password"]::-webkit-credentials-auto-fill-button {
    visibility: hidden !important;
    display: none !important;
    pointer-events: none !important;
    position: absolute;
    right: 0;
    width: 0;
    margin: 0
}
#login-screen .sign-in-form input:-webkit-autofill,
#login-screen .sign-in-form input:-webkit-autofill:hover, 
#login-screen .sign-in-form input:-webkit-autofill:focus, 
#login-screen .sign-in-form input:-webkit-autofill:active{
    /* -webkit-background-clip: text;
    -webkit-text-fill-color: #ffffff;
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 20px 20px #23232329; */
}

#maincontent {
    position: absolute;
}

/* CSS for elements when direction is ltr */
html[dir="ltr"] #login-screen .eye-icon {
    /* Your CSS styles for ltr direction */
    right: 1rem;
    left: auto;
  }
  
  /* CSS for elements when direction is rtl */
  html[dir="rtl"] #login-screen .eye-icon  {
    left: 1rem;
    right: auto;
    /* Your CSS styles for rtl direction */
  }
  html[dir="rtl"] #login-screen #login-container {
    direction: ltr;
  }
  html[dir="rtl"] #login-screen .sign-in-form {
    direction: rtl;
    align-items: flex-start;
  }
  html[dir="rtl"] #login-screen .inner-container .top-section {
    direction: ltr;
  }
  #login-screen input:-webkit-autofill,
  #login-screen input:-webkit-autofill:hover, 
  #login-screen input:-webkit-autofill:focus, 
  #login-screen input:-webkit-autofill:active{
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: #ffffff;
}
#flogin-screen input:focus-visible {
    
    border: 0;
    outline: 0;
}

html[dir="rtl"] #login-screen .sign-in-form .error-icon {
    margin-right: 0.5rem;
    margin-left: 0.25rem;
}
  @media screen and (min-width: 2559.99px) {
    body,
html {
    font-size: 32px;
  }
}
@media screen and (min-width: 1920px) and (max-width: 1920px) {
    #login-screen .inner-container .top-section .right-section .logo-holder {
        width: 44vw;
    }
}

@media screen and (min-width: 577px) and (max-width: 767.5px) {

    #login-screen .inner-container {
        padding: 1.75rem 0.75rem 0 2.75rem;
    }

    #login-screen .inner-container .top-section .right-section {
        margin-right: -0.75rem;
        margin-top: -3.75rem;
    }

    #login-screen .login-container-custom {
        padding: 0 1.75rem 0 2.75rem;
        width: 100%;
    }

    #login-screen .inner-container .top-section .left-section .language-selector-box {
        justify-content: flex-start;
    }

    #login-screen .inner-container .top-section .left-section .language-selector-box .chosen-language-btn {
        padding: 6px;
    }

    #login-screen .copyright-container {
        /* width: auto; */
    }
  #login-screen .inner-container .top-section .right-section .logo-holder img {
    width: 52%;
  }

  #login-screen .sign-in-form .feedback-container {
    flex-wrap: nowrap;
  }

  body,
  html {
      font-size: 10px;
    }
}

@media screen and (max-width: 576px) {

    #login-screen .sign-in-form .input-container,
    #login-screen .sign-in-intro,
    #login-screen .sign-in-form .form-group {
        width: 100%;
    }

    #login-screen .inner-container {
        padding: 2.75rem 2rem 0 2rem
    }

    #login-screen .login-container-custom {
        padding: 0 2rem 0 2rem;
    }

    #login-screen .inner-container .top-section .left-section .drop-down-box {
        position: absolute;
        top: 3.4rem;
    }

    #login-screen .inner-container .top-section .left-section .language-selector-box .chosen-language-btn {
        padding: 8px;
    }

    #login-screen .inner-container .top-section .right-section {
        margin-right: -2rem;
        margin-top: -3rem;
    }

    #login-screen .sign-in-form .error-feedback {
        width: 100%;
        height: 3rem;
    }

    #login-screen .sign-in-form .feedback-container {
        flex-wrap: nowrap;
        padding-right: 1rem;
    }
    #login-screen .inner-container .top-section .right-section .logo-holder img {
        width: 80%;
      }

    html[dir="rtl"] #login-screen .sign-in-form .feedback-container {
        flex-wrap: nowrap;
        padding-left: 1rem;
        padding-right: 0;
    }

    body,
    html {
        font-size: 12px;
      }
}

@media screen and (min-width: 768px) and (max-width: 1023px) and ((orientation : landscape)),
(min-device-width: 768px) and (max-device-width: 1023px) and (orientation : landscape){
    #login-screen .inner-container {
        padding: 1.75rem 1.75rem 0 2.75rem;
    }
    #login-screen .inner-container .top-section .right-section {
        margin-right: -2rem;
        margin-top: -4rem;
    }

    #login-screen .inner-container .top-section .left-section .language-selector-box .chosen-language-btn {
        padding: 8px;
    }

    #login-screen .inner-container .top-section .right-section .logo-holder img {
        width: 52%;
      }
      #login-screen .sign-in-form .feedback-container {
        flex-wrap: nowrap;
      }
      body,
      html {
          font-size: 10px;
        }
}
@media only screen and (max-width: 992px) and (orientation: landscape) {
    html[dir="rtl"]  #login-screen .sign-in-form .input-container{
        width: auto;
    }
}
@media screen and (max-width: 767.98px) {
    html[dir="rtl"] #login-screen .sign-in-form .input-container {
        width: auto;
    }
    html[dir="rtl"]  #login-screen .sign-in-intro {
        margin-bottom: 0.5rem;
    }
    html[dir="rtl"]  #login-screen .signIn-text {
        font-size: 2.5rem;
    }
    html[dir="rtl"] #login-screen .sign-in-form {
        margin-top: 2rem !important;
    }
}
@media screen and (min-width: 577px) and (max-width: 767.98px) {
    html[dir="rtl"] #login-screen .login-container-custom {
        padding: 0 1.75rem 0 0rem;
    }
}
@media screen and (min-width: 768px) and (max-width: 832px) {
    #login-screen .inner-container .top-section .right-section .logo-holder img {
        width: 52%;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024.99px) {
    #login-screen .inner-container .top-section .left-section,
    #login-screen .inner-container .top-section .left-section .drop-down-box {
        width: 9.375rem;
    }
}

.userguide {
    color: white;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

html[dir="rtl"] .userguide, html[dir="rtl"] .userguide_link {
    direction: rtl !important;
    display: inline-block;
}

.userguide_link {
    color: white !important;
}

.click_here {
    font-weight: 700;
    font-family: 'Poppins-Bold', sans-serif;
    /* text-underline-position: under; */
}