@import url('https://rsms.me/inter/inter-ui.css');

::selection {
    background: #2D2F36;
}

::-webkit-selection {
    background: #2D2F36;
}

::-moz-selection {
    background: #2D2F36;
}

.page {
    background: #e2e2e5;
    display: flex;
    flex-direction: column;
    height: calc(100% - 50px);
    position: absolute;
    place-content: center;
    width: calc(100% - 50px);
    left: -100px;
    top: 100px;
}

.container {
    display: flex;
    height: 450px;
    width: 750px;
    margin: 0 auto;
}

@media (max-width: 1023px) {
    .page {
        top: 50px !important;
    }
}

@media (max-width: 768px) {
    .page {
        width: 98%;
        left: 1%;
        top: 50px !important;
        height: 575px !important;
        margin: 0;
        padding: 0;
    }

    .container {
        flex-direction: column;
        width: 100% !important;
        height: 100%;
        top: 0px;
        left: 0px;
        padding: 0;
    }
}

.left {
    background: white;
    height: calc(100% - 100px);
    position: relative;
    top: 50px;
    width: 55%;
}

.eula {
    font-size: 18px;
    line-height: 1.5;
    margin: 25px 15px;
}

.login {
    font-weight: 900;
    padding-top: 15px;
    padding-left: calc(40% / 2);
}

@media (max-width: 768px) {
    .left {
        width: 100%;
        left: 0px;
        top: 0px;
    }

    .eula {
        width: 200px;
        margin: 15px 15px;
    }

    .login {
        margin-top: 0px;
        left: calc(20% / 2);
    }

    .left .actions {
        float: right;
        margin-top: -45px;
        padding-right: calc(10% / 2);
        padding-bottom: 0px;
        margin-bottom: 0px;
    }

    .notify {
        font-size: 12px;
        padding-bottom: 25px;
    }
}

@media (max-width: 414px) {
    .eula {
        width: 200px;
        margin: 5px 15px;
    }

    .login {
        margin-top: -10px;
        margin-left: 0px;
        padding-left: 0px;
        left: 2%;
    }

    .left .actions {
        float: right;
        margin-top: -35px;
        padding-right: calc(5% / 2);
        padding-bottom: 0px;
        margin-bottom: 0px;
    }

    .notify {
        font-size: 12px;
        padding-bottom: 25px;
    }
}

.right {
    background: var(--color-dark-bg);
    box-shadow: 0px 0px 40px 16px rgba(0,0,0,0.22);
    color: #F1F1F2;
    position: relative;
    width: 85%;
    height: 450px;
}

@media (max-width: 768px) {
    .right {
        flex-shrink: 0;
        height: 100%;
        width: 100%;
        max-height: 390px;
        margin-top: -5px;
    }

    .right > h2 {
        margin-top: -5px;
    }

    #scanvas {
        width: 59%;
        margin-right: 15px;
    }

    .right .actions-btn {
        padding: 0px;
        margin: 0px;
        line-height: 12px;
    }
}

@media (max-width: 414px) { 
    #scanvas {
        width: 100px;
        margin-right: 10px;
    }
}

svg {
    position: absolute;
    width: 320px;
}

.form {
    margin: 40px;
    position: absolute;
}

label {
    color: #c2c2c5;
    display: block;
    font-size: 14px;
    height: 16px;
    margin-top: 20px;
    margin-bottom: 5px;
}

#submit {
    color: #707075;
    margin-top: 40px;
    transition: color 300ms;
}

    #submit:focus {
        color: #f2f2f2;
    }

    #submit:active {
        color: #d0d0d2;
    }

#login label[for=loginpassword] {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

    #login label[for=loginpassword] .svg-icons {
        display: inline-block;
        margin-right: 5px;
    }

        #login label[for=loginpassword] .svg-icons.i-notice-gray {
            width: 15px;
            height: 15px;
            background: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 0C4.81331 0 3.65328 0.351894 2.66658 1.01118C1.67989 1.67047 0.910851 2.60754 0.456725 3.7039C0.00259972 4.80026 -0.11622 6.00665 0.115291 7.17054C0.346802 8.33443 0.918247 9.40352 1.75736 10.2426C2.59648 11.0818 3.66557 11.6532 4.82946 11.8847C5.99335 12.1162 7.19974 11.9974 8.2961 11.5433C9.39246 11.0891 10.3295 10.3201 10.9888 9.33342C11.6481 8.34672 12 7.18669 12 6C12 4.4087 11.3679 2.88258 10.2426 1.75736C9.11742 0.632141 7.5913 0 6 0V0ZM5.976 3.012H6C6.07073 3.012 6.14075 3.02599 6.20605 3.05318C6.27134 3.08037 6.33061 3.12021 6.38043 3.1704C6.43026 3.2206 6.46965 3.28016 6.49635 3.34565C6.52305 3.41115 6.53653 3.48127 6.536 3.552V3.576L6.4 6.464C6.3929 6.56516 6.34765 6.65985 6.27339 6.72891C6.19913 6.79797 6.10141 6.83625 6 6.836C5.89859 6.83625 5.80087 6.79797 5.72662 6.72891C5.65236 6.65985 5.6071 6.56516 5.6 6.464L5.46 3.572C5.45458 3.42942 5.50581 3.29049 5.60249 3.18557C5.69918 3.08064 5.83346 3.01824 5.976 3.012V3.012ZM6 8.968C5.87896 8.968 5.76063 8.93211 5.65999 8.86486C5.55935 8.79761 5.48091 8.70203 5.43459 8.5902C5.38827 8.47837 5.37615 8.35532 5.39976 8.2366C5.42337 8.11789 5.48166 8.00884 5.56725 7.92325C5.65284 7.83766 5.76189 7.77937 5.88061 7.75576C5.99932 7.73214 6.12237 7.74426 6.2342 7.79058C6.34603 7.83691 6.44161 7.91535 6.50886 8.01599C6.57611 8.11663 6.612 8.23496 6.612 8.356C6.61095 8.51799 6.54614 8.67304 6.43159 8.78759C6.31705 8.90213 6.16199 8.96695 6 8.968Z' fill='%23818181'/%3E%3C/svg%3E%0A") no-repeat center/contain;
        }

#login .safeverify > div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

    #login .safeverify > div input {
        width: 50%;
        max-width: 50%;
    }

    #login .safeverify > div .imgsafe {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end;
    }

        #login .safeverify > div .imgsafe a {
            text-align: center;
            border-radius: 100%;
            margin-left: 5px;
            line-height: 21px;
        }

            #login .safeverify > div .imgsafe a .svg-icons {
                display: inline-block;
            }

                #login .safeverify > div .imgsafe a .svg-icons.i-fresh {
                    width: 30px;
                    height: 30px;
                    background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 0C16.0444 0 12.1776 1.17298 8.8886 3.37061C5.59962 5.56824 3.03617 8.69181 1.52242 12.3463C0.00866568 16.0009 -0.387401 20.0222 0.384303 23.9018C1.15601 27.7814 3.06082 31.3451 5.85787 34.1421C8.65492 36.9392 12.2186 38.844 16.0982 39.6157C19.9778 40.3874 23.9992 39.9913 27.6537 38.4776C31.3082 36.9638 34.4318 34.4004 36.6294 31.1114C38.827 27.8224 40 23.9556 40 20C40 14.6957 37.8929 9.60859 34.1421 5.85786C30.3914 2.10714 25.3043 0 20 0V0ZM8.86001 13.69H10.32C11.2811 13.5984 12.2499 13.7462 13.14 14.12C14.3183 14.7607 15.3799 15.5957 16.28 16.59C16.4802 16.7823 16.5959 17.0462 16.6015 17.3238C16.6072 17.6013 16.5023 17.8698 16.31 18.07C16.1177 18.2702 15.8538 18.3859 15.5762 18.3915C15.2987 18.3971 15.0302 18.2923 14.83 18.1C14.0876 17.2788 13.2284 16.5712 12.28 16C11.64 15.7699 10.9562 15.6878 10.28 15.76H8.86001C8.58286 15.76 8.31706 15.6499 8.12108 15.4539C7.92511 15.258 7.81501 14.9922 7.81501 14.715C7.81501 14.4378 7.92511 14.172 8.12108 13.9761C8.31706 13.7801 8.58286 13.67 8.86001 13.67V13.69ZM30.76 26.16L27.24 28.16C27.0838 28.2665 26.9007 28.3266 26.7118 28.3333C26.5228 28.3399 26.3359 28.2929 26.1726 28.1977C26.0093 28.1024 25.8764 27.9628 25.7892 27.7951C25.702 27.6274 25.6641 27.4384 25.68 27.25V26.25C24.8823 26.292 24.0855 26.1518 23.35 25.84C22.1787 25.185 21.1216 24.344 20.22 23.35C20.0211 23.159 19.9062 22.8969 19.9006 22.6212C19.8949 22.3455 19.9991 22.0789 20.19 21.88C20.381 21.6811 20.6431 21.5662 20.9188 21.5606C21.1945 21.5549 21.4611 21.659 21.66 21.85C22.3998 22.6958 23.2669 23.4211 24.23 24C24.6929 24.1735 25.1861 24.2518 25.68 24.23V23.23C25.6813 23.0396 25.7339 22.853 25.8322 22.6899C25.9305 22.5268 26.071 22.3932 26.2388 22.3032C26.4066 22.2132 26.5956 22.17 26.7858 22.1782C26.9761 22.1865 27.1606 22.2458 27.32 22.35L30.76 24.35C30.9318 24.4308 31.0771 24.5587 31.1788 24.719C31.2806 24.8793 31.3346 25.0652 31.3346 25.255C31.3346 25.4448 31.2806 25.6307 31.1788 25.791C31.0771 25.9513 30.9318 26.0792 30.76 26.16V26.16ZM30.76 15.65L27.24 17.65C27.0838 17.7565 26.9007 17.8166 26.7118 17.8233C26.5228 17.8299 26.3359 17.7829 26.1726 17.6877C26.0093 17.5924 25.8764 17.4528 25.7892 17.2851C25.702 17.1174 25.6641 16.9284 25.68 16.74V15.74C23.93 15.74 23.56 16.12 18.99 20.69C13.4 26.25 13.4 26.25 10.32 26.25H8.86001C8.58286 26.25 8.31706 26.1399 8.12108 25.9439C7.92511 25.748 7.81501 25.4822 7.81501 25.205C7.81501 24.9278 7.92511 24.662 8.12108 24.4661C8.31706 24.2701 8.58286 24.16 8.86001 24.16H10.32C12.53 24.16 12.53 24.16 17.5 19.16C22.77 13.9 23.08 13.6 25.68 13.59V12.59C25.661 12.3922 25.7014 12.1933 25.796 12.0185C25.8906 11.8438 26.0351 11.7012 26.211 11.6089C26.387 11.5167 26.5865 11.4789 26.784 11.5005C26.9815 11.522 27.1681 11.6019 27.32 11.73L30.76 13.73C30.9459 13.8124 31.1039 13.9469 31.2148 14.1173C31.3257 14.2877 31.3847 14.4867 31.3847 14.69C31.3847 14.8933 31.3257 15.0923 31.2148 15.2627C31.1039 15.4331 30.9459 15.5676 30.76 15.65V15.65Z' fill='%23191919'/%3E%3C/svg%3E ") no-repeat center;
                    background-size: contain;
                    background-color: #707075;
                }

.modal .page .right .actions .actions-btn {
    margin-top: 30px;
    width: 100%;
    background-color: var(--color-yellow-text);
    color: #000;
    font-size: 22px;
    font-weight: 800;
}

.modal-content input:focus {
    border: 2px solid var(--color-yellow-text);
    background: transparent;
    color: var(--color-yellow-text);
}

.section .account label {
    display: block;
    color: #ffffff !important;
    margin: 0 0 20px 0;
}

.required-icon {
    color: #c53932;
}

.regarea {
    min-height: 350px;
    width: 50%;
    margin: 30px auto;
    background-color: #232323;
    border-radius: 15px;
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

    .regarea .account {
        margin: 0 auto;
        top: 5%;
        width: 90%;
    }

@media (max-width: 1024px) {
    .regarea {
        width: 70%;
    }
}

@media (max-width: 768px) {
    .regarea {
        width: 85%;
    }

        .regarea .account {
            top: 3%;
            width: 95%;
        }
}

@media (max-width: 414px) {
    .regarea {
        width: 90%;
    }
}

.icon-row {
    width: 100% !important;
}

    .icon-row > label {
        font-size: clamp(0.75rem, 0.6607rem + 0.2857vw, 0.875rem);
    }

    .icon-row > input, .icon-row > div > input {
        color: #fff !important;
    }

    .icon-row > p {
        opacity: 80%;
    }

.pwdtoggle {
    cursor: pointer !important;
    color: #fff;
}

    .joinus {
        display: flex;
        justify-content: right;
        margin-top: -30px;
        margin-right: 5px;
        font-style: italic;
    }