/* || Theme ----------------------------*/
:root {
	--background: #e9eaeb;
	--translucent: #ffffff75;
	/* Reds */
	--red: #862633;
	--lightRed: #b65d69;
	--darkRed: #611b24;
	/* Greens */
	--green: #268648;
	--mediumGreen: #59BA68;
	--lightGreen: #ACE1B5;
	--darkGreen: #268648;
	--extraDarkGreen: #126c32;
	/* Greys */
	--grey: #545859;
	--lightGrey: #d9d9d9;
	--mediumGrey: #A8A8A8;
	--mediumGreyLight: #a8a8a8cc;
	--darkGrey: #525252;
	/* Misc */
	--black: #000;
	--yellow: #EFD700;
	--orange: #EF9E00;
	--blue: #266386;
	--navy: #9EADC9;	
	--error: #98002E;
	/* Sizing breakpoints */
	--dashboard-max-width: 1100px;
	--content-max-width: 1500px;
	/* Utilities */
	--font-family: 'Roboto', sans-serif;
	--border: 1px solid var(--lightGrey);
	--text-shadow: #00000059;
}

/* || Animations ----------------------------*/

@keyframes ring-bell {
	0%, 10% {
		opacity: .8;
		transform: rotate(0deg);
	}
	1%, 11% {
		opacity: 1;
		transform: rotate(20deg);
	}
	3%, 13% {
		opacity: 1;
		transform: rotate(-20deg);
	}
	5%, 15% {
		opacity: 1;
		transform: rotate(20deg);
	}
	6%, 16% {
		opacity: .8;
		transform: rotate(0deg);
	}
}

@keyframes pulse {
	100% {
		opacity: 1;
	}
	50% {
		opacity: .3;
	}
}

@keyframes spinner-grow {
	100% {
		transform: scale(1);
	}
	50% {
		transform: scale(.7);
	}
}

@keyframes wiggle {
	0% { transform: rotate(0deg); }
	25% { transform: rotate(-1deg); }
	50% { transform: rotate(0deg); }
	75% { transform: rotate(1deg); }
	100% { transform: rotate(0deg); }
}

@keyframes shake {
	10%, 90% {
		transform: translate3d(-2px, 0, 0);
	}

	20%, 80% {
		transform: translate3d(2px, 0, 0);
	}

	30%, 50%, 70% {
		transform: translate3d(-4px, 0, 0);
	}

	40%, 60% {
		transform: translate3d(4px, 0, 0);
	}
}

@keyframes delayShake {
	0%, 9% {
		transform: translate3d(-2px, 0, 0);
	}

	1%, 7% {
		transform: translate3d(2px, 0, 0);
	}

	2%, 4%, 6% {
		transform: translate3d(-4px, 0, 0);
	}

	3%, 5% {
		transform: translate3d(4px, 0, 0);
	}
}

/* || Forms ----------------------------*/

.form-row {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	margin-right: -15px;
}

.form-col {
	display: flex;
	flex-flow: column;
	justify-content: center;
	margin-right: -15px;
}

.form-col-wrapper {
	display: flex;
}

.form-col-wrapper > .form-col {
	flex-grow: 1;
	max-width: 50%;
}

.form-col-wrapper > .form-col:not(:last-child) {
	margin-right: 1em;
}

.form-item {
	flex-grow: 1;
	display: flex;
	flex-flow: column;
	margin: 0 15px 15px 0;
}

.form-item.form-col {
	margin: 0;
}

/* Makes entire div wrap when too small*/
.form-item-reflow {
	display: flex;
	flex-flow: row wrap;
	flex-grow: 1;
}

.form-item {
	flex-grow: 1;
}

.form-item.sm {
	max-width: 70px;
}

.form-item.md {
	max-width: 150px;
}

.form-item.lg {
	min-width: 270px;
}

.form-item.in-line {
	flex-flow: row wrap;
	align-items: center;
}

.form-item.in-line > *:first-of-type {
	margin-right: 5px;
}

.form-item label {
	margin: 0 0 2px 5px;
}

.form-item .radio-wrapper label {
	margin-left: 10px;
}

.form-item input,
.form-item select {
	height: 35px;
	padding: 0 7px;
	color: var(--darkGrey);
	border: var(--border);
}

.form-item select {
	padding-right: 30px;
	-webkit-appearance: none;
	-moz-appearance: none;
	background: #fff url('data:image/svg+xml;utf-8,<svg fill="lightgrey" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') no-repeat top 5px right 3px;
}

.form-item.grouped {
	display: flex;
	flex-flow: row nowrap;
	align-items: end;
}

.form-item.hide-label label {
	display: none;
}

.form-item.append {
	flex-flow: row wrap;
	align-items: stretch;
}

.form-item.append label {
	width: 100%;
}

/* Toggle switch */
input.toggle {
	-webkit-appearance: none;
	-webkit-tap-highlight-color: transparent;
	position: relative;
	border: 0;
	outline: 0;
	cursor: pointer;
	margin: 10px;
}

input.toggle[disabled=disabled]{
	cursor: not-allowed;
	opacity: .6;
}

input.toggle:after {
	content: '';
	width: 50px;
	height: 28px;
	display: inline-block;
	background: rgba(196, 195, 195, 0.55);
	border-radius: 18px;
	clear: both;
	transition: .3s ease-in-out;
}

input.toggle:before {
	content: '';
	width: 22px;
	height: 22px;
	display: block;
	position: absolute;
	left: 3px;
	top: 3px;
	border-radius: 50%;
	background: rgb(255, 255, 255);
	transition: .3s ease-in-out;
}

input.toggle:checked:before {
	left: 25px;
	transition: .3s ease-in-out;
}

input.toggle:checked:after {
	background: var(--red);
	transition: .3s ease-in-out;
}


/* || Chosen ----------------------- */

.chosen-container .chosen-single {
	align-items: center;
	background: #fff;
	border: var(--border);
	border-radius: 0;
	box-shadow: none;
	color: var(--darkGrey);
	display: inline-flex;
	font-size: 1.2em;
	height: 36px;
	width: 100%;
}

.chosen-container-single .chosen-single div {
	top: 6px;
}