.form-container{ font-family: 'Poppins', sans-serif; background-color: #1F4A62; border-radius: 5px; box-shadow: 3px 3px 0 #0E283D, 6px 6px 0 rgba(255,255,255,0.1); } .form-container .title{ color: #fff; background-color: #235773; font-size: 30px; font-weight: 600; letter-spacing: 1px; text-transform: capitalize; padding: 10px 15px; margin: 0 0 20px 0; border-radius: 5px; } .form-container .form-horizontal{ width: 65%; padding: 0 10px 5px 15px; display: inline-block; } .form-horizontal .form-group{ margin: 0 0 15px; } .form-horizontal .form-control{ color: #555; background-color: #fff; font-size: 13px; letter-spacing: 1px; height: 30px; padding: 2px 10px; box-shadow: 0 0 5px -3px #333; border: none; border-radius: 5px; transition: all 0.3s; } .form-horizontal .form-control:focus{ box-shadow: none; border: none; } .form-horizontal .form-control::placeholder{ color: rgba(0,0,0,0.7); font-size: 13px; text-transform: capitalize; } .form-horizontal .btn{ color: #fff; background-color: #0A2839; font-size: 14px; font-weight: 600; letter-spacing: 1px; padding: 6px 20px; margin: 0 10px 10px 0; border: none; border-radius: 5px; transition: all 0.3s ease; } .form-horizontal .btn:hover, .form-horizontal .btn:focus{ color: #0A2839; background-color: #fff; box-shadow: 0 0 5px #0A2839 inset; } .form-horizontal .remember-checkbox{ display: inline-block; } .form-horizontal .main-checkbox{ width: 13px; height: 13px; border: 1px solid rgba(255,255,255,0.5); margin: 5px 0 0 0; display: inline-block; position: relative; } .form-horizontal .main-checkbox label{ width: 13px; height: 13px; position: absolute; top: 0; left: 0; cursor: pointer; } .form-horizontal .main-checkbox label:after{ content: ""; width: 8px; height: 4px; border: 2px solid #fff; border-top: none; border-right: none; opacity: 0; transform: rotate(-45deg); position: absolute; top: 3px; left: 2px; } .form-horizontal .main-checkbox input[type=checkbox]{ visibility: hidden; } .form-horizontal .main-checkbox input[type=checkbox]:checked + label:after{ opacity: 1; } .form-horizontal .text{ color: #fff; font-size: 12px; line-height: 20px; padding-top: 2px; margin-left: 3px; display: inline-block; vertical-align: top; } .form-container .form-icon{ color: rgba(255,255,255,0.5); font-size: 70px; text-align: center; width: 33%; margin: 10px 0; vertical-align: top; display: inline-block; }