:root {
  --primary-color:#017CE4;
}
.login_gradient { padding: 140px 0;background:f5f5f7;display: flex;align-items: center;justify-content: center;}
.form-group.login_input {  position: relative;  margin: 0 auto 30px; text-align: left; }
.form-group.login_input input {  height: 25px;  }
.form-group.login_input .control-label { position: absolute;height: 30px;top: 0;float: left;pointer-events: none;z-index: 1;color: #9e9e9e;font-size: 1rem;font-weight: normal;-webkit-transition: all 0.28s ease;transition: all 0.28s ease;padding: 0 10px;font-size: 18px;line-height: 49px;margin-left: 10px;}
.form-group.login_input .bar { position: relative; border-bottom: 0.0625rem solid #9e9e9e; display: block;}
.fab .form-group.login_input .bar { border-bottom: 0.0625rem solid #fff; }
.form-group.login_input .bar::before { content: ''; height: 0.125rem;width: 0; left: 50%;  bottom: -0.0625rem;position: absolute; background: #ff9800;-webkit-transition: left 0.28s ease, width 0.28s ease; transition: left 0.28s ease, width 0.28s ease;z-index: 2; }
.fab .form-group.login_input .bar::before { background: #fff;}
.form-group.login_input input { display:block;background:none;padding:16px;font-size:1rem;line-height:1.9;width:100%;-webkit-transition: all 0.28s ease; transition: all 0.28s ease;box-shadow:none;height:52px;border:1px solid #D2D4DF;border-radius:4px;}
.form-group.login_input.my_profile input{width: 80%;}
.form-group.login_input input[type="file"] { line-height: 1;}
.form-group.login_input input[type="file"] ~ .bar { display: none; }
.form-group.login_input input:focus,
.form-group.login_input input:valid,
.form-group.login_input input.form-file,
.form-group.login_input input.has-value { color:#333;}
.form-group.login_input input:focus ~ .control-label,
.form-group.login_input.custom_label label,
.form-group.login_input input.form-file ~ .control-label,
.form-group.login_input input.has-value ~ .control-label { font-size:14px;color:gray;top:-1.6rem;background:#fff;color:var(--primary-color);font-weight: 600;}
.form-group.login_input input:focus { outline:none;border:1px solid var(--primary-color); }
.fab .form-group.login_input input:focus ~ .control-label { color:#fff;}
.form-group.login_input input:focus ~ .bar::before {  width:100%;left: 0; }
.login-logo-wrap { margin-bottom:40px;}
.login-logo-wrap img { width:155px;display:block;margin:0 auto 5px;}
.login-logo-wrap small { color:#7A7A84;font-size:16px;}
.box-white { background:#fff;width:750px;margin:0 auto;padding:40px;box-shadow:0px 4px 16px rgba(0,0,0,0.14); border-radius:4px;}
.logo_head,
.logo_head:hover { font-size:22px;text-align:center;color:#42aca6;width:100%;display:block;text-decoration:none;}
.logo_head span { font-weight: 700;}
.domain_div { display: flex; border: 1px solid #d2d4df;  height: 52px;  width: 100%;border-radius:4px;align-items: center; justify-content: space-between;}
.static_http {color: #7A7A84; font-size: 16px;padding: 0 16px;width: 12%;}
.input_domain { width:43%;}
.input_domain input { width: 100%;border: none; height: 50px; border-left: 1px solid #d2d4df;  padding: 0 16px;border-right: 1px solid #d2d4df;font-size: 18px; color: #7A7A84;}
.remember-me input[type="checkbox"] { width:20px;height:20px;vertical-align:middle;}
.btn.btn-primary.Started{ font-size: 14px; text-transform: uppercase;font-weight: 700;  background: #42aca6;border: 1px solid;  height: 53px;  border-radius: 0px 8px 8px 0; right: -2px;position: relative;top: -1px;color: #fff; font-family: 'SegoeUI'; padding: 12px 25px; width: 22%;}
.forward { color: #7A7A84;font-size: 16px; padding: 0 16px;} 
.box-white.w_400 { width: 400px;}
.forgot { font-size: 14px; color:var(--primary-color);font-weight: 600; background: #fff;}
.btn.btn-primary.login { width: 100%;background:var(--primary-color);font-size: 14px; font-weight: 600;height: 50px; border-radius:4px; border: 1px solid #42aca6;}
.login_100 { height:100vh;}
span.mrk-cmplt:focus {
  background-color: yellow;
}