­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ /* TYPE Switcher */ .usof-form-row.type_switch .usof-form-row-control { display: inline-block; vertical-align: top; } .usof-form-row.type_switch.desc_2 .usof-form-row-desc { display: inline-block; vertical-align: top; position: relative; top: auto !important; right: auto !important; margin-top: 9px; } .usof-switcher { line-height: 20px; margin: 5px 0; } .usof-switcher > input { display: none; } .usof-switcher > label { display: flex; align-items: center; } .usof-switcher-box { flex-shrink: 0; position: relative; width: 50px; height: 30px; margin-right: 10px; border-radius: 18px; box-shadow: 0 1px 0 rgba(0,0,0,0.08) inset; background-color: #eee; transition: background 0.2s; } .usof-switcher > label:hover .usof-switcher-box { background-color: #e5e5e5; } .usof-switcher > input:checked + label .usof-switcher-box { background-color: #0073aa; } .usof-form-row.color_yellow .usof-switcher > input:checked + label .usof-switcher-box { background-color: #f90; } .usof-switcher-box > i { position: absolute; top: 3px; left: 3px; height: 24px; width: 24px; border-radius: 50%; box-shadow: 0 1px 1px rgba(0,0,0,0.15), 0 1px 4px rgba(0,0,0,0.15); background-color: #fff; transition: left 0.2s, right 0.2s; } .usof-switcher > input:checked + label .usof-switcher-box > i { left: 23px; } .usof-form-row.beta .usof-switcher-text:after { content: 'BETA'; font-size: 10px; padding: 2px 5px; margin: 0 5px; background: #f90; color: #fff; }