/*---------------------------------------------*/ input { outline: none; border: none; } textarea { outline: none; border: none; } textarea:focus, input:focus { border-color: transparent !important; } input:focus::-webkit-input-placeholder { color: transparent; } input:focus:-moz-placeholder { color: transparent; } input:focus::-moz-placeholder { color: transparent; } input:focus:-ms-input-placeholder { color: transparent; } textarea:focus::-webkit-input-placeholder { color: transparent; } textarea:focus:-moz-placeholder { color: transparent; } textarea:focus::-moz-placeholder { color: transparent; } textarea:focus:-ms-input-placeholder { color: transparent; } input::-webkit-input-placeholder { color: #666d7e; } input:-moz-placeholder { color: #666d7e; } input::-moz-placeholder { color: #666d7e; } input:-ms-input-placeholder { color: #666d7e; } textarea::-webkit-input-placeholder { color: #666d7e; } textarea:-moz-placeholder { color: #666d7e; } textarea::-moz-placeholder { color: #666d7e; } textarea:-ms-input-placeholder { color: #666d7e; } /*---------------------------------------------*/ button { outline: none !important; border: none; background: transparent; } button:hover { cursor: pointer; } iframe { border: none !important; } /*////////////////////////////////////////////////////////////////// [ Utility ]*/ .txt1 { font-size: 13px; line-height: 1.5; color: #999999; } .txt2 { font-size: 13px; line-height: 1.5; color: #666666; } /*////////////////////////////////////////////////////////////////// [ login ]*/ .limiter { width: 100%; margin: 0 auto; } .container-login100 { width: 100%; min-height: 100vh; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding: 15px; } .wrap-login100 { /*width: 960px;*/ background: #fff; border-radius: 10px; overflow: hidden; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; justify-content: space-between; padding: 137px 130px 137px 95px; } /*------------------------------------------------------------------ [ ]*/ .login100-pic { width: 316px; } .login100-pic img { max-width: 100%; } /*------------------------------------------------------------------ [ ]*/ .login100-form { width: 290px; } .login100-form-title { font-size: 24px; color: #333333; line-height: 1.2; text-align: center; width: 100%; display: block; padding-bottom: 30px; } /*---------------------------------------------*/ .wrap-input100 { position: relative; width: 100%; z-index: 1; margin-bottom: 10px; } .input100 { font-size: 15px; line-height: 1.5; color: #70768e; display: block; width: 100%; background: #f4f6fb; height: 50px; border-radius: 25px; padding: 0 30px 0 68px; } /*------------------------------------------------------------------ [ Focus ]*/ .focus-input100 { display: block; position: absolute; border-radius: 25px; bottom: 0; left: 0; z-index: -1; width: 100%; height: 100%; box-shadow: 0px 0px 0px 0px; color: #00c3ed;; } .symbol-input100 { font-size: 15px; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; align-items: center; position: absolute; border-radius: 25px; bottom: 0; left: 0; width: 100%; height: 100%; padding-left: 35px; pointer-events: none; color: #666d7e; -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } .input100:focus+.focus-input100+.symbol-input100 { color: #00c3ed; padding-left: 28px; } /*------------------------------------------------------------------ [ Button ]*/ .container-login100-form-btn { width: 100%; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; justify-content: center; padding-top: 20px; } .login100-form-btn { font-size: 15px; line-height: 1.5; color: #fff; text-transform: uppercase; width: 100%; height: 50px; border-radius: 25px; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; justify-content: center; align-items: center; padding: 0 25px; } /*------------------------------------------------------------------ [ Responsive ]*/ @media (max-width: 992px) { .wrap-login100 { padding: 35px 90px 35px 85px; } .login100-pic { width: 35%; } .login100-pic { display: none; } .login100-form { width: 100%; } } @media (max-width: 768px) { .wrap-login100 { padding: 30px 80px 30px 80px; } .login100-form { width: 100%; } } @media (max-width: 576px) { .wrap-login100 { padding: 25px 15px 25px 15px; } }