/**
 * This CSS is just to get you started.
 * Feel free to modify any of it for your own app.
 */
@import "icons.css";

:root {
	--main-color: #FFE989;
	--secondary-color: #FFFFFF;
	--selected-color: #94D9F6;
}

* { 
	font-family: 'Anton', sans-serif;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-tap-highlight-color: transparent;
	box-sizing: border-box;
}
a { text-decoration: none; color: #0055ff; }
a:visited { color: #aa88cc; }
html { background: #f2f2f2; height: 100%; box-sizing: border-box; }
body { height: 100%; overflow: auto; touch-action: none; }
h2 { margin: 0; }
*, *::before, *::after { box-sizing: inherit; }
table { table-layout: fixed; }

/* The various slot containers */
#notices_slot {
	text-align: center;
}
#content_slot {
	position: relative;
	overflow-x: auto;
	background: #fff;
	box-shadow: #aaa 0 0 4px;
	-webkit-box-shadow: #aaa 0 0 4px;
	-moz-box-shadow: #aaa 0 0 4px;
}
#dashboard_slot {
	position: fixed;
	margin: 0;
	border: solid 0 #555; 
	left: 0;
	top: 0;
	width: 100%;
	height: 50px;
	z-index: 900;
	text-align: left;
	cursor: default;
	touch-action: manipulation;
    box-shadow: #555 0 0 4px; -webkit-box-shadow: #555 0 0 4px; -moz-box-shadow: #555 0 0 4px;
    background: #222222; /* for non-css3 browsers */
	color: #ffffff;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#555', endColorstr='#444'); /* for IE */
}
#dashboard_slot .dashboard_contextual {display: none}
.Q_notMobile #dashboard_slot {
	padding: 5px 10px;
}
.Q_mobile #dashboard_slot {
	background: #222222;
}
#dashboard .Q_tabs_tab.Q_current {
	background: #222222;
	color: #94D9F6;
}
#dashboard_slot * { color: white; font-size: 24px; font-family: Arial, sans-serif; }
#dashboard_slot input,
#dashboard_slot textarea { color: black; }
#page { position: absolute; left: 0; width: 100%; top:50px; bottom: 0; }
.Q_mobile #page { overflow: auto; -webkit-overflow-scrolling: touch; z-index: 0; }
#dashboard_slot .Q_inplace_tool .Q_hover .Q_inplace_tool_static,
#dashboard_slot .Q_inplace_tool .Q_hover .Q_inplace_tool_blockstatic { 
	background: white;
	color: #333;
}
.Q_mobile #dashboard .Users_avatar_icon { margin: 0; border-radius: 4px; }
#dashboard .Users_avatar_name { display: none; }
.Q_mobile #page { position: absolute; }
.Q_mobile #content_slot { height: 100%; }
.Q_notMobile .Users_avatar_icon { margin-right: 5px; }

#dashboard, #notices, #content { margin: auto; text-align: left; }
#content { position: relative; }

#dashboard { display: inline-block; width: 100%; }
.Q_mobile #dashboard {height: 60px}

.DMS_dashboard_logo .Users_avatar_icon.Users_avatar_icon_200 {
	width: 100%;
	height: auto;
}
.Q_mobile #dashboard_slot .DMS_dashboard_logo {
	display: none;
	width: 40px;
	height: 40px;
	float: left;
	margin: 5px;
	background: url(../img/icon/40.png) no-repeat;
}
.Q_mobile #dashboard_slot .DMS_dashboard_logo h1 {
	display: none;
}

/* Notices contents */
#notices_slot { text-align: center; margin: auto; padding: 0; z-index: 5000; }
#notices { margin: auto; }
#notices_slot div.container { overflow: none; overflow-y: auto; }
#notices_slot ul { list-style-type: none; padding: 0; margin: auto; width: 700px; max-width: 100%; border: solid 1px #555; border-top: solid 1px #aaa; box-shadow: 0 0 5px #222; -moz-box-shadow: 0 0 5px #222; -webkit-box-shadow: 0 0 5px #222; cursor: pointer; }
#notices_slot li { list-style-type: none; padding: 0; margin: 0; text-align: center; background: #ffd4aa; border: 0; border-bottom: solid 1px #aaa; line-height: 30px; min-height: 30px; }
#notices_slot ul.Q_errors * { background-color: #ebb; color: #500; }
#notices_slot ul.Q_errors li { text-align: left; padding: 0 10px 0 10px; }
#notices_slot .Q_field_name { float: right; font-size: 12px; padding-right: 10px; }
#notices_slot button
{
	display: inline-block;
	vertical-align: top;
	margin-left: 5px;
	padding: 2px 10px;
	color: #69552e;
	background: #F1E2C6;
	box-shadow: 1px 1px 1px 0 #CCC;
	border: none;
}
.Q_notTouchscreen #notices_slot button:active
{
	background: #f0d298;
	margin-left: 6px;
	box-shadow: none;
}
#notices_slot ul li span {
	font-size: 12px;
	line-height: 26px;
}
#notices_slot ul li * {
	vertical-align: middle;
}

#Q_columns-DMS_tool .Q_columns_title .Q_title_slot {
	color: var(--secondary-color);
}
#Q_columns-DMS_tool .Q_columns_title .Q_columns_title_container i {
	color: var(--secondary-color);
	height: 40px;
	display: inline-block;
}

/* Dashboard contents */
#dashboard>* { margin: 0; padding: 0; line-height: 40px; text-align: center; }
#dashboard>h1 { display: none; float: left; padding: 5px; width: auto; }
#dashboard>h2 { float: left; }
#dashboard_user { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; float: right; padding: 5px; }
.Q_mobile #dashboard_user { max-width: 40%; }
.Q_mobile.Users_loggedIn #dashboard_user { margin: 0; }
.Q_mobile.Users_loggedOut #dashboard_user { line-height: 40px; }
#dashboard .Q_contextual * { color: black; }
#dashboard td { vertical-align: middle; }
#dashboard table { width: 100%; padding: 0; margin: 0; }
#dashboard .Q_dashboard_logo { padding: 0; }
#dashboard .Q_dashboard_logo a { padding: 5px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
#dashboard .Q_dashboard_logo img { height: 40px; border-radius: 5px; }
#dashboard .Q_dashboard_search { padding: 8px 10px 8px 10px; font-weight: bold; text-align: left; }
#dashboard .Q_dashboard_search input {
	width: 104px;
	margin-right: 4px;
	border-radius: 2em;
	-moz-border-radius: 2em;
	padding-left: 27px;
	padding-right: 17px;
	border: none;
	border-top: 1px solid #CCC;
	background: white url(../{{Q}}/img/search_icon.png) no-repeat;
	color: #444;
}

/* Dashboard tabs */
.Q_mobile #dashboard #dashboard_user {
	min-width: 50px;
	min-height: 50px;
}
#dashboard .Q_tabs_tab.Q_tab_courses:before {
	font-family: 'qplatform-calendars' !important;
	content: "\e906";
}
.Q_listing_wrapper .Q_tabs_tab.Q_tab_content::before,
#dashboard .Q_tabs_tab.Q_tab_content:before {
	font-family: 'qbix-dms' !important;
	content: "\e900";
	top: 4px;
}
.Q_mobile #dashboard .Q_tabs_tab.Q_tab_content:before {
	font-size: 41px;
	top: 2px;
}
.Q_listing_wrapper .Q_tabs_tab.Q_tab_administration::before,
#dashboard .Q_tabs_tab.Q_tab_administration:before {
	font-family: 'qbix-dms' !important;
	content: "\e902";
	top: 2px;
}

body .Q_tabs_contextual .Q_listing li { text-align: left; }
html .Q_listing img { height: 30px; }

/* inputs */

input[type=text],
input[type=email],
input[type=tel],
input[type=password],
input[type=number],
input.text,
input.email,
input.tel,
input.password,
input.number,
textarea { border: 1px solid #ccc; border-bottom: 1px solid #aaa; background-color: #fefefe; cursor: text; font-family: "Trebuchet MS"; }
input[type=text]:focus,
input[type=email]:focus,
input[type=tel]:focus,
input[type=password]:focus,
input[type=number]:focus,
input.text:focus,
input.email:focus,
input.tell:focus,
input.password:focus,
input.number:focus,
textarea:focus { background: white; box-shadow: 0 1px 10px rgba(0,0,0,.15); -webkit-box-shadow: 0 1px 4px rgba(0,0,100,.15); -moz-box-shadow: 0 1px 4px rgba(0,0,100,.15); }
input.placeholder,
textarea.placeholder { color: #aaa; font-style: italic; }
select:focus { outline: dotted 1px #779; }
/* select { margin-top: 0.75em; } */
input[type=text],
input[type=password],
input[type=tel],
input[type=password],
input[type=number],
input.text,
input.email,
input.tel,
input.password,
input.number,
textarea { border-radius: 3px; -moz-border-radius:3px; -webkit-border-radius:3px; padding: 0 4px 0 4px; }
input[type=checkbox],
input[type=radio] { margin-right: 5px; }
html .Q_inplace_tool_fieldinput { padding: 0; }

#notices_slot { position: fixed; }

/* The following lines are for cordova on iOS */
.Q_notCordova #status_background { display: none; }
.Q_cordova.Q_ios #status_background {
	background: #f2f2f2;
	height: 20px;
}
.Q_cordova.Q_ios.Q_mobile #dashboard_slot { top: 20px; height: 50px; }
.Q_cordova.Q_ios.Q_mobile #page { top: 70px; }
.Q_cordova.Q_ios.Q_mobile.Q_notch #status_background {
	background: black;
    height: constant(safe-area-inset-bottom);
    height: env(safe-area-inset-top);
}
.Q_cordova.Q_ios.Q_mobile.Q_notch #dashboard_slot {
	top: calc(env(safe-area-inset-top));
	height: 50px;
}
.Q_cordova.Q_ios.Q_mobile.Q_notch #page { 
	top: calc(env(safe-area-inset-top) + 50px);
}

/* The following lines are for a flatter look */
html .Q_listing li { font-size: 18px; padding: 0 10px; line-height: 40px; text-align: left; border-top: solid 1px white; border-bottom: solid 1px #CCC; background: #f2f2f2; -webkit-touch-callout: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; white-space: nowrap; overflow: hidden;
}
.Q_dialog_title { background: #444; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#111111'); background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#333)); background: -moz-linear-gradient(top, #444, #333);
}
.Q_button, .Q_button:focus {
	background: #3fca2a;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3fca2a', endColorstr='#35bf23');
	background: -webkit-gradient(linear, left top, left bottom, from(#3fca2a), to(#35bf23));
	background: -moz-linear-gradient(top, #3fca2a, #35bf23);
}


/* The following lines override default styles for a block-style website */
/* Try removing them and seeing what happens */
/*html.Q_notMobile { height: 100%; }
.Q_notMobile body { height: 100%; }
.Q_notMobile #dashboard>h1,
.Q_notMobile #dashboard>h2 { float: none; }
.Q_notMobile #notices_slot { left: 0; top: 0; width: 100%; }
.Q_notMobile #dashboard_slot { position: fixed; left: 5%; width: 20%; height: 90%; top: 5%; }
.Q_notMobile #page { position: absolute; padding: 0; left: 25%; width: 70%; height: 90%; top: 5%; }
.Q_notMobile #content_slot { min-height: 100%; padding: 0; }
.Q_notMobile #content { padding: 20px; }
.Q_notMobile #Users_avatar_tool { width: 100%; background: #222; background: rgba(255,255,255,.05); }
.Q_notMobile #dashboard_user { float: none; position: absolute; width: 100%; margin: 10px 0 10px 0;  text-align: center;  bottom: 0; }
.Q_mobile #dashboard_user .Users_avatar_name { display: none; }*/

html.Q_notMobile #dashboard_slot .Users_avatar_tool img {
	width: 50px;
}
html.Q_notMobile #dashboard_slot .DMS_dashboard_logo {
	float: left;
}
html.Q_notMobile #dashboard_slot .Q_tool.Q_tabs_tool {
	line-height: 50px;
}
html.Q_notMobile #dashboard_slot .Q_tabs_tabs {
	text-align: center;
}
html.Q_notMobile #dashboard_slot .Q_tabs_tab {
	padding: 0;
	margin-right: 3%;
}
html.Q_notMobile #dashboard_slot .Q_tabs_tab::before {
	display: none;
}

html .Q_contextual {
	background: #969a9c;
	box-shadow: #fff 0 0 4px;
	-webkit-box-shadow: #fff 0 0 4px;
	-moz-box-shadow: #fff 0 0 4px;
	padding: 2px;
}
html .Q_contextual .Q_listing > li {
	padding: 0 5px;
	background: #fff;
	color: #555;
}
html[data-dashboard-style=hamburger].Q_mobile .Q_contextual .Q_listing > li,
html[data-dashboard-style=contextual].Q_mobile .Q_contextual .Q_listing > li {
	padding-left: 40px;
}
html[data-dashboard-style=hamburger] .Q_contextual .Q_listing li * {
	background: none;
}
html[data-dashboard-style=hamburger] .Q_listing_wrapper .Q_tabs_tab::before,
html[data-dashboard-style=contextual] .Q_listing_wrapper .Q_tabs_tab::before,
html[data-dashboard-style=hamburger] .Q_tabs_tab:before,
#dashboard[data-style=contextual] .Q_tabs_tab:before,
html[data-dashboard-style=hamburger] .Q_tabs_tab .Q_tabs_overflowGlyph,
#dashboard[data-style=contextual] .Q_tabs_tab .Q_tabs_overflowGlyph,
html[data-dashboard-style=hamburger] .Q_tabs_tab .Q_tabs_title,
#dashboard[data-style=contextual] .Q_tabs_tab .Q_tabs_title {
	color: #555;
	margin-top: 0;
}

html .Q_contextual .Q_contextual_top_arrow {
	border-bottom-color: #969a9c;
}
html .Q_contextual .Q_contextual_bottom_arrow {
	border-top-color: #969a9c;
}

html.DMS_notFound #content,
html.DMS_errors #content { padding: 30px; text-align: center; overflow: hidden; text-overflow: ellipsis; }
html.DMS_notFound .url,
html.DMS_errors .url { font-weight: bold; text-decoration: underline; }

span.c3 { font-weight: bold; }

.DMS_no_items {
	margin: 20px 0;
	text-align: center;
}
.Communities_column_profile .Q_column_slot {
	padding-top: 10px;
}
.Q_column_me .Q_expanded .Streams_interest_title {
	font-size: 14px;
}
.Q_columns_column h2.Q_title_slot {
	font-weight: normal;
}
.Q_column_0 .Q_columns_title {
	display: none;
}
.Q_column_slot .Streams_chat_tool {
	margin: 0 5px;
}
.Q_columns_column[data-title=Conversation] h2.Q_title_slot {
	padding-left: 50px;
}
html .Q_contextual .Q_listing li.Q_selected,
html .Q_contextual .Q_listing li.Q_current,
html .Q_contextual .Q_listing li.Q_current a,
html .Q_contextual .Q_listing li.Q_current a * {
	background: #fff;
	color: var(--selected-color);
}
.Q_contextual .Q_listing .Q_current {
	border-top: none;
}
html .Q_contextual li.DMS_notClickable {
	background: #969a9c;
	color: #fff;
	font-weight: bold;
	pointer-events: none;
}

.Q_column_courses .DMS_courses .DMS_course_preview_tool[data-match=false] {
	max-height: 0;
	min-height: 0;
	margin: 0;
	opacity: 0;
	transition: all 0.5s;
}
.Q_column_courses .DMS_courses .DMS_course_preview_tool[data-match=true] {
	max-height: 500px;
	transition: all 0.5s;
}
.Q_mobile #dashboard[data-style=icons] .Q_tab_me:before {
	display: none;
}
.Q_mobile #dashboard[data-style=icons] .Q_tab_me .Q_tabs_title {
	display: block;
}
.Q_mobile #dashboard[data-style=icons] .Q_tabs_tab.Q_tab_me img {
	width: 45px;
	height: 45px;
}
input.Communities_locations_filter_input,
input.Communities_filter_publishers_input {
	background: rgb(221, 221, 221);
	color: #000;
}
#dashboard .Q_tabs_compact.Q_tabs_horizontal .Q_tabs_tab {
	color: #222;
}

.Q_mobile #dashboard[data-style=icons] .Q_tabs_tab.Q_current::before {
	color: #94D9F6;
}
.Q_mobile #dashboard[data-style=icons] .Q_tabs_tab.Q_current {
	border-bottom: solid 4px #94D9F6;
}

.Q_button {
	background: #FFE989 !important;
	color: black !important;
}
.Q_placeholder {
	color: #aaaaaa;
}

.Q_columns_title {
	background: #222222;
	color: white;
}
.Q_icons_slot i {
	background: #777777 !important;
	color: white !important;
}
i.qp-communities-close {
	background: #333333 !important;
}

input[name=query].Streams_userChooser_input, input[name=query].Communities_conversationChooser_input, input[name=query].Communities_eventChooser_input, input[name=query].Communities_eventChooser_input:focus {
	color: white;
}

.Q_column_slot {
	background: #444444;
	color: white;
}
.Communities_me_column_tabContent {
	background: white;
	color: black;
}
.Q_columns_title .Q_close:before {
	color: white;
}

.Communities_me_column .Communities_me_icon::before {
	color: #94D9F6 !important;
}

.Communities_tabs[data-style=icons] .Communities_tab::before {
	color: white;
}

.Communities_tabs[data-style=icons] .Communities_tab.Q_current::before {
	color: #555555;
	font-weight: bold;
}

.Q_button {
	border: none;
}

.Communities_me_column_tabContent .Q_expandable_tool h2.Q_expanded {
	background: #FFE989;
}

.Communities_me_column_tabContent[data-val="interests"], {
	background: #444444;
}

html .Q_contextual .Q_contextual_top_arrow {
	border-bottom-color: #222222;
}

html .Q_contextual {
	background: #222222;
}

html .Q_contextual .Q_listing > li,
html .Q_contextual .Q_listing li {
	background: #444444;
	color: white;
}

html .Q_contextual .Q_listing li.Q_selected,
html .Q_contextual .Q_listing li.Q_current, html .Q_contextual .Q_listing li.Q_current a, html .Q_contextual .Q_listing li.Q_current a * {
	background: #444444;
	color: #94D9F6;
	font-weight: bold;
}

.DMS_notClickable {
	text-align: center !important;
	background: #222222 !important;
}

.Q_listing li {
	border: none !important;
}