@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

.noselect {
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Old versions of Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
	-webkit-touch-callout: none; /* Disable Android and iOS callouts*/
}

html, body {
	font-family: Helvetica, Arial, sans-serif;
	background: white;
}

/* This seems to no longer be needed, Chrome does it automatically and this double does it */
/*@media only screen and (max-device-width: 480px) 
{
	body {
		text-size-adjust: 250%;
		-webkit-text-size-adjust: 250%;
		-moz-text-size-adjust: 250%;
		-ms-text-size-adjust: 250%;
	}
}*/

h1 
{
	font-size: 35px;
	color: #365e91;
	padding-top: 40px;
	padding-left: 5px;
}

hr 
{
	border: 1px solid grey;
	margin: 21px 0px 10px 0px;
	padding: 0px;
}

h2 {
	font-weight: normal;
	font-size: 25px;
	color: #365e91;
	padding: 0px 5px 21px 5px;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

h2.checked 
{
	color: lightsteelblue;
	text-decoration: line-through;
	padding: 0px 5px 0px 5px;
}

.list-container 
{
	margin: 40px 0px 0px 0px;
}

p {
	font-size: 18px;
	padding: 0px;
	margin: 0px 0px 0px 0px;
	border: 1px solid transparent;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

.list-padding {
	padding: 19px 24px 19px 24px;
	border: 0px;
	margin: 0px;
}

.default-cursor{
	cursor: default;
}

.clean-button
{
	border: none;
	background: none;
	padding: 0px;
	padding: 0px;
}

div.edit-item-container {
	display: inline-block;
	padding: 0px;
	margin: 19px 24px 16px 24px;
	border: 1px solid dimgrey;
}

input.edit-item {
	font-size: 18px;
	border: none;
	padding: 0;
	margin: 0;
}


div.superstore h2 {
	padding: 10px 5px 5px 5px;
}

div.superstore p
{
	padding: 0px 25px 0px 25px;
	padding: 0px 25px 0px 25px;
}

p.checked 
{
	color: darkgrey;
	text-decoration: line-through;
}

.failed {
	color: crimson;
}

.skipped {
	color: dimgrey;
}

div.hidden 
{
	display: none;
}

input.add-item
{
	border: 0px;
}

textarea:focus, input:focus {
	outline: none;
}

button.add-item-button
{
	border: 0px;
	background: white;
	font-size: 18px;
	font-weight: bolder;
	color: #365e91;
}

form.add-item
{
}

.top {
	top: 0px;
	width: 100vw;
	background: white;
	height: 50px;
	line-height: 50px;
	position: fixed;
}

.top2{
	/*line-height: 50px;*/
	height: 50px;
}

.hamburger {
	background: none;
	position: absolute;
	top: 0;
	right: 10px;
	line-height: 45px;
	padding: 12px 15px 0px 15px;
	color: ##ecf0f1;
	border: 0;
	font-size: 1.4em;
	font-weight: bold;
	cursor: pointer;
	outline: none;
	/* z-index: 10000000000000; */
}

.selectable-list-item
{
	cursor: pointer;
	width: 100%;
}

.selectable-list-item:hover
{
	background-color: whitesmoke;
}

.loader {
	border: 5px solid #f3f3f3; /* Light grey */
	border-top: 4px solid #365e91; /* Blue */
	border-radius: 50%;
	width: 10px;
	height: 10px;
	animation: spin 2s linear infinite;
	display: inline-block;
	margin-right: 5px;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.modal-buttons {
	padding-top: 40px;
}

.scrollable-modal-content {
	max-height: 70vh;
	overflow-y: auto;
}
/* overrides from default site */

.nav-link {
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
	color: black;
	background-color: whitesmoke;
	border-width: 1px;
	border-style: solid;
	border-color: whitesmoke;
}

.nav-link.active
{
	border-color: lightgrey;
}

.approval-align{
	vertical-align: middle;
}

.circle {
	display: inline-block;
	border-radius: 50%;
	width: 25px;
	height: 25px;
	padding: 2px;
	margin: 0px 2px 0px 2px;
	border: 0px;
	text-align: center;
	color: white;
}

.background-green {
	background: green;
}

.background-red {
	background: red;
}

.right-gap-5 {
	margin-right: 5px;
}

.left-gap-2 {
	margin-left: 2px;
}

/* Hide the reconnect UI.  We just want to show nothing.  We try to reload silently, and if that fails it'll reconnect when the user clicks */
.components-reconnect-show, .components-reconnect-failed, .components-reconnect-rejected, .components-reconnect-hide {
	display: none;
}


@media print {
	.no-print, .no-print * {
		display: none !important;
	}

	h2 
	{
		font-weight: normal;
		font-size: 12pt;
		color: #365e91;
		padding: 0px 5px 10px 5px;
	}

	p 
	{
		font-size: 10pt;
		padding: 0px 25px 10px 25px;
	}			

	hr 
	{
		border: 1px solid grey;
		margin: 10px 0px 10px 0px;
		padding: 0px;
	}

	div.hidden 
	{
		display: inherit;
	}
}