html,body {
	height: 100%;
	overflow: hidden;
	background-color: #eee;
}
body {
	overflow-y: hidden;
	font-family: sans-serif;
}

body {
	display: flex;
	flex-direction: column;
}

footer {
	/*
	position: fixed;
	bottom: 0;
	left: 0;
	 */
	width: 100%;
	height: 60px;
	background-color: #F58E7E;
}
footer a i:before {
	font-size: 24px;
}
footer .active i:before, footer .active span {
	color : #336699;
}
footer ul {
	margin-top: 5px;
}
footer li {
	flex: 1;
	position: relative;
}
footer a span {
	font-size: 13px;
}
footer li .notification {
	position: absolute;
	top : 0;
	right: 10%;
}
header {
	/*
	position: fixed;
	top: 0;
	left: 0;

	 */
	width: 100%;
	height: 44px;
	background-color: #F58E7E;
}
header .left {
	position: fixed;
	top: 0;
	left: 0;
}
iframe {
	width: 100%;
	border: none;
}
header .right {
	position: fixed;
	top: 0;
	right: 0;
}
.max100 {
	max-width: 100%;
}
header .right a {
	text-decoration: none;
	color : white;
	padding-right: 10px;
	padding-left: 10px;
}
header .right i:before {
	color: white;
	font-size: 16px;
	line-height: 44px;
}
header .left a {
	display: block;
	width: 44px;
	height: 44px;
	text-align: center;
	float : left;
}
header a i {
}
header .left i:before {
	color: white;
	font-size: 40px;
	line-height: 44px;
}
header a i.zmdi-menu:before {
	font-size: 24px;
}
header a i.zmdi-refresh:before {
	font-size: 24px;
}
header .title {
	text-align: center;
	line-height: 44px;
	color :white;
}

footer ul {
	display: flex;
	flex-direction: row;
	flex-basis: auto;
	padding-left: 0;
}
footer ul li {
	flex-grow: 1;
	list-style: none;
}
footer ul li a {
	display: block;
	color : white;
	text-decoration: none;
	text-align: center;
}
main {
	padding-top: 10px;
	padding-bottom: 20px;
	overflow-y: scroll;
	flex: 1;
	height: auto;
}

.orders {
	background-color: white;
	width: 100%;
}
.orders th {
	background-color: #666;
	color:  white;
}
.orders td {
	border-bottom: 1px solid #ddd;
}
.text-right {
	text-align: right;
}
.messages {
	list-style: none;
	padding-left: 0;
	background-color: white;
}
.messages li {
	width: 100%;
	border-bottom: #eee 1px solid;
	display: flex;
	padding: 5px 8px;
	box-sizing: border-box;
}
.messages li:first-child {
	border-top: #eee 1px solid;
}
.messages li .time {
	font-size: x-small;
}
.messages li .name {
	color : #AE5D54;
	font-weight: bold;
}
.messages li .main {
	flex: 1;
	max-width: calc(100% - 80px);
}
.messages .notify-box {
	text-align: right;
	margin-top: 10px;
}
.messages .text {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.weekly {
	list-style: none;
	padding-left: 0;
	display: flex;
	background-color: white;
	padding: 5px;
	margin-bottom: 5px;
}
.weekly li  {
	flex-grow: 1;
}
.weekly li .date {
	font-size: 15px;
	font-weight: bold;
}
.shift li .date {
	font-size: 18px;
	font-weight: bold;
}
.weekly li .day, .shift li .day {
	font-size: 15px;
	text-align: center;
}
.weekly li .current {
	font-size: 7px;
	height: 15px;
}
.weekly li > div {
	text-align: center;
}
.shift {
	padding-left: 0;
}
.shift li .row {
	display: flex;
	padding-bottom: 7px;
	border-bottom: #eee 1px solid;
	margin-bottom: 7px;
}
.shift li .row:last-child {
	border-bottom: none;
	padding-bottom: 0;
}
.shift li:first-child {
	border-top: #eee 1px solid;
}
.shift li .row:last-child {
	margin-bottom: 0px;
}
.shift {
	background-color: #eee;
}
.shift select {
	background-color: #eef;
}
.shift li {
	display: flex;
	padding: 10px 8px;
	border-bottom: #eee 1px solid;
	margin : 7px 0px;
	background-color: white;
}
.shift select, .shift button {
	height: 30px;
}
.shift select {
	border : none;
}
span.strike {
	text-decoration: line-through;
	color : gray;
}
.f16 {
	font-size: 16px;
}
.f18 {
	font-size: 18px;
}
.bold {
	font-weight: bold;
}
.gray {
	color: gray;
}

.flex-1 {
	flex: 1;
}
.pl5 {
	padding-left: 5px;
}
.pr5 {
	padding-right: 5px;
}
.pr10 {
	padding-right: 10px;
}
.pr15 {
	padding-right: 15px;
}
.w100per {
	width: 100%;
}
.shift button {
	background-color: white;
	border: solid 1px #737373;
	color : #737373;
}
.day0 {
	color: red;
}
.day6 {
	color: blue;
}
main {
}
.controls {
	display: flex;
	justify-content: space-between;
}
.controls > div {
	width: 80px;
}
.controls div a {
	display: block;
	text-align: center;
	text-decoration: none;
	color : #000;
}
.controls button {
	border :none;
}
.w50p {
	width: 50px;
	min-width: 50px;
}
button.button--large--cta {
	width: 80%;
	margin: auto;
}
h2 {
	font-size: 15px;
	font-weight: normal;
	padding-left: 10px;
	margin-bottom: 5px;
}
.panel {
	background-color: white;
	padding: 8px;
}
.panel .mark {
	text-align: center;
}
.list select {
	border: none;
}
.list.today {
	margin-bottom: 20px;
}
.list.today .text-input {
	width: 100%;
}
.reserve .row {
	display: flex;
	justify-content: space-between;
	width: 100%;
	padding-top: 10px;
}
.reserve .row > * {
	flex-grow: 1;
	width: 100%;
	padding: 10px;
}
.reserve .row > * a {
	width: 100%;
	text-align: center;
}
.mb10 {
	margin-bottom: 10px;
}
.ml10 {
	margin-left: 10px;
}
p.warning {
	padding: 5px;
	color : #ec971f;
	font-weight: bold;
	font-size: small;
}
.text-center {
	text-align: center;
}
label.primary {
	color: #fff;
	background-color: #0d6efd;
	padding: 2px 8px;
}
label.warning {
	color: #fff;
	background-color: #ec971f;
	padding: 2px 8px;
}
p.danger {
	color: #fff;
	background-color: darkred;
	padding: 2px 8px;
}
label.cancel {
	color: #fff;
	background-color: #6c757d;
	padding: 2px 8px;
}
.error-text {
	font-size: small;
	color : red;
	display: none;
}
.hasError .error-text {
	display: block;
}
select.hasError {
	background-color: #ff9999;
}
.tabs {
	padding-left: 0;
	list-style: none;
	display: flex;
	justify-content: space-evenly;
	padding: 0 5px;
}
.tabs li {
	text-align: center;
	flex-grow: 1;
}
.w80per {
	width: 80%;
}

.tabs li a {
	text-decoration: none;
	color : black;
}
.tabs li.active {
	border-bottom: 2px solid #1E64CD;
	padding-bottom: 5px;
}
.tabs li.active a {
	color: #1E64CD;
}
.list a {
	text-decoration: none;
	display: block;
	color : black;
}
.min-button {
	background-color: white;
	border: solid 1px #737373;
	color: #737373;
}
.help-text {
	font-size: small;
	margin-top: 5px;
	color : darkgoldenrod;
}
.p5 {
	padding: 5px;
}
.info {
	border : solid 1px #337ab7;
}
.info .header {
	background-color: #337ab7;
	color : white;
	padding: 5px 10px;
}
.info .body {
	padding: 10px;
	background :white;
}
.text-input.white {
	background-color: white;
}
.text-input:invalid {
	background-color: #eef;
	border-bottom : solid 2px darkred;
}
.text-input:valid {
	background-color: #eef;
	border-bottom : solid 2px darkgreen;
}
.p10 {
	padding: 10px;
}
.margin-auto {
	margin: auto;
}
.p20 {
	padding: 20px;
}
.list a.button--large--cta {
	color : white;
}
.h30p, select {
	height: 30px;
}
.mt10 {
	margin-top: 10px !important;
}
label.orderProcess {
	color : black;
	font-weight: bold;
}
.info .mark {
	margin: 5px auto;
	background-color: #eee;
	text-align: center;
}
.info label {
	background-color: honeydew;
	display: block;
}
.orderProcess1 { background-color: #7afffa !important; }
.orderProcess2 { background-color: #00ff00 !important; }
.orderProcess3 { background-color: #ffff00 !important; }
.orderProcess4 { background-color: #ff0000 !important; }
.orderProcess5 { background-color: #666666 !important; }

@keyframes blink {
	55% { opacity: 0.0; }
}
@-webkit-keyframes blink {
	55% { opacity: 0.0; }
}
.blink {
	animation: blink 1s step-end infinite;
	-webkit-animation: blink 1s step-end infinite;
}
.hasError .error-text {
	width: 100%;
}
.mt0 {
	margin-top: 0 !important;
}
.mb0 {
	margin-bottom: 0 !important;
}
.mb20 {
	margin-bottom: 20px !important;
}
textarea {
	min-height: 100px;
}
label.option {
	display: inline-block;
	padding: 2px 8px;
	background-color: darkslateblue;
	color : white;
	margin-bottom: 4px;
}
form:invalid .submitButton {
	display: none !important;
}
form:valid .ngButton {
	display: none !important;
}
.day_0 {
	color :red;
}
.day_6{
	color : blue;
}
.alert {
	position: relative;
	padding: 0.75rem 1.25rem;
	margin-bottom: 1rem;
	border: 1px solid transparent;
	border-radius: 0.25rem;
	display: block;
}
.alert-warning {
	color: darkred;
	background-color: #fff3cd;
	border-color: #ffeeba;
}
.line-btn {
	background-color: #06c755;
	padding: 10px 30px;
	color: white;
	font-weight: bold;
	display: inline-block;
	margin: auto;
	margin-bottom: 30px;
	text-decoration: none;
}
.line-text {
	color : #06c755;
	font-weight: bold;
	font-size: larger;
	animation: blinkAnime 1s infinite alternate;
}
@keyframes blinkAnime{
	0% { color: #fff }
	100% { color: #06c755 }
}
.line-del {
	background-color: darkred;
	padding: 5px 30px;
	color : white;
	font-weight: bold;
	display: inline-block;
	margin: auto;
	margin-top: 0px;
	margin-bottom: 30px;
	text-decoration: none;
}
.line-notify-screen {
	max-width: 80%;
	display: block;
	margin: 10px auto;
}
.line-notify-banner {
	max-width: 100%;
	display: block;
	margin: 0px auto;
}
.line-text-off {
	color: darkgray;
}

.pt5 {
	padding-top: 5px;
}
.list-item__center.date-time{
	display: flex;
	gap :10px;
}

.list-item__center.date-time select, .list-item__center.date-time input {
	padding: 0 10px;
}