.author_info_box_user { background: #fff; padding: 15px; } .author_info_box_user h3 { text-transform:uppercase; margin-top:0; } .author_info_box_description{ font-size:12px; margin-bottom:15px; color: #8a8a8a; } .author_info_box_input label { width: 150px; float: left; text-transform: capitalize; } .author_info_box_input .switch{ float: left; padding-bottom:20px; } .author_info_box_input{ clear:both; } .author_info_box_input { margin-bottom:20px; } .author_info_box_input.description label { display: block; margin-bottom:5px; } .author_info_box_input textarea{ width: 100%; } .cmn-toggle { position: absolute; margin-left: -9999px; visibility: hidden; } .cmn-toggle + label { display: block; position: relative; cursor: pointer; outline: none; user-select: none; } input.cmn-toggle-round + label { padding: 2px; width: 60px; height: 30px; background-color: #dddddd; border-radius: 30px; } input.cmn-toggle-round + label:before, input.cmn-toggle-round + label:after { display: block; position: absolute; top: 1px; left: 1px; bottom: 1px; content: ""; } input.cmn-toggle-round + label:before { right: 1px; background-color: #f1f1f1; border-radius: 30px; transition: background 0.4s; } input.cmn-toggle-round + label:after { width: 30px; background-color: #fff; border-radius: 100%; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); transition: margin 0.4s; } input.cmn-toggle-round:checked + label:before { background-color: #8ce196; } input.cmn-toggle-round:checked + label:after { margin-left: 32px; } input.cmn-toggle-yes-no + label { padding: 2px; width: 60px; height: 30px; } input.cmn-toggle-yes-no + label:before, input.cmn-toggle-yes-no + label:after { display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; color: #fff; font-size: 20px; text-align: center; line-height: 30px; } input.cmn-toggle-yes-no + label:before { background-color: #dddddd; content: attr(data-off); transition: transform 0.5s; backface-visibility: hidden; } input.cmn-toggle-yes-no + label:after { background-color: #8ce196; content: attr(data-on); transition: transform 0.5s; transform: rotateY(180deg); backface-visibility: hidden; } input.cmn-toggle-yes-no:checked + label:before { transform: rotateY(180deg); } input.cmn-toggle-yes-no:checked + label:after { transform: rotateY(0); }