@charset "UTF-8";

/*event add 2024-05*/
.wd60  {width:60px !important;max-width:120px !important;}
.wd70  {width:70px !important;max-width:120px !important;}
.wd80  {width:80px !important;max-width:120px !important;}

.wd90  {width:90px !important;max-width:120px !important;}
.wd100  {width:100px !important;max-width:100px !important;}
.wd150  {width:150px !important;max-width:150px !important;}
.wd200  {width:200px !important;max-width:200px !important;}
.wd250  {width:250px !important;max-width:250px !important;}
.wd300  {width:300px !important;max-width:300px !important;}
.wd400  {width:400px !important;max-width:400px !important;}
.wd500  {width:500px !important;max-width:500px !important;}
.wd540  {width:540px !important;max-width:580px !important;}
.wd580  {width:580px !important;max-width:580px !important;}
.wd600  {width:600px !important;max-width:600px !important;}
.wd50p  {width:50% !important;}
.wd100p  {width:100% !important;}

.alignL {text-align:left !important;}
.alignR {text-align:right !important;}
.alignC {text-align:center !important;}
.center {margin:0 auto;}

.mt0    {margin-top:0 !important;}
.mb5    {margin-bottom:5px !important;}

.pdt0   {padding-top:0 !important;}

.bar_right  {border-right:1px solid #ccc; margin:0 10px 0 0; padding-right:10px; line-height:1;}
.table td .td-inner.right {flex-direction: row-reverse;}
.table td .td-inner.nowrap {flex-wrap: nowrap;align-items: flex-start;}
.table td .ft-12{font-size: 12px;}
.table td .cl-{font-size: 12px;}
.side-nav   {overflow-y: auto;}
.textarea_form  {
    width:100%;
    border:1px solid #dee2e6;
    padding: 15px;
    font-size:14px;
}

.textarea_form  textarea{width:100%; height:150px;}
/*출석체크_기간별내역*/
.count-wrapper {display: flex;}
.count_box  {width:25%;text-align:center;border:1px solid #ccc;border-radius: 10px;margin: 10px 10px 30px;position: relative;}
.count_box:hover  {border-color:#1c7ed6;}
.count_box a  {display:block;padding:20px 10px;}
.count_box .cnt_top  {font-size:16px;font-weight: 600;}
.count_box .cnt_bm  {font-size:24px;font-weight: 600;color:#1864ab;margin-top:10px;}
.count_box .cnt_txt  {font-size:14px;font-weight: 500;color: #696969;/* margin-top: 15px; */position: absolute;left: 0;bottom: -33px;width: 100%;text-align: center;}

.count_box.last  {background: #f7f7f7;border-color:#3CAB50;}
.count_box.last .cnt_bm  {color:#3CAB50;}
.count_box.last:hover {background: #fff;}

.count_box.st-01  {background: #edecf9;border-color: #865fdf;}
.count_box.st-01 .cnt_bm  {color: #797c81;font-size: 18px;/* font-weight: 400; */}
.count_box.st-01 .cnt_bm .cc{color: #865fdf;font-size: 24px;font-weight: 600;margin-right: 5px;}
.count_box.st-01:hover {background: #fff;}

.ic_today{background: #228be6;color:#fff;border-radius: 5px;font-size: 0.8em;padding: 1px 9px 5px 9px;vertical-align: 2px;}

.count-wrapper.cw-01{display: flex;flex-wrap: wrap;}
.count-wrapper.cw-01 .count_box{width: 18.7%;}
.dropzone-wrapper .dropzone.w200 {min-width: 200px;}

.ck.ck-content:not(.ck-style-grid__button__preview) {min-height: 200px !important;}

/*사진작은사이즈*/
.dropzone-wrapper.sm    {padding:0;}
.dropzone-wrapper.sm .dropzone {min-width: 100px; min-height: 100px;}
.dropzone-wrapper.sm .dropzone .dz-message    {/*display: flex; gap: 20px; */margin: 0;}
.dropzone-wrapper.sm .dropzone .dz-message::before  {
    width:60px; height:60px;
}
th.left-line{border-left: solid 1px #dee2e6;}
td.left-line{border-left: solid 1px #f1f3f5;}
tr.hr td,
tr.hr th{border-top:1px solid #6e6e6e;}
.btn.outline.delete   {
    border-color:red
}
.btn.delete {
    background-color: #ca0000;
    color: #ffffff;
}
.btn.delete:hover {
    background-color: #ca0000;
}
.btn.delete.outline {
    border-color: #ca0000;
    color: #ca0000;
    background-color: #ffffff;
}
/*관심분야설정 차트*/
.content-chart {display: flex; width: 100%;justify-content: space-between;}
.content-chart .left_area{width: 52%;}
.content-chart .right_area{width: 44%;}

.chart-wrapper{min-width: 200px; min-height: 200px;}

.tf-bg tfoot th,
.tf-bg tfoot td{background: #f5fbff;font-weight: 600;color: #416ec3;}
.tf-bg tfoot th{/* background: #e8eef3; */color: #50514f;font-weight: 500;}

.select-box.xs .nice-select {min-width: 128px;height: 36px;line-height: 34px;border: 1px solid #dee2e6;border-radius: 4px;padding-left: 12px;max-width: 200px;}
.grp-wrap   {
    display:flex;
    gap: 20px;
    height:350px;
}
.grp-inbox  {
    width:100%;
    height:100%;
    background-color:#fafafa;
    padding:20px;
}
.grp-tit    {
    font-size: 18px;
    margin-bottom: 10px;
    color: #262675;
    font-weight: 500;
}
.btn.delete.outline {
    border-color: #ce1818;
    color: #ce1818;
    background-color: #ffffff;
}

.bar_chart {
    margin:40px 0;
}
.barWrap {
    display: flex;
    position: relative;
    margin: 0 0 24px;
    align-items: center;
    gap: 20px;
}
.bar {
    position: relative;
    width: 80%;
    height: 15px;
    background-color: #f7f7f7;
    border-radius: 25px;
    border-radius: 25px;
}
.bar > span     {
    display: block;
    width: 50%;
    position: absolute;
    top: 0;
    left: 0;
    height: 15px;
    background: #4CAF50;
    border-radius: 999px;
    font-size: 0;
}
.bar.blue-8 span {background-color: #1971c2;}
.barWrap span.tit {
    display: block;
    width: 5%;
    font-size:16px;
    font-weight:600;
}
.barWrap span.per {
    display: block;
    width: 15%;
    text-align: right;
    font-size: 16px;
    font-weight: 600
}
.barWrapSum {
    margin:30px 0;
    text-align:right;
    font-size:18px;
    font-weight:600;
    background:#f7f7f7;
    border-radius: 10px;
    padding:30px;
}
.barWrapSum b {
    font-size:24px;
}
.tb-top-date    {
    display: flex;
    align-items: center;
    gap:5px;
}
.btn.outline.green-8 {
    border-color:#2f9e44 !important
}
/*테스트발송*/
.messege-check-listWrap {
    width: 100%;
    height: 300px;
    overflow-y: auto;
    margin: 10px 0;
    background-color: #f7f7f7;
    border: 1px solid #dedede;
}
.messege-check-list {

}
.messege-check-list li {
    padding: 12px;
    border-bottom: 1px dashed #eee;
}
.messege-check-list li:hover {
    background-color: #fff;
}
/*탭*/
.tab_area {
    display: flex;
    border-bottom: 2px solid #ddd;
}

.tab_area a {
    font-size: 20px;
    padding: 10px 30px;
    display: block;
    color: #333;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: border-color 0.3s, color 0.3s;
    margin-bottom: -2px;
}

.tab_area a.active {
    font-weight: 600;
    color: #228be6;
    border-bottom: 2px solid #228be6;
}


.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}