@charset "utf-8";
/* ±âº» ¹öÆ° ½ºÅ¸ÀÏ */

button, .btn {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    background-color: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    outline: none;
    box-shadow: none;
    padding: 5px 10px;
    font-size: inherit;
    border-radius: .25rem;
    white-space: nowrap;
}

button:hover, .btn:hover {

}

.btn-ssm {
    font-size: 12px;
    padding: 2px 4px;
    letter-spacing: -0.5px;
}

.btn-middle {
    font-size: 18px;
    padding: 8px 16px;
}

.btn-fill-gray,
.btn-fill-gray:hover {
    border: 1px solid var(--colorgray);
    background-color: var(--colorgray);
    color: #fff;
}
.btn-outline-gray,
.btn-outline-hover-gray,
.btn-outline-hover-gray-accent {
    background-color: #fff;
    border: 1px solid var(--colorgray);
    color: var(--colorgray);
}
.btn-outline-hover-gray:hover {
    background-color: var(--colorgray);
    color: #fff;
}
.btn-outline-hover-gray-accent:hover {
    border: 1px solid var(--accent);
    background-color: var(--accent);
    color: #fff;
}

.btn-fill-accent,
.btn-fill-accent:hover {
    border: 1px solid var(--accent);
    background-color: var(--accent);
    color: #fff;
}

/*
 * Àüü »ö»ó ¹öÆ°
 */

/* Black */
.btn-fill-colorblack,
.btn-fill-colorblack:hover {
    border: 1px solid var(--colorblack);
    background-color: var(--colorblack);
    color: #fff;
}
.btn-outline-colorblack,
.btn-outline-hover-colorblack,
.btn-outline-hover-colorblack-accent {
    background-color: #fff;
    border: 1px solid var(--colorblack);
    color: var(--colorblack);
}
.btn-outline-hover-colorblack:hover {
    background-color: var(--colorblack);
    color: #fff;
}
.btn-outline-hover-colorblack-accent:hover {
    border: 1px solid var(--accent);
    background-color: var(--accent);
    color: #fff;
}

/* White */
.btn-fill-colorwhite,
.btn-fill-colorwhite:hover {
    border: 1px solid var(--colorwhite);
    background-color: var(--colorwhite);
    color: #000;
}
.btn-outline-colorwhite,
.btn-outline-hover-colorwhite,
.btn-outline-hover-colorwhite-accent {
    background-color: #fff;
    border: 1px solid var(--colorwhite);
    color: var(--colorwhite);
}
.btn-outline-hover-colorwhite:hover {
    background-color: var(--colorwhite);
    color: #000;
}
.btn-outline-hover-colorwhite-accent:hover {
    border: 1px solid var(--accent);
    background-color: var(--accent);
    color: #fff;
}

/* Navy */
.btn-fill-colornavy,
.btn-fill-colornavy:hover {
    border: 1px solid var(--colornavy);
    background-color: var(--colornavy);
    color: #fff;
}
.btn-outline-colornavy,
.btn-outline-hover-colornavy,
.btn-outline-hover-colornavy-accent {
    background-color: #fff;
    border: 1px solid var(--colornavy);
    color: var(--colornavy);
}
.btn-outline-hover-colornavy:hover {
    background-color: var(--colornavy);
    color: #fff;
}
.btn-outline-hover-colornavy-accent:hover {
    border: 1px solid var(--accent);
    background-color: var(--accent);
    color: #fff;
}

/* Purple */
.btn-fill-colorpurple,
.btn-fill-colorpurple:hover {
    border: 1px solid var(--colorpurple);
    background-color: var(--colorpurple);
    color: #fff;
}
.btn-outline-colorpurple,
.btn-outline-hover-colorpurple,
.btn-outline-hover-colorpurple-accent {
    background-color: #fff;
    border: 1px solid var(--colorpurple);
    color: var(--colorpurple);
}
.btn-outline-hover-colorpurple:hover {
    background-color: var(--colorpurple);
    color: #fff;
}
.btn-outline-hover-colorpurple-accent:hover {
    border: 1px solid var(--accent);
    background-color: var(--accent);
    color: #fff;
}

/* Pink */
.btn-fill-colorpink,
.btn-fill-colorpink:hover {
    border: 1px solid var(--colorpink);
    background-color: var(--colorpink);
    color: #fff;
}
.btn-outline-colorpink,
.btn-outline-hover-colorpink,
.btn-outline-hover-colorpink-accent {
    background-color: #fff;
    border: 1px solid var(--colorpink);
    color: var(--colorpink);
}
.btn-outline-hover-colorpink:hover {
    background-color: var(--colorpink);
    color: #fff;
}
.btn-outline-hover-colorpink-accent:hover {
    border: 1px solid var(--accent);
    background-color: var(--accent);
    color: #fff;
}

/* Gray */
.btn-fill-colorgray,
.btn-fill-colorgray:hover {
    border: 1px solid var(--colorgray);
    background-color: var(--colorgray);
    color: #fff;
}
.btn-outline-colorgray,
.btn-outline-hover-colorgray,
.btn-outline-hover-colorgray-accent {
    background-color: #fff;
    border: 1px solid var(--colorgray);
    color: var(--colorgray);
}
.btn-outline-hover-colorgray:hover {
    background-color: var(--colorgray);
    color: #fff;
}
.btn-outline-hover-colorgray-accent:hover {
    border: 1px solid var(--accent);
    background-color: var(--accent);
    color: #fff;
}

/* Yellow */
.btn-fill-coloryellow,
.btn-fill-coloryellow:hover {
    border: 1px solid var(--coloryellow);
    background-color: var(--coloryellow);
    color: #000;
}
.btn-outline-coloryellow,
.btn-outline-hover-coloryellow,
.btn-outline-hover-coloryellow-accent {
    background-color: #fff;
    border: 1px solid var(--coloryellow);
    color: var(--coloryellow);
}
.btn-outline-hover-coloryellow:hover {
    background-color: var(--coloryellow);
    color: #000;
}
.btn-outline-hover-coloryellow-accent:hover {
    border: 1px solid var(--accent);
    background-color: var(--accent);
    color: #fff;
}

/* Green */
.btn-fill-colorgreen,
.btn-fill-colorgreen:hover {
    border: 1px solid var(--colorgreen);
    background-color: var(--colorgreen);
    color: #fff;
}
.btn-outline-colorgreen,
.btn-outline-hover-colorgreen,
.btn-outline-hover-colorgreen-accent {
    background-color: #fff;
    border: 1px solid var(--colorgreen);
    color: var(--colorgreen);
}
.btn-outline-hover-colorgreen:hover {
    background-color: var(--colorgreen);
    color: #fff;
}
.btn-outline-hover-colorgreen-accent:hover {
    border: 1px solid var(--accent);
    background-color: var(--accent);
    color: #fff;
}

/* Blue */
.btn-fill-colorblue,
.btn-fill-colorblue:hover {
    border: 1px solid var(--colorblue);
    background-color: var(--colorblue);
    color: #fff;
}
.btn-outline-colorblue,
.btn-outline-hover-colorblue,
.btn-outline-hover-colorblue-accent {
    background-color: #fff;
    border: 1px solid var(--colorblue);
    color: var(--colorblue);
}
.btn-outline-hover-colorblue:hover {
    background-color: var(--colorblue);
    color: #fff;
}
.btn-outline-hover-colorblue-accent:hover {
    border: 1px solid var(--accent);
    background-color: var(--accent);
    color: #fff;
}

/* Red */
.btn-fill-colorred,
.btn-fill-colorred:hover {
    border: 1px solid var(--colorred);
    background-color: var(--colorred);
    color: #fff;
}
.btn-outline-colorred,
.btn-outline-hover-colorred,
.btn-outline-hover-colorred-accent {
    background-color: #fff;
    border: 1px solid var(--colorred);
    color: var(--colorred);
}
.btn-outline-hover-colorred:hover {
    background-color: var(--colorred);
    color: #fff;
}
.btn-outline-hover-colorred-accent:hover {
    border: 1px solid var(--accent);
    background-color: var(--accent);
    color: #fff;
}

/* Orange */
.btn-fill-colororange,
.btn-fill-colororange:hover {
    border: 1px solid var(--colororange);
    background-color: var(--colororange);
    color: #fff;
}
.btn-outline-colororange,
.btn-outline-hover-colororange,
.btn-outline-hover-colororange-accent {
    background-color: #fff;
    border: 1px solid var(--colororange);
    color: var(--colororange);
}
.btn-outline-hover-colororange:hover {
    background-color: var(--colororange);
    color: #fff;
}
.btn-outline-hover-colororange-accent:hover {
    border: 1px solid var(--accent);
    background-color: var(--accent);
    color: #fff;
}

/* Dark Navy */
.btn-fill-darknavy,
.btn-fill-darknavy:hover {
    border: 1px solid var(--darknavy);
    background-color: var(--darknavy);
    color: #fff;
}
.btn-outline-darknavy,
.btn-outline-hover-darknavy,
.btn-outline-hover-darknavy-accent {
    background-color: #fff;
    border: 1px solid var(--darknavy);
    color: var(--darknavy);
}
.btn-outline-hover-darknavy:hover {
    background-color: var(--darknavy);
    color: #fff;
}
.btn-outline-hover-darknavy-accent:hover {
    border: 1px solid var(--darkaccent);
    background-color: var(--darkaccent);
    color: #fff;
}

/* Dark Purple */
.btn-fill-darkpurple,
.btn-fill-darkpurple:hover {
    border: 1px solid var(--darkpurple);
    background-color: var(--darkpurple);
    color: #fff;
}
.btn-outline-darkpurple,
.btn-outline-hover-darkpurple,
.btn-outline-hover-darkpurple-accent {
    background-color: #fff;
    border: 1px solid var(--darkpurple);
    color: var(--darkpurple);
}
.btn-outline-hover-darkpurple:hover {
    background-color: var(--darkpurple);
    color: #fff;
}
.btn-outline-hover-darkpurple-accent:hover {
    border: 1px solid var(--darkaccent);
    background-color: var(--darkaccent);
    color: #fff;
}

/* Dark Pink */
.btn-fill-darkpink,
.btn-fill-darkpink:hover {
    border: 1px solid var(--darkpink);
    background-color: var(--darkpink);
    color: #fff;
}
.btn-outline-darkpink,
.btn-outline-hover-darkpink,
.btn-outline-hover-darkpink-accent {
    background-color: #fff;
    border: 1px solid var(--darkpink);
    color: var(--darkpink);
}
.btn-outline-hover-darkpink:hover {
    background-color: var(--darkpink);
    color: #fff;
}
.btn-outline-hover-darkpink-accent:hover {
    border: 1px solid var(--darkaccent);
    background-color: var(--darkaccent);
    color: #fff;
}

/* Dark Gray */
.btn-fill-darkgray,
.btn-fill-darkgray:hover {
    border: 1px solid var(--darkgray);
    background-color: var(--darkgray);
    color: #fff;
}
.btn-outline-darkgray,
.btn-outline-hover-darkgray,
.btn-outline-hover-darkgray-accent {
    background-color: #fff;
    border: 1px solid var(--darkgray);
    color: var(--darkgray);
}
.btn-outline-hover-darkgray:hover {
    background-color: var(--darkgray);
    color: #fff;
}
.btn-outline-hover-darkgray-accent:hover {
    border: 1px solid var(--darkaccent);
    background-color: var(--darkaccent);
    color: #fff;
}

/* Dark Yellow */
.btn-fill-darkyellow,
.btn-fill-darkyellow:hover {
    border: 1px solid var(--darkyellow);
    background-color: var(--darkyellow);
    color: #000;
}
.btn-outline-darkyellow,
.btn-outline-hover-darkyellow,
.btn-outline-hover-darkyellow-accent {
    background-color: #fff;
    border: 1px solid var(--darkyellow);
    color: var(--darkyellow);
}
.btn-outline-hover-darkyellow:hover {
    background-color: var(--darkyellow);
    color: #000;
}
.btn-outline-hover-darkyellow-accent:hover {
    border: 1px solid var(--darkaccent);
    background-color: var(--darkaccent);
    color: #fff;
}

/* Dark Green */
.btn-fill-darkgreen,
.btn-fill-darkgreen:hover {
    border: 1px solid var(--darkgreen);
    background-color: var(--darkgreen);
    color: #fff;
}
.btn-outline-darkgreen,
.btn-outline-hover-darkgreen,
.btn-outline-hover-darkgreen-accent {
    background-color: #fff;
    border: 1px solid var(--darkgreen);
    color: var(--darkgreen);
}
.btn-outline-hover-darkgreen:hover {
    background-color: var(--darkgreen);
    color: #fff;
}
.btn-outline-hover-darkgreen-accent:hover {
    border: 1px solid var(--darkaccent);
    background-color: var(--darkaccent);
    color: #fff;
}

/* Dark Blue */
.btn-fill-darkblue,
.btn-fill-darkblue:hover {
    border: 1px solid var(--darkblue);
    background-color: var(--darkblue);
    color: #fff;
}
.btn-outline-darkblue,
.btn-outline-hover-darkblue,
.btn-outline-hover-darkblue-accent {
    background-color: #fff;
    border: 1px solid var(--darkblue);
    color: var(--darkblue);
}
.btn-outline-hover-darkblue:hover {
    background-color: var(--darkblue);
    color: #fff;
}
.btn-outline-hover-darkblue-accent:hover {
    border: 1px solid var(--darkaccent);
    background-color: var(--darkaccent);
    color: #fff;
}

/* Dark Red */
.btn-fill-darkred,
.btn-fill-darkred:hover {
    border: 1px solid var(--darkred);
    background-color: var(--darkred);
    color: #fff;
}
.btn-outline-darkred,
.btn-outline-hover-darkred,
.btn-outline-hover-darkred-accent {
    background-color: #fff;
    border: 1px solid var(--darkred);
    color: var(--darkred);
}
.btn-outline-hover-darkred:hover {
    background-color: var(--darkred);
    color: #fff;
}
.btn-outline-hover-darkred-accent:hover {
    border: 1px solid var(--darkaccent);
    background-color: var(--darkaccent);
    color: #fff;
}

/* Dark Orange */
.btn-fill-darkorange,
.btn-fill-darkorange:hover {
    border: 1px solid var(--darkorange);
    background-color: var(--darkorange);
    color: #fff;
}
.btn-outline-darkorange,
.btn-outline-hover-darkorange,
.btn-outline-hover-darkorange-accent {
    background-color: #fff;
    border: 1px solid var(--darkorange);
    color: var(--darkorange);
}
.btn-outline-hover-darkorange:hover {
    background-color: var(--darkorange);
    color: #fff;
}
.btn-outline-hover-darkorange-accent:hover {
    border: 1px solid var(--darkaccent);
    background-color: var(--darkaccent);
    color: #fff;
}

/* Light Navy */
.btn-fill-lightnavy,
.btn-fill-lightnavy:hover {
    border: 1px solid var(--lightnavy);
    background-color: var(--lightnavy);
    color: #000;
}
.btn-outline-lightnavy,
.btn-outline-hover-lightnavy,
.btn-outline-hover-lightnavy-accent {
    background-color: #000;
    border: 1px solid var(--lightnavy);
    color: var(--lightnavy);
}
.btn-outline-hover-lightnavy:hover {
    background-color: var(--lightnavy);
    color: #000;
}
.btn-outline-hover-lightnavy-accent:hover {
    border: 1px solid var(--lightaccent);
    background-color: var(--lightaccent);
    color: #000;
}

/* Light Purple */
.btn-fill-lightpurple,
.btn-fill-lightpurple:hover {
    border: 1px solid var(--lightpurple);
    background-color: var(--lightpurple);
    color: #000;
}
.btn-outline-lightpurple,
.btn-outline-hover-lightpurple,
.btn-outline-hover-lightpurple-accent {
    background-color: #000;
    border: 1px solid var(--lightpurple);
    color: var(--lightpurple);
}
.btn-outline-hover-lightpurple:hover {
    background-color: var(--lightpurple);
    color: #000;
}
.btn-outline-hover-lightpurple-accent:hover {
    border: 1px solid var(--lightaccent);
    background-color: var(--lightaccent);
    color: #000;
}

/* Light Pink */
.btn-fill-lightpink,
.btn-fill-lightpink:hover {
    border: 1px solid var(--lightpink);
    background-color: var(--lightpink);
    color: #000;
}
.btn-outline-lightpink,
.btn-outline-hover-lightpink,
.btn-outline-hover-lightpink-accent {
    background-color: #000;
    border: 1px solid var(--lightpink);
    color: var(--lightpink);
}
.btn-outline-hover-lightpink:hover {
    background-color: var(--lightpink);
    color: #000;
}
.btn-outline-hover-lightpink-accent:hover {
    border: 1px solid var(--lightaccent);
    background-color: var(--lightaccent);
    color: #000;
}

/* Light Gray */
.btn-fill-lightgray,
.btn-fill-lightgray:hover {
    border: 1px solid var(--lightgray);
    background-color: var(--lightgray);
    color: #000;
}
.btn-outline-lightgray,
.btn-outline-hover-lightgray,
.btn-outline-hover-lightgray-accent {
    background-color: #000;
    border: 1px solid var(--lightgray);
    color: var(--lightgray);
}
.btn-outline-hover-lightgray:hover {
    background-color: var(--lightgray);
    color: #000;
}
.btn-outline-hover-lightgray-accent:hover {
    border: 1px solid var(--lightaccent);
    background-color: var(--lightaccent);
    color: #000;
}

/* Light Yellow */
.btn-fill-lightyellow,
.btn-fill-lightyellow:hover {
    border: 1px solid var(--lightyellow);
    background-color: var(--lightyellow);
    color: #000;
}
.btn-outline-lightyellow,
.btn-outline-hover-lightyellow,
.btn-outline-hover-lightyellow-accent {
    background-color: #000;
    border: 1px solid var(--lightyellow);
    color: var(--lightyellow);
}
.btn-outline-hover-lightyellow:hover {
    background-color: var(--lightyellow);
    color: #000;
}
.btn-outline-hover-lightyellow-accent:hover {
    border: 1px solid var(--lightaccent);
    background-color: var(--lightaccent);
    color: #000;
}

/* Light Green */
.btn-fill-lightgreen,
.btn-fill-lightgreen:hover {
    border: 1px solid var(--lightgreen);
    background-color: var(--lightgreen);
    color: #000;
}
.btn-outline-lightgreen,
.btn-outline-hover-lightgreen,
.btn-outline-hover-lightgreen-accent {
    background-color: #000;
    border: 1px solid var(--lightgreen);
    color: var(--lightgreen);
}
.btn-outline-hover-lightgreen:hover {
    background-color: var(--lightgreen);
    color: #000;
}
.btn-outline-hover-lightgreen-accent:hover {
    border: 1px solid var(--lightaccent);
    background-color: var(--lightaccent);
    color: #000;
}

/* Light Blue */
.btn-fill-lightblue,
.btn-fill-lightblue:hover {
    border: 1px solid var(--lightblue);
    background-color: var(--lightblue);
    color: #000;
}
.btn-outline-lightblue,
.btn-outline-hover-lightblue,
.btn-outline-hover-lightblue-accent {
    background-color: #000;
    border: 1px solid var(--lightblue);
    color: var(--lightblue);
}
.btn-outline-hover-lightblue:hover {
    background-color: var(--lightblue);
    color: #000;
}
.btn-outline-hover-lightblue-accent:hover {
    border: 1px solid var(--lightaccent);
    background-color: var(--lightaccent);
    color: #000;
}

/* Light Red */
.btn-fill-lightred,
.btn-fill-lightred:hover {
    border: 1px solid var(--lightred);
    background-color: var(--lightred);
    color: #000;
}
.btn-outline-lightred,
.btn-outline-hover-lightred,
.btn-outline-hover-lightred-accent {
    background-color: #000;
    border: 1px solid var(--lightred);
    color: var(--lightred);
}
.btn-outline-hover-lightred:hover {
    background-color: var(--lightred);
    color: #000;
}
.btn-outline-hover-lightred-accent:hover {
    border: 1px solid var(--lightaccent);
    background-color: var(--lightaccent);
    color: #000;
}

/* Light Orange */
.btn-fill-lightorange,
.btn-fill-lightorange:hover {
    border: 1px solid var(--lightorange);
    background-color: var(--lightorange);
    color: #000;
}
.btn-outline-lightorange,
.btn-outline-hover-lightorange,
.btn-outline-hover-lightorange-accent {
    background-color: #000;
    border: 1px solid var(--lightorange);
    color: var(--lightorange);
}
.btn-outline-hover-lightorange:hover {
    background-color: var(--lightorange);
    color: #000;
}
.btn-outline-hover-lightorange-accent:hover {
    border: 1px solid var(--lightaccent);
    background-color: var(--lightaccent);
    color: #000;
}


.btn-group {
    display: flex;
}

.btn-group > .btn {
    align-self: center;
}

.btn-group-item {
    position: relative;
}

.btn-group-item:not(:first-child) {
    margin-left: -1px;
}

.btn-group > .btn-group-item > input {
    position: absolute;
    display: none;
    opacity: 0;
}
.btn-group > .btn-group-item > label {
    display: inline-block;
    padding: .375rem .75rem;
    border: 1px solid var(--colorgray);
    border-radius: 0;
}

.btn-group > .btn-group-item:first-child > label {
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem;
}

.btn-group > .btn-group-item:last-child > label {
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem;
}

.btn-group > .btn-group-item + .btn-group-item > label {
    border-left: 1px solid transparent;
}

.btn-group > .btn-group-item + .btn-group-item > input:checked + label {
    border-color: var(--accent);
    color: var(--accent);
}