html, body {
	margin: 0;
	height: 100%;
	font-family: Inter;
	color: white;
	user-select: none;
}

::-webkit-scrollbar-track
{
	-webkit-box-shadow: none;
	background-color: #ed254e !important;
}

::-webkit-scrollbar
{
	width: 6px !important;
	background-color: #ed254e !important;
}

::-webkit-scrollbar-thumb
{
	background-color: #011936 !important;
}

.visible {
	display: block !important;
}

input {
	outline: none;
}

#map-canvas {
	position: absolute;
	bottom: 0;
	left: 20rem;
	height: 100%; 
	width: calc(100% - 36rem);
}

#overlay {
	top: 0;
	left: 0;
	position: absolute;
	width: 100%;
	display: flex;
	flex-direction: column;
	height: 100%;
}

#tools-helpers {
	display: flex;
	align-items: center;
}

.tool {
	background-color: #ed254e;
    padding: 1rem;
}

#movie-genres-wrapper > #movie-genres-inner-wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.tool > .movies > * {
	margin-bottom: 0.5rem;
}

#movie-genres-wrapper > #movie-genres-inner-wrapper > .movie-genre {
	margin: 0.25rem 0.5rem 0.25rem 0;
	padding: 0.2rem 0.4rem;
	font-size: 0.8em;
	cursor: pointer;
	background-color: white;
	color: #011936;
	box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}

#movie-genres-wrapper >  #movie-genres-inner-wrapper > .movie-genre.selected {
	background-color: #011936;
	color: white;
}

#movie-search, #theater-search {
	padding: 0.5rem;
    width: 100%;
	border: none;
    box-sizing: border-box;
	box-shadow: rgb(60 64 67 / 30%) 0px 1px 2px 0px, rgb(60 64 67 / 15%) 0px 1px 3px 1px;
}

#movie-search {
	font-size: 1em;
	margin-top: 1rem;
}

#theater-search {
	font-size: 1em;
}

#left {
	z-index: 1;
	background-color: #ed254e;
	overflow: hidden;
	width: 20rem;
	height: 100%;
	display: flex;
	flex-direction: column;
}

#left .movies {
	overflow: overlay;
	height: calc(100% - 21rem);
	padding: 0 1rem 1rem;
	scroll-behavior: smooth;
}

#left #movie-tools {
	padding: 1rem;
}

#left:not('.selected') {
	display: none;
}

#left .movies > .movie {
	justify-content: center;
	min-height: 128.23px;
	display: flex;
	flex-direction: column;
	margin-bottom: 0.5em;
	color: #011936;
	background-color: white;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

#left .movies > .movie > .basic-info {
	display: flex;
	align-items: center;
}

#left .movies > .movie > .extra-info {
	padding: 0.5em;
	font-size: 0.8em;
}

#left .movies > .movie > .extra-info > .trailer > .object-wrapper > object {
	width: 100%;
	height: auto;
	pointer-events: none;
}

#trailer-modal > #modal-content {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}

#trailer-modal > #modal-content > object {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	box-shadow: rgb(0 0 0 / 16%) 0px 3px 6px, rgb(0 0 0 / 23%) 0;
}

#trailer-modal {
	padding: 0;
    max-width: none;
	background: transparent;
	border-radius: 0;
	box-shadow: none;
}

.ui-tooltip.ui-widget.ui-widget-content {
	border-radius: 0;
    background: #ed254e;
    color: white;
}
	
#right {
	width: 16rem;
	position: absolute;
	right: 0;
	height: 100%;
	z-index: 1;
	background: #011936;
	padding: 1rem;
	box-sizing: border-box;
}

#left .movies > .movie  > .basic-info > .image-wrapper > img {
	width: 100%;
	display: flex;
}

#left .movies > .movie  > .basic-info > .image-wrapper {
	flex: 1;
}

#left .movies > .movie  > .basic-info > .info {
	padding: 0.5em;
	flex: 2;
}

#left .movies > .movie {
	cursor: pointer;
}

#left .movies > .movie > .extra-info {
	display: none;
}

#left .movies > .movie.selected > .extra-info {
	display: block;
}

#left .movies > .movie.selected > .basic-info > .info > .details {
	display: none;
}

#left .movies > .movie  > .basic-info > .info > .details {
	font-size: 0.8em;
	display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

#left .movies > .movie  > .basic-info > .info > .title {
	margin-bottom: 0.2em;
	padding-bottom: 0.2em;
	border-bottom: 1px solid black;
}

#left .movies > .movie.selected {
	background-color: #011936;
	color: white;
}

#left .movies > .movie.selected  > .basic-info > .info > .title {
	border-color: white;
}

.gm-style .gm-style-iw-c {
	background-color: #011936;
	color: white;
	padding: 1rem !important;
	max-width: calc(95vw - 36rem) !important;
}

.gm-style .gm-style-iw-d {
	overflow: auto !important;
}

.gm-style .gm-style-iw-d .maps-link {
	box-sizing: border-box;
	display: block;
	width: 100%;
	background: white; 
	padding: 0.5rem; 
	text-align: center; 
	color: #011936 !important;
}

.gm-style .gm-style-iw-d a {
	color: white !important;
}

.gm-style .gm-style-iw-d + button {
	right: 0rem !important;
    top: -1.85rem !important;
	background: #ed254e !important;
}

.gm-style .gm-style-iw-d h2 {
	margin-top: 0;
	margin-bottom: 0;
}

.gm-style .gm-style-iw-d + button > img {
	width: 31px !important;
	height: 25px !important;
	margin: 0 !important;
}

#logo-wrapper {
	width: 100%;
	background-color: white;
}

#logo-wrapper > #logo {
	width: 100%;
}

.tool {
	flex-grow: 1;
}

.no-results {
	display: none;
	text-align: center;
}

#movie-search-wrapper {
	margin-right: 1rem;
}

.tool > .movies > * {
	flex: 1;
}

#movie-genres-wrapper > #movie-genres-switch {
	display: none;
}

.arrow {
	width: 0;
    height: 0;
	border-left: 10px solid transparent;
    border-right: 10px solid transparent;
	float: left;
    margin: 0.25rem 0.25rem 0;
}

.arrow-up {
	border-bottom: 10px solid #fff;
}

.arrow-down {
	border-top: 10px solid #fff;
}

.gm-style .gm-style-iw-d {
	white-space: break-spaces;
	padding-right: 0.5rem;
}

.gm-style .gm-style-iw-c {
	border-radius: 0 !important;
	overflow: visible !important;
}

.gm-style .gm-style-iw-c .gm-style-iw-d::-webkit-scrollbar-thumb {
	border-width: 1px;
}

.gm-style .gm-style-iw-d::-webkit-scrollbar-track, .gm-style .gm-style-iw-d::-webkit-scrollbar-track-piece {
	background: transparent !important;
}

.gm-style-iw-d::-webkit-scrollbar-track {
	background-color: #011936 !important;
}

.gm-style-iw-d::-webkit-scrollbar {
	background-color: #011936 !important;
}

.gm-style-iw-d::-webkit-scrollbar-thumb {
	background-color: #ed254e !important;
}

.gm-style .gm-style-iw-t::after {
	background: #011936 !important;
}

.gm-style .gm-style-iw-d a {
	outline: none !important;
	display: block;
}

#dropdown-tools {
    gap: 0.5rem;
    font-size: 0.8em;
    display: flex;
	flex-direction: column;
	height: 100%;
}

#dropdown-tools > .dropdown-tool {
	position: relative;
	display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
	overflow: hidden;
    flex: 1;
    background-color: #ED254E;
    color: white;
    cursor: pointer;
    box-shadow: rgb(60 64 67 / 30%) 0px 1px 2px 0px, rgb(60 64 67 / 15%) 0px 1px 3px 1px;
}

#dropdown-tools > .dropdown-tool > .title {
	padding: 0.5rem 1.5rem;
	white-space: nowrap;
}

#dropdown-tools > .dropdown-tool:hover {
	//background-color: #ED254E;
    //color: white;
}

#dropdown-tools > .dropdown-tool.active {
	//background-color: #011936;
   // color: white;
}

#dropdown-tools > .dropdown-tool > .content {
	text-align: left;
	width: 100%;
    background-color: white;
    padding: 0.5rem;
    box-sizing: border-box;
    overflow: overlay;
}

#dropdown-tools > .dropdown-tool > .content > .options {
	width: 100%;
	overflow: hidden;
	border: none;
	border-radius: 0 !important;
	outline: none !important;
	color: #011936;
}

#dropdown-tools > .dropdown-tool > .content > .options > .option, #dropdown-tools > #theaters > .content > .option {
	padding: 0.2rem 0.4rem;
    margin: 0.2rem 0;
	border-bottom: 1px solid whitesmoke;
}

#dropdown-tools > .dropdown-tool > .content > .options > .option:hover, #dropdown-tools > #theaters > .content > .option:hover {
	background-color: #ED254E;
	color: white;
}

#dropdown-tools > .dropdown-tool > .content > .options > .option.selected, #dropdown-tools > #theaters > .content > .option.selected {
	background-color: #011936;
	color: white;
}

#dropdown-tools > .dropdown-tool.open > .content {
	display: block;
}

#minutes {
	width: 15px;
	text-align: center;
    padding: 0;
}

.ui-spinner {
	border-radius: 0;
}

#dropdown-tools > #theaters {
	flex: 2
}

#dropdown-tools > #theaters > .content {
	overflow: visible;
	height: 94%;
    display: flex;
    flex-direction: column;
}

#dropdown-tools > #theaters > .content > .options {
	overflow: overlay;
}

#dropdown-tools > #theaters > .content > .option {
	color: #011936;
}

#dropdown-tools > #days {
	overflow: visible;
}

#dropdown-tools-switch {
	display: none;
}

@media screen and (max-width: 979px) {
	#left > .movies > .movie > .basic-info {
		font-size: 1.5vw;
	}
}

@media screen and (max-width: 767px) {
	#left > .movies > .movie > .basic-info {
		font-size: 2vw;
	}
}

@media screen and (max-width: 479px) {
	#left > .movies > .movie > .basic-info {
		font-size: 3vw;
	}
}

@media screen and (max-width: 979px) {
	
	.gm-style .gm-style-iw-d {
		font-size: 0.7rem;
	}
	
	.gm-style .gm-style-iw-c {
		max-width: 100vw !important;
	}
	
	#dropdown-tools > .dropdown-tool {
		padding: 0;
		font-size: 0.7rem;
	}
	
	body {
		font-size: 0.7rem;
	}
	
	#left {
		height: 13rem;
		width: 100%;
	}
	
	#map-canvas {
		left: 0;
		top: 13rem;
		width: 100%;
		height: calc(100% - 15rem);
	}
	
	#left .movies {
		height: 100%;
		white-space: nowrap;
	}
	
	#dropdown-tools > .dropdown-tool > .content {
		padding: 0.5rem;
	}
	
	#left > .movies > .movie > .basic-info {
		padding: 0;
	}
	
	#right {
		transition: all 0.5s ease;
		width: 100%;
		bottom: 0;
		height: 0;
		display: flex;
	    align-items: center;
	    justify-content: center;
	    flex-direction: column;
	}
	
	#movie-genres-wrapper > #movie-genres-switch {
		display: flex;
		justify-content: center;
	}
	
	#movie-genres-wrapper > #movie-genres-switch.expanded {
		margin-bottom: 0.5rem;
	}
	
	#movie-genres-wrapper > #movie-genres-inner-wrapper {
		display: none;
	}
	
	#left .movies > .movie > .basic-info {
		height: 100%;
	}
	
	#left .movies > .movie > .basic-info > .info {
		flex: auto;
	}
	
	#left .movies > .movie > .basic-info > .image-wrapper > img {
		width: auto;
		height: 100%;
	}
	
	#left .movies > .movie {
		min-height: 0;
		display: inline-block;
		height: 93%;
		max-width: 65%;
		white-space: normal;
	}
	
	#left .movies > .movie > .basic-info > .image-wrapper {
		height: 100%;
		flex: auto;
	}
	
	#logo-wrapper > #logo {
		max-height: 3rem;
	}
	
	#dropdown-tools {
		display: none;
	}
	
	#right.open {
		height: 100%;
	}
	
	#right.open #dropdown-tools {
		display: flex;
		margin-top: 1rem;
	}
		
	#dropdown-tools-switch {
		cursor: pointer;
		display: flex;
	    align-items: center;
	    justify-content: center;
	}
	
	#dropdown-tools {
		height: calc(100% - 14px);
	}
	
	#dropdown-tools > #days {
		overflow: overlay;
	}
	
	#movie-search {
		margin: 0;
		flex: 2;
	}
	
	#movie-genres-wrapper {
		order: 2;
		flex: 1;
	}
	
	#movie-tools {
		display: flex;
		align-items: center;
	}
	
	#left .movies > .movie.selected > .extra-info {
		position: absolute;
	    top: 12rem;
	    left: 0;
	    padding: 0.5rem;
	    background-color: #011936;
	}
	
	#left .movies > .movie  > .basic-info > .info > .details { 
		-webkit-line-clamp: 3;
	}
	
	#left .movies > .movie {
		max-width: 300px;
	}	
}