@import "variables";
@import "commons";
@import "panel";
@import "mixins";
@import "buttons";

.panel {
    padding-left: 0px;
    padding-right: 0px;
}

.content {
    overflow: auto;
    height: calc(100% - #{$stream-header-height});
}

.version {
    display: block;
    padding: 0 5px;

    &__link {
        color: rgb(161, 161, 161);

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

.sub-section {
    padding: 0 5px 15px 5px;
    position: relative;

    &__checkbox {
        position: relative;
        top: 3px;
        left: 5px;
        margin-right: 7px;
    }

    &__text {
        display: block;
        margin: 0 6px 9px 6px;
        color: rgb(140, 152, 173);
    }

    &__input {
        margin-left: 5px;
    }

    &__title {
        display: inline-block;
        margin: 0 0 5px 5px;

        & a {
            color: white;
            font-weight: bold;
            text-decoration: underline;
        }
    }   

    &__text-input {

    }

    &__cw-settings {
        padding: 0 0 10px 15px;
    }
}

.form-control {
    border: 1px solid $settings-text-input-border;
    color: $settings-text-input-foreground;
    background-color: $settings-text-input-background;
    height: 24px;

    &:focus {
        box-shadow: none;
    }
}

.sub-text-input {
    padding: 0 5px;
}

.sound {
    &__select {
        float: left;
        width: calc(100% - 75px);
        padding: 3px 0;
        margin-left: 5px;

        background-color: #32384d;
        color: white;
        border: 1px solid #32384d;
    }

    &__play {
        transition: all .2s;
        display: inline-block;
        width: calc(60px);
        padding: 3px 0;
        text-align: center;
        text-decoration: none;

        background-color: #1f2330;
        color: white;
        -webkit-appearance: none;

        &:hover {
            background-color: #32384d;
        }
    }
}