.rocker-switch-container{display:inline-block;--onColor:#0084d0;--offColor:#bd5757;--borderColor:#eee;--activeColorLabel:#fff;--inactiveColorLabel:#333}.rocker-switch-container .mid{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding-top:1em}.rocker-switch-container .rocker{display:inline-block;position:relative;font-size:.6em;font-weight:700;text-align:center;text-transform:uppercase;color:var(--inactiveColorLabel);width:7em;height:4em;overflow:hidden;border-bottom:.5em solid var(--borderColor);-webkit-box-sizing:border-box;box-sizing:border-box;font-family:Arial,sans-serif;font-size:100%;user-select:none;-webkit-user-select:none;-ms-user-select:none;-webkit-touch-callout:none;-o-user-select:none;-moz-user-select:none}.rocker-switch-container .rocker-small{font-size:.75em;margin:1em}.rocker-switch-container .rocker:before{content:"";position:absolute;top:.5em;left:0;right:0;bottom:0;background-color:#999;border:.5em solid var(--borderColor);border-bottom:0}.rocker-switch-container .rocker input{opacity:0;width:0;height:0}.rocker-switch-container .switch-left,.rocker-switch-container .switch-right{cursor:pointer;position:absolute;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;height:2.5em;width:3em;-webkit-transition:.2s;transition:.2s}.rocker-switch-container .switch-left{height:2.4em;width:2.75em;left:.85em;bottom:.4em;background-color:#ddd;-webkit-transform:rotate(15deg) skewX(15deg);transform:rotate(15deg) skewX(15deg)}.rocker-switch-container .switch-right{right:.5em;bottom:0;background-color:var(--offColor);color:var(--activeColorLabel)}.rocker-switch-container .switch-left:before,.rocker-switch-container .switch-right:before{content:"";position:absolute;width:.4em;height:2.45em;bottom:-.45em;background-color:#ccc;-webkit-transform:skewY(-65deg);transform:skewY(-65deg)}.rocker-switch-container .switch-left:before{left:-.4em}.rocker-switch-container .switch-right:before{right:-.375em;background-color:transparent;-webkit-transform:skewY(65deg);transform:skewY(65deg)}.rocker-switch-container input:checked+.switch-left{background-color:var(--onColor);color:var(--activeColorLabel);bottom:0;left:.5em;height:2.5em;width:3em;-webkit-transform:rotate(0deg) skewX(0deg);transform:rotate(0deg) skewX(0deg)}.rocker-switch-container input:checked+.switch-left:before{background-color:transparent;width:3.0833em}.rocker-switch-container input:checked+.switch-left+.switch-right{background-color:#ddd;color:var(--inactiveColorLabel);bottom:.4em;right:.8em;height:2.4em;width:2.75em;-webkit-transform:rotate(-15deg) skewX(-15deg);transform:rotate(-15deg) skewX(-15deg)}.rocker-switch-container input:checked+.switch-left+.switch-right:before{background-color:#ccc}.rocker-switch-container input:focus+.switch-left{color:var(--inactiveColorLabel)}.rocker-switch-container input:checked:focus+.switch-left,.rocker-switch-container input:focus+.switch-left+.switch-right{color:var(--activeColorLabel)}.rocker-switch-container input:checked:focus+.switch-left+.switch-right{color:var(--inactiveColorLabel)}