@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css');

[type='checkbox']:not(:checked),
[type='checkbox']:checked {
    position: absolute;
    left: -9999px;
}
[type='checkbox']:not(:checked) + label,
[type='checkbox']:checked + label {
    position: relative;
    padding-left: 95px;
    cursor: pointer;
}
[type='checkbox']:disabled:not(:checked) + label,
[type='checkbox']:disabled:checked + label {
    position: relative;
    padding-left: 95px;
    cursor: not-allowed;
}
[type='checkbox']:not(:checked) + label:before,
[type='checkbox']:checked + label:before,
[type='checkbox']:not(:checked) + label:after,
[type='checkbox']:checked + label:after {
    content: '';
    position: absolute;
}
[type='checkbox']:not(:checked) + label:before,
[type='checkbox']:checked + label:before {
    left: 0;
    top: 0;
    width: 80px;
    height: 30px;
    background: #dddddd;
    border-radius: 6px;
    transition: background-color 0.2s;
}
[type='checkbox']:not(:checked) + label:after,
[type='checkbox']:checked + label:after {
    width: 30px;
    height: 30px;
    transition: all 0.2s;
    border-radius: 6px 0 0 6px;
    background: #7f8c9a;
    top: 0;
    left: 0;
}

/* on checked */
[type='checkbox']:checked + label:before {
    background: #34495e;
}
[type='checkbox']:checked + label:after {
    background: orange;
    top: 0;
    left: 51px;
    border-radius: 0 6px 6px 0;
}

[type='checkbox']:checked + label .ui,
[type='checkbox']:not(:checked) + label .ui:before,
[type='checkbox']:checked + label .ui:after {
    position: absolute;
    left: 6px;
    width: 65px;
    border-radius: 15px;
    font-size: 14px;
    font-weight: bold;
    line-height: 22px;
    transition: all 0.2s;
}
[type='checkbox']:not(:checked) + label {
    color: #7f8c9a;
}

[type='checkbox']:not(:checked) + label .ui:before {
    font-family: 'FontAwesome';
    content: '\f00d';
    color: #7f8c9a;
    left: 46px;
    margin-top: 3px;
}
[type='checkbox']:checked + label .ui:after {
    font-family: 'FontAwesome';
    content: '\f00c';
    color: orange;
    margin-top: 3px;
    left: 12px;
}
[type='checkbox']:focus + label:before {
    border: 0;
    outline: 0;
    box-sizing: border-box;
}

/* Basics */

#permsList,
#flagsList,
#furtherSettings {
    background: rgba(0, 0, 0, 1);
    padding: 10px;
    border-radius: 5px;
}

#autoLoginIp {
    background: rgb(46, 46, 46);
    color: white;
    font-weight: 500;
    border-radius: 5px;
    margin-top: 10px;
}