/* dashboard */
.dashboard {
    margin-top: 5rem;

    @media (max-width: 992px) {
        margin-top: 2rem;
    }

    img {
        width: 100%;
    }

    .sidebar {

        img {
            width: 80px;
            height: 80px;
            border-radius: 100%;
        }

        a {
            font-size: 17px;
            text-decoration: none;
            font-weight: 500;
            padding: 1rem 1.2rem;
            color: #000;
            border-top: 1.5px solid var(--gray);

            &:hover {
                background-color: #fff;
            }

            img {
                width: 50px;
                height: 50px;
                border-radius: 0;
                margin-right: 0.6rem;
            }
        }

        .inside-button {
            position: absolute;
            right: 1rem;
            top: 1rem;
        }
    }

    .toggle-active {
        z-index: 999;
        position: fixed;
        top: 128px;
        left: 1rem;
    }

    @media (max-width: 992px) {
        #sidebar {
            transition: left 0.3s ease;
            z-index: 999;
            max-width: 80%;
            position: fixed;
            top: 120px;
            left: -80%;
        }
    }

    .sidebar-visible {
        left: -10px !important;
    }

    .thumbnail {
        height: 100%;
    }

    .teacher {
        height: 40px;
        width: 40px;
        border-radius: 100%;
    }

    .personal-info {
        position: relative;
        margin: 1rem 0 2rem 0;

        img {
            width: 10rem;
            height: 10rem;
            border-radius: 100%;
        }

        label {
            cursor: pointer;
        }

        i {
            background-color: #fff;
            border: 2px solid var(--success);
            font-size: 1.2rem;
            font-weight: bold;
            padding: 0.7rem 1rem;
            border-radius: 100%;
            position: absolute;
            bottom: 0;
            left: 7rem;
        }
    }

    table {
        thead {
            th {
                padding: 1rem 0 1rem 0.5rem !important;
                background: #000 !important;
                color: #fff;
            }
        }

        tbody {
            td {
                padding: 1rem 0 1rem 0.5rem !important;
            }
        }
    }
}

/* watch */
.watch {
    .curriculam {
        max-height: 42rem;
        border: 2px solid var(--light-gray);
        overflow-y: scroll;

        .accordion-button:not(.collapsed) {
            background-color: #d3d3d341;
        }

        .accordion-button:focus {
            box-shadow: none;
        }

        .course-list {
            border-top: 1px solid var(--gray);

            img {
                width: 80px;
            }
        }
    }

    .video {
        min-height: 20rem;

        @media (min-width: 992px) {
            min-height: 40rem;
        }
    }
}