body { margin: 0; overflow: hidden; } * { box-sizing: border-box; } button { z-index: 2; overflow: hidden; background-color: #00b6ff; border: none; border-radius: 50%; background-size: 66%; background-position: center; background-repeat: no-repeat; padding: 0; outline: none; -webkit-transition: background-color 0.2s; -moz-transition: background-color 0.2s; -ms-transition: background-color 0.2s; -o-transition: background-color 0.2s; transition: background-color 0.2s; } button:hover { background-color: #2eceff; } .panel { z-index: 1; overflow: hidden; background-color: white; transform: none; -webkit-transition: transform 0.2s ease-in-out; -moz-transition: transform 0.2s ease-in-out; -ms-transition: transform 0.2s ease-in-out; -o-transition: transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out; } .panel.hidden { transform: translate(-500px); } .shadow { box-shadow: rgba(0, 0, 0, 0.5) 0px 1px 4px 0px; } .switchBox { position: relative; overflow: hidden; -webkit-transition: background-color 0.2s ease-in-out; -moz-transition: background-color 0.2s ease-in-out; -ms-transition: background-color 0.2s ease-in-out; -o-transition: background-color 0.2s ease-in-out; transition: background-color 0.2s ease-in-out; background-color: #b8b8b8; cursor: pointer } .switchBox > .mover { position: absolute; width: 100%; height: 100%; top: 0; -webkit-transition: right 0.2s ease-in-out; -moz-transition: right 0.2s ease-in-out; -ms-transition: right 0.2s ease-in-out; -o-transition: right 0.2s ease-in-out; transition: right 0.2s ease-in-out; } .switchBox .circle { background-color: #ffffff; position: absolute; border-radius: 50%; } .numericBox { border: none; height: 100%; width: 100%; } .form { overflow-x: hidden; overflow-y: auto } .form > div { overflow: hidden; width: 100%; -webkit-transition: height 0.2s ease-in-out; -moz-transition: height 0.2s ease-in-out; -ms-transition: height 0.2s ease-in-out; -o-transition: height 0.2s ease-in-out; transition: height 0.2s ease-in-out; } .form > div > div { overflow: hidden; height: 100%; float: left; } .form > div > div:nth-child(0) { width: 50% } .form > div > div:nth-child(1) { width: 50% }