@import url(@themeurl + "/css/font-source-sans.css");
@import "define.less";

.editor-styles-wrapper {
	#arivaZoomOverlay {
		position: fixed;
		display: none;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.75);
		z-index: 2000;
		cursor: pointer;
		text-align: center;
		vertical-align: middle;

		#arivaZoomClose {
			display: none;
			position: absolute;
			top: -82px;
			right: 0;
			z-index: 2100;
			background-color: transparent;
			border: 0 none;
			color: #cacaca;
			text-align: center;
			text-decoration: none;
			display: inline-block;
			font-size: 30px;
			font-weight: bold;
			cursor: pointer;

			img {
				height: 15px;
				width: 15px;
			}
		}

		#arivaZoomLogo {
			display: none;
			position: absolute;
			top: -118px;
			left: 0;
			z-index: 2100;

		}

		#arivaZoomGroup {
			display: flex;
			margin: 12% 15% 18% 15%;
			z-index: 2050;
			text-align: center;
			width: 100%;
			position: relative;
			gap: 0;

			justify-content: center;
			align-content: center;
			width: 70%;

			#arivaZoomPlayer {
				display: none;
				width: 80%;
				background-color: #5E697C;
			}

			#arivaZoomList {
				width: 20%;
				background-color: #DFE9F0;
				overflow-y: auto;

				ul {
					list-style-type: none;
					margin: 0;
					padding: 0.5rem 0;

					li {
						margin: 0 0 0 0;
						padding: 0.5rem 1.5rem;
						text-align: left;
						font-size: 100%;
						hyphens: auto;

						a {
							text-decoration: none;
							color: @cTextColor;

							.arivaZoomPoster {
								width: 100px;
								height: auto;
								float: left;
								margin-right: 0.1em;
							}

							.arivaZoomTitle {
								font-weight: normal;
							}

							.arivaZoomExcerpt {
								font-weight: bold;
							}
						}
					}
				}
			}
		}
	}

	@media screen and (max-width: 600px) {
		#arivaZoomOverlay {
			#arivaZoomLogo {
				top: -78px;
				left: 0.5em;
			}
			#arivaZoomGroup {
				width: 100%;
				display: flex;
				flex-direction: column;
				gap: 0;
				padding: 0.5rem;
				margin: 6em 0 0 0;

				#arivaZoomPlayer {
					width: 100%;
				}

				#arivaZoomList {
					width: 100%;
				}
			}
		}
	}
}