@charset "utf-8";

/* 로그인 */
.login_section {width: 100%; height: 100svh; padding: 0 30px; display: flex; flex-direction: column; justify-content: center; align-items: center; background: #fff;}
.login_logo {margin-bottom: 20px; font-size: 40px; font-weight: 600; color: var(--main);}
.login_box {width: calc(100% - 40px); max-width: 450px; min-width: 0px !important; height: 400px; margin: 0 auto; padding: 50px; position: relative;}
.login_btn {width: calc(100% - 100px); position: absolute; bottom: 50px; left: 50px;}

/* 메인 - 대쉬보드 */
.dashboard_content {margin-top: 10px; display: flex; flex-direction: column; gap: 10px;}
.dashboard_box {padding: 10px; border: 1px solid var(--neutral300); box-shadow: 0 0 2px 1px var(--neutral300); border-radius: 6px;}
.dashboard_box.null {height: 90px; display: flex; justify-content: center; align-items: center; border: 1px dashed var(--neutral300); box-shadow: none;}
.dashboard_box > div:first-child {margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--neutral100);}
.dashboard_box .card_main_status {width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px; border: none;}
.dashboard_box .card_main_status > div {width: 76%;}
.dashboard_box .card_main_status > ul {width: 20%; white-space: nowrap;}
.dashboard_box .card_main_status > ul > li {display: flex; align-items: center; gap: 4px; font-size: 12px;}
.dashboard_box .card_main_status > ul > li > p:last-child {font-size: 24px;}
.dashboard_box .card_main_status progress {width: 100%; height: 6px; appearance: none;}
.dashboard_box .card_main_status progress::-webkit-progress-bar {border-radius: 20px; background-color: var(--neutral200);}
.dashboard_box .card_main_status progress::-webkit-progress-value {border-radius: 20px; background-color: var(--main);}

/* 설정 */
.setting_tab_wrap {margin-bottom: 20px; display: flex; align-items: center; gap: 10px;}
.setting_tab {width: 140px; padding: 6px 10px; display: flex; justify-content: center; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--neutral200); border-radius: 6px; cursor: pointer;}
.setting_tab.active {border: 1px solid var(--blue);}
.setting_tab > p {font-size: 14px; font-weight: 400; color: #666666;}
.setting_tab.active > p, .setting_tab.active > span
 {color: var(--blue);}

/* 공지사항 테이블 custom */
.row-content {width: 100%; min-width: 100%; height: 100%; display: flex; align-items: center;}
.notice_chk_wrap {width: 4%;}
.notice_chk {margin: 3px 10px 0 0 !important;}
.row-data {width: 96%; display: flex; justify-content: space-between; align-items: center;}
.row-data > li {padding: 0 12px;}
.row-data > li:nth-child(1) {width: 5%; min-width: 50px;}
.row-data > li:nth-child(2) {width: 76%; min-width: 800px; text-align: left;}
.row-data > li:nth-child(3) {width: 10%; min-width: 100px;}
.row-data > li:nth-child(4) {width: 13%; min-width: 150px;}

/* 주간 업무 캘린더 */
.calendar_container {height: 300px; position: relative;}
.btn_calendar_nav_area {width: auto; height: 100%; padding-top: 20px; position: absolute; top: 0; z-index: 500; display: flex; justify-content: center; align-items: center;}
.btn_calendar_nav {padding: 10px; background-color: transparent; border: none; color: transparent; cursor: pointer; font-size: 14px;}
.btn_prev_area {left: 10px;}
.btn_next_area {right: 10px;}
.btn_calendar_nav_area:hover .btn_calendar_nav {background-color: var(--neutral100); color: black;}
.fullcalendar_main {height: 100%;}
.calendar_container .fc-scroller {overflow-y: hidden !important;}
.calendar_container .fc-daygrid-event {padding: 0 4px !important;}
.calendar_container .fc-event-title-container {padding: 4px 0; display: flex; justify-content: start; align-items: center; gap: 6px;}
.fc-day-sat, .fc-day-sun {background: var(--neutral50);}
.fc-day.active-day {background: #EBF8FB !important;}
.calendar_section_right .daily_works {margin-top: 20px;}
.calendar_section_right .daily_works:first-child {margin-top: 0;}
.calendar_section_right .card_works_time {padding: 4px; display: flex; align-items: center; gap: 6px; background: var(--neutral200); border-radius: 6px; font-size: 14px;}
.calendar_section_right .card_works_time > p {color: var(--neutral500);}
.calendar_section_right .card_works_time .card_works_time_icon {background: url(../img/svg/clock_ing.svg) no-repeat 50% 50%; width: 20px; height: 20px;}

.new_card_title_flex {display: flex; align-items: center; justify-content: space-between;}
.flex_col_new {display: flex; align-items: center; flex-direction: unset;}

.manager_box {display: grid; grid-template-columns:repeat(2,1fr); gap:20px; padding:20px;}
.manager_box li {display: flex;}
.manager_box li input {height:42px; padding: 10px 16px; font-size: 14px; font-weight: 400; background: var(--white); border: 1px solid var(--neutral200); border-radius: 6px;}
.manager_box li input::placeholder {font-size: 12px; font-weight: 400; color: var(--neutral200);}
.manager_box li p {height:42px ;display: flex; align-items: center;}
.new_label_flex label {display: flex; align-items: center; gap:4px;}
.new_label_flex span {color: var(--neutral500); cursor:pointer;}
.new_label_flex input {top:1px;}
.project_wbox {display: grid; grid-template-columns:repeat(2,1fr); gap:20px; padding:20px;}
.project_wbox li {display: flex; align-items: center;}
.estimate_wbox {display: flex; align-items: center; width:100%;}
.estimate {grid-column: span 2;}
.project_new_chk {display: flex; align-items: center; gap:20px;}
.project_new_wbox {display: flex; padding:20px; align-items: center;}
.server_hositing_wrap {display: grid; grid-template-columns:repeat(2,1fr); gap:20px;}
.server_hositing_wrap li {display: flex; align-items: center;}
.server_state  {display: grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:20px 0;}
.server_amount_flex {display: flex; align-items: center; width:100%;}
.server_amount_flex select {min-width:unset; width:100%;}
.create_server_hosting {display: flex; align-items: center; padding:0 20px 20px;}
input.upload_file_name.new_readonly_bg { background: var(--neutral200); border: 1px solid var(--neutral300);  cursor: inherit;}
input.upload_file_name.new_readonly_bg::placeholder { color:var(--white);}
.server_hositing_data_list {padding:20px;}
.after_server_hosting_view {display: flex; justify-content: space-between; align-items: center; padding:20px; gap:20px;}
.after_server_flex {display: flex; align-items: center;}
.after_server_hosting_view img {width:20px; height:20px; flex:none;}
.after_servicer_none {flex:none;}

.view_server_hositing_wrap {display: grid; grid-template-columns:repeat(2,1fr); gap:20px; padding:20px;}
.view_server_hositing_wrap li {display: flex; align-items: center;}
.view_project_title {width:100%; max-width:500px; word-break:break-all; }

.view_server_data, .view_maintenance_data {background: #D9D9D940; border-radius: 6px; padding:20px;}
.view_server_total_wrap, .view_maintenance_total_wrap { padding:0 20px 20px;}



.maintenance_wrap {display: grid; grid-template-columns:repeat(2,1fr); gap:20px;}
.view_server_hositing_wrap li {display: flex; align-items: center;}
.maintenance_amount_flex {display: flex; align-items: center; width:100%;}
.maintenance_amount_flex select {min-width:unset; width:100%;}
.maintenance_state  {display: grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:20px 0; }
.maintenance_data_list {padding:20px;}
.create_maintenance_wbox { display: flex; align-items: center; padding: 0 20px 20px;}
.maintenance_wrap li {display: flex; align-items: center;}
.maintenance_state_padding {padding:0 20px 20px; margin:0;}
.estimate_padding {padding:0 20px 20px;}

.after_maintenance_view {display: flex; justify-content: space-between; align-items: center; padding:20px; gap:20px;}
.after_server_flex {display: flex; align-items: center;}
.after_maintenance_view img {width:20px; height:20px; flex:none;}
.after_maintenance_none {flex:none;}
.create_maintenance {padding:20px;}
.flex_b {display: flex; align-items: center; gap:4px;}
input.input_datepicker.date_preview {cursor:inherit;}
.project_flex {position: relative; width:100%;}






@media all and (max-width:1050px){
  .login_logo_box {padding: 200px 80px 0;}
  .login_copyright {font-size: 13px;}
}

@media all and (max-width:900px){
  .login_logo_box {padding: 250px 50px 0;}
  .login_logo_img {width: 150px; margin: 0 auto;}
}

@media all and (max-width:760px){
  .login_bg > div {display: block;}
  .login_logo_box {width: 100%; height: auto; padding: 60px 0;}
  .login_logo_img {width: 150px; margin: 0 auto;}
  .login_copyright {display: none;}
  .login_section{width: 100%; height: auto; padding: 40px 30px 0; display: block;}
  .login_copyright2{width: 100%; display: block; font-size: 12px; text-align: center;}
}