.btn-container{display:table-cell;vertical-align:middle;text-align:center}.btn-color-mode-switch{display:inline-block;margin:0;position:relative}.btn-color-mode-switch>label.btn-color-mode-switch-inner{margin:0;width:140px;height:40px;background-color:#fff;border-radius:26px;overflow:hidden;position:relative;transition:all .3s ease;box-shadow:inset 0 0 8px 0 hsla(0,0%,7%,.34);display:block}.btn-color-mode-switch>label.btn-color-mode-switch-inner:before{content:attr(data-on);position:absolute;font-size:16px;font-weight:600;top:7px;right:20px;color:#222}.btn-color-mode-switch>label.btn-color-mode-switch-inner:after{content:attr(data-off);width:70px;height:100%;background:#42b7e2;border-radius:26px;position:absolute;font-size:16px;display:flex;justify-content:center;left:2px;top:2px;text-align:center;transition:all .3s ease;box-shadow:0 0 6px -2px #111;padding:5px 0;color:#fff;font-weight:600}.btn-color-mode-switch input[type=checkbox]{cursor:pointer;width:100%;height:100%;opacity:0;position:absolute;top:0;left:0;z-index:1;margin:0}.btn-color-mode-switch input[type=checkbox]:checked+label.btn-color-mode-switch-inner{background-color:#fff}.btn-color-mode-switch input[type=checkbox]:checked+label.btn-color-mode-switch-inner:after{content:attr(data-on);left:68px}.btn-color-mode-switch input[type=checkbox]:checked+label.btn-color-mode-switch-inner:before{content:attr(data-off);right:auto;left:20px}