/* UGC blue: #08288b */

:root {
  --ugc-color: #08288b;
  --ugc-backg-color: #fff;
  --ugc-info-color: #001340;
  --backg-color: #141414;
  --info-color: #CECCCC;
  --alert-color: #E71D36;
  --interact-color: #F6F4F3;
  --allocine-yellow: #fdcd25;
}

body {
	margin: 0;
	padding: 0;
	background: var(--backg-color);
	color: var(--info-color);
	font-family: sans-serif;
}

h3 {
	display: inline-block;
}

h2 { 
	padding-left: 20px;
	margin: 35 0 15 0;
}

div#n0 {
	display: table;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

div#n0r {
	display: table-row;
	overflow: hidden;
}

div#n1-0 {
	display: table-cell;
	border: none;
	background-color: var(--ugc-backg-color);
	color: var(--ugc-info-color);
	overflow: hidden;
}

div#n1-1 {
	display: table-cell;
	width: 500px;
	border-left: 1px solid black;
	overflow: hidden;
}

div#header {
	display: none;
	position: fixed;
	top: 0;
	padding: 15 15 15 15;
	height: 67px;
	width: calc(100% - 513px);
}

div#about-icon {
	float: right;
	margin: 17 20 0 0;
}

div#movie-options {
	text-align: center;
	position: fixed;
	top: 0; /* 100 */
	padding: 0;
	margin: 0;
	width: calc(100% - 500px);
}

div#menu-days {
	text-align: center;
	margin: 0 0 40 0;
	background-color: var(--backg-color);
}

ul#menu-days-ul {
  display: inline-block;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: var(--backg-color);
  border: none;
}

ul#menu-days-ul > li {
  float: left;
  border: 1px solid black;
  min-width: 100px;
}

ul#menu-days-ul > li a {
  display: block;
  color: var(--interact-color);
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

li.selected {
	background-color: var(--ugc-color);
}

li.notselected {
	background-color: var(--backg-color);
}

ul#menu-days-ul > li a:hover {
  background-color: var(--ugc-color);
}

input#horaires {
	background: none;
	color: var(--ugc-info-color);
	font-size: 100%;
	width: 100px;
}

div#horaires-range {
	display: inline-block;
	width: 300px;
}

.ui-slider .ui-slider-range {
	background: var(--ugc-color);
}

div#scrollbox {
	display: block;
	position: absolute;
	height: calc(100% - 150px);
	top: 150px; /* 250px */
	/* min-width: calc(100% - 500px); */
	overflow: hidden;
}

div#movie-wall {
	display: inline-block;
	width: calc(100% - 513px);
	min-width: 500px;
	max-height: 100%;
	color: var(--ugc-info-color);
	overflow-x: hidden;
	overflow-y: auto;
}

div#wait-div {
	text-align: center;
	margin-top: 50px;
	width: 100%;
	border: none;
}

div#details-scrollbox {
	display: block;
	position: fixed;
	height: calc(100% - 372px);
	min-width: 500px;
	border: none;
}

div#movie-showtime-ctnr {
	height: calc(100% - 360px); 
	overflow: auto;
	vertical-align: top;
}

div#movie-details {
	display: block;
	padding: 40 0 0 10;
	width: 500px;
	height: 100%; 
	vertical-align: top;
}

img.movie-details-poster {
	width: 160px;
	height: 213px;
}

div#movie-details-map {
	display: none;
	position: fixed;
	bottom: 0;
	padding: 10;
	width: 500px;
	height: 350px;
	vertical-align: top;
	border: none;
}

div.movie-item {
	display: inline-block;
	width: 160px;
	margin: 12 6 12 6;
	border: 1px solid black;
}

div.movie-item > img {
	width: 160px;
	height: 213px;
}

div.movie-item-title {
	margin: 0;
	padding: 2;
	font-size: 70%;
	background: black;
	color: white;
	text-transform: uppercase;
	white-space: nowrap;
	text-align: center;
}

div.movie-title {
	text-transform: uppercase;
	font-size: 110%;
	padding: 10 0 5 0;
	text-align: center;
}

div.movie-title > a {
	/* text-decoration: underline overline var(--allocine-yellow); */
	color: var(--interact-color);
	text-decoration: none;
}

img.star-img {
	width: 20px;
	cursor: pointer;
}

div.movie-weekplan {
	font-size: 110%;
	padding: 2 0 20 0;
	text-align: center;
	font-size: 80%;
}

div.movie-weekplan > a {
	/* text-decoration: underline overline var(--allocine-yellow); */
	color: var(--interact-color);
	text-decoration: none;
}

details {
	margin: -40 0 20 5;
	position: absolute;
	background: black;
}

div.movie-synopsis {
	font-size: 90%;
	margin: 5 20 20 5;
}

div.movie-showtime {
	margin: 0 0 15 0;
}

div.movie-showtime > a {
	color: var(--interact-color);
	text-decoration: none;
}

div.movie-showtime-element-2d {
	display: inline-block;
	background: var(--ugc-color);
	padding: 3 5 3 5;
	margin: 4;
	border: none;
	border-radius: 3px;
	color: var(--interact-color);
	cursor: grab;
}

div.movie-showtime-element-3d {
	display: inline-block;
	background: #ff443d; /* #ff443d; */
	padding: 3 5 3 5;
	margin: 4;
	border: none;
	border-radius: 3px;
	color: var(--ugc-color); /* #72c3db; */
	cursor: grab;
}

div.movie-showtime-element-audio0 { /* VF */
	border: 1px dashed red;
}

div.movie-showtime-element-audio1 { /* VOSTFR */
}

div.movie-showtime-element-audio2 { /* VOF */
}

div#horaires-div {
	display: inline-block;
	border: 1px solid var(--info-color);
	border-radius: 0;
	padding: 10px;
	background: none;
}

button#theater-button {
	padding: 5;
	font-size: 100%;
	border: 1px solid var(--info-color);
	border-radius: 0;
	padding: 10px;
	background: none;
}

div#theater-selection-popup {
	display: none;
	position: fixed;
	background: white;
	width: 400px;
	height: 400px;
	padding: 15px;
	border: 2px solid black;
}

div#theater-selection-popup-content {
	background: none;
	height: 380px;
	overflow: auto;
}

div#movie-details-map {
	margin-left: 76px;
}

img#map-pin {
	position: absolute;
	display: none;
	
}

div#map-theater-name {
	text-transform: uppercase;
	font-size: 80%;
	color: var(--info-color);
	margin: 20 0 0 0;
}

div#map-theater-address {
	font-size: 80%;
	color: var(--info-color);
}