.react-toggle { background-color: transparent; border: 0; bottom: -5px; cursor: pointer; display: inline-block; padding: 0; position: relative; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: transparent; touch-action: pan-x; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .react-toggle-screenreader-only { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .react-toggle--disabled { cursor: not-allowed; opacity: 0.5; -webkit-transition: opacity 0.25s; transition: opacity 0.25s; } .react-toggle-track { background-color: #4D4D4D; border-radius: 30px; height: 24px; padding: 0; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; width: 50px; } .react-toggle-track-check { bottom: 0px; height: 10px; left: 8px; line-height: 0; margin-bottom: auto; margin-top: auto; opacity: 0; position: absolute; top: 0px; -webkit-transition: opacity 0.25s ease; -moz-transition: opacity 0.25s ease; transition: opacity 0.25s ease; width: 14px; } .react-toggle--checked .react-toggle-track-check { opacity: 1; -webkit-transition: opacity 0.25s ease; -moz-transition: opacity 0.25s ease; transition: opacity 0.25s ease; } .react-toggle-track-x { bottom: 0px; height: 10px; line-height: 0; margin-bottom: auto; margin-top: auto; opacity: 1; position: absolute; right: 10px; top: 0px; -webkit-transition: opacity 0.25s ease; -moz-transition: opacity 0.25s ease; transition: opacity 0.25s ease; width: 10px; } .react-toggle--checked .react-toggle-track-x { opacity: 0; } .react-toggle-thumb { background-color: #FAFAFA; border: 1px solid #4D4D4D; border-radius: 50%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; height: 22px; left: 1px; position: absolute; top: 1px; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms; transition: all 0.25s ease; width: 22px; } .react-toggle--checked .react-toggle-thumb { left: 27px; }