@charset "utf-8";

@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);

*, html {font-family: 'Noto Sans KR', sans-serif;}
/* reset */
*{padding: 0; margin: 0; box-sizing: border-box;}
ol,ul,li{list-style: none;}
a{text-decoration: none; color: #333; display: inline-block;}

/* 모바일에서 클릭시 생기는 아웃라인 제거 */
input:focus, select:focus, button:focus, a:focus, a, textarea:focus {outline:none;-webkit-tap-highlight-color: transparent;}

/* 메인 페이지 */
#main {width: 100%; height: 100vh; background-color: #f4f2f2;}
.main-wrap { height: 100vh; max-height: calc(100vh - 60px);}
.main-content {height: 100%; margin: 0 auto; display: flex; justify-content: center; align-items: center;}
.main-content .menu {width: 300px; height: 350px; background-color: #fff; border: 2px solid #c4c4c4; border-radius: 20px; margin-right: 10px;  display: flex; flex-direction: column; justify-content: center; align-items: center;}
.main-content .menu:last-child {margin-right: 0;}
.main-content .menu .menu-icon {width: 100px; height: 100px; background-repeat: no-repeat; background-size: cover;}
.main-content .menu .menu-icon.menu-1 {background-image: url(../images/menu_icon01.png);}

/* 공통 */
#wrap {width: 100%; height: 100vh; overflow-y: scroll; overflow-x: hidden;}

/* 헤더 */
.header-wrap {position: fixed; top: 0; height: 60px; width: 100%;}
.header-wrap .top-menu-bar {width: 100%; height: 60px;}
.header-wrap .top-menu-bar .top-menu-bar-wrap {position: fixed; top: 0; width: 100%; line-height: 40px; background-color: #ee4034; padding: 10px 15px; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; z-index: 1;}

/* 출퇴근 버튼 */
.N_box{position: absolute; right: 132px;}
.N_box .Ntoggle-button{border: none; border-radius: 22px; width: 125px; height: 36px; line-height: 36px; background: white; color: #ee4034; font-weight: bold; font-size: 14px; cursor: pointer; position: relative; bottom: 2px; right: 48px;}  
.N_box .Ntoggle-button::after{content: ""; background: url(../images/down.png) no-repeat; display: inline-block; width: 13px; height: 13px; position: relative; top: 2px; left: 7px;} 
.N_box .Ntoggle-button::before{content: ""; background: url(../images/like3.png) no-repeat; display: inline-block; width: 16px; height: 16px; position: relative; top: 10%; left: -7px;} 

.N_box #Ntoggle-options{display: none; position: absolute; margin-top: 5px; right: 3px;}
.N_box .Ntoggle-options{width: 180px; height: 111px; background: white; border-radius: 4px; padding: 15px; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); border: 1px solid #d1d1d1;}
.N_box .Ntoggle-options p{cursor: pointer; color: #666; font-size: 14px;}
.N_box .Ntoggle-options p:hover{background: #f3f3f3; transition: 0.25s;}



.header-wrap .top-menu-bar .logo {display: flex; align-items: center;}
.header-wrap .top-menu-bar .logo img {height: 28px;}
.header-wrap .top-menu-bar .logo span {padding-left: 10px; color: #fff; font-size: 16px;}
.header-wrap .top-menu-bar .profile {display: flex; align-items: center;}
.header-wrap .top-menu-bar .profile span {padding-left: 5px; color: #fff; font-size: 18px;}

.side-menu-bar {position: fixed; left: 0; top: 60px; width: 240px; background-color: #444141; height: 100vh; max-height: calc(100vh - 60px);}
.side-menu-bar .side-menu-wrap {height: 100%; padding: 80px 20px;}
.side-menu-bar .side-menu-wrap ul li {margin-bottom: 23px;}
.side-menu-bar .side-menu-wrap ul li:last-child {margin-bottom: 0;}
.side-menu-bar .side-menu-wrap ul li a {display: flex; align-items: center;}
.side-menu-bar .side-menu-wrap ul li a span {color: #fff; font-size: 16px; padding-left: 10px;}
.side-menu-bar .side-menu-wrap ul li.active a span {color: #ee4034;}

/* 내 휴가 내역 */
#myholiday {width: 100%;}
.main-wrap {height: calc(100vh - 115px); margin-top: 60px; margin-left: 240px; padding: 27.5px 30px; background-color: #f4f2f2;}
.main-wrap .main-top {display: flex; justify-content: space-between; margin-bottom: 27.5px;}
.main-wrap .main-top h2 {line-height: 45px; font-size: 20px;}
.main-wrap .main-top .btn-holiday {width: 150px; height: 45px; line-height: 45px; text-align: center; border-radius: 30px; background-color: #444141;}
.main-wrap .main-top .btn-holiday img {vertical-align: sub; padding-right: 3px;}
.main-wrap .main-top .btn-holiday span {color: #fff; font-size: 18px;;}

.myholiday-wrap {padding: 30px 50px; background-color: #fff;}
.myholiday-wrap .search-wrap {width: 100%; display: flex; justify-content: flex-end;}
.myholiday-wrap .search-wrap .status {margin-right: 20px; width: 113px; height: 40px; padding: 0 10px; background: url('../images/arrow_red.png') no-repeat 90% 50%; -webkit-appearance: none; -moz-appearance: none; appearance: none; color: #9a9ca0}
.myholiday-wrap .search-wrap .status::-ms-expand {display: none;}
.myholiday-wrap .search-wrap .search-box {display: flex; margin-bottom: 30px;}
.myholiday-wrap .search-wrap .search-box input {width: 141px; height: 36px; padding: 0 10px;}
.myholiday-wrap .search-wrap .search-box input::placeholder {color: #9a9ca0;}
.myholiday-wrap .search-wrap .search-box > div {width: 40px; height: 40px; text-align: center;}
.myholiday-wrap .search-wrap .search-box .btn-search {background-color: #ee4034; line-height: 48px; cursor: pointer;}
.myholiday-wrap .search-wrap .search-box .btn-dropdown {background-color: #9a9ca0; line-height: 36px; cursor: pointer;}

.status-wrap, .setting-wrap {padding: 35px 50px;}
.status-wrap .search-wrap {justify-content: space-between; margin-bottom: 20px;}
.status-wrap .search-wrap .year, .setting-wrap .search-wrap .year {width: 130px; height: 45px; line-height: 40px; padding: 0 10px; font-size: 17px; color: #443e3e; border: 2px solid #9a9ca0;  background: url('../images/arrow_red.png') no-repeat 90% 50%; -webkit-appearance: none; -moz-appearance: none; appearance: none; font-weight: 600;}
.status-wrap .search-wrap .year::-ms-expand, .setting-wrap .search-wrap .year::-ms-expand {display: none;}
.status-wrap .search-wrap div {line-height: 45px;}
.setting-wrap .search-wrap div {line-height: 41px;}
.status-wrap .search-wrap div span {color: #444070; font-weight: 600;}

.setting-wrap .search-wrap {justify-content: flex-start; margin-bottom: 20px;}
.setting-wrap .search-wrap .btn-manage {cursor: pointer; width: 190px; height: 41px; margin-left: 15px; text-align: center; line-height: 41px; font-weight: 600; border: 2px solid #ee4034;}
.setting-wrap .search-wrap .btn-manage strong {color: #ee4034;}

.myholiday-table-wrap {width: 100%;}
.myholiday-table {width: 100%; text-align: left; vertical-align: middle; font-size: 16px; border: 1px solid #f4f2f3;}
.myholiday-table tr th {height: 36px; line-height: 36px; padding: 0 10px; background-color: #9a9ca0; color: #fff; font-weight: 400; border: 1px solid #f4f2f3;}
.myholiday-table tr td {height: 36px; line-height: 36px; padding: 0 10px;border: 1px solid #f4f2f3;}
.myholiday-table tr td:nth-child(1) {background-color: #fafafa;}
.red {color: #fa001b;}
.blue {color: #444070;}

.project-table-wrap {width: 100%; margin-bottom: 40px;}
.project-table {width: 100%; text-align: left; vertical-align: middle; font-size: 16px; border: 1px solid #f4f2f3;}
.project-table tr th {height: 36px; line-height: 36px; padding: 0 10px; background-color: #9a9ca0; color: #fff; font-weight: 400;}
.project-table tr th img {padding-right: 10px;}
.project-table tr td {padding: 0 10px; border-bottom: 1px solid #f4f2f3}
.project-table tr:nth-child(2) td {padding: 10px;}
.project-table tr:nth-child(3) td {height: 40px; line-height: 40px;}

.pagination-wrap {width: 100%; text-align: center; margin-top: 20px;}
.pagination-wrap .pagination ul {display: flex; justify-content: center;}
.pagination-wrap .pagination ul li {cursor: pointer; border: 1px solid #f4f2f2; background-color: #fff; width: 36px; height: 36px; line-height: 36px;}
.pagination-wrap .pagination ul li.active {background-color: #ee4034; color: #fff;}
.pagination-wrap .pagination ul li a span {font-size: 16px;}

.btn-wrap {position: absolute; bottom: 80px; right: 40px;}
.btn-register {position: relative; width: 55px; height: 55px; border-radius: 100%; background-color: #ee4034;}
.btn-register .bar {width: 30px; height: 4px; background-color: #fff; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)}
.btn-register .bar:last-child {transform: translate(-50%, -50%) rotate(90deg);}

/* 휴가 신청 */
.main-wrap .signup-top {margin-bottom: 10px;}
.signup .signup-content {display: flex; justify-content: flex-start; margin-bottom: 30px; }
.signup .signup-content .signup-title {width: 20%; font-weight: 400;}
.signup .signup-content input, .signup .signup-content textarea, .signup .signup-content select {width: 80%; height: 30px; line-height: 30px; padding: 0 10px; border: 1px solid #bbb; box-sizing: border-box;}
.signup .signup-content select {height: 32px; line-height: 32px;}
.signup .signup-content textarea {height: 100px; resize: none;}
.signup .signup-content input:disabled {background-color: #eee;}
.signup .signup-content input[type=date] {width: 38%}
.signup .signup-content div {width: 30px; height: 28px; background-color: #eee; line-height: 28px; text-align: center; border-top: 1px solid #bbb; border-bottom: 1px solid #bbb;}

.signup .hidden-content {width: 100%; margin-bottom: 30px;}
.signup .hidden-content .hidden-title {width: 19.5%; display: inline-block;}
.signup .hidden-content .ch-daynight {width: 80%; display: inline;}
.signup .hidden-content .ch-daynight label {margin-right: 15px;}

.btn-signup-wrap {position: relative; bottom: 0; right: 0; display: flex; justify-content: center; }
.btn-signup-wrap div {width: 80px; height: 35px; border-radius: 5px; line-height: 35px; text-align: center;}
.btn-signup-wrap .btn-signup {background-color: #ee4034; color: #fff; border: 1px solid #ee4034; margin-right: 20px;}
.btn-signup-wrap .btn-cancel {background-color: #fff; color: #666; border: 1px solid #ee4034;}

/* 휴가 설정 */
.left-day {color: #ee4034;}
.take-day {color: #444070;}
.info-manager, .info-owner {display: flex; align-items: center;}
.info-manager img, .info-owner img {width: 17px; padding-right: 8px;}

/* 2022-12-26 수정 */
.btn-cancel {border: 1px solid #ee4034; color: #ee4034; background-color: #fff; border-radius: 4px; padding: 2px 10px; margin-left: 10px; vertical-align: text-bottom; margin-top: -1px; font-size: 13px; height: 24px; line-height: 20px; transition: .3s all;}
.btn-cancel:hover {background-color: #ee4034; color: #fff; transition: .3s all;}
.btn-cancel.btn-delete {margin-left: 0;}
.hidden {display: none;}
.btn-google {box-sizing: border-box; display: flex; align-items: center; justify-content: center;}
.btn-google img {height: 16px; margin-right: 10px;}
.btn-google span {display: inline-block; text-align: center; font-weight: 500;}

.signup .signup-content .signup-input {width: 80%; display: flex; background-color: transparent; border: none;}
.signup .signup-content .signup-input input {width: calc(50% - 15px);}