@charset "utf-8";
/* CSS Document */
.Style-size-16{
     font-size: 1rem;   
}

@media (max-width: 1200px){
	.Style-size-16{
     font-size: 1rem;   
}
	}
.form-group .form-control .form-control {
	    border: 0px solid #fff;
	padding: 0;
	/*font-size: large;*/
	
}
.Statistics_table  .nav-link {
    width: calc(100% - 10px)!important;
    border: 1px solid #908686;
    margin: 5px;
}

.heading {
	    font-weight: bold;
    color: #000; 
	font-size:14px;
}


.Newstaff {
	width: 100%;
	float: left;
	position: relative;
}
.Newstaff .delete {
	top: 0px;
	right: 0px;
	position:absolute;
	 border-radius: 50px;
}

.btn-secondary {
    color: #fff;
    background-color: #6c757d !important;
    border-color: #6c757d;
}

#wrapper {overflow: hidden;}
#sidebar {width:210px; }
#sidebar.fixed {position:fixed;} 



.bg-warning {
    background-color: rgb(176 159 123) !important;
}
.padding10 {
  padding: 5% 8%;
}

.h-button {
  position: relative;
}

.h-button a {
	top: 0px;
	right: 0px;
	width: 100%;
	height: 100%;
	position:absolute;
      font-size: 0rem;
}
.h-button a:hover {
	background-color: #ffffff4a;
}


.search-row {
	top: 10px;
	right: 10px;
	position:absolute;
}

.main-link {
	    display: flex;
    justify-content: flex-end;
	    position: relative;
}

.main-link .item {
	float: right;
    margin: 0 5px;
	position: relative;
}
.main-link .item {
	float: right;
    margin: 0 5px;
	position: relative;
}
.Keep-left {
	margin-right: 5px;
	float: left;
}
.search-box {
	    padding: 5px;
    background-color: #ffffff59;
    border-radius: 0.4rem;
    display: flex;
    flex-wrap: nowrap;
	margin-right: 10px;
}
.search-box input{
	width: 150px;
	margin-right: 5px;
	float: left;
}
.search-box a{
	width: 50px;
	float: left;
}


 
.table-bordered ul{
	margin-bottom: 0
}



.b-box {
    width: 768px;
    margin: auto;
    padding: 0px 0;
	position: relative;
}

.b-box .table-bordered {
    border: 1px solid #d3d3d3;
}

.b-box  .table>:not(caption)>*>* {
    padding: .65rem .65rem;

}
.receipt-title h2 {
font-size: 1.4rem;
    FONT-WEIGHT: bold;
}
.receipt-title h2 span {
margin: 0 5px
}

.receipt-title p {
    position: absolute;
    right: 0;
    top: 0;
    right: 0;
    float: right;
}


.number .no {
    font-weight: bold;
    font-family: "Arial Black", Gadget, sans-serif;
    color: #f00;
}



.b-box .prove1, .b-box .prove2 {
    display: flex;
    justify-content: space-between;
    margin: 0px 0;
}


.date {
    float: left;
    text-align: center;
    font-family: 'Noto Serif TC', serif;
    font-size: 28px;
    width: 100%;
    letter-spacing: 4pt;
    margin-top: 20px;
}



  @media print {
        body * {
            visibility: hidden;
        }
        #printable-content, #printable-content * {
            visibility: visible;
        }
    }




/* 網頁捲軸【寬度】 */
#style-3 {
 overflow:scroll;
	height: 695px;
	
}
#style-3::-webkit-scrollbar {
  width: 10px;
height: 10px;	
}

/* 網頁捲軸【背景】顏色 */
#style-3::-webkit-scrollbar-track {
  background: #aec3d7;
}

/* 網頁捲軸【把手】顏色 */
#style-3::-webkit-scrollbar-thumb {
  background: #002e65;

	    border-radius: 0.4rem;
}

/* 網頁捲軸【滑過時】把手的顏色 */
#style-3::-webkit-scrollbar-thumb:hover {
  background: #51585e;
}





.message-list .checkbox-wrapper-mail {
    cursor: pointer;
    height: 20px;
    width: 20px;
    position: relative;
    display: inline-block;
    -webkit-box-shadow: inset 0 0 0 1px #ced4da;
    box-shadow: inset 0 0 0 1px #ced4da;
    border-radius: 1px
}

.message-list .checkbox-wrapper-mail input {
    opacity: 0;
    cursor: pointer
}

.message-list .checkbox-wrapper-mail input:checked~label {
    opacity: 1
}

.message-list .checkbox-wrapper-mail label {
    position: absolute;
    height: 20px;
    width: 20px;
    left: 0;
    cursor: pointer;
    opacity: 0;
    margin-bottom: 0;
    -webkit-transition-duration: .05s;
    transition-duration: .05s;
    top: 0
}

.message-list .checkbox-wrapper-mail label:before {
    content: "\F012C";
    font-family: "Material Design Icons";
    top: 15px;
    height: 20px;
    color: #292d32;
    width: 20px;
    position: absolute;
    margin-top: -16px;
    left: 4px;
    font-size: 13px
}



.Straight {
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
font-family: "超世紀中顏楷"; 
	    float: right;
	font-size: 22px;
	 color: #000;
	margin: auto;
	  position: relative;
	
}
.Straight .map {
    position: absolute;
    left: 100px;
    top: 100px;
    background: url(../image/S__7741444_0.png) no-repeat center center;
    background-size: 100%;
    width: 200px;
    height: 200px;
	z-index: -1;
   
}
.Straight h1 {
	    padding: 50px 0px;
    text-align: justify;
    text-justify: distribute-all-lines;
    text-align-last: justify;
    font-size: 3em;
    margin-block-start: 0.3em;
    margin-block-end: 0.3em;
}
.Straight p {
    padding: 0;
    margin-block-start: 0em;
    margin-block-end: 0em;
	    line-height: 1.5;
}
.Straight span {
    font-family: "細明體";
    font-weight: bold;
    line-height: 1.8; 
	font-size: 18px;
}
.Straight .scope {
	width: 250px;

}
.Straight .scope .no {
margin-top: 50px;
	display: flex;
    align-content: space-between;
    justify-content: space-between;
}
.Straight .scope .no .Name {
height: 20%;
}
.Straight .scope .no .time {
height: 40%;
}
.Straight .scope .no .age {
height: 30%;
}

.gender-box {
display: flex;
	    border: 1px solid #ced4da;
	padding: 4px 30px;
	justify-content: space-around;
	border-radius: 0.2rem;
}


#dynamicTable td {
    margin: 5px 6px;
    float: left;
}
.category_box  {
    padding: 15px;
    margin-bottom: 10px;
    position: relative;
}
.category_box .button_box  {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 1rem;
    border-radius: 0rem;
    color: #fff;
}


.category_box h3 {
    font-size: 1.2rem;
	margin-bottom: 20px;
}


.category_box .field{
	width: calc(100% - 0px);
       display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.category_box .field p {
    width: calc(100% / 3);
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: nowrap;
	margin-bottom: 5px;
	
}



.price-details {
 padding: 10px;
	position: relative;
	
}
.price-details h3 {
text-align: left;
    margin: 15px 0 25px;
    font-size: 1.2rem;
	
}
.price-details h3 span {
    font-size: 1rem;
	
}
.price-details .aggregately{
    position: absolute;
    right: 20px;
    top: 20px;
    float: right;
    width: 300px;
    text-align: right;
    font-size: 1rem;
}
.price-details .aggregately span{
font-size: 1.6rem;
	color: #F00C0F;
}
.price-details > div {
padding:5px;
position: relative;	
}
.price-details .accordion-button:after{
	position:absolute;
	left: 50%;
	transform: translateY(-50%);
	bottom: 0px;
}
.price-details .accordion-button {
display: flex;
    flex-direction: column;
    align-content: center;
    flex-wrap: nowrap;
}

.price-details .accordion-body {
    padding: 0.8rem 0.8rem;
	text-align:left;
	background: #fff	
}
.price-details .accordion-body ul {
   margin: 0;
	padding:0; 
}

.price-details .accordion-body ul li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
	    padding: 5px;
}
.nav-tabs .nav-tabs{
    display: flex;
    justify-content: space-around;
}
.nav-tabs .nav-tabs {
       position: relative;
}

.tab-pane .fc-toolbar {
    position: relative;
	
}

.tab-pane .fc-toolbar>*>:not(:first-child) {
    margin-left: 0em!important;
}

.tab-pane .fc-toolbar .date-box {
    display: flex;
    font-size: 1rem;
    margin-top: 0px;
    width: calc(100% - 100px);
}

.tab-pane .btn-group>.btn:not(:first-child) {
    margin-left: 5px;
}
.tab-pane .btn-group>.btn:nth-child(n+3), .btn-group>:not(.btn-check)+.btn {
    border-top-left-radius: 0.4rem;
    border-bottom-left-radius: 0.4rem;
}
.fc-date  {
display: flex;
align-items: center;

}
.fc-category {
     display: flex;
    align-items: center;
    flex-wrap: nowrap;
	
    width: 100%;

}
.fc-date .title {
    width: 100px;
    font-size: 1.01563rem;
    margin-bottom: 0rem;
}
.fc-date .form-control {
    width: calc(100% - 120px);
}

.fc-date .search  {margin-left: 5px;width: 50px !important;height: 35px;}
.fc-category h5 {
  margin-bottom: 0rem;
 width: 100px;	
}
.fc-category .category-check{
     width: calc(100% - 100px);
    border-radius: 0.25rem;
	    display: flex;
    flex-wrap: wrap;
}

.fc-category .form-check {
   margin: 6px;
}
.fc-category .search  {
margin-left: 5px;
    width: 50PX;
}




.nav-tabs .nav-item .d-sm-block{
  padding-top: 10px;
}
.tab-content{
	background: #fff;
}

.nav-tabs .nav-item{
     flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    text-align: center;
    font-size: 1.42188rem;
    letter-spacing: 10px;
}
.Main-title{
justify-content: center;
width: 100%;
    background-color: #f7f7f7;
    border-radius: 0.4rem;
	    align-items: center;
	
}









 .aggregately-money {
    text-align: right;
    font-size: 1rem;
    margin-bottom: 30px;
}
.aggregately-money  span{
font-size: 1.6rem;
	color: #F00C0F;
}

 .aggregately-money2 {
       text-align: right;
    font-size: 1.2rem;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

 .aggregately-money2 p{
    float: left;
    margin: 10px;
}
 .aggregately-money2 p span{
 margin: 0 5px ;
}
 .aggregately-money2 .combine{
 
}
 .aggregately-money2 .combine span{
font-size: 1.6rem;
	color: #F00C0F;
}



.Salary-details{
font-size: 1rem;

}
.Salary-details span{
margin-left: 10px;
}

.row-container {
	    display: flex;
    margin: 10px 0px ;
}

.row-container input{
	display: block;
	    margin: 0 5px;
    width: 42%;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.5;
    color: rgb(91, 98, 107);
    background-color: rgb(255, 255, 255);
    background-clip: padding-box;
    border: 1px solid rgb(206, 212, 218);
    appearance: none;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s, -webkit-box-shadow 0.15s ease-in-out 0s;
}

.row-container button{
	display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: #5b626b;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: .8125rem;
    border-radius: 0.25rem;
    -webkit-transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,-color: #fff;
    background-color: #fff;
    border-color: #6c757d;
	padding: 0.25rem 0.5rem;
    font-size: .71094rem;
    border-radius: 0.2rem;
}

#group1 .button,
#group2 .button{
        font-size: .8rem;
    margin: 0 8px;
    position: absolute;
    top: 15px;
    right: 10px;
    color: #fff;
    background-color: #747474;
    border: 1px solid rgb(206, 212, 218);
}

#group1 .button i,
#group1 .button i{
     margin-right: 5px;
	font-size: .9rem;
}

.group {
    background-color: #eee;
    padding: 20px 0px 10px 20px;
    width: calc(50% - 10px)!important;
    margin: 0 5px;
}
.group2 {
    background-color: #fff;
    padding: 20px 20px 10px;
    width: calc(100% - 10px)!important;
    margin: 0 5px;
}
.group .total{
width: 85%;
    font-size: 1rem;
    margin: 10px;
}
.group .total span{
margin-left: 5px;
	color: brown;
}
.group2 span{
margin-left: 5px;
	color: brown;
}


.list  li{
   padding: 10px;
    position: relative;
}
.mm-active>a {
    color: #ffffff !important;
    background-color: #353535;
}

#sidebar-menu ul li ul.sub-menu li a {
    padding: 0;
    position: absolute;
    font-size: 13px;
    right: 0;
        top: 10px;
    color: #545a6d;
    background-color: transparent;
}

#sidebar-menu .has-arrow {
    border: 1px solid #ced4da;
	margin: 15px 0;
}

.Newbutton .btn-primary{
    width: 100%;
    border-radius: 0rem ;
    margin-bottom: 10px;
}


.history{
  
border: 1px solid #ced4da;
padding: 20px 10px ;
color: #ffffff !important;
background-color: #353535;
text-align: center;
font-size: 1rem;	
}

.history .Main-title h2 {
    font-size: 1rem;
	color: #000 !important;
	margin-bottom: 0;
}
.history .month {
    display: inline-flex;
    flex-wrap: wrap;
}
.history .month a{
color: #fff;
width: calc(100% / 4);
float: left;
overflow: hidden;
padding: 5px;
	    font-size: .8rem;
}
.history .month2 {
    display: inline-flex;
    flex-wrap: wrap;
}
.history .month2 a{
color: #fff;
width: calc(100% / 1);
float: left;
overflow: hidden;
padding: 5px;
	    font-size: 1rem;
}


.personal-form .title-w {
  width: 110px;
}

.personal-form .enter-w {
  width: calc(100% - 110px);
}

.style-box {
        border: 2px solid rgba(0,0,0,.125);
    padding: 10px;
    border-radius: 0.25rem;
    margin-bottom: 30px;
    width: 50%;
    margin: 0 auto 30px;
    padding: 10px;
    text-align: center;
}
.style-box > div {
  width: 50%;
}
.style-box .style {
      background-color: #625998;
	color:  #fff;
	padding: 5px;
	border-radius: 0.25rem;
	 font-size: 1rem;
}

.style-box .style2 {
      background-color: #fff;
	color:  #000;
	padding: 5px;
	border-radius: 0.25rem;
	 font-size: 1rem;
}