.profiles.add,
.profiles.edit {
    .select_category.hidden,
    .groups.hidden {
        display: none;
    }
}


body.profile-form {
    main.main > .container {
        background-color: #f7f7f7;
    }

    .profiles.form {
        padding: 15px;
        max-width: 1400px;
        margin: auto;

        & > form > fieldset {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;

            & > legend {
                text-align: center;
                font-weight: bold;
                font-size: 24px;
                margin: 1em 0;
                width: 100%;
            }

            .col {
                display: flex;
                flex-direction: column;

                .block {
                    background: #fff;
                    padding: 25px;
                    margin-bottom: 20px;
                    border-radius: 20px;

                    h4 {
                        margin-bottom: 10px;
                    }
                }

                .block.group.radio .input.required label::after {
                    display: none;
                }

                hr {
                    margin: 25px 0;
                    border: none;
                    border-bottom: 1px #ccc solid;
                }

                label,
                .select_category,
                .select_levels {
                    color: #575a5e;
                }
            }
        }

        .input.select .checkbox,
        .input.checkbox,
        .input.radio {
            & label {
                padding: 6px 10px;
                border-radius: 100px;
                width: auto;

                &:checked,
                &:hover {
                    background-color: #f7f7f7;
                }
            }
        }

        .group.number {
            .input.number {
                display: flex;

                label {
                    padding: 10px;
                }
            }
        }

        .input.radio {
            display: flex;
            flex-direction: column;
        }
    }

    .actions {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin-top: 20px;
    }
}

.dashboard.teacher {
    .wrap {
        position: relative;
        display: flex;
        gap: 20px;
    }

    .complete_profile {
        padding: 40px 40px 50px;

        h2 {
            text-align: center;
        }

        .steps {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            max-width: 960px;
            padding-top: 10px;
            margin: 0 auto;
            font-weight: bold;
        }

        .done,
        .done a {
            opacity: 0.4;
            color: #25910f;
        }

        i {
            display: inline-block;
            width: 35px;
            height: 35px;
            text-align: center;
            line-height: 34px;
            border-radius: 50%;
            margin-right: 10px;
        }

        .todo a {
            background: #f98800;
            color: white;
            border-radius: 50px;
            display: inline-block;
            padding: 3px 17px 3px 3px;
        }

        .todo i {
            background: white;
            color: #f98800;
        }

        .done i {
            background: #25910f;
            color: white;
        }
    }

    aside.aside {
        width: 350px;

        & > .aside-content {
            position: sticky;
            top: 20px;

            & > div {
                background: #fff;
                padding: 20px;
                border-radius: 20px;
            }
        }

    }

    .teacher.profile {
        margin-bottom: 40px;

        img {
            width: 100%;
            aspect-ratio: 1;
            object-fit: cover;
            border-radius: 50%;
        }

        .info {
            text-align: center;
            padding-top: 25px;

            h3 {
                margin-bottom: 0;
                font-size: 24px;
            }

            p {
                margin-top: 10px;
                color: #999;
                font-weight: 600;
            }
        }
    }

    .content {
        width: 100%;
    }
}


@media(max-width: 1280px) {
    .dashboard.teacher {
        .wrap {
            display: block;
        }

        aside.aside {
            margin: 0 auto;
        }
    }
}


@media (max-width: 1024px) {
    body.profile-form {
        .profiles.form {
            max-width: 500px;

            & > form > fieldset {
                grid-template-columns: 1fr;
            }
        }
    }

    .dashboard.teacher {
        .complete_profile .steps {
            display: block;
            text-align: center;

            .todo,
            .done {
                margin-bottom: 20px;
            }
        }
    }
}


@media(max-width: 850px) {
    .main .dashboard.teacher {
        .newest_requests {
            padding: 30px 0;
            background: transparent;

            thead {
                display: none;
            }

            tbody {
                tr,
                td {
                    display: block;
                }

                tr {
                    padding: 30px;
                    background: white;
                    margin-bottom: 20px;
                    border-radius: 20px;
                }

                td:last-child {
                    border-bottom: none;
                }

                td[data-label] {
                    display: block;
                }

                td[data-label]::before {
                    display: block;
                    content: attr(data-label);
                    font-weight: bold;
                    padding-bottom: 5px;
                }
            }

            .all {
                padding-top: 15px;
                text-align: center;
            }
        }
    }
}

@media(max-width: 640px) {
    .main {
        .dashboard.teacher {
            .profiles {
                .list {
                    .profile {
                        display: block;
                        
                        .details {
                            h4 {
                                font-size: 20px;
                            }
                        }

                        .price {
                            font-size: 14px;
                        }
                    }

                    .statusbar {
                        text-align: left;

                        .status {
                            padding-top: 30px;
                            justify-content: left;
                        }
                    }

                    .actions {
                        text-align: left;

                        ul {
                            padding-left: 0;
                        }
                    }
                }
            }
        }
    }
}

@media(max-width: 520px) {
    .main {
        .dashboard.teacher {
            .newest_requests,
            .profiles {
                h2 {
                    font-size: 24px;
                    padding-bottom: 20px;
                    margin-bottom: 0;
                }
            }

            .profiles {
                .list {
                    padding-top: 0;
                }
            }
        }
    }
}

@media(max-width: 400px) {
    .main .dashboard.teacher {
        aside.aside {
            width: 100%;
        }

        .newest_requests {
            tbody {
                tr {
                    padding: 15px;
                }
            }
        }

        .complete_profile {
            padding: 40px 0 50px;

            h2 {
                font-size: 20px;
            }
        }
    }
}