div.input-box{
  background: #fff;
  border: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  /*margin: 0 0 1.25rem 5px;*/
  padding: .375rem .625rem;

  box-sizing: border-box;
  position: relative;
}
div.disable{
  background: #eee;
  border: 1px solid #ddd;
  padding: .375rem .625rem;
  color:#777;
  margin-bottom: 10px;
  font-size: .8em;
}
div.input-box + div.input-box:not(.w2),
div.btn-box{
  margin-top: 10px;
}
div.input-box.w3{
  width: 30%;
}
div.input-box.w2{
  width: 48%;
}
div.input-box.innerbox{
  margin-bottom: 0;
}
div.input-box.focused,
div.input-box input.focused,
div.input-box textarea.focused,
div.input-box option.focused{
  background-color: #dee7ff;
}
div.input-box.disabled,
div.input-box input:disabled,
div.input-box textarea:disabled,
div.input-box option:disabled{
  background-color: #f7f7f7;
}

div.input-box label{
  font-size:.6em;
  color:#83ccd2;
  line-height: 1em;
  margin-bottom: 1em;
  text-align: left;
}

div.input-box input[type=text],
div.input-box input[type=number],
div.input-box input[type=password],
div.input-box input[type=mail],
div.input-box select{
    font-size:.8em;
}

input[type=text],
input[type=number],
input[type=password],
input[type=mail],
textarea {
  font-size: 0.9em;
  line-height: 16px;
  padding: 6px 10px 5px;
  border: 1px solid #eee;
  position: relative;
}
::placeholder {
  color:#ccc;
}
div.input-box.small-1,
div.input-box.small-1.focused{
  width: 95px;
}
div.input-box.no-bottom-margin{
  margin-bottom: 0
}
div.input-box.noborder{
  border: none;
}
textarea{
  height: 50px;
}
textarea.big{
  height: 100px;
}
textarea.tall{
  height: 250px;
}



div.form-box{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}

div.form-box{
  margin-top: 20px;
}
div.form-box-item{

  display: flex;
  flex-direction: column;
}
div.form-box-item label {
  font-size: .8em;
  color: #777;
}
div.form-box-item label + input,
div.form-box-item-com  input{
  margin-top: 0;
}


input.default-input {
  height: 25px;
  padding: 10px 16px 8px;
  border-radius: 4px;
  border: 1px solid hsl(0,0%,70%);
  background: #fff;
  line-height: 1.5;
  font-size: 16px;
  margin: 1em 0;
}

/* BTN */
button{

  padding: .5em 20px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 0;
  font-size: .95em;
  cursor: pointer;
  height: 45px;
  box-sizing: border-box;
}
button:hover{
  opacity: .8;
}
button.full{
  width: 100%;
  box-sizing: border-box;
}
button.midium{
  width: 300px;
}

button.link-btn{
  background-color: var(--color-link);
  color:#fff;
}
button.white-btn{
  background-color: #fff;
  color:var(--color-link);
  border: 1px solid var(--color-link);
}

button.create-btn{
  background-color: var(--color-link);
  color:#fff;

}
button.disable{
  background-color: var(--color-gray-disabled);
  color:#fff;
}

button.half{
  width: 50%;
margin: 0 auto;
}
button.small{
  width: 100px;
  height: 35px;
  margin: 0 .5em;
}



input.full,textarea.full{
  width: 100%;
  box-sizing: border-box;
}
input.date{
  width: 90px;
}
input.small{
  width: 90px;
}
input.ssmall{
  width: 40px;
}



input:focus,
textarea:focus {
  box-shadow: inset 0 2px 2px #e9e9e9;
  border: 1px solid #9e9e9e;
  line-height: 16px;
}


input[type=file]{
  display: none;
}

.w-7em{
  width: 7em;
}
div.no-border{
  border: none !important;
}