.popup-overlay {
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 12011;
    left: 0;
    top: 0;
}

.popuplogin-header {
    width: 96%;
    font-size: 1.2500rem;
    font-weight: bold;
    overflow-wrap: break-word;
    display: inline-block;
}

.closebtn-wrapper {
    display: inline-block;
    width: 4%;
}

a.closebtn {
    font-size: 1.2500rem;
    padding: 0;
    width: 4%;
    text-indent: 0;
}

.closebtn:hover {
    color: #474747 !important;
}

.popuplogin {
    border: 0.5px solid gainsboro;
    border-top: 3px solid #004B8B;
    padding: 15px;
    background: white;
    text-align: left;
    display: block;
    color: black;
}

.popuplogin-wrapper {
    padding-top: 20px;
}

.popuplogin-separator {
    text-align: center;
    margin-bottom: 20px;
}

.popuplogin-option {
    display: block;
}

social-media-block {
  margin-top: 5px;
  margin-bottom: 5px;
  text-align: center;
}

.buttons-account {
  width: 100%;
  text-align: center;
  display: inline-block;
  margin: 15px 0px;
}

.account-login-btn {
    display: inline-block;
    color: #fff;
    padding: 10px 0;
    font-size: 0.8750rem;
    margin: 0 auto;
    border: none;
    background-color: #004B8B;
    width: 100%;
}

.popuplogin .title {
    display: inline-block;
    width: 100%;
    font-size: 0.9375rem;
    padding-bottom: 10px;
    padding-top: 15px;
    overflow-wrap: break-word;
}

.popuplogin .buttons {
    display: inline-block;
    width: 100%;
    margin: 0;
}

    .popuplogin .buttons > a {
        /*width: auto;*/
        display: inline-block;
        /*padding: 5px 0px 0px 0px;*/
        margin: 0;
        text-indent: 0;
    }

.popuplogin-content .title strong {
  font-weight: normal;
}

@media all and (min-width: 981px) {
    .popuplogin {
        z-index: 1112;
        top: 50px;
        right: 14.9%;
        position: absolute;
        box-shadow: 0 1px 3px 1px rgba(0,0,0,0.1);
        width: 372px;
    }
}

@media (min-width: 200px) and (max-width: 980px) {
    .popuplogin {
        position: absolute;
    }

    .popup-overlay {
        background-color: rgb(0,0,0);
        background-color: rgba(0,0,0, 0.42);
    }

    .forgot-password-container,
    .register-account-container {
        font-size: 0.7500rem;
        padding-top: 10px;
    }

        .forgot-password-container > span,
        .register-account-container > span {
            display: inline-block !important;
        }

            .forgot-password-container > span > a,
            .register-account-container > span > a {
                text-indent: inherit;
                width: auto;
                height: auto;
            }
}

@media (min-width: 550px) and (max-width: 980px) {
    .popuplogin {
        left: 15%;
        width: 70%;
        top: 15%;
    }
}

@media (min-width: 200px) and (max-width: 549px) {
    .popuplogin {
        left: 5%;
        width: 90%;
        top: 7%;
    }

        .popuplogin .title {
            padding-top: 8px;
            padding-bottom: 5px;
        }

    .popuplogin-content > .popuplogin-option:first-child {
        display: none;
    }
}

.loader {
    border: 5px solid #f3f3f3;
    -webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
    border-top: 5px solid #555;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.challenge-container, #id-auth, .auth-challenge {
    display: block;
}

.auth-text {
    display: inline-block !important;
    font-size: 1.2500rem;
}

.loader-container {
    width: 100%;
    text-align: center;
    padding-top: 19px;
}

.challenge-container {
    text-align: center;
    padding-top: 5px;
}

.field-validation-error {
    text-align: center;
}

.popuplogin-content div.inputs {
    margin: 0 10px 20px 10px;
}

  .popuplogin-content div.inputs > input {
      width: 100% !important;
  }

.register-account-container {
    text-align: center;
    margin-top: 6px;
}

.remember-me-container,
.forgot-password-container,
.register-account-container {
    color: #8e8e8e;
    cursor: pointer;
}

    .remember-me-container:hover,
    .forgot-password-container:hover,
    .register-account-container:hover {
        color: #000000;
    }

.additional-options {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-top: 10px;
  padding-bottom: 10px;
}
