/* Slider style checkboxes with live update */
        /* The switch - the box around the slider */
        /* Use: */
        /* <label class="toggleSwitch"><input type="checkbox" id='myTickBox' value='0' onchange='save_setting()'><span class="slider round"></span></label> */

        .toggleSwitch {
            position: relative;
            display: inline-block;
            width: 45px;
            height: 16px;
            margin-left: 10px;
            margin-top: 5px;
        }

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

        /* The slider */
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: var(--slider-off);
            -webkit-transition: .4s;
            transition: .4s;
        }

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

        input:checked+.slider {
            background-color: var(--slider-on);
        }

        input:focus+.slider {
            box-shadow: 0 0 1px var(--slider-on);
        }

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

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

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

        /* Custom Checkbox */
        /* Each checkbox needs a unique ID but same name */
        /* Use: */
        /* <div class='adm4TickBox'><input type='checkbox' id='tick1' name='myTickbox' value='0'><label for='tick1'></label></div> */

        .adm4TickBox {
			width: 15px;
			position: relative;
			margin: 5px auto;
            display:inline-block;
            vertical-align: middle;
			label {
				width: 15px;
				height: 15px;
				cursor: pointer;
				position: absolute;
				top: 3px;
				left: 0;
				background: rgba(255,255,255,0.8);
				border-radius: 4px;
				box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, .4); 

				&:after {
					content: '';
					width: 7px;
					height: 3px;
					position: absolute;
					top: 4px;
					left: 2px;
					border: 3px solid #4444ff;
					border-top: none;
					border-right: none;
					background: transparent;
					opacity: 0;
					transform: rotate(-55deg);
				}

				&:hover::after {
					opacity: 0.1;
				}
			}

			input[type=checkbox] {
				visibility: hidden;

				&:checked+label:after {
					opacity: 1;
				}
			}
		}