html {
    overflow: auto;
}

body {
    text-align: center;
    vertical-align: middle;
    background-color: #FFFFFF;
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px
}

a {
    text-decoration: underline;
}
.height100 {
    height: 100vh;
}
.ob-bg {
    background: #eee url('../../Interface/images/new/web-main.jpg') no-repeat center;
    width: 100%;
    background-size: cover;
}

.ob-side {
    width: 50vw;
    min-width: 500px;
    max-width: 580px;
    padding: 25px 2.5vw;
}

.form-style label:not(.select-more-info label) {
    display: block;
    font-weight: 700;
    margin-bottom: 8px;
}

.form-style label span {
    font-weight: normal;
    display: inline-block;
    margin-top: 5px;
}
input:not([type="submit"]):not([type="button"]):not([type="image"]):not([type="checkbox"]):not([type="tel"]) {
    padding: 9px 7px;
}
input:not([type="tel"]) {
    padding-top: 9px;
    padding-bottom: 9px;
}

#divToken, #divSmsToken {
    background-color: #eee;
    padding: 15px;
}
.gap1rem {
    gap: 1rem;
}
input[type=checkbox].categoryCheckBox {
    margin-top: 3px;
}
.Dots {
    list-style: none;
    padding: 0;
}

    .dots li {
        display: inline-block;
        margin: 0 5px;
        width: 11px;
        height: 11px;
        border-radius: 50%;
        background: #ccc;
    }

        .dots li[data-is-active] {
            background: #2CA2A8;
        }

ul.v-list li:before {
    content: "✔";
    display: inline-block;
    border-radius: 8px;
}

.category {
    padding: 10px;
    margin: 0 auto;
    width: 32%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 5px;
    border: 2px solid transparent;
}

    .category:hover {
        background-color: #eee;
    }

.categoryh4 {
    min-height: 48px;
    vertical-align: middle;
}

    .categoryh4 h4 {
        margin: 8px 0 0;
    }

.category.figure-click, .category.figure-click:hover {
    background-color: var(--highlight-row, #edf8fa);
    border: 2px solid #ace5e4;
}

.password-instructions {
    padding: 10px 15px;
    background-color: #333;
    color: #fff;
    position: absolute;
    top: -24px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(0px);
    border-radius: 5px;
    min-width: 290px;
}

    .password-instructions ul {
        font-size: 14px;
    }

.actions-list li {
    margin-bottom: 10px;
}

.password-instructions.show {
    opacity: 1;
    visibility: visible;
    animation: .3s forwards slide;
}

@keyframes slide {
    0% {
        transform: translateX(0px);
        opacity: 0;
    }

    100% {
        transform: translateX(10px);
        opacity: 1;
    }
}

.actions-list li.completed:before {
    content: "✔";
    display: inline-block;
    color: #82d282;
}

.actions-list li.completed {
    color: #b7b7b7;
}

/* show password */

.option__input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

#loginForm #passwordInput .option input {
    width: auto;
}

#phoneControl_0 {
    width: 100% !important;
}

.form-style .genBtn {
    padding: 7px 14px;
    font-size: 17px;
    width: auto;
    border-radius: 5px;
}


/* */

#dir-ltr body.main {
    font-size: 15px;
}

#dir-ltr .genBtn {
    padding: 8px 12px;
    font-size: 16px;
}

#dir-ltr .password-instructions {
    right: -305px;
}
#dir-rtl .password-instructions {
    left: -305px;
}

#dir-ltr .form-style label, #dir-ltr .form-style label span {
    font-size: 15px;
    text-align: left;
}
    #dir-rtl .form-style label, #dir-rtl .form-style label span {
        font-size: 15px;
        text-align: right;
    }

#dir-ltr ul.v-list li:before {
    margin-right: 10px;
}

#dir-ltr .v-list li {
    font-size: 17px;
    margin-bottom: 5px;
}

#dir-ltr .actions-list li:before {
    margin-right: 5px;
}
#dir-rtl .actions-list li:before {
    margin-left: 5px;
}
#dir-ltr .option {
    right: 12px;
}
#dir-rtl .option {
    left: 12px;
}
.option {
    bottom: 2px;
}


.otp-inputs {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.code-input {
    width: 40px;
    height: 50px;
    text-align: center;
    font-size: 22px;
    border: 2px solid #ccc;
    border-radius: 6px;
    outline: none;
    transition: border-color 0.2s;
}

    .code-input:focus {
        border-color: #6a67ff;
    }