@charset "UTF-8";

*{font-weight: 500;}
*::-webkit-scrollbar {-webkit-appearance: none;}
*::-webkit-scrollbar:vertical { width: 5px; }
*::-webkit-scrollbar:horizontal {height: 8px;}
*::-webkit-scrollbar-track { background-color: transparent; } 
*::-webkit-scrollbar-thumb { background-color: var(--gray); border-radius: 10px; border: 1px solid var(--box); } 
.panel-body::-webkit-scrollbar-thumb { background-color: var(--gray); border-radius: 10px; border: 1px solid var(--brightest); } 
.option-input {z-index: 2;}

:root {
    --background: #EDF0FB;
    --box: #fff;
    --white: #fff;
    --white-dark: #dddddd;
    --box-line: #ededed;
    --text: #777777;
    --text-dark: #636363;
    --strong: #444444;
    --strong-dark: #272727;
    --gray: #dddddd;
    --gray-dark: #c2c2c2;
    --gray-light: #f8f8f8;
    --primary: #3B42BF;
    --primary-dark: #232771;
    --deep: #6273D9;
    --mild: #7790D9;
    --light: #A7BAF2;
    --bright: #EAEEFC;
    --brightest: #F5F8FF;
    --shadow: rgba(98, 115, 217, 0.3);
    --red: #FF4A59;
    --yellow: #fac70e;
    --orange: #FF7A21;
    --green: #1DCC45;
    --sky: #57AFD9;
    --purple: #976CD9;
    --pink: #DA77BB;
    --red-light: #ffc9ce;
    --yellow-light: #fdeaa4;
    --orange-light: #ffe5d3;
    --green-light: #d5f9de;
    --sky-light: #caeefe;
    --purple-light: #dfd1f3;
    --pink-light: #f5dbed;
    --red-dark: #7d000a;
    --yellow-dark: #9f7d03;
    --orange-dark: #873600;
    --green-dark: #0d5c1f;
    --sky-dark: #174d66;
    --purple-dark: #4b2389;
    --pink-dark: #691c51;
}
/*
@media (prefers-color-scheme: dark) {
    :root {
        --background: #222635;
        --box: #101016;
        --white: #fff;
        --white-dark: #dddddd;
        --box-line: #21242e;
        --text: #E8E8E8;
        --text-dark: #cfcbd8;
        --strong: #DDDDDD;
        --strong-dark: #aeadbb;
        --gray: #B7B5C5;
        --gray-dark: #8b8997;
        --gray-light: #cccccc;
        --primary: #3B42BF;
        --primary-dark: #232771;
        --deep: #6273D9;
        --mild: #7790D9;
        --light: #A7BAF2;
        --bright: #393957;
        --brightest: #1E1B2B;
        --shadow: rgba(0, 0, 0, 0.5);
        --red: #FF4A59;
        --yellow: #fac70e;
        --orange: #FF7A21;
        --green: #1DCC45;
        --sky: #57AFD9;
        --purple: #976CD9;
        --pink: #DA77BB;
        --red-dark: #ffc9ce;
        --yellow-dark: #fdeaa4;
        --orange-dark: #ffe5d3;
        --green-dark: #d5f9de;
        --sky-dark: #caeefe;
        --purple-dark: #dfd1f3;
        --pink-dark: #f5dbed;
        --red-light: #7d000a;
        --yellow-light: #9f7d03;
        --orange-light: #873600;
        --green-light: #0d5c1f;
        --sky-light: #174d66;
        --purple-light: #4b2389;
        --pink-light: #691c51;
    }
}*/

/* button */
.form-control {padding: 5px .75rem;}
.btn { padding: 6px 12px; border-radius: 5px; text-align: center; transition: all .2s ease; cursor: pointer; white-space: nowrap; }
.btn.btn-icon { display: flex; align-items: center; justify-content: center; gap: 10px; } 
.btn-small {padding: 5px 12px;min-width:auto;}
.btn-circle { border-radius: 50%; width: 25px; height: 25px; display: flex; align-items: center; justify-content: center; transition: all .2s ease; border: 0; cursor: pointer; } 
.btn-circle.huge {width: 34px;height: 34px;font-size: 1.25em;}

.btn-deep { background-color: var(--deep); color: var(--white); } 
.btn-deep:hover, .btn-deep:active, .btn-deep:focus , .btn-deep:focus-visible  { background-color: var(--primary)!important; color: var(--white)!important; } 
.btn-mild { background-color: var(--mild); color: var(--white); } 
.btn-mild:hover { background-color: var(--deep); color: var(--white); } 
.btn-light { background-color: var(--light); color: var(--white); } 
.btn-light:hover { background-color: var(--mild); color: var(--white); } 
.btn-line { background-color: var(--white); color: var(--deep); box-shadow: 0 0 0 1px var(--deep) inset; } 
.btn-line:hover { background-color: var(--gray); color: var(--primary); box-shadow: 0 0 0 2px var(--primary) inset; } 
.btn-gray { background-color: var(--gray); color: var(--text); } 
.btn-gray:hover { background-color: var(--gray-dark); color: var(--text); } 
.btn-dark { background-color: var(--text); color: var(--gray); } 
.btn-dark:hover { background-color: var(--text-dark); color: var(--gray); } 

.btn-modul {display: flex; border-radius: 5px; overflow: hidden;}
.btn-modul .btn {padding: 10px; border-radius: 0; border-right: 1px solid var(--box);}
.btn-modul .btn:last-child {border-right: 0; border-radius: 0 5px 5px 0;}
.btn-modul .btn:first-child {border-radius: 5px 0 0 5px ;}
.btn-modul:has(.btn-line) .btn {margin-left: -1px; border: 0;}
.btn-modul:has(.btn-line) .btn:first-child {margin-left: 0;}

.btn-check:active+.btn, .btn-check:checked+.btn, .btn.active, .btn.show, .btn:active {color: var(--bs-btn-active-color); background-color: var(--bs-btn-active-bg); border-color: var(--bs-btn-active-border-color);}

/* button overwrite */

.btn-outline-blue {
    --bs-btn-color: var(--light);
    --bs-btn-border-color: var(--light);
    --bs-btn-hover-color: var(--white);
    --bs-btn-hover-bg: var(--light);
    --bs-btn-hover-border-color: var(--light);
    --bs-btn-focus-shadow-rgb: 52, 143, 226;
    --bs-btn-active-color: var(--white);
    --bs-btn-active-bg: var(--light);
    --bs-btn-active-border-color: var(--light);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0,  0,  0,  0.125);
    --bs-btn-disabled-color: var(--light);
    --bs-btn-disabled-bg: var(--white);
    --bs-btn-disabled-border-color: var(--light);
    --bs-gradient: none;
}

.btn-success {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: var(--deep);
    --bs-btn-border-color: var(--deep);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--primary);
    --bs-btn-hover-border-color: var(--primary);
    --bs-btn-focus-shadow-rgb: 38, 184, 184;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: var(--primary);
    --bs-btn-active-border-color: var(--primary);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0,  0,  0,  0.125);
    --bs-btn-disabled-color: #FFFFFF;
    --bs-btn-disabled-bg: var(--mild);
    --bs-btn-disabled-border-color: var(--mild);
}


.btn-primary {
    --bs-btn-color: var(--white);
    --bs-btn-bg:  var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-color: var(--white);
    --bs-btn-hover-bg: var(--primary-dark);
    --bs-btn-hover-border-color: var(--primary-dark);
    --bs-btn-focus-shadow-rgb: 82, 160, 230;
    --bs-btn-active-color: var(--white);
    --bs-btn-active-bg: var(--primary);
    --bs-btn-active-border-color: var(--primary);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0,  0,  0,  0.125);
    --bs-btn-disabled-color: var(--white);
    --bs-btn-disabled-bg: var(--primary-dark);
    --bs-btn-disabled-border-color: var(--primary-dark);
}
.btn-outline-primary  {
    --bs-btn-color: var(--primary);
    /*--bs-btn-bg: #009AC8;*/
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-color: var(--white);
    --bs-btn-hover-bg: var(--primary);
    --bs-btn-hover-border-color: var(--primary);
    --bs-btn-focus-shadow-rgb: 82, 160, 230;
    --bs-btn-active-color: var(--white);
    --bs-btn-active-bg: var(--primary);
    --bs-btn-active-border-color: var(--primary);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0,  0,  0,  0.125);
    --bs-btn-disabled-color: var(--white);
    --bs-btn-disabled-bg: var(--mild);
    --bs-btn-disabled-border-color: var(--mild);
}
.btn-group>.btn+.btn-primary, .input-group>.btn+.btn-primary, .input-group>.btn+.dropdown-menu+.btn-primary {
    border-left: 1px solid var(--primary-dark);
}
.btn-secondary {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: #6c757d;
    --bs-btn-border-color: #6c757d;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #51585e;
    --bs-btn-hover-border-color: #51585e;
    --bs-btn-focus-shadow-rgb: 130, 138, 145;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: #51585e;
    --bs-btn-active-border-color: #51585e;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0,  0,  0,  0.125);
    --bs-btn-disabled-color: #FFFFFF;
    --bs-btn-disabled-bg: #91989e;
    --bs-btn-disabled-border-color: #91989e;
}
.btn-group>.btn+.btn-secondary, .input-group>.btn+.btn-secondary, .input-group>.btn+.dropdown-menu+.btn-secondary {
    border-left: 1px solid #51585e;
}
.btn-success {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: var(--mild);
    --bs-btn-border-color: var(--mild);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--primary);
    --bs-btn-hover-border-color: var(--primary);
    --bs-btn-focus-shadow-rgb: 38, 184, 184;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: var(--primary);
    --bs-btn-active-border-color: var(--primary);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0,  0,  0,  0.125);
    --bs-btn-disabled-color: #FFFFFF;
    --bs-btn-disabled-bg: var(--mild);
    --bs-btn-disabled-border-color: var(--mild);
}
.btn-group>.btn+.btn-success, .input-group>.btn+.btn-success, .input-group>.btn+.dropdown-menu+.btn-success {
    border-left: 1px solid var(--primary);
}
.btn-info {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: var(--sky);
    --bs-btn-border-color: var(--sky);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--sky-dark);
    --bs-btn-hover-border-color: var(--sky-dark);
    --bs-btn-focus-shadow-rgb: 100, 193, 220;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: var(--sky-dark);
    --bs-btn-active-border-color: var(--sky-dark);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0,  0,  0,  0.125);
    --bs-btn-disabled-color: #FFFFFF;
    --bs-btn-disabled-bg: var(--sky-light);
    --bs-btn-disabled-border-color: var(--sky-light);
}
.btn-group>.btn+.btn-info, .input-group>.btn+.btn-info, .input-group>.btn+.dropdown-menu+.btn-info {
    border-left: 1px solid var(--sky-dark);
}
.btn-warning {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: var(--orange);
    --bs-btn-border-color: var(--orange);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--orange-dark);
    --bs-btn-hover-border-color: var(--orange-dark);
    --bs-btn-focus-shadow-rgb: 247, 171, 60;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: var(--orange-dark);
    --bs-btn-active-border-color: var(--orange-dark);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0,  0,  0,  0.125);
    --bs-btn-disabled-color: #FFFFFF;
    --bs-btn-disabled-bg: var(--orange-light);
    --bs-btn-disabled-border-color: var(--orange-light);
}
.btn-group>.btn+.btn-warning, .input-group>.btn+.btn-warning, .input-group>.btn+.dropdown-menu+.btn-warning {
    border-left: 1px solid var(--orange-dark);
}
.btn-danger {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: var(--red);
    --bs-btn-border-color: var(--red);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--red-dark);
    --bs-btn-hover-border-color: var(--red-dark);
    --bs-btn-focus-shadow-rgb: 255, 116, 112;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: var(--red-dark);
    --bs-btn-active-border-color: var(--red-dark);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0,  0,  0,  0.125);
    --bs-btn-disabled-color: #FFFFFF;
    --bs-btn-disabled-bg: var(--red-light);
    --bs-btn-disabled-border-color: var(--red-light);
}
.btn-group>.btn+.btn-danger, .input-group>.btn+.btn-danger, .input-group>.btn+.dropdown-menu+.btn-danger {
    border-left: 1px solid var(--red-dark);
}
.btn-light {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: #f2f3f4;
    --bs-btn-border-color: #f2f3f4;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #b6b6b7;
    --bs-btn-hover-border-color: #b6b6b7;
    --bs-btn-focus-shadow-rgb: 244, 245, 246;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: #b6b6b7;
    --bs-btn-active-border-color: #b6b6b7;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0,  0,  0,  0.125);
    --bs-btn-disabled-color: #FFFFFF;
    --bs-btn-disabled-bg: #f5f6f7;
    --bs-btn-disabled-border-color: #f5f6f7;
}
.btn-group>.btn+.btn-light, .input-group>.btn+.btn-light, .input-group>.btn+.dropdown-menu+.btn-light {
    border-left: 1px solid #b6b6b7;
}
.btn-dark {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: #2d353c;
    --bs-btn-border-color: #2d353c;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #22282d;
    --bs-btn-hover-border-color: #22282d;
    --bs-btn-focus-shadow-rgb: 77, 83, 89;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: #22282d;
    --bs-btn-active-border-color: #22282d;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0,  0,  0,  0.125);
    --bs-btn-disabled-color: #FFFFFF;
    --bs-btn-disabled-bg: #62686d;
    --bs-btn-disabled-border-color: #62686d;
}
.btn-group>.btn+.btn-dark, .input-group>.btn+.btn-dark, .input-group>.btn+.dropdown-menu+.btn-dark {
    border-left: 1px solid #22282d;
}
.btn-inverse {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: #2d353c;
    --bs-btn-border-color: #2d353c;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #22282d;
    --bs-btn-hover-border-color: #22282d;
    --bs-btn-focus-shadow-rgb: 77, 83, 89;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: #22282d;
    --bs-btn-active-border-color: #22282d;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0,  0,  0,  0.125);
    --bs-btn-disabled-color: #FFFFFF;
    --bs-btn-disabled-bg: #62686d;
    --bs-btn-disabled-border-color: #62686d;
}
.btn-group>.btn+.btn-inverse, .input-group>.btn+.btn-inverse, .input-group>.btn+.dropdown-menu+.btn-inverse {
    border-left: 1px solid #22282d;
}
.btn-blue {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: var(--mild);
    --bs-btn-border-color: var(--mild);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #276baa;
    --bs-btn-hover-border-color: #276baa;
    --bs-btn-focus-shadow-rgb: 82, 160, 230;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: #276baa;
    --bs-btn-active-border-color: #276baa;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0,  0,  0,  0.125);
    --bs-btn-disabled-color: #FFFFFF;
    --bs-btn-disabled-bg: #67abe9;
    --bs-btn-disabled-border-color: #67abe9;
}
.btn-group>.btn+.btn-blue, .input-group>.btn+.btn-blue, .input-group>.btn+.dropdown-menu+.btn-blue {
    border-left: 1px solid #276baa;
}
.btn-indigo {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: var(--purple);
    --bs-btn-border-color: var(--purple);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--purple-dark);
    --bs-btn-hover-border-color: var(--purple-dark);
    --bs-btn-focus-shadow-rgb: 153, 109, 227;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: var(--purple-dark);
    --bs-btn-active-border-color: var(--purple-dark);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0,  0,  0,  0.125);
    --bs-btn-disabled-color: #FFFFFF;
    --bs-btn-disabled-bg: var(--purple-light);
    --bs-btn-disabled-border-color: var(--purple-light);
}
.btn-group>.btn+.btn-indigo, .input-group>.btn+.btn-indigo, .input-group>.btn+.dropdown-menu+.btn-indigo {
    border-left: 1px solid var(--purple-dark);
}
.btn-purple {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: #727cb6;
    --bs-btn-border-color: #727cb6;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #565d89;
    --bs-btn-hover-border-color: #565d89;
    --bs-btn-focus-shadow-rgb: 135, 144, 193;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: #565d89;
    --bs-btn-active-border-color: #565d89;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0,  0,  0,  0.125);
    --bs-btn-disabled-color: #FFFFFF;
    --bs-btn-disabled-bg: #959dc8;
    --bs-btn-disabled-border-color: #959dc8;
}
.btn-group>.btn+.btn-purple, .input-group>.btn+.btn-purple, .input-group>.btn+.dropdown-menu+.btn-purple {
    border-left: 1px solid #565d89;
}
.btn-pink {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: var(--pink);
    --bs-btn-border-color: var(--pink);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--pink-dark);
    --bs-btn-hover-border-color: var(--pink-dark);
    --bs-btn-focus-shadow-rgb: 252, 111, 167;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: var(--pink-dark);
    --bs-btn-active-border-color: var(--pink-dark);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0,  0,  0,  0.125);
    --bs-btn-disabled-color: #FFFFFF;
    --bs-btn-disabled-bg: var(--pink-light);
    --bs-btn-disabled-border-color: var(--pink-light);
}
.btn-group>.btn+.btn-pink, .input-group>.btn+.btn-pink, .input-group>.btn+.dropdown-menu+.btn-pink {
    border-left: 1px solid var(--pink-dark);
}
.btn-red {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: var(--red);
    --bs-btn-border-color: var(--red);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--red-dark);
    --bs-btn-hover-border-color: var(--red-dark);
    --bs-btn-focus-shadow-rgb: 255, 116, 112;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: var(--red-dark);
    --bs-btn-active-border-color: var(--red-dark);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0,  0,  0,  0.125);
    --bs-btn-disabled-color: #FFFFFF;
    --bs-btn-disabled-bg: var(--red-light);
    --bs-btn-disabled-border-color: var(--red-light);
}
.btn-group>.btn+.btn-red, .input-group>.btn+.btn-red, .input-group>.btn+.dropdown-menu+.btn-red {
    border-left: 1px solid var(--red-dark);
}
.btn-orange {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: var(--orange);
    --bs-btn-border-color: var(--orange);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--orange-dark);
    --bs-btn-hover-border-color: var(--orange-dark);
    --bs-btn-focus-shadow-rgb: 247, 171, 60;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: var(--orange-dark);
    --bs-btn-active-border-color: var(--orange-dark);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0,  0,  0,  0.125);
    --bs-btn-disabled-color: #FFFFFF;
    --bs-btn-disabled-bg: var(--orange-light);
    --bs-btn-disabled-border-color: var(--orange-light);
}
.btn-group>.btn+.btn-orange, .input-group>.btn+.btn-orange, .input-group>.btn+.dropdown-menu+.btn-orange {
    border-left: 1px solid var(--orange-dark);
}
.btn-yellow {
    --bs-btn-color: #20252a;
    --bs-btn-bg: var(--yellow);
    --bs-btn-border-color: var(--yellow);
    --bs-btn-hover-color: #20252a;
    --bs-btn-hover-bg: var(--yellow-dark);
    --bs-btn-hover-border-color: var(--yellow-dark);
    --bs-btn-focus-shadow-rgb: 222, 190, 6;
    --bs-btn-active-color: #20252a;
    --bs-btn-active-bg: var(--yellow-dark);
    --bs-btn-active-border-color: var(--yellow-dark);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0,  0,  0,  0.125);
    --bs-btn-disabled-color: #20252a;
    --bs-btn-disabled-bg: var(--yellow-light);
    --bs-btn-disabled-border-color: var(--yellow-light);
}
.btn-group>.btn+.btn-yellow, .input-group>.btn+.btn-yellow, .input-group>.btn+.dropdown-menu+.btn-yellow {
    border-left: 1px solid var(--yellow-dark);
}
.btn-green {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: var(--green);
    --bs-btn-border-color: var(--green);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--green-dark);
    --bs-btn-hover-border-color: var(--green-dark);
    --bs-btn-focus-shadow-rgb: 81, 182, 81;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: var(--green-dark);
    --bs-btn-active-border-color: var(--green-dark);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0,  0,  0,  0.125);
    --bs-btn-disabled-color: #FFFFFF;
    --bs-btn-disabled-bg: var(--green-light);
    --bs-btn-disabled-border-color: var(--green-light);
}
.btn-group>.btn+.btn-green, .input-group>.btn+.btn-green, .input-group>.btn+.dropdown-menu+.btn-green {
    border-left: 1px solid var(--green-dark);
}
.btn-teal {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: var(--mild);
    --bs-btn-border-color: var(--mild);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--primary);
    --bs-btn-hover-border-color: var(--primary);
    --bs-btn-focus-shadow-rgb: 38, 184, 184;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: var(--primary);
    --bs-btn-active-border-color: var(--primary);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0,  0,  0,  0.125);
    --bs-btn-disabled-color: #FFFFFF;
    --bs-btn-disabled-bg: var(--mild);
    --bs-btn-disabled-border-color: var(--mild);
}
.btn-group>.btn+.btn-teal, .input-group>.btn+.btn-teal, .input-group>.btn+.dropdown-menu+.btn-teal {
    border-left: 1px solid var(--primary);
}
.btn-lime {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: #90ca4b;
    --bs-btn-border-color: #90ca4b;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #6c9838;
    --bs-btn-hover-border-color: #6c9838;
    --bs-btn-focus-shadow-rgb: 161, 210, 102;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: #6c9838;
    --bs-btn-active-border-color: #6c9838;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0,  0,  0,  0.125);
    --bs-btn-disabled-color: #FFFFFF;
    --bs-btn-disabled-bg: #acd778;
    --bs-btn-disabled-border-color: #acd778;
}
.btn-group>.btn+.btn-lime, .input-group>.btn+.btn-lime, .input-group>.btn+.dropdown-menu+.btn-lime {
    border-left: 1px solid #6c9838;
}
.btn-cyan {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: var(--sky);
    --bs-btn-border-color: var(--sky);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--sky-dark);
    --bs-btn-hover-border-color: var(--sky-dark);
    --bs-btn-focus-shadow-rgb: 100, 193, 220;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: var(--sky-dark);
    --bs-btn-active-border-color: var(--sky-dark);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0,  0,  0,  0.125);
    --bs-btn-disabled-color: #FFFFFF;
    --bs-btn-disabled-bg: var(--sky-light);
    --bs-btn-disabled-border-color: var(--sky-light);
}
.btn-group>.btn+.btn-cyan, .input-group>.btn+.btn-cyan, .input-group>.btn+.dropdown-menu+.btn-cyan {
    border-left: 1px solid var(--sky-dark);
}
.btn-white {
    --bs-btn-color: #20252a;
    --bs-btn-bg: #FFFFFF;
    --bs-btn-border-color: #ced4da;
    --bs-btn-hover-color: #20252a;
    --bs-btn-hover-bg: #e9ecef;
    --bs-btn-hover-border-color: #adb5bd;
    --bs-btn-focus-shadow-rgb: 180, 186, 192;
    --bs-btn-active-color: #20252a;
    --bs-btn-active-bg: #e9ecef;
    --bs-btn-active-border-color: #adb5bd;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0,  0,  0,  0.125);
    --bs-btn-disabled-color: #20252a;
    --bs-btn-disabled-bg: #eff1f3;
    --bs-btn-disabled-border-color: #c2c8ce;
}
.btn-group>.btn+.btn-white, .input-group>.btn+.btn-white, .input-group>.btn+.dropdown-menu+.btn-white {
    border-left: 1px solid #adb5bd;
}
.btn-gray {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: #6c757d;
    --bs-btn-border-color: #6c757d;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #51585e;
    --bs-btn-hover-border-color: #51585e;
    --bs-btn-focus-shadow-rgb: 130, 138, 145;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: #51585e;
    --bs-btn-active-border-color: #51585e;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0,  0,  0,  0.125);
    --bs-btn-disabled-color: #FFFFFF;
    --bs-btn-disabled-bg: #91989e;
    --bs-btn-disabled-border-color: #91989e;
}
.btn-group>.btn+.btn-gray, .input-group>.btn+.btn-gray, .input-group>.btn+.dropdown-menu+.btn-gray {
    border-left: 1px solid #51585e;
}
.btn-gray-dark {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: #2d353c;
    --bs-btn-border-color: #2d353c;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #22282d;
    --bs-btn-hover-border-color: #22282d;
    --bs-btn-focus-shadow-rgb: 77, 83, 89;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: #22282d;
    --bs-btn-active-border-color: #22282d;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0,  0,  0,  0.125);
    --bs-btn-disabled-color: #FFFFFF;
    --bs-btn-disabled-bg: #62686d;
    --bs-btn-disabled-border-color: #62686d;
}
.btn-group>.btn+.btn-gray-dark, .input-group>.btn+.btn-gray-dark, .input-group>.btn+.dropdown-menu+.btn-gray-dark {
    border-left: 1px solid #22282d;
}
.btn-muted {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: #adb5bd;
    --bs-btn-border-color: #adb5bd;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #82888e;
    --bs-btn-hover-border-color: #82888e;
    --bs-btn-focus-shadow-rgb: 185, 192, 199;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: #82888e;
    --bs-btn-active-border-color: #82888e;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0,  0,  0,  0.125);
    --bs-btn-disabled-color: #FFFFFF;
    --bs-btn-disabled-bg: #c2c8ce;
    --bs-btn-disabled-border-color: #c2c8ce;
}
.btn-group>.btn+.btn-muted, .input-group>.btn+.btn-muted, .input-group>.btn+.dropdown-menu+.btn-muted {
    border-left: 1px solid #82888e;
}
.btn-black {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: #000000;
    --bs-btn-border-color: #000000;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: black;
    --bs-btn-hover-border-color: black;
    --bs-btn-focus-shadow-rgb: 38, 38, 38;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: black;
    --bs-btn-active-border-color: black;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0,  0,  0,  0.125);
    --bs-btn-disabled-color: #FFFFFF;
    --bs-btn-disabled-bg: #404040;
    --bs-btn-disabled-border-color: #404040;
}
.btn-group>.btn+.btn-black, .input-group>.btn+.btn-black, .input-group>.btn+.dropdown-menu+.btn-black {
    border-left: 1px solid #000;
}
.btn-silver {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: #b6c2c9;
    --bs-btn-border-color: #b6c2c9;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #899297;
    --bs-btn-hover-border-color: #899297;
    --bs-btn-focus-shadow-rgb: 193, 203, 209;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: #899297;
    --bs-btn-active-border-color: #899297;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0,  0,  0,  0.125);
    --bs-btn-disabled-color: #FFFFFF;
    --bs-btn-disabled-bg: #c8d1d7;
    --bs-btn-disabled-border-color: #c8d1d7;
}
.btn-group>.btn+.btn-silver, .input-group>.btn+.btn-silver, .input-group>.btn+.dropdown-menu+.btn-silver {
    border-left: 1px solid #899297;
}

.bg-success {
    background-color: var(--deep)!important;
}

.bg-progress {
    background-color: var(--primary)!important;
}

.bg-danger {
    background-color: var(--red)!important;
}

.btn-check:focus+.btn, .btn:focus, .btn-check:active+.btn:focus, .btn-check:checked+.btn:focus, .btn.active:focus, .btn.show:focus, .btn:active:focus {box-shadow: none;}

/* input */
.form-control, .form-select {
    border-color: var(--light);
    transition: all .2s ease;
    color: var(--text);
    font-weight: 500;
}
.form-control{
    padding: 6px;
}
.form-select {
    padding: 6px 2.25rem 6px 0.75rem;
}
.form-control::placeholder, .form-select::placeholder {
    color: var(--light);
}
.form-control:focus {
    color: var(--text-dark);
    background-color: var(--white);
    border-color: vaR(--light);
    outline: 0;
    box-shadow: 0 0 10px var(--shadow);
}

.input-group-text-line {
    color: var(--white); 
    padding: 6px 0.75rem !important;
    background-color: var(--light);
    border: 1px solid var(--light);
}
.input-group-text-addon {
    display: flex;
    align-items: center;
    padding: .4375rem .75rem;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--app-component-color);

    text-align: center;
    white-space: nowrap;
    background-color: #fff;
    border: 1px solid var(--light);
    border-radius: 4px;
}
/* .input-group .btn {
    background-color: var(--light)!important;
    border-color: var(--light)!important;
}*/

/*.input-group .btn:hover {
    background-color: var(--mild)!important;
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
} */

.input-group-text-none {background-color: transparent!important; border: 0!important;}
.toggle> .toggle-group > .btn {border-color: var(--primary);}

.input-group-text {background-color: var(--light); color: var(--white); border: 1px solid var(--light);}
.form-label {color: var(--strong);}


body, .app-sidebar {background-color: var(--background);}
.app-sidebar-content {border-radius: 0 10px 10px 0;background-color: var(--box); box-shadow: 0 2px 10px var(--shadow);}

.app-content .app-content-padding{padding: 10px 20px; margin: 20px 30px; background-color: var(--box); border-radius: 10px; box-shadow: 0 2px 10px var(--shadow);position: relative;}

.page-header {padding: 15px 24px;border-bottom: 1px solid var(--box-line);background-color: var(--box);position: sticky;top: 0;left: 0;z-index: 100; font-weight: 700; font-size: 1.8em;
    margin: 0 -20px 5px -20px; transform: translateY(-15px);}
.menu-submenu {background-color: var(--brightest);}
.app-sidebar .menu .menu-item {margin-bottom: 5px;}
.app-sidebar .menu > .menu-item > .menu-submenu {padding: 35px 0 15px 25px; margin-left: 10px;position: relative;margin-top: -25px;}
.menu-submenu .menu-text {color: var(--deep);}
.menu-submenu .active .menu-text {font-weight: 700;}
.app-sidebar .menu .menu-item.active>.menu-link {background-color: var(--light);border-color: var(--light);}

.menu-icon {color: var(--light)}
.menu .navbar-brand {color: var(--strong); position: sticky; top: 0; z-index: 30; background-color: var(--box);}
.menu .navbar-brand b {color: var(--primary);}

.logout {font-size: 10px;color: var(--gray-dark);text-decoration: none; margin-top: 10px; cursor: pointer;}
.logout:hover {text-decoration: underline;}
.app-sidebar .menu > .menu-item > .menu-link {margin-left: 10px;border-radius: 20px 0 0 20px;padding: 8px 20px; border: 1px solid var(--box-line); color: var(--text);position: relative;z-index: 2;background-color: var(--box); transition: all .2s ease;}
.app-sidebar .menu > .menu-item > .menu-link i {transition: all.2s ease;}
.app-sidebar .menu > .menu-item > .menu-link:focus, .app-sidebar .menu > .menu-item > .menu-link:hover {background-color: var(--light);border-color: var(--light);}
.app-sidebar .menu .menu-item .menu-link:focus i, .app-sidebar .menu .menu-item .menu-link:hover i, .app-sidebar .menu .menu-item.active>.menu-link i {color: var(--box);}
.menu-submenu .menu-link { transition: all .2s ease;}
.menu-submenu .menu-link:hover {font-weight: 700;}
.navbar-brand {color:var(--strong);}
.navbar-brand b {color:var(--primary);}
#divGotoTop {position: sticky;bottom: 20px;z-index: 3;}

/* .app-sidebar .menu .menu-caret {display: none;} 이지현 주석처리 2024.02.01*/

.app-sidebar .app-sidebar-minify-btn {background-color: var(--box); border: 1px solid var(--box-line);border-right: 0; transition: all .2s ease;}
.app-sidebar .app-sidebar-minify-btn:hover, .app-sidebar .app-sidebar-minify-btn:focus {background-color: var(--light);}
.app-sidebar .app-sidebar-minify-btn i {color: var(--light);}
.app-sidebar .app-sidebar-minify-btn:hover i, .app-sidebar .app-sidebar-minify-btn:focus i {color: var(--box);}

.app-sidebar .menu .menu-profile {background-color: var(--box);}
.app-sidebar .menu .menu-profile .menu-profile-image {width: 84px;height: 84px;border-radius: 50px; border: 1px solid var(--box-line); margin: 0 auto;}
.menu-profile-info {color: var(--strong); text-align: center;} 
.app-sidebar .menu .menu-profile .menu-profile-info small {display: inline-block; padding: 0 15px; background-color: var(--box); color: var(--deep);border: 1px solid var(--deep);border-radius: 30px;}
.menu-profile-info .d-flex {font-size: 20px;font-weight: 700; justify-content: center;gap: 5px;margin: 10px 0 0;color: var(--strong);}
.menu-profile-info .d-flex::before {/*content: '관리자';*/padding: 2px 5px;border-radius: 10px;font-size: 10px; background-color: var(--primary); color: var(--white);}

.menu-profile-link {text-align: center;}
.menu-profile-wrap {position: relative;display: inline-block;}
.setting-btn {position: absolute;right: 0;bottom: 0; background-color: var(--mild);color: var(--white);width: 30px;height: 30px;border-radius: 50%;border: 0; transition: all .2s ease;}
.setting-btn:hover {background-color: var(--deep);}

.app-sidebar-float-submenu-container .app-sidebar-float-submenu {background-color: var(--brightest);}
.app-sidebar-float-submenu-container .app-sidebar-float-submenu .menu-item .menu-link .menu-text {color: var(--mild);}
.app-sidebar-float-submenu-container {border-radius: 0 0 10px 0; border-top: 2px solid var(--primary);}
/* panel */
.panel.panel-inverse>.panel-heading {background-color: var(--box); color: var(--text); border-radius: 5px; border: 1px solid var(--box-line);}
.panel .panel-body { background-color: var(--brightest);}

.app-footer {border: 0 ; text-align: right;  padding: 0 30px 10px;}

/* login */
.login-container { display: flex; width: auto; justify-content: center; align-items: center; gap: 100px; background-color: var(--box); margin: 0 auto; max-width: fit-content; border-radius: 10px; padding: 30px 50px; box-shadow: 0px 4px 15px 0px var(--shadow); position: relative; overflow: hidden; height: 400px;}
.login-container img {width: 270px; position: absolute;top: -100px;left: -50px; opacity: .1; animation-name: rolling; animation-duration: 30s; animation-timing-function: linear; animation-iteration-count: infinite;}
.login.login-v1 .login-container .login-header {height: 100%;}
.login.login-v1 .login-container .login-header .brand {display: flex;justify-content: space-between; flex-direction: column; height: 100%;}
.login.login-v1 .login-container .login-header .brand::before {content: '';}
.login.login-v1 .login-container .login-header .brand div {font-size: 50px; color: var(--strong);}
.login.login-v1 .login-container .login-header .brand b {color: var(--primary);}
.login.login-v1 .login-container .login-body {padding: 0;width: 300px; max-width: 100%;}
.login.login-v1 {padding: 0 10px ;}
#btnLogin {padding: 10px;font-size: 18px;}
.input-label {color: var(--text); font-size: 16px; font-weight: 600; margin-bottom: 5px;}

/* contents */
.contents-wrap {padding: 20px;}
.content-box{border: 1px solid var(--box-line);}
.label {display: inline-block;width: auto;}

/* popup */
.licolored-header .modal-header {background-color: var(--mild);}
.modal-backdrop { --bs-backdrop-bg: #000; --bs-backdrop-opacity: 0.5;}

/* 일반형 테이블 */
/* .table-wrap {width: 100%;overflow-y: auto;}
.table {table-layout: fixed; border-top: 2px solid var(--primary); border-bottom: 1px solid var(--primary); width: 100%; border-spacing : 0;}
.table th, .table td {padding: 5px 10px;border: 0;border-width: 1px 0 1px 0;border-style: solid;border-color: var(--box-line); vertical-align: middle;}
.table th {background-color: var(--gray-light); font-weight: 700; color: var(--strong);}
.table td {background-color: var(--box);color: var(--text);}

.table-line th, .table-line td {border-width: 1px 1px 1px 0;}
.table-line th:last-child, .table-line td:last-child {border-right: 0;} 
thead tr:last-child th, tbody tr:last-child th {border-bottom: 0;} 
.th-center th {text-align: center;}
.td-center td {text-align: center;}
.table .btn-check, .table .btn-radio {margin-bottom: -2px;} */

/* form */
#frmRegBoard {padding: 15px;margin-bottom: 50px; border-radius: 0 0 10px 10px; background-color: var(--brightest); border-top: 2px solid var(--primary);}
.note-editor.note-frame {border: 1px solid var(--light)!important; }
.attach-blank-box, .attach-progress-box, .attach-list {border-color: var(--light);}
#btnUpload {border-bottom-right-radius: 0; background-color: var(--light);color: var(--white); border-color: var(--light);}
#btnUpload:hover {background-color: var(--mild);border-color: var(--mild);}
.note-editor.note-frame .note-toolbar {background: var(--white); border-color: var(--white);}
.note-editor.note-frame.note-frame .note-statusbar .note-resizebar .note-icon-bar {border-top-color: var(--white);}
.note-editor.note-frame.note-frame .note-statusbar { border-color: var(--light); background: var(--light);}
.note-toolbar .note-btn-group .note-btn, .note-toolbar .note-btn-group .note-btn i {color: var(--text)!important;}
.note-modal-content { border-radius: 10px;overflow: hidden;}
.note-editor.note-frame .note-modal .note-modal-content .note-modal-header {background-color: var(--mild);}
.note-editor.note-frame .note-modal .note-modal-content .note-modal-header .note-modal-title {color: var(--white);}

@keyframes rolling {
    0%{transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}

.input-group .btn-group:not(:last-child) *:last-child {border-radius: 0;}
.form-check-input {cursor: pointer; transition: all .2s ease;}
.contents-footer {position: sticky; bottom:-10px; width: 100%; padding: 10px 20px; background-color: var(--box); border-top: 1px solid var(--box-line);z-index: 100;}
.form-check-input:checked {background-color: var(--primary);border-color: var(--primary);}
.form-check-input:focus {
    outline: 0;
    box-shadow: 0 0 5px var(--shadow);
}

/* 404 page */

.error .error-code {justify-content: flex-start; color: var(--text);font-weight: 600; padding: 1.875rem 120px; letter-spacing: -3px;text-shadow: none;}
.error .error-code i {color:var(--deep);}
.error .error-content {text-align-last: left; padding: 50px 150px;background-image:none;background-color: var(--strong-dark);border-top: 5px solid var(--gray-dark);}
.error .error-message {font-size: 1.2em;}
.error-content .btn {padding: 8px 30px!important; font-size: 18px;font-weight: 600;}

/* pagination */
.pagination {gap: 3px;}
.page-item .page-link {border-radius: 50%;border: 0; background-color: transparent;}
.page-item.disabled .page-link {background-color: transparent;}
.pagination li:first-child a, .pagination li:last-child a {padding: 0.375rem 0.6rem;}
.active>.page-link, .page-link.active {border-color: var(--light);background-color: var(--light);}

/* detail page */
.board-detail .card-header {border: 1px solid var(--box-line); border-radius: 0; border-top: 3px solid var(--primary);}
.board-detail .card-body {border-bottom: 1px solid var(--box-line);}
.app-content-padding::after {display: block;content: '';margin-bottom: 30px;}

#divCommentResult {border-top: 2px solid var(--deep); background-color: var(--brightest);}
.board-comment .card-header .flex-1::before {display: block; content: ''; display: inline-block; width: 49px; height: 15px; background-image: url(/assets/Admin/_images/title-mark.svg); margin-right: 5px;}
.board-comment .btn-group {gap: 5px;}
.board-comment .btn-group .btn { border-radius: 50%!important; border-color: var(--deep); color: var(--deep); width: 22px; height: 22px;}
.board-comment .card-header {font-size: 18px;color: var(--strong);}
.reply-info-box .reply-date {color: var(--light);}
.reply-info-box {color: var(--strong);}
.reply-info-box + span {color: var(--text);}

@media (max-width: 767.98px){
    .app-content .app-content-padding {height: calc(100vh - 110px)!important; top: 60px; overflow-y:auto!important;}
    .login-container {height: auto;}
    .app-content .app-content-padding {margin: 20px 15px;}
}


/* 인사정보 */
.employee-list { transition: all .2s ease;}
.employee-list * {white-space:nowrap;}
.jstree-anchor {text-overflow: ellipsis; overflow: hidden;display: inline-block; width: calc(100% - 30px);}
.employee-list-btn { display: none; position: absolute; top: 50%; transform: translate(-97%, -50%); background-color: var(--box); color: var(--mild); padding: 15px; border: 1px solid var(--box-line); border-radius: 10px 0 0 10px; font-size: 18px; font-weight: 600; font-family: "Font Awesome 6 Free"; animation: watchThis 1.5s linear;}
.employee-list-btn:hover {background-color: var(--bright);}
.employee-list-btn i {transition: all .6s ease;}
.employee-list.view .employee-list-btn i {transform: rotate(540deg);}

@keyframes watchThis {
    0% {background-color: var(--box);}
    17% {background-color: var(--light);}
    34% {background-color: var(--box);}
    51% {background-color: var(--light);}
    68% {background-color: var(--box);}
    85% {background-color: var(--light);}
    100% {background-color: var(--box);}
}

@media (max-width: 1080px){
    .employee-contents {padding: 0;}
    .employee-list {position: fixed;z-index: 1030; right: 0;padding: 0; top: 30px; width: 35%; transform: translateX(100%); width: 35%;}
    .employee-list.view {transform: translateX(0);}
    .employee-list .content-box { border-radius: 10px 0 0 10px; box-shadow: 0 0 10px var(--shadow);}
    .employee-list .content-body { height: calc(100vh - 120px);}
    .employee-list .content-body > div { height: 100%;overflow: auto; }
    .employee-list-btn {display: block;}
    .employee-view {width: 100%;padding: 0;}
    
}

@media (max-width: 767.98px) {
    .employee-list { width: calc(100vw - 40px);}
    .employee-list-btn {padding: 15px 8px; font-size: 16px;}
    .jstree-children {width: fit-content;}
}

/* 메세지 */

.va-container {height: 100%;}
.va-container-body {height: calc(100% - 91px); min-height:60px;}



/* tab box */
.tab-box {position: relative; border: 0;}
.tab-box > .content-footer {border-color: var(--light);}
.tab-box > .content-body {background-color: var(--brightest); color: var(--text);}
.tab-box .content-header {position: sticky; top: 45px; z-index: 2; background-color: var(--box); border-bottom-color: var(--light);}
.tab-box .content-header .nav-tabs {flex-wrap: nowrap; padding: 0!important;}
.tab-box .content-box > .content-header .nav-tabs-v2 { flex-wrap: nowrap; padding: 0; width: 100%;}
.tab-box .content-header .btn {border-color: var(--light);color: var(--mild);border-radius: 4px;}

.tab-box > .content-header .nav-tabs-v2 {margin: 0;}
.tab-box .nav.nav-tabs.nav-tabs-v2>.nav-item {margin-right: 3px!important;}
.tab-box > .content-header .nav.nav-tabs.nav-tabs-v2>.nav-item>.nav-link { margin: 0; min-width: 80px; text-align: center; border: 1px solid var(--light); background-color: var(--bright); padding: 10px; color: var(--light); font-weight: 500; } 
.tab-box .nav.nav-tabs.nav-tabs-v2>.nav-item {margin-bottom: -1px;}
.tab-box .nav.nav-tabs.nav-tabs-v2>.nav-item>.nav-link.active { border-bottom-color: var(--brightest)!important; background: 0 0; background-color: var(--brightest) !important; color: var(--deep)!important; font-weight: 700!important; } 

.tab-box .va-container {overflow: hidden; border-color: var(--gray);border-radius: 10px;padding: 7px 15px;}
.tab-box .va-container-header {border-bottom: 1px solid var(--gray);}
.va-container .va-container-header .header-row {color: var(--strong);}
.va-container .va-container-header .header-row .title {font-weight: 700;font-size: 16px;}
.tab-box .va-container-footer {border-top: 1px solid var(--gray);}
.tab-box .va-container-body { color: var(--text);}

@media (max-width: 767.98px) {
    .tab-box .content-header > div {flex-direction: column-reverse; gap: 10px;}
    .tab-box .content-header > div > div {width: 100%;}
}

/* flex */
.flex-box { display: flex; } 
.flex-box.licolumn { flex-direction: column; } 
.flex-box.row { flex-direction: row; } 
.flex-box.wrap { flex-wrap: wrap; } 
.flex-box.just-between { justify-content: space-between; } 
.flex-box.just-around { justify-content: space-around; } 
.flex-box.just-start { justify-content: flex-start; } 
.flex-box.just-end { justify-content: flex-end; } 
.flex-box.just-center { justify-content: center; } 
.flex-box.item-start { align-items: flex-start; } 
.flex-box.item-end { align-items: flex-end; } 
.flex-box.item-center { align-items: center; } 
.flex-box.gap--5 { gap: 5px; } 
.flex-box.gap--8 { gap: 8px; } 
.flex-box.gap--10 { gap: 10px; } 
.flex-box.gap--12 { gap: 12px; } 
.flex-box.gap--15 { gap: 15px; } 
.flex-box.gap--20 { gap: 20px; }

/* list layout */
.list-wrap {padding: 5px 10px;}
.min-1200 ul > li, table.min-1200 { min-width: 1200px; } 
.min-1000 ul > li, table.min-1000 { min-width: 1000px; } 
.min-900 ul > li, table.min-900  { min-width: 900px; } 
.min-700 ul > li, table.min-700 { min-width: 700px; } 
.min-600 ul > li, table.min-600 { min-width: 600px; } 
.list-wrap { overflow-x: auto;} 
.list-left {text-align-last: left;}

.list-table .licol-th, .list-table .licol-td { display: table-cell; } 
.list-head { padding: 10px 0; margin-bottom: 0;} 
.list-head > li { border-radius: 5px; border: 1px solid var(--background); background-color: var(--box);} 
.th-txt { color: var(--text-dark); font-weight: 700; font-size: 1.12em; white-space: nowrap; } 

/* 일반형 리스트 */
.licol-1 {width: 1%;}
.licol-2 {width: 2%;}
.licol-3 {width: 3%;}
.licol-4 {width: 4%;}
.licol-5 {width: 5%;}
.licol-6 {width: 6%;}
.licol-7 {width: 7%;}
.licol-8 {width: 8%;}
.licol-9 {width: 9%;}
.licol-10 {width: 10%;}
.licol-11 {width: 11%;}
.licol-12 {width: 12%;}
.licol-13 {width: 13%;}
.licol-14 {width: 14%;}
.licol-15 {width: 15%;}
.licol-15 {width: 16%;}
.licol-17 {width: 17%;}
.licol-18 {width: 18%;}
.licol-19 {width: 19%;}
.licol-20 {width: 20%;}
.licol-21 {width: 21%;}
.licol-22 {width: 22%;}
.licol-23 {width: 23%;}
.licol-24 {width: 24%;}
.licol-25 {width: 25%;}
.licol-26 {width: 26%;}
.licol-27 {width: 27%;}
.licol-28 {width: 28%;}
.licol-29 {width: 29%;}
.licol-30 {width: 30%;}
.licol-35 {width: 35%;}
.licol-40 {width: 40%;}
.licol-45 {width: 45%;}
.licol-50 {width: 50%;}
.licol-auto {width: auto;}

.list-table .licol { text-align: center; vertical-align: middle; } 
.list-table > li { padding: 10px 1em; display: table; table-layout: fixed; width: 100%; max-width: 100%; transition: all .2s ease; } 
.list-body {padding: 0;}
.list-body > li { margin-bottom: 5px; border-radius: 5px; border: 1px solid var(--box-line); color: var(--text); background-color: var(--box); font-size: 1.15em;} 
.list-body > li:last-child {margin-bottom: 0;}
.list-body > li a { color: var(--text); transition: all .2s ease; } 
.list-body > li:has(a:hover) { background-color: var(--background); } 

.list-body > li .writer { font-size: .88em; font-weight: 700; display: inline-block; border-radius: 5px; padding: 2px 8px; background-color: var(--box); border: 1px solid var(--deep); color: var(--deep); transition: all .2s ease; } 
.list-body > li .writer:hover { background-color: var(--deep); color: var(--white); } 
.num { display: inline-block; padding: 6px 8px; background-color: var(--gray-light); border-radius: 30px; } 
.licol-subject .subject {white-space: nowrap;  max-width: 80%; overflow: hidden; text-overflow: ellipsis;text-align: left; word-break: keep-all;}
.subject:hover { color: var(--primary); font-weight: 700; } 
.licol-subject { padding: 0 10px; } 

.new .subject::before { content: 'NEW'; display: inline-block; margin-right: 5px; padding: 1px 10px; border-radius: 20px; background-color: var(--primary); color: var(--white); font-size: 10px; } 
.reply-count { background-color: var(--background); color: var(--deep); border-radius: 20px; font-size: 0.88em; padding: 2px 6px; font-weight: 700; } 
.reply-icon {width: 24px;height: 24px;background-image: url(/assets/Admin/_images/list-reply.svg);}
.td-title {display: none; color: var(--gray-dark);font-size: 1em;}

.td-left {text-align: left!important;}
.th-left {text-align: left!important;}

/* 클래스 리스트 */
.class-list .td-txt {font-size: 1em;}

@media (max-width: 1080px){
    
    /* list */
    .list-wrap { display: flex; align-items: stretch;gap: 3px;} 
    .list-body {display: flex; height: 100%;gap: 3px;}
    .list-wrap .list-table li {min-width: auto;display: flex;flex-direction: column; gap: 10px ;justify-content: space-between;}
    .list-head > li {display: flex; flex-direction: column; justify-content: space-around; height: 100%; align-items: flex-end;}
    .list-body > li {margin: 0;}
    .list-head {padding: 0; height:calc(100% - 22px);}

    .list-wrap.th-sticky { overflow: visible;}
    .list-wrap.th-sticky .list-head {position: relative;}
    .list-wrap.th-sticky .list-table .licol {width: 100% ;}
    .list-wrap.th-sticky .list-head > li {position: sticky; top: 50px;left: 0; height: auto; justify-content: flex-start;}

    .list-wrap.th-sticky .list-body {display: block; flex-direction: column; width: 100%;}
    .list-wrap.th-sticky .list-body > li {display: block; margin-bottom: 10px;}
    .list-wrap.th-sticky .list-body > li:last-child{margin-bottom: 0;}
    .list-wrap.th-sticky .list-body > li .licol {display: inline-block; width: auto; margin-right: 8px;}
    .list-wrap.th-sticky .list-body > li .licol-subject {width: 100%;}
    .list-wrap.th-sticky .licol-th > div {flex-wrap: nowrap; justify-content: flex-end;}
    .licol-subject {padding: 0;}
    .list-wrap.th-sticky .list-body-wrap {width: 100%;}
    .list-wrap.th-sticky .subject  {font-size: 1.25em;}

    .td-title {display: inline-block;}
    .num {padding: 0;background-color: unset;}
    .list-wrap.th-sticky .list-body > li .licol-auto {width: 100%; margin: 6px 0;}
    .list-wrap.th-sticky .list-body > li .licol-auto:last-child {margin:  6px 0 0;}
    .list-wrap.th-sticky .list-body > li.reply { width: calc(100% - 30px); margin-left: 30px; border-radius: 0 5px 5px 0; border-left: 3px solid var(--mild);}
    .list-body > li .subject  {color: var(--strong); font-weight: 700;}
    .list-body > li .writer {padding: 0 8px;}

    .licol-subject .subject {white-space:unset; width: auto; text-overflow:unset;overflow: visible;}

}
@media (max-width: 540px){
    .list-wrap {padding: 5px 0;}
    .list-wrap.th-sticky .list-head-wrap {display: none;}
}