body{
	background-color: #3a3837;
	color:#3a3837;
	font-family: 'Open Sans', sans-serif, helvetica, verdana;
	line-height:110%;
}
select {
	font-family: inherit;
	font-weight: 600;
	color: inherit;
}

.progress-bar,
.progress-bar-with-buttons {
	/* default color for all progress bars */
	color: #ff8948;
}

.small-gradient-button,
.gradient-button,
.header-button {
	color: #6e6e6e;
	text-shadow: 0px 1px #ededed;
	text-align: center;
	text-transform: uppercase;
	font-size: 15px;
	font-weight: 600;
	padding: 8px 10px;
	border-radius: 3px;

	cursor: pointer;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;

	border: 1px solid #6e6e6e;

	background: #fafafa;
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#cacaca',GradientType=0 ); /* IE6-9 */
	background: -ms-linear-gradient(top, #fafafa 0%, #cacaca 100%); /* IE10+ */
	background: -moz-linear-gradient(top, #fafafa 0%, #cacaca 100%); /* FF3.6+ */
	background: -webkit-linear-gradient(top, #fafafa 0%, #cacaca 100%); /* Chrome10+, Safari5.1+ */
	background: -o-linear-gradient(top, #fafafa 0%, #cacaca 100%); /* Opera 11.10+ */
	background: linear-gradient(top, #fafafa 0%, #cacaca 100%); /* W3C */

	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.small-gradient-button,
.header-button {
	padding: 4px 8px;
	font-size: 12px;
}

.header-button-outline {
	font-size: 11pt;
	border-radius: 20px;
	padding: 5px 10px;
	cursor: pointer;
	transition: background-color 0.2s;
	border: 1px solid #FFF;
	color: #FFF;
	margin-left: 5px;
	text-align: center;
}

body.pepsi .header-button-outline {
	background-color: #004b93;
}

.header-button-outline:hover {
	transition: background-color 0.2s;
	background-color: #FFF;
	color: #c5633a;
}

body.pepsi .header-button-outline:hover {
	color: #004B93;
	border: 1px solid #004B93;
	background-color: white;
	transition: background-color 0.2s;
}

.header-button-outline.disabled:hover,
.header-button-outline.disabled {
	opacity: .5;
	cursor: not-allowed;
	background-color: unset;
	color: #fff;
}

body.pepsi .header-button-outline.disabled:hover,
body.pepsi .header-button-outline.disabled{
	color: #004B93;
	opacity: 40%;
	border-color: unset;
	background-color: white;
}

.hidden-input {
	visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
}

/* clearly-defined sections in the content area of a page */

.page-section {
	background-color: white;
	box-shadow: 0 0 3px 0 #6e6e6e;
}
.page-section-header {
	background-color: #6e6e6e;
	height: 40px;
	width: 100%;
}

body.pepsi .page-section-header {
	background-color: #004B93;
}

.page-section-header-label {
	position: absolute;
	top: 11px;
	left: 15px;

	color: white;
	font-size: 16px;
	font-weight: 600;
}
.page-section-content {
	position: absolute;
	top: 40px; /* same as height of page-section-header */
	bottom: 0;

	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
	padding: 10px;

	overflow-x: hidden;
	overflow-y: auto;
}
/* TODO: move to a new tutorial.css? */
#tutorial-action-text {
	font-style: italic;
	padding-top: 10px;
	color: rgb(255, 137, 72);
}

#tutorial-title-count {
	position: absolute;
	right: 37px;
}

#tutorial-end-button {
	cursor: pointer;
	position: absolute;
	right: 4px;
	height: 20px;
	top: 5px;
	border-radius: 20px;
	width: 20px;
	font-size: 16px;
	border: 1px solid #BBB;
	color: #BBB;
	display: block;
	text-align: center;
}

#tutorial-end-button:hover {
	color: #FFF;
	background: #333;
	border: 1px solid #333;
}

#tutorial-next {
	position: absolute;
	right: 98px;
	cursor: pointer;
	text-decoration: underline;
}

#tutorial-next-disabled {
	color: #777;
	position: absolute;
	right: 98px;
}

#tutorial-previous {
	position: absolute;
	right: 135px;
	cursor: pointer;
	text-decoration: underline;
}

#tutorial-previous-disabled {
	color: #777;
	position: absolute;
	right: 135px;
}

.qtip {
	transition: all .5s ease-in;
}

#blackoutScrim {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(0,0,0,0.85);
	z-index: 2147483647;
	color: #ffffff !important;
	font-size: 80px;
	font-size: max(10vh, 40px);
	display: flex;
	align-items: center;
	justify-content: center;
}

.pause-icon {
	margin-right: 0.25em;
}

.pause-icon > span {
	display: inline-block;
	height: 0.75em;
	width: 0.25em;
	border-radius: 0.25em;
	background-color: #ffffff;
}

/* overrides*/
#toast-container div.toast-info{
	background-color: #76b5c5 !important;
}

#dialog-box .dialog-message{
	word-wrap: break-word;
	overflow-wrap: break-word;
}