@charset "UTF-8";

/* Login Page */
.login-container {
    background-color: #f8f9fa;
    height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.login-box {
    background: #fff;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 400px;
}
.login-info-box {
    font-size: 14px;
}

/* BASIC / PRO color */
.color_BASIC {color: var(--bs-primary);}
.color_PRO {color: var(--bs-danger);}
th.bg_BASIC {background-color: var(--bs-primary);}
th.bg_PRO {background-color: var(--bs-danger);}
th.dummy_column {background: none;}
.text_BASIC {color: var(--bs-primary)}
.text_PRO {color: var(--bs-danger)}

/* main menu */
ul.c_main_title {
    height: 90px;
    padding: 0px 250px;
    background-color: var(--bs-dark);
}
ul.c_main_title li {
    height: 90px;
    align-content: center !important;
}
ul.c_main_title li a {
    color: white;
    font-weight: bold;
    font-size: 20px;
}
ul.c_main_title li a:hover {
    color: var(--bs-primary-border-subtle);
}
ul.c_main_title li.active {
    background-color: var(--bs-primary)
}

ul.c_menu {
    margin-top: 40px;
    margin-bottom: 10px;
    padding: 0px 200px;
}
ul.c_menu li a{
    color: black;
    font-size: 14px;
}

/* menu title */
div.c_menu_title {
    text-align: center;
    height: 288px;
    padding: 50px;
    align-content: center !important;
}
div.c_menu_title i {
    color: white;
    font-size: 50px;
}
div.c_menu_title .title {
    color: #fff;
    font-size: 2.25em;
    font-weight: bold;
    line-height: 2;
}

/* manage menu */
ul.c_sub_menu {
    margin-top: 4px;
    height: 50px;
    font-size: 15px;
    font-weight: bold;
    background-color: var(--bs-dark);
}
ul.c_sub_menu li {
    height: 50px;
    min-width: 120px;

    text-align: center;
    align-content: center !important;
    --bs-nav-link-hover-color: white;
}
ul.c_sub_menu li a {
    color: white;
}
ul.c_sub_menu li a.disabled {
    color: var(--bs-dark-border-subtle);
}
ul.c_sub_menu li a:hover {
    color: var(--bs-danger-border-subtle);
}
ul.c_sub_menu li.active {
    background-color: var(--bs-danger)
}

/* Table */
table.table-bordered-radius {
    width: auto; !important;
    table-layout: fixed; !important;
    border-collapse: separate;
    border-spacing: 5px 5px;
    text-align: center;
    overflow-x: auto;
}
table.table-bordered-radius th {
    border-radius: 10px;
    font-size: 14px;
    align-content: center !important;
}
table.table-bordered-radius th:first-child:not(.small) {
    width: 200px !important; /* 첫 번째 열 고정 */
    min-width: 200px !important; /* 최소 너비 설정 */
    max-width: 300px !important; /* 최대 너비 설정 */
}
table.table-bordered-radius th:first-child.small {
    width: 100px !important; /* 첫 번째 열 고정 */
    min-width: 100px !important; /* 최소 너비 설정 */
    max-width: 100px !important; /* 최대 너비 설정 */
}
table.table-bordered-radius th:not(:first-child) {
    min-width: 200px !important; /* 최소 너비 설정 */
}
table.table-bordered-radius td{
    border-radius: 7px;
    font-size: 13px;
    align-content: center !important;
}
table.table-bordered-radius td input{
    text-align: center;
}
table.table-bordered-radius th.title{
    color: #fff;
    font-weight: bold;
}

/* button */
button.btn-round {
    border-radius: 15px;
}
label.btn-round {
    border-radius: 15px;
}

/** hr 글자포함 **/
div.hr_txt {
    display: flex;
    align-items: center;
}
div.hr_txt hr.bar{
    flex: auto;
    height: 1px;
}
div.hr_txt span.txt {
    margin-right: 5px;
    font-size: 12px;
    color: var(--bs-secondary);
}

/** TEXT span태그 **/
span.txt_11 {font-size: 11px;}
span.txt_12 {font-size: 12px;}
span.txt_13 {font-size: 13px;}

/** badge **/
.inline-badge {
    display: inline;
    margin-right: 5px;
}

.cursor-pointer {
    cursor: pointer;
}

/** Preview Image */
img.preview {
    max-width: 200px;   /* 최대 가로 크기 */
    max-height: 300px;  /* 최대 세로 크기 */
    width: auto;        /* 자동으로 비율을 맞추기 위해 width는 auto */
    height: auto;       /* 자동으로 비율을 맞추기 위해 height는 auto */
}


/** Bootstrap CSS CUSTOM 추가 **/
.w-15 {width: 15% !important;}
.w-30 {width: 30% !important;}
.w-70 {width: 70% !important;}