modunawa/resources/css/user-auth.css

/*========================================
            USER-FORM PAGE STYLE
=========================================*/
.user-form-part {
  padding-top: 140px/*30px*/;
  padding-bottom:100px;
}

.user-form-logo {
  text-align: center;
  margin-bottom: 25px;
}

.user-form-logo img {
  width: 200px;
}

.user-form-card {
  padding: 30px;
  border-radius: 8px;
  margin-bottom: 20px;
  background: var(--white);
  /*border: 1px solid var(--border);*/
  word-break:keep-all;
}

.user-form-title {
  text-align: center;
  margin-bottom: 40px;
}

.user-form-title h2 {
	margin-top:30px;	margin-bottom:30px;
	font-size: var(--h2size);
    line-height: var(--h1height);
  /*font-size: 28px;
	margin-bottom: 5px;
	*/
  line-height: 36px;
  
  color: var(--black);
}

.user-form-title p {
  text-transform: capitalize;
}

.user-form-title .txt_caution {display:inline-block; margin-top:40px; font-weight:400;}

.user-form-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.user-form-social {
  width: 100%;
}

.user-form-social li {
  margin-bottom: 20px;
}

.user-form-social li a {
	display:flex; align-items:center;
  width: 100%;
  font-size: 15px;
  padding: 10px 0px;
  border-radius: 8px;
  letter-spacing: 0.3px;
  text-align: center;
  text-transform: capitalize;
  color: var(--black);
  background: var(--white);
  border:1px solid #ddd;
}

.user-form-social li a i {
	display:flex; justify-content:center; width:50px; border-right:1px solid #ddd;
  font-size: 16px;
  margin-right: 20px;
}

.user-form-social li:last-child {
  margin-bottom: 0px;
}

.user-form-social .facebook i {
  color: var(--facebook);
}

.user-form-social .twitter  i {
  color: var(--twitter);
}

.user-form-social .google  i {
  color: var(--google);
}

.user-form-social .instagram  i {
  color: var(--instagram);
}

.user-form-divider {
  width: 1px;
  height: 240px;
  margin: 0px 50px;
  background: var(--border);
  position: relative;
  z-index: 1;
}

.user-form-divider p {
  width: 40px;
  height: 40px;
  font-size: 14px;
  font-weight: 500;
  margin: 0 auto;
  font-style: italic;
  line-height: 38px;
  border-radius: 50%;
  text-align: center;
  color: var(--gray);
  background: var(--white);
  border: 1px solid var(--border);
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.user-form {
  width: 100%;
}

.user-form .form-group {
  margin-bottom: 20px;
}

.form-button {
  text-align: center;
}

.form-button button {
  width: 100%;
  height: 45px;
  font-size: 14px;
  font-weight: 500;
  line-height: 45px;
  border-radius: 8px;
  letter-spacing: 0.3px;
  text-align: center;
  text-transform: uppercase;
  color: var(--white);
  background: var(--black);
}

.form-button p {
  font-size: 15px;
  margin-top: 12px;
  text-transform: capitalize;
}

.form-button p a {
  font-weight: 500;
  margin-left: 5px;
  color: var(--primary);
}

.form-button p a:hover {
  text-decoration: underline;
}

.user-form-remind {
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  background: var(--white);
  border: 1px solid var(--border);
}

.user-form-remind p {
  font-size: 15px;
  text-transform: capitalize;
}

.user-form-remind p a {
  font-weight: 500;
  margin-left: 5px;
  color: var(--primary);
}

.user-form-remind p a:hover {
  text-decoration: underline;
}

.user-form-footer {
  text-align: center;
  margin-top: 25px;
  margin-bottom: 40px;
}

.user-form-footer p {
  font-size: 14px;
  color: var(--gray);
}

.user-form-footer p a {
  color: var(--primary);
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}

.user-form-footer p a:hover {
  text-decoration: underline;
}

@media (max-width: 575px) {
  .user-form-card {
    padding: 20px;
  }
}

@media (max-width: 767px) {
  .user-form-group {
    display: inherit;
  }
  .user-form-divider {
    width: 100%;
    height: 1px;
    margin: 50px 0px;
  }
}


.user-form-card button {width:100%;}
.mem_veri_resend .user-form-group,
.active_failed .form-group, 
.mt_40 {margin-top:40px;}
.login_sso .user-form-card button,
.login .user-form-card button {max-width:none; background:var(--black);}
.login .page_link,
.login_sso .page_link {display:flex; justify-content:center; align-items:center; margin-bottom:40px;}
.login_sso .page_link {margin-bottom:10px}
.login .page_link a,
.login_sso .page_link a {display:block; color:var(--black);}
.login .page_link a:after,
.login_sso .page_link a:after {content:""; display:inline-block; width:1px; height:15px; margin:0 15px; background:#111;}
.login .page_link a:last-child:after,
.login_sso .page_link a:last-child:after {display:none;}

.signup button {max-width:none; background:var(--black);}
.agree_form .user-form-title {margin-bottom:80px;}
.agree_form .user-form-title h2 {font-size:36px;}
.agree_form h3 {font-size: var(--h5size); color:var(--sec);}
.agree_form textarea {width:100%; height:200px; padding:10px; border:1px solid #ddd; color:#666; font-size:14px;}
.agree_form .form-check {margin-bottom:0; padding:15px 15px 15px 40px; border-bottom:1px solid #ddd; color:var(--black);}
.agree_form .all_agree {background:#f6f6f6;  font-weight:500; border-top:2px solid var(--black);}
.agree_form .ph2 {margin-top:40px;}

.find_id .flex-row {width:100%; max-width:500px; margin:0 auto; margin-top:70px; justify-content:space-between;}
.find_id .flex-row button {width:49%;}

.divide .user-form-group {align-items: inherit;}
.divide .user-form-group .user-form-divider {height:auto;}
.divide .user-form-group h6 {display:flex; flex-flow:wrap; margin-bottom:10px;}
.divide .user-form-group h6 p {margin-left:auto; color:#878787; font-size: var(--bodysize); font-weight:400;}
.divide .user-form-group h6 strong {color:#C00;}
.divide label {margin-bottom: 2px; color: #7e7e7e; font-size: 14px; font-weight: 500;}
.divide .text-danger {font-size:14px;}
.divide .re:before {content:"*"; font-size:700; color:#C00; font-size:inherit;}
.divide .form-group li {display:flex; margin-top:5px;}
.divide .form-group li:first-child {margin-top:0;}
.divide .form-group li input {flex:2;}
.divide .form-group li select {flex:1; margin-left:5px; font-size:15px;}
.divide .form-group li button {flex:1; margin-left:5px; background:gray; border-radius:5px; color:#fff;}
.divide .form-group em {display:block; margin-top: 5px; font-style: normal; font-size:14px;}
.divide .form-check {text-align:center;}
.divide .form-button button {max-width:500px;}
.divide .user-form-remind {margin-top:50px;}

.signup_sel .user-form-title h2 {font-size: var(--h1size);}
.signup_sel .user-form-group {margin-top:80px;}
.signup_sel .user-form-group a {display:flex; flex-flow:column wrap; align-items:center;padding:40px; border:1px solid #ddd; border-radius:10px; font-size:var(--h4size); font-weight:500;}
.signup_sel .user-form-group a i {margin-bottom:20px; font-size:70px;}
.signup_sel .user-form-divider {background:none;}
.signup_sel .user-form-remind {border:none;}

@media (max-width: 768px) {
	.user-form-part {padding-top:60px;}
	.find_id .flex-row {max-width:none;}
	
	.divide .user-form-group {flex-flow:column wrap;}
	.divide .user-form-group .user-form-divider {height: 1px; width: 100%; margin: 50px 0;}
}

@media (max-width: 480px) {
	.user-form-part {padding-top:0;}

	.user-form-card button {max-width:none;}
	.user-form-title h2 {margin-bottom:10px; font-size:28px;}
	
	.signup_agree .user-form-title {margin-bottom:0;}
	.signup_agree .user-form-title h2 {font-size:28px;}
	.signup_agree .ph2 {margin-top:20px;}
}