@import "./template/reset.css";
@import "./template/font.css";
@import "./template/common.css";
@import "./template/navAndSideMenu.css";
@import "./npms/npms.css";


/* portal-dashboard.css */
.portal{padding:0; background-image: url("/img/dashboard-bg.svg"); height:100%; background-color: #f8fafd; background-size: 24%; min-width: auto;background-repeat: no-repeat;background-position: bottom right;}
.portal dashboard section {box-shadow:1px 1px 5px 0 #d9d9d9; padding: 1.5rem; background:white; border-radius:8px}
.portal dashboard section table {width: 100%; border-bottom: 1px solid #dee2e6}

.portal dashboard left {width:55%; min-width:600px}
.portal dashboard left .greeting {width:100%; display : flex; margin-bottom: 1.5rem; margin-right: .5rem; padding: 1rem; background-color: #5072e1; position: relative;}
.portal dashboard left .greeting h4 {margin-bottom:1rem; font-family: JalnanGothic; color:#fff}

.portal dashboard left .greeting info {width: 240px; margin:1rem 0;}
.portal dashboard left .greeting info .calendar {display:flex; width: 120px; padding-top: 2px; padding-bottom: 3px; text-align: center; background-color: #ffffff59; color: #fff; font-weight: 600; border-radius: 6px; margin-bottom: 16px;}
.portal dashboard left .greeting info .calendar img{margin:auto 0.5rem; width: 20px; height: 20px;}
.portal dashboard left .greeting info .calendar span{margin: auto; margin-left:0; padding-top:2px;}
.portal dashboard left .greeting info one-word {color: #fff; font-size: 24px; font-family: 'NanumNeuRisNeuRisCe'; line-height: 1;}

.portal dashboard left .greeting .menu {width:55%; margin: auto 0; padding: 0 1.5rem;}
.portal dashboard left .greeting .menu ul {display: flex}
.portal dashboard left .greeting .menu ul li{width: 50%}
.portal dashboard left .greeting .menu button{border-radius:6px; padding:4px; color:#fff; font-weight: 400}
.portal dashboard left .greeting .menu button:hover{background-color:#ffffff30}

.portal dashboard left .greeting counting {padding:0 4px; color:#fff; font-size: 10px; font-weight: bold; background-color: red; position: absolute; border-radius: 8px; top:-3px; left: -14px;}

.portal dashboard left .greeting .img-part {position: absolute; width: 24%; right: 0; bottom: -11%; z-index:1000}

.portal dashboard left .day-off .day-off-board{display:flex}

.portal dashboard left .day-off .day-off-current{width: 25%; border: 1px solid #ddd; padding: 1rem; margin:0 .5rem; border-radius:8px;}
.portal dashboard left .day-off .day-off-current:first-child{margin-left:0}
.portal dashboard left .day-off .day-off-current:last-child{margin-right:0}
.portal dashboard left .day-off .day-off-current h4{cursor: pointer; text-align:center; padding:8px 0;}
.portal dashboard left .day-off .day-off-current.grant {border-top: 6px solid #4264d0; position: relative;}
.portal dashboard left .day-off .day-off-current.grant button {position: absolute; top:10px; left:74px}
.portal dashboard left .day-off .day-off-current.grant :where(div, h4) {color:#4264d0}

.portal dashboard left .day-off .day-off-current.carried {border-top: 6px solid #ffb839;}
.portal dashboard left .day-off .day-off-current.carried :where(div, h4) {color:#ffb839;}

.portal dashboard left .day-off .day-off-current.using {border-top: 6px solid #ff7267;}
.portal dashboard left .day-off .day-off-current.using :where(div, h4) {color:#ff7267;}

.portal dashboard left .day-off .day-off-current.extra {border-top: 6px solid #00a902;}
.portal dashboard left .day-off .day-off-current.extra :where(div, h4, span) {color:#00a902;}

.portal dashboard left .board table th {padding: .5rem 0; text-align:center; border-top: 1px solid #dee2e6; border-bottom: 1px solid #dee2e6}
.portal dashboard left .board button{padding: .5rem 0}

.portal dashboard right {width:45%; min-width: 610px; padding:1.5rem; padding-top:0; padding-right:0}
.portal dashboard right > img{width:220px}

/*
.portal dashboard right .family-event table th {padding: .5rem 0; text-align:center; border-top: 1px solid #dee2e6; border-bottom: 1px solid #dee2e6}
.portal dashboard right .family-event button{padding: 1rem 0}
*/
.portal dashboard right .family-event li:not(:last-of-type) {margin-bottom: .5rem}
.portal dashboard right .family-event li img {margin-left:auto; width: 18px; height: 18px}
.portal dashboard right .family-event li p.category {margin-right:8px; padding:6px 0; width:70px; text-align: center;}
.portal dashboard right .family-event li button.title{margin-right:auto; color:#000; font-size: 16px; font-weight: 500; min-width: 120px;}
.portal dashboard right .family-event li p.date {width:180px; text-align: center; margin:auto 0; margin-right: 12px; border-left:1px solid #ddd; border-right:1px solid #ddd;}
.portal dashboard right .family-event li button.view{margin:auto 0; width:64px}

@media(max-width:1870px) {
    .portal dashboard left .greeting .menu ul {display: revert}
    .portal dashboard left .greeting .menu ul li{width: 100%}
}

@media(max-width:1540px) {
    .portal dashboard left .greeting {display : table;}
    .portal dashboard left .greeting info {width: 100%;}
    .portal dashboard left .greeting .menu {width:100%; margin-top: 16px; padding: 0;}
    .portal dashboard left .greeting .menu ul {display: flex}
    .portal dashboard left .greeting .menu ul li{width: 50%}
    
    .portal dashboard left .greeting .img-part{right: 25px; bottom: 14px; z-index:0}
    
    .portal dashboard right img{width:240px}
    .portal dashboard right .familyevent button{padding: .75rem 0}
}


.profile{background-color: #ededed; box-shadow: 0px 0px 1px 0 rgb(0 0 0); height: fit-content; text-align: center; padding:16px}
.profile label{margin-bottom: 15px; line-height: 1.6; }
.profile input{height: 72px;}
.profile input[type=file]::file-selector-button{ display: none;}
.profile input:focus{box-shadow: none;}



/* 파일첨부.css */
.file-box input[type=file]::file-selector-button{ display: none;}
.file-box input{background-color: white; width: 100%; margin:auto 0; border:1px solid #ddd; padding:8px 16px;}
.file-box label{cursor: pointer; border:1px solid #0d6efd; color:#0d6efd; width: 15%; padding: 8px 0; margin-left:10px; border-radius: 4px;}
.file-box label:hover{background-color: #0d6efd; color:white}



/* Lnj sso-login.css */
.clfix:after {content: "."; display: none; height:0px; clear: both; visibility: hidden;}
.clfix {display:inline-block;}
.clfix {display:block;}
* html .clfix {height:1%;} /* Hides from IE-mac */
.clfix {zoom:1;} /*for IE 5.5-7*/

.list {border-top:2px solid #1c1815; border-bottom:1px solid #1c1815;}

/* 페이지 버튼 */
.page-btn-group{text-align: right; margin-left:auto}
.page-btn-group button, .page-btn-group input{margin-left:4px;}
.page-btn-group .ba{display:none;}



/* login.css */
#intro_main_title{font-size: 50px; color:#415e9a; font-weight:bold; text-align:center; padding-top:90px; padding-bottom:90px;}
#intro_login{width:100%; background:#f6f6f6 url(../img/main/bg.jpg) top center no-repeat;}
.welcome_login{width:900px; height:320px; background:#ffffff url(../img/main/pc.jpg) 51px 144px no-repeat; border:1px solid #e6e6e6; margin:0 auto; position:relative; }
.welcome_login .txt_welcome{position:absolute; left:51px; top:46px; }
.in_loginForm{width:450px; position:absolute; top:48px; right:50px;}
.in_loginForm input.form_type1{width:450px; height:55px; border:1px solid #cccccc; margin-bottom:10px; padding:0 20px; color:#777777; font-size:17px;}
.in_loginForm input.form_type1::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color:#777777; font-size:17px; }
.in_loginForm input.form_type1:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color:#777777; font-size:17px; opacity:  1;}
.in_loginForm input.form_type1::-moz-placeholder { /* Mozilla Firefox 19+ */ color:#777777; font-size:17px; opacity:  1;}
.in_loginForm input.form_type1:-ms-input-placeholder { /* Internet Explorer 10-11 */ color:#777777; font-size:17px;}
.in_loginForm input.form_type1:placeholder-shown { /* Standard (https://drafts.csswg.org/selectors-4/#placeholder) */ color:#777777; font-size:17px;}
.in_loginForm input.btn_Login1{width:182px; height:48px; border:0 none; background:#124798; font-size:18px; color:#ffffff; font-weight:bold; vertical-align:middle; float:right; cursor:pointer; }
.in_loginForm button.btn_Login1{width:182px; height:48px; border:1px solid #124798; font-size:16px; color:#124798; font-weight:bold; vertical-align:middle; float:right; cursor:pointer; border-radius: 4px; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 24%); }
.in_loginForm button.btn_Login1:hover{border:1px solid #124798; color:#fff; background-color:#124798 ; }


.login{margin-top: 6px !important;}
#loginEmail{line-height: 25.6px;}
.login .dropdown-item{padding:4px 8px; font-size:14px}


/* note-editor.css */
.note-editor .dropdown-toggle::after {all: unset; }
.note-editor .note-dropdown-menu, .note-editor .note-modal-footer {box-sizing: content-box; }
.note-editor .note-editable{text-align: left }



/* lnj */
/* NAS tab css*/
.tab-nav{font-size:0; border:1px solid #ddd; margin-bottom: 0; padding:0}
.tab-nav li{display: inline-block;  height:46px; text-align:center; border-right:1px solid #ddd;}
.tab-nav li a:before{content:""; position:absolute; left:0; top:0px; width:100%; height:5px; }
.tab-nav li a.active:before{background:#005DDF;}
.tab-nav li a.active{border-bottom:1px solid #fff;}
.tab-nav li a{cursor: pointer; position:relative; display:block; background: #f8f8f8; color: #666; padding:0 30px; line-height:46px; text-decoration:none; font-size:16px;}
.tab-nav li a:hover, .tab-nav li a.active{background:#fff; color:#005DDF; }
.tab-content{border:1px solid #ddd; border-top:none;}
.tab-content .selectTab iframe{width:100%; min-height: 100%; box-shadow: 0 1px 4px 0 rgb(0 0 0 / 8%);}

/* 관리현황 */
.input-group {box-shadow: 0 1px 2px 0 rgb(0 0 0 / 8%); border-radius: 8px;}
.input-group-text {background-color: aliceblue; font-size: 14px; border: 1px solid #e2e8f0; color:#666; padding-top:.5rem; padding-bottom:.5rem;}
.form-select, .form-control {font-size: 13px; border: 1px solid #e2e8f0; color:#666; padding-top:.5rem; padding-bottom:.5rem;}

/* 인력현황 > 상세정보 */
.form-label{background-color: aliceblue; width: 100%; margin: 0; border-top:1px solid #e2e8f0; border-left: 1px solid #e2e8f0; border-right: 1px solid #e2e8f0; padding: 6px 8px;}
.form-control, .form-select, .input-group-text{border-radius: 0;}
.form-check{min-height: 0; margin-bottom: 0;}
.form-none{display:block; background-color : transparent; border:none; width: 100%; text-align: start;}

/* 게시판 */
.board .board-head{border: 1px solid #ddd}
.board .board-head .board-title{display:flex; padding: 16px; background-color: #ededed; border-bottom: 1px solid #ddd;}
.board .board-head .board-title h5{width: 50%; color:#333; font-weight: bold;}
.board .board-head .board-title span{margin-left:auto; margin-top:auto; font-weight: 10px; color:#999;}

.board .board-body .board-content{min-height: 20vh; padding:16px; font-size: 16px;}
.board .board-body .board-file{border: 1px solid #ddd; margin:16px; padding: 8px;}
.board .board-body .board-file div span{background-color: #c0e8ff; font-size: 13px; padding-right: 6px;}
.board .board-body .board-file a{font-size: 18px; margin-left:10px}
.board .board-body .board-file a:hover{color:#005DDF; }
.board .board-body .board-file a svg{fill: #808080;}
.board .board-body .board-file a:hover svg{fill: #005DDF;}

.board ul{padding:0;}
.board ul li{display: flex; border: 1px solid #ddd; border-top:none; padding: 8px 16px; background-color:#fff}
.board ul li .comment-user{font-weight: bold; font-size: 15px;}
.board ul li .comment-date{color:#999; margin-left:8px; font-size: 12px;}

.board-comment{border: 1px solid #ddd; padding:16px; padding-bottom: 20px;}
.board-comment .comment{margin-bottom: 8px;}
.board-comment .comment-head{display: flex; margin-bottom: 6px;}
.board-comment .comment-head label{margin:auto 0; font-weight: bold; font-size: 14px;}
.board-comment .comment-head .comment-password{border:1px solid #ddd; margin-left: 8px; padding:0 8px}
.board-comment .comment-head div{margin-left: auto;}
.board-comment .comment textarea{border:1px solid #ddd}

ul.comment{border:1px solid #ddd; margin: 6px; border-radius: 6px;}
ul.comment li.title {margin:0 .5rem; padding: .5rem .25rem;}
ul.comment li.title button{position: absolute; top: 6px; right: .5rem;}

/* board-trend */
.trend .table li:not(:last-of-type) {border:none}

.trend table.basicView > tbody > tr {border:none}
.trend table.basicView tr {height:fit-content}
.trend table.basicView td {padding:0}
.trend h6.site {padding-top: 16px}

.trend a{text-decoration : underline; color: #005288}

.trend h2:first-child{margin-top:0; line-height : initial;}
.trend h2:first-child a{text-decoration : underline; color: #005288}
.trend h2{margin-top:1em;}
.trend h3{margin-top:0.8em;}

.trend tbody p{margin:0.8em 0; font-size: 16px; line-height: 1.75}

.trend ul{margin:1em 0; margin-left:16px; line-height:1.5; padding-left: 3ch;}
.trend ul li{margin-bottom:10px; list-style: square !important; font-size: 16px}
.trend ul li::marker {color: #0078ae; font-size: 1.5em}

/* 조직도 */
.org_chart li {float: left; text-align: center; list-style-type: none; position: relative; padding: 20px 5px 0 5px; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; }
.org_chart li::before, .org_chart li::after{content: ''; position: absolute; top: 0; right: 50%; border-top: 1px solid #ccc; width: 50%; height: 20px; }
.org_chart li::after{right: auto; left: 50%; border-left: 1px solid #ccc;}
.org_chart li:only-child::after, .org_chart li:only-child::before {display: none;}
.org_chart li:only-child{ padding-top: 0; border:1px solid #ddd; padding:40px; margin:0px}
.org_chart li:first-child::before, .org_chart li:last-child::after{border: 0 none;}
.org_chart li:last-child::before{border-right: 1px solid #ccc; border-radius: 0 5px 0 0; -webkit-border-radius: 0 5px 0 0; -moz-border-radius: 0 5px 0 0; }
.org_chart li:first-child::after{border-radius: 5px 0 0 0; -webkit-border-radius: 5px 0 0 0; -moz-border-radius: 5px 0 0 0; }
.org_chart ul {padding-top: 20px; position: relative; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; }
.org_chart ul ul::before{content: ''; position: absolute; top: 0; left: 50%; border-left: 1px solid #ccc; width: 0; height: 20px; }
.org_chart button{margin:0}

.view{height: fit-content; overflow: visible; display: block;}

/* avas asset-vul-detail */
.result-detail span{overflow: hidden; display: -webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; white-space: pre-wrap; word-wrap: break-word;}
.result-detail .view{height: fit-content; overflow: visible; display: block;}

/* modal */
.note-frame{background-color: white;}

ul.member-add-form {border:1px solid #ddd; padding-right:0; background:#fff; position:relative}
ul.member-add-form > li {display:flex; padding-left:16px; margin-bottom: 20px;}
ul.member-add-form > li > ul {padding:12px 0;}
ul.member-add-form > li p {width:100%; padding-right:16px;}

div.modal-header {background: linear-gradient(240deg, #526591, #021d45);}
div.modal-header h5 {font-size: 16px; color: #fff;}
div.modal-header button.btn-close{margin: 0; z-index: 100; top: 135px;right: -15px;opacity: 1; border-radius: 20px; border: none; filter: invert(100%) sepia(0%) saturate(2%) hue-rotate(297deg) brightness(101%) contrast(101%);}

div.modal-body > ul {margin: 1rem}
div.modal-body > ul > li {margin-bottom: .5rem;}
div.modal-body > ul > li.open{border: 1px solid #ddd}
div.modal-body > ul > li > button {width: 100%; margin: 0}
div.modal-body > ul > li > dl, div.modal-body > ul > li > button > dl {display: flex; position: relative; background-color: #ededed; width: 100%; padding: 6px 16px}
div.modal-body > ul > li > dl > dt {margin-right: 24px;}
div.modal-body > ul > li > button > dl dd {margin-left: auto;}
div.modal-body > ul > li > button > dl dd:last-of-type {margin-left: 24px;}
div.modal-body > ul > li > button > dl dd.arrow::before {position: absolute; content: ''; width: 9px; height: 9px; border-top: 2px solid #121212; border-right: 2px solid #121212; display: inline-block; transform: rotate(135deg); top: 10px; right: 18px;}
div.modal-body > ul > li > button > dl dd.open::after {position: absolute; content: ''; width: 9px; height: 9px; border-top: 2px solid #121212; border-right: 2px solid #121212; display: inline-block; transform: rotate(315deg ); top: 15px; right: 18px;}

div.modal-body > ul > li > div.open-box {padding: 8px; }

div.alert-msg {background-color: #272b31eb; display: flex; position: absolute; padding: 6px 12px; top: 40px;}
div.alert-msg span {position: absolute; top:-8px; width: 0; height: 0; border-style: solid; border-width: 0 8px 8px 8px; border-color: transparent transparent #272b31eb transparent;}
div.alert-msg p {color:#eb2b2b; margin-left: 6px; }

div.modal-footer button.btn-edit {background-color: #002E6E; color: #fff; border-radius: 20px; padding: 4px 20px;}
div.modal-footer button.btn-edit:hover {background-color: #fff; color:#002E6E; outline: 1px solid #002E6E}
div.modal-footer button.btn-del {background-color: #eb2b2b; color: #fff; border-radius: 20px; padding: 4px 20px;}
div.modal-footer button.btn-del:hover {background-color: #fff; color:#eb2b2b; outline: 1px solid #eb2b2b}
div.modal-footer button.btn-back {background-color: transparent; outline:1px solid #ddd; color: #ddd; border-radius: 20px; padding: 4px 20px;}
div.modal-footer button.btn-back:hover {background-color: #ddd; outline:1px solid #ddd; color: #fff;}