body {color: rgba(220,220,220,0.8);}
a, a:hover, a:visited {color: #ff9900}

.page-content {background-color: #292b3d;}

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.scroll-wrapper {
	min-height:60px;
}

.popcorn-tooltip {
	display: inline-block;
    cursor: pointer;
	color: rgba(200,200,200,0.5);
	margin-left: 5px;
}
.tooltip {opacity: 1 !important;}

.rt-rating {display: block; float: left; margin-top: 15px; margin-left: 30px; font-size: 14px; line-height: 32px;}
.rt-rating img {box-shadow: none !important;}
.overall-rating {display: block; float: left; margin-top: 13px; font-size: 24px; line-height: 32px;}
.overall-rating span.selected{color:#ffa800; }
.overall-rating small {font-size: 14px; line-height: 32px; display: inline-block;}

/*
.page-sidebar {background-color: #ff9900 !important;}
.page-sidebar .page-sidebar-wrapper > ul > li:hover > a,
.page-sidebar .page-sidebar-wrapper .active {background-color: #C56A00 !important;}
*/
.page-sidebar .form-group {margin-top: 25px; margin-bottom: 25px;}
.page-sidebar .form-control {background-color: rgba(255,255,255,0.05); color: #fff;}
.page-sidebar .select2-container-active .select2-choice, 
.page-sidebar .select2-container-active .select2-choices,
.page-sidebar .select2-container .select2-choice {background-color: rgba(255,255,255,0.05); color: rgba(200,200,200,0.9); border: 1px solid rgba(200,200,200,0.4)}

.header-section {padding: 20px; background-color: rgba(200,200,200,0.1);margin-top:60px;box-shadow: 0 0 20px rgba(0,0,0,0.5);}
.header-title{font-size: 30px; color: #fff; font-weight: 300; margin-bottom: 15px;}
.header-section .input-with-icon{margin-top: 5px;}
.mb-0{margin-bottom: 0 !important}
.pl-0{padding-left: 0 !important}
.pt-0{padding-top: 0 !important}
.pb-0{padding-bottom: 0 !important}
.input-append.success .add-on{margin-left: -36px; height: 35px;}
.input-append.success input{min-height: 35px;}
.with-filter {padding-top:0px!important;}

.popcorn-grid {margin-top: 10px;}
.popcorn-grid .grid-body.no-border{padding: 14px 15px 14px 15px;}
.popcorn-grid .grid-title, .popcorn-grid .grid-body {background-color:transparent!important;}

.mapplic-element {background-color:transparent;}
.mapplic-element.mapplic-loading:after{
	border-top-color: #fff;
    border-left-color: #fff;
}

.breadcrumb a, .breadcrumb > li + li:before {color:#ffffff!important;}
.breadcrumb a.active.last {font-weight:normal;cursor:default;}
.page-content .breadcrumb a {margin-left:0px}
.page-content .breadcrumb {margin-bottom:20px;}

.header-quick-nav {padding: 0px 20px;}
.header-quick-nav .breadcrumb {padding-left: 20px; padding-top:20px; background-color: #fff;}
.header-quick-nav .breadcrumb > li + li:before, 
.header-quick-nav .breadcrumb a {color: #000 !important;}
.header-quick-nav .breadcrumb > li {margin-left: 20px; margin-right: -20px;}


.total_value {
	position: absolute;
    right: -38px;
    top: 6px;
    font-size:12px;
}

.chart-title small {
	color: rgba(255,255,255,0.5);
}
.chart-title .metadata {
	xdisplay: block; 
	xfloat: left;
}
.movie_chart {
	background-color: rgba(200,200,200,0.05);
    border-radius: 10px;
    margin: 20px 15px 0px;
}
.movie_legend {
	padding: 15px 20px 5px;
}

.legend_item{
	margin-right:5px;
	display:inline-block;
}

.line-tooltip {
  position: absolute;
  text-align: center;
  padding: 10px 10px;
  margin-bottom:10px;
  font: 12px sans-serif;
  background:#272727;
  color:#fff;
  border: 0px;
  border-radius: 8px;
  pointer-events: none;
  z-index: 999;
}

.legend_item i {
	font-size: 17px;
}
.chart-color {font-size: 12px;}
.chart_line {
	stroke: #f66261;
    stroke-width: 10;
}

.chart_line_small {
    stroke: #f66261;
    stroke-width: 8;
}

.axis-pyramid {
  stroke-width: 0.5px;
  stroke: #888;
}

.axis-pyramid text {
	fill: #fff;
	font-size: 12px;
	font-family: 'Roboto';
}

.axis-pyramid > path {
  stroke: #888;
}

.chart_line_dot {
	fill: rgba(255,255,255,0.5);
    stroke: rgba(255,255,255,0.5);
}

.content.sm-gutter{
	padding-left: 20px;
	padding-top: 20px;
}
.right-side{
	padding-top: 20px;
}
.movie_des {color: rgba(255,255,255,0.9); font-size: 14px;}
.movie-chart {
	padding: 5px;
	margin: 0px 10px;
	position: relative;
	border-bottom: 1px solid rgba(200,200,200,0.1)
}
.movie-chart .rank {
	xfont-size: 80%;
	xfont-weight: bold;
	opacity: 0.3;
}
.movie-chart img{
	vertical-align: top;
	max-width: 80px;
	border-radius: 5px;
	display: inline-block;
	box-shadow: 3px 3px 15px rgba(0,0,0,0.3);
}
.movie-chart .movie-poster {
	width:150px !important;
	max-width: 300px
}
.movie-chart.tiles {
	background-color:inherit;
	cursor: pointer;
	border-radius: 5px;
}

.chart-body{
	width: calc(100% - 160px);
	display: inline-block;
	padding-left: 17px;
}
.chart-title {
	margin-bottom: 10px;
}
.chart-title h3{
	display: inline-block;
	margin-bottom: 0px;
	margin-right: 10px;
	margin-top: 0;
	padding-top: 3px;
	font-size: 16px;
	font-weight: bold;
	color: #fff;
}

.tiles:hover .chart.hover-effect-img, .tiles:hover .chart-title.hover-effect-img {
	-moz-transform: scale(1.02, 1.02);
    -ms-transform: scale(1.02, 1.02);
    -o-transform: scale(1.02, 1.02);
    -webkit-transform: scale(1.02, 1.02);
     transform: scale(1.02, 1.02);
}

.bar:hover, rect:hover {
	cursor:pointer;
}

@keyframes expand {
	from {width: 0%;}
	to {width: 100%;}
}
@media screen and (min-width: 768px) {
	@keyframes expand {
		from {width: 0%;}
		to {width: 100%;}
	}
}
#chart svg text{
	fill: #fff;
	font-size: 12px;
}
.chart {
	width: 0%;
	animation: expand .8s ease forwards;
}
.row + .row .chart {
	animation-delay: .2s;
}
.row + .row + .row .chart {
	animation-delay: .4s;
}
.block {
	display: block;
	height: 30px;
	color: #fff;
	font-size: .75em;
	float: left;
	background-color: #f66261;
	position: relative;
	overflow: initial;
	opacity: 1;
	transition: opacity, .3s ease;
	cursor: pointer;
	border-radius: 10px;
	z-index: 2;
}

.block:nth-of-type(2) {
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
}

.block:nth-of-type(2),
.legend li:nth-of-type(2):before {
	background-color: rgba(245, 245, 245, 0.1);
	margin-left: -7px;
	z-index: 1;
}
.value {
	display: block;
	line-height: 30px;
	position: absolute;
	right: 10px;
	font-size: 12px;
	/*transform: translate(-50%);*/
}

.chart .percentage {
	 position: absolute;
    top: 32px;
    right: 5px;
    font-size: 12px;
}

.small_value {
	position: absolute;
    min-width: 150px;
    top: 35px;
}

.block:nth-of-type(2) .value {
}

/* slider */
.popcorn-week-slider {
	width: calc(100% - 220px);
	margin: auto;
}

.week-wrapper {
	background-color:rgba(20,20,20,0.4);
	margin: 0px -20px -20px;
}
.week-wrapper .slick-dots {
	opacity: 0;
}
.week-slider {
	padding:10px;
	color:rgba(220,220,220,0.8);
	text-align:center;
	font-weight:600;
	text-transform: uppercase;
	font-size:12px;
	cursor:pointer;
}

.week-slider:hover {
	color:#0aa699;
	background-color: rgba(0,0,0,0.15)
}
.week-slider.active {
	color:#0aa699;
	background-color: rgba(0,0,0,0.3)
}
.week-slider.active .week {
	color:#0aa699;
}

.week-control {
	position: absolute;
    top: 10px;
    right: 10px;
}
.week-control button {
	padding: 9px 18px;
}

.week-date {
	font-weight: 400;
	color: rgba(255,255,255,0.4);
}

.week-slider-input {
	position: absolute;
	z-index: 9;
	width: 80px;
    margin-left: 10px;
    margin-top: 11px!important;
}

.week-slider-input .select2-container .select2-choice {
	background-color: #0aa699;
	border:0;
	color: #fff;
}

.week-slider-input .select2-dropdown-open.select2-drop-above .select2-choice, .select2-dropdown-open.select2-drop-above .select2-choices {
	color: #1b1b1b!important;
}

.rightbar-card, .small-card{
	background-color: rgba(20,20,20,0.4);
	border-radius: 10px;
	padding: 20px;
	margin-bottom: 10px;
}
.rightbar-card .rightbar-title{
	color: #31cab8;
	text-transform: uppercase;
	font-size: 16px;
}
.rightbar-card .rightbar-amount{
	color: #fff;
	font-size: 32px;
	font-weight: 100;
}

.small-card .small-title{
	color: #31cab8;
	text-transform: uppercase;
	font-size: 14px;
}

.small-card .small-amount{
	color: #fff;
	font-size: 25px;
	font-weight: 100;
}

.weekly-stats {
	padding: 10px 10px !important;
	margin: 5px 0px;
	text-transform: uppercase;
	background-color: rgba(200,200,200,0.08);
	border-radius: 10px;
}
.weekly-stats h2 {color: rgba(20,20,20,0.4) !important; margin-bottom: 0px; }
.weekly-stats h4 {color: #fff !important; margin-bottom: 5px; }
.weekly-stats small {color: #F84B4E; font-weight: bold;}

.chartbg, #verticalBar, #horizontalBar, #donutChart, #stackBar {background-color: rgba(200,200,200,0.05); border-radius: 10px; padding: 20px; text-align: center}

.googletrends-control {
	position: absolute;
	top: 100px;
	right: 35px;
}
.googletrends-control input,
.googletrends-control input:focus,
.googletrends-control input:active { 
	color: #fff; 
	background-color: rgba(200,200,200,0.03);
	border: 1px solid rgba(200,200,200,0.2);
}

/* HIDE GOOGLE MAPS BRANDING AND CONTROLS */

a[href^="http://maps.google.com/maps"],
a[href^="https://maps.google.com/maps"],
a[href^="https://www.google.com/maps"] {
    display: none !important;
}
.gm-bundled-control .gmnoprint {display: block;}
.gmnoprint:not(.gm-bundled-control) {display: none;}

.grid.simple .grid-title{padding-left: 20px;}
.grid.simple .grid-title h4{color: #fff; font-size: 20px;}

.content .content-title{color: #fff; margin: 0; padding: 20px; padding-bottom: 0}

.moviedetail-header {
	background-size: cover !important;
	background-position: bottom left !important;
	background-repeat: no-repeat !important;
	height: 800px;
	margin-bottom: -800px;
}


/* Time of Day Chart */
.timeofday div {
	display: block; 
	float: left; 
	background-color: rgba(0,0,0,0.15); 
	border-radius: 5px; 
	margin: 0px 5px 0px 0px; 
	width: 11%; 
	height: 24px; 
	text-align: center; 
	padding-top: 5px;
	font-size: 11px;
	font-weight: bold;
	text-transform: uppercase;
	color: rgba(255,255,255,0.8);
	-webkit-user-select: none; /* Safari 3.1+ */
    -moz-user-select: none; /* Firefox 2+ */
    -ms-user-select: none; /* IE 10+ */
    user-select: none; /* Standard syntax */
}
.timeofday .row {width: 100%; display: block; background: none; padding: 0; margin: 0 0 5px 0;}
.timeofday .day {background-color: rgba(0,0,0,0.2);}
.timeofday .hour {background-color: rgba(0,0,0,0.2);}
.timeofday .occupancy-0 {background-color: rgba(124,99,196,0.1)}
.timeofday .occupancy-10 {background-color: rgba(124,99,196,0.2)}
.timeofday .occupancy-20 {background-color: rgba(124,99,196,0.4)}
.timeofday .occupancy-30 {background-color: rgba(124,99,196,0.6)}
.timeofday .occupancy-40 {background-color: rgba(124,99,196,0.8)}
.timeofday .occupancy-50 {background-color: rgba(124,99,196,1.0)}
.timeofday .occupancy-60 {background-color: #a159ae}
.timeofday .occupancy-70 {background-color: #b554a3}
.timeofday .occupancy-80 {background-color: #e04687}
.timeofday .occupancy-90 {background-color: #fc3974}
.timeofday .occupancy-0,
.timeofday .occupancy-10,
.timeofday .occupancy-20,
.timeofday .occupancy-30,
.timeofday .occupancy-40,
.timeofday .occupancy-50,
.timeofday .occupancy-60,
.timeofday .occupancy-70,
.timeofday .occupancy-80,
.timeofday .occupancy-90 {color: rgba(255,255,255,0.0); transition: color 0.5s;}
.timeofday .occupancy-0:hover,
.timeofday .occupancy-10:hover,
.timeofday .occupancy-20:hover,
.timeofday .occupancy-30:hover,
.timeofday .occupancy-40:hover,
.timeofday .occupancy-50:hover,
.timeofday .occupancy-60:hover,
.timeofday .occupancy-70:hover,
.timeofday .occupancy-80:hover,
.timeofday .occupancy-90:hover {color: rgba(255,255,255,0.7); filter: brightness(150%)}


/* Login Styles */
.login-container .tiles {
	background-color: rgba(200,200,200,0.05);
	border-radius: 10px;
	padding: 40px 40px 40px;
	color: #fff;
}
.login-container h3 {color: #fff;}
.login-container input {
	font-size: 18px;
	border-radius: 5px;
	padding: 15px 25px !important;
	margin-bottom: 10px;
	color: rgba(255,255,255,0.8);
	background-color: rgba(200,200,200,0.05);
	border: 1px solid rgba(255,255,255,0.2);
	font-weight: 300;
	height: 50px;
}
.login-container input:focus {
	color: rgba(255,255,255,1.0);
	background-color: rgba(200,200,200,0.15);
	border: 1px solid rgba(255,255,255,0.3);
}
.login-container .btn-primary {
	font-size: 16px;
	letter-spacing: 1px;
	font-weight: bold;
	border-radius: 5px;
	padding: 16px 25px;
	color: #fff;
	background-color: #303030;
	text-transform: uppercase;
	border: none;
	opacity: 0.9;
	transition: background 0.5s linear 0s, opacity 0.5s linear 0s;
}
.login-container .btn-primary:hover {
	background-color: #303030;
	opacity: 1;
}

.map-overlay {
	display: block;
	width: auto;
	position: absolute;
	width: 100%;
	height: 100vh;
	top: 274;
	left: 0px;
	padding-top: 10px;
	z-index: 1000;
	text-shadow: 1px 1px 20px rgba(0,0,0,0.9);
	pointer-events: none;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.65+0,0+100;Neutral+Density */
	background: -moz-linear-gradient(-45deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 70%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 70%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 70%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.map-overlay h1 {color: #fff;}
.map-overlay .righbar-title {font-weight: bold;}
.map-overlay .rightbar-card {padding: 0px; margin: 20px 0px 0px; background: none;}

.movie-nav {
    display:block; 
    width: 100%;
	height: 170px; 
	padding-top: 10px;
    position: absolute;
    bottom: 0px;
    background-color: rgba(200,200,200,0.1);
	overflow: hidden
}

.movie-nav-row {
	height: 100%;
	width: auto;
	padding: 10px 10px;
	overflow: auto;
	overflow-y: hidden;
	margin: 0 auto;
	white-space: nowrap;
}

.movie-nav-item {
	display: inline-block;
	margin-right: 10px;
	transition: all .2s ease-in-out;
}
.movie-nav .active,
.movie-nav-item:hover {
	-ms-transform: scale(1.1, 1.1); /* IE 9 */
    -webkit-transform: scale(1.1, 1.1); /* Safari */
    transform: scale(1.1, 1.1);
}
.movie-nav-item img {
	height: 120px;
	border-radius: 5px;
	transition: all .2s;
	filter: brightness(80%);
	box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}
.active img,
.movie-nav-item img:hover {
	border: 5px solid rgba(255,255,255,0.1);
	filter: brightness(120%);
	border-radius: 5px;
}


@media screen and (max-width: 768px) {
	
	.sm-gutter .row {margin-left: 5px; margin-right: 5px;}
	
	.header-title {font-size: 24px; line-height: 24px;}
	.header-section .form-control {margin-top: 5px !important;}
	.content.sm-gutter {padding: 0px;}
	.movie_chart {padding: 5px 0px; margin: 10px 5px;}
	.movie-chart {padding: 10px 5px;}
	.chart-body {width: calc(100% - 120px); padding-left: 5px;}
	.chart-title {margin-bottom: 5px;}
	.chart-title small {height: 14px; overflow: hidden;}
	.movie-chart .chart-title h3{
		font-size: 18px;
		line-height: 20px;
		margin-bottom: 0;
		max-height: 44px;
		overflow: hidden;
	}
	.movie-chart .chart-title small{display: block;}
	.grid {margin-bottom: 0px;}
	.popcorn-grid .grid-body.no-border {padding: 5px;}
	.rightbar-card {padding: 10px !important; margin-top: 10px; margin-bottom: 0px;}
	.rightbar-title {font-size: 12px !important;}
	.rightbar-amount {font-size: 20px !important;}
	.movie-chart img {width: 20% !important;}
	
	.page-content .breadcrumb,
	.page-content .breadcrumb li,
	.page-content .breadcrumb li .active {margin-top: -60px; margin-bottom: -80px; font-size: 10px; text-transform: uppercase; line-height: 15px;}
	.movie-chart .drilldown {width: 100%}
	.drilldown .movie-poster {float: left; width: 20%; margin: 0px 10px 10px 0px;}
	.drilldown .chart-title .header-title {font-size: 24px; line-height: 24px; }
	.movie-chart .drilldown .main_chart {display: table; width: 60% !important; margin-bottom: -30px;}


	.timeofday div {
		border-radius: 4px; 
		margin: 0px 2px 0px 0px; 
		width: 11%; 
		height: 20px; 
		padding-top: 4px;
		font-size: 9px;
		overflow: visible;
	}
	.timeofday .row {margin: 0 0 2px 0;}
	
	h6 {
		padding: 0;
		width: 75px;
		float: left;
		line-height: 50px;
	}
	.block {font-size: 0.9em;}
	
}

@media screen and (max-width: 454px) { 
	.total_value {
	}
}