@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

body{ 
    font-family: 'Pretendard-Regular';
    background-color: #FFFFFF; 
    font-size: 14px;
    min-width: 1818px;
    min-height: 800px;
    overflow: auto;
}
body::-webkit-scrollbar{ width: 6px; height: 6px; }
body::-webkit-scrollbar-thumb{ background: #d1d1d1; border-radius: 10px; }
body::-webkit-scrollbar-trak{ background: rgb(0 0 0 / 0%); }


/* page */
.page-wrapper .page-body-wrapper{ background-color: #FFFFFF; }


/* card */
.card{ border: none; }
.card .card-body{ border: 1px solid #e0e0e0; padding: 24px 16px; border-radius: 20px; }
.card-body.full-height{ height: calc(100vh - 116px); }
.max-full-content{ max-height: calc(100% - 134px); overflow: auto; }
.default-full-content{ height: calc(100% - 134px); overflow: auto;}
.none-button-full-content{ max-height: calc(100% - 40px); overflow: auto; }
.card-body.tab-full-height{ height: calc(100vh - 172px); }
.list-table-card-height{ max-height: calc(100vh - 708px); overflow: auto; }

.hidden-full-content{ height: calc(100vh - 48px); overflow: hidden;}
.hidden-full-content .content-box.full-content{ height: calc(100% - 46px); }

.map-full-content{ overflow: hidden;}
.map-full-content .content-box.full-content{ height: calc(100% - 46px); overflow: hidden; }
.map-container{ width: 100%; height: 100%; }
.map-container-popup{ 
    width: calc(100% - 64px); 
    height: calc(100% - 94px); 
    position: absolute; 
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    background: rgb(0, 0, 0, 0.3);
    border-radius: 20px;
}

.card-background{ background-color: #F8F8F8; }
.card-title{
    font-size: 20px;
    line-height: 30px;
    font-weight: 700;
    letter-spacing: -0.6px;
    margin-bottom: 16px;
    margin-left: 8px;
}
.card-title-button{ position: absolute; top: 19px; right: 48px; }
.card-title-button-sec{ position: absolute; top: 16px; right: 48px; display: flex; align-items: center; }
.table-download-button{ display: flex; align-items: center; float: right; margin: 16px; }
.left-card{ padding-left: 24px; padding-right: 8px; }
.right-card{ padding-right: 24px; padding-left: 8px; }
.search-card{ padding-left: 24px; padding-right: 24px;}

.card-height-auto{ flex: 0 0 auto;}

.card-body.tab-bottom-height{ height: calc(100vh - 228px); }
.card-body.tab-bottom-height .max-full-content{ max-height: calc(100% - 134px); overflow: auto;}

.card-body.top-search-height{ height: calc(100vh - 228px - 63px); }
.card-body.top-search-height .max-full-content{ max-height: calc(100% - 134px); overflow: auto;}

.board-table-card{ 
    min-width: 400px; 
    position: absolute; 
    box-shadow: 0 0 38px 0px rgba(0, 0, 0, 0.08);
    right: 40px;
    top: 60%;
}


/* header */
.main-header-style{ 
    font-size: 15px;
    background-color: #fff;
    width: 100%;
    position: relative;
    z-index: 9 !important;
    padding: 7.5px 0px;
    border-bottom: 1px solid #F0F0F0;
}
.header-grid-left .bi{ margin: 0px 4px; font-size: 13px; }

.header-grid{ grid-template-columns: 1.8fr 1fr; }
.header-grid-left{ text-align: left; }
.header-grid-left a{ margin-left: 20px; padding: 0; }
.header-grid-left a.top-menu{ 
    margin-left: 32px; 
    color: #D9D9D9;
    font-weight: 600;
    font-size: 18px;
    line-height: 20px;
    letter-spacing: -0.3px;
}

.header-grid-left a.top-menu.active, .header-grid-left a.top-menu.active:hover{ 
	color: #3F3CDE; 
	font-size: 24px; 
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); 
/*	animation: grow 1s forwards; */
	}
.header-grid-left a.top-menu:hover{ color: #a8a8a8; transition: all 0.3s; }
.header-grid-left a.top-menu:first-child{ margin-left: 0px; }

.header-grid-left div{ padding-left: 40px; }

.header-grid-right{ text-align: right; }

.header-list li{ list-style-type: none; float: left; padding: 12px; cursor: pointer; }
.header-list li.menu-user{ padding-right: 0px; }
.header-list li.menu-user a{ display: flex; align-items: center; }
.header-list .user-name{ font-size: 20px; line-height: 24px; font-weight: 700; letter-spacing: -0.3px; }
.header-list .sys-lang{ color: #3F3CDE; font-size: 20px; line-height: 24px; font-weight: 700; letter-spacing: -0.3px; }


/* hidden, show */
.hidden{ display: none; }
.show{ display: block; }


/* border */
.border-all-gray{ border: 1px solid #60676d; }
.border-all-light-gray{ border: 1px solid #a6b1ba; }
.border-radius-10px{ border-radius: 10px; }

.border-r{ border-right: 1px solid !important; }


/* font-color */
.a-color-black{ color: #212529; text-decoration: none; }
.a-color-black:hover{ color: #212529; }
.a-color-black:active{ color: #212529; }
.a-color-black:focus{ color: #212529; }
.font-danger{ color: #C43434; }
input::placeholder { color: #212529 !important; }


/* border-color */
.border-F0{ border-color: #F0F0F0 !important; }
.border-D9{ border-color: #D9D9D9 !important; }



/* background-color */
.white-bg{ background-color: #fff; }
.th-background{ background-color: #e7f1ff !important; }
table.td-disable tr td{ background-color: #E2E7EE; }
tr.td-disable td{ background-color: #E2E7EE; }

.insert-table-tr{ background-color: #d6dfe8 !important; }


/* background-color */
table.dataTable tbody tr.insert-tr{ background-color: #ffffff; }


/* width */
.w-15 { width: 15% !important; }
.w-20 { width: 20% !important; }
.w-45 { width: 45% !important; }
.w-50 { width: 50% !important; }
.w-65 { width: 65% !important; }
.w-75 { width: 75% !important; }
.w-80 { width: 80% !important; }
.w-85 { width: 85% !important; }
.w-88 { width: 88% !important; }
.w-91 { width: 91% !important; }
.w-92 { width: 92% !important; }
.w-95 { width: 95% !important; }
.w-105{ width: 105% !important; }
.w-300 { width: 300px !important; }
.w-410 { width: 410px !important; }
.w-900 { width: 900px !important; }

.width-select-button{ width: calc(100% - 80px); }
.width-label-ex{ width: calc(100% - 50px); }
.min-width-50{ min-width: 50%; }

.width-auto{ width: auto !important; }


/* height */
.h-60{ height: 60%; }
.h-40{ height: 40%; }
.h-150{ height: 150px; }
.h-35vh{ height: 35vh; }
.chart-height-100{ height: 100%; }
.chart-height-132{ height: 132px; }
.chart-height-150{ height: 150px; }
.chart-height-180{ height: 180px; }
.chart-height-200{ height: 200px; }
.chart-height-285{ height: 285px; }
.chart-height-300{ height: 300px; }
.chart-mheight-300{ max-height: 300px; }
.chart-height-404{ max-height: 404px; }

.board-height{ height: calc(100% - 230px); position: relative; min-height: 510px; }
.card-content-height{ height: calc(100% - 46px);}
.card-content-height2{ height: calc(100vh - 585px);}
.card-content-height3{ height: calc(100vh - 697px);}

.min-height-200{ min-height: 200px; }
.min-height-563{ min-height: 563px; }
.min-height-770{ min-height: 770px; }
.min-height-43rem{ min-height: 43rem; }
.full-card-body{ min-height: calc(100vh - 122px); }

.max-height-150{ max-height: 150px; }
.max-height-200{ max-height: 200px; }

.modal-info-height{ max-height: 420px; }


/* margin */
.margin-top-none{ margin-top: 0 !important; }

.mt-4rem{ margin-top: 4rem; }
.mt--4vh{ margin-top: -4vh; }
.mt--6vh{ margin-top: -6vh; }
.mt-5{ margin-top: 5px; }
.mt-7{ margin-top: 7px; }
.mt-10{ margin-top: 10px; }
.mt-15{ margin-top: 15px; }
.mt-16{ margin-top: 16px; }
.mt-20{ margin-top: 20px; }
.mt-30{ margin-top: 30px; }
.mt-56{ margin-top: 56px; }

.mb-5px{ margin-bottom: 5px; }
.mb-5{ margin-bottom: 5px; }
.mb-6{ margin-bottom: 6px; }
.mb-8{ margin-bottom: 8px; }
.mb-10{ margin-bottom: 10px; }
.mb-12{ margin-bottom: 12px; }
.mb-14{ margin-bottom: 14px; }
.mb-15{ margin-bottom: 15px; }
.mb-16{ margin-bottom: 16px; }
.mb-20{ margin-bottom: 20px; }
.mb-24{ margin-bottom: 24px; }
.mb-30{ margin-bottom: 30px; }
.mb-32{ margin-bottom: 32px; }
.mb-34{ margin-bottom: 34px; }
.mb-40{ margin-bottom: 40px; }
.mb-48{ margin-bottom: 48px; }
.mb-56{ margin-bottom: 56px; }

.ml--8{ margin-left: -8px; }
.ml-4{ margin-left: 4px; }
.ml-5{ margin-left: 5px; }
.ml-8{ margin-left: 8px; }
.ml-10{ margin-left: 10px; }
.ml-15{ margin-left: 15px; }
.ml-16{ margin-left: 16px; }
.ml-20{ margin-left: 20px; }
.ml-30{ margin-left: 30px; }
.ml-40{ margin-left: 40px; }
.ml-280{ margin-left: 280px;}

.mlr-0{ margin-right: 0; margin-left: 0; }
.mlr-3{ margin-left: 3px; margin-right: 3px; }
.mlr-5{ margin-left: 5px; margin-right: 5px; }
.mlr-10{ margin-right: 10px; margin-left: 10px; }
.mlr-97{ margin-left: 97px; margin-right: 97px; }

.mlr-10-strong{ margin-right: 10px !important; margin-left: 10px !important; }

.mr--8{ margin-right: -8px; }
.mr--60{ margin-right: -60px; }
.mr-3{ margin-right: 3px; }
.mr-4{ margin-right: 4px; }
.mr-5{ margin-right: 5px; }
.mr-8{ margin-right: 8px; }
.mr-10{ margin-right: 10px; }
.mr-12{ margin-right: 12px; }
.mr-15{ margin-right: 15px; }
.mr-16{ margin-right: 16px; }
.mr-20{ margin-right: 20px; }
.mr-30{ margin-right: 30px; }
.mr-100{ margin-right: 100px; }

.custom-scrollbar .mb-8:last-child{ margin-bottom: 0px; }


/* padding */
.padding-left-none{ padding-left: 0px; }
.padding-right-none{ padding-right: 0px; }
.padding-top-none{ padding-top: 0px !important; }
.padding-bottom-none{ padding-bottom: 0px !important; }
.padding-none{ padding: 0 !important; }

.pl-5{ padding-left: 5px; }
.pl-8{ padding-left: 8px; }
.pl-20{ padding-left: 20px; }
.pl-24{ padding-left: 24px; }
.pl-25{ padding-left: 25px; }
.pl-30{ padding-left: 30px !important; }
.pl-35{ padding-left: 35px !important; }

.plr-0{ padding-left: 0px; padding-right: 0px; }
.plr-8{ padding-left: 8px; padding-right: 8px; }
.plr-5{ padding-left: 5px; padding-right: 5px; }
.plr-18{ padding-left: 18px; padding-right: 18px; }
.plr-20{ padding-left: 20px; padding-right: 20px; }
.plr-32{ padding-left: 32px; padding-right: 32px; }
.plr-70{ padding-left: 70px; padding-right: 70px; }
.plr-97{ padding-left: 97px; padding-right: 97px; }

.ptb-3{ padding-top: 3px; padding-bottom: 3px; }
.ptb-8{ padding-top: 8px; padding-bottom: 8px; }
.ptb-10{ padding-top: 10px; padding-bottom: 10px; }
.ptb-12{ padding-top: 12px; padding-bottom: 12px; }
.ptb-20{ padding-top: 20px; padding-bottom: 20px; }
.ptb-24{ padding-top: 24px; padding-bottom: 24px; }

.pr-0{ padding-right: 0px; }
.pr-2{ padding-right: 2px; }
.pr-5{ padding-right: 5px; }
.pr-8{ padding-right: 8px; }
.pr-10{ padding-right: 10px; }
.pr-24{ padding-right: 24px; }
.pr-25{ padding-right: 25px; }

.pt-3px{ padding-top: 3px; }
.pt-5{ padding-top: 5px; }
.pt-7{ padding-top: 7px; }
.pt-10{ padding-top: 10px; }
.pt-24{ padding-top: 24px;}
.pt-30{ padding-top: 30px; }
.pt-32{ padding-top: 32px; }
.pt-40{ padding-top: 40px; }

.pb-5px{ padding-bottom: 5px; }
.pb-8{ padding-bottom: 8px; }
.pb-10{ padding-bottom: 10px; }
.pb-12{ padding-bottom: 12px; }
.pb-16{ padding-bottom: 16px !important; }
.pb-32{ padding-bottom: 32px; }

.padding-all-12px{ padding: 12px !important; }
.padding-all-15px{ padding: 15px; }
.padding-all-24px{ padding: 24px; }
.padding-all-30px{ padding: 30px; }

.text-area-padding{ padding: .375rem .75rem; border-radius: 10px; }


/* text-style */
.font-14{ font-size: 14px; }
.blue-table tbody tr td{ color: #0F54F2; }
.label-title{ font-size: 14px; line-height: 21px; font-weight: 600; letter-spacing: -0.3px; width: 100%;  }
.content-title{ font-size: 18px; line-height: 27px; font-weight: 700; letter-spacing: -0.3px; }
.sub-text{ font-size: 14px; line-height: 21px; font-weight: 600; letter-spacing: -0.3px; color: #f20f0f;}
.sub-text-gray{ font-size: 14px; line-height: 21px; font-weight: 600; letter-spacing: -0.3px; color: #8F8F8F;}
.check-title{ font-size: 14px; line-height: 21px; font-weight: 600; letter-spacing: -0.3px; width: 100%; }
.check-sub{ font-size: 14px; line-height: 21px; font-weight: 400; letter-spacing: -0.3px; width: 100%; }

.modal-title{ font-size: 24px; line-height: 40px; font-weight: 700; letter-spacing: -0.6px; }
.modal-sub-text{ font-size: 14px; line-height: 21px; font-weight: 400; letter-spacing: -0.3px; }
.content-box-title{ font-size: 18px; line-height: 27px; font-weight: 700; letter-spacing: -0.3px; }
.input-label{ font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: -0.3px; color: #8F8F8F; }

.dashboard-text{ font-size: 56px; line-height: 67.21px; font-weight: 700; letter-spacing: -0.6px; }
.dashboard-sub-text{ font-size: 16px; line-height: 20px; font-weight: 400; letter-spacing: -0.6px; color: #8F8F8F; }

.board-title{ font-size: 12px; line-height: 24px; font-weight: 600; letter-spacing: -0.6px; }
.board-card-list{ display: flex; align-items: center; }
.board-card-list h4{ font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: -0.6px; margin-bottom: 0px; margin-right: 5px; color: #0F54F2; }
.board-info div span:first-child{ font-size: 12px; line-height: 21px; font-weight: 400; letter-spacing: -0.3px; color: #8F8F8F; }
.board-info div span:last-child{ font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: -0.6px; }

.board-info-sub div span{ font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: -0.6px; }

.chart-info div span:first-child{ font-size: 14px; line-height: 21px; font-weight: 400; letter-spacing: -0.3px; }
.chart-info div span:last-child{ font-size: 22px; line-height: 34px; font-weight: 600; letter-spacing: -0.6px; }
.half-circle-chart{ font-size: 14px; line-height: 21px; font-weight: 400; letter-spacing: -0.3px; }
.progress-num-z span{ font-size: 24px; line-height: 30px;font-weight: 600; letter-spacing: -2px; }
.progress-num-z .progress-num{ font-size: 48px; line-height: 58px; font-weight: 600; letter-spacing: -2px; }

.modal-info-label{ font-size: 14px; line-height: 21px; font-weight: 600; letter-spacing: -0.3px; }
.modal-info-text{ font-size: 14px; line-height: 21px; font-weight: 400; letter-spacing: -0.3px; }

.board-label{ font-size: 14px !important; color: #000000 !important; font-weight: 600 !important; }


/* top, left, right */
.top-none{ top: 0px !important; }
.top-7rem{ top: 7rem; }
.top-4-half-rem{ top: 4.5rem; }
.top-18rem{ top: 18rem; }
.top-20rem{ top: 20rem; }
.top-22rem{ top: 22rem; }
.top-28rem{ top: 28rem; }
.top-29rem{ top: 29rem; }

.left--1rem{ left: -1rem; }
.left-seven-rem{ left: 0.7rem; }
.left-10rem{ left: 10rem; }
.left-26-half-rem{ left: 26.5rem; }
.left-27rem{ left: 27rem; }
.left-24rem{ left: 24rem; }
.left-54-half-rem{ left: 54.5rem; }

.right-0{ right: 0; }

.position-relative{ position: relative !important; }


/* image size */
.main-logo{ height: 52px; padding-left: 5px; }
.plant-image{ 
    width: 100%; 
    height: 488px; 
    border-radius: 20px; 
    overflow: hidden; 
    display: flex; 
    align-items: center;
}
.plant-image img{ width: 100%; }

.PLT-image{ 
    width: 100%; 
    height: 320px; 
    border-radius: 20px; 
    overflow: hidden; 
    display: flex; 
    align-items: center;
}
.PLT-image img{ width: 100%; }


/* redial-social-widget */
.redial-social-widget {
    border-radius: 100%;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    margin: 0 auto;
    background-image: linear-gradient(90deg, #f4f4f4 50%, transparent 50%, transparent), 
        linear-gradient(90deg, #e6edef 50%, #f4f4f4 50%, #f4f4f4); 
}

.redial-social-widget .widget-text {
    background-color: #fff;
    height: 120px;
    width: 120px;
    border-radius: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center; 
    color: #6077ff;
    font-size: 1.5rem;
}

.redial-social-widget.radial-bar-70 {
    background-image: linear-gradient(342deg, #6077ff 50%, transparent 50%, transparent), 
        linear-gradient(270deg, #6077ff 50%, rgba(36, 105, 92, 0.1) 50%, rgba(36, 105, 92, 0.1)); 
}


/* progress-bar */
.progress-section{ display: flex; align-items: center; margin-bottom: 7px; }
.content-box .progress-section:last-child{ margin-bottom: 0px; }
.progress-label{ font-size: 14px; font-weight: 400; line-height: 21px; letter-spacing: -0.3px; margin-right: 16px; min-width: 80px; text-align: right; }
.progress-bar-custom{ appearance: none; width: calc(100% - 110px); height: 12px; }
.progress-bar-custom::-webkit-progress-bar { background:#F1F3F7; border-radius: 44px; }
.progress-bar-custom::-webkit-progress-value {
    border-radius: 10px;
    background: #1D976C;
    background: -webkit-linear-gradient(to right, #C1DBFB, #0F54F2);
    background: linear-gradient(to right, #C1DBFB, #0F54F2);
}


/* button */
.btn{ font-size: 14px; line-height: 20px; letter-spacing: -0.3px; font-weight: 600; }
.btn-sec{ font-size: 14px; line-height: 23px; letter-spacing: -0.3px; font-weight: 600; }
.btn-default{ background-color: #000000;border: 1px solid #000000; border-radius: 100px; color: #FFFFFF; }
.btn-gray{ background-color: #EEEEEE; border: 1px solid #EEEEEE; border-radius: 100px; color: #000000; }
.btn-line{ background-color: rgba(0, 0, 0, 0); border: 1px solid #000000; border-radius: 100px; color: #000000; }
.btn-table{
    background-color: #F0F0F0;
    border: 1px solid #F0F0F0;
    border-radius: 8px;
    color: #000000;
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.1px;
}
.btn-more{ width: 100%; background-color: #F8F8F8;  border: 1px solid #e0e0e0; border-radius: 100px; color: #000000; }
.filter-button{ padding: 8.5px 24px; background-color: #FFFFFF; border-radius: 100px; }
.filter-button.active{ background-color: #000000; color: #FFFFFF; }

.btn-default:hover{ background-color: #000000 !important; border-color: #000000 !important; color: #FFFFFF !important;}
.btn-gray:hover{ background-color: #EEEEEE !important; border: 1px solid #EEEEEE !important; color: #000000 !important; }
.btn-line:hover{ border-color: #000000 !important; color: #000000 !important; }
.btn-table:hover{ background-color: #F0F0F0 !important; border-color: #F0F0F0 !important; color: #000000 !important; }
.btn-more:hover{ background-color: #000000 !important; border-color: #000000 !important; color: #FFFFFF !important; transition: all 0.5s;}

.btn-small{ padding: 6px 16px; min-width: 64px; }
.btn-medium{ padding: 10px 24px; }
.btn-2-large{ padding: 13px 16px; min-width: 259px; }
.btn-large{ padding: 13px 16px; min-width: 318px; }
.btn-in-form{ padding: 13px 16px; min-width: 120px; }
.btn-modal{ padding: 13px 16px; min-width: 200px; }


.bottom-button-area{ padding: 32px 24px; position: absolute; bottom: 0; width: calc(100% - 60px); }
.auto-button-area{ padding: 32px 24px; width: 100%; }
.page-button-area{ padding: 24px 24px 8px 24px; width: 100%; }
.page-button-area{ padding: 24px 24px 8px 24px; width: 100%; }

.modal-button-area{  padding: 32px 0px; }
.filter-list.disable li{ cursor: default; }
.filter-list.disable li.active{  background-color: #bdbdbd; cursor: default; }
.filter-list.disable button{ background-color: #bdbdbd; border-color: #bdbdbd; cursor: default; }
.filter-list.disable button:hover{ background-color: #bdbdbd !important; border-color: #bdbdbd !important; cursor: default; }

/* form */
.f-input{ padding: .375rem .75rem; border-radius: .375rem; }

.form-login{
    max-width: 580px;
    padding: 60px 40px;
    text-align: center;
    background-color: #ffffff;
    border-radius: 20px;
    border: 1px solid #F0F0F0;
    float: right;
}

.login-bg-img{
    position: absolute;
    z-index: -1;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.login-bg-img-div{
	background: url(/assets/img_ex/example-background3.jpg);
	background-size: cover;	
}

.top-calendar{ 
    display: flex;
    align-items: center;
    padding: 13px 24px;
    border: 1px solid #F0F0F0;
    border-radius: 100px;
    margin-left: 5px;
}
.top-calendar .between-calendar{ 
    font-size: 14px; 
    font-weight: 600; 
    line-height: 23px; 
    letter-spacing: -0.3px; 
    margin-left: 5px;
    margin-right: 5px;
}
.top-calendar input{
    font-size: 14px; 
    font-weight: 600; 
    line-height: 23px; 
    letter-spacing: -0.3px; 
    width: 80px; 
    border: none;
    padding: 0;
    text-align: center;
}

.form-control:disabled{ background-color: #ffffff; opacity: 1; }
.form-select:disabled{ background-color: #f7f7f7; opacity: 1; }
.form-label-display{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;    
    align-items: center;
}
.form-label-display button{ position: absolute; }


/* sec-menu */
.bottom-menu{ 
    position: relative;
    z-index: 8;
    width: 100%;
    float: left;
    background-color: #F8F8F8;
    margin-bottom: 24px;
}

.bottom-menu .menu-li a{
    padding: 16px 24px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    letter-spacing: -0.6px;
    color: #8F8F8F;
}
.bottom-menu .menu-li a.active{ background-color: #FFFFFF; color: #3F3CDE; font-size: 20px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); }


/* filter select, text input */
select option[value="default"][disabled]{ display: none; }
.select-background{ 
    background-color: #FFFFFF; 
    border-color: #F8F8F8; 
    box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.06);
    padding: 12px 12px 12px 16px;
    font-size: 14px;
}
.input-background{ 
    background-color: #F8F8F8 !important; 
    border: 1px solid #F8F8F8 !important; 
    padding: 12px 12px 12px 16px;
    font-size: 14px;
}
.input-background::placeholder{ color: #8F8F8F !important; }
.usr-input{ 
    padding: 13px 16px;
    background-color: #FFFFFF;
    border: 1px solid #EEEEEE;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.3px;
}
.usr-input::placeholder{ color: #8F8F8F !important; }
.input-area-grid{ display: grid; grid-template-columns: 1fr 4fr; align-items: center; }
.input-area-grid:last-child{ margin-bottom: 0px !important; }

.table-input-text{ 
    padding: 13px 16px;
    background-color: #FFFFFF;
    border: none;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.3px;
    width: 100%;
}
.table-input-text::placeholder{ color: #8F8F8F !important; }

.modal-input{ 
    padding: 13px 16px;
    background-color: #FFFFFF;
    border: 1px solid #EEEEEE;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.3px;
}
.modal-input::placeholder{ color: #8F8F8F !important; }

.filter-list{ 
    display: flex; 
    align-items: center; 
    justify-content: flex-end; 
    margin-bottom: 23px;
    padding-right: 20px
}
.filter-list ul{ 
    padding: 4px; 
    border: 1px solid #F0F0F0;
    border-radius: 100px;
}

.filter-list li{ 
    cursor: pointer; 
    padding: 8.5px 24px;
    font-size: 14px;
    line-height: 23px;
    letter-spacing: -0.3px;
    font-weight: 600;
    color: #8F8F8F;
}
.form-control:focus{ border-color: rgb(205 205 205) !important; box-shadow: 0 0 0 0.25rem rgba(205, 205, 205,.25) !important; }
.form-select:focus{ border-color: rgb(205 205 205) !important; box-shadow: 0 0 0 0.25rem rgba(205, 205, 205,.25) !important; }

.shadow-input{
    padding: 13px 16px;
    background-color: #FFFFFF;
    border: 1px solid #F8F8F8;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.3px;
    box-shadow: 1px 3px 8px 0px #0000000F;
}
.shadow-input::placeholder{ color: #8F8F8F !important; }


/* half-circle-chart-style */
.chart-half-circle{
    position: relative;
    margin: 4px;
    float:left;
    text-align: center;
}
.half-circle-overflow{
    position: relative;
    overflow: hidden;
    width: 280px; height: 140px;
    margin-bottom: -14px;
}
.half-circle-bar{
    transform: rotate(45deg);
    position: absolute;
    top: 0; left: 0;
    width: 280px; height: 280px;
    border-radius: 50%;
    border: 20px solid transparent;
    border-top-color:  #F0F0F0;
    border-left-color:  #F0F0F0; 
    background-image: linear-gradient(#FFFFFF, #FFFFFF), linear-gradient(to right, #0F54F2, #5CC2F4, #C1DBFB);
    background-origin: border-box;
    background-clip: content-box, border-box;
}
.progress-num-z{ position: absolute; z-index: 99; margin-bottom: -15px; }


/* box-style */
.height-auto-box{ height: auto !important; }
.right-fit-box{ height: calc(100vh - 626px); overflow: auto; }
.state-board-animation{ height: calc(100% - 46px); overflow: auto; overflow-x: hidden; position: relative; }
.all-border-radius table{ border-radius: 20px !important; }
.content-box{ background-color: #FFFFFF; border-radius: 20px; }
.table-content-box{ border-radius: 20px; }
.board-info{ 
    top: 65px;
    background-color: #FFFFFF; 
    border-radius: 20px; 
    position: absolute; 
    z-index: 999;
    width: 250px; 
    box-shadow: 0 0 38px 0px rgba(0, 0, 0, 0.08);
}
.board-info div{ display: flex; align-items: center; justify-content: space-between; }
.board-info-right{ right: 291px; }
.board-info-right2{ right: 25px; }

.board-info-sub{ 
    background-color: #FFFFFF; 
    border-radius: 12px; 
    position: absolute; 
    padding: 4px 10px;
    width: 110px; 
    box-shadow: 0 0 38px 0px rgba(0, 0, 0, 0.08);
    text-align: right;
    border: 1px solid #f5f5f5;
}
.board-info-sub div span:last-child{ margin-right: 7px; }
.chart-info{ width: 160px; margin-left: 42px; }
.chart-info div{ display: flex; align-items: center; justify-content: space-between; }

.right-2-box{ height: calc((100vh - 278px)/2 - 114px); overflow: auto; }
.content-right-fix, .content-right-fix table{ height: calc((100vh - 278px)/2 - 114px); }

.input-textarea{ width: 100%; height: 100%; resize: none; outline: none; }

.role-title-input{ border: 1px solid #a6b1ba; border-radius: 5px; padding: 5px 15px; }

.icon-searchbox{ display: flex; align-items: center; justify-content: flex-end; }
.icon-searchbox i.bi-search{ position: absolute; font-size: 20px; padding-right: 20px; }
.icon-searchbox input[type="text"]{ padding-right: 35px; }

.modal-table-width { width: 876px; margin-left: -24px; }
.modal-table-width2 { width: 700px; }
.modal-table-width .basic-table{ border-radius: 0px; }

.overlay-logout{ 
    background-color: #FFFFFF; 
    box-shadow: 1px 3px 8px 0px #0000000F;
    padding: 14px 20px;
    margin-left: -20px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 12px;
    border: 1px solid #e6e6e6;
    margin-top: 10px;
}

/* custom-scrollbar */
.x-overflow-hidden{ overflow-x: hidden !important; }
.y-overflow-auto{ overflow-y: auto !important; }
.over-auto{ overflow: auto !important; }
.hidden-scrollbar::-webkit-scrollbar{ display: none; }
.custom-scrollbar::-webkit-scrollbar{ width: 6px; height: 6px; }
.custom-scrollbar::-webkit-scrollbar-thumb{ background: #d1d1d1; border-radius: 100px; }
.custom-scrollbar::-webkit-scrollbar-track{ background: #F8F8F8; }


/* radio-button */
label.table-radio-icon{ padding: 5px 0px !important; }

label.radio-icon{ padding: 12px 20px; font-size: 24px; line-height: 24px; }
label.radio-icon::before{ content: '\F584'; font-family: bootstrap-icons; display: block; color: #D9D9D9; }
input[type="radio"]:checked + label.radio-icon::before{ content: '\F26C'; color: #000000; }
.radio-button{ display: none; }
.table-radio{ line-height: 40px !important; padding: 0px !important; }


/* check-box */
label.checkbox-icon{ padding: 12px 20px; font-size: 24px; line-height: 24px;  }
label.checkbox-icon::before{ content: '\F584'; font-family: bootstrap-icons; display: block; color: #D9D9D9; }
input[type="checkbox"]:checked + label.checkbox-icon::before{ content: '\F26C'; color: #000000; }
.check-box{ display: none; }


/* modal */
body.c-modal{ overflow: hidden; }
.custom-modal{ 
    margin-left: 0px;
    position: fixed; 
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    top: 0;
    background: rgb(0, 0, 0, 0.3);
}
.custom-modal .modal-content{ background-color: #fff; padding: 0 24px; min-width: 456px; border-radius: 20px; }
.modal-header{ padding: 8px 0px; margin-top: 20px; margin-bottom: 32px; }
.modal-body .modal-info-row:last-child{ border-color: #FFFFFF !important; }
.modal-info-row{ display: grid; grid-template-columns: 1fr 1fr; }

.custom-popup{ 
    margin-left: 0px;
    top: 0;
}
.custom-popup .popup-content{ 
    background-color: #fff; 
    padding: 0 24px; 
    min-width: 456px; 
    border-radius: 20px; 
}
.popup-header{ padding: 8px 0px; margin-top: 20px; margin-bottom: 32px; }
.popup-body .popup-info-row:last-child{ border-color: #FFFFFF !important; }
.popup-info-row{ display: grid; grid-template-columns: 1fr 1fr; }


/* footer */
.footer-custom{ position: absolute; width: 100%; }


/* file-upload-box */
.table-button-custom{ 
    padding: 6px 16px; 
    font-size: 13px; 
    letter-spacing: -0.1px; 
    line-height: 20px; 
    border: 1px solid #EEEEEE;
    border-radius: 8px;
    cursor: pointer;
    position: absolute;
    margin-right: 24px;
    background-color: #EEEEEE;
}


/* loading */
#div_ajax_load_image {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(255, 255, 255, 0.8);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}
  
#div_ajax_load_image img {
    width: 100px;
    height: 100px;
    animation: spin 1s linear infinite;
}


/* list-style */
.list-style-none{ list-style: none; }
.list-style-lrmg{ list-style: none; margin-left: 100px; margin-right:100px; }

.table-in-list-left{
    margin-top: -5px;
    margin-left: 30px;
   }
.list-style-none .pb-8:last-child{ padding-bottom: 20px; }
.check-list{
    margin-left: 8px;
    margin-right: 24px;
    overflow: hidden;
    border-radius: 16px;
    background-color: #F8F8F8;
    width: 100%;
}
.check-list li{ border-bottom: 1px solid #D9D9D9; margin-right: 30px; }
.check-list li:last-child{ border-bottom: none; }
.label-list{ 
    width: calc(100% - 52px); 
    display: grid;
    grid-template-columns: 1fr 0.1fr 1fr 0.1fr 1fr;
    font-size: 14px;
    letter-spacing: -0.3px;
    
}
.check-list .label-list div{ line-height: 21px; font-weight: 400; }
.label-list.explain-box{ padding: 17.5px 24px; }

.ul-list-title{ padding: 12px 20px; }

.list-depth{ cursor: pointer; }

.role-list{
    margin-left: 8px;
    margin-right: 24px;
    overflow: hidden;
    border-radius: 16px;
    background-color: #F8F8F8;
    width: 100%;
}
.role-list li{ border-bottom: 1px solid #D9D9D9; margin-right: 30px; }


/* table */
.table-th-left-padding table tr th{ text-align: left; padding-left: 24px; }
.table-custom-border tbody tr:nth-child(1) th:first-child,
.table-custom-border tbody tr:nth-child(2) th:first-child,
.table-custom-center tbody tr:nth-child(4) th:first-child{ 
    padding-left: 24px;
    text-align: left !important;
}
.table-custom-center tbody tr:nth-child(2) th,
.table-custom-center tbody tr:nth-child(3) th,
.table-custom-center tbody tr:nth-child(4) th,
.table-custom-center tbody tr:nth-child(5) th{ text-align: center; }

table.list-table tr{ 
    display: grid; 
    grid-template-columns: 1.5fr 4.1fr; 
    align-items: center; 
    border-bottom: 1px solid #EEEEEE;
}
table.list-table tr:last-child{ border-bottom: none; }
table.list-table tr th:first-child{ 
    padding: 13.5px 24px; 
    font-size: 14px;
    line-height: 21px;
    font-weight: 600;
    letter-spacing: -0.3px;
}

.table-padding-small thead tr th{ padding: 8px 10px !important; }


/* datatable custom */
.table-in-list{ 
    margin-left: 8px; 
    margin-right: 24px; 
    border: none; 
    border-radius: 16px;
    overflow: hidden;
    background-color: #F8F8F8;
    width: 100%;
}

.table-in-list .dataTable.row-border tbody th, .table-in-list .dataTable.row-border tbody td, 
.table-in-list .dataTable.display tbody th, .table-in-list .dataTable.display tbody td{
    border-top: none;
}
.table-in-list table.dataTable.display>tbody>tr>*{ box-shadow: none; }
.table-in-list table.dataTable.display>tbody>tr:hover>*{ box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.035); }
.table-in-list .dataTable.no-footer{ border-bottom: none; }
.table-in-list thead tr{ height: 48px; }
.table-in-list tbody tr{ height: 54px; }
.table-in-list thead tr th{ 
    text-align: center; 
    font-size: 14px;
    line-height: 21px;
    letter-spacing: -0.3px;
    font-weight: 600;
    border-bottom: none;
}
.table-in-list tbody tr td{ 
    text-align: center; 
    font-size: 14px;
    line-height: 21px;
    letter-spacing: -0.3px;
    font-weight: 400;
    min-height: 56px;
}

.tbody-bottom-border tbody tr td{ border-bottom: 1px solid #F0F0F0; }
.tbody-bottom-border tbody tr:last-child td{ border-bottom: none; }


.basic-table-auto thead tr{ height: auto !important; }
.basic-table-auto tbody tr{ height: auto !important; }
.basic-table-auto thead td{ height: auto !important; }
.basic-table-auto tbody td{ height: auto !important; }
.basic-table-sm thead tr{ height: 42px !important; }
.basic-table-sm tbody tr{ height: 42px !important; }

.basic-table{
    background-color: #FFFFFF;
    border-radius: 20px;
    border: none; 
    overflow: hidden;
}
.basic-table .dataTable.row-border tbody th, .basic-table .dataTable.row-border tbody td, 
.basic-table .dataTable.display tbody th, .basic-table .dataTable.display tbody td{
    border-top: none;
}
.basic-table table.dataTable.display>tbody>tr>*{ box-shadow: none; }
.basic-table table.dataTable.display>tbody>tr:hover>*{ box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.035); }
.basic-table thead tr{ height: 48px; }
.basic-table tbody tr{ height: 54px; }
.basic-table thead tr th{ 
    text-align: center; 
    border-bottom: none;
    padding: 8px 24px; 
    font-size: 14px;
    line-height: 21px;
    letter-spacing: -0.3px;
    font-weight: 600;
    border-bottom: 1px solid #F0F0F0 ;
}
.basic-table tbody tr td{ 
    text-align: center; 
    font-size: 14px;
    line-height: 21px;
    letter-spacing: -0.3px;
    font-weight: 400;
}
.basic-table .dataTable.no-footer{ border-bottom: none; }
.basic-table-height{ max-height: 280px; overflow: auto; }
.basic-table.tr-small thead tr{ height: 38px; }

.basic-table.tr-small-2 thead tr{ height: 38px; }
.basic-table.tr-small-2 tbody tr{ height: 45px; }

.basic-table.small-fix thead tr{ border-bottom: 1px solid #F0F0F0; }
.basic-table.small-fix tbody tr{ border-bottom: 1px solid #F0F0F0; }
.basic-table.small-fix tbody tr:last-child{ border-bottom: none; }
.basic-table.small-fix thead tr, .basic-table.small-fix tbody tr{ height: auto !important;}

.basic-table.small-fix2 tbody tr{ border-bottom: 1px solid #F0F0F0; }
.basic-table.small-fix2 tbody tr:last-child{ border-bottom: none; }
.basic-table.small-fix2 tbody th, .basic-table.small-fix2 tbody tr{ text-align: center; width: calc(100% / 3);}
.basic-table.small-fix2 tbody tr{ height: 28px !important;}

.basic-table.small-fix3 tbody tr{ border-bottom: 1px solid  #D9D9D9; }
.basic-table.small-fix3 tbody tr:last-child{ border-bottom: none; }
.basic-table.small-fix3 tbody th, .basic-table.small-fix3 tbody tr{ text-align: center; width: calc(100% / 3);}
.basic-table.small-fix3 tbody tr{ height: 28px !important;}

.basic-table.small-table tbody tr{ height: 29px !important;}
.basic-table.small-table tbody tr td{ padding-top: 4px !important; padding-bottom: 4px !important; border-bottom: 1px solid #F0F0F0; }
.basic-table.small-table tbody tr:last-child td{ border-bottom: none; }

.basic-table.fix-table tbody tr{ height: 52px !important;}
.basic-table.fix-table tbody tr td{ padding-top: 16px !important; padding-bottom: 16px !important; border-bottom: 1px solid #F0F0F0; }
.basic-table.fix-table tbody tr:last-child td{ border-bottom: none; }
 
.paging-table table{ 
    background-color: #FFFFFF; 
    border-radius: 20px 20px 0px 0px; 
    overflow: hidden; 
    border: none; 
    margin-bottom: 16px;
}
.paging-table.table-top-border>div{ border-top: 1px solid #F0F0F0; }
.paging-table .dataTable.row-border tbody th, .paging-table .dataTable.row-border tbody td, 
.paging-table .dataTable.display tbody th, .paging-table .dataTable.display tbody td{
    border-top: none;
}
.paging-table table.dataTable.display>tbody>tr>*{ box-shadow: none; }
.paging-table table.dataTable.display>tbody>tr:hover>*{ box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.035); }

.paging-table thead tr{ height: auto; }
.paging-table-48 thead tr{ height: 48px; }
.paging-table-48 tbody tr{ height: 54px; }
.paging-table tbody tr{ height: auto; }
.paging-table thead tr th{ 
    text-align: center; 
    border-bottom: none;
    padding: 8px 24px; 
    font-size: 14px;
    line-height: 21px;
    letter-spacing: -0.3px;
    font-weight: 600;
    border-bottom: 1px solid #F0F0F0 ;
}
.paging-table tbody tr td{ 
    text-align: center; 
    font-size: 14px;
    line-height: 21px;
    letter-spacing: -0.3px;
    font-weight: 400;
}
.paging-table .dataTable.no-footer{ border-bottom: none; }


/* table-border */
.only-col-border tbody tr td, .only-col-border tbody tr th{ border-bottom: 1px solid #F0F0F0; }
.only-col-border tbody tr:last-child td, .only-col-border tbody tr:last-child th{ border-bottom: none; }

.only-row-border tbody tr td, .only-row-border tbody tr th{ border-right: 1px solid #F0F0F0; }
.only-row-border tbody tr th:last-child, .only-row-border tbody tr td:last-child{ border-right: none; }


.all-border thead tr th, 
.all-border tbody tr td, 
.all-border tbody tr th{ border-right: 1px solid #F0F0F0; }
.all-border thead tr th:last-child,
.all-border tbody tr td:last-child, 
.all-border tbody tr th:last-child{ border-right: none; }
.all-border tbody tr td, 
.all-border tbody tr th{ border-bottom: 1px solid #F0F0F0; }
.all-border tbody tr:last-child td, 
.all-border tbody tr:last-child th{ border-bottom: none; }

.last-child-border tbody tr:last-child td{ border-bottom: 1px solid #F0F0F0 ; }


/* datatables width */
table.dataTable tbody td{ padding: 7.5px 10px;  }
.table-width-plt table thead tr th{ width:  18% !important; }
.table-width-plt table thead tr th:last-child{ width: 28% !important; }

.table-width-3 table thead tr th{ width: calc(100% / 3) !important; }
.table-width-4 table thead tr th{ width: calc(100% / 4) !important; }
.table-width-5 table thead tr th{ width: calc(100% / 5) !important; }
.table-width-6 table thead tr th{ width: calc(100% / 6) !important; }
.table-width-8 table thead tr th{ width: calc(100% / 8) !important; }
.table-width-9 table thead tr th{ width: calc(100% / 9) !important; }
.table-width-10 table thead tr th{ width: calc(100% / 10) !important; }
.table-width-11 table thead tr th{ width: calc(100% / 11) !important; }
.table-width-12 table thead tr th{ width: calc(100% / 12) !important; }
.table-width-13 table thead tr th{ width: calc(100% / 13) !important; }


/* datatables paging button */
.dataTables_paginate{ padding-right: 15px; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current, 
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
    background-color: #000000;
    color: #FFFFFF !important;
    border: 1px solid #000000;
    border-radius: 5px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{
    color: #000000 !important;
    border: 1px solid #dddddd;
    border-radius: 5px;
    background: linear-gradient(to bottom, #dddddd 100%, #dddddd 100%);
}


/* map */
.gmnoprint .gm-style-mtc button, .gmnoprint .gm-style-mtc ul li label{ font-family: 'Pretendard-Regular' !important; }


/* media */
@media (min-height: 1050px) {
    .h-35vh{ height: 28vh !important; }
    .h-22vh{ height: 22vh !important; }
    .h-11vh{ height: 11vh !important;}

    .board-table-card{ top: 49%; right: 43px; width: 470px; }
    .basic-table.small-fix2 tbody tr{ height: 35px !important;}
    .form-login{ margin-right: 6rem; }
}

@media (min-height: 1185px) {
    .plant-image{ height: 600px !important; }
    .PLT-image{ height: 460px !important; }
}


/* video-wall */
.font-22px{ font-size: 22px !important; line-height: 26px !important; }
.font-25px{ font-size: 25px !important; line-height: 30px !important; }

body.video-wall-body{ min-width: 5760px; min-height: 2140px; }
.card-padding-20px{ padding: 20px; }
.video-card-title{ font-size: 36px; font-weight: 600; margin-bottom: 20px; line-height: 61px; }
.video-card-pr-12px{ padding-right: 12px; }
.video-card-pl-12px{ padding-left: 12px; }
.video-card-pt-12px{ padding-top: 12px; }
.video-card-pb-12px{ padding-bottom: 12px; }
.v-wall-full-height{ min-height: 900px; max-height: 900px; } 
.wall-card-body{ border-radius: 32px !important; padding: 30px !important; }

.wall-board-info{ 
    top: 30px;
    background-color: #FFFFFF; 
    border-radius: 32px; 
    position: absolute; 
    z-index: 999;
    width: 350px; 
    box-shadow: 0 0 38px 0px rgba(0, 0, 0, 0.08);
}
.wall-board-info div{ display: flex; align-items: center; justify-content: space-between; }
.wall-board-info div span:first-child{ margin-left:5px; font-size: 20px; line-height: 26px; font-weight: 400; letter-spacing: -0.3px; color: #8F8F8F; }
.wall-board-info div span:last-child{ margin-right: 5px; font-size: 22px; line-height: 26px; font-weight: 600; letter-spacing: -0.6px; }
.wall-board-info-right{ right: 380px; }
.wall-board-info-right2{ right: 0px; }
.wall-board-label{ font-size: 22px !important; line-height: 26px; color: #000000 !important; font-weight: 600 !important; }

.wall-board-table-card{ 
    border-radius: 32px !important;
    top: auto !important; 
    right: 30px !important; 
    bottom: 30px !important; 
    min-width: 650px !important;
}
.wall-board-table-card table tr th, .wall-board-table-card table tr td{ 
    font-size: 22px !important; 
    line-height: 26px;
    padding: 12px 0px;
}

.wall-content-box{ border-radius: 32px !important; overflow: hidden; }
.wall-table-text table tr th, .wall-table-text table tr td{ 
    font-size: 22px !important; 
    line-height: 26px;
    padding: 12px 0px;
}
.wall-plt-info{
    bottom: 30px;
    position: absolute;
    width: calc(100% - 60px);
}
.wall-plt-info table tbody tr th:first-child{ padding-left: 35px; }
.wall-plt-info table .table-input-text{ 
    padding: 0px !important; 
    font-size: 22px !important;
    line-height: 26px !important;
}
.wall-plt-info table .table-input-text:focus { 
    outline:none !important; 
    border: none !important;
    box-shadow: none !important;
}
.wall-PLT-image{ height: 480px !important; }
.wall-list-board{ padding: 42px 60px; }
.wall-list-board div{ 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
}
.wall-list-board div span:first-child{ font-size: 24px; line-height: 29px; font-weight: 600; padding-left: 5px; }
.wall-list-board div span:last-child{ font-size: 27px; line-height: 32px; font-weight: 400; padding-right: 5px; }



.wall-progress-box{ min-height: 305px; display: flex; flex-direction: column; justify-content: center; }
.wall-progress-section{ display: flex; align-items: center; margin-bottom: 40px; }
.wall-progress-section:last-child{ margin-bottom: 0px; }
.wall-progress-label{ 
    font-size: 23px; 
    font-weight: 500; 
    line-height: 32px; 
    letter-spacing: -0.3px; 
    margin-right: 16px; 
    min-width: 120px; 
    text-align: right; 
}
.wall-progress-bar-custom{ appearance: none; width: calc(100% - 110px); height: 30px; }
.wall-progress-bar-custom::-webkit-progress-bar { background:#F1F3F7; border-radius: 100px; }
.wall-progress-bar-custom::-webkit-progress-value {
    border-radius: 100px;
    background: #1D976C;
    background: -webkit-linear-gradient(to right, #C1DBFB, #0F54F2);
    background: linear-gradient(to right, #C1DBFB, #0F54F2);
}

.wall-chart-half-circle{
    position: relative;
    margin: 4px;
    float:left;
    text-align: center;
}
.wall-half-circle-overflow{
    position: relative;
    overflow: hidden;
    width: 280px; height: 140px;
    margin-bottom: -14px;
}
.wall-half-circle-bar{
    transform: rotate(45deg);
    position: absolute;
    top: 0; left: 0;
    width: 280px; height: 280px;
    border-radius: 50%;
    border: 20px solid transparent;
    border-top-color:  #F0F0F0;
    border-left-color:  #F0F0F0; 
    background-image: linear-gradient(#FFFFFF, #FFFFFF), linear-gradient(to right, #0F54F2, #5CC2F4, #C1DBFB);
    background-origin: border-box;
    background-clip: content-box, border-box;
}
.wall-progress-num-z{ position: absolute; z-index: 99; margin-bottom: -15px; }

.wall-half-circle-chart{ font-size: 20px; line-height: 21px; font-weight: 400; letter-spacing: -0.3px; }
.wall-progress-num-z span{ font-size: 24px; line-height: 30px;font-weight: 600; letter-spacing: -2px; }
.wall-progress-num-z .wall-progress-num{ font-size: 48px; line-height: 58px; font-weight: 600; letter-spacing: -2px; }
.wall-scroll-table{ max-height: 300px; overflow: auto; }


.wall-chart-info{ width: 200px; margin-left: 42px; }
.wall-chart-info div{ display: flex; align-items: center; justify-content: space-between; }
.wall-chart-info div span:first-child{ font-size: 20px; line-height: 21px; font-weight: 400; letter-spacing: -0.3px; }
.wall-chart-info div span:last-child{ font-size: 27px; line-height: 34px; font-weight: 600; letter-spacing: -0.6px; }


.wall-bottom-content-height1{ height: 511px; overflow: hidden; }
.wall-bottom-content-height1>div{ height: 90%; width: 103%; }

.wall-chart-height1{ height: 596px !important; }
.wall-chart-height1>div{ height: 95%; }
.wall-chart-height2{ height: 575px !important; }
.wall-chart-height2>div{ height: 97%; width: 106%; }

.codeMstDataTable-first-column {
        width: 20px !important;
  }
.codeMstDataTable-fourth-column {
        width: 20px !important;
}

/*코드마스터 결과 내 조회 처리를 위한 조회 내역 입력 및 조회 버튼 처리*/
.search-bar {
    display: flex;
    align-items: center;
    margin-top: 20px;
}

.search-bar .form-control {
    width: calc(100%-100px); /* 원하는 너비로 조정 */
    margin-right: 20px; /* 버튼과 입력 필드 사이의 간격 */
}

.spacer {
    height: 20px; /* 원하는 높이로 조정 */
}

.btn-search{
    background-color: #F0F0F0;
    border: 1px solid #dddddd;
    border-radius: 8px;
    color: #000000;
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.1px;
    width:150px;
}


.btn-upload {
    background-color: #adb5bd; /* 버튼 배경색 (밝은 회색) */
    color: #fff; /* 텍스트 색상 */
    padding: 10px 24px; /* 안쪽 여백 */
    font-size: 16px; /* 폰트 크기 */
    border: none; /* 테두리 제거 */
    border-radius: 4px; /* 테두리 둥글게 */
    cursor: pointer; /* 커서 모양 변경 */
    text-align: center; /* 텍스트 중앙 정렬 */
    display: inline-block; /* 인라인 블록 요소로 설정 */
    margin: 5px; /* 바깥 여백 */
    transition: background-color 0.3s ease; /* 배경색 전환 효과 */
    width: calc(70%); /* 가로 사이즈를 1.2배로 설정 */
}

.btn-upload:hover {
    background-color: #a1a8b0; /* 마우스 오버 시 배경색 */
}

.btn-upload:active {
    background-color: #8e959d; /* 클릭 시 배경색 */
    box-shadow: 0 5px #666; /* 클릭 시 그림자 효과 */
    transform: translateY(4px); /* 클릭 시 위치 이동 */
}

.btn-upload-slect {
    background-color: #adb5bd; /* 버튼 배경색 (밝은 회색) */
    color: #fff; /* 텍스트 색상 */
    padding: 10px 24px; /* 안쪽 여백 */
    font-size: 16px; /* 폰트 크기 */
    border: none; /* 테두리 제거 */
    border-radius: 4px; /* 테두리 둥글게 */
    cursor: pointer; /* 커서 모양 변경 */
    text-align: center; /* 텍스트 중앙 정렬 */
    display: inline-block; /* 인라인 블록 요소로 설정 */
    margin: 5px; /* 바깥 여백 */
    transition: background-color 0.3s ease; /* 배경색 전환 효과 */
    width: calc(70%); /* 가로 사이즈를 1.2배로 설정 */
}

.btn-upload-slect:hover {
    background-color: #a1a8b0; /* 마우스 오버 시 배경색 */
}

.btn-upload-slect:active {
    background-color: #8e959d; /* 클릭 시 배경색 */
    box-shadow: 0 5px #666; /* 클릭 시 그림자 효과 */
    transform: translateY(4px); /* 클릭 시 위치 이동 */
}

.btn-upfile-slect {
    background-color: #fff; /* 배경색을 흰색으로 설정 */
    color: #000; /* 텍스트 색상을 검정으로 설정 */
    padding: 10px 24px;
    font-size: 14px;
    border:2px solid;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    display: inline-block;
    margin: 5px;
    transition: background-color 0.3s ease;
    width: calc(70%);
}

.input-upresult {
    background-color: #fff; /* 배경색을 흰색으로 설정 */
    color: #000; /* 텍스트 색상을 검정으로 설정 */
    padding: 10px 24px;
    font-size: 16px;
    border:0px solid;
    border-radius: 4px;
    cursor: pointer;
    text-align: left;
    display: inline-block;
    margin: 5px;
    transition: background-color 0.3s ease;
    width: calc(110%);
}

.input-upresult-error {
    background-color: #fff; /* 배경색을 흰색으로 설정 */
    color: #ff0000; /* 텍스트 색상을 빨강색으로 설정 */
    padding: 10px 24px;
    font-size: 16px;
    border:0px solid;
    border-radius: 4px;
    cursor: pointer;
    text-align: left;
    display: inline-block;
    margin: 5px;
    transition: background-color 0.3s ease;
    width: calc(110%);
}