.form-box { border: 1px solid #ddd; margin: 25px 0; padding: 30px 15px; border-radius: 20px;}
.form-box-noborder { margin: 25px 0; }

input + label {padding-top:0 !important;}

ul.form-item {
  display: flex;
  flex-direction: column;
  margin:0; padding:0;
}
ul.form-item >  li {
  margin:0; padding:0; margin-bottom:10px; list-style:none;
  display: flex;
  flex: 1;
}

ul.form-item.d-row >  li {
  display: block;
}

ul.form-item > li > label {
  min-width:150px; font-weight:bold; margin:0; padding-top:0.5em;
  display: flex;
  flex: none;
}
ul.form-item >  li .input-box-wrap {
  flex: 1;
}
.form-control.zfilestyle { width:auto !important; }
.bootstrap-filestyle .form-control[disabled] {background-color: transparent !important; opacity: 1;}

ul.form-item >  li .text-box-wrap {
  flex: 1;
  padding-top:0.5em;
  /*border-bottom:1px solid #ddd;*/
}

ul.form-item.no-space > li { margin-bottom:5px; }
ul.form-item.no-space > li > label,
ul.form-item.no-space >  li .text-box-wrap { padding-top:0; }


.form-control {
  -webkit-appearance: auto;
  -moz-appearance: auto;
  appearance: auto;

}

/* google recaptcha 때문에..*/
.btn-spin-block div { position:fixed; }

.form-inline .form-control { display:inline-block; width:auto;}
ul.form-item >  li .input-box-wrap label { margin-top:0.7em !important; }

@media (max-width: 768px) {
  ul.form-item >  li {
    display: block;
  }

  ul.form-item >  li .text-box-wrap {
    padding-bottom:5px;
    border-bottom:1px solid #ddd;
  }
}

.loginbox .form-control { border-radius:0; border:none; border-bottom:1px solid #ddd; width:100%; font-size:0.9rem}



.bootstrap-filestyle i.bi { line-height:1; font-size:1.1em; position:relative; top:-2px}
.bootstrap-filestyle .form-control { padding:0 5px; border-radius:0; border:none; border-bottom:1px solid #ddd; font-size:0.9rem; min-height:0;line-height:0;}
ul.form-item >  li .input-box-wrap .bootstrap-filestyle label {min-width:auto; margin-top:0 !important; }
ul.form-item:not(.d-row) >  li .input-box-wrap .bootstrap-filestyle { margin-top:0.7em !important; }


.bootstrap-filestyle .form-control:disabled {
    background-color: #f5f5f5;
    opacity: 1;
}



.form-control:focus {
  box-shadow: none;
}


.form-control[data-required="true"]:focus {
  border-color: #f00;
}
textarea.form-control { border:1px solid #ced4da; padding:10px; }

.required:after {
    content: ' *';
    color: #d0021b;
}

.form-control[readonly] {
    background-color: #fff;
    opacity: 1;
}


.range .range-input { display:inline-block; position:relative; }
.range .range-min { display:inline-block; margin-right:10px; font-size:0.9em;}
.range .range-max { display:inline-block; margin-left:10px; font-size:0.9em;}

.range {
  position: relative;
  margin-left:20px;
  display:flex;
}

.range .thumb {
  height: 30px;
  width: 30px;
  top: -40px;
  margin-left: -15px;
  text-align: center;
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transform-origin: bottom;
  transform-origin: bottom;
  -webkit-transition: -webkit-transform .2s ease-in-out;
  transition: -webkit-transform .2s ease-in-out;
  transition: transform .2s ease-in-out;
  transition: transform .2s ease-in-out,-webkit-transform .2s ease-in-out
}

.range .thumb,.range .thumb:after {
  position: absolute;
  display: block;
  border-radius: 50% 50% 50% 0
}

.range .thumb:after {
  content: "";
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  top: 0;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  background: #1266f1;
  z-index: -1
}

.range .thumb .thumb-value {
  display: block;
  font-size: 12px;
  line-height: 30px;
  color: #fff;
  font-weight: 500;
  z-index: 2
}

.range .thumb.active {
  -webkit-transform: scale(1);
  transform: scale(1)
}

.form-comment { font-size:0.9em; margin-top:5px; color: #b50000;}
.form-comment span { display:block; color:#d0021b; }
.form-error { display:none; font-size:0.9em; margin-top:5px; color:#d0021b; }
.form-subheader { border-top:2px dashed #279ebc; position:relative; margin:50px 0 30px 0;}
.form-subheader:after {
  content: attr(data-title);
  position:absolute;
  display:inline-block;
  padding:0 10px;
  left:50%;
  transform:translateX(-50%);
  top:-0.85em;
  z-index:99;
  background-color:#fff;
}


@media (max-width: 576px) {
  ul.form-item li {display:block;}
}


.input-wrap {position:relative; display:block; width:100%;}
.input-wrap > i { position:absolute; right:5px; top:0px; color:#999;font-size:1.4em;}
.input-wrap.empty > i { display:none;}
.input-wrap > i:hover { color:#000; }
.clear-input-value:before { position:absolute;top:8px; right:0px; }
.clear-input-value:after { content:'';position:absolute;right:0px;top:8px;width:1em;height:1em;background-color:rgba(200,200,200,0.3); border:1px solid #eee; border-radius:50%; }
.clear-input-value:hover:after {background-color:rgba(200,200,200,0.5);}


@media (max-width: 768px) {
  .clear-input-value:before { font-size:1.3em; top:5px; right:0px; }
  .clear-input-value:after { top:5px; width:1.3em;height:1.3em;}
}