.profile #footer .cancel, .profile #footer .submit, .payment #footer .cancel, .payment #footer .submit, .shipping #footer .cancel, .shipping #footer .submit, .settings #footer .cancel, .settings #footer .submit, .login #footer .cancel, .login #footer .submit, .signup #footer .cancel, .signup #footer .submit { display: block } .login #login { display: block } #login { display: none; } .signup #signup { display: block } #signup { display: none; } .profile #profile { display: block } #profile { display: none; } .payment #payment { display: block } #payment { display: none; } .shipping #shipping { display: block } #shipping { display: none; } .settings #settings { display: block } #settings { display: none; } form { margin-top:20px; } form h2 { text-align: center; margin: 0; padding: 24px 10px 8px 10px; font-size: 14px; color: #000; letter-spacing: 1px; font-weight: bold; } input { font-family:pfd, sans-serif; font-size:14px; outline:none!important; color:#000; letter-spacing:1px; text-transform:uppercase; height:35px; text-align:center; margin: 0px auto; display:block; margin-top:4px; width: calc(100vw - 10px); border:1px solid #a9a9a9; } .half-input { margin: 0px auto; display: block; margin-top: 4px; width: calc(100vw - 10px); border: 1px solid #a9a9a9; overflow: auto; } .half-input input, .half-input select { position: relative; margin: 0; border:none; box-sizing: border-box; float: left; width: 50%; } .half-input > input:first-child { border-right: 1px solid #a9a9a9; } .toggle-container { margin: 0px auto; display: table; margin-top: 10px; width: calc(100vw - 10px); box-sizing: border-box; padding:10px 18px 2px; font-size:14px; } .toggle-row { display:block; padding-bottom:16px; } .toggle-container .caption { display:table-cell; vertical-align:middle; width:100%; } .toggle-container .toggle { display:table-cell; vertical-align:middle; text-align:right } .toggle-container h3 { margin:0; } input.switch { max-height: 0; max-width: 0; opacity: 0; } input.switch + label { display: inline-block; position: relative; box-shadow: inset 0 0 0px 1px rgba(0,0,0,.7); text-indent: -5000px; height: 30px; width: 50px; border-radius: 15px; } input.switch + label:before { content: ""; position: absolute; display: block; height: 30px; width: 30px; top: 0; left: 0; border-radius: 15px; background: rgba(19, 191, 17, 0); -moz-transition: .25s ease-in-out; -webkit-transition: .25s ease-in-out; transition: .25s ease-in-out; } input.switch + label:after { content: ""; position: absolute; display: block; height: 30px; width: 30px; top: 0; left: 0px; border-radius: 15px; background: white; box-shadow: inset 0 0 0 1px rgba(0,0,0,.7); -moz-transition: .25s ease-in-out; -webkit-transition: .25s ease-in-out; transition: .25s ease-in-out; } input.switch:checked + label:before { width: 50px; background: #136f11; } input.switch:checked + label:after { left: 20px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.7); } .container { position:absolute; height:calc(100% - 88px); width:100vw; box-sizing:border-box; display: flex; flex-direction: column; margin:0; left:0;right:0; top:48px; } .container-row { box-sizing:border-box; } .container-fill { flex: 1; align-items: center; justify-content: center; position:relative; } .container-message { font-size:12px; letter-spacing:0.5px; text-align:center; position:absolute; top:50%; left:50%; width:100%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .alert-notice { color:red!important }