.content-control-panel {
    position: relative;
    z-index: 2;

    .teacher-control-panel-collapse {
        position: absolute;
        background-color: #ffc657;
        height: 48px;
        width: 48px;
        top: 24px;
        left: -24px;

        .icon {
            height: 20px;
            width: auto;
            margin: 0;
            cursor: pointer;
            transform: rotate(0deg);
            transition: transform .5s ease-in-out
        }

        &.collapsed {
            .icon {
                transform: rotate(180deg);
                transition: transform .5s ease-in-out
            }
        }
    }

    .collapse {
        visibility: hidden;

        &.show {
            visibility: visible;
            display: block;
        }
    }

    .collapsing {
        position: relative;
        overflow: hidden;
        height: auto;
        transition-property: width, visibility;
        transition-duration: .5s;
        transition-timing-function: ease;

        &.width {
            width: 0;
        }
    }

    .teacher-control-panel {
        background: #faf9ff;
        border-width: 0 0 2px 2px;
        border-style: solid;
        border-color: #eeecf5;
        box-shadow: 0 0 10px rgba(0, 0, 0, .06);
        border-radius: 0 0 8px 8px;
        width: 260px;
        padding: 30px 0 30px 30px;

        h5 {
            margin-bottom: 30px;
        }

        .separator {
            display: flex;
            flex-flow: row nowrap;
            justify-content: flex-start;
            align-items: center;
            margin-bottom: 15px;

            span {
                white-space: nowrap;
                margin-right: .7em;
                font-weight: bold;
                font-size: 14px;
            }

            .line-separator {
                background-color: #edebf4;
                height: 2px;
                width: 100%;
            }
        }

        .control-action,
        .showhide-action {
            display: flex;
            flex-flow: row nowrap;
            justify-content: flex-start;
            align-items: center;
            margin: 0 30px 15px 0;

            &.disabled {
                pointer-events: none;
                opacity: .5;

                .custom-control-input {
                    pointer-events: none;
                }

                .custom-control-label {
                    &:before,
                    &:after {
                        pointer-events: none;
                    }
                }
            }

            .control-action-icon,
            .showhide-action-icon {
                height: 30px;
                width: 30px;
                border-radius: 8px;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-right: 15px;

                .icon {
                    margin: 0;
                    height: 13px;
                    width: auto;
                }
            }

            span {
                font-size: 14px;
                white-space: nowrap;
            }
        }

        .control-action {
            cursor: pointer;
            transition: opacity .3s ease-in-out;

            &:hover {
                opacity: .7;
                transition: opacity .3s ease-in-out;
            }
        }

        .showhide-action {
            justify-content: space-between;
        }

        .endsession {
            background-color: #f84015;
            width: calc(100% - 30px);
            padding: 8px;
            cursor: pointer;
            border: none;
            transition: opacity .3s ease-in-out;
            margin-right: 30px;

            &:hover {
                opacity: .7;
                transition: opacity .3s ease-in-out;
            }
        }
    }
}

@media (max-width: 991px) {

}

@media (max-width: 768px) {

}

@media (max-width: 576px) {

}

@media (max-width: 510px) {
    .content-control-panel {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 40;
    }
}