html, body { text-align: center; position: relative; padding: 0; margin: 0; width: 100%; height: 98%; color: #000; font-family: serif, Arial; background:#eeeeee; } input[type="text"]::-webkit-input-placeholder { color: #cccccc; } input[type="text"]:focus { outline: none; } input[type="password"]:focus { outline: none; } input[type="number"]:focus { outline: none; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } label{ font:14px sans-serif; color:#fcb000; width:60%; position:relative; text-align:left; margin-top:10px; font-weight:100; margin-bottom:10px;} .form{ width:100%; height:100%; position:relative;} .nn1{position:absolute; right:35px; top:75px; font-size:16px; font-weight:normal;} .ff{ font:30px "PT Sans"; color:#662352; position:absolute; right:15%; margin-top:1%; } #err{ display:none;} .mine{position:absolute; width:100%; background:white; color:#313030; z-index:999999; font:18px "PT Sans"; padding-left:5%; padding-right:5%; text-align:left; top:40%;} .mine div{font:18px "PT Sans"; font-weight:bold; margin-top:10px; margin-bottom:10px;} .mine hr{ border:none; border-bottom:1px solid #1F1F1F; width:100%; margin-top:0px; margin-bottom:10px;} .mine a{ display:block; background:#BC163A; color:white;font:18px "PT Sans"; text-align:center; padding-top:10px; padding-bottom:10px; margin-bottom:10px; margin-top:10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;} .hh3{font:16px Tahoma; color:#000; margin-top:10px; margin-bottom:20px; font-weight:bold; margin-left:20px; margin-right:20px; text-align:left;} #pre{color:#252747; font:14px "PT Sans"; text-align:left; position:relative; margin-left:2.5%; float:left;} h4 { color: #000000; text-align: center; font-size: 17px; font-weight: 100; font-family: sans-serif; display: inline-block; padding: 0; margin: 0px; } #input_submitBtn { border: none; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 3px; font-size: 12px; padding: 15px; text-decoration: none; color: #000; font: 16px sans-serif; width: 100%; margin-top: 20px; background: #fcb000; font-weight: 100; } .no1{ background:#fff; width:90%; position:relative; margin:0 auto; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin-bottom:20px;} .no2{ background:#fff; width:90%; position:relative; margin:0 auto; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;} .red{ width:90%; font:12px Tahoma; font-weight:bold; color:red; margin:0 auto; margin-top:10px; text-align:left;} .header { background: #fcb000; text-align: center; padding: 15px; overflow: hidden; } .field { display: flex; flex-flow: column-reverse; width: 95%; margin: 0 auto; } label, .input { transition: all 0.2s; } label:focus { color: #f5b800; } .input { font-size: 1.5em; border: 0; border-bottom: 1px solid #ccc; background: transparent; } .input:focus { outline: 0; border-bottom: 2px solid #f5b800; } .input:placeholder-shown + label { min-width: 66%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: text; transform-origin: left bottom; transform: translate(0, 2.125rem) scale(1.5); font-weight: 100; font-size: 14px; color: #cccccc; } ::-webkit-input-placeholder { transition: inherit; opacity: 0; } .input:focus { opacity: 1; } .input + label, .input:focus + label { transform: translate(0, 0) scale(1); /* [1] */ cursor: pointer; /* [2] */ color: #fcb000; } .fielderror { font-size: 1.5em; border: 0; background: transparent; border-bottom: 2px solid #f00; }