﻿

.container {
    /* max-width: 1000px; */
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-color: #f9f9f9;
}

.switch-holder {
    display: flex;
    padding: 10px 20px;
    border-radius: 10px;
    /*margin-bottom: 30px;*/
    /*box-shadow: -8px -8px 15px rgba(255,255,255,.7), 10px 10px 10px rgba(0,0,0, .3), inset 8px 8px 15px rgba(255,255,255,.7), inset 10px 10px 10px rgba(0,0,0, .3);*/
    justify-content: space-between;
    align-items: center;
}

.switch-label {
    width: 150px;
    text-align : right;
    padding-right : 10px;
}

    .switch-label i {
        margin-right: 5px;
    }

.switch-toggle {
    height: 40px;
}

    .switch-toggle input[type="checkbox"] {
        position: absolute;
        opacity: 0;
        z-index: -2;
    }

        .switch-toggle input[type="checkbox"] + label {
            position: relative;
            display: inline-block;
            width: 100px;
            height: 40px;
            border-radius: 20px;
            margin: 0;
            cursor: pointer;
            border:1px solid #e1e1e1;
            /*box-shadow: inset -8px -8px 15px rgba(255,255,255,.6), inset 10px 10px 10px rgba(0,0,0, .25);*/
        }

            .switch-toggle input[type="checkbox"] + label::before {
                position: absolute;
                content: 'Hide';
                font-size: 13px;
                text-align: center;
                line-height: 25px;
                top: 6px;
                left: 8px;
                width: 45px;
                height: 25px;
                border-radius: 20px;
                background-color: #d1dad3;
                /*box-shadow: -3px -3px 5px rgba(255,255,255,.5), 3px 3px 5px rgba(0,0,0, .25);*/
                transition: .3s ease-in-out;
            }

        .switch-toggle input[type="checkbox"]:checked + label::before {
            left: 50%;
            content: 'Show';
            color: #fff;
            background-color: #00b33c;
            /*box-shadow: -3px -3px 5px rgba(255,255,255,.5), 3px 3px 5px #00b33c;*/
        }



@media (prefers-color-scheme: dark) {
    .container {
        background-color: #1b1b1b;
    }
    .switch-toggle input[type="checkbox"] + label {
        border: 1px solid #515151;
    }
        .switch-toggle input[type="checkbox"] + label::before {
            background-color: #4d514e;
        }
}