// form css
.wizard-bg {
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(../images/background.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    .wizard-box {
        padding: 40px;
        margin: 30px 0;
        box-shadow: 1px 5px 24px 0 rgba($black, 0.05);
        background-color: $white;
        border-radius: 10px;

        .wizard-step-container {
            overflow: hidden;

            ul {
                display: flex;
                justify-content: center;
                gap: 12px;
                overflow: auto;

                li {
                    display: inline-block;

                    .media {
                        display: flex;
                        gap: 10px;
                        flex-direction: column;
                        text-align: center;

                        .step-icon {
                            margin: auto;
                            width: 45px;
                            height: 45px;
                            background: $light-color;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            border-radius: 8px;

                            i {
                                display: none;
                            }

                            span {
                                font-weight: 500;
                            }
                        }

                        svg {
                            color: $light-font;
                            margin-left: 10px;
                        }

                        .media-body {
                            h6 {
                                color: $light-font;
                                margin-bottom: 0;
                                font-size: calc(11px + (13 - 11) * ((100vw - 320px) / (1920 - 320)));
                            }
                        }

                        .icon-center {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                        }
                    }

                    +li {
                        padding-left: 15px;
                    }

                    &.step-container {

                        &.active,
                        &.disabled {
                            .media {
                                .step-icon {
                                    background: rgba($primary-color, 0.2);
                                    color: $primary-color;
                                }
                            }
                        }

                        &.disabled {
                            .media {
                                .step-icon {
                                    i {
                                        display: block;
                                    }

                                    span {
                                        display: none;
                                    }
                                }

                                .media-body {

                                    h5,
                                    h6 {
                                        color: $light-font;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

        .wizard-form-details {
            margin-top: 50px;

            h6 {
                color: #4e4646;
                margin-bottom: 30px;
            }

            table {
                border: 1px solid $border-color;
                margin-bottom: 27px;

                tr {
                    th {
                        font-weight: 500;
                    }

                    td,
                    th {
                        color: #9c9898;

                        &:last-child {
                            text-align: center;
                        }
                    }

                    td {
                        .fa-check {
                            color: $green;
                        }

                        .fa-times {
                            color: $red;
                        }
                    }
                }
            }

            >div {
                &.d-block {
                    animation: fadeInRight 0.5s ease-in-out;
                }
            }

            .form-group {
                &.form-row {
                    +.form-row {
                        margin-block: 15px;
                    }

                    label {
                        margin-bottom: 6px;
                    }
                }
            }

            form {
                label {
                    color: #9c9898;
                    width: 75%;

                    .required-fill {
                        color: $red;
                    }
                }
            }

            .install-complete {
                text-align: center;
                padding-bottom: 40px;

                svg {
                    width: calc(30px + (60 - 30) * ((100vw - 300px) / (1920 - 300)));
                    height: calc(30px + (60 - 30) * ((100vw - 300px) / (1920 - 300)));
                    color: $green;
                }

                h3 {
                    margin-bottom: 0;
                    margin-top: 15px;
                    color: #4e4646;
                }
            }

            .goto-selection {
                .selection-box {
                    text-align: center;
                    padding: 40px;
                    border: 2px solid $light-color;
                    border-radius: 8px;
                    transition: 0.5s ease;

                    svg {
                        width: calc(25px + (40 - 25) * ((100vw - 300px) / (1920 - 300)));
                        height: calc(25px + (40 - 25) * ((100vw - 300px) / (1920 - 300)));
                        vertical-align: middle;
                    }

                    svg,
                    h5 {
                        color: $light-font;
                        transition: 0.5s ease;
                    }

                    h5 {
                        margin-bottom: 0;
                    }

                    &:hover {
                        border: 2px solid $primary-color;
                        transition: 0.5s ease;

                        svg,
                        h5 {
                            color: $primary-color;
                            transition: 0.5s ease;
                        }
                    }
                }
            }
        }

        .next-btn {
            &.d-flex {
                justify-content: space-between;
            }
        }
    }
}

// responsive css
@media (max-width: 1199px) {
    .wizard-bg {
        .wizard-box {
            .wizard-step-container {
                ul {
                    li {
                        .media {
                            .step-icon {
                                width: 40px;
                                height: 40px;
                            }
                        }

                        +li {
                            padding-left: 10px;
                        }
                    }
                }
            }
        }
    }
}

@media (max-width: 991px) {
    .wizard-bg {
        .wizard-box {
            padding: 30px;

            .wizard-step-container {
                ul {
                    li {
                        display: block;

                        .media {
                            svg {
                                display: none;
                            }
                        }

                        +li {
                            padding-left: 0;
                            margin-top: 0;
                        }
                    }
                }
            }

            .wizard-form-details {
                margin-top: calc(13px + (40 - 13) * ((100vw - 320px) / (1920 - 320)));

                table {
                    margin-bottom: 17px;
                }

                .install-complete {
                    padding-bottom: 30px;

                    h3 {
                        margin-top: 5px;
                    }
                }

                h6 {
                    margin-bottom: calc(11px + (20 - 11) * ((100vw - 320px) / (991 - 320)));
                    letter-spacing: 0.5px;
                    line-height: 1.5;
                }

                .goto-selection {
                    .selection-box {
                        padding: calc(10px + (30 - 10) * ((100vw - 320px) / (991 - 320)));
                    }
                }
            }
        }
    }
}

@media (max-width: 767px) {
    .btn {
        padding: 6px 12px;
    }

    .wizard-bg {
        .wizard-box {
            padding: 30px;

            .wizard-step-container {
                ul {
                    justify-content: unset;
                }

                .database-field {
                    +.database-field {
                        margin-top: 15px;
                    }
                }
            }
        }
    }
}

@media (max-width: 575px) {
    .wizard-bg {
        .wizard-box {
            padding: 20px;
        }
    }

    .goto-selection {
        >div {
            +div {
                margin-top: 15px;
            }
        }
    }
}