﻿/* Overview bar */

/*
.title-bar {
	border-bottom-style: solid;
	border-bottom-color: #a9a9a9 !important;
	border-bottom-width: 5px;
} */

.grid-container > a {
	text-decoration: none;
}

.grid-item {
    background-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 5px 15px rgba(0,0,0,0.28);
	border-radius: 4px;
    padding: 20px;
    margin: 20px 10px 30px 10px;
    font-size: 18px;
    color: #595959;
    text-align: center;
}

.grid-item.boxhighlight p {
	color: #f89728;
	font-weight: bold;
}

.grid-item.boxhighlight {
	background-color: white !important;
	border-radius: 0;
	margin: 0 !important;
	width: 100% !important;
	padding: 0 0px 0 0px;
}

.grid-item.boxhighlight:after {
    content:"";
    position: relative;
    margin-left: 100%;
    top:0px;
    height:0px;
    border-top:20px solid transparent;
    border-left:10px solid white;
    border-bottom:20px solid transparent;
	margin-top: -37px;
	float:left;
}

.grid-item.overview:hover {
  box-shadow: none;
}

a.grid-item {
    text-decoration: none !important;
    color: inherit !important;
	min-height: 140px;
	border-radius: 4px;
}

@media screen and (min-width:1080px) {
	.grid-container.overview {
		background-color: #f5871E;
		height: 40px;
		display: grid;
		grid-template-columns: 5% 10% 10% 10% 10% 10% 10% 10% 10% 10%;
		position: fixed;
   		z-index: 999;
   	 	width: 100%;
  		left: 0;
  		box-shadow: none;
	}
	.grid-item.overview {
	    font-size: 15px;
    	text-align: center;
    	height: 40px;
    	margin: 0px;
    	padding: 0 0px 0 0px;
    	background: transparent;
    	box-shadow: none;
	}
}

.grid-item.spacer {
    visibility: hidden;
}

.row.outer-row.sidenav-layout {
    padding-top: 0;
}

@media screen and (min-width:768px) and (max-width:1079px) {
	.main-section > .outer-row {
		margin-right: 0 !important;
		padding-left: 7% !important;
	}
	#contentBody .outer-row > div {
		float: none !important;
}
	.logo-wrapper {
		position: absolute;
	}
	.search-bar {
		position: relative !important;
		margin-top: 15px;
	}
	.row.outer-row > div > table {
    	margin-left: 0 !important;
    	margin-right: 0 !important;
		width: 100%;
	}
	.grid-item.spacer {
		margin: 0;
		padding: 10px;
	}
	.grid-container.overview {
    	background-color: #f5871E;
    	float: left;
    	position: fixed;
    	z-index: 999;
    	left: 0;
		padding: 0 10px 0 0;
    	box-shadow: none;
	}
	.grid-item.overview {
	    font-size: 15px;
    	text-align: center;
    	height: 40px;
    	margin: 0px;
    	padding: 0 0px 0 2px;
    	background: transparent;
    	box-shadow: none;
	}
	.grid-item.boxhighlight:after {
    	content:"";
    	position: relative;
    	margin-left: 100%;
    	top:0px;
    	height:0px;
    	border-top:20px solid transparent;
    	border-left:10px solid white;
   		border-bottom:20px solid transparent;
		margin-top: -30px;
		float:left;
	}
	.workflow_hype_container {
		height: 100% !important;
	}
}

/*
.grid-item p {
    font-size: 15px;
    color: #fefefe;
}

a p:hover {
  color: #595959 !important;
  box-shadow: none;
}

a.grid-item.overview {
	text-decoration:none;
    padding-bottom: 0px;
    box-shadow: none;
}
*/

@media screen and (max-width: 767px) {
	.off-canvas-wrapper-inner .outer-row {
    	max-width: 100% !important;
    	padding-left: 1% !important;
	    padding-right: 1% !important;
	}
	.grid-item.overview {
		padding: 0;
		margin: 0;
	}
	.grid-container.overview {
	    border-width: thin;
	    border-color: #f89782;
	    border-style: solid;
	    text-align: center;
}
	.grid-item {
		font-size: 14px;
		width: fit-content !important;
		height: 10px;
		display: inline-block !important;
		margin: 0 5px 0 5px !important;
	    box-shadow: none;
}
	.grid-item.boxhighlight {
		width: fit-content !important;
		margin: 0 5px 0 5px;
	}
	.grid-item.spacer {
		display: none !important;
	}
	.row.outer-row > div > table {
    	margin-left: 0 !important;
    	margin-right: 0 !important;
	}
	.row.outer-row > div > table th, .row.outer-row > div > table td {
		padding: 2px 1px 1px 2px;
		text-align: left;
	}
	.row.outer-row iframe {
    	height: 600px !important;
	}
}