body, html {
	height: 100%;
	line-height: 1.8;
/*	font-family: 'Roboto', sans-serif;*/
	z-index: -1;
}

.w3-bar .w3-button {
	padding: 16px;
}

.secondary-fixed-menu {
	position: fixed;
	top: 114px;
	width: calc(100% - 32px);
	background-color: #eeeeee;
	border: 0;
	height: 75px;
}

.secondary-fixed-menu-nav-buttons-container {
	float: left;
	padding: 0;
	margin: 0;
	width: 100%;
}

/* 3 columns */

.secondary-fixed-menu-left-nav-button-3-cols {
	float: left;
	padding: 0;
	margin: 0;
	width: 33.333%;
	text-align: left
}

.secondary-fixed-menu-title-3-cols {
	float: left;
	padding: 0;
	margin: 0;
	width: 33.333%;
	text-align: center;
	margin-top: 5px;
}

.secondary-fixed-menu-right-nav-button-3-cols {
	float: left;
	padding: 0;
	margin: 0;
	width: 33.333%;
	text-align: right
}

.secondary-fixed-menu-right-nav-button-4-cols {
	float: left;
	padding: 0;
	margin: 0;
	width: 25%;
	text-align: right
}

/* Third fixed menu */
.success-banner {
	position: fixed;
	top: 176px;
	width: calc(100% - 32px);
	background-color: #77dd77;
	border: 0;
}

/* Third fixed menu */
.error-banner {
	position: fixed;
	top: 170px;
	width: calc(100% - 32px);
	background-color: #ff5555;
	border: 0;
}

.secondary-content-wrapper {
	padding-top: 200px;
}

.secondary-content-wrapper-settings {
	padding-top: 100px;
}

.secondary-content-wrapper-track {
	padding-top: 78px;
}

.settings-tooltip {
	position: relative;
	display: inline-block;
}

.settings-tooltip .settings-tooltiptext {
	visibility: hidden;
	width: 200px;
	background-color: black;
	color: #fff;
	text-align: center;
	border-radius: 6px;
	padding: 0px 0;
	position: absolute;
	z-index: 1;
	top: -10px;
	left: 110%;
}

.settings-tooltip .settings-tooltiptext::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 100%;
	margin-top: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: transparent black transparent transparent;
}

.settings-tooltip:hover .settings-tooltiptext {
	visibility: visible;
}

.tabbed-container-settings {
/*	padding-top: 75px;*/
	padding-top: 5px;
	width: 100%;
	height: 100%;
}

.collected {
	background-image: url("/images/collected.svg");
   	background-repeat:no-repeat;
	background-size:contain;
	width: 38px;
	height: 37px;
	margin: 0;
	padding: 0;
}

/* Popup Calendar */
.flatpickr-day {
	border-radius: 0;
	max-width: 40px;
}

/* Full-screen Calendar */
.fc-event-title-container,
.fc-daygrid-event {
	border-radius: 0px !important;
}

.modal-dialog-form {
	text-align: left;
	margin: 0px;
	padding: 0px;
	border-spacing: 0px;
}

.modal-dialog-form tr td {
	text-align: left;
	margin: 0px;
	padding: 0px;
}

.modal-dialog-form label {
	text-align: left;
	margin: 0px;
	padding-left: 0px;
	width: 100%;
}

.modal-dialog-form input {
	display: block;
	text-align: left;
	padding: 10px;
	width: 100%;/*150px;*/
	height: 42px;
	border: 1px solid #767676;
}

.modal-dialog-form select {
	padding: 10px;
	width: 100%;/*150px;*/
	height: 42px;
	border: 1px solid #767676;
}

.jBox-content {
	max-width: 100% !important;
}

.jBox-Confirm-button {
	background: #F7901E !important;
}
.jBox-Confirm-button-cancel {
	background: #DDDDDD !important;
}

.flatpickr-day.selected {
	background: rgba(247,144,30,0.95) !important;
	border-color:  rgba(247,144,30,0.95) !important;
	cursor: pointer;
}

.error {
	font-size: 12px;
	color: RED;
}

#request_delivery_date {
/*	border: 0;*/
/*	padding: 3px 10px;*/
}

select#available_delivery_times {
}

.option-white {
	background-color: #FFFFFF;
}

.option-amber {
	background-color: #FFBF00;
}

.option-green {
	background-color: #238823;
}

.option-red {
	background-color: #D2222D;
}

.option-blue {
	background-color: #3788D8;
}

.tooltip-amber {
	background-color: #FFBF00;
	color: #FFFFFF;
}

.tooltip-green {
	background-color: #238823;
	color: #FFFFFF;
}

.tooltip-red {
	background-color: #D2222D;
	color: #FFFFFF;
}

.tooltip-blue {
	background-color: #3788D8;
	color: #FFFFFF;
}

/* One button JBox */
.one-button-jBox .jBox-Confirm-button-cancel {
	display: none;
}
.one-button-jBox .jBox-Confirm-button-submit {
	width: 100%;
}

.loading-bar {
	background-image: linear-gradient(-45deg,
	rgba(0, 0, 0, 0.1) 25%,
	rgba(0, 0, 0, 0) 25%,
	rgba(0, 0, 0, 0) 50%,
	rgba(0, 0, 0, 0.1) 50%,
	rgba(0, 0, 0, 0.1) 75%,
	rgba(0, 0, 0, 0) 75%,
	rgba(0, 0, 0, 0)) !important;
	background-size: 32px 32px !important;
	background-repeat: repeat !important;
	transition: background-position 60000s linear !important;
	background-position: 4000000px !important;
}

.jBox-Confirm-button.button-disabled {
	background: #ddd;
	color: #bbb;
}