$white: #ffffff;


.thswc-admin-page.thswc-setup-wizard-page {

    font-family: 'Roboto', sans-serif;
    background: $white;
    
    #wpbody-content {
        padding: 0px;
    }
    #wpadminbar {
        display: none;
    }
    .th-setup-wizard__wrapper {
        margin: 20px;
        border-radius: 10px;
        display: flex;
        min-height: 95vh;
        .th-setup-wizard__col1 {
            width: 40%;
            border-radius: 10px 0px 0px 10px;
            &.th-setup-wizard_page_1 {
                background: radial-gradient(circle at 20% 88%, #ECE2FB, transparent 75%),
                radial-gradient(circle at 75% 80%, #dcf5f5, transparent 50%),
                radial-gradient(circle at 40% -50%, #E4F3EE, transparent 116%),
                radial-gradient(circle at 15% 50%, rgb(255 173 170 / 99%), transparent 50%);
            }
            &.th-setup-wizard_page_2 {
                background: radial-gradient(circle at 20% 88%, #E2F2FB, transparent 75%),
                radial-gradient(circle at 75% 80%, #e3daf7, transparent 50%),
                radial-gradient(circle at 40% -50%, #e7dcd9, transparent 116%),
                radial-gradient(circle at 15% 50%, #afeece, transparent 50%);
            }
            .th-logo {
                margin: 5rem;
            }
            .content-wrapper {
                position: absolute;
                top: 50%;
                left: 20%;
                transform: translate(-50%, -50%);
                line-height: normal;
                margin: 0 2vw;
                max-width: 21rem;

                p {
                    font-size: 16px;
                }
            }
        }
        .th-setup-wizard__col2 {
            width: 60%;
            background: #F8F9FD;
            border-radius: 0px 10px 10px 0px;

            form {
                justify-content: space-around;
                display: grid;
                align-items: center;
                height: 100%;
                align-content: center;
                // justify-items: end;
                justify-items: center;
                margin: 5vh 9.5vw;

                .th__toggle-wrapper {
                    display: flex;

                    .th-nav-toggle {
                        width: 10px;
                        height: 10px;
                        background: #E1E1E1;
                        border-radius: 50%;
                        margin: 0 0.3rem;

                        &.active {
                            background-color: #3858E9;
                        }
                        &.disabled {
                            pointer-events: none;
                        }
                    }
                }
            }

            .th-setup-wizard__user-role {
                margin: 5vh 0;
                // margin-bottom: 2vh;

                .title-wrapper {
                    text-align: center;
                    color: #22282E;

                    p {
                        font-size: 16px;
                    }
                }
                .user-role-wrapper {
                    // display: flex;
                    // justify-content: center;
                    
                    // h4 {
                    //     // font-weight: 500;
                    //     // margin: 0.5vh 1vw
                    // }
                    .user-roles {
                        h4 {
                            font-size: 14px;
                        }
                        .category-group {
                            display: flex;
                            width: 100%;
                            gap: 2vw;
                        }
                        .role-category {
                            background: $white;
                            border-radius: 5px;
                            min-width: 7rem;
                            // margin-right: 1vw;
                            :has(> input[type="radio"]:checked) {
                                background: #3858E9;
                            }
                            input[type='radio'] {
                                display: none;
                            }
                            label {
                                // height: 100%;
                                padding: 45px 16px;
                                padding-bottom: 15px;
                                display: block;
                                border: 1px solid transparent;
                                border-radius: 5px;
                                cursor: pointer;

                                &:hover {
                                    border: 1px solid #3858E9 !important;
                                }
                                .role-image {
                                    display: flex;
                                    justify-content: center;
                                    min-height: 34px;
                                }
                                .role-name {
                                    display: flex;
                                    margin-top: 20px;
                                    justify-content: center;
                                    text-align: center;
                                    color: #7D7D7D;
                                }
                            }
                        }
                        .active {
                            background: #3858E9;
                            label {
                                .role-image {
                                    svg {
                                        color: $white;
                                    }
                                }
                                .role-name {
                                    color: #fff;
                                }
                            }
                        }
                        div {
                            display: inline-block;
                        }
                    }
                    .user-info {
                        margin: 3rem 0;

                        .email-info {
                            border: none;
                            padding: 12px 25px;
                            min-width: 19rem;
                            
                            &:focus-visible {
                                outline: none !important;
                            }
                        }
                        ::placeholder {
                            color: #D9D9D9;
                            font-style: italic;
                        }
                        :focus {
                            box-shadow: none;
                        }
                        p {
                            color: #9B9B9B;
                            font-size: 14px;
                        }
                    }
                }
            }
            .th-setup-wizard__brand-assets {
                // margin: 5vh 5.5vw;
                margin-bottom: 2vh;
                margin-top: 2vh;
                .title-wrapper {
                    p {
                        font-size: 16px;
                    }
                }
                .content-wrapper {
                    margin: 5vh 0;
                    display: flex;

                    .brand-info {
                        flex: 1;
                        .media-upload-wrapper {
                            .th-img-upload-btn-wrapper {
                                border: none;
                                background: $white;
                                padding: 1rem;
                            }
                            .th-img-upload-btn {
                                background-color: #3858E9;
                            }
                            .th-img-filename {
                                max-width: 10rem;
                            }
                            .th-delete-img {
                                height: 20px;
                            }
                        }
                        .color-picker-wrapper {
                            margin-right: 10vw;
                            .color-picker {
                                display: flex;
                                border: 1px solid #E0E2E9;
                                border-radius: 5px;
                                padding: 0.5rem;
                                align-items: center;

                                .hex-code-input {
                                    background: inherit;
                                }

                                p {
                                    margin: 0 0.5rem;
                                }
                            }
                        }
                    }
                    .preview-wrapper {
                        margin: 0 1vw;
                        .preview {
                            background: #ffffff;
                            padding: 2rem 1rem;
                            padding-top: 1rem;
                            border-radius: 5px;
                            width: 12.5rem;
                            .logo-preview {
                                display: flex;
                                justify-content: center;
                                img {
                                    max-width: 8rem;
                                    max-height: 3rem;
                                }
                                h1 {
                                    font-size: 16px;
                                }
                            }
                            h1 {
                                text-align: center;
                            }
                            .dummy-field {
                                input[type='text'] {
                                    background: #F6F7FC;
                                    border: 1px solid #EDEEF6;
                                    width: 97%;
                                    height: 1.5rem;
                                    border-radius: 5px;
                                }
                                button {
                                    width: 100%;
                                    background: #1C1C1C;
                                    color: #fff;
                                    border-radius: 5px;
                                    border: none;
                                    padding: 0.5rem 0;
                                }
                            }
                        }
                    }
                }
            }
            .seperator-1 {
                margin: 0 4vw;
            }
            .nav-btn-wrapper {
                display: flex;
                justify-content: space-between;
                width: 100%;
                align-items: center;
                a {
                    text-decoration: none;
                    &:focus {
                        outline: none;
                        box-shadow: none;
                    }
                }
                .nav-btn-highlighted {
                    background: #3858E9;
                    color: $white;
                    border: none;
                    border-radius: 5px;
                    padding: 13px 21px;

                    &.disabled {
                        opacity: 0.5;
                        pointer-events: none;
                    }

                    .right-arrow {
                        transform: scaleX(1.7);
                        display: inline-block;
                        margin-left: 2vw;
                        font-weight: 300;
                    }
                }
                .nav-btn-normal {
                    border: none;
                    background: none;
                    color: #868686;

                    &.nav-btn-prev {
                        .right-arrow {
                            margin-right: 1rem;
                        }
                    }
                }
                .btn-skip {
                    // margin-left: 55%;
                    margin-left: 40%;
                    margin-right: 14px;
                    font-size: 15px;
                }
                button {
                    cursor: pointer;
                    font-size: 15px;
                }
            }
        }
    }
}