/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 14.2.2020, 18:23:20
    Author     : Enrico
*/

        .switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
        }

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

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #DC143C;
            -webkit-transition: .4s;
            transition: .4s;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            -webkit-transition: .4s;
            transition: .4s;
        }

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

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

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

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

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








        .containerr {
            position: relative;
            padding-left: 35px ;
            margin-bottom: 15px;
            cursor: pointer;
            font-size: 16px;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        /* Hide the browser's default checkbox */
        .containerr input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
            height: 0;
            width: 0;
        }

        /* Create a custom checkbox */
        .checkmarkk {
            position: absolute;
            top: 0;
            left: 0;
            height: 25px;
            width: 25px;
            background-color: #eee;
        }

        /* On mouse-over, add a grey background color */
        .containerr:hover input ~ .checkmarkk {
            background-color: #ccc;
        }

        /* When the checkbox is checked, add a blue background */
        .containerr input:checked ~ .checkmarkk {
            background-color: #f33621;
        }

        /* Create the checkmark/indicator (hidden when not checked) */
        .checkmarkk:after {
            content: "";
            position: absolute;
            display: none;
        }

        /* Show the checkmark when checked */
        .containerr input:checked ~ .checkmarkk:after {
            display: block;
        }

        /* Style the checkmark/indicator */
        .containerr .checkmarkk:after {
            left: 9px;
            top: 5px;
            width: 5px;
            height: 10px;
            border: solid white;
            border-width: 0 3px 3px 0;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
        }











        .switchh {
            position: relative;
            display: inline-block;
            width: 120px;
            height: 45px;
        }

        .switchh input {display:none;}

        .sliderr {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ca2222;
            -webkit-transition: .4s;
            transition: .4s;
        }

        .sliderr:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            -webkit-transition: .4s;
            transition: .4s;
        }

        input:checked + .sliderr {
            background-color: #2ab934;
        }

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

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

        /*------ ADDED CSS ---------*/
        .onn
        {
            display: none;
        }

        .onn, .offf
        {
            color: white;
            position: absolute;
            transform: translate(-50%,-50%);
            top: 50%;
            left: 50%;
            font-size: 10px;
            font-family: Verdana, sans-serif;
        }

        input:checked + .sliderr .onn
        {display: block;}

        input:checked + .sliderr .offf
        {display: none;}

        /*--------- END --------*/

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

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