/*Style CSS*/
body {
	margin: 0px;
	/*font-family: 'Roboto', sans-serif;*/
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	background: #f8f8f9;
	/*background: #f1f4f5;*/
	min-height: 100%;
	text-rendering: optimizeLegibility;
}

.body_empty {
	padding: 0;
}

html {
	height: 100%;
	-webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}

.clearfix {
	overflow: auto;
}

.clearfix::after {
	content: "";
	clear: both;
	display: table;
}

* {
	box-sizing: border-box;
}

*:focus {
	outline: none;
}

.stop-scrolling {
  height: 100%;
  overflow: hidden;
}

.disabled {
	opacity: 0.70;
	pointer-events: none;
	transition: all 200ms ease-out;
}

:active, :focus, :visited {
	outline: 0!important;
}

textarea,
input,
input[type="text"],
input[type="button"],
input[type="submit"] {
	-webkit-appearance: none;
	border-radius: 0;
}

a:link, a:visited, a:hover, a:active {
	text-decoration: none;
	color: #1792df;
}

a:hover {
	text-decoration: underline;
}

a[href^="tel:"] {
	color: inherit;
	text-decoration: none;
}

a[href^="tel:"]:hover {
	text-decoration: underline;
	color: #1792df;
}

a[href^="mailto:"] {
	color: inherit;
	text-decoration: none;
}

a[href^="mailto:"]:hover {
	text-decoration: underline;
	color: #1792df;
}


/* Click outside to hide Modals/Popovers Events Vars */
.action_touch_close {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0);
	z-index: 1000;
}


/* Header */
/*header {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: calc(60px + env(safe-area-inset-top));
	background: #dc4433;
	color: #fff;
	z-index: 500;
	padding-top: calc(1px + env(safe-area-inset-top));
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition: all 200ms;
}*/

header {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: calc(60px + env(safe-area-inset-top));
	background: rgba(255, 255, 255, 0.85);
	color: #000;
	z-index: 1000;
	padding-top: calc(1px + env(safe-area-inset-top));
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition: all 200ms;
}

header.loggedout {
	display: block;
}

.header_shadow {
	-webkit-box-shadow: 0px 3px 8px 0px rgba(0,0,0,0);
	-moz-box-shadow: 0px 3px 8px 0px rgba(0,0,0,0);
	box-shadow: 0px 3px 8px 0px rgba(0,0,0,0);
}

.header_inner {
	position: relative;
	display: flex;
	flex-direction: row;
	width: 100%;
	max-width: 1100px;
	height: 100%;
	/*padding: 0 18px;*/
	padding: 0 20px;
	margin: auto auto;
}

.header_left {
	flex: 1 44px;
	text-align: left;
}

.header_center {
	flex: 1 100%;
	/*text-align: center;*/
}

.header_center img {
	width: auto;
  	height: 40px;
  	margin: 3px 0 0 0;
  	z-index: -1px;
}

.header_right {
	/*flex: 1 90px;*/
	/*flex: 1 44px;*/
	flex: 1 44px;
	text-align: right;
}

.header_actions {
	position: absolute;
	width: auto;
	height: 44px;
	right: 56px;
	top: 0;
	margin: 6px 0 0 0;
	text-align: right;
}

.header_notification {
	width: 44px;
	height: 47px;
	float: right;
}

.header_notification:hover {
	cursor: pointer;
	opacity: 0.70;
}

.header_notification img {
	width: 26px;
	height: auto;
	margin: 11px 0 0 0;
}

.header_spacer {
	display: block;
	width: 100%;
	height: 100px;
}

.header_spacer.loggedin {
	height: 50px;
}


/* Menu Icon */
.header_menu {
	position: relative;
	display: block;
	float: left;
	width: 42px;
	height: 42px;
	background: transparent;
	margin: 2px 0 0 0;
	padding: 0 14px 0 10px;
	transition: all 200ms;
}

.header_menu.show {
	display: block;
}

.header_menu > .menu_top {
	display: block;
	position: absolute;
	top: 12px;
	left: 0px;
	width: 29px;
	height: 3px;
	border-radius: 4px;
	background: #000;
}

.header_menu > .menu_center {
	display: block;
	position: absolute;
	top: 20px;
	left: 0px;
	width: 16px;
	height: 3px;
	border-radius: 4px;
	background: #000;
}

.header_menu > .menu_bottom {
	display: block;
	position: absolute;
	top: 28px;
	left: 0px;
	width: 22px;
	height: 3px;
	border-radius: 4px;
	background: #000;
}

.header_menu > .menu_label {
	display: block;
	float: left;
	padding-right: 40px;
	color: #fff;
	font-size: 14px;
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: .2em;
	font-weight: 500;
	line-height: 44px;
}

.header_menu:hover {
	cursor: pointer;
	opacity: 0.60;
}

.header_menu:hover .menu_top, .header_menu:hover .menu_center, .header_menu:hover .menu_bottom {
	background: #444;
}

.header_menu:hover .menu_label {
	color: #fff;
}

/* Footer */
footer {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 1rem 0;
	background-color: #f9f9f9;
	color: #555;
	text-align: center;
	font-size: 14px;
	font-weight: 300;
	letter-spacing: 0.10em;
}

/* Side Bar */
.side_bar {
	display: block;
	position: fixed;
	height: 100%;
	width: 90px;
	/*background: rgba(183,67,63,0.90);*/
	background: #dc4433;
	z-index: 1500;
	top: 0;
	left: 0;
	font-family: 'Roboto', sans-serif;
	color: #fff;
	text-align: center;
	user-select: none;
	-webkit-user-select: none;
}

.side_bar > .item_title {
	width: 90px;
	height: 90px;
	background-image: url('../images/ai_logo_small.png');
	background-size: 90px 90px;
	transition: all 200ms;
}

.side_bar > .item_title:hover {
	cursor: pointer;
	background-color: rgba(0, 0, 0, 0.30);
}

.side_bar > .item {
	width: 70px;
	height: 70px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	transition: all 200ms;
	margin: 0 0 5px 10px;
	border-radius: 3px;
}

.side_bar > .item:hover {
	cursor: pointer;
	background: rgba(0, 0, 0, 0.30);
}

.side_bar > .item img {
	display: block;
	width: 32px;
	height: 32px;
}

.side_bar > .item > .title {
	display: block;
	font-size: 12px;
	width: 100%;
	padding: 6px 0 0 0;
	opacity: 0.80;
}

.item.current {
	background-color: rgba(0, 0, 0, 0.80);
}

.sidebar_bottom {
	display: block;
	position: absolute;
	bottom: 0;
	width: 100%;
}

.sidebar_bottom > .item {
	width: 90px;
	height: 90px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	transition: all 200ms;
}

.sidebar_bottom > .item.small {
	width: 70px;
	height: 70px;
	margin: 0 0 5px 10px;
	border-radius: 3px;
}

.sidebar_bottom > .item:hover {
	cursor: pointer;
	background: rgba(0, 0, 0, 0.30);
}

.sidebar_bottom > .item img {
	display: block;
	width: 32px;
	height: 32px;
}

.user_circle {
	background: rgba(0, 0, 0, 0.60);
	color: #fff;
	text-transform: uppercase;
	font-size: 30px;
	font-weight: 600;
	line-height: 50px;
	width: 50px;
	height: 50px;
	border-radius: 25px;
}

.alert_count {
	position: absolute;
	width: 24px;
	height: 24px;
	background: #000;
	color: #fff;
	font-size: 14px;
	line-height: 24px;
	border-radius: 12px;
	margin: -10px 0 0 14px;
}

.alert_count.header {
	width: 17px;
	height: 17px;
	background: #dc4433;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	text-align: center;
	font-size: 10px;
	line-height: 17px;
	margin: 4px 0 0 14px;
}

/*Logo*/
.logo {
	position: relative;
	display: block;
	height: 100%;
}

.logo img {
	width: auto;
	height: 28px;
	margin: 10px 0 0 0;
}

.logo.center {
	width: 100%;
	text-align: center;
}

/*Views*/
.container_outer {
	width: calc(100% - 90px);
	height: 100%; /*Fix for Safari*/
	margin-left: 90px;
}

.container {
	display: block;
	width: calc(100% - 90px);
	max-width: 1100px;
	height: auto;
	margin: 0 auto 0 auto;
	box-sizing: border-box;
	padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.container.full {
	width: calc(100%);
	max-width: 100%;
	padding: 0;
	margin-top: 0;
}

.container > .inner {
	position: relative;
	background: #ccc;
	width: 100%;
	float: left;
	margin: 50px 0 0 0;
}

.container > .inner.top {
	margin: 50px 0 0 0;
}

.container.narrow {
	max-width: 800px;
}

.container.single_column {
	max-width: 420px;
}

.content {
	width: 100%;
	max-width: 1140px;
	margin: 25px auto 25px auto;
	padding: 0 20px;
}

.content_inner {
	width: calc(100% - 44px);
	margin: 24px 24px 24px 24px;
	padding: 20px;
	background: #fff;
	border-radius: 6px;
}

.content_full {
	position: relative;
	width: 100%;
	height: 100%;
	overflow-x: hidden;
}

.content_full_center {
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
}

.content_normal_left {
	position: absolute;
	width: 350px;
	height: 100%;
	float: left;
}

.content_normal_right {
	margin-left: 400px;
}

.content_header_box {
	display: block;
	background: #f0f0f0;
	width: 100%;
	height: calc(100vh - 160px);
	position: relative;
	margin: 0 0 0 0;
}

.spacer_100 {
	display: block;
	width: 100%;
	height: 100px;
}

/* Settings Saving & Loading Overlay */
.overlay_saving {
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.25);
	z-index: 2000;
	overflow: hidden;
}

.overlay_saving {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.25);
	z-index: 2000;
	overflow: hidden;
}

.overlay_saving_content {
	width: 100%;
	max-width: 140px;
	margin-left: -70px;
	min-height: 100px;
	background: transparent; 
	opacity: 1;
	position: absolute;
	top: 50%;
	left: 50%;
	font-family: 'Open Sans', sans-serif;
	text-align: center;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: rgba(0, 0, 0, 0.70);
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	z-index: 100;
}

.overlay_loading {
	/*display: none;*/
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(255, 255, 255, 0.95);
	/*background: #f9f9f9;*/
	z-index: 1250;
	overflow: hidden;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

/* headlines & paragraphs */
h1 {
	display: block;
	color: rgb(21, 23, 24);
	font-size: 60px;
	font-weight: 700;
	line-height: 72px;
	text-rendering: auto;
	text-size-adjust: 100%;
	margin: 0;
	padding: 0;
}

h1 span {
	display: block; /*change to inline for responsive*/
}

h1.fixed {
	position: -webkit-sticky;
	position: sticky;
	top: 170px;
	margin-left: -4px;
}

h1.center {
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 900;
}

h2 {
	color: #000;
	font-weight: 900;
	font-size: 56px;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}

.sub_header {
	padding: 0;
	margin: 8px 0 0 0;
	text-align: center;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-weight: 300;
	font-size: 28px;
	color: #923f3a;
}

.sub_header_thin {
	color: #923f3a;
	padding: 0;
	margin: 0 0 -5px 0;
	text-align: center;
	text-transform: uppercase;
	font-weight: 300;
	font-size: 22px;
}

.header_title {
	/*line-height: 60px;*/
	color: #401615;
	font-weight: 700;
	font-size: 20px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin: 0 0 30px 0;
}

.header_title span {
	font-weight: 300;
}

p {
	color: rgb(21, 23, 24);
	font-size: 18px;
	font-weight: 300;
	line-height: 1.8;
	letter-spacing: 0.05em;
	margin: 0 0 38px 0;
}

p.last {
	margin: 0;
}

p > .title_big {

}

p span {
	display: block;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	margin: 0 0 20px 0;
}

p.indent {
	margin-left: 20px;
}

.empty_spacer {
	display: none;
	width: 100%;
	height: 0;
}

.section_spacer_30 {
	display: block;
	width: 100%;
	height: 30px;
}




/* Tab Bar Header */
.tab_header {
	position: fixed;
	width: calc(100% - 90px);
	height: auto;
	background: rgba(255, 255, 255, 0.85);
	/*border-bottom: 1px solid #f9f9f9;*/
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	padding: 0;
	z-index: 1000;
}

.tab_header_spacer {
	display: block;
	width: 100%;
	height: 140px;
	background: #fff;
	z-index: 1
}

.tab_header_inner {
	display: block;
	position: relative;
	width: 100%;
	max-width: 1140px;
	height: 140px;
	margin: auto auto;
	/*padding: 0 20px;*/
}

.tab_header_top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
  	justify-content: center;
  	width: 100%;
  	height: 100px;
  	padding: 0 20px;
}

.tab_header_top_left {
	flex: 1 1 50%;
}

.tab_header_top_right {
	flex: 1 1 50%;
	text-align: right;
}

.tab_header_bottom {
	display: block;
  	width: 100%;
  	height: 40px;
}

.tab_title {
	color: #401615;
	font-family: 'Open Sans', sans-serif;
	font-weight: 700;
	font-size: 30px;
	text-transform: uppercase;
	margin-left: -1px;
}

.tabs {
	position: relative;
	/*padding: 0;*/
	padding: 0 20px;/* - For responsive*/
	user-select: none;
	-webkit-user-select: none;
	font-family: 'Open Sans', sans-serif;
	white-space: nowrap;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: -ms-autohiding-scrollbar;
}

.tabs::-webkit-scrollbar {
	display: none;
}

.tabs > .tabs_button {
	display: inline-block;
	padding: 0 0px 15px 0px;
	margin: 0px 14px 0 0;
	color: #6a6f7a;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	transition: all 100ms ease;
}

.tabs > .tabs_button.last {
	margin-right: 0;
}

.tabs > .tabs_button:hover {
	cursor: pointer;
	border-bottom: 3px solid #aaa;
}

.tabs > .tabs_button.active {
	border-bottom: 3px solid #923f3a;
	color: #000;
	font-weight: 700;
}


/* Forms */
.input_container {
	width: 480px;
	margin: auto auto;
}

.empty_button {
	width: 100%;
	padding: 15px 0;
	margin: 8px 0;
	background: #fff;
	border: 1px solid #c83739;
	color: #c83739;
	font-size: 18px;
	line-height: 20px;
	font-weight: 400;
	letter-spacing: 0.05em;
	transition: all 200ms;
}

.empty_button:hover {
	cursor: pointer;
	opacity: 1;
	font-size: 20px;
	-webkit-box-shadow: 0px 15px 30px -13px rgba(209,49,41,0.50);
	-moz-box-shadow: 0px 15px 30px -13px rgba(209,49,41,0.50);
	box-shadow: 0px 15px 30px -13px rgba(209,49,41,0.50);
}

.no_account_messsage {
	color: #555;
	padding: 10px 0;
	font-weight: 300;
}

.no_account_messsage a {
	font-weight: 500;
	color: #c83739;
}

.center_line_split {
	overflow: hidden;
	text-align: center;
	width: 100%;
	font-size: 14px;
	font-weight: 600;
	color: #000;
	margin-top: 15px;
	margin-bottom: 25px;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	opacity: 0.70;
	text-transform: uppercase;
}

.center_line_split:before,
.center_line_split:after {
	background-color: #000;
	content: "";
	display: inline-block;
	height: 1px;
	position: relative;
	vertical-align: middle;
	width: 50%;
	margin-top: -2px;
	opacity: 0.30;
}

.center_line_split:before {
	right: 0.5em;
	margin-left: -50%;
}

.center_line_split:after {
	left: 0.5em;
	margin-right: -50%;
}

/* Notifications */
a.notification_bar {
	position: fixed;
	background: rgba(0,0,0,0.85);
	top: 30px;
	right: -400px;
	width: 380px;
	max-width: 380px;
	height: auto;
	border-radius: 6px;
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	-webkit-box-shadow: 0px 5px 20px -5px rgba(51,51,51,0.70);
	-moz-box-shadow: 0px 5px 20px -5px rgba(51,51,51,0.70);
	box-shadow: 0px 5px 20px -5px rgba(51,51,51,0.70);
	z-index: 2000;
	transition: all 200ms ease-in-out;
	user-select: none;
}

a.notification_bar:hover {
	text-decoration: none;
	-webkit-box-shadow: 0px 12px 20px -5px rgba(51,51,51,0.60);
	-moz-box-shadow: 0px 12px 20px -5px rgba(51,51,51,0.60);
	box-shadow: 0px 12px 20px -5px rgba(51,51,51,0.60);
}

a.notification_bar.show {
	right: 30px;
	transition: all 150ms ease-in-out;
}

a.notification_bar.removed {
	right: -400px;
	transition: all 250ms ease-in-out;
}

a.notification_bar.hovered {
	right: 30px;
	transition: all 150ms ease-in-out;
}

a.notification_bar > .left {
	float: left;
	width: 68px;
	margin-right: -68px;
	height: 100%;
}

a.notification_bar > .left img {
	float: left;
	width: auto;
	height: 36px;
	margin: 12px 14px 0 18px;
}

a.notification_bar > .right {
	margin-left: 68px;
	padding: 12px 14px 8px 0;
}

a.notification_bar > .right > .title {
	font-size: 16px;
	font-weight: 600;
	color: #fff;
}

a.notification_bar > .right > .notifcation_content {
	font-size: 14px;
	font-weight: 300;
	color: #fff;
	margin: 2px 0 0 0;
	opacity: 0.80;
	max-height: 40px;
	display: -webkit-box;
	display: -moz-box;
	-webkit-line-clamp: 2;
	-moz-line-clamp: 2;
	-webkit-box-orient: vertical;
	-moz-box-orient: vertical;  
	overflow: hidden;
}

/* Notification Center */
.notification_center {
	display: none;
	position: fixed;
	width: 480px;
	height: 400px;
	bottom: 90px;
	left: 100px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.98);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	-webkit-box-shadow: 0px 5px 20px -5px rgba(51,51,51,0.40);
	-moz-box-shadow: 0px 5px 20px -5px rgba(51,51,51,0.40);
	box-shadow: 0px 5px 20px -5px rgba(51,51,51,0.40);
	font-family: 'Open Sans', sans-serif;
	opacity: 0;
	z-index: 2000;
	transition: all 200ms ease-in-out;
}

.notification_center.show {
	display: block;
	opacity: 1;
}

.notification_center > .side_arrow {
	display: block;
	position: absolute;
	background: rgba(255, 255, 255, 0.95);
	width: 40px;
	height: 60px;
	transform: rotate(45deg);
	bottom: 20px;
	left: -4px;
	z-index: -100;
}

.notification_center > .notification_header {
	position: absolute;
	background: rgba(255, 255, 255, 0.90);
	width: 100%;
	height: 44px;
	line-height: 44px;
	font-size: 16px;
	font-weight: 700;
	text-align: left;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	padding: 0 0 0 14px;
	color: #000;
	top: 0;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	z-index: 300;
}

.notification_desktop {
	vertical-align: bottom;
	font-size: 28px !important;
	line-height: 44px !important;
	color: #c83739;
	position: relative;
	display: inline-block;
	float: right;
	padding: 0 8px 0 0;
	transition: all 200ms ease-in-out;
}

.notification_desktop:hover {
	color: #000 !important;
	cursor: pointer;
}

.notification_center > .notification_scroll {
	background: transparent;
	width: 100%;
	height: 100%;
	border-radius: 8px;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
	z-index: 100;
}

.notification_center > .notification_scroll::-webkit-scrollbar {
	width: 0;
	height: 0;
}

a.notification_item {
	display: inline-block;
	position: relative;
	width: calc(100% - 16px);
	margin: 4px 8px;
	color: #000;
	height: auto;
	border-radius: 8px;
}

a.notification_item:hover {
	text-decoration: none;
	cursor: pointer;
	background: rgba(207, 237, 253, 0.70);
}

a.notification_item:first-child {
	margin-top: 48px;
}

a.notification_item:last-child {
	margin-bottom: 8px;
}

a.notification_item > .user {
	position: relative;
	float: left;
	background: #ccc;
	background-image: url('../images/users/user_blank.png');
	background-size: 36px 36px;
	height: 36px;
	width: 36px;
	line-height: 36px;
	border-radius: 24px;
	text-align: center;
	font-size: 18px;
	color: #000;
	margin: 10px 10px 14px 10px;
}

a.notification_item > .message {
	position: relative;
	font-size: 15px;
	font-weight: 400;
	margin: 10px 10px 0 58px;
	padding: 0;
	line-height: 20px;
	max-height: 40px;
	display: -webkit-box;
	display: -moz-box;
	-webkit-line-clamp: 2;
	-moz-line-clamp: 2;
	-webkit-box-orient: vertical;
	-moz-box-orient: vertical;  
	overflow: hidden;
}

a.notification_item > .date {
	position: relative;
	width: calc(100% - 64px);
	font-size: 11px;
	font-weight: 300;
	color: #888;
	padding: 3px 0 10px 0;
	margin: 0 10px 0 58px;
}

.notification_empty {
	width: 100%;
	line-height: 400px;
	font-family: 'Open Sans', sans-serif;
	text-align: center;
	font-weight: 300;
	letter-spacing: 0.03em;
	color: #999;
}

/* Drop Down Menu */
.dd_menu {
	display: none;
	/*position: fixed;*/
	position: absolute;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0);
	top: 0;
	left: 0;
	z-index: 2000;
}

.dd_menu_touch_close {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0);
	z-index: 1;
}

.dd_menu_box {
	display: none;
	position: absolute;
	/*top: 45px;
	right: 22px;*/
	width: 200px;
	height: auto;
	padding: 8px 0;
	background: rgba(23, 23, 23, 0.80);
	border-radius: 6px;
	overflow: hidden;
	backdrop-filter: blur(3px);
  	-webkit-backdrop-filter: blur(3px);
	box-shadow: 0px 25px 40px -20px rgba(51,51,51,0.70);
	-webkit-box-shadow: 0px 25px 40px -20px rgba(51,51,51,0.70);
  	-moz-box-shadow: 0px 25px 40px -20px rgba(51,51,51,0.70);
  	box-shadow: 0px 25px 40px -20px rgba(51,51,51,0.70);
	opacity: 0;
	user-select: none;
	z-index: 100;
}

.dd_menu_box_arrow {
	display: block;
	position: absolute;
    top: 73px;
    right: 45px;
 	width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 12px solid rgba(23, 23, 23, 0.80);
	opacity: 0;
	z-index: 100;
}

.dd_menu_item {
	display: block;
	width: 100%;
	height: auto;
	padding: 10px 10px 10px 10px;
/*	font-family: 'Quicksand', sans-serif;
	font-size: 16px;
	font-weight: 500;*/
	text-align: left;
	color: #fff;
	text-decoration: none;
}

.dd_menu_item:hover {
	cursor: pointer;
	background: #dc4433;
	color: #fff;
}

.dd_menu_label {
	display: inline-flex;
	vertical-align: middle;
	font-family: 'Quicksand', sans-serif;
	font-size: 16px;
	font-weight: 500;
}

.material-icons.dd_menu_icon {
    padding-right: 6px;
}



/* Headlines & titles */
.task {
	margin: 0 0 10px 0;
}

.task_title {
	color: #401615;
	font-weight: 700;
	font-size: 32px;
	line-height: 22px;
	margin: 0 0 20px 0;
	padding: 0 0 25px 0;
	border-bottom: 3px solid #923f3a;
}

.task_title span {
	font-weight: 100;
}

.task_title.no_border {
	padding: 0 0 10px 0;
	border-bottom: 0;
}


/* Rules for sizing the icon - Material Icons. */
.material-icons {
	/*font-family: 'Material Icons Round' !important;*/
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
}

.material-icons.rounded {
	font-family: 'Material Icons Round' !important;
}

@supports (-webkit-overflow-scrolling: touch) {
	/* CSS specific to iOS devices */ 
	.material-icons.rounded {
		font-family: 'Material Icons Round' !important;
		margin-top: 1px;
	}
}

.material-icons.icon_20 {font-size: 20px; height: 100%;}
.material-icons.icon_24 {font-size: 24px; height: 100%;}
.material-icons.icon_28 {font-size: 28px; height: 100%;}
.material-icons.icon_36 {font-size: 36px; height: 100%; transition: all 200ms ease-out;}
.material-icons.icon_48 {font-size: 48px; height: 100%;}


.icon_button {
    display: inline-block;
    width: 38px;
    height: 38px;
    border-radius: 20px; 
    text-align: center;
    transition: all 200ms ease-out;
    user-select: none;
}

.icon_button.header {
	width: 34px;
	height: 34px;
}


.icon_button:hover {
	cursor: pointer;
	background: rgba(0, 0, 0, 0.05);
}

.icon_button.light {
	color: #777;
}

.icon_button.light:active {
	color: #222;
}





/* OLD ICONS REMOVE */
.material-icons.md-18 { font-size: 18px; display: table-cell; vertical-align: middle;}
.material-icons.md-24 { font-size: 24px; display: table-cell; vertical-align: middle;}
.material-icons.md-28 { font-size: 28px; display: table-cell; vertical-align: middle;}
.material-icons.md-32 { font-size: 32px !important; display: table-cell; vertical-align: middle;}
.material-icons.md-36 { font-size: 36px; display: table-cell; vertical-align: middle;}
.material-icons.md-48 { font-size: 48px; display: table-cell; vertical-align: middle;}

.material-icons_inline {
	vertical-align: bottom;
	font-size: 20px !important;
	position: relative;
	display: inline-block;
	float: left;
	padding-right: 8px;
}

.material-icons.vert_center_28 {
	font-size: 28px;
	line-height: 1;
	vertical-align: middle;
	margin-top: -3px;
}


/* OLD ICONS REMOVE */






/* Dashboard Apps */
.app_box {
	position: relative;
	background: rgb(200,55,57);
	background: linear-gradient(45deg, rgba(200,55,57,1) 0%, rgba(200,55,57,1) 50%, rgba(231,83,78,1) 100%);
	width: 100%;
	height: 220px;
	border-radius: 6px;
	margin: 0 0 20px 0;
	text-align: left;
	user-select: none;
	-webkit-user-select: none;
	transition: all 200ms;
}

.app_box:hover {
	cursor: pointer;
	opacity: 0.90;
}

.app_box.blue {
	background: rgb(23,146,223);
	background: linear-gradient(45deg, rgba(23,146,223,1) 0%, rgba(23,146,223,1) 50%, rgba(63,174,244,1) 100%);
}

.app_box.green {
	background: rgb(81,163,81);
	background: linear-gradient(45deg, rgba(81,163,81,1) 0%, rgba(107,204,107,1) 100%);
}

.app_box.orange {
	background: rgb(228,136,33);
	background: linear-gradient(45deg, rgba(228,136,33,1) 0%, rgba(242,165,79,1) 100%);
}

.app_box.red {
	background: rgb(200,55,57);
	background: linear-gradient(45deg, rgba(200,55,57,1) 0%, rgba(200,55,57,1) 50%, rgba(231,83,78,1) 100%);
}

.app_info {
	position: absolute;
	bottom: 20px;
	left: 20px;
}

.app_info > .app_title {
	color: #fff;
	font-size: 50px;
	line-height: 50px;
	font-weight: 900;
	letter-spacing: 0.05em;
}

.app_info > .app_description {
	color: #fff;
	font-size: 20px;
	font-weight: 300;
	letter-spacing: 0.03em;
	opacity: 0.70;
}


/*Modal Box*/
.fixed_modal_box {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	/*width: calc(100% - 90px);*/
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.25);
	/*backdrop-filter: blur(1px);*/
	/*-webkit-backdrop-filter: blur(1px);*/
	z-index: 3000;
	opacity: 0;
}

.fixed_modal_box_close {
	position: absolute;
	top: calc(0px + env(safe-area-inset-top));
	right: calc(0px + env(safe-area-inset-right));
	width: 34px;
	height: 34px;
	border-radius: 20px;
	margin: 12px 12px 0 0;
	background: rgba(255, 255, 255, 0.75);
	font-family: 'Quicksand', sans-serif;
	color: #222840;
	font-size: 40px;
	font-weight: 300;
	text-align: center;
	line-height: 24px;
	transition: all 100ms ease-in-out;
	z-index: 500;
}

.fixed_modal_box_close:hover {
	cursor: pointer;
	color: #812f2c;
	opacity: 0.60;
}

.fixed_modal_box_close:active {
	color: #000;
}

.fixed_modal_box_touch_close {
	position: absolute;
	background: rgba(255,255,255,0);
	opacity: 1;
	width: 100%;
	height: 100%;
	/*backdrop-filter: blur(3px);*/
	/*-webkit-backdrop-filter: blur(3px);*/
}

.fixed_modal_saving {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(255, 255, 255, 0.80);
	z-index: 5000;
}

.fixed_modal_box_container {
	width: 100%;
	max-width: 700px;
	margin-left: -350px;
	min-height: 100px;
	background: #fff; 
	opacity: 1;
	position: absolute;
	top: 50%; /*110%*/
	left: 50%;
	border-radius: 18px;
	opacity: 1;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-webkit-box-shadow: 0px 25px 80px -30px rgba(51,51,51,0.70);
	-moz-box-shadow: 0px 25px 80px -30px rgba(51,51,51,0.70);
	box-shadow: 0px 25px 80px -30px rgba(51,51,51,0.70);
	z-index: 100;
	-webkit-overflow-scrolling: touch;
}

.fixed_modal_box_container.small {
		width: 400px;
		margin-left: -200px;
}

.fixed_modal_box_container > .title {
	font-family: 'Roboto', sans-serif;
	margin: 0px 20px 0px 20px;
	padding: 24px 4px 12px 4px;
	text-align: left;
	font-size: 24px;
	font-weight: 700;
	color: #333;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	/*border-bottom: 1px solid #eee;*/
}

.fixed_modal_box_container > .title.left {
	text-align: left;
}

.fixed_modal_box_container > .footer {
	margin: 0 20px 0 20px;
	padding: 12px 4px 18px 4px;
	text-align: left;
	border-top: 1px solid #eee;
}

.fixed_modal_box_container > .modal_content {
	font-family: 'Open Sans', sans-serif;
	padding: 10px 20px 10px 20px;
	width: 100%;
	text-align: left;
}

.fixed_modal_box_container > .content {
	font-family: 'Open Sans', sans-serif;
	padding: 0 20px 0 20px;
	width: 100%;
	text-align: left;
}

.modal_submit {
	display: inline-block;
	background: #dc4433;
	padding: 6px 20px;
	font-family: 'Open Sans', sans-serif;
	letter-spacing: 1px;
	color: #fff;
	font-weight: 700;
	border-radius: 26px;
	transition: all 150ms ease-in-out;
}

.modal_submit:hover {
	cursor: pointer;
	background: #000;
}

.modal_cancel {
	display: inline-block;
	padding: 6px 20px;
	font-family: 'Open Sans', sans-serif;
	letter-spacing: 1px;
	color: #ccc;
	font-weight: 700;
	border-radius: 26px;
	transition: all 150ms ease-in-out;
}

.modal_cancel:hover {
	cursor: pointer;
	background: #eee;
	color: #999;
}


.fixed_modal_disabled {
	user-select: none;
	-webkit-user-select: none;
	opacity: 0.50;
}

.popup_modal_close {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
    	background: rgba(0, 0, 0, 0.30);
    	z-index: 1;
}

.popup_modal_close:hover {
	cursor: pointer;
}


/* User Menu */
.user_options {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.95);
	backdrop-filter: blur(1px);
	-webkit-backdrop-filter: blur(1px);
	z-index: 3000;
	opacity: 0;
}

.user_options > .container {
	width: 100%;
	max-width: 400px;
	margin-left: -200px;
	min-height: 100px;
	opacity: 1;
	position: absolute;
	top: 50%;
	left: 50%;
	text-align: center;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-o-transform: translateY(-50%);
}

.user_options > .close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 50px;
	height: 50px;
	border-radius: 25px;
	color: #fff;
	text-align: center;
	font-size: 50px;
	line-height: 42px;
	font-weight: 300;
	transition: all 200ms ease-out;
}

.user_options > .close:hover {
	cursor: pointer;
	color: #dc4433;
	-webkit-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
}

.user_options > .container > .title {
	font-size: 26px;
	line-height: 22px;
	font-weight: 600;
	color: #fff;
	border-bottom: 1px solid #333;
	padding: 0 0 20px 0;
	margin: 0 0 24px 0;
}

.user_options > .container > .title small {
	font-size: 14px;
	font-weight: 300;
	color: #ddd;
}

.user_options > .container > a.logout_button {
	width: 70%;
	display: block;
	margin: auto auto;
	background: #dc4433;
	padding: 14px 14px;
	color: #fff;
	text-align: center;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	border-radius: 3px;
	transition: all 200ms ease-out;
}

.user_options > .container > a.logout_button:hover {
	text-decoration: none;
	cursor: pointer;
	opacity: 0.80;
}


/* NEW Input Boxes & Buttons */

.input_title {
	display: block;
	color: #6f777f;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.05em;
	opacity: 0.80;
	text-transform: uppercase;
	margin: 0 0 5px 0;
}

.input_half {
	display: flex;
	justify-content: space-between;
}

.input_item_half {
	flex-basis: 49%;
}


.box_input {
	width: 100%;
	padding: 8px 8px;
	border-radius: 6px !important;
	background: transparent;
	border: 1px solid #e6eaed;
	margin: 0 0 10px 0;
	padding: 10px 10px;
	font-size: 18px;
	letter-spacing: 0.04em !important;
	vertical-align: top;
	transition: all 200ms ease-out;

}

.box_select {
	padding: 11px 8px !important;
	border-radius: 6px !important;
	background: transparent;
	border: 1px solid #e6eaed;
	margin: 0 0 10px 0;
	padding: 10px 10px;
	vertical-align: top;
	background: url(https://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/32x32/br_down.png) right center no-repeat;
	background-color: #fff;
	background-size: 16px 16px;
	line-height: 19px !important;
	font-size: 18px;
	letter-spacing: 0.04em !important;
	background-position: calc(100% - 14px) 15px;
	transition: all 200ms ease-out;
}





/* input boxes & Buttons */
.input_box {
	padding: 14px 14px;
	color: #444;
	font-size: 18px;
	font-weight: 500;
	background: transparent;
	margin: 0 0 10px 0;
	letter-spacing: 0.08em;
	border-radius: 0;
	border: 2px solid rgba(183,67,63,0.30);
	transition: all 200ms ease-out;
}

.input_box:focus {
	border: 2px solid rgba(183,67,63,0.90);
}

.input_box::placeholder {
	font-size: 18px;
	letter-spacing: 0.08em;
	font-weight: 300;
}

.input_box_100 {
	width: 100%;
}

.input_box_50 {
	width: 50%;
}

.input_select {
	width: 100%;
	margin: 0 0 10px 0;
	padding: 14px 14px !important;
	font-size: 18px;
	font-weight: 300;
	line-height: 20px !important;
	border: 2px solid rgba(183,67,63,0.30);
}

.input_select:focus {
	border: 2px solid rgba(183,67,63,0.90);
}

.input_button {
	background: #dc4433;
	color: #fff;
	font-size: 18px;
	font-weight: 600;
	text-transform: uppercase;
	padding: 14px 40px;
	min-width: 240px;
	margin: 10px auto auto auto;
	border: none;
	transition: all 200ms ease-out;
}

.input_button:hover {
	background: #000;
	cursor: pointer;
}

.input_button_disabled {
	opacity: 0.50;
	user-select: none;
	-webkit-user-select: none;
}

.input-container {
	margin: 0 0 10px 0;
	max-width: 100%;
	background-color: #fff;
	border: 2px solid rgba(183,67,63,0.30);
	border-radius: 0px;
	transition: all 200ms ease-out;
	text-align: left;
}

.input_message {
	width: 100%;
	font-size: 12px;
	text-align: center;
	color: #555;
}

input[type='file'] {
	display: none;
}

.file-info {
	font-size: 0.9em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100px;
	padding: 0 10px;
}

.browse-btn {
	background: rgba(183,67,63,0.30);
	color: #fff;
	font-size: 16px;
	letter-spacing: 0.03em;
	font-weight: 600;
	padding: 14px 22px;
	border: none;
	transition: all 200ms ease-out;
}

.input-container:hover {
	border: 2px solid #dc4433;
	cursor: pointer;
}

.input-container:hover > .browse-btn {
	background: #dc4433;
	cursor: pointer;
}


.button_filled {
	display: inline;
	height: auto;
	background: #dc4433;
	font-family: 'Quicksand', sans-serif;
	font-size: 18px;
	text-align: center;
	color: #fff;
	letter-spacing: 0.05em;
	font-weight: 500;
	padding: 12px 0;
	margin: 0 1% 0 0;
	border: 0;
	transition: all 150ms ease-out;
}

.button_filled:hover {
	cursor: pointer;
	opacity: 0.60;
}

.button_empty {
	display: inline;
	width: 49.5%;
	height: auto;
	background: transparent;
	border: 2px solid #dc4433;
	font-family: 'Quicksand', sans-serif;
	font-size: 18px;
	text-align: center;
	color: #dc4433;
	letter-spacing: 0.05em;
	font-weight: 500;
	padding: 10px 0;
	margin: 0 0 0 0;
	transition: all 150ms ease-out;
}

.button_empty:hover {
	cursor: pointer;
	opacity: 0.60;
}

.button_50 {
	width: 49.5%;
}

.button_50.last {
	margin: 0 0 0 0;
}

/*.action_button {
	position: fixed;
    z-index: 1000;
    bottom: 35px;
    right: 35px;
    background: #5f47d6;
    background-size: 50px 50px;
    width: 50px;
    height: 50px;
    border-radius: 35px;
    color: #fff;
    font-size: 50px;
    text-align: center;
    box-shadow: 0 3px 2px rgba(34,34,34,0.1);
    transition: all 0.15s ease;
}*/

.action_create {
    position: fixed;
    bottom: 35px;
    right: 35px;
    width: 50px;
    height: 50px;
    border-radius: 25px; 
    background: #5f47d6;
    color: #fff;
    text-align: center;
    -webkit-box-shadow: 0px 10px 14px -5px rgba(95,71,214,0.3);
	-moz-box-shadow: 0px 10px 14px -5px rgba(95,71,214,0.3);
	box-shadow: 0px 10px 14px -5px rgba(95,71,214,0.3);
    transition: all 200ms ease-out;
    user-select: none;
    z-index: 1000;
}

.action_create:hover {
	cursor: pointer;
	transform: scale(1.1);
	background: #000;
	-webkit-box-shadow: 0px 14px 14px -6px rgba(12,12,12,0.45);
	-moz-box-shadow: 0px 14px 14px -6px rgba(12,12,12,0.45);
	box-shadow: 0px 14px 14px -6px rgba(12,12,12,0.45);
}

.action_create:active {
	background: #47359f;
	-webkit-box-shadow: 0px 10px 10px -9px rgba(71,53,159,0.70);
	-moz-box-shadow: 0px 10px 10px -9px rgba(71,53,159,0.70);
	box-shadow: 0px 10px 10px -9px rgba(71,53,159,0.70);
}

.action_create:hover .icon_36 {
	transform: rotate(180deg);
}

/* Style Checkmark Input */
.check_container {
	display: flex;
	width: 100%;
	height: auto;
	margin: 0px auto 20px auto;
}

.check_container.noLabel {
	width: 30px;
	height: 28px;
}

.check_box {
	display: block;
	position: relative;
	padding: 3px 0 0 35px;
	cursor: pointer;
	font-size: 16px;
	font-weight: 300;
	letter-spacing: 0.08em;
	color: #555;
	font-family: 'Roboto', sans-serif;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	transition: all 200ms ease-out;
}

.check_box input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

.checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 25px;
	width: 25px;
	background-color: #eee;
	border-radius: 3px;
	transition: all 200ms ease-out;
}

.checkmark.dark {
	background-color: #ddd;
}

.check_box:hover input ~ .checkmark {
	background-color: #ccc;
}

.check_box input:checked ~ .checkmark {
	background-color: #c83739;
}

.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}

.check_box input:checked ~ .checkmark:after {
	display: block;
}

.check_box .checkmark:after {
	left: 9px;
	top: 5px;
	width: 5px;
	height: 10px;
	border: solid white;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

/* Input Boxes & Actions */
.input_container {
	float: left;
	width: 100%;
}

.input_container_50 {
	width: 49.5%;
	margin-right: 1%;
}

.input_container_50.last {
	margin-right: 0;
}

.input {
	width: 100%;
	padding: 14px 14px;
	font-size: 16px;
	font-weight: 500;
	margin: 0 0 10px 0;
	border-radius: 3px !important;
	border: 1px solid #ccc;
	transition: all 200ms ease-out;
}

.input.last {
	margin: 0 0 10px 0;
}

.input:focus {
	-webkit-box-shadow: 0px 10px 12px -10px rgba(34,34,34,.25);
	-moz-box-shadow: 0px 10px 12px -10px rgba(34,34,34,.25);
	box-shadow: 0px 10px 12px -10px rgba(34,34,34,.25);
}

.input::placeholder {
	font-weight: 300;
} 

.input_50 {
	width: 49.5%;
	margin-right: 1%;
}

.input_50.last {
	margin-right: 0;
}

.input_submit {
	background: #dc4433;
	border: 0;
	font-family: 'Roboto', sans-serif;
	font-size: 600;
	font-size: 16px;
	letter-spacing: 0.05em;
	color: #fff;
	padding: 10px 40px;
	border-radius: 3px !important;
	transition: all 200ms ease-out;
}

.input_submit:hover {
	cursor: pointer;
	opacity: 0.80;
}

.input_submit:active {
	background: #000;
}

.input_submit.full {
	width: 100%;
	height: 48px;
}

.input_submit.empty {
	background: transparent;
	border: 1px solid #dc4433;
	padding: 9px 39px;
	margin-left: 2px;
	color: #dc4433;
}

.input_submit.empty:hover {
	color: #000;
}

.input_submit.empty:active {
	background: #000;
	border: 1px solid #000;
	color: #fff;
}

label {
	display: block;
	margin: 12px 0 5px 2px;
	font-size: 12px;
	font-weight: 600;
}

@-webkit-keyframes autofill {
	to {
		color: #000;
		background: transparent;
	}
}

input:-webkit-autofill {
	-webkit-animation-name: autofill;
	-webkit-animation-fill-mode: both;
}

/* Drop Down Select */
body select { 
	padding: 14px 70px 14px 14px !important;
	margin-bottom: 10px;
	width: 100%; 
	height: auto !important; 
	border: 1px solid #ccc;
	border-radius: 3px; 
	background: url("https://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/32x32/br_down.png") right center no-repeat; 
	background-color: #fff;
	background-size: 16px 16px;
	background-position: calc(100% - 14px) 15px;
	/*color: #555;*/
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	/*font-weight: 300;*/
	line-height: 18px !important; 
	letter-spacing: 0.08em;
	appearance: none; 
	-webkit-appearance: none; 
	-moz-appearance: none; 
}

/* body select.select_box option */ 
body select option {
	padding: 0 4px;
} 
/* for IE and Edge */ 
select::-ms-expand { 
	display: none; 
} 
select:disabled::-ms-expand { 
	background: #f60; 
}

select:focus {
	color: #000;
}

.select_100 {
	float: left;
	width: 100%;
}

.select_50 {
	float: left;
	width: 49.5%;
	margin-right: 1%;
}

.select_50.last {
	margin-right: 0;
}

.create_job_split {
	display: flex;
	width: 100%;
	height: auto;
	margin: 10px auto 20px auto;
}


/* Options Drop Down Menu */
.option_menu {
	display: none;
	position: absolute;
	width: 200px;
	height: auto;
	background: rgba(255, 255, 255, 0.90);
	z-index: 800;
	right: 0;
	border-radius: 3px;
	opacity: 0;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	-webkit-box-shadow: 0px 12px 15px -5px rgba(0,0,0,0.55);
	-moz-box-shadow: 0px 12px 15px -5px rgba(0,0,0,0.55);
	box-shadow: 0px 12px 15px -5px rgba(0,0,0,0.55);
}

.option_menu > .item {
	width: 100%;
	height: auto;
	padding: 14px 10px;
	font-family: 'Open Sans', sans-serif;
	text-align: left;
	font-size: 16px;
	font-weight: 300;
	transition: all 100ms ease-out;
}

.option_menu > .item:hover {
	cursor: pointer;
	background: #549fdd;
	color: #fff;
}

.option_menu > .item:first-child {
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}

.option_menu > .item:last-child {
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
}

.option_menu_icon_inline {
	vertical-align: bottom;
	font-size: 20px !important;
	position: relative;
	display: inline-block;
	float: left;
	padding-right: 8px;
	padding-top: 1px;
	margin: -3px 0 0 0;
}


/* Paging */
.pagination {
	position: fixed;
	bottom: 20px;
	left: calc(50% + 45px);
	background: rgba(23, 23, 23, 0.80);
	width: auto;
	height: auto;
	padding: 14px 14px 12px 22px;
	font-family: 'Open Sans', sans-serif;
	text-align: center;
	user-select: none;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-o-transform: translateX(-50%);
    border-radius: 25px;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    background: rgba(23, 23, 23, 0.80);
    box-shadow: 0px 15px 15px -10px rgba(51,51,51,0.50);
    -webkit-box-shadow: 0px 15px 15px -10px rgba(51,51,51,0.50);
    -moz-box-shadow: 0px 15px 15px -10px rgba(51,51,51,0.50);
    box-shadow: 0px 15px 15px -10px rgba(51,51,51,0.50);
    z-index: 2000;
}

.pagination > .page {
	padding: 3px 8px;
	margin: 0 0px;
	border-radius: 24px;
	text-align: center;
	font-weight: 400;
	/*color: #3a3a3a;*/
	color: rgba(255, 255, 255, 0.80);
  	transition: background-color 150ms ease-out;
}

.pagination > .page:hover {
	cursor: pointer;
	text-decoration: none;
	background: #fff;
	color: #000;
}

.pagination > .page.current {
	background: #dc4433;
	margin: 0 3px;
	color: #fff;
	font-weight: 600;
	border-radius: 24px;
}

.pagination > .nav {
	padding: 3px 0px;
	margin: 0 0px;
	border-radius: 30px;
	text-align: center;
	font-weight: 400;
	opacity: 0.50;
  	transition: background-color 150ms ease-out;
}

.pagination > .nav:hover {
	cursor: pointer;
	text-decoration: none;
	opacity: 1;
	background: #f3f3f3;
}

.material-icons.paging {
    font-size: 24px;
    color: #fff;
    line-height: 1;
    vertical-align: middle;
    margin-top: -3px;
}

.material-icons.paging:hover {
	color: #000;
}


/* Spinner */
.loading {
	width: 100%;
	text-align: center;
	font-weight: 300;
	letter-spacing: 0.15em;
	color: #555;
	padding: 20px 0;
}
.loader,
.loader:after {
	border-radius: 50%;
	width: 7em;
	height: 7em;
}

.loader.center {
	top: calc(50% - 3.5em);
}

.loader {
	margin: 20px auto;
	font-size: 10px;
	position: relative;
	text-indent: -9999em;
	border-top: 0.8em solid rgba(0, 0, 0, 0.70);
	border-right: 0.8em solid rgba(0, 0, 0, 0.70);
	border-bottom: 0.8em solid rgba(0, 0, 0, 0.70);
	border-left: 0.8em solid #ffffff;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-animation: load8 1.4s infinite linear;
	animation: load8 1.4s infinite linear;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


/* Login */
.login_box {
	display: block;
	position: absolute;
	background: #fff;
	width: 420px;
	height: auto;
	top: 50%;
	left: 50%;
	border-radius: 6px;
	margin: 0 0 0 -210px;
	padding: 30px 30px;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	text-align: center;
	-webkit-box-shadow: 0px 15px 20px -13px rgba(0,0,0,0.30);
	-moz-box-shadow: 0px 15px 20px -13px rgba(0,0,0,0.30);
	box-shadow: 0px 15px 20px -13px rgba(0,0,0,0.30);
}

.login_logo {
	width: 220px;
	height: auto;
	margin: 0 0 14px 0;
}

.login_message {
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0 0 20px 0;
}

.login_error {
	width: 100%;
	margin: 0 0 10px 0;
	padding: 10px 0px;
	border: 1px solid #ED4337;
	background: #edc8c5;
	color: #000;
	font-size: 14px;
	border-radius: 3px;
}





/* Retina-specific stuff here */
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx) { 

}

/* DARK MODE !!! background color for dark mode */
@media (prefers-color-scheme: dark) {

}

/* Responsive Keys Height */
@media (max-height: 800px) {


}

@media (max-height: 600px) {


}

/* Responsive Keys Width */
@media (max-width: 2200px) {

}

@media (max-width: 1600px) {

}

@media (max-width: 1080px) {


}

@media (max-width: 1000px) {

/*	.tab_header_spacer {
		height: 106px;
	}

	.tab_header_column {
		display: flex;
		flex-wrap: wrap;
	}

	.tab_header_column_left {
		flex: 1 1 50%;
	    flex-basis: 50%;
	    order: 1;
	    padding: 10px 0 0 14px;
	}

	.tab_header_column_center {
		flex: 0 0 auto;
		width: 100%;
		order: 3;
		text-align: left;
		margin-top: 10px;
	}

	.tab_header_column_right {
		flex: 1 1 50%;
	    flex-basis: 50%;
	    order: 2;
	    padding: 10px 14px 0 0;
	}*/

/*	.tabs {
		padding-left: 14px;
	}

	.tabs > .tabs_button {
		padding: 14px 1px 9px 1px;
	}

	.tabs > .tabs_button.last {
		margin-right: 14px;
	}*/

/*	.content_inner {
		width: calc(100% - 28px);
		margin: 24px 14px 24px 14px;
		padding: 10px;
		background: #fff;
		border-radius: 6px;
	}*/

}


@media (max-width: 850px) {


	h1 {
		font-size: 40px;
		font-weight: 700;
		line-height: 52px;
	}

	.sub_header {
		margin: 5px 0 0 0;
		letter-spacing: 0.15em;
		font-size: 20px;
	}

}

/* iPhone & Android Landscape */
/*@media screen and (min-width: 812px) and (max-width: 896px) and (orientation: landscape) {*/
@media screen and (min-width: 320px) and (max-width: 896px) and (orientation: landscape) {

}


@media (max-width: 750px) {
	/*iPhone 6 & 6 Plus Landscape*/
	.fixed_modal_box_container {
		max-width: 600px;
		margin-left: -300px;
	}

	.action_create {
	    bottom: 25px;
	    right: 25px;
	}

}

@media (max-width: 640px) {

	header {
		display: block;
		height: calc(48px + env(safe-area-inset-top));
	}

/*	.header_center img {
		height: 28px;
		margin: 9px 0 0 0;
	}*/

	.header_spacer {
		height: 80px;
	}

	.header_spacer.loggedin {
		height: 100px;
	}

	footer {
		padding: 1rem 0;
		font-size: 12px;
	}

	.side_bar {
		display: none;
	}

	.logo {
		width: 100%;
	}

    .container_outer {
		width: 100%;
		margin-left: 0;
    }

    .container {
		width: 100%;
		margin: calc(1px + env(safe-area-inset-top)) auto 0 auto;
		padding: 0px 18px;  
    }

    .container.full {
		padding: 0;
		margin-top: calc(48px + env(safe-area-inset-top));
    }

	.content_inner {
		width: calc(100% - 0px);
		margin: 24px 0 0 0;
		padding: 10px;
		border-radius: 0px;
	}

/*	.inner_container {
		width: auto;
		margin: auto 10px;
	}*/

	.container.narrow {
		padding: 0 20px;
	}

	.empty_spacer {
		display: block;
	}

	h1 {
		font-size: 35px;
		line-height: 47px;
	}

	h1.center {
		text-align: left;
	}

	.sub_header {
		margin: 5px 0 0 0;
		letter-spacing: 0.15em;
		font-size: 18px;
	}

	.sub_header_thin {
		text-align: left;
		font-size: 18px;
	}

/*	.account_input {
		padding: 12px 3px;
		margin: 0 0 18px 0;
		font-size: 16px;
		font-weight: 500;
		letter-spacing: 0.1em;
	}

	.account_input::placeholder {
		font-size: 14px;
		letter-spacing: 0.1em;
	}

	.account_submit {
		padding: 12px 0;
		margin: 8px 0;
		font-size: 18px;
		line-height: 20px;
		letter-spacing: 0.05em;
	}

	.account_submit:hover {
		font-size: 20px;
	}*/




	.tab_header_spacer {
		height: 103px;
	}

	.tab_header_inner {
		height: 103px;
	}

	.tab_header_top {
	  	height: 70px;
	  	padding: 0 20px;
	}

	.tab_title {
		font-size: 24px;
	}

	.tabs > .tabs_button {
		padding: 0 0px 9px 0px;
		margin: 0px 14px 0 0;
		font-size: 14px;
	}

	.button_filled {
		font-size: 14px;
	}

	.button_empty {
		font-size: 14px;
	}

	.empty_button {
		padding: 12px 0;
		margin: 8px 0;
		font-size: 16px;
		line-height: 18px;
		letter-spacing: 0.05em;
	}

	.empty_button:hover {
		font-size: 18px;
	}

	.center_line_split {
		margin-top: 10px;
		margin-bottom: 15px;
	}

	.create_layout_big {
		height: 190px;
		margin: 0 auto 0px auto;
	}

	.create_layout_big > .create_layout_title {
		font-size: 40px;
	}

	/* Tab Header */
	.tab_header {
		width: 100%;
	}

	/* Dashboard Apps */
	.app_box {
		width: 100%;
		height: 140px;
	}

	.app_info {
		bottom: 14px;
		left: 14px;
	}

	.app_info > .app_title {
		font-size: 40px;
		line-height: 40px;
		font-weight: 900;
		letter-spacing: 0.05em;
	}

	.app_info > .app_description {
		font-size: 16px;
		font-weight: 300;
	}

	.fixed_modal_box_close {
		right: 4px;
		top: 4px;
	}

	.fixed_modal_box_container {
		max-width: 90%;
		margin-left: -45%;
	}

	.fixed_modal_box_container > .title {
		padding: 50px 0 26px 22px;
		text-align: left;
		font-size: 26px;
	}

	.fixed_modal_box_container > .content {
		padding: 0 20px 36px 20px;
	}

	a.notification_bar {
		top: -230px;
		right: auto;
		left: auto;
		width: 100%;
		max-width: calc(100% - 40px);
		margin: 0 20px;
	}

	a.notification_bar.show {
		top: calc(10px + env(safe-area-inset-top));
		right: auto;
		left: auto;
	}

	a.notification_bar.removed {
		top: -230px;
		right: auto;
		left: auto;
	}

	a.notification_bar.hovered {
		top: calc(10px + env(safe-area-inset-top));
		right: auto;
		left: auto;
	}

	.notification_center {
		width: calc(100% - 20px);
		height: 400px;
		top: calc(46px + env(safe-area-inset-top));
		bottom: auto;
		left: 10px;
	}

	.notification_center > .side_arrow {
		width: 24px;
		height: 44px;
		transform: rotate(45deg);
		top: -10px;
		/*left: 16px;*/
		left: auto;
		right: 18px;
	}

	.login_box {
		position: absolute;
		width: calc(100% - 80px);
		top: calc(50% - env(safe-area-inset-top));
		left: auto;
		margin: 0 40px 0 40px;
		padding: 30px 30px;
	}

	.pagination {
		width: calc(100% - 40px);
		bottom: 20px;
		left: 50%;
		padding: 14px 14px 12px 22px;
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		-moz-transform: translateX(-50%);
		-o-transform: translateX(-50%);
	    z-index: 2000;
	}


}

@media (max-width: 480px) {

}

@media (max-width: 380px) {

	.login_box {
		position: absolute;
		width: calc(100% - 40px);
		height: auto;
		top: calc(50% - env(safe-area-inset-top));
		left: auto;
		border-radius: 6px;
		margin: 0 20px 0 20px;
		padding: 20px 20px;
	}

	.login_logo {
		width: 180px;
		height: auto;
		margin: 0 0 20px 0;
	}

}

@media (max-width: 320px) {

}


/* FIREFOX ONLY */
@-moz-document url-prefix() {

}

/*Firefox Adjustments on Mac Only*/
@supports (-moz-osx-font-smoothing: auto) {

}

/*Dark Mode*/
/*@media (prefers-color-scheme: dark) {
    body {
      background: #222;
      color: #fff;
    }
}
*/