/* The switch - the box around the slider */
/*.switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
    cursor: pointer;
}*/

.switch {
    position: relative;
    display: inline-block;
    width: 74px;
    height: 38px;
    cursor: pointer;
}

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }



    .switch #moon-img, .switch #moon-imgMobile {
        position: absolute;
        left: .2em;
        top: .2em;
        height: 70%;
    }

    .switch #sun-img, .switch #sun-imgMobile {
        position: absolute;
        right: 5px;
        top: 5px;
        height: 70%;
    }

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

.slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ececec;
    transition: .3s;
    border-radius: 34px;
    border: 1px solid transparent;
}

input:checked + .slider {
    background-color: #31353D;
    border: 1px solid #3c3c3c;
}

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

input:checked + .slider:before {
    -webkit-transform: translateX(22px);
    -ms-transform: translateX(22px);
    transform: translateX(22px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

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


.bg-icons {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 5px;
    color: #9c9c9c;
    font-size: 18px;
    padding: 0 8px;
}

.thumb {
    position: absolute;
    height: 30px;
    width: 30px;
    left: 3px;
    bottom: 3px;
    background-color: #3d3d3d;
    transition: .3s;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

    .thumb .iconify {
        font-size: 22px; 
        transition: .3s;
    }

#sun-img {
    color: #555;
    opacity: 1;
    display: block;
}

#moon-img {
    color: #555;
    opacity: 0;
    display: none;
}

#moon-imgMobile {
    color: #555;
    opacity: 0;
    display: none;
}

input:checked + .slider {
    background-color: #222;
}

    input:checked + .slider .thumb {
        transform: translateX(35px);
        background-color: #fff;
    }

        input:checked + .slider .thumb #sun-img {
            display: none;
        }
        input:checked + .slider .thumb #sun-imgMobile {
            display: none;
        }

        input:checked + .slider .thumb #moon-img {
            display: block;
            opacity: 1;
            color: #222;
        }

        input:checked + .slider .thumb #moon-imgMobile {
            display: block;
            opacity: 1;
            color: #222;
        }


.thumb {
    background-color: #3d3d3d;
}

    .thumb #sun-img {
        color: #ededed;
    }

    .thumb #sun-imgMobile {
        color: #ededed;
    }

input:checked + .slider .thumb {
    background-color: #fff;
}

    input:checked + .slider .thumb #moon-img {
        color: #000;
    }