body {
    background-color: #000000;
    margin: unset;
    font-family: 'Arial', sans-serif;
}

.authenticate-container {
    display: flex;
    width: 100%;
    height: 100vh;
}

.authenticate-card {
    margin: auto;
    background-color: #191c24;
    border-radius: 0.25rem;
    width: 300px;
    padding: 20px;
}

.logo-container {
    text-align: center;
}

.fields-container {
    margin-top: 1rem;
}

.extra-container {
    margin-top: 1rem;
}

.actions-container {
    margin-top: 1rem;
    text-align: right;
}

.msb-btn.msb-btn-secondary {
    background-color: #0d0d0d;
}

.msb-btn {
    align-items: center;
    background-color: #0090e7;
    border: 0;
    border-radius: 0.25rem;
    box-sizing: border-box;
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    font-family: -apple-system, system-ui, system-ui, "Segoe UI", Roboto, "Helvetica Neue", "Fira Sans", Ubuntu, Oxygen, "Oxygen Sans", Cantarell, "Droid Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Lucida Grande", Helvetica, Arial, sans-serif;
    font-size: 16px;
    justify-content: center;
    line-height: 1;
    max-width: 480px;
    min-height: 30px;
    min-width: 0px;
    overflow: hidden;
    padding: 0px;
    padding-left: 15px;
    padding-right: 15px;
    text-align: center;
    touch-action: manipulation;
    transition: background-color 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s, box-shadow 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s, color 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s;
    user-select: none;
    -webkit-user-select: none;
    vertical-align: middle;
    text-decoration: none;
}

.msb-btn.msb-btn-secondary:hover,
.msb-btn.msb-btn-secondary:focus {
    background-color: black;
    color: #ffffff;
}

.msb-btn.msb-btn-secondary:active {
    background: black;
    color: rgb(255, 255, 255, .7);
}

.msb-btn:hover,
.msb-btn:focus {
    background-color: #16437E;
    color: #ffffff;
}

.msb-btn:active {
    background: #09223b;
    color: rgb(255, 255, 255, .7);
}

.msb-btn:disabled {
    cursor: not-allowed;
    background: rgb(255 255 255 / 8%);
    color: rgb(255 255 255 / 30%);
}



.checkbox-wrapper-40 {
    --borderColor: #48c;
    --borderWidth: .125em;
}

.checkbox-wrapper-40 label {
    display: block;
    max-width: 100%;
    margin: 0 auto;
}

.checkbox-wrapper-40 input[type=checkbox] {
    -webkit-appearance: none;
    appearance: none;
    vertical-align: middle;
    background: #fff;
    font-size: 1.8em;
    border-radius: 0.125em;
    display: inline-block;
    border: var(--borderWidth) solid var(--borderColor);
    width: 1em;
    height: 1em;
    position: relative;
}

    .checkbox-wrapper-40 input[type=checkbox]:before,
    .checkbox-wrapper-40 input[type=checkbox]:after {
        content: "";
        position: absolute;
        background: var(--borderColor);
        width: calc(var(--borderWidth) * 3);
        height: var(--borderWidth);
        top: 50%;
        left: 10%;
        transform-origin: left center;
    }

    .checkbox-wrapper-40 input[type=checkbox]:before {
        transform: rotate(45deg) translate(calc(var(--borderWidth) / -2), calc(var(--borderWidth) / -2)) scaleX(0);
        transition: transform 200ms ease-in 200ms;
    }

    .checkbox-wrapper-40 input[type=checkbox]:after {
        width: calc(var(--borderWidth) * 5);
        transform: rotate(-45deg) translateY(calc(var(--borderWidth) * 2)) scaleX(0);
        transform-origin: left center;
        transition: transform 200ms ease-in;
    }

    .checkbox-wrapper-40 input[type=checkbox]:checked:before {
        transform: rotate(45deg) translate(calc(var(--borderWidth) / -2), calc(var(--borderWidth) / -2)) scaleX(1);
        transition: transform 200ms ease-in;
    }

    .checkbox-wrapper-40 input[type=checkbox]:checked:after {
        width: calc(var(--borderWidth) * 5);
        transform: rotate(-45deg) translateY(calc(var(--borderWidth) * 2)) scaleX(1);
        transition: transform 200ms ease-out 200ms;
    }

    .checkbox-wrapper-40 input[type=checkbox]:focus {
        outline: calc(var(--borderWidth) / 2) dotted rgba(0, 0, 0, 0.25);
    }

input.form-input {
    border: 1px solid #2c2e33;
    height: 1rem;
    font-weight: normal;
    font-size: 0.875rem;
    padding: 0.625rem 0.6875rem;
    background-color: #2A3038;
    border-radius: 2px;
    color: #ffffff;
    width: calc(100% - 1.250rem);
}

.input-container {
    margin-bottom: 0.5rem;
}

    .input-container > label {
        margin-bottom: 0.2rem;
        display: inline-block;
        color: white;
        font-size: 0.875rem;
    }

.terms-checkbox {
    display: flex;
    color: white;
    font-size: 0.875rem;
}

.terms-checkbox a {
    color: white;
}

    .terms-checkbox > div:last-child {
        transform: translateY(7px);
        margin-left: 0.2rem;
    }

.error-message-container {
    border-radius: 0.25rem;
    background-color: #bf5151;
    border: 1px solid red;
    margin-bottom: 0.75rem;
    color: white;
    font-size: 0.875rem;
}

.success-message-container {
    border-radius: 0.25rem;
    background-color: #467931;
    border: 1px solid green;
    margin-bottom: 0.75rem;
    color: white;
    font-size: 0.875rem;
}

.logo-container > img {
    height: 100px;
}

.captcha-container {
    margin-top: 1.5rem;
}

.hidden {
    display: none;
}

.default-text {
    margin-bottom: 0.75rem;
    color: white;
    font-size: 0.875rem;
    text-align: center;
}

.payment-plans > div:first-child {
    margin-top: 2rem;
}

.payment-plans > div {
    cursor: pointer;
    margin-bottom: 2rem;
    border: 1px solid lightgray;
    border-radius: 0.25rem;
    height: 80px;
    display: flex;
    color: white;
}

    .payment-plans > div.selected {
        box-shadow: 0px 0px 10px 3px #0090e7
    }

.payment-plans > div > div:first-child {
    flex: 4;
    margin: auto;
    text-align: center;
}

    .payment-plans > div > div:first-child > span:first-child {
        font-size: 3rem;
        font-weight: bold;
    }

.payment-plans > div > div:last-child {
    flex: 7;
    margin: auto;
}

.payment-plans > div > div:last-child > div:first-child {
    font-size: 0.75rem;
}

    .payment-plans > div > div:last-child > div:nth-child(2) {
        font-weight: bold;
        color: green;
    }


.mb {
    margin-bottom: 0.75rem;
}

.date-until-message > span:not(:first-child) {
    font-size: 1.5rem;
    font-weight: bold;
}

.date-until-message > span.old-date {
    text-decoration: line-through;
}

.date-until-message > span.promotion-date {
    color: green;
}

.observations-message {
    font-size: 0.75rem;
}

.promotion-message {
    color: green;
    font-weight: bold;
}
.best-option {
    margin-top: 0.2rem;
    width: 95px;
    text-align: center;
    background-color: #0090e7;
    color: white;
    padding: 1px;
    border-radius: 5px;
    font-size: 0.8rem;
}

.forgot-password-container {
    padding: 10px 5px;
    text-align: right;
}

.forgot-password-container a {
    color: white;
}

.info-page {
    color: #d3d3d3;
    width: 70%;
    height: calc(100vh - 40px);
    margin: 0 auto;
    padding: 20px;
    text-align: center;
}

.app-title {
    font-size: 30px;
    display: inline-block;
    transform: translateY(-38px);
}

.sub-title {
    font-size: 30px;
    text-decoration: underline;
    margin: 50px 0;
}

.section-title {
    text-align: left;
    margin: 30px 0;
}

.section-paragraph {
    text-align: justify;
    font-style: italic;
}