.video-quality-dialog {
    .hide-warning {
        height: 0;
        visibility: hidden;
    }

    .video-quality-dialog-title {
        margin-bottom: 10px;
    }

    .video-quality-dialog-contents {
        align-items: center;
        display: flex;
        flex-direction: column;
        padding: 10px;
        min-width: 250px;

        .video-quality-dialog-slider-container {
            width: 100%;
            text-align: center;
        }

        .video-quality-dialog-slider {
            width: calc(100% - 5px);

            @mixin sliderTrackStyles() {
                height: 15px;
                border-radius: 10px;
                background: rgb(14, 22, 36);
            }

            &::-ms-track {
                @include sliderTrackStyles();
            }

            &::-moz-range-track {
                @include sliderTrackStyles();
            }

            &::-webkit-slider-runnable-track {
                @include sliderTrackStyles();
            }

            @mixin sliderThumbStyles() {
                top: 50%;
                border: none;
                position: relative;
                opacity: 0;
            }

            &::-ms-thumb {
                @include sliderThumbStyles();
            }

            &::-moz-range-thumb {
                @include sliderThumbStyles();

            }

            &::-webkit-slider-thumb {
                @include sliderThumbStyles();
            }
        }

        .video-quality-dialog-labels {
            box-sizing: border-box;
            display: flex;
            margin-top: 5px;
            position: relative;
            width: 90%;
        }

        .video-quality-dialog-label-container {
            position: absolute;
            text-align: center;
            transform: translate(-50%, 0%);

            &::before {
                content: '';
                border-radius: 50%;
                left: 0;
                height: 6px;
                margin: 0 auto;
                pointer-events: none;
                position: absolute;
                right: 0;
                top: -16px;
                width: 6px;
            }
        }

        .video-quality-dialog-label-container.active {
            color: $videoQualityActive;

            &::before {
                background: $videoQualityActive;
                height: 12px;
                top: -19px;
                width: 12px;
            }
        }

        .video-quality-dialog-label-container:first-child {
            position: relative;
        }

        .video-quality-dialog-label {
            display: table-caption;
            word-spacing: unset;
        }
    }

    &.video-not-supported {
        .video-quality-dialog-labels {
            color: gray;
        }

        .video-quality-dialog-slider {
            @mixin sliderTrackDisabledStyles() {
                background: rgba(14, 22, 36, 0.1);
            }

            &::-ms-track {
                @include sliderTrackDisabledStyles();
            }

            &::-moz-range-track {
                @include sliderTrackDisabledStyles();
            }

            &::-webkit-slider-runnable-track {
                @include sliderTrackDisabledStyles();
            }
        }
    }
}

.modal-dialog-form {
    .video-quality-dialog-title {
        display: none;
    }
}

#videoResolutionLabel {
    z-index: $zindex3 + 1;
}

.large-video-labels {
    display: flex;
    position: absolute;
    top: 30px;
    right: 30px;
    transition: right 0.5s;
    z-index: $zindex3;

    .circular-label {
        color: white;
        font-weight: bold;
        margin-left: 8px;
        opacity: 0.8;
    }

    .circular-label {
        background: #B8C7E0;
    }

    .circular-label.file {
        background: #FF5630;
    }

    .circular-label.local-rec {
        background: #FF5630;
    }

    .circular-label.stream {
        background: #0065FF;
    }

    .recording-label.center-message {
        background: $videoStateIndicatorBackground;
        bottom: 50%;
        display: block;
        left: 50%;
        padding: 10px;
        position: fixed;
        transform: translate(-50%, -50%);
        z-index: $centeredVideoLabelZ;
    }
}

.circular-label {
    background: $videoStateIndicatorBackground;
    border-radius: 50%;
    box-sizing: border-box;
    cursor: default;
    font-size: 13px;
    height: $videoStateIndicatorSize;
    line-height: $videoStateIndicatorSize;
    text-align: center;
    min-width: $videoStateIndicatorSize;
}