/*
	main.css
	메인페이지(main_usr_index.jsp) CSS
*/
:root {
    --main-right-width: 320px;
    --main-left-width: calc(100% - var(--main-right-width));

    --main-color: #eff6ff;

    --stat-bg-color-1: #041d45;
    --stat-bg-color-2: #18396e;
    --stat-bg-color-3: #0E50C0;
    --stat-bg-color-4: #2772dd;
    
    --table-bg-color-1: #19D8B7;
    --table-bg-color-2: #ECC414;
    --table-bg-color-3: #446DE1;
    --table-bg-color-4: #6CC4F6;
}

#mainWrap {width: 100%; min-height: 100%;}
#main1 {width: 100%; display: flex;}
#main2 {width: 100%;}
/* #mainCenterDiv {width: var(--main-left-width); padding: 0 12px 0 24px;} */
#mainCenterDiv {width: var(--main-left-width); padding: 0 24px 0 12px;}
#mainRightDiv {width: var(--main-right-width); padding: 0 24px 0 12px;}


/* template_main.jsp > header 덮어씌우기 */
#mainContainer header {width: 100%; position: absolute; z-index: 0;}
#mainContainer header #mainTopImg {height: var(--top-img-height);}
/* #mainContainer header #loginInfoBtnDiv {margin-right: 320px;} */


/* #mainWrap > #mainCenterDiv > #topStatContentsDiv (상단 통계) */
#topStatContentsDiv {width: 100%; height: 136px; margin-bottom: 24px; display: flex; justify-content: center; align-items: center;}
#topStatContentsDiv * {color: white;}
#topStatContentsDiv .content {width: 280px; height: 100%;}
#topStatContentsDiv .content:not(:first-child) {margin-left: 10px;}
#topStatContentsDiv .content > div {width: 100%; height: 100%; padding: 20px; border-radius: 12px; box-shadow: 0 0 6px #555;}
#topStatContentsDiv .content:nth-child(1n) > div {background-color: var(--stat-bg-color-1);}
#topStatContentsDiv .content:nth-child(2n) > div {background-color: var(--stat-bg-color-2);}
#topStatContentsDiv .content:nth-child(3n) > div {background-color: var(--stat-bg-color-3);}
#topStatContentsDiv .content:nth-child(4n) > div {background-color: var(--stat-bg-color-4);}
#topStatContentsDiv .content .title {width: 100%; padding: 8px 0; border-bottom: 1px solid #999; font-size: 20px; font-weight: bold; background-size: 28px 28px; background-position: right; background-repeat: no-repeat;}
#topStatContentsDiv .content:nth-child(1n) .title {background-image: url(/air-bid/_images_new/main-header-icon-1.png);}
#topStatContentsDiv .content:nth-child(2n) .title {background-image: url(/air-bid/_images_new/main-header-icon-2.png);}
#topStatContentsDiv .content:nth-child(3n) .title {background-image: url(/air-bid/_images_new/main-header-icon-3.png);}
#topStatContentsDiv .content:nth-child(4n) .title {background-image: url(/air-bid/_images_new/main-header-icon-4.png);}
#topStatContentsDiv .content table {width: 100%; margin-top: 6px;}
#topStatContentsDiv .content table tr * {padding: 2px 0; font-size: 14px;}
#topStatContentsDiv .content table td {width: auto;}
#topStatContentsDiv .content table th {width: 28px; text-align: end;}
#topStatContentsDiv .content table .stat-detail-btn {display: inline-block; margin-left: 6px; padding: 0 4px 1px 16px; font-size: 8px; border: 1px solid #ddd; color: #ddd; border-radius: 11px; cursor: pointer;}
#topStatContentsDiv .content table .stat-detail-btn {background-image: url(/air-bid/_images_new/button/search-white.svg); background-position: 3px 2px; background-size: 16%; background-repeat: no-repeat;}
#topStatContentsDiv .content table .stat-detail-btn:hover {color: #99f; border: 1px solid #99f;}

/* #mainWrap > #mainCenterDiv > #noticeTableContentsDiv (중앙 공고테이블) */
#noticeTableContentsDiv {width: 100%;}
#noticeTableContentsDiv .content {width: 100%; height: 200px;}
#noticeTableContentsDiv .content > div {width: 100%; height: 100%; display: flex; background-color: white; border-radius: 12px; overflow: hidden;}
#noticeTableContentsDiv .content:not(:first-child) {margin-top: 24px;}
#noticeTableContentsDiv .content .content-title {width: 120px; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;}
#noticeTableContentsDiv .content .content-title p {color: black; font-size: 16px; font-weight: bold;}
#noticeTableContentsDiv .content .content-title a {margin-top: 12px; font-size: 12px; color: blue; text-decoration: none;}
#noticeTableContentsDiv .content .content-title a:hover {color: blue; text-decoration: underline;}
#noticeTableContentsDiv .content:nth-child(1n) .content-title {background-color: var(--table-bg-color-1);}
#noticeTableContentsDiv .content:nth-child(2n) .content-title {background-color: var(--table-bg-color-2);}
#noticeTableContentsDiv .content:nth-child(3n) .content-title {background-color: var(--table-bg-color-3);}
#noticeTableContentsDiv .content:nth-child(4n) .content-title {background-color: var(--table-bg-color-4);}

#noticeTableContentsDiv .content .table-div {width: 100%; padding: 8px 32px;}
#noticeTableContentsDiv .content table {width: 100%; background-color: white; border-collapse: collapse; border-spacing: 0;}
#noticeTableContentsDiv .content table thead > th {padding: 8px; border-bottom: 1px solid #ccc;}
#noticeTableContentsDiv .content table tr > * {padding: 8px 2px; font-size: 14px;}
#noticeTableContentsDiv .content table tbody tr td {text-align: center;}
#noticeTableContentsDiv .content table tbody tr td.title {color: black; text-align: start; word-wrap: normal; word-break: break-all; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
#noticeTableContentsDiv .content table tbody tr td.title a:hover {color: blue; font-weight: bold;}
#noticeTableContentsDiv .content table tbody tr td.title span.ing {padding: 0 4px; font-size: 8px; border: 1px solid red; color: red; border-radius: 11px;}

#noticeTableContentsDiv .detail-btn {padding: 0 4px 0 16px; font-size: 8px; border: 1px solid #999; color: #999; border-radius: 11px; cursor: pointer;}
#noticeTableContentsDiv .detail-btn {background-image: url(/air-bid/_images_new/button/search.svg); background-position: 3px 2px; background-size: 16%; background-repeat: no-repeat;}
#noticeTableContentsDiv .detail-btn:hover {color: blue; border: 1px solid blue;}
#noticeTableContentsDiv .detail-th {background-image: url(/air-bid/_images_new/button/search.svg); background-repeat: no-repeat; background-size: 10px; background-position: left center;}

/* 임의 설정 : height 하드코딩 - 이렇게밖에 안되나 인라인으로 넣는게 나을듯 */
#bidNoticeTableContent {height: 300px !important;}
#distributionNoticeTableContent {height: 265px !important;}


/* #mainWrap > #main1 > #mainRightDiv (우측 개인 일정, 바로가기) */
#mainRightDiv > div.white-div {width: 100%; padding: 24px; background-color: white; border-radius: 24px; overflow: hidden;}
#mainRightDiv > div.white-div > div:not(:first-child) {margin-top: 24px;}


/* #mainWrap > #main1 > #mainRightDiv > #calendar (vanillaCalendar.js - 달력) */
#mainRightDiv #calendar {width: 100%;}


/* #mainWrap > #main1 > #mainRightDiv > #mySchedule (일정 메모) */
#mainRightDiv #mySchedule {width: 100%;}
#mainRightDiv #mySchedule .title-div {display: flex; justify-content: space-between; align-items: baseline;}
#mainRightDiv #mySchedule .title-div .title {padding: 12px 0; font-size: 18px; font-weight: bold;}
#mainRightDiv #mySchedule #myScheduleDate {padding: 12px 0; color: #999; font-size: 14px}
#mainRightDiv #mySchedule ul {width: 100%; height: 90px; padding: 12px; border-radius: 8px; background-color: #eee; overflow: auto; overflow-x: hidden;}
#mainRightDiv #mySchedule .sch {width: 100%; padding: 8px 12px; border-radius: 12px; background-color: white;}
#mainRightDiv #mySchedule .sch:not(:first-child) {margin-top: 12px;}
#mainRightDiv #mySchedule .sch .sch-header {width: 100%; display: flex; justify-content: space-between; align-items: center;}
#mainRightDiv #mySchedule .sch .sch-time-div {width: 100%; display: flex; align-items: center;}
#mainRightDiv #mySchedule .sch .sch-time {margin-left: 4px; padding: 2px; color: #bbb; font-size: 12px;}
#mainRightDiv #mySchedule .sch .sch-circle {width: 8px; height: 8px; border-radius: 50%;}
#mainRightDiv #mySchedule .sch:nth-child(1n) .sch-circle {background-color: var(--table-bg-color-1);}
#mainRightDiv #mySchedule .sch:nth-child(2n) .sch-circle {background-color: var(--table-bg-color-2);}
#mainRightDiv #mySchedule .sch:nth-child(3n) .sch-circle {background-color: var(--table-bg-color-3);}
#mainRightDiv #mySchedule .sch:nth-child(4n) .sch-circle {background-color: var(--table-bg-color-4);}
#mainRightDiv #mySchedule .sch .sch-btn-div {display: flex; justify-content: center; white-space: nowrap;}
#mainRightDiv #mySchedule .sch .sch-btn-div .sch-modify-btn {padding: 4px 8px; color: #ff7f00; font-size: 12px;}
#mainRightDiv #mySchedule .sch .sch-btn-div .sch-modify-btn:hover {border-radius: 8px; background-color: #eee;}
#mainRightDiv #mySchedule .sch .sch-btn-div .sch-remove-btn {padding: 4px 8px; color: #db4455; font-size: 12px;}
#mainRightDiv #mySchedule .sch .sch-btn-div .sch-remove-btn:hover {border-radius: 8px; background-color: #eee;}
#mainRightDiv #mySchedule .sch .sch-content {padding: 4px 0; font-size: 14px;}

/* #mySchedule > #myScheduleForm (일정메모 입력폼) */
#mainRightDiv #mySchedule #myScheduleForm {margin-top: 8px; width: 100%; padding: 8px; border-radius: 8px; background-color: #eee;}
#mainRightDiv #mySchedule #myScheduleForm > div {display: flex; justify-content: space-between; align-items: center;}
#mainRightDiv #mySchedule #myScheduleForm input {all: unset; width: calc(50% - 4px); padding: 4px; font-size: 12px;}
#mainRightDiv #mySchedule #myScheduleForm input#myScheduleDateInput {width: calc(50% - 4px);}
#mainRightDiv #mySchedule #myScheduleForm input#myScheduleTimeInput {width: calc(50% - 4px);}
#mainRightDiv #mySchedule #myScheduleForm input#myScheduleContentInput {width: 100%;}
#mainRightDiv #mySchedule #myScheduleForm button {padding: 4px 8px; border: 1px solid #ccc; border-radius: 4px; background-color: var(--main-color); font-size: 12px; white-space: nowrap;}


/* #mainWrap > #main1 > #mainRightDiv > #noticeListDiv (공지사항) */
#mainRightDiv #noticeListDiv {width: 100%;}
#mainRightDiv #noticeListDiv .title {padding: 12px 0; font-size: 18px; font-weight: bold;}
#mainRightDiv #noticeListDiv ul {width: 100%;}
#mainRightDiv #noticeListDiv .noticeTitleDiv {display: flex;}
#mainRightDiv #noticeListDiv .noticeTitleDiv .noticeMore {padding: 12px; margin-left: 89px;}
#mainRightDiv #noticeListDiv .side-notice {width: 100%; padding: 6px; background-color: #b17dd9; border-radius: 8px;} /*색깔 변경*/
#mainRightDiv #noticeListDiv .side-notice:not(:first-child) {margin-top: 8px;}
#mainRightDiv #noticeListDiv .side-notice .notice-date {padding: 2px; color: #cbc7c7; font-size: 12px;}
#mainRightDiv #noticeListDiv .side-notice .notice-title {padding: 2px; color: #FFFFFF; font-size: 14px; font-weight: bold; cursor: pointer;}
#mainRightDiv #noticeListDiv .side-notice .notice-title:hover {color: blue;}
#mainRightDiv #noticeListDiv .side-notice .notice-title {
    text-overflow: ellipsis; overflow: hidden; word-break: break-word;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}


/* #mainWrap > #main1 > #mainRightDiv > #boardListDiv (자료실) */
#mainRightDiv #boardListDiv {width: 100%;}
#mainRightDiv #boardListDiv .title {padding: 12px 0; font-size: 18px; font-weight: bold;}
#mainRightDiv #boardListDiv ul {width: 100%;}
#mainRightDiv #boardListDiv .boardTitleDiv {display: flex;}
#mainRightDiv #boardListDiv .boardTitleDiv .boardMore {padding: 12px; margin-left: 104px;}
#mainRightDiv #boardListDiv .side-board {width: 100%; padding: 6px; background-color: #65bbd9; border-radius: 8px;} /*색깔 변경*/
#mainRightDiv #boardListDiv .side-board:not(:first-child) {margin-top: 8px;}
#mainRightDiv #boardListDiv .side-board .board-date {padding: 2px; color: #d1d0d0; font-size: 12px;}
#mainRightDiv #boardListDiv .side-board .board-title {padding: 1px; color: #FFFFFF; font-size: 14px; font-weight: bold; cursor: pointer;}
#mainRightDiv #boardListDiv .side-board .board-title:hover {color: blue;}
#mainRightDiv #boardListDiv .side-board .board-title {
    text-overflow: ellipsis; overflow: hidden; word-break: break-word;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}


/* #mainWrap > #main1 > #mainRightDiv > #manualDiv (매뉴얼) */
#mainRightDiv #manualDiv {width: 100%;}
#mainRightDiv #manualDiv .title {padding: 12px 0; font-size: 18px; font-weight: bold;}
#mainRightDiv #manualDiv .contents {width: 100%;}
#mainRightDiv #manualDiv .contents a {width: 100%; padding: 8px; display: block; border-radius: 12px; background-color: #52db91; color: #FFFFFF; font-size: 13px; font-weight: bold;} /*색깔 변경*/
#mainRightDiv #manualDiv .contents a:not(:first-child) {margin-top: 6px;}
#mainRightDiv #manualDiv .contents a:hover {color: #666;}


/* #mainWrap > #main1 > #shortCut (타사이트 바로가기) */
/* #main2 {width: 100%; padding: 24px;} */ /* ver.1 */
/* #main2 {width: calc(100% - 320px + 12px); padding: 24px;} ver.2 */
#shortCut {width: 100%; margin-top: 24px; display: flex; align-items: center; border-radius: 12px; background-color: white;}
#shortCut .title {padding: 0 12px 0 24px; font-size: 18px; font-weight: bold; word-break: keep-all;}
#shortCut ul {padding: 12px; display: flex; align-items: center; overflow: auto; overflow-y: hidden;}
#shortCut ul li {width: 160px; height: 44px;}
#shortCut ul li:not(:first-child) {margin-left: 28px;}
#shortCut ul li a {width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; border-radius: 8px; box-shadow: 0 0 4px #999;}
#shortCut ul li span {font-size: 14px; font-weight: bold;}