@charset "UTF-8";


/* ######### input ############## */

.input { width:100%; height:42px; line-height:42px; padding:0 16px; border:1px solid var(--color-WH); background-color:var(--color-WH); caret-color:var(--color-A6); font-size:16px; font-weight:bold; color:var(--color-BL) }
.input::placeholder { color:var(--color-G4); }
.input:focus { outline:none; }


/* style */
.input.input1 { border:1px solid var(--color-G2); background-color:var(--color-G2); padding-left:24px; border-radius:6px; font-size:14px; font-weight:bold }
.input.input2 { border-bottom: 2px solid var(--color-A6); padding-left:0; height: fit-content; line-height: unset; font-size: inherit;}
.input.input2.disabled { border-bottom: 2px solid var(--color-G5); padding-left:0; }

/* border */
.input.warning { border:1px solid var(--color-A8) }

/* size */
.input.medium { height:50px; line-height:50px; padding-left:24px; border-radius:6px; font-size:14px; font-weight:bold }
.input.large  { height:56px; line-height:56px; padding-left:16px; border-radius:10px; font-size:16px; font-weight:bold }
.input.font-18  { font-size:18px; }

/* option */
.input.hash   { background-image:url(icons/hash_activated.svg); background-repeat:no-repeat; background-position:16px center; padding-left:35px; }
.input.at     { background-image:url(icons/at_activated.svg);   background-repeat:no-repeat; background-position:16px center; padding-left:43px; }
.input.search { background-image:url(icons/search.svg);         background-repeat:no-repeat; background-position:calc(100% - 8px) center;  }
.input.close  { background-image:url(icons/close_round.svg) !important;    background-repeat:no-repeat; background-position:calc(100% - 8px) center;  }

/* ######### radio ############## */
label.radio { display:inline-block; height:24px; font-size:14px; font-weight:bold; line-height:24px; padding:0px; padding-right:16px; overflow:hidden; cursor:pointer }
label.radio input { position: absolute; width:1px; height:1px; left:-9999px; display:none }
label.radio input + i { display:inline-block; margin:0px 4px 0px 0px; width:24px; height:24px; vertical-align: top; background-image:url('icons/input_radio_normal.svg'); }
label.radio input:checked + i { background-image:url('icons/input_radio_checked.svg'); }