/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: calc((1.0em + 0.5rem - 2px) * 2);
    height: calc(1.0em + 0.5rem + 2px);
}

    /* Hide default HTML checkbox */
    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}
html.darkmode .slider {
    background-color: #444;
}

    .slider:before {
        position: absolute;
        content: "";
        height: calc(1.0em + 0.5rem - 6px);
        width: calc(1.0em + 0.5rem - 6px);
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }
    html.darkmode .slider:before {
        background-color: #292929;
    }

input:checked + .slider {
    /*background-color: #2196F3;*/
    background-color: #c53030;
}
html.darkmode input:checked + .slider {
    /*background-color: #1986E3;*/
    background-color: #b51010;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(calc(1.0em + 0.5rem - 6px));
    -ms-transform: translateX(calc(1.0em + 0.5rem - 6px));
    transform: translateX(calc(1.0em + 0.5rem - 6px));
}

/* Rounded sliders */
.slider.round {
    border-radius: calc(1.0em + 0.5rem + 2px);
}

    .slider.round:before {
        border-radius: 50%;
    }

.switch-3, .switch-2 {
    width: 100%;
    box-sizing: border-box;
    background-color: white;
    box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.4);
    text-align: center;
    position: relative;
    padding: 0px;
    border-radius: 2px;
    display: inline;
}
html.darkmode .switch-3, html.darkmode .switch-2 {
    background-color: #393939;
}

    .switch-2 > div {
        color: white;
        /*padding-top: 0.1em;*/
        display: block;
        position: absolute;
        top: -0.05em;
        bottom: -0.05em;
        width: calc(50%);
        background-color: #990000;
        border-radius: 2px;
        /*box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.4);*/
        z-index: 1;
        pointer-events: none;
        transition: transform 0.3s;
    }
    html.darkmode .switch-2 > div {
        background-color: #750000;
    }

    .switch-3 > div {
        color: white;
        /*padding-top: 0.1em;*/
        display: block;
        position: absolute;
        top: -0.05em;
        bottom: -0.05em;
        width: calc(33.33%);
        background-color: #990000;
        border-radius: 2px;
        /*box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.4);*/
        z-index: 1;
        pointer-events: none;
        transition: transform 0.3s;
    }
    html.darkmode .switch-3 > div {
        background-color: #750000;
    }

    .switch-2 label {
        float: left;
        width: calc(50% - 1px);
        position: relative;
        height: 1.5em;
        /*padding: 20px 0px 40px;*/
        overflow: hidden;
        border-left: solid 1px rgba(0,0,0,0.2);
        transition: color 0.3s;
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    }
    .switch-3 label {
        float: left;
        width: calc(33.33% - 1px);
        position: relative;
        height: 1.5em;
        /*padding: 20px 0px 40px;*/
        overflow: hidden;
        border-left: solid 1px rgba(0,0,0,0.2);
        transition: color 0.3s;
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    }

        .switch-2 label:first-of-type, .switch-3 label:first-of-type {
            border-left: none;
        }

        .switch-3 label input, .switch-2 label input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .switch-2 label.selected, .switch-3 label.selected {
            color: white;
        }

        .switch-2 label span, .switch-3 label span {
            z-index: 5;
            position: absolute;
            width: 100%;
            left: 0%;
        }