.mblToggleButton { position: relative; cursor: pointer; outline: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); padding: 0 8px 0 23px; height: 30px; border: 1px outset #b5bcc7; -webkit-border-radius: 2px; background-color: #5cb0ff; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff), color-stop(3.3333333333333335%, rgba(255, 255, 255, 0.1)), color-stop(0.5, rgba(255, 255, 255, 0.6)), color-stop(1, rgba(255, 255, 255, 0.3))); font-family: Helvetica; font-weight: normal; line-height: 30px; color: #131313; line-height: 30px; } .mblToggleButton.mblToggleButtonSelected { border-color: #769dc0; background-color: #0064c2; } .mblToggleButton.mblToggleButtonChecked { border-color: #769dc0; background-color: #007ef5; } .mblToggleButton.mblToggleButtonChecked::after { position: absolute; content: ""; top: 7.5px; left: 7px; width: 5px; height: 10px; border-color: #000000; border-width: 0.15em; border-style: none solid solid none; -webkit-transform: rotate(45deg) skew(10deg); -webkit-transform-origin: 50% 50%; } .mblToggleButton.mblToggleButtonChecked.mblToggleButtonSelected { border-color: #769dc0; background-color: #0064c2; } .mblToggleButton.mblToggleButtonChecked.mblToggleButtonSelected::after { border-color: #000000; } .mblToggleButton:disabled { cursor: default; color: grey; border-color: grey; background-color: #8fc9ff; }