.device-selection {
    color: $feedbackInputTextColor;

    .device-selectors {
        font-size: 14px;

        > div {
            margin-bottom: 10px;
        }

        > div:last-child {
            margin-bottom: 5px;
        }
    }

    .device-selection-column-selectors,
    .device-selection-column-video {
        padding: 10px;
        display: inline-block;
        vertical-align: top;
    }
    .device-selection-column-selectors {
        width: 46%;
    }
    .device-selection-column-video {
        width: 49%;
        padding: 10px 0;
    }

    .device-selection-video-container {
        background: black;
        height: 156px;
        margin: 15px 0 5px;

        .video-input-preview {
            position: relative;

            .video-input-preview-muted {
                color: $participantNameColor;
                display: none;
                left: 0;
                position: absolute;
                right: 0;
                text-align: center;
                top: 50%;
            }

            &.video-muted .video-input-preview-muted {
                display: block;
            }

            .video-input-preview-display {
                height: 100%;
                overflow: hidden;
                width: 100%;
            }
        }
    }

    .audio-output-preview {
        text-align: right;

        a {
            cursor: pointer;
            text-decoration: none;
        }
    }

    .audio-input-preview {
        background: #f4f5f7;
        border-radius: 5px;
        height: 6px;

        .audio-input-preview-level {
            background: #0052cc;
            border-radius: 5px;
            height: 100%;
            -webkit-transition: width .1s ease-in-out;
            -moz-transition: width .1s ease-in-out;
            -o-transition: width .1s ease-in-out;
            transition: width .1s ease-in-out;
        }
    }
}