@charset "utf-8";
/** input **/
.input_list ul li { margin-bottom: 12px; }
.input_list ul li:last-of-type { margin-bottom: 0; }
.input_box { position: relative; width: 100%; height: 56px; z-index: 0; } 
/* inp_text */
.input_box .inp_text { position: absolute; left: 24px; bottom: 2px; width: calc(100% - 48px); height: 20px; font-size: 15px; background: transparent; opacity: 0; transition: top linear 0.2s, opacity linear 0.2s; z-index: 1; } 
.input_box .inp_text.valid,
.input_box .inp_text.focus, 
.input_box .inp_text:focus,
.input_box.error .inp_text { top: 25px; opacity: 1; } 
.input_box .inp_text:read-only { top: 25px; opacity: 0.8; }

/* inp_text + label */
.input_box .inp_text + label { position: absolute; left: 0; top: 0; width: 100%; height: 100%; font-size: 16px; color: #aaa; letter-spacing: -0.32px; background: #fff; border: 1px solid #ddd; border-radius: 10px; padding: 18px 20px; transition: padding-top linear 0.2s, font-size linear 0.2s; }
.input_box .inp_text.valid + label,
.input_box .inp_text.focus + label,
.input_box .inp_text:focus + label,
.input_box.error .inp_text + label,
.input_box .inp_text:read-only + label { font-size: var(--font-small-xs); padding-top: 8px; }
.input_box .inp_text.valid + label { border: var(--border); }
.input_box .inp_text.focus + label, 
.input_box .inp_text:focus + label { border: var(--border-main); } 
.input_box.error .inp_text + label { color: var(--color-red); border: var(--border-error); }
.input_box .inp_text:read-only + label { background: var(--bg-gray); border: 1px solid #f3f3f3; cursor: auto; }

/* type_btn */
.input_box.type_btn .btn { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 92px; height: 40px; font-size: var(--font-small-xs); color: #fff; line-height: 40px; background: var(--color-main); border-radius: var(--border-radius-s); display: inline-block; opacity: 1; z-index: 2; }
.input_box.type_btn .btn:disabled { background: var(--color-disabled); }

/** error **/
.error_msg_area,
.input_box + .inputbox_error_msg { height: 0px; font-size: 13px; font-weight: 400; line-height: 20px; color: var(--color-red); padding-left: 8px; margin-top: 0px; overflow: hidden; transition: all 0.5s; } 
.error_msg_area.error,
.input_box.error + .inputbox_error_msg { height: 20px; margin-top: 4px; }