/* Ripple effect */

.ripple {
    background-position: center;
    transition: background 0.8s;
}

.ripple:hover {
    background: #47a7f5 radial-gradient(circle, transparent 1%, #47a7f5 1%) center/15000%;
}

.ripple:active {
    background-color: #6eb9f7;
    background-size: 100%;
    transition: background 0s;
}


/* Button style */

button {
    border: none;
    border-radius: 2px;
    padding: 12px 18px;
    font-size: 16px;
    text-transform: uppercase;
    cursor: pointer;
    color: white;
    background-color: #2196f3;
    box-shadow: 0 0 4px #999;
    outline: none;
}

body {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b3dced+0,ffffff+30,ffffff+70,bce0ee+100 */
    background: #b3dced;
    /* Old browsers */
    background: -moz-linear-gradient(left, #b3dced 0%, #ffffff 30%, #ffffff 70%, #bce0ee 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #b3dced 0%, #ffffff 30%, #ffffff 70%, #bce0ee 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #b3dced 0%, #ffffff 30%, #ffffff 70%, #bce0ee 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#b3dced', endColorstr='#bce0ee', GradientType=1);
    /* IE6-9 */
    text-align: justify;
}

.fl-n {
    float: none;
}

.fl-l {
    float: left;
}

.fl-r {
    float: right;
}

:root {
    --color-green: #00a878;
    --color-red: #fe5e41;
    --color-button: #fdffff;
    --color-black: #000;
}

.switch-button {
    display: inline-block;
}

.switch-button .switch-button__checkbox {
    display: none;
}

.switch-button .switch-button__label {
    background-color: var(--color-green);
    width: 15rem;
    height: 2rem;
    border-radius: 2rem;
    display: inline-block;
    position: relative;
}

.switch-button .switch-button__label:before {
    transition: .2s;
    display: block;
    position: absolute;
    width: 2rem;
    height: 2rem;
    background-color: var(--color-button);
    content: '';
    border-radius: 50%;
    box-shadow: inset 0px 0px 0px 1px var(--color-black);
}

.switch-button .switch-button__checkbox:checked+.switch-button__label {
    background-color: var(--color-red);
}

.switch-button .switch-button__checkbox:checked+.switch-button__label:before {
    transform: translateX(13rem);
}

datalist {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    writing-mode: vertical-lr;
    width: 400px;
}

option {
    padding: 0;
}

input[type="range"] {
    width: 400px;
    margin: 0;
}