@charset "UTF-8";





.template-clearfix:after {content: "";display: table;clear: both;}
.template-a {color: #5D6975;text-decoration: underline;}
.template-body {position: relative;width: 21cm;  height: 29.7cm; margin: 0 auto; color: #001028;background: #FFFFFF; font-family: Arial, sans-serif; font-size: 12px; font-family: Arial;}

.template-header {padding: 10px 0;margin-bottom: 30px;}
.template-logo {margin-bottom: 10px;}

.template-logo img {width: 100%;height: auto;display: block;}
.template-h1 {border-top: 1px solid  #5D6975;border-bottom: 1px solid  #5D6975;color: #5D6975;font-size: 2.4em;line-height: 1.4em;font-weight: normal;text-align: center;margin: 0 0 20px 0;}
.template-project {float: left;}
.template-project span {color: #5D6975;text-align: right;width: 52px;margin-right: 10px;display: inline-block;font-size: 0.8em;}
.template-company {float: right;text-align: right;}
.template-project div,.template-company div {white-space: nowrap;}
.template-table {width: 100%;border-collapse: collapse;border-spacing: 0;margin-bottom: 20px;}
.template-table tr:nth-child(2n-1) td {background: #F5F5F5;}
.template-table th,.template-table td {text-align: center;}
.template-table th {padding: 5px 20px;color: #5D6975;border-bottom: 1px solid #C1CED9;white-space: nowrap;font-weight: normal;}
.template-table .service,.template-table .desc {text-align: left;}
.template-table td {padding: 20px;text-align: right;}
.template-table td.service,.template-table td.desc {vertical-align: top;}
.template-table td.unit,.template-table td.qty,.template-table td.total {font-size: 1.2em;}
.template-table td.grand {border-top: 1px solid #5D6975;;}
.template-notice {color: #5D6975;font-size: 1.2em;}
.template-footer {color: #5D6975;width: 100%;height: 30px;position: absolute;bottom: 0;border-top: 1px solid #C1CED9;padding: 8px 0;text-align: center;}

.datas-table tr td{display: table-cell;padding: 15px 10px;border: 1px solid #e1e5eb;}


.message-list-div{min-height:80vh;overflow: scroll;}
.message-div{min-height:80vh;overflow: scroll;}

.inbox{position: fixed;top:5rem;height: calc(100vh - 120px);width: calc(100vw - 37rem);}
.inbox>.row{height: 100%;}
.inbox>.row>.border-end{border-color: #e6decc !important;}
.menu-group{list-style: none;padding:0;}
.menu-group li{}
.menu-group li a{padding:0.7rem 1rem;margin-bottom:0.1rem;}
.menu-group li a.active{background:#e6decc}
.menu-group li svg{width: 1.2rem; height: 1.2rem;}
.receipant{margin-top:1rem;overflow-y: scroll;height: calc(100vh - 175px);}
.receipant li.border-bottom{border-color:#e6decc !important}
.receipant strong{font-weight: 600;font-size:0.9rem;}
.receipant a.active{background:#e6decc}
.receipant p{display: flex;justify-content: space-between;align-items: center;font-size:0.7rem;}
.inbox .compose{position: absolute;height:100%;width: 100%;top:0;background:#ede7d9;display: none;}
.inbox .compose.active{display: block;}
.inbox .compose .top{border-bottom:#e6decc 1px solid}
.inbox .compose .top .discard{font-style: italic;text-decoration: underline;}
.inbox .compose .middle{display: block;}
.inbox .compose .middle .each{display: flex;align-items: center;padding:0.8rem 0.5rem 0.8rem 0.5rem;}
.inbox .compose .middle input{background:none;border:none;border-bottom:1px solid #c2c1bb;width: 100%;padding:0.5rem;}
.inbox .compose .bottom textarea{background:none;border:none;border-bottom:1px solid #c2c1bb;width: 100%;padding:0.5rem;resize:none;min-height: calc(100vh - 20rem);}
.inbox .view{height:100%}
.inbox .view .top{border-bottom:#e6decc 1px solid}
.inbox .view .middle{border-bottom:#c2c1bb 1px solid;height: calc(100vh - 22rem);overflow-y: scroll;}
.inbox .view .bottom textarea{background:none;border:none;border-bottom:1px solid #c2c1bb;width: 100%;padding:0.5rem;resize:none;min-height: 10rem;}
.inbox .view .bottom input{display: none;}
.inbox .view .bottom .add_attachment{font-style: italic;text-decoration: underline;}
.inbox .view .bottom>div{bottom:1rem;right:0.5rem;}


@media only screen and (max-width : 1199px) {
	header .h-title{width:auto;}
}

@media only screen and (max-width : 1023px) {
	.hr-employees .employee-list th:nth-child(4){display: none;}
	.hr-employees .employee-list th:nth-child(5){display: none;}
	.hr-employees .employee-list th:nth-child(6){display: none;}
	.hr-employees .employee-list td:nth-child(4){display: none;}
	.hr-employees .employee-list td:nth-child(5){display: none;}
	.hr-employees .employee-list td:nth-child(6){display: none;}
}