/* toggle button start */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
.toggle {
    .container {
        display: flex;
        flex-direction: column;
        width: 80%;
   }
    @media (min-width: 500px) {
        .container {
            width: 50%;
       }
   }

    .container input[type="checkbox"] {
        display: none;
   }
    .btn {
        align-self: center;
        margin: 15px 0;
    }
    .box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 60px;
        height: 30px;
        background-color: black;
        transition: all 1s ease;
        position: relative;
        border-radius: 15px;
        cursor: pointer;
   }
    .box .ball {
        width: 30px;
        height: 30px;
        background-color: grey;
        transition: all 1s ease;
        position: absolute;
        border-radius: 50%;
        border: 3px solid black;
   }
    .box .scenary {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        transition: all 1s ease;
        padding: 0px 10px 0px 10px;
   }
    .box .scenary svg {
        width: 20px;
   }

}

/* toggle button end */