.redux-container-switch .switch-options{min-height:30px;margin-right:10px;top: 6px;position: relative;}.redux-container-switch .switch-options label{cursor:pointer}.redux-container-switch .switch-options input{display: initial ! important;} .redux-container-switch .cb-enable,.redux-container-switch .cb-disable{padding:0 10px;border-width:1px;border-style:solid;-webkit-appearance:none;white-space:nowrap;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.redux-container-switch .cb-enable span,.redux-container-switch .cb-disable span{line-height:30px;display:block;font-weight:700;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;-ms-user-select:none;user-select:none}.redux-container-switch .cb-enable,.redux-container-switch .cb-disable,.redux-container-switch .cb-enable span,.redux-container-switch .cb-disable span{display:block;float:left}.redux-container-switch .cb-enable{border-right:0;border-radius:3px 0px 0px 3px;-moz-border-radius:3px 0px 0px 3px;-webkit-border-radius:3px 0px 0px 3px}.redux-container-switch .cb-enable.selected{color:#fff}.redux-container-switch .cb-disable{border-left:0;border-radius:0px 3px 3px 0px;-moz-border-radius:0px 3px 3px 0px;-webkit-border-radius:0px 3px 3px 0px}.redux-container-switch .cb-disable.selected{color:#fff} .ios7-switch { /* display: inline-block; */ position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; tap-highlight-color: transparent; } .ios7-switch input { opacity: 0; position: absolute; } .ios7-switch input + span { position: relative; display: inline-block; width: 42px; height: 14px; background: rgb(124, 144, 164); /* box-shadow: inset 0 0 0 0.0625em #cacaca; */ border-radius: 22em; vertical-align: -0.15em; transition: all 0.40s cubic-bezier(.17,.67,.43,.98); } .ios7-switch:active input + span, .ios7-switch input + span:active { box-shadow: inset 0 0 0 2em #ccc; } .ios7-switch input + span:after { position: absolute; display: block; content: ''; width: 22px; height: 22px; border-radius: 10em; top: -4px; left:0px; background: white; box-shadow: inset 0 0 0 0.01em rgba(0,0,0,0.25), 0 0 0.15em rgba(0,0,0,0.20), 0.1em 0.04em 0.2em rgba(0,0,0,0.25); transition: all 0.25s ease-out; } .ios7-switch:active input + span:after, .ios7-switch input + span:active:after { width:2.7em; } .ios7-switch input:checked + span { box-shadow: inset 0 0 0 2em rgb(19, 163, 21); } .ios7-switch input:checked + span:after { left: 22px; background: rgb(0, 193, 26); box-shadow: rgba(0, 0, 0, 0.24) 0px 2px 3px 0px; } .ios7-switch:active input:checked + span:after, .ios7-switch input:checked + span:active:after { left: 2.25em; } /* accessibility styles */ .ios7-switch input:focus + span:after { box-shadow: inset 0 0 0 0.03em rgba(0,0,0,0.15), 0 0 0.05em rgba(0,0,0,0.08), 0 0.1em 0.2em rgba(0,0,0,0.3); background: #fff; } .ios7-switch input:focus + span { /* box-shadow: inset 0 0 0 1.0625em #dadada;*/ } .ios7-switch input:focus:checked + span { /* box-shadow: inset 0 0 0 2em #31409e;*/ } .ios7-switch input:focus:checked + span:after { background: rgb(0, 193, 26) !important; box-shadow: rgba(0, 0, 0, 0.24) 0px 2px 3px 0px; } /* reset accessibility style on hover */ .ios7-switch:hover input:focus + span:after { box-shadow: inset 0 0 0 0.03em rgba(0,0,0,0.1), 0 0 0.05em rgba(0,0,0,0.05), 0 0.1em 0.2em rgba(0,0,0,0.2); background: #fff; } .ios7-switch:hover input:focus + span { box-shadow: inset 0 0 0 0.0625em #ccc; } .ios7-switch:hover input:focus:checked + span { box-shadow: inset 0 0 0 2em rgb(19, 163, 21); }