/*=============================================================*/
/* GRID */
/*=============================================================*/

/*-------------------------------------------------------------*/
/* Grid */

.container {
	position: relative;
	/* width: 100%; */
	max-width: 960px;
	margin: 0 auto;
	/* padding: 14px 12px 70px 12px; */
	padding: 14px 0px 70px 0px;
	box-sizing: border-box;
	margin-top: 94px;
	/* margin-top: 104px; */
	margin-bottom: 60px;
	min-height: 400px;
	animation: fadeEffect 0.5s;
}

.box {
	border: 1px solid #eaeaea;
    border-radius: 0px;
    background-color: white;
    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0,0,0,.12);
	padding: 12px;
	margin-bottom: 12px;
}

.row {
	margin-bottom: 8px;
}
  
.column, .columns {
	width: 100%;
	float: left;
	box-sizing: border-box;
	margin-bottom: 16px;
}

.column:first-child, .columns:first-child {
		margin-left: 0; 
	}

/* For devices larger than 400px */
/* @media (min-width: 400px) { */
	/* .container { */
		/* width: 85%; */
		/* padding: 0;  */
	/* } */
/* } */

/* For devices larger than 750px */
@media (min-width: 770px) {
	.container {
		width: 100%; 
	}
	.box {
		border-radius: 5px;
	}
	.column, .columns {
		margin-left: 2%; 
	}
	.column:first-child, .columns:first-child {
		margin-left: 0; 
	}
	.one.column, .one.columns { width: 6.5%; }
	.two.columns              { width: 15%; }
	.three.columns            { width: 23.5%;            }
	.four.columns             { width: 32%; }
	.five.columns             { width: 40.8333333333%; }
	.six.columns              { width: 49%;            }
	.seven.columns            { width: 57.1666666667%; } 
	.eight.columns            { width: 66%; }
	.nine.columns             { width: 74.5%;          }
	.ten.columns              { width: 83%; }
	.eleven.columns           { width: 91.5%; } 
	.twelve.columns           { width: 100%; margin-left: 0; }

	.one-third.column         { width: 32%; }
	.two-thirds.column        { width: 66%; }

	.one-half.column          { width: 49%; }
	
	/* .one.column, .one.columns { width: 4.66666666667%; } */
	/* .two.columns              { width: 13.3333333333%; } */
	/* .three.columns            { width: 22%;            } */
	/* .four.columns             { width: 30.6666666667%; } */
	/* .five.columns             { width: 39.3333333333%; } */
	/* .six.columns              { width: 48%;            } */
	/* .seven.columns            { width: 56.6666666667%; } */
	/* .eight.columns            { width: 65.3333333333%; } */
	/* .nine.columns             { width: 74.0%;          } */
	/* .ten.columns              { width: 82.6666666667%; } */
	/* .eleven.columns           { width: 91.3333333333%; } */
	/* .twelve.columns           { width: 100%; margin-left: 0; } */

	/* .one-third.column         { width: 30.6666666667%; } */
	/* .two-thirds.column        { width: 65.3333333333%; } */

	/* .one-half.column          { width: 48%; } */
}



/*-------------------------------------------------------------*/
/* Clearing */

.container:after, .row:after, .u-cf {
	content: "";
	display: table;
	clear: both;
}

/*-------------------------------------------------------------*/

.gridmenu {
  border: 1px solid white;
  padding: 6px;
  position: relative;
  /* min-height: 130px; */
}
 
.gridmenu h3 {
	font-weight: bold;
}

.gridmenu:hover {
  cursor: pointer;
  border: 1px solid #ececec;
  box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.1);
  -webkit-transition-duration: 0.2s; /* Safari */
  transition-duration: 0.2s;
 }
 
.gridmenu:hover p, .gridmenu:hover h3 {
	color: #1a73e8;
	-webkit-transition-duration: 0.2s; /* Safari */
	transition-duration: 0.2s;
}
 
.gridmenu:active p, .gridmenu:active h3 {
	color: white;
}


.grid25{
	width: 25%;
	padding: 8px;
    box-sizing: border-box;
}

@media (max-width: 770px) {
	.grid25 {
		width: 100%;
	}
}

.grid-line {
	display: inline-block;
	overflow: auto;
	white-space: nowrap;
	max-width: 960px;
}

.grid-responsive {
  padding: 8px 8px;
  float: left;
  width: 24.99999%;
  box-sizing: border-box;
}

@media only screen and (max-width: 700px) {
  .grid-responsive {
    width: 49.99999%;
    margin: 6px 0;
	padding: 8px 4px;
  }
}

@media only screen and (max-width: 500px) {
  .grid-responsive {
    width: 100%;
  }
}

.grid-static {
	display: inline-block;
	padding: 8px 8px;
	width: 250px;
	box-sizing: border-box;
}

.grid-object {
	position: relative;
	height: 170px;
	border-radius: 5px;
	box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0,0,0,.12);
}

.grid-object-image {
	width: 100%;
	height: 170px;
	object-fit: cover;
	border-radius: 5px;
}

.grid-object-text {
    text-align: center;
    position: absolute;
    bottom: 0px;
    background-color: #0000007a;
    color: white;
    width: 100%;
    padding: 8px 4px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	box-sizing: border-box;
}

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

.image-view-idea {
	/* height: 300px; */
	object-fit: cover;
	border-radius: 4px;
	max-height: 460px;
}

.image-view-object-small {
	height: 200px;
	object-fit: cover;
	border-radius: 4px;
}

.grid-title {
	font-size: 1.2rem;
}

.grid-object-overlay {
  position: absolute;
  bottom: 0;
  background: rgba(0, 0, 0, 0.1);
  color: #f1f1f1;
  width: 100%;
  transition: .3s ease;
  opacity:0;
  height: 100%;
  border-radius: 5px;
  
}

.grid-object-overlay:hover, .grid-object:hover .grid-object-overlay {
  opacity: 1;
}

.grid-object-stat {
	color: gray;
	font-size: 0.9rem;
    padding: 4px;
	display: flex;
    justify-content: space-between;
    align-items: center;
}

.grid-object-stat img {
	height: 15px;
	opacity: 0.8;
	padding: 0px 6px;
}

.grid-object-stat span {
	display: flex;
    justify-content: center;
    align-items: center;
}

.grid-object-stat2 {
	color: gray;
	font-size: 1rem;
    padding: 8px 0px;
	display: flex;
    justify-content: flex-start;
    align-items: center;
}

.grid-object-stat2 img {
	height: 15px;
	opacity: 0.8;
	padding: 0px 6px;
}

.grid-object-stat2 span {
	display: flex;
    justify-content: center;
    align-items: center;
	padding: 0px 8px;
}

/*-------------------------------------------------------------*/

/*-------------------------------------------------------------*/
/* Dashboard */

.kpi {
	display: inline-block;
	/* width: 19%; */
	text-align: center;
	border-radius: 4px;
	box-sizing: border-box;
}

@media (max-width: 550px) {
	.kpi {
		width: 100%;
	}
}

/* .kpi:hover { */
	/* background-color: #f5f5f5; */
	/* transition-duration: 0.2s; */
/* } */

.kpi_number {
	font-size: 36px;
	padding: 24px 16px 4px 16px;
	color: #5b97d6;
}

.kpi_text{
	font-size: 12px;
	padding: 0px 16px 16px 16px;
	color: #4c4c4c;
	line-height: 1.2;
}

/*-------------------------------------------------------------*/
/* Object styles */

.idea-style {
	border-top: 5px solid #325893;
}

.group-style {
	border-top: 5px solid #a0c6e8;
}