@charset "utf-8";

.login-assistance-text p {
    margin-bottom: 1.1em;
    text-indent: 0;
    padding-left: 1.2em;
}

.login-assistance-text a {
    color: #17a0b0;
    text-decoration: none;
}

.login-assistance-text a:hover {
    text-decoration: underline;
}

.login-assistance-text {
    margin: -3em auto 1em;
    min-width: 500px;
    color: #7f7f7f;
}

@media (min-width: 500px) {
    .login-assistance-text {
        font-size: 16px;
    }
}

@media (min-width: 768px) {
    .login-assistance-text {
        font-size: 17px;
        width: 80%;
    }
}

@media (min-width: 992px) {
    .login-assistance-text {
        font-size: 18px;
        width: 65%;
    }
}

/* Default values for items that can be customized */
[data-tag*="styles:input"],
[data-tag*="styles:prominent_button"] {
    --light-background-color: #F9F9F9;
    --light-text-color: #000;
    --light-border-color: #0C7788;

    --dark-background-color: var(--light-background-color);
    --dark-text-color: var(--light-text-color);
    --dark-border-color: var(--light-border-color);

    --light-disabled-background-color: var(--light-background-color);
    --light-disabled-opacity: 0.25;
    --dark-disabled-background-color: var(--light-disabled-background-color);
    --dark-disabled-opacity: var(--light-disabled-opacity);

    background-color: var(--light-background-color);
    color: var(--light-text-color);
    border: 1px solid var(--light-border-color);
}

body.nnl-dark-mode [data-tag*="styles:input"],
body.nnl-dark-mode [data-tag*="styles:prominent_button"] {
    background-color: var(--dark-background-color);
    color: var(--dark-text-color);
    border-color: var(--dark-border-color);
}

[data-tag*="styles:prominent_button"][disabled]{
    background-color: var(--light-disabled-background-color);
    opacity: var(--light-disabled-opacity);
}

body.nnl-dark-mode [data-tag*="styles:prominent_button"][disabled] {
    background-color: var(--dark-disabled-background-color);
    opacity: var(--dark-disabled-opacity);
}

[data-tag*="styles:input"] {
    --light-background-color: #00000000;
    --light-text-color: #313940;
    --light-border-color: #D5D3D3;
    --dark-text-color: #ffffff;

    border-width: 2px;
    border-radius: 10px;
}


[data-tag*="styles:prominent_button"] {
    --light-background-color: #F9F9F9;
    --light-text-color: #0C7788;

    border-radius: 10px;
}

[data-tag*="styles:view_background"]{
    background-color: var(--light-background-color);
}

body.nnl-dark-mode [data-tag*="styles:view_background"]{
    background-color: var(--dark-background-color);
}

[data-tag*="styles:view_background"] {
    --light-background-color: #00000000;
    --dark-background-color: #00000000;
}

[data-tag*="styles:title"] {
    --light-text-color: #313940;
    --dark-text-color: #ffffff;
}

body.nnl-dark-mode [data-tag*="styles:title"] {
    color: var(--dark-text-color);
}

[data-tag*="images:next_button"] {
    --light-image: url('../img/right_arrow.png');
}

[data-tag*="images:"] {
    --dark-image: var(--light-image);
    background-image: var(--light-image);
    background-repeat: no-repeat;
}

body.nnl-dark-mode [data-tag*="images:"] {
    background-image: var(--dark-image);
}

/* Default font size for all elements in the SDK views. */
[data-tag*="level:"] * {
    font-size: 1rem;
}

.nnl-input {
    display: block;
    padding: 5px 20px;
    font-weight: 400;
    line-height: 1.5;
    margin: 10px auto;
    box-sizing: border-box;
}

.nnl-button {
    display: block;
    cursor: pointer;
    padding: 5px 20px;
    margin: 15px auto 5px;
    box-shadow: none;
}

.nnl-button[disabled] {
    pointer-events: none;
}

.nnl-sign-in-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nnl-page-title {
    font-weight: bold;
    font-size: 1.250rem;
    line-height: 1.5em;
}

.nnl-sign-in-page-wrapper {
    position: relative;
    padding: 0 20px;
}

.nnl-icon-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 50px;
}

.nnl-icon-button .nnl-next-icon {
    width: 19px;
    height: 13px;
}

.nnl-sign-in-container .nnl-input,
.nnl-sign-in-container .nnl-button {
    width: 100%;
    min-height: 54px;
}

/* Toast message */
#nnl-toast {
    display: none;
}
.nnl-toast {
    position: fixed;
    bottom: 10%;
    right: 10%;
    left: 10%;
    background: rgba(0,0,0, 0.7);
    padding: 10px;
    text-align: center;
    overflow-wrap: break-word;
    border-radius: 4px;
    z-index: 1180;
    color: white;
    opacity: 0;
    transition: opacity 0.2s linear;
}
.nnl-toast.nnl-toast-visible {
    transition: opacity 0.2s linear, margin-bottom 0.2s 0.1s ease-out;
}

input[type=text]:focus,
input[type=tel]:focus,
input[type='number']:focus,
input[type=checkbox]:focus,
input[type='password']:focus {
    outline-color: #e0e0e0;
}