html{
	font-size:10px;	
}

*{
	font-size: 1.2rem;
}

body{
	margin:0;
	width:100%;
	height:100%;
}

body.domain_top{
	background: hsl(var(--col),0%,30%);
}

body.domain_top > main{
	display: flex;
	align-items: center;
	justify-content: center;
	height:900px;
}

body.domain_top > main > *{
	width:400px;
	display: flex;
	flex-wrap: wrap;
	gap:16px;
	padding:32px;
	background: hsl(var(--col),0%,40%);
	border-radius: 5px;
}

body.domain_top > main > * > *{
	width:100%;
	margin: 0;
	padding: 0;
}

body.domain_top > main > * > form{
	display: flex;
	gap:16px;
	flex-wrap: wrap;
}

body.domain_top > main > * > form > *{
	width:100%;
}

body.domain_top > main > * > form .wrap > span:first-of-type{
	color: hsl(var(--col),0%,80%);
}

body.domain_top > main > * > form input[type=text],input[type=password]{
	width: 100%;
}

body:not(.domain_top){
	background: hsl(var(--col),0%,90%);
}

body > header{
	background: #fff;
	padding:16px;
	justify-content:space-between;
}

body > header *{
	font-size: 1.8rem;
}

body > header a{
	color: hsl(var(--col),0%,40%) !important;
	font-size: 1.6rem;
	text-decoration: none;
}

body{
	gap:2.5vw;	
}

body > nav{
	z-index: 999;
	width:200px;
	position: fixed;
	background:hsl(var(--col),0%,95%);
	padding:0;
	height:calc(100% - 59px);
	top:59px;
}

body > nav.close{
	width:calc(24px * 3);
}

body > nav.close > p{
	display: none;
}

body > nav *{
	font-size: 1.4rem;
}

body > nav > *{
	display: block;
	width:100%;
	font-size: 1.2rem;
}

body > nav :is(a,span){
	font-size: 1.2rem;
	display: block;
	padding:8px;
	color: hsl(var(--col),0%,20%) !important;
}

body > nav > span{
	font-weight: bold;
}

body > nav a:is(:hover,.focus)
{
	background:hsl(var(--col),0%,90%);
	color: hsl(var(--col-blue),75%,60%) !important;
}

body > nav > ul{
	padding-left: 16px;
}

body > nav > a:last-of-type{
	position: absolute;
	bottom: 0;
	left: 0;
}


body:not(.domain_top) >  main{
	width: 98%;
	padding: 24px 0 0 240px;
}

body:not(.domain_top) >  main > *{
	width:auto;
	margin-bottom: 16px;
}

body >  main h1{
	font-size: 2rem;
	font-size:2rem;
}

/* dashboard */
body.dashboard > main > .topAny{
	display: flex;
	flex-wrap: wrap;
	gap:2%;
	width:100%;
	margin-bottom: 32px;
}

body.dashboard > main > .topAny > *{
	width:calc(96% / 3);
	border: 1px solid hsl(var(--col),0%,85%);
	padding:8px 16px;
	background: hsl(var(--col-blue), 100%,98%);
	border-radius: 5px;
}

body.dashboard > main > .topAny h2{
	display: flex;
	gap:8px 16px;
	align-items: center;
}

body.dashboard > main > .topAny h2 span{
	font-size: 1.6rem;
}

body.dashboard > main > .topAny h2 a{
	color: hsl(var(--col-skyblue), 100%,40%);
	font-weight: normal;
	text-decoration: none;
	font-size: 1.4rem;
}

body:is(.dashboard,.galsPayBack) > main :is(.clientOrders){
	background: hsl(var(--col-blue), 100%,98%);
	display: flex;
	flex-wrap: wrap;
}

body:is(.dashboard,.galsPayBack) > main :is(.clientOrders) > *{
	width: 100%;
	border-radius: 5px 5px 0 0;
}

body:is(.dashboard,.galsPayBack) > main :is(.clientOrders) > :is(.head, .pushClients){
	background: hsl(var(--col),0%,20%);
	padding: 8px 16px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	border-radius: 5px 5px 0 0;
}

body:is(.dashboard,.galsPayBack) > main :is(.clientOrders) > .pushClients{
	border-radius: 5px;
	margin-bottom: 16px;
}

body:is(.dashboard,.galsPayBack) > main :is(.clientOrders) > .pushClients h2{
	color: #fff;
}

body:is(.dashboard,.galsPayBack) > main :is(.clientOrders) > .head > .title h2{
	color: hsl(var(--col),0%,97%);
	font-size: 1.6rem;
	font-weight: normal;
}

body:is(.dashboard,.galsPayBack) > main :is(.clientOrders) > .head > .title :is(.description,.addGroup){
	display: flex;
	flex-wrap: nowrap;
	gap:16px;
	margin-bottom: 16px;
}

body:is(.dashboard,.galsPayBack) > main :is(.clientOrders) > .head > .title :is(.description,.addGroup) *:not(h2){
	font-size: 1.4rem;
}

body:is(.dashboard,.galsPayBack) > main :is(.clientOrders) > .head > .title :is(.description) > span::before{
	content: "■";
}

body:is(.dashboard,.galsPayBack) > main :is(.clientOrders) > .head > .title :is(.description) > label.draft{
	color: hsl(var(--col),0%,80%);
	border: 1px solid hsl(var(--col),0%,80%);
	padding-inline: 8px;
	border-radius: 5px;
}

body:is(.dashboard,.galsPayBack) > main :is(.clientOrders) > .head > .title :is(.description) > span.draft,span.draft::before{
	color: hsl(var(--col-orange),75%,90%);
}

body:is(.dashboard,.galsPayBack) > main :is(.clientOrders) > .head > .title :is(.description) > .call,.call::before{
	color: #fff;
}

body:is(.dashboard,.galsPayBack) > main :is(.clientOrders) > .head > .title :is(.description) > .playIn,.playIn::before{
	color: hsl(var(--col-green), 75%,60%);
}

body:is(.dashboard,.galsPayBack) > main :is(.clientOrders) > .head > .title :is(.description) > .playOut,.playOut::before{
	color: hsl(var(--col-purple), 75%,75%);
}

body:is(.dashboard,.galsPayBack) > main :is(.clientOrders) > .head > .title :is(.description) > .cancel,.cancel::before{
	color: hsl(var(--col), 0%,70%);
}
body:is(.dashboard,.galsPayBack) > main :is(.clientOrders) > .head > .title :is(.description) > .receptLimitOneHour,.receptLimitOneHour::before{
	color: hsl(var(--col-skyblue), 75%,80%);
}
body:is(.dashboard,.galsPayBack) > main :is(.clientOrders) > .head a.clientsOrderPostFormDisp{
	background: hsl(var(--col-skyblue),75%,50%);
	color: #fff;
	padding:4px 24px;
	border-radius: 5px;
	text-decoration: none;
}

body:is(.dashboard,.galsPayBack) > main :is(.clientOrders) > .head > :is(.stores,.items){
	width:100%;
	display: flex;
	flex-wrap: wrap;
	gap:16px;
}

body:is(.dashboard,.galsPayBack) > main :is(.clientOrders) > .head > :is(.stores,.items):not(:last-of-type){
	margin-bottom: 16px;
}

body:is(.dashboard,.galsPayBack) > main :is(.clientOrders) > .head > :is(.stores,.items) > label{
	color: hsl(var(--col),0%,80%);
	border: 1px solid hsl(var(--col),0%,80%);
	padding-inline: 8px;
	border-radius: 5px;
}

body:is(.tableView,*[class*=master]) > main .wrap{
	padding:8px;
	background: #fff;
}

body:is(*[class*=masterCose],.masterMoveCost,.masterStaffForm) > main .wrap{
	background: none;
}

body:is(.dashboard,.galsPayBack) > main :is(.clientOrders) > .head > .items{
	align-items: center;
}

body:is(.dashboard,.galsPayBack) > main :is(.clientOrders) > .head > .items > span{
	color: #fff;
}

body.masterMoveCost  > main .wrap{
	display: flex;
	gap:16px;
}

body.masterMoveCost  > main .wrap > *{
	width:400px;
	background: #fff;
	padding: 16px;
}

body.masterMoveCost  > main .wrap > * h2{
	font-size: 1.6rem;
	margin-bottom: 16px;
}

body.masterMoveCost  > main .wrap > * .items{
	display: flex;
	gap:0;
}

body.masterMoveCost  > main .wrap > * .items > *{
	padding:4px 8px;
	border: 1px solid hsl(var(--col),0%,97%);
	width:calc(50% + 1px);
	margin: -1px 0 0 -1px;
}

body.masterMoveCost  > main .wrap > * .title > p{
	width:100%;
}

body:is(.tableView,*[class*=master]) > main .wrap div.datas{
	overflow: auto;
}

body:is(.tableView,*[class*=master]) > main .wrap .datas{
	overflow: scroll;
}

body:is(.tableView) > main .wrap .datas,
.clientOrders .datas{
	overflow-y:auto;
	overflow-x: hidden;
}

body.shifts > main .wrap .datas table{
	width: calc((100px * 31) + 200px); 
}

body:is(.tableView,*[class*=master]) > main .wrap .datas table,
.clientOrders .datas table{
	width: 100%; 
}

body:is(.tableView,*[class*=master]) > main .wrap .datas table tr:first-of-type,
body:is(.tableView,*[class*=master]) > main .wrap .datas table tr:first-of-type th{
	background: hsl(var(--col),0%,95%);
}

.clientOrders .datas table tr{
	background: #fff;
}

.clientOrders .datas table tr:first-of-type,
.clientOrders .datas table tr:first-of-type :is(th){
	background: hsl(var(--col),0%,95%);
}

.clientOrders .datas table tr.draft{
	background: hsl(var(--col-orange),75%,90%);
}
.clientOrders .datas table tr.recept{
	background: #fff;
}

.clientOrders .datas table tr.receptLimitOneHour{
	background: hsl(var(--col-skyblue), 75%,90%);
}


.clientOrders .datas table tr.playIn{
	background: hsl(var(--col-green), 75%,60%);
}

.clientOrders .datas table tr.playOut{
	background: hsl(var(--col-purple), 75%,75%);
}

.clientOrders .datas table tr.cancel{
	background: hsl(var(--col), 0%,70%);
}

.clientOrders .datas table tr.cancel :is(th,td){
	border: 1px solid hsl(var(--col),0%,90%);
}

body:is(.tableView,*[class*=master]) > main .wrap .datas table :is(th,td),
.clientOrders .datas table :is(th,td)
{
	width:100px;
	border: 1px solid hsl(var(--col),0%,70%);
	margin: -1px 0 0 -1px;
	padding:4px 8px;
}

body:is(.sales) > main .wrap .datas table .satday{
	background: hsl(var(--col-green),75%,95%);
}

body:is(.sales) > main .wrap .datas table .sunday{
	background: hsl(var(--col-red),100%,95%);
}


body:is(.sales) > main .wrap .datas table td:nth-of-type(even),
body:is(.sales) > main .wrap .datas table td:first-of-type{
	width:100px;
}


body:is(.tableView,*[class*=master]) > main .wrap .datas table :is(th,td){
	width:50px;
}

body:is(.tableView,*[class*=master]) > main .wrap .datas table :is(th),
.clientOrders .datas table :is(th){
	position: sticky;
}

body:is(.tableView,*[class*=master]) > main .wrap .datas table tr:first-of-type :is(th),
.clientOrders .datas table :is(th){
	top: 0;
	left: 0;
}



body:is(.tableView,*[class*=master]) > main .wrap .datas table tr:not(:first-of-type) :is(th){
	left: 0;
}

body:is(.tableView,*[class*=master]) > main .wrap .datas table tr:first-of-type th,
.clientOrders .datas table tr:first-of-type{
	z-index: 9999;
}

body:is(.gal,*[class*=master]) > main .wrap .datas table :is(.id){
	width:40px;
}

body:is(.shifts,*[class*=master]) > main .wrap .datas table :is(.name),
.clientOrders .datas table :is(.address){
	width:200px;
}

body:is(.shifts) > main .wrap .datas table :is(th,td){
	width:100px;
	text-wrap: nowrap;
}

body:is(.gals,.shifts) > main .wrap .datas table :is(th,td).name{
	width:150px;
}

body:is(.tableView,*[class*=master]) > main .wrap .datas table :is(th,td).clmNumber{
	width:40px !important;
	text-wrap: nowrap;
}

body:is(.tableView,*[class*=master]) > main .wrap .datas table tr:not(:first-of-type):hover{
	background: hsl(var(--col),0%,97%);
}

.clientOrders .datas .pager,
.tableView .datas .pager{
	display: flex;
	gap: 8px;
	margin-top: 24px;
	justify-content: center;
}

.clientOrders .datas .pager > *,
.tableView .datas .pager > *
{
	border: 1px solid hsl(var(--col),75%,60%);
	padding: 4px 12px;
	border-radius: 5px;
	text-decoration: none;
}

.clientOrders .datas .pager > *.focus,
.tableView .datas .pager > *.focus
{
	background: hsl(var(--col),75%,60%);
	color: #fff;
}

body:is(.schedules,.nowInfo) > main .wrap .datas table :is(.name){
	width:150px;
}

body:is(.schedules,.nowInfo) > main .wrap .datas table :is(.scheduleRange){
	width:100px;
}


body:is(.tableView,*[class*=master]) > main .wrap .datas table :is(.stores){
	width:150px;
}

body:is(.tableView,*[class*=master]) > main .wrap .datas table :is(.playInfos){
	width:250px;
}

body:is(.tableView,*[class*=master]) > main .wrap .datas table :is(.playInfos) > .items{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap:8px;
}

body:is(.galsNowInfo) > main .wrap .datas table .playInfos .items > span{
	padding:4px 8px;
	border-radius: 5px;
	border: 1px solid hsl(var(--col),0%,80%);
}

body:is(.galsNowInfo) > main .wrap .datas table .playInfos .checkOut{
	background: hsl(var(--col-purple),75%,50%);
	color: hsl(var(--col-purple),75%,80%);
}

body:is(.galsNowInfo) > main .wrap .datas table .playInfos .playIn{
	background: hsl(var(--col-green),75%,60%);
}

body:is(.galsNowInfo) > main .wrap .datas table .playInfos .reserve{
	background: #fff;
}

body:is(.tableView,*[class*=master]) > main .wrap .datas table :is(input[type=text],input[type=number]){
	width:100%;
}

body:is(*[class*=master]) > main .head{
	display: flex;
	gap:8px;
}

body:is(*[class*=master]) > main .head > *{
	background: hsl(var(--col),0%,95%);
	border-radius: 5px;
	padding:4px 16px;
	border: 1px solid hsl(var(--col),0%,80%);
}

body:is(*[class*=master]) > main .head > *.focus{
	background: #000;
	color: #fff;
}

body:is([class*=masterCoseForm],[class*=masterStaffForm],[class*=galsForm]) > main .wrap .formTitle{
	border-bottom: 1px solid hsl(var(--col),0%,80%);
	margin-bottom: 16px;
}

body:is([class=master],[class*=masterCose],[class*=masterStaff],[class*=gals]) > main .wrap .formTitle{
	display: flex;
	justify-content: space-between;
	margin-bottom: 8px;
	color: hsl(var(--col),0%,30%);
}


body:is([class*=masterCoseForm],[class*=masterStaffForm],[class*=galsForm]) > main .wrap .formTitle a,
body:is([class*=masterCoseForm],[class*=masterStaffForm],[class*=galsForm]) > main .wrap .formTitle{
	text-decoration: none;
	font-weight: bold;
	font-size: 1.6rem;
}

body:is([class*=masterCoseForm],[class*=masterStaffForm],[class*=galsForm]) > main .inputGroup,
body:is(.tableView) .searchWrap{
	background: hsl(var(--col-blue), 100%,98%);
	display: flex;
	gap: 24px 1%;
	flex-wrap: wrap;
	margin-bottom: 4px;
	border-radius: 5px;
}

body:is([class*=masterCoseForm],[class*=masterStaffForm],[class*=galsForm]) > main .inputGroup > *{
	width :calc(97% / 4);
	padding: 8px;
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
}

body:is([class*=masterCoseForm],[class*=masterStaffForm],[class*=galsForm]) > main .inputGroup > .full{
	width:100%;
}

body:is([class*=masterCoseForm],[class*=masterStaffForm],[class*=galsForm]) > main .inputGroup > * > *{
	width:100%;
}

body:is([class*=masterCoseForm],[class*=masterStaffForm],[class*=galsForm]) > main .inputGroup :is(input,select){
	border-radius: 5px;
	border: 1px solid hsl(var(--col),0%,90%);
	padding:8px;
}

body:is([class*=masterCoseForm],[class*=masterStaffForm],[class*=galsForm]) > main .inputGroup .reqd{
	background: hsl(var(--col-red), 80%,75%);
	padding: 2px 8px;
	content: "必須";
	color: #fff;
	display: inline-block;
	margin-left: 8px;
	font-size: 1rem;
	border-radius: 5px;
}

body:is(.masterArea) .wrap{
	display: flex;
	flex-wrap: wrap;
	gap:3%;
}

body:is(.masterArea) .wrap > *{
	width:30%;
	padding:16px;
	background: #fff;
	border-radius: 5px;
}

body:is(.masterArea) .wrap h2{
	font-size: 1.6rem;
	margin-bottom: 16px;
	display: flex;
	justify-content: space-between;
}

body:is(.masterArea) .wrap :is(.save,.saved) .citys{
	margin-bottom: 16px;
}

body:is(.masterArea) .wrap :is(.save,.saved) .citys .items{
	display: flex;
	border: 1px solid hsl(var(--col),0%,95%);
	margin-top: -1px;
	align-items: center;
}

body:is(.masterArea) .wrap :is(.save,.saved) .citys .items > *{
	width:50%;
	padding: 4px 8px;
}

body:is(.masterArea) .wrap :is(.save,.saved) .citys .items > span:first-of-type{
	text-align: right;
}

body:is(.masterArea) .wrap :is(.save,.saved) .citys .items > span input{
	width: 100%;
}

body:is(.masterArea) .wrap :is(.save,.saved) .citys :is(.title,.subtitle) > *{
	text-align: left;
	width:100%;
	background: hsl(var(--col),0%,90%);
}

body:is(.masterArea) .wrap .saved .citys .title > *{
	background: hsl(var(--col-red),70%,90%);
}

body:is(.masterStaffForm, .galsForm) .wrap :is(.parmits, .payback, .inStore) h2{
	font-size: 1.6rem;
}

body:is(.masterStaffForm, .galsForm) .wrap :is(.parmits, .payback, .inStore) > .inputGroup{
	gap:8px;
	padding-bottom: 8px;
}

body:is(.masterStaffForm, .galsForm) .wrap :is(.parmits, .payback, .inStore) > .inputGroup .title{
	width: 100%;;
}

body:is(.masterStaffForm, .galsForm) .wrap :is(.parmits, .payback, .inStore) > .inputGroup > *:not(.title){
	width:calc((100% - 54px) / 7);
	padding:0 0 0 8px;
}

body:is(.masterStaffForm, .galsForm) .wrap :is(.inStore) > .inputGroup > *:not(.title){
	width:calc((100% - 54px) / 4);
}

body:is(.masterStaffForm, .galsForm) .wrap :is(.parmits, .payback, .inStore) > .inputGroup > *:not(.title) > label{
	border: 1px solid hsl(var(--col),0%,90%);
	background: #fff;
	padding:8px;
	border-radius: 5px;
}

body:is(.masterStaffForm, .galsForm) .wrap :is(.parmits, .payback, .inStore) > .inputGroup > *:not(.title) > label.focus{
	background: hsl(var(--col-red), 80%,90%);
}

body:is(.masterStaffForm, .galsForm) .wrap :is(.parmits, .payback, .inStore) > .inputGroup input[type=checkbox]{
	width:initial;
}

body:is(.tableView) .searchWrap{
	padding:8px 16px;
	gap:24px;
	margin-bottom: 24px;
}

body:is(.tableView) .searchWrap > form{
	display: flex;
	gap:8px;
}

body:is(.tableView) .searchWrap > form input[type=text]{
	width:250px;
}

body:is(.tableView) .searchWrap > form button{
	margin: 0;
	padding:2px 16px;
	background: hsl(var(--col-green), 75%,50%);
	font-size: 1.2rem;
	border-style:none ;
	color: #fff;
	border-radius: 5px;
}

body:is(.tableView) .searchWrap a{
	display: flex;
	align-items: center;
	background: hsl(var(--col-skyblue), 90%,40%);
	color: #fff;
	padding-inline:24px;
	border-radius: 5px;
}

body:is(.tableView) .searchWrap :is(.stores, .status, .galNowInfo, .items){
	width:100%;
	display: flex;
	flex-wrap: wrap;
	gap:16px;
}

body:is(.tableView) .searchWrap .galNowInfo > .checkOut > span{
	color: hsl(var(--col-purple),75%,50%);
}

body:is(.tableView) .searchWrap .galNowInfo > .playIn > span{
	color: hsl(var(--col-green),75%,60%);
}

body:is(.tableView) .searchWrap .galNowInfo > .reserve > span{
	color: #fff;
}

body:is(.tableView) .searchWrap :is(.stores, .status, .items) > label{
	border: 1px solid hsl(var(--col),0%,80%);
	padding:4px;
	border-radius: 5px;
}

body:is(.schedules) .searchWrap a.dates{
	padding-block: 8px;
}

body:is(.schedules) .searchWrap a.focus{
	background: #000;
	color: #fff;
}

body > :is(.clientsOrderPostForm){
	position: fixed;
	bottom:32px;
	left: 16px;
	display: flex;
	z-index: 9999;
	width: auto;
	height:auto;
}

body > :is(.clientsOrderPostFormUnderLayer){
	position: fixed;
	top:0;
	bottom:0;
	background: hsla(var(--col),0%,20%,.8);
	z-index: 9999;
	width:100%;
	height:100%;
}

body.daylyReport .datas .totalWrap{
	background: hsl(var(--col),0%,95%);
	border-radius: 5px;
	padding-bottom: 8px;

}

body.daylyReport .datas .totalWrap h2{
	color: hsl(var(--col),0%,30%);
	font-size: 1.6rem;
	padding:8px 16px;
	border-radius: 5px 5px  0 0;
}

body.daylyReport .datas .totalWrap h2:first-of-type{
	background: hsl(var(--col),0%,20%);
	color: hsl(var(--col),0%,90%);
}

body.daylyReport .datas .totalWrap :is(table,p,div.description){
	width:calc(100% - 32px);
	margin: 16px 16px;
	width:auto;
	min-width: 800px;
	text-align: center;
}

body.daylyReport .datas .totalWrap table :is(th,td){
	width:200px;
	border: 1px solid hsl(var(--col),0%,85%);
	padding:4px 16px;
}

body.daylyReport .datas .totalWrap table th{
	background: hsl(var(--col),0%,90%);
}

body.daylyReport .datas .totalWrap table td.toolchip,
body:is(.monthlyReport,.sales) > main .wrap .datas table td.toolchip
{
	position: relative;
}

body.daylyReport .datas .totalWrap table td.toolchip > span:first-of-type,
body:is(.monthlyReport,.sales) > main .wrap .datas table td.toolchip > span:first-of-type
{
	border-bottom: 1px dotted hsl(var(--col),0%,50%);
}

body.daylyReport .datas .totalWrap table td.toolchip span.toolchip,
body:is(.monthlyReport,.sales) > main .wrap .datas table td.toolchip span.toolchip
{
	z-index: 1;
	display: none;
	position: absolute;
	bottom:100%;
	left:100%;
	width:200px;
	padding:8px;
	background: hsla(var(--col),0%,20%,.8);
	border-radius: 5px;
}

body.sales > main .wrap .datas table td.toolchip span.toolchip{
	top:100%;
	bottom:auto;
}

body.daylyReport .datas .totalWrap table td.toolchip span.toolchip > *,
body:is(.monthlyReport,.sales) > main .wrap .datas table td.toolchip span.toolchip > *
{
	display: block;
	border-bottom: 1px solid hsl(var(--col),0%,90%);
	color: hsl(var(--col),0%,90%);
	text-align: left;
	font-size: 1.2rem;
}

body.daylyReport .datas .totalWrap table td.toolchip span.toolchip br,
body:is(.monthlyReport,.sales) > main .wrap .datas table td.toolchip span.toolchip br
{
	line-height: 100%;
	margin: 0;
}

body.daylyReport .datas .totalWrap .description{
	margin-block: 8px;
}

body.daylyReport .datas .totalWrap .description > p{
	margin: 0;
	font-size: 1rem;
	color: hsl(var(--col),0%,50%);
	text-align: left;
}

body.daylyReport #costForm .totalWrap table .note{
	width:500px;
}

body.daylyReport #costForm .totalWrap table .note input[type=text]{
	width:100%;
}
body.daylyReport > main > .dataTowClm{
	display: flex;
	gap:24px;
}

body.daylyReport .dataTowClm .totalWrap{
	width:calc(50% - 12px);
}

body.daylyReport .dataTowClm .galsTotals :is(table,p,div.description){
	width: calc(100% - 32px);
	min-width: 100px;
}

body.daylyReport .dataTowClm .galsTotals table :is(th,td){
	width:12%;
	padding-inline: 4px;
}

body.daylyReport .dataTowClm .galsTotals table :is(th,td):nth-of-type(-n+2){
	width:calc((100% - (15% * 3)) / 2);
}

body.monthlyReport > main .wrap div.datas{
	overflow: scroll;
}

body.monthlyReport > main .wrap div.datas *{
	font-size: 1.2rem;
}

body.monthlyReport > main .wrap .datas table .satday{
	background: hsl(var(--col-green),75%,95%);
}

body.monthlyReport > main .wrap .datas table .sunday{
	background: hsl(var(--col-red),100%,95%);
}

body.monthlyReport > main .wrap .datas h2{
	margin-block: 8px;
	font-size:1.4rem;
	color: hsl(var(--col),0%,30%);
}

body.monthlyReport > main .wrap .datas table :is(th,td){
	min-width:65px;
	padding:2px;
}

body.monthlyReport > main .wrap .datas table th{
	background: hsl(var(--col),0%,95%);
	top:0;
	left:0;
}

body.monthlyReport > main .wrap .datas table tr.sticky{
    position: sticky;
    top: 0px;
	z-index: 1;
}

body.monthlyReport > main .wrap .datas table :is(.min){
	min-width:30px;
}

body.monthlyReport > main .wrap .datas table .calcAvg{
	background: hsl(var(--col-skyblue), 0%,85%);
}

body.monthlyReport > main .wrap .datas table .calcTotal{
	background: hsl(var(--col-skyblue), 100%,90%);
}

body.monthlyReport > main .wrap .datas table .calcPlan{
	background: hsl(var(--col-orange), 75%,85%);
}

body.monthlyReport > main .wrap .datas table .reportTotal > td{
	padding:16px;
}

body.monthlyReport > main .wrap .datas .description{
	margin-bottom: 8px;
}

body.monthlyReport > main .wrap .datas .description > p{
	color: hsl(var(--col),0%,40%);
}