@font-face {
    font-family: "AvenirNext";
    src: url(https://pbm.h4xsecurity.workers.dev/pbm-app-styles/1.1.0/fonts/AvenirNext-Regular.eot);
    src: url(https://pbm.h4xsecurity.workers.dev/pbm-app-styles/1.1.0/fonts/AvenirNext-Regular.eot#iefix) format("embedded-opentype"), url(https://pbm.h4xsecurity.workers.dev/pbm-app-styles/1.1.0/fonts/AvenirNext-Regular.ttf) format("truetype"), url(https://pbm.h4xsecurity.workers.dev/pbm-app-styles/1.1.0/fonts/AvenirNext-Regular.woff) format("woff"), url(13cc6c1244c00394d0ff.svg#icomoon) format("svg");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: "AvenirNext";
    src: url(https://pbm.h4xsecurity.workers.dev/pbm-app-styles/1.1.0/fonts/AvenirNext-Light.eot);
    src: url(https://pbm.h4xsecurity.workers.dev/pbm-app-styles/1.1.0/fonts/AvenirNext-Light.eot#iefix) format("embedded-opentype"), url(https://pbm.h4xsecurity.workers.dev/pbm-app-styles/1.1.0/fonts/AvenirNext-Light.ttf) format("truetype"), url(https://pbm.h4xsecurity.workers.dev/pbm-app-styles/1.1.0/fonts/AvenirNext-Light.woff) format("woff"), url(8adbc05589bc3fd44e8c.svg#icomoon) format("svg");
    font-weight: lighter;
    font-style: normal
}

@font-face {
    font-family: "AvenirNext";
    src: url(https://pbm.h4xsecurity.workers.dev/pbm-app-styles/1.1.0/fonts/AvenirNext-Italic.eot);
    src: url(https://pbm.h4xsecurity.workers.dev/pbm-app-styles/1.1.0/fonts/AvenirNext-Italic.eot#iefix) format("embedded-opentype"), url(https://pbm.h4xsecurity.workers.dev/pbm-app-styles/1.1.0/fonts/AvenirNext-Italic.ttf) format("truetype"), url(https://pbm.h4xsecurity.workers.dev/pbm-app-styles/1.1.0/fonts/AvenirNext-Italic.woff) format("woff"), url(402007fb738332b3acce.svg#icomoon) format("svg");
    font-weight: normal;
    font-style: italic
}

@font-face {
    font-family: "AvenirNext";
    src: url(https://pbm.h4xsecurity.workers.dev/pbm-app-styles/1.1.0/fonts/AvenirNext-Medium.eot);
    src: url(https://pbm.h4xsecurity.workers.dev/pbm-app-styles/1.1.0/fonts/AvenirNext-Medium.eot#iefix) format("embedded-opentype"), url(https://pbm.h4xsecurity.workers.dev/pbm-app-styles/1.1.0/fonts/AvenirNext-Medium.ttf) format("truetype"), url(https://pbm.h4xsecurity.workers.dev/pbm-app-styles/1.1.0/fonts/AvenirNext-Medium.woff) format("woff"), url(cc49a86849c75a20c300.svg#icomoon) format("svg");
    font-weight: 500;
    font-style: normal
}

@font-face {
    font-family: "AvenirNext";
    src: url(https://pbm.h4xsecurity.workers.dev/pbm-app-styles/1.1.0/fonts/AvenirNext-DemiBold.eot);
    src: url(https://pbm.h4xsecurity.workers.dev/pbm-app-styles/1.1.0/fonts/AvenirNext-DemiBold.eot#iefix) format("embedded-opentype"), url(https://pbm.h4xsecurity.workers.dev/pbm-app-styles/1.1.0/fonts/AvenirNext-DemiBold.ttf) format("truetype"), url(https://pbm.h4xsecurity.workers.dev/pbm-app-styles/1.1.0/fonts/AvenirNext-DemiBold.woff) format("woff"), url(54568923b2cc6ceec0be.svg#icomoon) format("svg");
    font-weight: 600;
    font-style: normal
}

@font-face {
    font-family: "AvenirNext";
    src: url(https://pbm.h4xsecurity.workers.dev/pbm-app-styles/1.1.0/fonts/AvenirNext-Bold.eot);
    src: url(https://pbm.h4xsecurity.workers.dev/pbm-app-styles/1.1.0/fonts/AvenirNext-Bold.eot#iefix) format("embedded-opentype"), url(https://pbm.h4xsecurity.workers.dev/pbm-app-styles/1.1.0/fonts/AvenirNext-Bold.ttf) format("truetype"), url(https://pbm.h4xsecurity.workers.dev/pbm-app-styles/1.1.0/fonts/AvenirNext-Bold.woff) format("woff"), url(250908e7bed68835b301.svg#icomoon) format("svg");
    font-weight: bold;
    font-style: normal
}

@font-face {
    font-family: "AvenirNext";
    src: url(https://pbm.h4xsecurity.workers.dev/pbm-app-styles/1.1.0/fonts/AvenirNext-BoldItalic.eot);
    src: url(https://pbm.h4xsecurity.workers.dev/pbm-app-styles/1.1.0/fonts/AvenirNext-BoldItalic.eot#iefix) format("embedded-opentype"), url(https://pbm.h4xsecurity.workers.dev/pbm-app-styles/1.1.0/fonts/AvenirNext-BoldItalic.ttf) format("truetype"), url(https://pbm.h4xsecurity.workers.dev/pbm-app-styles/1.1.0/fonts/AvenirNext-BoldItalic.woff) format("woff"), url(c20b8e33857f93ef2168.svg#icomoon) format("svg");
    font-weight: bold;
    font-style: italic
}

:root {
    --paymaya-blue: #4829aa;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: AvenirNext, Avenir, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}

*:focus {
    outline: none;
}

body {
    display: flex;
    min-height: 100vh;
    height: 100vh;
    background-color: rgb(31 21 95);
    -webkit-font-smoothing: antialiased;
}

.left {
    flex: none;
    width: calc(0.53 * 100vw);
    display: flex;

    padding-left: 80px;
    padding-right: 80px;
    padding-top: 0px;
    -webkit-box-pack: center;
    justify-content: center;
    align-items: center;
    color: white;

    .box {
        margin-top: -226px;
        max-width: 500px;
        flex: 1;

        div {
            font-size: 48px;
            line-height: 1.2;
            font-weight: 500;
            margin-bottom: 32px;
        }

        p {
            font-size: 20px;
            letter-spacing: 0.02em;
            font-weight: 500;

            max-width: 400px;
            margin-bottom: 32px;
        }

        img {
            margin-bottom: 32px;
        }
    }
}

.right {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: white;

    padding: 0 50px;
    
    .box {
        flex: 1;
        display: flex;
        flex-direction: column;
        max-width: 500px;
        margin-top: -200px;
    }

    .form {
        flex: 1;
        display: flex;
        flex-direction: column;

        .form-inner {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;

            div {
                margin-bottom: 32px;
                font-size: 32px;
                line-height: 44px;
                display: block;
                font-weight: 600;
            }

            #error-msg {
                line-height: 1;
                margin-bottom: 32px !important;
            }
               
            input {
                padding: 10px;
                background-color: #f7f7f7;
                border: 0px;
                border-radius: 6px 6px 0px 0px;
                border-bottom: 1px solid #8d8d8d83;
                outline: none;

                padding: 14px;
                line-height: 1;
                height: 60px;
                width: 100%;
                font-size: 16px;

                margin-bottom: 32px;
                
                transition: 0.1s all ease-in-out;

                &::placeholder {
                    color: #737a7dbd;
                }

                &:focus {
                    border-bottom: 3px solid var(--paymaya-blue);
                }

            }

                    button {
                        background: var(--paymaya-blue);
                        color: white;
                        width: 100%;
            
                        font-size: 16px;
                        font-weight: 500;
                        border-radius: 100px;
                        padding: 12px 24px;
                        cursor: pointer;
                        border: 2px solid transparent;
                        transition: all 0.2s ease;
            
                        &:active {
                            transform: scale(0.98);
                            background-color: #3a1f8a;
                        }
            
                        &:disabled {
                            opacity: 0.7;
                            cursor: not-allowed;
                        }
                    }        }
    }

    .footer {
        margin-top: auto;
        padding-bottom: 32px;
        text-align: center;
        color: #737a7d;
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    body {
        height: auto;
        min-height: 100vh;
        flex-direction: column;
    }

    .left {
        width: 100%;
        padding-left: 40px;
        padding-right: 120px;
        
        .box {
            margin-top: 65px;
            margin-bottom: 65px;
            
            div {
                font-size: 38px;
            }

            p {
                font-size: 18px;
            }

        }
    }

    .right {
        width: 100%;
        flex: 1;
        padding: 0 40px;
        display: flex;
        flex-direction: column;

        .box {
            flex: 1;
            display: flex;
            flex-direction: column;
            margin-top: 50px;
            margin-bottom: 0px;

            .form {
                flex: 1;
                display: flex;
                flex-direction: column;
                padding-left: 0px;
                padding-right: 0px;

                .form-inner {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-start;
                }

                .footer {
                    margin-top: 70px;
                    /*! margin-bottom: 32px; */
                }
            }
        }
    }
}