html {
    font-size: 0.9rem; /* 16px -> 14px */
}
body {
    font-family: "Open Sans", sans-serif;
    background-color: #F2F2F2;
    color: #333333;
    /* font-size: 80%; */
}
html, body {
    margin: 0;
    padding: 0;
}
.l-container {
    height: 100vh;
    width: var(--login-width);
    margin: auto;
    position: relative;
}
.l-container,
.l-container form {
    display: flex;
    flex-flow: column;
    align-items: center;
    gap: var(--login-vertical-space);
}
.l-container input[type="text"],
.l-container input[type="password"],
.l-container input[type="email"] {
    min-height: 40px;
    width: 100%;
    /* border-radius: 5px; vuetify */
    border-radius: 13px;
    border: 1px solid #CCCCCC;
    border-collapse: collapse;
    caret-color: #333333;
    color: #333333;
    padding: 8px 13px;
    background-color: white;
    box-sizing: border-box;
    /* box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%); /* vuetify */
    font-family: "Open Sans", sans-serif;
    font-weight: 500;
}
.l-container input[type="text"]:focus,
.l-container input[type="password"]:focus,
.l-container input[type="email"]:focus {
    /* outline-color: var(--primary);
    outline-width: 1px;
    outline-offset: 1px;
        */
    border-color: var(--primary);
    outline: none;
    box-shadow: 0px 3px 6px #00000029;
}
/*^ .l-container input[type="email"]:invalid */
.l-container input.l-input-error,
.l-container input[type="text"].l-input-error:focus,
.l-container input[type="password"].l-input-error:focus,
.l-container input[type="email"].l-input-error:focus {
    border-color: var(--red-error);
}
.l-container label {
    font-weight: 600;
    color: #333333;
    margin-bottom: 5px;
    display: block;
}
.l-error {
    min-height: 40px;
    width: 100%;
    background-color: rgba(255,0,0,0.2);
    font-weight: normal;
    background-position: left;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23FF0000" class="bi bi-exclamation-lg" viewBox="0 0 16 16"> <path d="M7.005 3.1a1 1 0 1 1 1.99 0l-.388 6.35a.61.61 0 0 1-1.214 0L7.005 3.1ZM7 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0Z"/> </svg>');
    background-repeat: no-repeat;
    background-size: 25px;
    padding: 10px 10px 10px 24px;
    border-radius: 13px;
    box-sizing: border-box;
}
.l-container > div.l-error {
    text-align: left;
}
.l-error-text {
    padding-top: 5px;
    color: var(--red-error);
    text-align: center;
    font-size: 0.8rem;
}
.field-validation-error {
    color: var(--red-error);
    font-size: 0.8rem;
}
.l-error a {
    color: black;
    font-weight: bold;
}
.l-logo {
    padding: var(--login-vertical-space) 0 0 0;
    width: var(--login-width-logo);
}
.l-title {
    font-weight: bold;
    font-size: 1.2rem;
}
.l-container .l-error a {
    color: black;
}
.l-password-show {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
}
.l-show {
    color: var(--primary);
    text-decoration: none;
    cursor: pointer;
    font-weight: bold;
}
.l-show:hover,
.l-show:focus {
    color: var(--accent);
    text-decoration: none;
    cursor: pointer;
}
.l-show svg {
    fill: var(--primary);
    vertical-align: middle;
}
.l-show svg:hover,
.l-show svg:focus {
    fill: var(--accent);
}
.l-btn {
    width: 100%;
    height: 40px;
    min-height: 42px;
    color: white;
    font-weight: bold;
    font-size: 1.2rem;
    font-family: "Open Sans", sans-serif;
    background-color: var(--primary);
    border: solid 1px var(--primary);
    box-shadow: 0px 3px 6px #00000029;
    border-radius: 13px;
    border: none;
    cursor: pointer;
    padding: 0;
}
.l-btn:hover,
.l-btn:focus {
    background-color: var(--accent);
}
.l-btn:disabled {
    cursor: not-allowed;
    background-color: var(--primary-light);
    box-shadow: none;
}
.l-container > div,
.l-container > form,
.l-container > form > div,
.l-container > form > fieldset {
    width: 100%;
}
.l-container > div {
    text-align: center;
} 
.l-container a {
    color: var(--primary);
    cursor: pointer;
    font-weight: bold;
}
.l-container a:hover,
.l-container a:focus {
    color: var(--accent);
}
.l-back,
.l-back:hover,
.l-back:focus {
    text-decoration: none;
    background-repeat: no-repeat;
    background-position: left;
    background-size: 1.4rem;
    padding-left: 1.2rem;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%233BADEA" class="bi bi-chevron-left" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z" /> </svg>');
}
.l-back:hover,
.l-back:focus {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23155C82" class="bi bi-chevron-left" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z" /> </svg>');
}
.l-footer {
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column-reverse;
}
.l-footer-text {
    width: 100%;
    font-size: 0.7rem;
    color: #999999;
    font-weight: bold;
    padding-bottom: 10px;
}
#hidePassword {
    display: none;
}
.l-modal-header {
    background-color: var(--accent);
    color: white;
    font-weight: bold;
}
#divCaptcha,
.l-center {
    text-align: center;
    text-align: -webkit-center;
    text-align: -moz-center;
}
#divCaptcha {
    min-height: 78px;
}
.l-input-error {
    color: var(--red-error);
}
.l-over{
    position: fixed;
    display: none;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10;
    background-color: #F2F2F2;
}
.l-spinner {
    position: fixed;
    display: none;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%233BADEA" class="bi bi-arrow-clockwise" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/> <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/> </svg>');
    background-repeat: no-repeat;
    background-size: 200px;
    background-position: center;
    background-color: rgb(128, 128, 128, 0.2);
    z-index: 10;
}
.l-circle-white,
.l-circle-background {
    width: var(--login-width-logo);
    height: var(--login-width-logo);
    border-radius: 50%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.l-circle-white {
    background-color: white;
}
.l-circle-background {
    background-color: var(--primary-light);
}
.l-circle-background-green {
    background-color: var(--green);
}
.l-circle-white img,
.l-circle-background img {
    width: calc(var(--login-width-logo)*0.6);
}
ul.l-list {
    list-style: none;
    text-align: left;
    padding-inline-start: 25px;
}
.l-list li::before {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="%233BADEA" class="bi bi-circle-fill" viewBox="0 0 16 16"> <circle cx="8" cy="8" r="8"/> </svg>'); /* "\2022";   color: var(--primary); */
    display: inline-block;
    width: 1rem;
    margin-left: -1rem;
}
.l-list li {
    margin-bottom: 10px;
}
#l-pswd-requirements {
    /* position: absolute;
    top: 250px;
    right: -455px; /* l-container width + 5px;*/
    text-align: left;
    font-size: 1rem;
}
.l-pswd-requirements-title {
    font-weight: 600;
    padding-left: 20px;
}
#l-pswd-requirements ul {
    list-style-type: none;
    padding: 0;
    margin-bottom: 0;
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
}
#l-pswd-requirements li {
    padding-left: 1.7rem;
    white-space: nowrap;
    font-size: 0.95rem;
    line-height: 1.8rem;
    background-repeat: no-repeat;
    background-position: left;
}
#l-pswd-requirements li:not(.l-pswd-requirement-ok) {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16.611" height="14" fill="%23CCCCCC" viewBox="0 0 16.611 14"> <path id="Path_70" data-name="Path 70" d="M51.84,30.665l-1.053-.948a1.059,1.059,0,0,0-1.5.078l-8.358,9.283-2.813-2.533a1.059,1.059,0,0,0-1.5.078l-.772.857a1.059,1.059,0,0,0,.078,1.5l2.813,2.533-.005.006,1.84,1.657a1.06,1.06,0,0,0,1.5-.078l9.844-10.933A1.059,1.059,0,0,0,51.84,30.665Z" transform="translate(-35.579 -29.445)"/> </svg>');
    background-size: 1rem;
    color: #666666;
}
.l-pswd-requirement-ok {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16.611" height="14" fill="%2382b232" viewBox="0 0 16.611 14"> <path id="Path_70" data-name="Path 70" d="M51.84,30.665l-1.053-.948a1.059,1.059,0,0,0-1.5.078l-8.358,9.283-2.813-2.533a1.059,1.059,0,0,0-1.5.078l-.772.857a1.059,1.059,0,0,0,.078,1.5l2.813,2.533-.005.006,1.84,1.657a1.06,1.06,0,0,0,1.5-.078l9.844-10.933A1.059,1.059,0,0,0,51.84,30.665Z" transform="translate(-35.579 -29.445)"/> </svg>');
    background-size: 1rem;
}
.l-description {
    color: #666666;
}
.l-container input[type="text"].l-input-digit { 
    display: inline;
    font-size: 1rem;
    width: 40px;
    text-align: center;
    border-radius: 5px;
    margin-left: 2px;
    margin-right: 2px;
}
/*
body {
    font-weight: bold;
    font-family: sans-serif;
    background-color: #F2F2F2;
}

.headercolor {
    color: black;
    font-family: sans-serif;
    font-size: 36px;
    font-weight: bold;
}


.headertwostyles {
    font-family: sans-serif;
    font-weight: bold;
    font-size: 28px;
}

.loginheaderfonts {
    font-family: sans-serif;
    font-weight: bold;
    font-size: 30px;
}

.textstyle {
    padding: 12px 20px;
    margin: 8px 0px;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    max-width: 450px;
    font-size: 18px;
    font-family: sans-serif;
}

    .textstyle:hover {
        box-shadow: 0 0 5px rgba(81, 203, 238, 1);
        border: 1px solid rgba(81, 203, 238, 1);
    }

.customizebtnrequest {
    border-color: red;
    padding: 12px 55px;
    font-size: 30px;
    line-height: 1.42;
    border-radius: 6px;
    color: red;
}

    .customizebtnrequest:hover {
        color: White;
        background-color: #145C82;
        border-radius: 5px;
        -moz-box-shadow: 0 1px 3px 0 rgba(60,64,67,0.302), 0 4px 8px 3px rgba(60,64,67,0.149);
        -webkit-box-shadow: 0 1px 3px 0 rgba(60,64,67,0.302), 0 4px 8px 3px rgba(60,64,67,0.149);
        box-shadow: 0 9px 9px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19)
    }


.contentcenter {
    padding-left: 35%;
}

.margintopstyle {
    padding-top: 25px;
}

div {
    background-color: #f2f2f2;
    border-radius: 4px;
    font-weight: bold;
}

#content {
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    top: 7px;
    font-weight: bold;
    padding-top: 1px;
    padding-bottom: 0px;
    align-content: center;
}

.btncolor {
    color: White;
    background-color: #3498db !important;
    cursor: pointer;
    width: 450px;
    text-align: center;
    margin: 8px 0;
    font-weight: bold;
    padding: 14px 20px;
    font-size: 30px;
    font-family: sans-serif;
}

    .btncolor:hover {
        color: White;
        background-color: #2384c6 !important;
        border-radius: 5px;
        -moz-box-shadow: 0 1px 3px 0 rgba(60,64,67,0.302), 0 4px 8px 3px rgba(60,64,67,0.149);
        -webkit-box-shadow: 0 1px 3px 0 rgba(60,64,67,0.302), 0 4px 8px 3px rgba(60,64,67,0.149);
        box-shadow: 0 9px 9px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
    }

.warning {
    background: #fff0f7;
    border: 1px solid red;
    font-size: 18px;
    padding: 5px;
    font-weight: bold;
}

.resetemail {
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    margin-top: 8%;
    border-radius: 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border: 1px solid rgba(81, 203, 238, 1);
}

.customizebtn {
    padding: 12px 52px;
    font-size: 30px;
    line-height: 1.42;
    border-radius: 6px;
    color: #2384c6;
    background-color: #fff;
    border-color: #ccc;
}

    .customizebtn:hover {
        color: White;
        background-color: #2384c6;
        border-radius: 5px;
        -moz-box-shadow: 0 1px 3px 0 rgba(60,64,67,0.302), 0 4px 8px 3px rgba(60,64,67,0.149);
        -webkit-box-shadow: 0 1px 3px 0 rgba(60,64,67,0.302), 0 4px 8px 3px rgba(60,64,67,0.149);
        box-shadow: 0 9px 9px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
    }

.error {
    color: red;
    width: 65%
}
    */
/*media form mobile*/
@media only screen and (max-width: 768px) {
    .textstyle {
        max-width: 100%;
    }

    .error {
        width: 100% !important;
    }

    .customizebtn {
        max-width: 100% !important;
    }

    .btncolor {
        max-width: 100% !important;
    }
}