/****************************************
           common
*****************************************/
.grayscale{
    -webkit-filter:grayscale(100%);
    -moz-filter:grayscale(100%);
    -ms-filter:grayscale(100%);
    filter:grayscale(100%);
}

.overlay{
	position:fixed;
	top:0px;
	left:0px;
	display:block;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.3);
	z-index:100;
}


/****************************************
           Content Layout
*****************************************/
body {
    color:#000;
    font-family:'Noto Sans JP', sans-serif;
	font-feature-settings: "palt";
	font-display: block;
    font-size:14px;
    background-color:#FFF;

	touch-action: manipulation;
}

header{
	color:#FFF;
	font-size:24px;
	font-weight:bold;
	text-align:center;
	width:100%;
	height:auto;
	line-height:50px;
	background-image: linear-gradient(#333 0%, #000 100%);/*linear-gradient(#148e39 0% , #10732e 100%);*/
	z-index:100;
}

/********************/
/*** index        ***/
/********************/
#order{
	font-size:20px;
    padding:5px 0px;
    transform-origin: top left;
}

.main_th{
	/*color:#FFF;*/
	font-size:24px;
	text-align:center;
	height:30px;
	line-height:30px;
	background-color:#EEE;
	border:solid 1px #999;
	vertical-align:middle;
}

.main_th.main_th_null{
	background-color:white;
	width: 4px;
}

.main_td{
	font-size: 36px;
	line-height: 48px;
	text-align:center;
	height:30px;
	border:solid 1px #999;
	vertical-align:middle;
}

.main_th.font_small,
.main_td.font_small{
	font-size:16px;
}

.noodle_order_element .do_order_soup {
	position: relative;
	color: #fff;
}

.noodle_order_element .do_order_soup::after {
	content: "";
	position: absolute;
	top: 6px;
	left: 7px;
	width: 96%;
	height: 85%;
	display: block;
	border: 11px solid #dc3545;
	border-radius: 11px;
	background-color: #dc3545;
	z-index: -1;
}

.noodle_order_element .soup_waiting {
	position: relative;
	color: #fff;
	transition: 0s ;
	transition-timing-function: linear;
}

.noodle_order_element .soup_waiting::after {
	content: "";
	position: absolute;
	top: 6px;
	left: 7px;
	width: 96%;
	height: 85%;
	display: block;
	border: 11px solid #17a2b8;
	border-radius: 11px;
	background-color: #17a2b8;
	z-index: -1;
}

.noodle_order_element .soup_waiting.to_cancel {
	transition: 2.3s ;
	color: black;
}
.noodle_order_element .soup_waiting.to_cancel::after {
	transition: 2.3s ;
	border-color: black;
	background-color: black;
	color: black;
}

.noodle_order_element .soup_cooking {
	position: relative;
	background-color: #17a2b8;
	color: #fff;
}

.noodle_order_element .soup_cooked {
	background-color: #28a745;
	color: #fff;
}

.noodle_order_element .soup_none {
	background-color: #6c757d;
	color: #fff;
}

.table td, .table th {
	padding: .75rem 0;
}

.main_td.slot {
	padding: 0;
	vertical-align: middle;
	width: 62px;
}

.main_td.slot .btn{
	font-size: 20px;
	line-height: 35px;
}

.main_td.slot .btn.btn-warning{
	background-color:#ffc107;
	-webkit-animation: btn-warning-blink 1.6s ease 0s infinite normal;
	-webkit-animation-fill-mode:both;
}
@-webkit-keyframes btn-warning-blink {
	0% {background-color:#ffc107;color:#000000;}
	50% {background-color:#000000;color:#FFFFFF;}
	100% {background-color:#ffc107;color:#000000;}
}

.toast {
	font-size:20px;
	z-index:1000;
	min-width:400px;
	position: absolute;top:10px;right: 500px;
}

#help_modal{
	font-size: 20px;
}

#help_modal dl {
	margin: 8px 0;
}

.main_td.slot .btn.btn-info {
	transition: 0s ;
	transition-timing-function: linear;
}
.main_td.slot .btn.btn-info.to_cancel {
	transition: 2.3s ;
	background-color: black;
	color: black;
}

#datetime {
	font-size:16px;
}

.btn-refresh {
	font-size: 21px;
	top: -3px;
	position: relative;
}

.completed-noodle-order {
	background: silver;
	color: gray;
}

.container-fluid {
	padding: 0;
}

.container-fluid #order {
	padding: 6px 6px;
}

.noodle_firm.firm5{
	color: red;
	font-weight: bold;
}
.noodle_firm.firm4{
	color: darkred;
	font-weight: bold;
}
.noodle_firm.firm3{
	color: black;
}
.noodle_firm.firm2{
	color: darkblue;
}
.noodle_firm.firm1{
	color: blue;
}