@charset "UTF-8";

@import url(pacman.css);

header {height:50px;}
footer {height:150px;}
.copyright {font-size: 0.8em;}
.wordwh {color:#fff;}

select{text-align: center;}
.readonly {background-color: #f5f5f5;}

#base {width:100%;background-color:#fff;}
#OpArea {max-width: 1920px;margin: 0 auto;}    

/* 
meta_post.html / outputColorsで自動生成
.fcBlue {color: #007AB7;}
.fcRed {color: #D04255;}
.fcLime {color: #D8E212;}
.fcPrpl {color: #744199;}
.fcGren {color: #009F8C;}

.bgBlue {background-color: #007AB7;}
.bgRed {background-color: #D04255;}
.bgLime {background-color: #D8E212;}
.bgPrpl {background-color: #744199;}
.bgGren {background-color: #009F8C;}

span.wLbBlue {border-left: 6px solid #007AB7;}
span.wLbRed {border-left: 6px solid #D04255;}
span.wLbLime {border-left: 6px solid #D8E212;}
span.wLbPrpl {border-left: 6px solid #744199;}
span.wLbGren {border-left: 6px solid #009F8C;}
*/
.caseEditCbox span{display: inline-block;width:50px;height:15px;}


.oneList {float:left;width:94%;margin: 3%;}
.twoList {float:left;width:44%;margin: 3%;}

.roundedCorner {border-radius:15px;}
.bgwh {background-color:#fff; /*padding: 5%;*/}
.overflowHidden {overflow: hidden;}

#ajaxLoaderMakeCal,
#ajaxLoaderInfo {display: none; height: 250px;}
.cssAnimation{width: 50px; margin: 0 auto; padding: 75px 0 0 0;}
/* at Pacman.css */


.passDataTarDate,.passDataCaseId {cursor: pointer;}

.sideScrollable {

	display: block;
	overflow-x: scroll;
	
}
.sideScrollable .ScrollableList {

	display: inline-block;
	display: block;
	min-width: 1000px;

}
.sideScrollable::-webkit-scrollbar {width: 10px;height: 20px;}
.sideScrollable::-webkit-scrollbar-track {background: #fff;border-radius: 5px;}
.sideScrollable::-webkit-scrollbar-thumb {background: #f3f3f3;border-radius: 5px;}
.sideScrollable::-webkit-scrollbar-thumb:hover {background: #84a1e0;}





/*CaseCal*/
.sideScrollable table th,
.sideScrollable table td {padding: 1%;height: 100px;}
.sideScrollable table thead th {height:30px;}
.sideScrollable table p.dayNum {text-align: center;font-size: 1.5em;font-weight: bold;margin:0 0 15px 0;}
.sideScrollable table p.dayWrd {text-align: left;}
.sideScrollable table p.dayWrd span {display: block;padding: 0 0 0 3px;margin:5px 0;}
.sideScrollable table caption {font-size: 2em;padding: 20px 0;text-align: center;}

.sideScrollable table caption {
	width: 340px;
	position: sticky;
	left: 0;
}

/*ItemCal*/
.sideScrollable table.itemCal {width: 1800px;margin: 0 0 50px 0;}
.sideScrollable table.itemCal th,
.sideScrollable table.itemCal td {
	font-size: 0.8em;
	width: 2px;
	height: 30px;
	padding: 0;
	vertical-align: middle;
}
.sideScrollable table.itemCal th {
	width: 150px;
	padding: 5px 10px;
	position: sticky;
	left: 0;
	background-color: #fff;
	&:before{
		content: "";
		/*position: absolute;*/
		top: -1px;
		left: -1px;
		width: 100%;
		height: 100%;
		/*border: 1px solid #333;*/
	}
}

.sideScrollable table.itemCal td {border: none;border-bottom: 1px solid #333;}
.sideScrollable table.itemCal tr.itemTableHeader td {text-align: center;}

.sideScrollable td.pointer {cursor: pointer;}

#makeCalSection .paging {text-align: center;padding: 25px 0;}
#makeCalSection .paging .pageDisplay {padding: 10px 0 0 0;font-size: 85%;font-weight: bold;}
#makeCalSection .makeNewCase form {text-align: center;margin: 30px 0 10px 0;}
#makeCalSection .makeNewCase.item form {margin: 10px 0;}
#makeCalSection .makeNewCase form input[type="submit"]{background-color: rgba(255, 255, 255, 0.2);font-size: 0.8em;}
    







.onColorToday {background-color: #43b7ab;color:#f5f5f5;}
.specifyDay {background-color: #ffcaca;}



.calSection {width:180px;height:auto;}/*twoListの一部を修正*/
.itemSection {width:70%;height:auto;padding-top: 1em;}/*twoListの一部を修正*/
.itemSection input {width:80%;}

.topSec {height: 140px;}
.topSecHLeft {padding: 5%;}
.topSecHRight {padding: 15px 5px 3px 15px;}

.formBorderNone input {border: none;background-color:transparent;color: #333;}
#selectOfWeek {margin-left:10px;font-size: 90%;}

.position-center {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

#datepicker {
	border: none;
	background-color:transparent;
	color: transparent;
	width: 0;
	height: 0;
	font-size: 0;
	margin: 0;
	padding: 0;
}
/* datepicker Custumize START */
.ui-datepicker select.ui-datepicker-month {margin-right: 3px;}
.ui-widget-header {
	border: none;
	background: #fff;
}
table.ui-datepicker-calendar{border: 1px solid #ddd;}
.ui-datepicker-title select {border: 1px solid #dddddd;}
/* datepicker Custumize END */

table#iOScalender,
table#iOScalender tr,
table#iOScalender td {border: none;outline: none;}
table#iOScalender{max-width: 140px;/*table-layout: auto;*/}

.calTopLeft {/*max-width: 220px;height:105px;vertical-align: middle;*/}
.calTopLeft span{font-size: 100px;}
.calTopRight {/*text-align: center;*/}
.calTopRight span{white-space: pre;writing-mode: vertical-rl;text-orientation: upright;}
.calBottom {text-align: center;}


.caseTable {padding:0 0 2% 0;}
.caseTable table th,
.caseTable table td {padding: 1%;}
.caseTable table caption {padding: 1%;text-align: center;}
.caseTable table caption span {font-size: 2em;border-bottom: 1px solid #D04255;}

.caseTable table tr.discernmentColor {background-color: #f5fcff;}
.caseTable table caption span {display: inline-block;letter-spacing: 1em;text-indent: 1em;    line-height: 1.5em;}
.caseTable table tr th.eqList {letter-spacing: 1em;text-indent: 1em;}

div:has( > div.modeForm ) {text-align: right;}
.itemSection div.modeForm {display: inline-block;}
.itemSection div.modeForm input[type="submit"]{display: inline-block;width: auto;font-size: 0.8em;}
.itemSection #itemgenreselect {font-size: 0.8em;}

#floatwindow {display: none;position: fixed;top:0;left:0;padding: 5px 10px;border: 1px solid rgb(0 0 0 / 0.4);border-radius: 3px;background-color: rgb(255 255 255 / 0.9);}



#caseEditSection,
#genericEditSection {
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 20px;
}
#caseSection,
#itemSection,
#itemSection .itemBox,
#genericSection {
	margin: 0;
	margin-bottom: 75px;
}
#caseSection,
#itemSection,
#genericSection {text-align: center;}
#caseSection h2,
#itemSection h2,
#genericSection h2 { letter-spacing: 10px; padding: 5% 0;}

#itemSection .itemBox .itemInfo .caseidform {
	border: none;
	color: #f5f5f5;
}
#itemSection .itemBox .itemInfo p {
	display: inline-block;
	width: 42%;
	margin: 0;
	padding: 1% 0;
}
#itemSection .itemBox .itemInfo input {
	border:none;
	border-radius: 0%;
	border-bottom: 1px solid #666;
	width: 80%;
	text-align: center;
}

#itemSection .itemBox input.itemNameBox {width: 56%;}
#caseSection input.variableBox,
#caseSection textarea.variableBox {width: 730px;}





#caseEditSection div.threWayFlexBox > div,
#genericEditSection div.threWayFlexBox > div {display: inline-block;width: 28.5%;}

#caseEditSection div.threWayFlexBox > div select {width: 176px;}
#genericEditSection div.threWayFlexBox > div input, 
#genericEditSection div.threWayFlexBox > div select {width: 225px;}

#genericEditSection div.dualWayFlexBox > div {display: inline-block;width: 48.5%;}
#genericEditSection div.dualWayFlexBox > div input {width: 370px;}
#genericEditSection div.dualWayFlexBox > div select {width: 394px;}

#caseEditSection div.flexBoxSpacer,
#genericEditSection div.flexBoxSpacer {margin: 20px 0;}

#caseEditSection div.flexBoxSpacer > div,
#caseEditSection div.flexBoxSpacer > p,
#genericEditSection div.flexBoxSpacer > div,
#genericEditSection div.flexBoxSpacer > p {padding: 1% 0;}

#genericEditSection input.itemname,
#genericEditSection input.itembrand {width: 80%;}
#genericEditSection input.itemcolor,
#genericEditSection input.itemserial {width: 80%;}
#genericEditSection input.itemretentions {width: 86%;}

#caseEditSection #itemSection p.itemIncDec {display: block;text-align: center;}
#caseEditSection #itemSection p.itemIncDec.minus {padding: 20px 0;}


#nextstep {text-align: center;margin: 20px 0;}/*functions.php <?=$isFilled?>*/
#nextstep p {
	display: block;
	width: 85px;
	height: 25px;
	padding: 5px;
	border: 1px solid #333;
	border-radius: 5px;
	cursor: pointer;
	margin: 0 auto;
}
#itemSection {margin: 100px 0 0 0;}/*functions.php <?=$isFilled?>*/

#submitSection {text-align: center; margin: 100px 0;}
#submitSection input[type="submit"],
#submitSection input[type="button"],
.genericPostForm  input[type="submit"],
.genericPostForm  input[type="button"] {width: 200px; height: 50px;}

.posBlink, #dupItemCodes { color:#D04255;text-align: center; animation: blinking 1s ease-in-out infinite alternate; }
@keyframes blinking { 0% { opacity: 0.1; } 100% { opacity: 1; } }