/*Input Common Css*/
input.form-control {
    font-weight : 400;
    color       : var(--basic-black);
    font-size   : var(--font-16);
    line-height : var(--line-20);
    padding     : 16px;
    border      : var(--border-1px) transparent;
}

input.form-control::placeholder {
    color       : var(--basic-gray-medium);
    font-weight : inherit;
}

input.form-control:hover {
    border-color : var(--basic-black);
}

input.form-control:focus {
    border-color : var(--basic-black);
}

input.hover-brand-primary:hover {
    border-color : var(--brand-primary) !important;
}

input.hover-brand-primary:hover + svg path {
    fill       : var(--brand-primary) !important;
    transition : fill .15s;
}

input.hover-brand-primary:hover + svg + svg path {
    fill       : var(--brand-primary) !important;
    transition : fill .15s;
}

input.focus-brand-primary:focus {
    border-color : var(--brand-primary) !important;
}

input.focus-brand-primary:focus + svg path {
    fill       : var(--brand-primary) !important;
    transition : fill .15s;
}

input.focus-brand-primary:focus + svg + svg path {
    fill       : var(--brand-primary) !important;
    transition : fill .15s;
}

input.hover-brand-primary-opacity:hover {
    border-color : var(--brand-primary-opacity) !important;
}

input.hover-brand-primary-opacity:hover + svg path {
    fill       : var(--brand-primary-opacity) !important;
    transition : fill .15s;
}

input.hover-brand-primary-opacity:hover + svg + svg path {
    fill       : var(--brand-primary-opacity) !important;
    transition : fill .15s;
}

input.focus-brand-primary-opacity:focus {
    border-color : var(--brand-primary-opacity) !important;
}

input.focus-brand-primary-opacity:focus + svg path {
    fill       : var(--brand-primary-opacity) !important;
    transition : fill .15s;
}

input.focus-brand-primary-opacity:focus + svg + svg path {
    fill       : var(--brand-primary-opacity) !important;
    transition : fill .15s;
}

input.hover-brand-secondary:hover {
    border-color : var(--brand-secondary) !important;
}

input.hover-brand-secondary:hover + svg path {
    fill       : var(--brand-secondary) !important;
    transition : fill .15s;
}

input.hover-brand-secondary:hover + svg + svg path {
    fill       : var(--brand-secondary) !important;
    transition : fill .15s;
}

input.focus-brand-secondary:focus {
    border-color : var(--brand-secondary) !important;
}

input.focus-brand-secondary:focus + svg path {
    fill       : var(--brand-secondary) !important;
    transition : fill .15s;
}

input.focus-brand-secondary:focus + svg + svg path {
    fill       : var(--brand-secondary) !important;
    transition : fill .15s;
}

input.hover-brand-secondary-opacity:hover {
    border-color : var(--brand-secondary-opacity) !important;
}

input.hover-brand-secondary-opacity:hover + svg path {
    fill       : var(--brand-secondary-opacity) !important;
    transition : fill .15s;
}

input.hover-brand-secondary-opacity:hover + svg + svg path {
    fill       : var(--brand-secondary-opacity) !important;
    transition : fill .15s;
}

input.focus-brand-secondary-opacity:focus {
    border-color : var(--brand-secondary-opacity) !important;
}

input.focus-brand-secondary-opacity:focus + svg path {
    fill       : var(--brand-secondary-opacity) !important;
    transition : fill .15s;
}

input.focus-brand-secondary-opacity:focus + svg + svg path {
    fill       : var(--brand-secondary-opacity) !important;
    transition : fill .15s;
}

input.hover-impact-primary:hover {
    border-color : var(--impact-primary) !important;
}

input.hover-impact-primary:hover + svg path {
    fillcolor  : var(--impact-primary) !important;
    transition : fill .15s;
}

input.hover-impact-primary:hover + svg + svg path {
    fill       : var(--impact-primary) !important;
    transition : fill .15s;
}

input.focus-impact-primary:focus {
    border-color : var(--impact-primary) !important;
}

input.focus-impact-primary:focus + svg path {
    fill       : var(--impact-primary) !important;
    transition : fill .15s;
}

input.focus-impact-primary:focus + svg + svg path {
    fill       : var(--impact-primary) !important;
    transition : fill .15s;
}

input.hover-impact-secondary:hover {
    border-color : var(--impact-secondary) !important;
}

input.hover-impact-secondary:hover + svg path {
    fill       : var(--impact-secondary) !important;
    transition : fill .15s;
}

input.hover-impact-secondary:hover + svg + svg path {
    fill       : var(--impact-secondary) !important;
    transition : fill .15s;
}

input.focus-impact-secondary:focus {
    border-color : var(--impact-secondary) !important;
}

input.focus-impact-secondary:focus + svg path {
    fill       : var(--impact-secondary) !important;
    transition : fill .15s;
}

input.focus-impact-secondary:focus + svg + svg path {
    fill       : var(--impact-secondary) !important;
    transition : fill .15s;
}

input.hover-basic-black:hover {
    border-color : var(--basic-black) !important;
}

input.hover-basic-black:hover + svg path {
    fill       : var(--basic-black) !important;
    transition : fill .15s;
}

input.hover-basic-black:hover + svg + svg path {
    fill       : var(--basic-black) !important;
    transition : fill .15s;
}

input.focus-basic-black:focus {
    border-color : var(--basic-black) !important;
}

input.focus-basic-black:focus + svg path {
    fill       : var(--basic-black) !important;
    transition : fill .15s;
}

input.focus-basic-black:focus + svg + svg path {
    fill       : var(--basic-black) !important;
    transition : fill .15s;
}

input.hover-basic-black-medium:hover {
    border-color : var(--basic-black-medium) !important;
}

input.hover-basic-black-medium:hover + svg path {
    fill       : var(--basic-black-medium) !important;
    transition : fill .15s;
}

input.hover-basic-black-medium:hover + svg + svg path {
    fill       : var(--basic-black-medium) !important;
    transition : fill .15s;
}

input.focus-basic-black-medium:focus {
    border-color : var(--basic-black-medium) !important;
}

input.focus-basic-black-medium:focus + svg path {
    fill       : var(--basic-black-medium) !important;
    transition : fill .15s;
}

input.focus-basic-black-medium:focus + svg + svg path {
    fill       : var(--basic-black-medium) !important;
    transition : fill .15s;
}

input.hover-basic-gray-dark:hover {
    border-color : var(--basic-gray-dark) !important;
}

input.hover-basic-gray-dark:hover + svg path {
    fill       : var(--basic-gray-dark) !important;
    transition : fill .15s;
}

input.hover-basic-gray-dark:hover + svg + svg path {
    fill       : var(--basic-gray-dark) !important;
    transition : fill .15s;
}

input.focus-basic-gray-dark:focus {
    border-color : var(--basic-gray-dark) !important;
}

input.focus-basic-gray-dark:focus + svg path {
    fill       : var(--basic-gray-dark) !important;
    transition : fill .15s;
}

input.focus-basic-gray-dark:focus + svg + svg path {
    fill       : var(--basic-gray-dark) !important;
    transition : fill .15s;
}

input.hover-basic-gray-medium:hover {
    border-color : var(--basic-gray-medium) !important;
}

input.hover-basic-gray-medium:hover + svg path {
    fill       : var(--basic-gray-medium) !important;
    transition : fill .15s;
}

input.hover-basic-gray-medium:hover + svg + svg path {
    fill       : var(--basic-gray-medium) !important;
    transition : fill .15s;
}

input.focus-basic-gray-medium:focus {
    border-color : var(--basic-gray-medium) !important;
}

input.focus-basic-gray-medium:focus + svg path {
    fill       : var(--basic-gray-medium) !important;
    transition : fill .15s;
}

input.focus-basic-gray-medium:focus + svg + svg path {
    fill       : var(--basic-gray-medium) !important;
    transition : fill .15s;
}

input.hover-basic-gray-light:hover {
    border-color : var(--basic-gray-light) !important;
}

input.hover-basic-gray-light:hover + svg path {
    fill       : var(--basic-gray-light) !important;
    transition : fill .15s;
}

input.hover-basic-gray-light:hover + svg + svg path {
    fill       : var(--basic-gray-light) !important;
    transition : fill .15s;
}

input.focus-basic-gray-light:focus {
    border-color : var(--basic-gray-light) !important;
}

input.focus-basic-gray-light:focus + svg path {
    fill       : var(--basic-gray-light) !important;
    transition : fill .15s;
}

input.focus-basic-gray-light:focus + svg + svg path {
    fill       : var(--basic-gray-light) !important;
    transition : fill .15s;
}

input.hover-basic-gray-medium-light:hover {
    border-color : var(--basic-gray-medium-light) !important;
}

input.hover-basic-gray-medium-light:hover + svg path {
    fill       : var(--basic-gray-medium-light) !important;
    transition : fill .15s;
}

input.hover-basic-gray-medium-light:hover + svg + svg path {
    fill       : var(--basic-gray-medium-light) !important;
    transition : fill .15s;
}

input.focus-basic-gray-medium-light:focus {
    border-color : var(--basic-gray-medium-light) !important;
}

input.focus-basic-gray-medium-light:focus + svg path {
    fill       : var(--basic-gray-medium-light) !important;
    transition : fill .15s;
}

input.focus-basic-gray-medium-light:focus + svg + svg path {
    fill       : var(--basic-gray-medium-light) !important;
    transition : fill .15s;
}

input.hover-basic-gray-high-light:hover {
    border-color : var(--basic-gray-high-light) !important;
}

input.hover-basic-gray-high-light:hover + svg path {
    fill       : var(--basic-gray-high-light) !important;
    transition : fill .15s;
}

input.hover-basic-gray-high-light:hover + svg + svg path {
    fill       : var(--basic-gray-high-light) !important;
    transition : fill .15s;
}

input.focus-basic-gray-high-light:focus {
    border-color : var(--basic-gray-high-light) !important;
}

input.focus-basic-gray-high-light:focus + svg path {
    fill       : var(--basic-gray-high-light) !important;
    transition : fill .15s;
}

input.focus-basic-gray-high-light:focus + svg + svg path {
    fill       : var(--basic-gray-high-light) !important;
    transition : fill .15s;
}

input.hover-basic-white:hover {
    border-color : var(--basic-white) !important;
}

input.hover-basic-white:hover + svg path {
    fill       : var(--basic-white) !important;
    transition : fill .15s;
}

input.hover-basic-white:hover + svg + svg path {
    fill       : var(--basic-white) !important;
    transition : fill .15s;
}

input.focus-basic-white:focus {
    border-color : var(--basic-white) !important;
}

input.focus-basic-white:focus + svg path {
    fill       : var(--basic-white) !important;
    transition : fill .15s;
}

input.focus-basic-white:focus + svg + svg path {
    fill       : var(--basic-white) !important;
    transition : fill .15s;
}

/*Input Css*/

input.input-xl {
    padding     : 20px 16px;
    font-size   : var(--font-20);
    line-height : var(--line-24);
}

input.input-lg {
    padding     : 16px;
    font-size   : var(--font-16);
    line-height : var(--line-20);
}

input.input-md {
    padding     : 12px;
    font-size   : var(--font-16);
    line-height : var(--line-20);
}

input.input-sm {
    padding     : 12px;
    font-size   : var(--font-14);
    line-height : var(--line-16);
}

/*반응형 CSS*/
@media (min-width : 576px) {
    input.input-sm {
        padding     : 12px;
        font-size   : var(--font-14);
        line-height : var(--line-16);
    }
}

@media (min-width : 768px) {
    input.input-md {
        padding     : 12px;
        font-size   : var(--font-16);
        line-height : var(--line-20);
    }
}

@media (min-width : 992px) {
    input.input-lg {
        padding     : 16px;
        font-size   : var(--font-16);
        line-height : var(--line-20);
    }
}

@media (min-width : 1200px) {
    input.input-xl {
        padding     : 20px 16px;
        font-size   : var(--font-20);
        line-height : var(--line-24);
    }
}