/* ============================================================
  COMMON
============================================================ */
#wrapper {
    min-width: 600px;
}

.settings {
    display: table;
    width: 100%;
}

    .settings .row {
        display: table-row;
    }

    .settings .question,
    .settings .switch {
        display: table-cell;
        vertical-align: middle;
        padding: 10px;
    }

    .settings .question {
        width: 600px;
        font-family: "Roboto Slab", serif;
        font-size: 20px;
    }

/* ============================================================
  COMMON
============================================================ */
.cmn-toggle {
    position: absolute;
    margin-left: -9999px;
    visibility: hidden;
}

    .cmn-toggle + label {
        display: block;
        position: relative;
        cursor: pointer;
        outline: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

/* ============================================================
  SWITCH 1 - ROUND
============================================================ */
input.cmn-toggle-round + label {
    width: 50px; 
    height: 26px;
    background-color: #FFFFFF;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    border-radius: 30px;
    top: 0px;
    left: 0px;
}

    input.cmn-toggle-round + label:before, input.cmn-toggle-round + label:after {
        display: block;
        position: absolute;
        top: 1px;
        left: 3px;
        bottom: 1px;
        content: "";
    }

    input.cmn-toggle-round + label:before {
        border-color: red;
        border-width: 2PX;
        right: 0px;
        left:0.5px;
        margin-top: 1px;
        background-color: #DDDDDD;
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px;
        -ms-border-radius: 30px;
        -o-border-radius: 30px;
        border-radius: 30px;
        -webkit-transition: background 0.4s;
        -moz-transition: background 0.4s;
        -o-transition: background 0.4s;
        transition: background 0.4s;
    }

    input.cmn-toggle-round + label:after {
        top: 3.2px;
        width: 20px; 
        height: 20px;
        background-color: #fff;
        -webkit-border-radius: 100%;
        -moz-border-radius: 100%;
        -ms-border-radius: 100%;
        -o-border-radius: 100%;
        border-radius: 100%;
        -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
        -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
        -webkit-transition: margin 0.4s;
        -moz-transition: margin 0.4s;
        -o-transition: margin 0.4s;
        transition: margin 0.4s;
    }

input.cmn-toggle-round:checked + label:before {
    /*background-color: #8ce196;  
  background-color: #50cf5c;   */
    background-color: #4bca57;
}

input.cmn-toggle-round:checked + label:after {
    margin-left: 25px;
}