/* override some values in starter.css */
#top-bar-container {
    display: block !important;
}
#top-bar-container,
#login-container {
    box-sizing: initial;
    line-height: initial;
    max-width: initial;
}
#top-bar-container img {
    max-width: initial;
}
#top-bar-container form {
    margin: 0;
}

/* global font rendering from ch5 */
#top-bar-container {
    font-smooth: antialiased;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

#top-bar-container {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1000;
}

#top-bar-container p {
    margin: 0;
}

.overlay-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* Web browsers that does not support RGBa */
    background: rgb(0, 0, 0);
    /* IE9/FF/chrome/safari supported */
    background: rgba(0, 0, 0, 0.9);
    /* IE 8 suppoerted */
    /* Here some time problem for Hover than you can use background color/image */
    -ms-filter: 'progid:DXImageTransform.Microsoft.gradient(startColorstr=#88000000, endColorstr=#88000000)';
    display: none;
    z-index: 11;
}

#overlay-container-foreground {
    z-index: 12;
}

.overlay-container:after {
    clear: both;
    display: block;
    content: '';
}

/* Fix position of popups during scroll */
#top-bar-container .overlay-container {
    position: fixed;
}

#popupFullContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

#popupLarge {
    height: 100%;
    width: 100%;
    margin-bottom: 6.3125rem;
    background: linear-gradient(180deg, rgb(255, 255, 255) 69%, rgba(212, 224, 244, 1) 100%);
    border-radius: 2vh;
    border-style: solid;
    border-width: 0.125rem;
    border-color: #9b95ea;
}

.lbv .toggle-password {
    content: url('../images/popups/icon-eye.svg');
}

.lbv #popupLarge {
    background: none;
    background-color: #343d46;
    border-style: none;
    border-radius: 0.625rem;
}

#popupLargeButtons {
    height: 100%;
    width: 100%;
    background: linear-gradient(180deg, rgb(255, 255, 255) 69%, rgba(212, 224, 244, 1) 100%);
    border-radius: 2vh;
    border-style: solid;
    border-width: 0.125rem;
    border-color: #9b95ea;
}

.lbv #popupLargeButtons {
    background: none;
    background-color: #343d46;
    border-style: none;
    border-radius: 0.625rem;
}

.popupLogin #popupLargeButtons {
    margin-bottom: 9.25rem;
}

#popupSmall {
    height: 60vh;
    width: 50vh;
    background: linear-gradient(180deg, rgba(237, 244, 255, 1) 45%, rgba(195, 212, 241, 1) 100%);
    border-radius: 2vh;
    border-style: solid;
    border-width: 0.125rem;
    border-color: #9b95ea;
}

.lbv #popupSmall {
    background: #343d46;
    border-style: none;
}

#popupSmallTimeout {
    height: 30vh;
    width: 50vh;
    background: linear-gradient(180deg, rgba(237, 244, 255, 1) 45%, rgba(195, 212, 241, 1) 100%);
    border-radius: 2vh;
    border-style: solid;
    border-width: 0.45vh;
    border-color: #9b95ea;
}

.lbv #popupSmallTimeout {
    background-image: none;
    background-color: rgb(52, 61, 70);
    border-style: none;
}

#popupSmallBlank {
    width: 100%;
    background: linear-gradient(180deg, rgb(255, 255, 255) 69%, rgba(212, 224, 244, 1) 100%);
    border-radius: 0.625rem;
    border-style: solid;
    border-width: 0.125rem;
    border-color: #9b95ea;
    margin-bottom: 5.5625rem;
}

.lbv #popupSmallBlank {
    background: rgb(52, 61, 70);
    border-style: none;
}

.popupDeleteMain #popupSmallBlank {
    width: 100%;
    background: linear-gradient(180deg, rgb(255, 255, 255) 69%, rgba(212, 224, 244, 1) 100%);
    border-radius: 0.625rem;
    border-style: solid;
    border-width: 0.125rem;
    border-color: #9b95ea;
    margin-bottom: 5.5625rem;
}

.lbv .popupDeleteMain #popupSmallBlank {
    background: linear-gradient(180deg, #2d343c 49.99%, #343d46 50%);
    border-style: none;
}

#deleted-container #popupSmallBlank {
    margin-bottom: 0;
}

#popupContainer {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    position: relative;
}

#timeoutReasonDiv {
    width: 90%;
}

#selfExclusionReasonDiv {
    width: 90%;
}

#FailedLoginsReasonDiv {
    width: 90%;
}

.popupSignInButtons {
    height: 100%;
    width: 100%;
}

.popupSignInEmail {
    height: 100%;
    width: 100%;
}

.popupRegisterButtons {
    height: 100%;
    width: 100%;
}

.popupRegisterEmail {
    height: 100%;
    width: 100%;
}

.popupContainerLarge {
    height: 100%;
    width: 100%;
}

.popupContainerMedium {
    height: 80%;
    width: 100%;
    margin-top: 30%;
}

.popupContainerSmall {
    height: 100%;
    width: 100%;
}

.popupContainerSmallBlank {
    height: 100%;
    width: 100%;
}

.popupHeader {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    width: 70%;
}

.popupBody {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    height: 60%;
    width: 90%;
}

.popupRegisterEmail .popupBody {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    height: 50%;
    width: 90%;
    margin-top: 11%;
}

.popupSignInEmail .popupBody {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    height: 50%;
    width: 90%;
    margin-top: 0;
}

.popupSubBody {
    display: flex;
    flex-flow: row nowrap;
    width: 85%;
    height: 10%;
    justify-content: space-between;
}

.popupFooter {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    width: 90%;
    padding: 1.5rem 0 2.75rem 0;
}

/* Mobile and Tablet */
@media only screen and (max-width: 48rem) {
    .popupFooter {
        padding: 1.5rem 0 1.5rem 0;
    }
}

.footerContainer {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    gap: 2%;
    position: absolute;
    bottom: -0.75%;
    width: 102%;
    height: 12%;
    background: linear-gradient(180deg, rgba(214, 64, 255, 1) 40%, rgba(172, 30, 255, 1) 100%);
    border-radius: 0 0 2vh 2vh;
    border-style: none;
    border-width: 0.75vw;
    border-color: #9b95ea;
}

.forgotPWHeader {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    max-width: 17.75rem;
    width: calc(100% - 1.5rem);
    margin-top: 0.625rem;
    margin-bottom: 0.75rem;
}

.forgotPWBody {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    max-width: 17.75rem;
    width: calc(100% - 1.5rem);
}

.forgotPWFooter {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    max-width: 17.75rem;
    width: 90%;
    margin-top: 0.75rem;
    margin-bottom: 1.5rem;
}

#forgotPWFooter {
    height: 0%;
}

#forgotPWContinue {
    height: 34%;
    width: 84%;
}

#signInEmail {
    height: 19%;
}

#signInSocial {
    height: 43%;
    justify-content: center;
}

#or {
    margin-top: 2.5vw;
    font-size: 3.75vw;
}

.headerText {
    font-family: 'Noto Sans', sans-serif;
    font-size: 1.0625rem;
    font-weight: bold;
    line-height: 1.41;
    text-align: center;
    color: #431aa2;
    user-select: none;
    white-space: nowrap;
}

.lbv .headerText {
    color: #ffffff;
}

/* Smaller Phones */
@media only screen and (max-width: 24.375rem) {
    .headerText {
        white-space: normal;
    }
}

#headerTextPosition {
    position: relative;
    display: flex;
    width: 90%;
    height: 4rem;
    justify-content: center;
    align-items: center;
}

#headerB {
    display: flex;
    width: 85%;
    height: 10%;
    justify-content: center;
    align-items: center;
}

#headerFPW {
    margin-bottom: 2vh;
}

#subtitleA {
    display: flex;
    width: 90%;
    text-align: center;
    justify-content: center;
    align-items: baseline;
}

#rememberMe {
    margin-left: 3.75vh;
    width: 20vh;
    pointer-events: none;
}

#forgotPassword {
    text-decoration: underline;
    margin: 0 auto;
    width: 17.25rem;
    font-weight: bold;
}

.bodyText {
    font-family: 'Noto Sans', sans-serif;
    font-size: 0.75rem;
    line-height: 1.33;
    text-align: left;
    color: #431aa2;
    user-select: none;
    width: 17.25rem;
    margin: 0 auto;
}

.lbv .bodyText {
    color: #ffffff;
}

.popupForgotPassword .bodyText {
    width: 100%;
}

.timeoutTextLarge {
    font-family: 'Noto Sans', sans-serif;
    font-size: 2.5vh;
    text-align: center;
    font-weight: bold;
    color: #431aa2;
    user-select: none;
    margin-bottom: 5%;
    margin-top: 2%;
}

.lbv .timeoutTextLarge {
    color: white;
}

.timeoutTextSmall {
    font-family: 'Noto Sans', sans-serif;
    font-size: 2vh;
    font-weight: 500;
    text-align: center;
    color: #431aa2;
    user-select: none;
    margin-bottom: 5%;
}

.lbv .timeoutTextSmall {
    color: white;
}

#usernameSubtext {
    position: absolute;
    width: 90%;
    height: 0;
    top: 32%;
    left: 5%;
    font-size: 1.35vh;
}

.bodyTextCentered {
    font-family: 'Noto Sans', sans-serif;
    font-size: 0.9375rem;
    line-height: 1.33;
    text-align: center;
    color: #431aa2;
    user-select: none;
}

.lbv .bodyTextCentered {
    color: #ffffff;
}

.footerText {
    font-family: 'Noto Sans', sans-serif;
    font-size: 1.75vh;
    font-weight: bold;
    text-align: center;
    color: #ffffff;
    user-select: none;
}

.popupDeleteButtonPosition {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 1.5rem auto;
}

/*Large Phones*/
@media only screen and (max-width: 26.5625rem) {
    .popupDeleteButtonPosition {
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin: 1.5rem auto;
    }
}

#delete-confirm-message {
    font-family: 'Noto Sans', 'Roboto', sans-serif;
    font-size: 0.875rem;
    font-weight: bold;
    line-height: 1.43;
    text-align: center;
    color: #e52b20;
    max-width: 25.25rem;
    margin: 1.5rem 2.75rem auto 2.75rem;
}

.lbv #delete-confirm-message {
    color: #f27b6e;
    width: 100%;
    background: #343d46;
    padding-top: 0.3125rem;
}

/*Large Phones*/
@media only screen and (max-width: 26.5625rem) {
    #delete-confirm-message {
        margin-left: 1.5rem;
        margin-right: 1.5rem;
    }
}

#delete-confirm-icon {
    width: 100%;
    max-height: 12.25rem;
}

.lbv #popupContainer #delete-confirm-icon {
    content: url('../images/popups/lbv-delete-account-image-desktop.png');
}

.popupDeleteCancel,
.popupDeleteConfirm {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    width: 13.25rem;
    height: 2.5rem;
    border-radius: 6.25vh;
    margin: 1.25vh;
}

/*Large Phones*/
@media only screen and (max-width: 26.5625rem) {
    .popupDeleteCancel,
    .popupDeleteConfirm {
        flex-flow: row nowrap;
        width: calc(100% - 1.5rem);
        height: 2.5rem;
    }
}

.popupDeleteCancel.disabled,
.popupDeleteConfirm.disabled {
    width: 13.25rem;
}

.popupDeleteCancel {
    background-color: #ff7b1b;
}

.lbv .popupDeleteCancel {
    background-color: #efb433;
}

.popupDeleteConfirm {
    background-color: #fff;
    border: solid 0.125rem #431aa2;
}

.lbv .popupDeleteConfirm {
    background-color: #454f59;
    border: none;
}

.popupDeleteConfirm:hover {
    background-color: #fafafa;
    border: solid 0.125rem rgba(140, 119, 255, 0.5);
    cursor: pointer;
}

.lbv .popupDeleteConfirm:hover {
    background-color: #737b83;
    border: none;
}

.popupDeleteCancel:hover {
    background-color: #ff9243;
    cursor: pointer;
}

.lbv .popupDeleteCancel:hover {
    background-color: #f3c766;
}

.buttonTextWhite,
.buttonTextPurple {
    font-family: 'Noto Sans', sans-serif;
    text-align: left;
    font-size: 0.875rem;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.14;
    letter-spacing: 0.0275rem;
    user-select: none;
    white-space: nowrap;
    margin-left: 0.5rem;
}

.buttonTextWhite {
    color: #fff;
}

.buttonTextPurple {
    color: #431aa2;
}

.lbv .buttonTextPurple {
    color: #ffffff;
}

/* Smaller Phones */
@media only screen and (max-width: 24.375rem) {
    .buttonTextWhite,
    .buttonTextPurple {
        max-width: 83%;
        white-space: normal;
        text-align: center;
    }
}

.textEntry {
    border: none;
    width: 15.75rem !important;
    height: 2rem;
    border-radius: 1.5vh;
    font-family: 'Noto Sans', sans-serif;
    font-size: 0.75rem;
    line-height: 1.33;
    color: #431aa2;
    margin: 0 auto;
    padding: 0.25rem 1rem;
    white-space: nowrap;
    background-color: #ffffff;
    box-shadow: 0 0 0 0.0625rem #dad3ff;
    -webkit-box-shadow: 0 0 0 6vh #ffff inset !important;
    border: 0.0625rem solid rgba(140, 119, 255, 0.32);
}

.lbv .textEntry {
    color: #ffffff;
    background-color: #22272c;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0.625rem;
}

.textEntryUsername {
    border: none;
    width: 15.75rem;
    height: 2rem;
    border-radius: 1.5vh;
    font-family: 'Noto Sans', sans-serif;
    font-size: 0.75rem;
    line-height: 1.33;
    color: #431aa2;
    margin: 0 auto 1rem auto;
    padding: 1.5vh;
    white-space: nowrap;
    background-color: #ffffff;
    box-shadow: 0 0 0 0.0625rem #dad3ff;
}

.lbv .textEntryUsername {
    color: #ffffff;
    background-color: #22272c;
    box-shadow: none;
    -webkit-box-shadow: 0 0 0 6vh #22272c inset !important;
    border: none;
}

input::placeholder {
    color: #a18cd0;
}

.lbv input::placeholder {
    color: #ffffff;
    opacity: 0.5;
}

input:focus {
    outline: none !important;
    border-color: #dad3ff;
    box-shadow: 0 0 0.5rem #dad3ff;
}

.lbv input:focus {
    outline: none !important;
    border-color: none;
    box-shadow: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 6vh #ffff inset !important;
    border: 0.0625rem solid rgba(140, 119, 255, 0.32);
    width: 15.75rem;
    height: 2rem;
    margin: 0 auto;
}

.lbv input:-webkit-autofill,
.lbv input:-webkit-autofill:hover,
.lbv input:-webkit-autofill:focus,
.lbv input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 6vh #22272c inset !important;
    border: none;
}

/* Mobile and Tablet */
@media only screen and (max-width: 48rem) {
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active,
    .textEntry,
    .textEntryUsername {
        width: 85%;
    }
}

input:-webkit-autofill {
    -webkit-text-fill-color: #431aa2 !important;
}

.lbv input:-webkit-autofill {
    -webkit-text-fill-color: #ffffff !important;
}

/* Delete Warning, Final Warning, Error and Forgot Password Popups*/
.popupDeleteWarning #popupSmallBlank,
.popupDeleteFinal #popupSmallBlank,
.popupDeleteError #popupSmallBlank,
.popupForgotPassword #popupSmallBlank {
    width: 22.75rem;
    height: 16.25rem;
}

/* Mobile and Tablet */
@media only screen and (max-width: 48rem) {
    .popupDeleteWarning #popupSmallBlank,
    .popupDeleteFinal #popupSmallBlank,
    .popupDeleteError #popupSmallBlank,
    .popupForgotPassword #popupSmallBlank {
        max-width: 22.75rem;
        max-height: 16.25rem;
    }
}

/* Large Phones */
@media only screen and (max-width: 26.5625rem) {
    .popupDeleteWarning #popupSmallBlank,
    .popupDeleteFinal #popupSmallBlank,
    .popupDeleteError #popupSmallBlank,
    .popupForgotPassword #popupSmallBlank {
        margin: 0 1.9375rem;
    }
}

/* Smaller Phones */
@media only screen and (max-width: 24.375rem) {
    .popupDeleteWarning #popupSmallBlank,
    .popupDeleteFinal #popupSmallBlank,
    .popupDeleteError #popupSmallBlank,
    .popupForgotPassword #popupSmallBlank {
        padding: 1rem 0;
    }
}

.popupDeleteWarning .popupDeleteButtonPosition,
.popupDeleteFinal .popupDeleteButtonPosition,
.popupDeleteError .popupDeleteButtonPosition {
    flex-flow: column nowrap;
    margin: 0;
}

.popupDeleteWarning .popupDeleteCancel,
.popupDeleteWarning .popupDeleteConfirm,
.popupDeleteFinal .popupDeleteCancel,
.popupDeleteFinal .popupDeleteConfirm,
.popupDeleteError .popupDeleteCancel {
    width: calc(100% - 1.5rem);
    max-width: 19.75rem;
    margin: 1rem 0 0 0;
}

#warning-confirm-title,
#final-confirm-title,
#error-confirm-title {
    font-family: 'Noto Sans', sans-serif;
    width: 100%;
    margin-bottom: 1rem;
    font-size: 1.0625rem;
    font-weight: bold;
    line-height: 1.41;
    color: #f27b6e;
    text-align: center;
}

.lbv #warning-confirm-title,
.lbv #final-confirm-title,
.lbv #error-confirm-title {
    color: #f27b6e;
}

#warning-confirm-message,
#final-confirm-message,
#error-confirm-message,
#error-confirm-email,
#error-confirm-email a {
    font-family: 'Noto Sans', sans-serif;
    width: calc(100% - 2.3125rem);
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.33;
    letter-spacing: 0.029375rem;
    color: #431aa2;
    text-align: center;
}

.lbv #warning-confirm-message,
.lbv #final-confirm-message,
.lbv #error-confirm-message,
.lbv #error-confirm-email,
.lbv #error-confirm-email a {
    color: #ffffff;
}

#error-confirm-email {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    font-weight: bold;
    letter-spacing: normal;
    word-break: break-word;
}

/*Large Phones*/
@media only screen and (max-width: 26.5625rem) {
    #warning-confirm-message,
    #final-confirm-message,
    #error-confirm-message {
        letter-spacing: normal;
    }
}

.password-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.password-wrapper .toggle-password {
    position: absolute;
    right: 2rem;
    top: 0.5rem;
    width: 1.5rem;
    height: 1.5rem;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.password-wrapper .toggle-password:hover {
    opacity: 1;
}

.fb-disabled {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    height: auto;
    margin: 0 auto;
    font-family: 'Noto Sans', sans-serif;
}

.fb-disabled img {
    max-width: 3.125rem;
    height: auto;
}

.fb-disabled span {
    padding-left: 0.625rem;
    font-size: 1.35vh;
    font-weight: bold;
    color: #431aa2;
}

.fb-disabled .red {
    color: red;
    text-decoration: underline;
    margin: 0;
    padding: 0;
}

.errorText {
    font-family: 'Noto Sans', sans-serif;
    font-size: 0.625rem;
    text-align: left;
    color: red;
    z-index: 3;
}

.lbv .fb-disabled .red,
.lbv .errorText {
    color: #f27b6e;
}

.errorText.usernameErrorRegister {
    position: absolute;
    width: 90%;
    height: 0;
    top: 32%;
    left: 5%;
}

.errorText.emailError {
    position: relative;
    width: 90%;
    height: 0;
    left: 7%;
    margin-bottom: 1.5rem;
}

.errorText.emailErrorRegister {
    position: absolute;
    width: 90%;
    height: 0;
    top: 34.5%;
    left: 5%;
}

.errorText.emailErrorFPW {
    position: absolute;
    width: 90%;
    height: 0;
    top: 62%;
    left: 13%;
}

.errorText.passwordError {
    position: relative;
    width: 90%;
    height: 0;
    left: 7%;
    margin-bottom: 1.5rem;
}

.errorText.passwordErrorRegister {
    position: absolute;
    width: 90%;
    height: 0;
    top: 55.5%;
    left: 5%;
}

.errorText.serverError {
    position: absolute;
    height: 0;
    top: 90%;
    width: 100%;
    text-align: center;
}

.errorText.serverErrorRegister {
    position: absolute;
    height: 0;
    top: 76.5%;
    width: 100%;
    text-align: center;
}

.errorText.serverErrorFPW {
    position: absolute;
    height: 0;
    top: 87%;
    width: 90%;
    text-align: center;
}

@media only screen and (max-width: 48rem) {
    .errorText.emailError {
        left: 3%;
    }

    .errorText.passwordError {
        left: 3%;
    }

    .errorText.serverError {
        top: 93%;
    }

    @media (max-width: 24.375rem) {
        .errorText.emailErrorFPW {
            left: 6%;
        }
    }

    .errorText.serverErrorFPW {
        width: 95%;
        top: 88%;
    }
}

#codeError {
    position: relative;
    height: 0;
}

.registerButtonPopup {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    background-color: #ff7b1b;
    width: 100%;
    height: 5.5vh;
    border-radius: 6.25vh;
    margin: 1.25vh;
}

.registerButtonPopup.disabled {
    width: 5.5vh;
}

.registerButtonPopup:hover {
    background-color: #ff9243;
    cursor: pointer;
}

.signInButtonPopup {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    background-color: #ff7b1b;
    width: 100%;
    height: 2.5rem;
    border-radius: 6.25vh;
    margin: 1.25vh;
}

.lbv .signInButtonPopup {
    background-color: #efb433;
    width: 86.5%;
    min-width: 17.625rem;
}

.signInButtonPopup.disabled {
    width: 9;
}

.signInButtonPopup:hover {
    background-color: #ff9243;
    cursor: pointer;
}

.lbv .signInButtonPopup:hover {
    background-color: #f3c766;
}

.emailButtonPopup {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    background-color: #ff7b1b;
    border-radius: 6.25vh;
}

.lbv .emailButtonPopup {
    background-color: #efb433;
}

.emailButtonPopup.disabled {
    width: 5.5vh;
}

.emailButtonPopup:hover {
    background-color: #ff9243;
    cursor: pointer;
}

.lbv .emailButtonPopup:hover {
    background-color: #f3c766;
}

.googleButtonPopup {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border-radius: 6.25vh;
    border-style: solid;
    border-width: 0.1vh;
    border-color: #baadff;
}

.googleButtonPopup.disabled {
    width: 5.5vh;
}

.googleButtonPopup:hover {
    background-color: #fbfbfb;
    cursor: pointer;
}

.googleButtonPopup .buttonTextWhite {
    color: #353c43;
}

.appleButtonPopup {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border-radius: 6.25vh;
    border-style: solid;
    border-width: 0.1vh;
    border-color: #baadff;
}

.appleButtonPopup .buttonTextWhite {
    color: #353c43;
}

.appleButtonPopup.disabled {
    width: 5.5vh;
}

.appleButtonPopup:hover {
    background-color: #fbfbfb;
    cursor: pointer;
}

.facebookButtonPopup {
    display: none;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    background-color: #1877f2;
    width: 100%;
    height: 5.5vh;
    border-radius: 6.25vh;
    margin: 1.25vh;
}

.facebookButtonPopup.disabled {
    width: 5.5vh;
}

.facebookButtonPopup:hover {
    background-color: #338cff;
    cursor: pointer;
}

.fbEnabled .facebookButtonPopup {
    display: flex;
}

.appleButtonPopup,
.googleButtonPopup,
.facebookButtonPopup,
.emailButtonPopup {
    width: 17.1875rem;
    height: 2.5rem;
    margin: 0.3125rem;
}

/* Mobile and Tablet */
@media only screen and (max-width: 48rem) {
    .appleButtonPopup,
    .googleButtonPopup,
    .facebookButtonPopup,
    .emailButtonPopup {
        width: min(90%, 17.5rem);
        height: 2.5rem;
    }
}

.timeoutButtonPopup {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    background-color: #ff7b1b;
    width: 90%;
    height: 5.5vh;
    border-radius: 6.25vh;
    margin: 1.25vh;
}

.lbv .timeoutButtonPopup {
    background-color: #efb433;
}

.timeoutButtonPopup.disabled {
    width: 5.5vh;
}

.timeoutButtonPopup:hover {
    background-color: #ff9243;
    cursor: pointer;
}

.lbv .timeoutButtonPopup:hover {
    background-color: #f1bb47;
}

.close {
    position: absolute;
    height: 0;
    top: -7%;
    left: 94%;
}

.lbv .close img {
    content: url('../images/popups/lbv-close.png');
}

@media only screen and (max-width: 24.375rem) {
    .close {
        top: -15%;
        left: 93%;
    }
}

.close:hover {
    cursor: pointer;
}

.closeFPW {
    position: relative;
    height: 0%;
    top: -24.5%;
    left: 46%;
}

.closeFPW:hover {
    cursor: pointer;
}

#closeButton {
    width: 2.75rem;
}

#questionButton {
    width: 1.65vh;
    margin-left: 0.15vh;
}

.back {
    position: absolute;
    height: 0;
    top: -6%;
    left: -6%;
}

.back:hover {
    cursor: pointer;
}

.lbv .back img {
    content: url('../images/popups/lbv-back.png');
}

#backButton {
    width: 2.75rem;
    height: 2.75rem;
}

#emailIcon {
    height: 1.25rem;
    position: absolute;
    left: 15%;
    user-select: none;
}

#facebookIcon {
    height: 3.25vh;
    position: absolute;
    left: 15%;
    user-select: none;
}

#appleIcon {
    height: 1.5rem;
    position: absolute;
    left: 15%;
    user-select: none;
}

#googleIcon {
    height: 1.5rem;
    position: absolute;
    left: 15%;
    user-select: none;
}

/* Mobile and Tablet */
@media only screen and (max-width: 48rem) {
    #appleIcon,
    #googleIcon,
    #emailIcon {
        left: 12%;
    }
}

#popupContainer .processAnim {
    position: relative;
    width: 4vh;
    height: 4vh;
    display: none;
}

.lbv #popupContainer .appleButtonPopup .processAnim,
.lbv #popupContainer .googleButtonPopup .processAnim {
    content: url('../images/popups/lbv-loading-google.gif');
}

.lbv #popupContainer .processAnim {
    content: url('../images/popups/lbv-loading.gif');
}

#popupContainer .processAnim img {
    width: 4vh;
    height: 4vh;
}

/* Tooltip CSS */
.infoUsername,
.infoPassword {
    display: inline;
    position: relative;
}

.infoUsernameTooltip,
.infoPasswordTooltip {
    visibility: hidden;
    width: 22vh;
    background-color: #fbfcff;
    color: #431aa2;
    border-radius: 2vh;
    padding: 1vh;
    text-align: center;
    box-shadow: 0 0.0625rem 0.0625rem 0.0625rem #a19cbd42;

    /* Position the tooltip */
    position: absolute;
    z-index: 3;
    top: calc(100% + -0.0625rem);
    left: 50%;
    margin-left: -2vh;
}

/* Add the arrow */
.infoUsernameTooltip::after,
.infoPasswordTooltip::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 2vh;
    margin-left: -0.3125rem;
    border-width: 0.3125rem;
    border-style: solid;
    border-color: transparent transparent white transparent;
}

.infoUsernameTooltip.visible,
.infoPasswordTooltip.visible {
    visibility: visible;
}

/*End Tooltip CSS */

/* Check Mark CSS */
#checkContainer {
    display: block;
    height: 3vh;
    width: 3vh;
}

.container {
    display: block;
    position: relative;
    cursor: pointer;
    font-size: 1.375rem;
}

.container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    position: absolute;
    top: -10%;
    left: 0;
    height: 2vh;
    width: 2vh;
    border: 0.3vh solid #270663;
    border-radius: 0.5vh;
}

.container:hover input ~ .checkmark {
    background-color: #ffffff00;
    cursor: pointer;
}

.container input:checked ~ .checkmark {
    background-color: #ffffff00;
}

.checkmark:after {
    content: '';
    position: absolute;
    display: none;
}

.container input:checked ~ .checkmark:after {
    display: block;
}

.container .checkmark:after {
    left: 43%;
    top: -43%;
    width: 35%;
    height: 100%;
    border: solid #270663;
    border-width: 0 0.5vh 0.5vh 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/*End Check Mark CSS */

.textButton:hover {
    cursor: pointer;
}

#geoblock-error-icon {
    height: 40%;
    margin-bottom: 3%;
}

#geoblock-error-title {
    font-family: 'Noto Sans', sans-serif;
    font-size: 4.5vw;
    font-weight: 600;
    text-align: center;
    color: #270663;
    user-select: none;
    white-space: nowrap;
    width: 90%;
    height: 10%;
}

#geoblock-error-message {
    font-family: 'Noto Sans', sans-serif;
    font-size: 3.15vw;
    font-weight: 600;
    text-align: center;
    color: #270663;
    user-select: none;
    width: 90%;
    height: 15%;
}

.geoblock-error-cta-button {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    background-color: #ff5c14;
    width: 85%;
    height: 9vw;
    border-radius: 6.25vw;
    margin: 5%;
    box-shadow:
        0 0.1875rem 0 0 #d72902,
        0 0.1875rem 0 0.1875rem #5524b8,
        0 0 0 0.1875rem #5524b8;
}

.geoblock-error-cta-button:hover {
    background-color: #ff7d44;
    cursor: pointer;
}

#closeGeoblock {
    top: -10%;
}

/**
 * Copy over some stuff from top-bar.css, for the overlay container
 */
.overlay-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Web browsers that does not support RGBa */
    background: rgb(0, 0, 0);
    /* IE9/FF/chrome/safari supported */
    background: rgba(0, 0, 0, 0.9);
    /* IE 8 suppoerted */
    /* Here some time problem for Hover than you can use background color/image */
    -ms-filter: 'progid:DXImageTransform.Microsoft.gradient(startColorstr=#88000000, endColorstr=#88000000)';
    display: none;
    z-index: 11;
}

#overlay-container-foreground {
    z-index: 12;
}

/* Pre-existing Account Popup Class */
.popupPreexistingAccount #popupSmallBlank {
    height: 33vh;
    width: 51vh;
    background: white;
    border-radius: 2vh;
    border-style: none;
}

.lbv .popupPreexistingAccount #popupSmallBlank {
    background: #2d343c;
    border-style: none;
}

.popupPreexistingAccount #headerTextPosition {
    position: relative;
    margin-top: 3rem;
    font-size: 2.5vh;
}

#popupPreexistingAccountHeader,
#popupPreexistingAccountText {
    margin: 0 2rem;
    margin-top: 3rem;
    font-size: 2.5vh;
}

#popupPreexistingAccountText {
    margin-top: 1rem;
    font-size: 2.25vh;
}

#popupPreexistingAccountButton {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    background-color: #ff7b1b;
    width: 100%;
    height: 5.5vh;
    border-radius: 6.25vh;
    margin: 1.25vh;
}

.lbv #popupPreexistingAccountButton {
    background-color: #efb433;
}

.popupPreexistingAccount .buttonTextWhite {
    font-size: 1.8vh;
}

#login-container {
    position: relative;
    width: min(100%, 22.75rem);
    height: min(100%, 20.5rem);
    margin-left: auto;
    margin-right: auto;
}

/* Mobile and Tablet */
@media only screen and (max-width: 48rem) {
    #login-container {
        width: min(100%, 20.5rem);
        height: min(100%, 19.3125rem);
    }
}

#confirmation-container {
    display: none;
    position: relative;
    width: min(100%, 30.75rem);
    height: min(100%, 24.125rem);
    margin-left: auto;
    margin-right: auto;
}

#deleted-container {
    position: relative;
    width: min(100%, 30.75rem);
    margin-left: auto;
    margin-right: auto;
    top: 0;
}

#delete-deleted-title {
    font-family: 'Noto Sans', 'Roboto', sans-serif;
    font-size: 1.5625rem;
    font-weight: 800;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.28;
    letter-spacing: normal;
    color: #431aa2;
    margin-top: 2.5rem;
}

.lbv #delete-deleted-title {
    color: #ffffff;
}

#delete-deleted-message {
    font-family: 'Noto Sans', sans-serif;
    width: calc(100% - 1.5rem);
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.33;
    letter-spacing: 0.029375rem;
    color: #431aa2;
    text-align: center;
    margin-top: 1rem;
    margin-bottom: 2.5rem;
}

.lbv #delete-deleted-message {
    color: #ffffff;
}