@charset "utf-8";

body,div,ul,li,dl,dd,dt,ol,h1,h2,h3,h4,h5,h6,input,fieldset,
legend,p,select,table,th,td,tr,textarea,button,form,figure {margin: 0; padding: 0;}

/* 폰트 초기화 */
body, input, textarea, select, button {
    font-family: '맑은 고딕',MalgunGothic,NanumGothic,NanumMyeongjo,NotoSansKR,SandolGothic,GothicA1,CuteFont,HiMelody,SawarabiMincho,sans-serif,MPLUS1p,NotoSerifJP; 
    color: #222; font-size: 13px; line-height: 1.5;
    box-sizing: border-box;
}

html, legend {font-size: 13px !important;}

/* 블릿기호 초기화 */
dl,ul,li,ol,menu {list-style:none;}

/* a 링크 초기화 */
a {color: #222; text-decoration: none;}
a:hover {color: blue;}

/* 폰트 스타일 초기화 */
em, address {font-style: normal;}

/* 테두리 초기화 */
img {border:0;}
img, a {vertical-align: middle;}

label {cursor: pointer;}

.mt200 {margin-top: 200px !important;}

/* 가로사이즈 */
.wt60 {width: 60px !important;}
.wt80 {width: 80px !important;}
.wt90 {width: 90px !important;}
.wt100 {width: 100px !important;}
.wt120 {width: 120px !important;}
.wt150 {width: 150px !important;}
.wt170 {width: 170px !important;}
.wt200 {width: 200px !important;}
.wt230 {width: 230px !important;}
.wt250 {width: 250px !important;}
.wt300 {width: 300px !important;}
.wt330 {width: 330px !important;}
.wt500 {width: 500px !important;}
.wt600 {width: 600px !important;}

.ht30 {height: 30px !important;}
.ht40 {height: 40px !important;}
.ht100 {height: 100px !important;}
.ht280 {height: 280px !important;}
.ht305 {height: 305px !important;}

.cusor {cursor: pointer;}

/* 타이틀바 */
.title_bar1 {border-radius: 15px 15px 15px 0; border: 3px solid #003d75; padding: 0.5em 0.8em; color: #003d75; font-weight: bold; font-size: 1.1em;}
.title_bar2 {border-radius: 15px 15px 0 0; border-bottom: 2px solid #B2E0F7; padding: 0.5em 0.8em; background: #D8EFFB; font-weight: bold; font-size: 1.1em; color: #0a557d;}
.title_bar3 {background: #F9F7F6; border-left: 0.5em solid #688FF4; padding: 0.5em; font-weight: bold; font-size: 1.1em;}
.title_bar4 {border-left: 10px solid #688FF4; padding: 0.5em; border-bottom: 2px solid #688FF4; font-weight: bold; font-size: 1.1em;}
.title_bar5 {border-radius: 0 15px 15px 0; border-left: inset; padding: 0.6em; background: #EBEEF0; font-weight: bold;}

.ui-dialog {z-index: 10000 !important;}

.loader {width: 80px; height: 80px; background: url(../img/loading.png) no-repeat; animation: spin 2.0s linear infinite;}
@keyframes spin {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}
.load_wrap.on {display: block; z-index: 10000;}
.load_wrap {display: none; z-index: 9999; position: fixed; top: 0; bottom: 0;right: 0; left: 0;background-color: rgba(0, 0, 0, 0.7); color: #fff;}
.load_wrap > div {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; font-weight: bold; font-size: 20px; text-align: center;}
.load_wrap > div .loader {margin: 0 auto;}
.load_wrap > div strong {display: block; margin: 20px 0;}
.load_wrap > div strong + p {font-weight: normal; font-size: 16px;}

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;  /* 말줄임 적용 */
}

.vdp-datepicker input {width: 120px;}
/* Date Picker 色などの設定 */
.vdp-datepicker__calendar .cell.day-header {
    font-size: 15px;
    font-weight: bold !important;
}
.vdp-datepicker__calendar .cell.day-header:first-child {
    color: #f00 !important;
}
.vdp-datepicker__calendar .cell.day-header:nth-child(7) {
    color: #00f !important;
}
.vdp-datepicker__calendar .cell {
    background: white !important;
    height: 35px;
}
/* 土曜日の色設定 */
.vdp-datepicker__calendar .cell.day.highlighted.weekend.sat {
    color: #00f !important;
    /* 文字色：青 */
}
/* 日曜日の色設定 */
.vdp-datepicker__calendar .cell.day.highlighted.weekend.sun {
    color: #f00 !important;
    /* 文字色：赤 */
}
/* 今日の色設定 */
.vdp-datepicker__calendar .cell.day.selected.today {
    background: #fffa90 !important;
    color: #83822a !important;
    /* 文字色：黄 */
}
/* 選択の色設定 */
.vdp-datepicker__calendar .cell.day.selected {
    background: #1d7ffe !important;
    color: white !important;
}

.modal {z-index: 10000 !important;}

/*차트*/
.tick {font-size: 1.0rem}

.cursor {cursor: pointer}

.info_icon {
    background: #ff7840;
    color: #fff;
    border-radius: 10%;
    padding: 1px 4px;
    line-height: 10px;
    text-align: center; 
    font-weight: 500;
    font-family: 'Abel';
}

.grid {width: 100%; border-top: 1px solid #ccc; border-left: 1px solid #ccc; border-right: 1px solid #ccc;}
.grid .row {border-bottom: 1px solid #ccc;}
.grid .tit {background: #f4f0f0;}

[v-cloak] { display: none; }