/* Shared styles */

#login-fragment .login-button {
    display: inline-block;
    color: #212529;
    height: 48px;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: none;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    font-weight: bold;
    padding: 0px 31px;
    line-height: 48px;
    border: none;
    border-radius: 25px;
    font-size: 14px;
}

#login-fragment .login-button:hover {
    background-color: #FF0818;
    color: #ffffff;
}

#login-fragment .btn-red {
    background-color: #E30613;
    color: #fff;
}

#login-fragment .btn-light {
    color: black;
    background-color: #F0F1F1;
}

#login-fragment .btn-light:hover {
    color: black;
    background-color: #D3D4D4;
}

#login-fragment .btn-empty {
    border: 1px solid #D3D4D4;
    color: black;
    background-color: #FFFFFF;
}

#login-fragment .btn-empty:hover {
    border: 1px solid black;
    color: black;
    background-color: #FFFFFF;
}

#login-fragment .icon-arrow-left {
    width: 6px;
    height: 12px;
    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%226.30008%22%20height%3D%2211.80146%22%20viewBox%3D%220%200%206.30008%2011.80146%22%3E%3Cpath%20d%3D%22M5.40051%2C11.80146a.89821.89821%2C0%2C0%2C1-.66943-.29785l-4.5-5a.90108.90108%2C0%2C0%2C1%2C0-1.20507l4.5-5A.9003.9003%2C0%2C0%2C1%2C6.069%2C1.50361L2.111%2C5.90107l3.958%2C4.39747a.90065.90065%2C0%2C0%2C1-.66846%2C1.50292Z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
}

#login-fragment input[type=text],
#login-fragment input[type=email],
#login-fragment input[type=password] {
    display: block;
    width: 100%;
    padding: 14px 12px;
    color: black;
    background-color: #fff;
    border: 1px solid #ced4da;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    border-radius: 6px;
}

#login-fragment input[type=text]:focus,
#login-fragment input[type=email]:focus,
#login-fragment input[type=password]:focus {
    outline: none;
    border: 1px solid black;
}

#login-fragment .short-input {
    max-width: 340px;
}

/* Shared Layout */

#login-fragment h1 {
    font-size: 22px;
}

#login-fragment span, a {
    line-height: 1.5;
    letter-spacing: 0.42px;
}

#login-fragment html, input, button {
    font-size: 14px;
    letter-spacing: 0.42px;
}

#login-fragment label {
    letter-spacing: 0.42px;
}

#login-fragment form {
    width: 100%;
    display: flex;
    flex-direction: column;
}

#login-fragment {
    padding: 0 20px;
    font-family: Roboto, Arial, Helvetica, sans-serif;
    display: flex;
    flex-direction: column;
    margin: auto;
    margin-top: 110px;
    min-height: 100vh;
}

#login-fragment h1 {
    margin-top: 0px;
    margin-bottom: 9px;
    letter-spacing: 1px;
}

#login-fragment .button-holder {
    text-align: right;
    margin-top: 20px;
}

#login-fragment .login-fragment-body {
    display: flex;
    gap: 80px;
    align-items: stretch;
    margin-top: 20px;
    justify-content: space-between;
}

#login-fragment .login-fragment-body-card {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    width: 366px;
    padding: 56px 56px 56px 56px;
    border: 1px solid lightgray;
    border-radius: 25px;
    flex-grow: 1;
}

    #login-fragment .login-fragment-body-card button,
    #login-fragment .login-fragment-body-card a:last-child {
        box-sizing: border-box;
        margin-top: auto;
    }

#login-fragment .subtext {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 14px;
}

#login-fragment .field.password {
    padding-top: 5px !important;
}

#login-fragment .field:first-child {
    padding-top: 0;
}

#login-fragment .field {
    padding-top: 26px;
    margin-right: 25px;
}

    #login-fragment .field label {
        display: block;
        font-weight: bold;
        margin-bottom: 6px;
        font-size: 13px;
    }

#login-fragment .invalid-feedback {
    font-weight: bold;
    font-size: 12px;
    margin-bottom: 6px;
    width: 100%;
    margin-top: 1em;
    color: #dc3545
}

#login-fragment #invalid-feedback-loginerror {
    margin-top: 10px;
    margin-bottom: 15px;
}

#login-fragment .invalid-feedback-password {
    margin-bottom: 10px;
}

#login-fragment {
    width: 1040px;
}

#login-fragment .fragment-card-fw label {
    padding-right: 40px;
    font-weight: bold;
}

#login-fragment .fragment-card-fw .input-group {
    margin-top: 50px;
}

@media (max-width: 1138px) {

#login-fragment .login-fragment-body-card.register,
#login-fragment .login-fragment-body-card {
    min-width: unset;
    width: calc(100% - 72px);
    padding: 36px;
}

#login-fragment .button-holder {
    display: flex;
    text-align: inherit;
    width: 100%;
}

#login-fragment .button-holder input,
#login-fragment .button-holder a {
            width: 100%;
            margin-top: auto;
        }
}

@media (max-width: 992px) {

    #login-fragment {
        margin-top: 20px;
    }

    #login-fragment h1 {
        font-size: 20px;
    }

    #login-fragment span {
        font-size: 13px;
    }

    #login-fragment .main-page-button {
        margin-top: 20px;
        width: 100%;
    }
}

#login-fragment .invalid-input {
    border-color: red;
}

/* Login */

#login-fragment.login-page .login-fragment-passwordlost {
    padding-bottom: 25px;
    text-decoration: underline;
    color: black;
    font-weight: bold;
    font-weight: bold;
    display: block;
    margin-top: 12px;
}

#login-fragment.login-page .invalid-feedback-loginerror {
    padding-bottom: 20px;
}

#login-fragment.login-page .invalid-feedback {
    font-size: 12px;
    display: block;
}

#login-fragment.login-page .field.password {
    padding-top: 8px;
}

#login-fragment.login-page .main-page-button {
    margin-top: 40px;
    width: 100%;
}

#login-fragment.login-page span ul {
    list-style-type: none;
    padding: 0;
    position: relative;
    left: 2.5em;
}

#login-fragment.login-page span ul li {
    line-height: 1.8;
    padding-left: 0.3em;
    text-indent: -1em
}

#login-fragment.login-page span ul li::before {
    content: '\2714';
    color: #70a848;
    position: relative;
    left: -0.5em;
}

#login-fragment.login-page .back-button {
    display: flex;
    border-radius: 25px;
    cursor: pointer;
    width: fit-content;
    height: 48px;
    margin: 30px 0 30px 0;
    align-items: center;
    justify-content: center;
    padding: 0 30px 0 30px;
}

#login-fragment.login-page .back-button-text {
    display: flex;
    align-items: center;
    gap: 12px;
}

#login-fragment.login-page .button-text-content {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.3px;
}

@media (max-width: 992px) {

    #login-fragment.login-page .login-fragment-body {
        flex-direction: column;
        gap: 35px;
    }

    #login-fragment.login-page .main-page-button {
        margin-top: 20px;
    }

    #login-fragment.login-page .back-button {
        width: auto;
    }
}


/* ResetPassword */

#login-fragment.reset-password .field {
    flex-direction: column;
    margin-right: 25px;
    margin-top: unset;
}

#login-fragment.reset-password input[type=submit] {
    float: right;
}

#login-fragment.reset-password .field {
    margin-right: 0;
}

#login-fragment.reset-password .field > div {
    width: 100%;
}

#login-fragment label {
    width: 200px;
}

#login-fragment.reset-password .fragment-card-fw label {
    padding-top: 16px;
    padding-right: 40px;
}

#login-fragment.reset-password .back-button {
    display: inline-flex;
    vertical-align: middle;
    border-radius: 25px;
    text-decoration: none;
    cursor: pointer;
    width: fit-content;
    height: 48px;
    padding: 0 30px 0 30px;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

#login-fragment.reset-password .back-button-text {
    display: flex;
    align-items: center;
    gap: 12px;
}

#login-fragment.reset-password .button-text-content {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.3px;
}

#login-fragment.reset-password input.invalid {
    border-color: red;
}

#login-fragment.reset-password #resetpassword-card {
    max-width: 975px;
}

#login-fragment.reset-password #resetpassword-email-label {
    margin-top: 15px;
}

#login-fragment.reset-password #resetpassword-buttons {
    margin-top: 70px;
}

#login-fragment.reset-password #resetpassword-after {
    line-height: 1.5;
}

#login-fragment.reset-password #resetpassword-card span p {
    margin-top: 0;
    margin-bottom: 0;
}

#login-fragment.reset-password .success-header {
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0.02em;
    font-weight: 700;
    color: #70A848;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

#login-fragment.reset-password .icon-check-green {
    width: 20px;
    height: 20px;
    margin-right: 9px;
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2721%27%20height%3D%2720%27%20viewBox%3D%270%200%2021%2020%27%20fill%3D%27none%27%20xmlns%3D%27http://www.w3.org/2000/svg%27%3E%3Cg%20clip-path%3D%27url(%23clip0_143_4)%27%3E%3Cpath%20d%3D%27M10.1489%200C8.17112%200%206.23772%200.58649%204.59323%201.6853C2.94874%202.78412%201.66701%204.3459%200.910135%206.17317C0.153259%208.00043%20-0.0447747%2010.0111%200.341077%2011.9509C0.72693%2013.8907%201.67934%2015.6725%203.07786%2017.0711C4.47639%2018.4696%206.25822%2019.422%208.19803%2019.8079C10.1378%2020.1937%2012.1485%2019.9957%2013.9758%2019.2388C15.803%2018.4819%2017.3648%2017.2002%2018.4636%2015.5557C19.5624%2013.9112%2020.1489%2011.9778%2020.1489%2010C20.1489%208.68678%2019.8903%207.38642%2019.3877%206.17315C18.8852%204.95989%2018.1486%203.8575%2017.22%202.92891C16.2914%202.00032%2015.189%201.26373%2013.9758%200.761186C12.7625%200.258642%2011.4622%20-9.1924e-06%2010.1489%200Z%27%20fill%3D%27%2370A848%27/%3E%3Cpath%20d%3D%27M8.71609%2014.4005C8.47744%2014.4004%208.24859%2014.3056%208.07986%2014.1368L4.74441%2010.8018C4.57701%2010.6328%204.48335%2010.4043%204.48389%2010.1664C4.48443%209.92854%204.57913%209.70053%204.74729%209.53224C4.91545%209.36396%205.14339%209.26909%205.38129%209.26838C5.61919%209.26766%205.8477%209.36116%206.01687%209.52843L8.67654%2012.1876L14.2434%205.90343C14.4017%205.72472%2014.6244%205.61619%2014.8627%205.60172C15.101%205.58725%2015.3352%205.66803%2015.5139%205.82628C15.6927%205.98453%2015.8012%206.20729%2015.8156%206.44556C15.8301%206.68382%2015.7493%206.91808%2015.5911%207.09679L9.38992%2014.0968C9.30843%2014.1886%209.20907%2014.2628%209.0979%2014.3148C8.98674%2014.3669%208.86612%2014.3957%208.74343%2014.3995L8.71609%2014.4005Z%27%20fill%3D%27white%27/%3E%3C/g%3E%3Cdefs%3E%3CclipPath%20id%3D%27clip0_143_4%27%3E%3Crect%20width%3D%2720%27%20height%3D%2720%27%20fill%3D%27white%27%20transform%3D%27translate(0.148926)%27/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
}

#login-fragment.reset-password .success-body {
    font-size: 16px;
    line-height: 26px;
}

#login-fragment.reset-password .resetpassword-divider {
    height: 1px;
    background: #D3D4D4;
    border: none;
    margin: 56px 0;
    width: 100%;
}

#login-fragment.reset-password .reminder-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: 0.02em;
}

#login-fragment.reset-password .reminder-list {
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 0.02em;
    padding-left: 20px;
}

#login-fragment.reset-password .reminder-list li {
    margin-bottom: 24px;
    font-size: 1em;
    line-height: 1.6;
}

#login-fragment.reset-password p {
    margin: 0px;
}

#login-fragment.reset-password .reminder-list b,
#login-fragment.reset-password .success-body b {
    font-weight: 600;
}

#login-fragment.reset-password .reminder-link {
    color: #999999;
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 0.02em;
    text-decoration: underline;
    font-weight: 400;
}

#login-fragment.reset-password .reminder-link:hover {
    color: #111;
    text-decoration: underline;
}

@media (max-width: 1138px) {
    #login-fragment.reset-password .button-holder {
        display: block !important;
        text-align: right !important;
        width: auto !important;
    }

    #login-fragment.reset-password .button-holder input,
    #login-fragment.reset-password .button-holder a {
            width: auto !important;
            margin-top: 0 !important;
        }

    #login-fragment.reset-password .button-holder {
        text-align: right;
        margin: 0px;
    }
}

@media (max-width: 992px) {

    #login-fragment.reset-password #Email {
        width: 100%;
    }

    #login-fragment.reset-password .field {
        flex-direction: column;
        margin-right: 25px;
        margin-top: unset;
    }

    #login-fragment.reset-password label {
        width: 100%;
    }

    #login-fragment.reset-password input[type="submit"] {
        margin-bottom: 0;
    }

    #login-fragment.reset-password #resetpassword-card {
        padding-left: 36px;
    }

    #login-fragment.reset-password .success-header,
    #login-fragment.reset-password .reminder-title {
        font-size: 16px;
        line-height: 24px;
    }

    #login-fragment.reset-password .success-body {
        font-size: 14px;
        line-height: 22px;
    }

    #login-fragment.reset-password .reminder-list,
    #login-fragment.reset-password .reminder-link {
        font-size: 14px;
        line-height: 24px;
    }

    #login-fragment.reset-password .resetpassword-divider {
        height: 1px;
        background: #D3D4D4;
        border: none;
        margin: 28px 0;
        width: 100%;
    }
}

@media (max-width: 420px) {
    #login-fragment .login-button {
        padding: 0 20px;
    }

    #login-fragment.reset-password .back-button {
        padding: 0 20px;
    }
}

@media (max-width: 400px) {
    #login-fragment.reset-password {
        margin-bottom: 30px;
    }
}

/* UpdatePassword */

#login-fragment.update-password #esp-reset-invalid-card .invalid-feedback {
    font-size: 14px;
}

#login-fragment.update-password span ul li {
    line-height: 1.5;
}

#login-fragment.update-password form span p {
    margin: 0;
}

.update-password .field {
    max-width: 400px;
}


/* Rest of Shared Styles */
main {
    display: flex;
    flex-grow: 1;
    flex: 1;
    overflow-y: auto;
    justify-content: center;
}

.container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

div.mkt-footr-scope.mkt-es {
    flex-shrink: 0;
}