body {
	background-color: #f5f5f5;
	min-height: 100%;
	font-family: 'Open Sans', sans-serif;
}

#page{
    padding-bottom:100px
}

.row {
    min-width: inherit !important;
    max-width: 82em;
}

h1,
h2,
h3,
h4,
h5,
h6,
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
	font-family: 'Open Sans', sans-serif;
	margin: 0px;
	padding: 0px;
	color: #5aaba9;
}
h1 {
	font-size: 1.8em;
	font-weight:lighter;
	color:#333;
}
h2 {
	font-size: 1.4em;
	padding: 10px 0px 10px 0px;
	font-weight:lighter;
	color:#333;
}
h3 {
	font-size: 1.4em;
	font-weight:lighter;
	color:#333;
}
h4 {
	font-size: 1.4em;
	font-weight:lighter;
	color:#333;
}
h5 {
	font-size: 1.4em;
	font-weight:lighter;
	color:#333;
}


/* Sharepint styles */

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

/* End Sharepoint Styles */

/* Forms */
.flex-input-label{
	float: right;
}

.flex-input-label:hover{
	cursor: pointer;
}

.flex-input-label i{
	color: #26a69a;
}

input[type=text]{
	height:3rem;
}

/* Message/User Prompt Colors */
.button.success, .success{
	background-color: #008c95;
	color: #ffffff;
}


.button.success:hover{
	background-color: #018088;
}

.alert{
	background-color: #FF4C4C;
	color: #ffffff;
}

.button-toolbar .button.alert:hover{
	background-color: #E54444;
}

.warning{
	background-color: #FFB732;
	color: #ffffff;
}

.info{
	background-color: #008CBA !important;
	color: #ffffff !important;
	border:none;
	padding:20px;
	font-size:1.1em;
	margin-bottom:0px;
}

/* Navigation and topbars */
.bar {
	float: left;
	width: 100%;
	background-color:#36474d;
}

nav, nav .nav-wrapper i, nav a.button-collapse, nav a.button-collapse i {
	height: 55px;
	line-height: 51px;
}

nav.globalnav .nav-wrapper
{
	height:42px;
}

nav.globalnav
{
	height:42px;
}

nav.globalnav ul li a
{
	text-transform:uppercase;
	font-size:0.8em;
	padding:0px 10px;
	line-height:42px;
	display:block;
	font-family: 'Open Sans', 'Open Sans', sans-serif;
}

nav.globalnav ul li a:hover
{
	text-decoration:underline;
}

nav.topbar ul li a
{
	font-size:0.9em;
}

nav .nav-wrapper .material-icons
{
	font-size:1.4em;
}

nav .brand-logo {
	padding: 5px;
}

nav .brand-logo  img
{
	height:40px;
}

.open-nav{
	cursor: pointer;
	padding: 0 0 0 5px;
}

.navigation {
	background: #253235;
}

.navbar-fixed{
	top: 0;
	position: fixed;
	width: 100%;
	z-index:1100;
}

nav {
	box-shadow: none;
}

.hide-customise-link{
	display:none;
}

/* Status notification - badge class material */
nav ul a span.badge {
	position: static;
	margin-left: 4px;
	margin-right: 15px;
	border-radius: 50px;
	color: #ffffff;
	line-height: 0;
}

/* Modals */

/* Size of modal on bigger screen */
@media screen and (min-width: 768px) {
	.modal {
		width: 400px;
	}
}

.group-creator a{
	text-decoration: none !important;
}

.modal .modal-footer .btn, .modal .modal-footer .btn-large, .modal .modal-footer .btn-flat {
	float: right;
	margin: 5px;
}

/* Toast Notifications */
.toast-success{
	background-color: #7FBF7F;
	color: #ffffff;
}

.toast-info{
	background-color: #E3F2FD;
	color: #ffffff;
}

.toast-warning{
	background-color: #FFB732;
	color: #ffffff;
}

.toast-error{
	background-color: #FF4C4C;
	color: #ffffff;
}

#toast-container .toast{
	border-radius: 0;
	word-break: normal;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}


.error, .notfound{
	background-color:#2a5f5d;
}

.error .wrapper, .notfound .wrapper{
	padding:30px;
	text-align:center;
	color:#fff;
}
.error .wrapper h1, .notfound .wrapper h1{
	font-size:10em;
	font-weight:bold;
	text-transform:uppercase;
	color:#fff;
}
.error .wrapper h2, .notfound .wrapper h2{
	font-size:2em;
	color:#fff;
}

#appinfo-modal{
	max-width:40em;
	position:absolute;
}

/* Status Notification in Navbar */
.notification{
	background-color:#2c7;
	color:#fff;
	padding:3px;
	line-height:13px;
	border-radius:50px;
	text-align:center;
	width:20px;
	height:20px;
	margin:0px auto;
	display:none;
}

.notification.active{
	background-color:red;
}

/* Footer */

/* Status App Tray */
.app-tray{
	height: 400px;
	display: block;
	overflow-y: auto;
	opacity: 1;
	position:fixed;
	bottom:0px;
	left:0px;
	right:0px;
	display:none;
	padding:10px;
	background-color:#ffffff;
	z-index: 900;
	-webkit-box-shadow: 5px 5px 5px 10px rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
	-moz-box-shadow: 5px 5px 5px 10px rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
	box-shadow: 5px 5px 5px 10px rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
}

.private{
	background-image: url('../image/private_app.png');
	background-repeat: no-repeat;
	background-position: top left;
	top:0px;
	left:0px;
	height:40px;
	width:40px;
	position:absolute;
}

/*.installed{
	background-image: url('../image/selected_tick.png');
	background-repeat: no-repeat;
	background-position: top right;
	top:0px;
	right:0px;
	height:40px;
	width:40px;
	position:absolute;
}*/

/* Unsure about these styles, not sure where they are used */

.app-tags {
	margin: 0px 10px 10px 0px;
	padding: 0;
	list-style: none;
	float: left;
}

.app-tags li, .app-tags a {
	float: left;
	line-height: 14px;
	position: relative;
	font-size: 0.8em;
	margin: 0px 4px 4px 0px;
	text-transform: uppercase;
	background-color: #5aaba9;
	padding: 5px;
	color: #fff;
}

.switcher li .toggle i {
	color: #504d8b;
}
.switcher li .toggle.selected i {
	color: #902a7b;
}


/* STORE CSS - Apps and Featured Apps */

/* Flex I Want to Store Page */

/* Preloader - spinner during card load */
.flex-preloader{
	margin-top: 100px;
}

/* Layout */
#flex-store-content{
	padding-top:10px;
}


#category-column{
	padding:0;
	margin:0;
}

#search-column{
	padding:0;
	margin:0;
}


#capabilities-select{

}

#search-box{
	padding: 0 0.75rem;
}

.capabilities-collection ul, menu, dir {
	display: block;
	list-style-type: disc;
	-webkit-margin-before: 0;
	-webkit-margin-after: 0;
	-webkit-margin-start: 0;
	-webkit-margin-end: 0;
	-webkit-padding-start: 0;
}

.capabilities-collection .collection {
	overflow: hidden;
	position: relative;
	margin: 0;
	border-radius: 0;
	border: 0;
	border-right: 1px solid #e0e0e0;
	border-bottom: 1px solid #e0e0e0;
}

.capabilities-collection .collection.with-header .collection-header {
	background-color: #253235;
	padding: 20px 5px 20px 5px;
	border: 0;
}

.capabilities-collection .collection.with-header .collection-header h4{
	font-weight: lighter;
	font-size: 1.6em;
	color: #ffffff;
}

/* flex icon box in category collection header */
.header-icon-box{
	float:left;
	width: 80px;
	padding: 5px;
}

/* store header */
.store-header-title{
	text-align: center;
	padding: 5px;
}

/* Category title */
.category-title{
	text-align: center;
	padding: 10px 20px;
	color:#333;
	font-family: 'Open Sans', sans-serif;
}

/* Highlight Capability on selection */
.capabilities-collection .collection li.selected .category-title{

}

.capabilities-collection .collection li.selected .all{
	color:#ffffff;
	background-color: rgba(153,153,153,0.65);
}

.capabilities-collection .collection li.selected .team{
	color:#ffffff;
	background-color: rgba(161,199,80, 0.65);
}

.capabilities-collection .collection li.selected .office{
	color:#ffffff;
	background-color: rgba(235,59,0, 0.65);
}

.capabilities-collection .collection li.selected .extranet{
	color:#ffffff;
	background-color: rgba(242,88,86, 0.65);
}

.capabilities-collection .collection li.selected .search{
	color:#ffffff;
	background-color: rgba(98,174,197, 0.65);
}

.capabilities-collection .collection li.selected .links{
	color:#ffffff;
	background-color: rgba(185,124,168, 0.65);
}

.capabilities-collection .collection li.selected .intranet{
	color:#ffffff;
	background-color: rgba(255,150,22, 0.65);
}

.capabilities-collection .collection li.selected .process{
	color:#ffffff;
	background-color: rgba(96,166,225, 0.65);
}

.capabilities-collection .collection li.selected .social{
	color:#ffffff;
	background-color: rgba(225,129,52, 0.65);
}

.capabilities-collection .collection li.selected .zero-training{
	color:#ffffff;
	background-color: rgba(102, 154, 204, 0.65);
}

.coloured-bar {
    background-color: #cde6e6;
    padding: 15px 0px 15px 0px;
}

.capabilities-collection .collection .collection-item {
	display:block;
	width: 100%;
	background-color: #ffffff;
	font-size: 1.1em;
	line-height: 1.5rem;
	padding: 0;
	margin: 0;
	border-bottom: none;
}

.capabilities-collection .collection.with-header .collection-item {
	padding-left: 0;
}

/* Icons and colours for categories */
.category-icon-box{
	float:left;
	width: 50px;
	padding: 10px 17px;
}

/* Icon box colours */
.category-icon-box .fa{
	color: #ffffff;
}

/*
When creating your CSS selector,
change "brown" to something of your choosing
*/
.waves-effect.waves-all .waves-ripple {
	/* The alpha value allows the text and background color
    of the button to still show through. */
	background-color: rgba(153,153,153, 0.65);
}

.waves-effect.waves-team .waves-ripple {
	/* The alpha value allows the text and background color
    of the button to still show through. */
	background-color: rgba(161,199,80, 0.65);
}

.waves-effect.waves-office .waves-ripple {
	/* The alpha value allows the text and background color
    of the button to still show through. */
	background-color: rgba(235,59,0, 0.65);
}

.waves-effect.waves-extranet .waves-ripple {
	/* The alpha value allows the text and background color
    of the button to still show through. */
	background-color: rgba(242,88,86, 0.65);
}

.waves-effect.waves-search .waves-ripple {
	/* The alpha value allows the text and background color
    of the button to still show through. */
	background-color: rgba(98,174,197, 0.65);
}

.waves-effect.waves-links .waves-ripple {
	/* The alpha value allows the text and background color
    of the button to still show through. */
	background-color: rgba(185,124,168, 0.65);
}

.waves-effect.waves-intranet .waves-ripple {
	/* The alpha value allows the text and background color
    of the button to still show through. */
	background-color: rgba(255,150,22, 0.65);
}

.waves-effect.waves-process .waves-ripple {
	/* The alpha value allows the text and background color
    of the button to still show through. */
	background-color: rgba(96,166,225, 0.65);
}

.waves-effect.waves-social .waves-ripple {
	/* The alpha value allows the text and background color
    of the button to still show through. */
	background-color: rgba(225,129,52, 0.65);
}

.waves-effect.waves-zero-training .waves-ripple {
	/* The alpha value allows the text and background color
    of the button to still show through. */
	background-color: rgba(102, 154, 204, 0.65);
}

.flex-all{
	background-color: #999999;
}

.flex-team{
	background-color: #a1c750;
}

.flex-office{
	background-color: #EB3B00;
}

.flex-extranet{
	background-color: #f25856;
}

.flex-search{
	background-color: #62aec5;
}

.flex-links{
	background-color: #b97ca8;
}

.flex-intranet{
	background-color: #ff9616;
}

.flex-process{
	background-color: #60a6e1;
}

.flex-social{
	background-color: #e18134;
}

.flex-zero-training{
	background-color: #669ACC;
}


/* Typeahead - Store Search Page */

div.awesomplete > ul {
	z-index:5 !important;
}

div.awesomplete{
	display: block;
	/*float:right;*/
	/*width:350px;*/
}

div.awesomplete > ul {
	position: absolute;
	left: 0;
	z-index: 1;
	min-width: 100%;
	box-sizing: border-box;
	list-style: none;
	padding: 0;
	border-radius: 0;
	margin: .2em 0 0;
	background-color: #fff;
	border: 1px solid rgba(0,0,0,.3);
	box-shadow: .05em .2em .6em rgba(0,0,0,.2);
	text-shadow: none;
}

div.awesomplete > ul > li{
	position: relative;
	padding: .2em .5em;
	cursor: pointer;
}

div.awesomplete > ul > li[aria-selected="true"] {
	background-color: #59b3ce;
	color: #ffffff;
}

div.awesomplete mark {
	background: none;
}

div.awesomplete li:hover mark {
	background: none;
}

div.awesomplete li[aria-selected="true"] mark {
	background: none;
	color: inherit;
}



/* NEW CARD MATERIAL LAYOUT - all app that display in expanded view */

.card{
	border-radius: 0;
}

.card .card-image img{
	border-radius: 0;
}

.card-close {
	cursor: pointer;
}

/* To hide and display extra card reveal info (flip)*/
.hide-data{
	display:none;
}

.display-data{
	display:inline;
}


/* Not sure where this goes */
.app-install-status{

}

.app{
	position:relative;
	box-shadow: none;
	width: 144px;
	float: left;
	margin: 0px 5px 10px 5px;
	background-color: #fff;
	overflow: hidden;
}


.remove-app
{
    padding-right:10px;
}

/* Featured App */

.app.app-featured
{
	width:100% !important;
	border:1px solid #ddd;
}


/*
#featured-app
{
	width:100%;
}
*/

.app-featured .app-image {
	float: left;
	width: 20%;
	background-color: #40a27d;
	padding: 20px;
}

.app-featured .app-content {
	margin-left: 21%;
	width: auto;
	float: none;
	border: none;
}

.app-featured .app-image img {
	border: 3px solid #fff;
}

.app-panel-header
{
	width:144px;
	height:144px;
	overflow:hidden;
	background-color:#333;
}

.app-panel-header img
{
	width:144px;
	height:144px;
}

.app-panel-header h1
{
	position:absolute;
	bottom:0px;
	left:0px;
	right:0px;
	font-size:0.8em;
	padding:10px;
	color:#fff;
	background-color:rgba(0, 0, 0, 0.2);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.app .directory-overlay
{
	position:absolute;
	top:0px;
	bottom:0px;
	left: 0px;
	right:0px;
	background-color:rgba(0, 0, 0, 0.6);
	text-align:center;
}

.app .directory-overlay  i
{
	color:#fff;
	font-size:3em;
	margin-top:55px;
}

/* End Flex Store */


/* Other Pages */

/* Title and background on all wizard style pages */
.title-bar {
	padding: 20px 20px;
	margin: 0;
}

.title-bar .row{
	margin:0px;
}

.title-bar h1 {
	color: #fff;
	font-weight: lighter;
}

.title-bar h1 .fa{
	padding-right: 10px;
}

.title-bar p {
	color: #fff;
	font-weight: lighter;
	font-size: 1.2em;
	padding:5px 0px;
	margin:0px;
}

.wizard-step-title-bar{
	padding: 10px 10px;
	margin: 0;
}


.wizard-step-title-bar .row{
	margin:0px;
}

.wizard-step-title-bar h1 {
	color: #fff;
	font-weight: lighter;
}

.wizard-step-title-bar h1 .fa{
	padding-right: 10px;
}

.wizard-step-title-bar p {
	color: #fff;
	font-weight: lighter;
	font-size: 0.8em;
	padding:5px 0px;
	margin:0px;
}

/* Form Wizard */

/* Tabs */
.tabs {
	margin: 0px;
	overflow: hidden;
	list-style-type:none;
	padding:0px;
}

.tabs li
{
	float:left;
	width:50%;
	margin:0px;
}

.tabs li a{
	text-decoration:none;
	background-color: #47a5a5;
	float:left;
	width:100%;
	font-weight:bold;		
	color:#fff;
	text-transform:uppercase;
	padding:10px;	
}

.tabs li a.active {
	background-color: #339594;
}

/* ASP NET Wizard css - disabled materializecss.css code at line 2967 to turn off padding in tables */
/* Tables on request wizard */
.wizard-form-container td, th {
	padding: 7px 0 0 0;
	display: table-cell;
	text-align: left;
	vertical-align: middle;
	border-radius: 2px;
}


/* Tables/Lists */

/* user functionality for lists */
#flex-table-toolbox{
	text-align: right;
    padding:10px 20px 0px 0px;
}

/* search box */
#flex-table-searchfield{
	margin: 10px 0 10px 0;
	display: none;
}

#flex-table-searchfield .input-field label {

}

#flex-table-searchfield .input-field{
	margin-top: 0;
	padding-left: 3rem;
}

/* filters box */
#flex-table-filters{
	margin: 10px 0 10px 0;
	display: none;
}

.flex-search-field{
	display: block;
	float: right;
	width: 350px;
}

.flex-search-box {
	padding: 10px;
	height: auto;
	margin: 10px 0;
	font-size: 0.9em;
	font-family: 'Open Sans', 'sans-serif';
	width: 100%;
}

.sort{
	cursor: pointer;
}

.sort.asc:after {
	font-weight: normal;
	font-style: normal;
	font-size: 16px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	word-wrap: normal;
	-webkit-font-smoothing: antialiased;
	-webkit-transform: rotate(90deg);
	vertical-align: middle;
}

.sort.desc:after {
	font-weight: normal;
	font-style: normal;
	font-size: 16px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	word-wrap: normal;
	-webkit-font-smoothing: antialiased;
	vertical-align: middle;
}

.sort.asc:after .sort.desc:after .sort:hover {
	display: inline-block;
}

td, th {
	padding:15px 5px;
	display: table-cell;
	text-align: left;
	vertical-align: middle;
	border-radius: 2px;
}

#flex-table-filters {
}

.filter-toolbar{
	margin: 20px 0px 0px 0px;
	width:100%;
	display:inline-block;
}

.filter-toolbar .ent-only{
    display:none;
}


.flex-pagination{
	margin: 10px;
}

ul.pagination 
{
	padding:0px;
	margin:0px;
}

.pagination li a {
	font-size:1.2em !important;
	padding:5px !important;
}

.pagination li.active a {
	background-color: #26a69a;
	color: #ffffff !Important;
}

.pagination li:hover a {
	background-color: #22958A;
	cursor: pointer;
}

/* My Requests Page */

/* Request Error */
.request-error-box{
	background-color: #d32f2f;
	font-size: 1.0em;
	color: #ffffff;
}

.app-creator .cancel{
	background-color:#ee6e73;
}

.app-creator > table
{
	width:100%;
}

.app-creator > table td, .app-creator > table tr
{
	padding:0px;
}


/* App Request Page */
.flex-form-container{

}

.wizard-summary{
	background-color: #ffffff;
	-webkit-box-shadow: 0px 14px 28px -28px rgba(51,51,51,1);
	-moz-box-shadow: 0px 14px 28px -28px rgba(51,51,51,1);
	box-shadow: 0px 14px 28px -28px rgba(51,51,51,1);
}

@media screen and (max-width: 768px) {
	.app-summary-icon {
		padding-top: 20px;
		text-align:center;
		float: none !important;
	}

	.app-summary-icon img {
		height: auto;
	}
}

.app-summary-icon {
	float: left;
}

.app-summary-icon img {
	width: 150px;
}

.wizard-summary-content{
	width: 100%;
	padding:20px;
	display: inline-block;
}

@media screen and (max-width: 768px) {
	.app-summary {
		padding: 20px !important;
	}

	.app-summary-title{
		text-align: center !important;
	}
}

.app-summary {
	padding: 0px 0px 0px 170px;
}

.app-summary-title span{
	font-family: "Open Sans", sans-serif;
	font-weight: 300;
	font-size: 1.5em;
}

@media screen and (max-width: 768px) {

	.app-summary-short-description {
		float: none !important;
	}

	.app-summary-short-description p {
		text-align: center !important;
	}
}

.app-summary-short-description {
	float: left;
}

.app-summary-short-description p{
	text-align: left;
	font-family: "Open Sans", sans-serif;
	font-weight: 300;
	font-size: 1.1em;
}

.app-summary-short-description span{
	font-family: "Open Sans", sans-serif;
	font-weight: 500;
	font-size: 1.0em;
}

@media screen and (max-width: 768px) {
	.app-summary-installation {
		text-align: center !important;
	}

	.app-summary-installation .btn{
		margin: 20px !important;
	}
}

.app-summary-installation {
	text-align: left;
	width:100%;
	float:left;
}

.app-summary-installation .btn{
	margin: 30px 0px 0px 0px;
	float:left;
}

.app-image-content {
	padding: 20px 20px 20px 20px;
}

.lSSlideWrapper, .lSSlideOuter .lSPager.lSGallery li
{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	border-radius: 0px;
	border:3px solid #333;
}

.lSSlideOuter .lSPager.lSGallery li.active, .lSSlideOuter .lSPager.lSGallery li:hover
{
	border-radius: 0px;
	border:3px solid #2bbbad;
}

.app-image-content img{
	width: 50%;
	height: auto;
}

.slider .indicators .indicator-item.active{
	background-color: #26a69a;
}

.slider .slides li img{
	background-position: left;
}

.app-detail-expand-button{
	display:inline-block;
	margin:10px 0px;
	text-align:center;
	width:100%;
}

.app-detail-expand-button .btn{
	margin:0px auto;
}

#app-features-text{
	display: none;
}

.app-previews{

}

.app-image{

}

.app-image img{
	width: 100%;
	height: auto;
}

.flex-app-description-title{
	font-weight: 400;
	font-size: 1.1em;
}

.flex-app-description-text{
	padding:0px;
	margin:0px 0px 20px 0px;
}

.app-details-content{
	width: 100%;
	display: inline-block;
	padding: 0px 20px 20px 20px;
}

.app-summary-text{

}

.app-summary-text p{
	font-family: "Open Sans", sans-serif;
	font-size: 1.1em;
	line-height:1.6em;
}

.flex-collapsible-list-text{
	font-family: "Open Sans", sans-serif;
	font-size: 1em;	
	color:#333;
}

.wizard-details{
	background-color: #ffffff;
	margin: 20px 0 20px 0;
}

.wizard-details .card-content{
	text-align: left;
	height: auto;
}

.builder-form{	
	padding:20px;
    background-color:#fff;
}

.button-content
{
    margin:0px 10px 0px 10px;
}



.log-critical
{
    background-color:#555;
    color:#fff;
}

.log-warning
{
    background-color:#f08a24;
    color:#fff;
}
.log-error
{
    background-color:#f04124;
    color:#fff;
}

.builder-form input,
.builder-form textarea
{
    font-size:1.1em;
    font-weight:lighter;
	font-family: 'Open Sans';
	background-color:#f2f2f2;
	border:1px solid #ccc;
	padding:0px 10px;
    box-sizing: border-box;
	width:100%;
}

.builder-form select
{
    font-size:1.1em;
    font-weight:lighter;
	font-family: 'Open Sans';
	background-color:#f2f2f2;
	border:1px solid #ccc;
	padding:10px 10px;
    box-sizing: border-box;
	width:100%;
}

.prefix
{
    height: 3rem;
	line-height: 3rem;
}


.builder-form textarea
{
	padding:10px;		
}

.wizard-review{
	margin: 20px 5px 5px 5px;
}

.form-wrapper{
    padding:10px 0px;
}

.flex-form-input-header{
	margin: 0 5px 0 5px;
}

.flex-form-input-header p{
	margin: 1px 10px 0 0;
}

.flex-form-input-header i{
	margin: 0 5px 0 5px;
}

.flex-form-checkbox{
	margin: 5px 5px 40px 5px;
}

.flex-form-switch{
	margin: 5px 5px 50px 5px;
}

/*
	Extra small devices Phones (<768px)
	Small devices Tablets (≥768px)
	Medium devices Desktops (≥992px)
	Large devices Desktops (≥1200px)
*/

.flex-form-radio-group {
	display: inline-block;
	width: 100%;
	margin: 0 5px 40px 5px;
}

.flex-radio-btn {
	display: block;
	padding: 0;
}

@media screen and (min-width: 768px) {
	.flex-radio-btn {
		display: block;
		float: left;
		padding: 5px;
	}
}

.button-toolbar{
	margin: 10px 0px 0px 0px;
}

.button-toolbar .btn{
	margin: 5px;
}

/* Processing Page */

#processing-title{

}

.builder-form-progress .card-content{
	height:100%;
	text-align:left;
}

.builder-form-progress  .card-content label {
	font-size: 1.1em;
	color: #9e9e9e;
}

.builder-form-progress  .card-content p{
	width: 100%;
	font-size: 1.0em;
}

.builder-form-progress  .card-content label {
	font-size: 1.1em;
	color: #9e9e9e;
}

.collapsible-body{
	background-color: #ffffff;
	padding: 15px;
}

.collapsible-body label {
	font-size: 1.1em;
	color: #9e9e9e;
}

#BuildLogEntries{
	width: 100%;
	font-size: 1.0em;
}

/* HOME - App Groups */

/* Colors for cards */

.dark-primary-color    { background: #00796B; }
.default-primary-color { background: #009688; }
.light-primary-color   { background: #B2DFDB; }
.text-primary-color    { color: #FFFFFF; }
.accent-color          { background: #607D8B; }
.primary-text-color    { color: #212121; }
.secondary-text-color  { color: #727272; }
.divider-color         { border-color: #B6B6B6; }

/* clearfix */
.myapps-result:after {
	content: ' ';
	display: block;
	clear: both;
}

.myapps-result{
	margin: 20px 0px 0px 0px;
}

.primary-content{
	width: 10px;
	margin: 2px;
	color: #26a69a;
}

/* Group */

/*Small screens*/
@media only screen {} /* Define mobile styles */

@media only screen and (max-width: 40em) {
	.myapps-result {
		margin: 0px;
	}
.card-placeholder{
	margin:5px 5px 25px 10px !important;
}
	
} /* max-width 640px, mobile-only styles, use when QAing mobile issues */

.app-group{
	/* Two types of teal = #009688 or #198C8C, grey background is below*/
	background-color:#dddddd;
	float: left;
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
	transition: box-shadow .25s;
	width: 249px;
	height: 300px;
}

.app-group .app-group-content{
	overflow: hidden;
	float: left;
	width: 100%;
	height: 230px;
	padding: 5px;
}

.app-group .app-group-content > ul
{
	margin:0px;
	padding:0px;
    min-height:160px;
}

.app-group .app-group-title{
    padding: 10px 0 15px 10px;
    background-color: #339594;
    text-transform: none;
    color: #fff;
    font-weight: bold;
    font-size: 1.1em;
}


.app-group .app-group-title .card-title{
	cursor: pointer;
	font-size: 1.1em;
	padding: 0;
	margin: 0;
	line-height: 1.2em;
}

    .card-features {
        cursor: pointer;
        font-size: 1.1em;
        padding: 0;
        margin: 0;
        line-height: 1.2em;
        text-align: right;
    }


.app-group .app-group-action{
	border: none;
	width: 20%;
}

.app-group .app-action-button{
    padding: 0 10px 0 0;
}

.app-group .app-group-action span {
	cursor: pointer;
}

/* Group minimised - apps */
.app-group .card-home{	
	float: left;
	margin: 5px;
}

/* Hide all none essential buttons and information while group minimised */
.app-group .card-home .card-content{
	
}

.app-group .card-home .card-action{
	
}

.app-group .card-home .corner-ribbon{
	
}

.app-group .card-home .card-capability{
	
}

/* Group Expand */
.app-group.expand {
	/* background-color:rgba(153,153,153,0.50); */
	background-color: #dddddd;
	width: 100% !important;
	height: auto !important;
	float: left !important;
	overflow:visible !important;
}

.app-group.expand .app-group-content{
	overflow: visible;
	float: left;
	width: 100%;
	height: 100%;
	padding: 5px;
}

.app-group.expand .app-group-content .card-home.is-positioning-post-drag {
	z-index: 2;
}

.app-group .app-group-action span {
	cursor: pointer;
}

.group-minimised-view{
	display: none;
}

/* App group expanded apps */
.app-group.expand .card-home{

}

.app-group.expand .card-home .card-capability{
	text-align:center;
}

.app-group.expand .card-home .card-content{

}

.app-group.expand .card-home .card-close {

}

.app-group.expand .card-home .card-title{

}

.app-group.expand .card-home .card-action {
	padding: 10px;
}

.app-group.expand .card-home .card-action span{
	cursor: pointer;
}

.group-expanded-view{
	display: none;
}

/* Display all essential buttons and information when group maximised */
.app-group.expand .card-home .card-content{

}

.app-group.expand .card-home .corner-ribbon{

}

.app-group.expand .card-home .card-action{
	
}

/* App Status Dialog */
.status-collection ul, menu, dir {
	display: block;
	list-style-type: disc;
	-webkit-margin-before: 0;
	-webkit-margin-after: 0;
	-webkit-margin-start: 0;
	-webkit-margin-end: 0;
	-webkit-padding-start: 0;
}

.status-collection .collection {
	overflow: hidden;
	position: relative;
	margin: 0;
	border-radius: 0;
	border: 0;
}

.status-collection .collection.with-header .collection-header {
	background-color: rgba(0, 0, 0, 0.65);
	text-align: center;
	padding: 5px;
	border: 0;
}

.status-collection .collection.with-header .collection-header h4{
	font-size: 1.2em;
	color: #ffffff;
}

/* App status box */
.status-collection  .collection .collection-item {
	display:block;
	background-color: #ffffff;
	font-size: 1.1em;
	height: 120px;
	padding: 10px;
	margin: 0;
}

.app-status-divider{
	border-bottom: 1px solid rgba(0, 0, 0, 0.65);
	border-spacing: 5px;
	padding: 0 10px 0 10px;
}

/* App picture in status app tray */
.app-status-picture{
	float: left;
	width: 100px;
	height: 100px;
}

/* App text in app tray */
.app-status-description{
	height: 100px;
}

/* App more options */
.app-status-description .app-settings{
	cursor: pointer;
}

/* Status title */
.app-status-title {
	padding: 0 0 0 50px;
	font-size: 1.1em;
	color:#333;
	font-family: 'Open Sans', sans-serif;
}

/* Status More options */
.app-status-more-options{
	width: 100px;
	height: 100px;
}

/* Card Image Overlay */
.app-status-picture .app-card-overlay{
	width:100px;
	height:100px;
	position:absolute;
	background-color: rgba(0, 0, 0, 0.4);
	text-align:center;
	line-height:100px;
	font-size:3em;
	-webkit-transition: all 0.1s ease-out;
	-moz-transition: all 0.1s ease-out;
	-o-transition: all 0.1s ease-out;
	transition: all 0.1s ease-out;
	top:-100px;
	color:#fff;
}

.app-card-overlay.show{
	top:0 !important;
	z-index: 10;
}

/* Customise Mode */
.my-apps-edit-mode{
	display:none;
	margin-bottom:0px;
	text-align:center;
	font-size:1em;
}

.app-group-create{
	cursor: pointer;
}

/* placeholder for groups */
.group-placeholder{
	float:left;
	width: 100%;
	height: 50px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	outline: 3px dashed #444;
	outline-offset: -6px;	
	
	/* transition position changing */
	-webkit-transition: -webkit-transform 0.2s;
	transition: transform 0.2s;
}

/* placeholder for cards */
.card-placeholder{
	width: 100%;
	height: 130px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	outline: 3px dashed #444;
	outline-offset: -4px;
	margin:5px 5px 5px 18px;
	/* transition position changing */
	-webkit-transition: -webkit-transform 0.2s;
	transition: transform 0.2s;
}

.actions-view-mode{
	display:none;
}

.edit-mode{
	display:none;
}

.group-creator{
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	border: 5px dashed #ddd;
	padding:20px;
	margin:10px 0px;
	float:left;
	clear:both;
	width:100%;
	font-size:1.3em;
    background-color:#fff;
}

.group-creator a{
	color:#555;
	font-weight:bold;
}

/* The ribbons */
.app-group.expand .card-home .corner-ribbon {
    width: 100px;
    position: absolute;
    top: 10px;
    left: 55px;
    bottom: 90px;
    text-align: center;
    line-height: 25px;
    letter-spacing: 1px;
    color: #f0f0f0;
    font-size: 0.8em;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

.app-group .card-home .corner-ribbon{
	width: 74px;
	position: absolute;
	top: 25px;
	left: 68px;
	bottom: -20px;
	text-align: center;
	line-height: 25px;
	letter-spacing: 1px;
	color: #f0f0f0;
	font-size: 0.2em;
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}

.app-new-tick{
	transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
    font-size: 15px;
    font-weight:400;
}

/* Custom styles */

.corner-ribbon.sticky{
	position: fixed;
}

.corner-ribbon.shadow{
	box-shadow: 0 0 3px rgba(0,0,0,.3);
}

/* Different positions */

.corner-ribbon.top-left{
	top: 25px;
	left: -37px;
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}

.corner-ribbon.top-right{
	top: 25px;
	right: -37px;
	left: auto;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
}

.corner-ribbon.bottom-left{
	top: auto;
	bottom: 25px;
	left: -37px;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
}

.corner-ribbon.bottom-right{
	top: auto;
	right: -37px;
	bottom: 25px;
	left: auto;
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}

/* Ribbon Colors */
.corner-ribbon.white{background: #f0f0f0; color: #555;}
.corner-ribbon.black{background: #333;}
.corner-ribbon.grey{background: #999;}
.corner-ribbon.blue{background: #39d;}
.corner-ribbon.green{background: #2c7;}
.corner-ribbon.turquoise{background: #1b9;}
.corner-ribbon.purple{background: #95b;}




/* APP STORE ADMIN */

#index-banner {
    background-color: #009688;
	padding:10px 30px;
}

#index-banner h1 {
    font-size: 2.5rem;
    line-height: 110%;
    margin: 20px 0px 0px 0px;
	color:#fff;
}

#index-banner h4 {
	color:#fff;
}

.collapse
{

}

.table-title
{
	font-weight:normal;
}

.flextable
{
	background-color:#fff;
	border:1px solid #ddd;
}

.stat-label
{    
    font-size:3em;
}

.stat-value
{
    font-weight:bold;
}

/*------------------------------
	i. -- Video 
-------------------------------*/
.vp-VideoList-thumbLink {
    display: block;
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-bottom:10px;
}

.vp-VideoList-thumbImg {
    max-width: 100%;
}

.vp-VideoList-thumbCaption {
    position: absolute;
    right: 5px;
    bottom: 5px;
    color: #fff;
    font-size: 12px;
    background-color: rgba(0,0,0,.4);
    padding: 3px;
}

.vp-VideoList-Title
{
    position: absolute;
    left: 5px;
    bottom: 5px;
    color: #fff;
    font-size: 14px;
    background-color: rgba(0,0,0,.8);
    padding: 5px;
}

/*Fix drag and drop*/
.content-bar{
	position:relative;
	overflow-y:auto;
}
.app-group-content ul.ui-sortable li{		
	clear:none !important;
}
.card-placeholder{
	height:130px !important;
	margin:.3rem .755rem 1.645rem .925rem;
}

/***********************************************************
	CHAT
***********************************************************/
#flexbot-bar .page-footer {position: fixed;bottom: -50px;left: 0;right: 0;height: 50px;background: rgba(200, 200, 200, 0.7);transition-property:height, bottom;transition-duration: 300ms;transition-timing-function: ease-in-out;    -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
#flexbot-bar .flex-chat-wrap{position: fixed;bottom: -51px;left: 0; height: 50px;width:510px;z-index:1;transition-property:height, bottom, padding;transition-duration: 300ms;transition-timing-function: ease-in-out;}
#flexbot-bar.loaded .page-footer,
#flexbot-bar.loaded .flex-chat-wrap{bottom:0;}
#flexbot-bar.preview .flex-chat-wrap{height:151px;}
#flexbot-bar.open .flex-chat-wrap{height:100%;box-shadow:1px 1px 10px rgba(0,0,0,0.25);overflow:hidden;}
.flex-chat{border:0;height:100%;width:100%}

@media only screen and (max-width: 560px) {
    .flex-chat-wrap {
        width: calc(100% - 51px);
    }
}

#flexbot-bar .flex-chat-grip {position: fixed;left: 510px;width: 2px;top: 100%;opacity:0;bottom: 0px;background: transparent;z-index: 100;transition:background 300ms ease-in-out, opacity 300ms ease-in-out 300ms;}
#flexbot-bar .flex-chat-grip-resizer{position:fixed;top:50px;left:0px;z-index:1000}
#flexbot-bar .flex-chat-grip-resizer.active{width:100%;height:100%;}
#flexbot-bar.open .flex-chat-grip{top: 0px;bottom: 0px;opacity:1;}
#flexbot-bar.open .flex-chat-grip .gripper {display:block;}
#flexbot-bar .flex-chat-grip .gripper {display:none;height: 50px;width: 15px;background: rgba(200, 200, 200,.8);top: 50%;position: absolute;border-top-right-radius: 5px;border-bottom-right-radius: 5px;transition:background 300ms ease-in-out;cursor: col-resize;}
#flexbot-bar .flex-chat-grip:hover, 
#flexbot-bar .flex-chat-grip:hover .gripper{background:rgba(75, 155, 153, 0.85)}
#flexbot-bar .flex-chat-grip .gripper i.fa {position: absolute;left: 5px;top: 15px;font-size: 20px;transition:color 300ms ease-in-out;color: rgba(0, 0, 0, 0.6);}
#flexbot-bar .flex-chat-grip:hover .gripper i.fa {color: rgba(255, 255, 255, 0.8);}