:root {
  --theme-color: #4D8CCB; 		/* blue  var(--theme-color) */
  /* --theme-color: #87ba53;  */		/* green var(--theme-color) */
}

.mdm-beta-banner { 
	position:fixed;
	top:0;left:0;right:0;
	text-align:center;
	color:#fff;
	background-color:rgba(255,0,0,0.3);
	font-size:9px;
	z-index:1000;
}


.iti__flag {background-image: url("../images/img/flags.png");}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .iti__flag {background-image: url("../images/img/flags@2x.png");}
}
.iti { width: 100%; }


* {
	box-sizing: border-box;
}

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 300;
    src: local('Lato Light'), local('Lato-Light'), url('../fonts/Lato-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    src: local('Lato Regular'), local('Lato-Regular'), url('../fonts/Lato-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    src: local('Lato Bold'), local('Lato-Bold'), url('../fonts/Lato-Bold.ttf') format('truetype');
}


* { box-sizing:border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box; }


html{
	margin: 0;
	padding: 0;
	height:100%;
	/* scroll-behavior: smooth; */
}
body {
	margin: 0;
	padding: 0;
	height:100%;
	font-family: 'Lato', sans-serif;
	background-color: #f2f2f4;
	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
  	font-size:14px;
  	color: #121212;
}

h1,h2,h3,h4,h5,h6,ul { margin:0;padding:0;font-weight:400; }
form { display:inline;}

.header {
	/* position: absolute; */
	position: fixed;
	width: 100%;
	z-index: 3;
	height: 44px;
	background-color: #fff;
	border-bottom: 1px solid #eee;
}
.footer, .footer-login {
	/* position:fixed;bottom:0;background:#fff; */
	/* height:20px; */
	font-size:0.8em;
	text-align:center;
	margin:0 0 25px 0;
	color:#888;
	padding-bottom:10px;
}
.footer a, .footer-login a { color:#888 !important; }

.l { text-align:left }
.c { text-align:center }
.r { text-align:right }
.t { vertical-align:top }
.b { font-weight:700 }
.g { color: #999; }
.y { color: #87ba53; }
.n { color: red; }
.cc { text-transform:capitalize; }


a:link, a:visited { color:var(--theme-color);text-decoration:none; }
a:hover, a:active { text-decoration:underline; }


/* logo in header(mobile version) and side-nav (tablet & desktop) */
.logo {
	height: 44px;
	padding: 10px;
	font-weight: 700;font-size:1em;
}
.side-nav .logo {
	background-color: var(--theme-color);
	color: #fff;
	
}

.header .logo {
	color: var(--theme-color);
	float:left;
	height: 44px;
	z-index: 1;
	padding: 10px;
	font-weight: 700;
	color: var(--theme-color); /* #233245 */
	font-size:1.4em
}
.logo i {
	font-size: 22px;
}
.logo img {
	width:17px;
}
.logo span {
	margin-left: 0;font-size:1em;
}
.nav-trigger {
	position: relative;
	float: right;
	width: 20px;
	height: 44px;
	right: 30px;
	display: block;	
}
.nav-trigger span, .nav-trigger span:before, span:after {
	width: 20px;
	height: 2px;
	background-color: #35475e;
	position: absolute;
}
.nav-trigger span {
	top: 50%;
}
.nav-trigger span:before, .nav-trigger span:after {
	content: '';
}
.nav-trigger span:before {
	top: -6px;
}
.nav-trigger span:after {
	top: 6px;
}

.user-nav {
	display: none;
	float: right;
	padding:10px;
	height: 54px;
}
.user-nav .user-name {
	font-size: 0.9em;
	cursor:pointer;
/* 
	color: #fff;
	background:var(--theme-color);
 */
	color: var(--theme-color);
	background:#f7f7f7;
/* 
	color: #fff;
	background:var(--theme-color);
 */

	border-radius:8px;
	padding:5px 8px;
	display:inline-block;
}

/* side navigation styles */
.side-nav {
	/* position: absolute; */
	position: fixed;
	width: 100%;
	height: 100vh;
	background-color: #3d434f;
	z-index: 1;
	display: none;
}
.side-nav.visible {
	display: block;
}
.side-nav ul {
	margin: 0;
	padding: 0;
}
.side-nav ul li {
	padding: 0;
	border-bottom: 1px solid #555;
	position: relative;
	
}
.side-nav ul li.active:before {
	content: '';
	position: absolute;
	width: 4px;
	height: 100%;
	top: 0;
	left: 0;
	background-color: var(--theme-color);
}
.side-nav ul li a {
	color: #999;
	display: block;
	padding: 20px 16px;
	text-decoration: none;
	
}
.side-nav ul li a:hover {
	background-color: #4d535f;
	color:#fff;
}
.side-nav ul li a:hover i {
	color:#fff;
}
.side-nav ul li i {
	color: #999; /* #0497df */
	min-width: 20px;
	text-align: center;
	
}

.side-nav ul li.active a, .side-nav ul li.active i {
	color: #fff;
}
.side-nav ul li span:nth-child(2) {
	margin-left: 10px;
	/* font-size: 14px; */
	font-weight: 700;
	text-transform:uppercase;font-size:0.8em;
}
/* main content styles */
.main-content {
	padding: 40px;
	margin-top: 0;
	padding: 0;
	padding-top: 44px;
	padding-bottom:20px;
	
	overflow: scroll;
}
.main-content > .title {
	/* background-color: #fff; */
	/* border-bottom: 1px solid #b8bec9; */
	font-weight: 400;
	color: #333;
	overflow:auto;
	display:flex;
	height:55px;
	padding:0 20px;
	
}
.main-content > .title h2 {
	margin:auto 0;
	padding: 0;
	font-size: 1.6em;
	flex: 1 0 100px; 
}
.main-content > .title .buttons {
	margin:auto;
	padding: 0;
	flex: 1 0 100px;
}


table {
	width:100%; 
	margin:0;
	padding:0;
	border-collapse:collapse;
}
table th {
	padding: 6px 5px;
	border-top:1px solid #e5e5e5;
	border-bottom:1px solid #e5e5e5;
	text-transform: uppercase;
	font-size:0.8em;
	font-weight:700;
	text-align:left;
	color:#666
}
table td {
	padding: 8px 5px;
	/* font-size:0.9em; */
	font-weight:300;
}

table td.m {
	padding:15px 15px;
}
table td.m .card-title {
	padding:0 0 3px 0;
	font-size:1.1em;
	font-weight:700;
}


table.striping tr:nth-child(odd) td { background-color: #fff; }
table.striping tr:nth-child(even) td { background-color: #fafafa; }

table.tr-hover td:hover { cursor:pointer; }
table.tr-hover tr:hover td { background:#f2f2f4 }
table.tr-underline tr { border-bottom: 1px solid #e5e5e5; }

table.striping td a { font-weight:400; }



.progress {width:80px;border:1px solid #ddd;background-color:#eee;height:13px;overflow:hidden;border-radius:3px;}
.progress-meter {background-color:var(--theme-color);height:100%;}



.gg-screen-overlay {
	position:absolute;
	top:0;left:0;right:0;bottom:0;
	background-color:rgba(127,127,127,0.4);
	z-index:10;
	display:none;
}



/* main box container */
.main {
	display: flex;
	flex-flow: row wrap;
}
.widget {
	flex-basis: 350px;
	flex-grow: 10;
	/* height: 300px; */
	margin: 15px;
	border-radius: 6px;
	background-color: #ffffff;
	position: relative;
	box-shadow: 0 2px 7px -2px rgba(50,50,50,0.2);
	overflow:hidden;
}
.widget.full-width {
	flex-basis: 100%; 
	/* height: 200px;  */
}
.widget .title {
	text-transform: uppercase;
	border-bottom: 1px solid #eee;
	padding: 0 10px;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	display:flex;
	height:44px;
}
.widget .title h4 {
	color: #333;
	margin:auto;
	font-size:0.8em;
	font-size:1em;
	font-weight: 700;
	flex: 1 0 100px;
}
.widget .title .search-container {
	margin:auto;
	flex: 1 0 100px;
	padding-right:10px;
}

.search-box {
	border:1px solid #eee;
	border-radius:6px;
	padding:3px 8px;
	display:flex;
}
.search-box:focus-within {
    border: 1px solid #bbb;
}
.search-box .search-text { border:none !important;width:100%; }
.search-box label { color:#aaa;margin:auto; }

#gg-search-text-clear { cursor:pointer; }

.widget.gg-message-success div {
	background-color:#fff;
	color:var(--theme-color);
	padding:10px 20px;
	font-weight:700;
}
.widget.gg-message-success div i {
	margin-right:10px;
}
.widget.gg-message-error div {
	background-color:#fff;
	color:red;
	padding:10px 20px;
	font-weight:700;
}
.widget.gg-message-error div i {
	margin-right:10px;
}


.widget .title .buttons {
	margin:auto;
	padding: 0;
}

.widget .title.grey-bg {
	background-color: #ddd;
	color: #555;

}
.widget .title.theme-bg {	background-color: var(--theme-color);	}
.widget .title.theme-bg h4 { color: #fff; }

.widget .content-flex {
	display:flex;
	flex-flow:row wrap;
	padding:10px 0;
	background-color:#fff;

}
.content-flex-child {		/* two columns in widget */
	flex:1 0 320px;margin:0 10px;
}

.widget .content {
	padding:10px;
	background-color:#fff;

}
.widget .content h4, .widget .content-flex h4 {
	color: #333;
	margin:auto;
	font-size:0.8em;
	font-size:1.1em;
	font-weight: 700;
	padding:10px 0
	
}

.widget .table-content {
	margin:0;
	padding:10px;
	background-color:#fff;

}

/* Resets for non-box titles - box shadow not working */
/* 
.widget { background:transparent;border:none;box-shadow: none; }
.widget .content-flex,.widget .content, .widget .content-table {
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	box-shadow: 0 2px 7px -2px rgba(50,50,50,0.2);
}
.widget .title.grey-bg { background:transparent}
 */




.widget .gg-no-results {
	border:1px solid #eee;
	border-radius:3px;
	background-color:#f7f7f7;
	margin:10px auto;
	width:300px;
	padding:15px;
	text-align:center;
}
.gg-no-results i {
	color:#888;
}

.widget .gg-loading-overlay {
	position:absolute;
	top:0;left:0;right:0;bottom:0;
	background-color:rgba(127,127,127,0.3);
	text-align:center;
	padding-top:30px;
	border-radius:6px;
	display:none;
}
.widget .gg-loading-overlay i {
	margin:auto;
	font-size:2em;
	color:#888
}

.widget .navi-content {
	margin:0;
	padding:10px;
	text-align:center;
}
.navi-content .navi-first, 
.navi-content .navi-prev, 
.navi-content .navi-pages, 
.navi-content .navi-next, 
.navi-content .navi-last 
{
	display:inline-block;
	background:#f7f7f7;
	border:1px solid #ddd;
	padding: 3px 24px;
	color:#ccc;
	margin:0;
	text-transform:uppercase;
	font-size:0.9em
}
.navi-content .navi-pages { color:#888;} 
.navi-content .navi-first.active, 
.navi-content .navi-prev.active, 
.navi-content .navi-next.active,
.navi-content .navi-last.active 
{
	cursor:pointer;
	color:#888;
}

.navi-content .navi-first.active:hover,
.navi-content .navi-prev.active:hover,
.navi-content .navi-next.active:hover,
.navi-content .navi-last.active:hover
{
	background:var(--theme-color);
	color:#fff;
	
}

.navi-content .navi-prev {
	border-right:none;
}

.navi-content .navi-first {
	border-radius: 6px 0 0 6px;
	border-right:none;
}
.navi-content .navi-next {
	border-left:none;
}
.navi-content .navi-last {
	border-radius: 0 6px 6px 0;
	border-left:none;
}




.jq-dropdown-menu li {
	text-align:left;
	font-size:1em;
	text-transform:none;
	font-weight:normal;
	
}

.jq-dropdown-menu li.disabled {
	padding:5px 15px;color:#aaa;
}

.jq-dropdown-menu li > a {
	text-align:left;
	font-size:0.9em;
	text-transform:none;
	font-weight:normal;

}
.jq-dropdown-menu li > a .fa,
.jq-dropdown-menu li > a .fas,
.jq-dropdown-menu li > a .far {
	margin-right:10px;
	color: var(--theme-color);
}



/*
	--------------------------------------
	FORMS / INPUT
	--------------------------------------

*/
button.primary, a.button.primary {
	color:#fff;
	background-color:var(--theme-color);
	border:1px solid var(--theme-color);
}
button.primary:hover, a.button.primary:hover {
	background-color:#fff;
	border:1px solid var(--theme-color);
	color:var(--theme-color);
}
button.secondary, a.button.secondary {
	color:#555;
	background-color:#eee;
	border:1px solid #eee;
}
button.secondary:hover, a.button.secondary:hover {
	background-color:#ddd;
	border:1px solid #ddd;
	color:#555;
}
button.error, a.button.error {
	color:#fff;
	background-color:red;
	border:1px solid red;
}
button.error:hover, a.button.error:hover {
	background-color:#fff;
	border:1px solid red;
	color:red;
}
button.cancel, a.button.cancel {
	color:#555;
	background-color:#fff;
	border:1px solid #ccc;
}
button.cancel:hover, a.button.cancel:hover {
	background-color:#fff;
	border:1px solid #999;
	color:#555;
}
button.disabled, a.button.disabled {
	color:#ccc;
	background-color:#fff;
	border:1px solid #ddd;
}
button.disabled:hover, a.button.disabled:hover {
	background-color:#fff;
	border:1px solid #ddd;
	color:#ccc;
	cursor:default;
}


/* default button */
a.button {
	display:inline-block;
	text-align:center;
}
button, a.button {
	color:#888;
	cursor:pointer;
	padding:3px 8px;
	background-color:#fff;
	border:1px solid #ddd;
	border-radius:6px;
	text-transform: capitalize;
	
}
button:hover, a.button:hover {
	background-color:#ccc;
	border:1px solid #ccc;
	color:#fff;
	text-decoration:none;
}
button:focus, a.button:focus {outline:0;}

.main-content > .title button {
	padding:8px 8px;
}


button.medium, a.button.medium {
	/* width:100px; */min-width:7em; /* allow to adjust to site size without wrapping */
}
button.full, a.button.full {
	padding:8px 8px;
	font-size:1em;
}


.status-bubble {
	background-color:#eee;
	padding:2px 4px;
	border-radius:3px;
	color:#555;
	display:inline-block;
	font-size:0.7em;font-weight:400;
	/* width:100px;text-align:center; */
}
.status-bubble.cs1 {
	background-color:#dbefdc;		color:#285b2a;
}
.status-bubble.cs2 {
	background-color:#FDD9D7;		color:#7F231C;
}
.status-bubble.cs5 {
	background-color:#d3eafd;		color:#114e7e;
}
.status-bubble.cs6 {
	background-color:#FDD9D7;		color:#7F231C;
}
.status-bubble.cs7 {
	background-color:#FDD9D7;		color:#7F231C;
}
.status-bubble.cs10 {
	background-color:var(--theme-color);		color:#fff;
}




ul.flex-key-value {
	margin:0;
	padding:0;
}
.flex-key-value li {
	display: flex;
	flex-wrap: wrap;
	align-items: left;
	/* min-height:30px; */
	margin-bottom:5px;		/* Keep the lines nicely spaced */
	/* padding:5px 0; */
								/* border:1px solid red;  */
}
.flex-key-value > li > label {
  flex: 1 1 120px;
  max-width: 150px;
  color: #888;
  text-transform:capitalize;
  font-size:0.9em;
  padding:4px 0;
  								/* border:1px solid green; */
}
.flex-key-value > li > label + div {
  flex: 1 0 300px;/* line-height:22px; */
  margin:auto;
  overflow-wrap: break-word;
  word-break: break-word;
  								/* border:1px solid blue; */
  padding:0 5px 0 0;
}
.flex-key-value > li input[type="text"], 
.flex-key-value > li input[type="password"], 
.flex-key-value > li input[type="email"], 
.flex-key-value > li input[type="tel"], 
.flex-key-value > li textarea
 {
	max-width:600px;
	width:100%;
}


.flex-key-value > li > label + div.flex-container {
	padding: 0;
	/* margin-bottom:-4px */
}



div.flex-container .input-container-flex {
	display:flex;max-width:605px;flex-flow:row wrap;
	/* margin:0;padding:0; */
}
div.flex-container .input-container-flex input,
div.flex-container .input-container-flex select,
div.flex-container .input-container-flex radio
{
	/* margin:0 5px 4px 0; */
	margin-bottom:4px;
}
.input-container-flex input.flex-1 {	flex:0 0 100px; }	/* no shrink */
.input-container-flex input.flex-2 {	flex:1 0 150px; }	/* fill min 150px */




input[type="text"], input[type="password"], input[type="email"], input[type="tel"], textarea {
	/* font-size : 11px; */
	border : 1px solid #e7e7e7;
	padding : 4px 8px;
	color : #212121;
	margin :  0 5px 0 0;/* 0px 1px 1px 1px */
	border-radius: 2px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width:100px;
	font-size:14px;
	
}

textarea { height: 50px; display:block;  } /* block removes the additional margin/padding under the textarea */
textarea.double-height { height: 100px; }

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus, 
input[type="tel"]:focus,
textarea:focus,
select:focus
{
	outline: 0;
	border: 1px solid #aaa;
}

input[type="text"].large, input[type="password"].large, textarea.large {
	padding : 4px 6px;
	font-size : 12px;
}

select {
	border : 1px solid #ddd;
	padding : 4px 20px 4px 8px;
	width: 250px;
	color:#212121;
	font-weight:bold;
	margin : 0;/* 1px */
	border-radius: 2px;
	-webkit-appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: #eee;
	background-image:
		linear-gradient(45deg, transparent 50%, #888 50%),
		linear-gradient(135deg, #888 50%, transparent 50%),
		linear-gradient(to right, #eee, #eee);
	background-position:
		calc(100% - 10px) calc(1em - 3px), /* adjust the -8 and - 3 simult. to move arrow left and right */
		calc(100% - 5px) calc(1em - 3px),
		100% 50%;
	background-size:
		5px 5px,
		5px 5px,
		1.6em 2.5em;
	background-repeat: no-repeat;
	/* https://codepen.io/vkjgr/pen/VYMeXp */
}

select.multiple {
	background: #f7f7f7;
	padding : 2px 5px 2px 5px;
	border-bottom:1px solid #eee;

}
select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
}

select.full {
	font-size:1em;
	padding : 8px 20px 8px 8px;
	background-position:
		calc(100% - 10px) calc(1.3em - 3px), /* adjust the -8 and - 3 simult. to move arrow left and right */
		calc(100% - 5px) calc(1.3em - 3px),
		100% 50%;

}


input[type="checkbox"] {
	-webkit-appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	border:1px solid #ccc;
	height:16px;width:16px;
	border-radius:2px;
	margin:0px 5px 0px 1px !important;padding:0px;
	vertical-align:middle;

}
input[type="checkbox"]:checked {
	background:var(--theme-color) no-repeat;border:1px solid var(--theme-color);
	/* background:url('images/check-white.png') #aaa no-repeat;border:1px solid #aaa; */
	background-size:80%;
	background-position:center;

}
input[type="radio"] {
	-webkit-appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	border:1px solid #ccc;
	height:16px;width:16px;
	border-radius:8px;
	margin:0 5px 0 0;padding:0;
	vertical-align:middle;

}
input[type="radio"]:checked {
	background:var(--theme-color);
}

input[type="text"].numeric {
	text-align:right;
}

input::-webkit-contacts-auto-fill-button {
	visibility: hidden;
	display: none !important;
	pointer-events: none;
	height: 0;
	width: 0;
	margin: 0;
	position: absolute;
  	right: 0;
}

input:-webkit-autofill {
  -webkit-box-shadow: inset 0 0 0px 9999px white;
}


label.gg-radio-group {
	background:#eee;border-radius:5px;border:1px solid #eee;padding:2px 12px;
	margin:0 6px 0 0;
	display:inline-block;
	cursor:pointer;
}

select.search-status { width:100px; }

input.input-error { border:1px solid red; }
.text-error { color:red; font-size:0.9em;}

::-webkit-input-placeholder { color: #bbb; }




/* https://www.cssscript.com/realistic-ios-switch-pure-css/ */
/* <label class="form-switch"><input type="checkbox"><i></i> Label 1</label> */
.form-switch {
  display: inline-block;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* whole switch */
.form-switch i {
  position: relative;
  display: inline-block;
  margin-right: .5rem;
  width:36px;
  height: 20px;
  background-color: #e6e6e6;
  border-radius: 23px;
  vertical-align: text-bottom;
  transition: all 0.3s linear;
}

/* background of slide trajectory width should be i width minus 4px */
.form-switch i::before {
  content: "";
  position: absolute;
  left: 0;
  width: 32px;				/* width:76px; */
  height: 16px;
  background-color: #fff;
  border-radius: 11px;
  transform: translate3d(2px, 2px, 0) scale3d(1, 1, 1);
  transition: all 0.25s linear;
}

/* round button - no changes */
.form-switch i::after {
  content: "";
  position: absolute;
  left: 0;
  width: 16px;
  height: 16px;
  background-color: #fff;
  border-radius: 11px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24);
  transform: translate3d(2px, 2px, 0);
  transition: all 0.2s ease-in-out;
}

.form-switch:active i::after {
  width: 20px;					/* i::after width plus 4px */
  transform: translate3d(2px, 2px, 0);
}

.form-switch:active input:checked + i::after { transform: translate3d(14px, 2px, 0); }
.form-switch input { display: none; }
.form-switch input:checked + i { background-color: var(--theme-color); }
.form-switch input:checked + i::before { transform: translate3d(18px, 2px, 0) scale3d(0, 0, 0); }
.form-switch input:checked + i::after { transform: translate3d(18px, 2px, 0); }	/* slide length should be i::before width MINUS 14px */


.gg-form-response { margin:0 0 15px 0; }
.gg-form-question { font-weight:700;color:#888;font-size:0.9em; }
.gg-form-answer { font-weight:400; }
.gg-form-answer i { color:#ccc;font-size:0.8em;color:var(--theme-color) }
.gg-form-answer span { font-style:italic; }

.gg-form-table { max-width:600px; }
.gg-form-table th { font-size:0.6em;color:#888;border-top:none;text-align:center;}
.gg-form-table td { padding:4px 2px;text-align:center;font-size:1em }
.gg-form-table td:first-child { text-align:left; }
.gg-form-table tr:hover td { background-color:#f2f2f2; }
.gg-form-table tr:nth-child(even) {
  background-color: #f7f7f7;
}

input.gg-response-text, textarea.gg-response-text { width:100%;max-width:600px; }
.gg-form-response.gg-form-edit-mode { max-width:600px; }
.gg-form-edit-mode .gg-form-question { font-size:1.1em; }
.gg-form-edit-mode .gg-form-answer { line-height:25px; }



/*
	--------------------------------------
	Login Page
	--------------------------------------

*/


.login-content {
	margin:0;
	padding:5vh 0 0 0;

}
.login-box {
	max-width: 400px;
	border-radius:6px;
	padding:30px;
	margin:0 auto 10px auto;
	border:1px solid #eee;
	background-color:#fff;
	text-align:center;
	box-shadow: 0 2px 7px -2px rgba(50,50,50,0.2);

}
.login-content .login-footer {
	font-size:0.7em;
	max-width: 400px;
	margin:0 auto;
	text-align:center;

}

.login-box .title {
	margin:15px 0 30px 0;
	color:var(--theme-color);
	font-size:3.7em;
	padding:0;
	
}
.login-box .title span { padding:0;margin:0;line-height:1em; }
.login-box .title i { margin-right:10px; }
.login-box .title img { width:40px;margin-right:4px; }
.login-box .message {
	margin:15px;
	
	font-size:2em;
}
.login-box .input { margin: 20px 0; }
.login-box .input input { width:100%;font-size:1.2em;padding:8px; }

.login-box .button { margin: 20px 0; }
.login-box .button button { width:100%;font-size:1.2em;padding:10px; }

.login-box .input { margin: 20px 0; }
.login-box .password-reset { font-size:1em; }
.login-box .login-error { font-size:1em;color:red; }



.mobile-title { display:none; }



/* set element SPECIFIC to mobile */
@media screen and (max-width: 599px) {

	body { font-size:14px; }
	.footer {padding-bottom:50px;}

	.login-content { margin:50px 20px;}
	
	.main-content > .title { padding:0 12px;}
	.main-content > .title.mobile-header {
		padding: 0 5px;
		position: fixed;top:0;
		width: 100%;
		z-index: 4;
		height: 44px;
		background-color: #f7f7f7;
		border-bottom: 1px solid #eee;
		overflow: visible; /* for jqdropdown visibility */
	}
	.mobile-title { display:block;margin:auto;font-size:1.2em;font-weight:700 }
	.main-content > .title h2 {
	
	}

	.main-content > .title.mobile-header button,
	.main-content > .title.mobile-header .button
	 {
		border:none;
		font-size:1em;
	}


	table.responsive thead { display:none;  }
	table.responsive th.d { display:none;  }
	table.responsive td.d { display:none;  }

	.widget {
		margin: 0 0 15px 0;
		border-radius: 0px;
		
	}
	.widget .title {
		border-radius: 0px;
	}
	.widget .table-content {
		padding:0px;
	}
	.widget.gg-message-success,.widget.gg-message-error { margin:15px;border-radius: 6px;}

	input[type="text"], input[type="password"], textarea {
		/* viewport maximum-scale=1 */
	}

	select.title-select {
		width:100%;
	}

	.flex-key-value li { padding:10px 0;border-bottom:1px solid #ddd}
	.flex-key-value > li > label {
		color:#222;text-transform:uppercase;font-size:0.7em;
	}

	.navi-content .navi-first, 
	.navi-content .navi-prev, 
	.navi-content .navi-pages, 
	.navi-content .navi-next, 
	.navi-content .navi-last 
	{
	padding: 15px 20px

	}

	.widget.gg-message-success, 
	.widget.gg-message-error {
		position:absolute; z-index:100;
		bottom:50px;left:0;right:0;
		box-shadow: 0 2px 15px -2px rgba(50,50,50,0.3);
	}
	.widget.gg-message-success div, 
	.widget.gg-message-error div {
	/* 
	background:rgba(0,0,0,0.3);
		color:#fff;
 */
	}

	.gg-form-response { padding-bottom:15px;border-bottom:1px solid #ccc; }

}



/* set element styles to fit tablet and higher(desktop) */
@media screen and (min-width: 600px) {

	.widget.gg-message-success, 
	.widget.gg-message-error {
		position:absolute; z-index:100;
		top:25px;right:0;
		width:400px;
		box-shadow: 0 2px 15px -2px rgba(50,50,50,0.3);
	}


	.header {
		background-color: #fff;
		z-index: 1;
	}
	.header .logo {
		display: none;
	}
	.nav-trigger {
		display: none;
	}
	.nav-trigger span, .nav-trigger span:before, span:after {
		background-color: #fff;
	}
	.user-nav {
		display: block;
		z-index: 2;
	}
	.side-nav {
		display: block;
		width: 70px;
		z-index: 2;
	}
	.side-nav ul li span:nth-child(2) {
		display: none;
	}
	.side-nav .logo i {
		padding-left: 12px;font-size:25px;
	}
	.side-nav .logo img {
		padding-left: 12px; width:36px;
	}
	.side-nav .logo span {
		display: none;
	}
	.side-nav ul li i {
		font-size: 26px;
	}
	.side-nav ul li a {
		text-align: center;
	}
	.side-nav ul li.m {
		display: none;
	}

	.main-content {
		margin-left: 70px;
	}
	.footer {
		margin-left: 70px;
	}
	table.responsive th.m { display:none;  }
	table.responsive td.m { display:none;  }



}
/* set element styles for desktop */
@media screen and (min-width: 1100px) {
	.header {height: 64px;}
	.logo { height: 64px;font-size:1.6em;line-height:45px;}
	.logo i { font-size: 25px;}

	.side-nav .logo img {
		padding-left: 5px; width:22px;
	}

	.main-content { padding-top: 64px;} 
	.user-nav {padding:20px; }
	.side-nav {
		width: 200px;
	}
	.side-nav ul li span:nth-child(2) {
		display: inline-block;
	}
	.side-nav ul li i {
		font-size: 13px;
	}
	.side-nav ul li a {
		text-align: left;
	}
	.side-nav .logo i {
		padding-left: 0;
	}
	.side-nav .logo span {
		display: inline-block;
	}
	.main-content {
		margin-left: 200px;
	}
	.footer {
		margin-left: 200px;
	}
	table.responsive th.m { display:none;  }
	table.responsive td.m { display:none;  }

}


.db { border:1px solid red; }