main.asset {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--basic-gap);
	position: relative;
	margin-top: 20px;
	@media (min-width: 768px) {
		grid-template-columns: minmax(0, 1fr) 330px;
	}

	#description {
		overflow: hidden;
	}

	h1 {
		font-size: 32px;
	}

	.content-column {
		display: flex;
		flex-direction: column;
		gap: var(--basic-gap);
	}

	.media-big {
		img, iframe {
			border-radius: 8px 8px 0 0;
			width: 100%;
			aspect-ratio: 16 / 9;
			height: auto;
		}
		.image {
			aspect-ratio: 16/9;
			background-size: contain;
			background-position: center;
			background-repeat: no-repeat;
		}
		iframe {
			border: 0;
		}
	}

	.media-selector {
		display: grid;
		grid-template-columns: repeat(6, 1fr);
  	gap: 3px;
		padding: 6px 10px 10px;
		.media-item {
			aspect-ratio: 16 / 9;
			max-width: 170px;
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			cursor: pointer;
			position: relative;
			opacity: 0.7;
			transition: all 0.2s ease-in-out;
			border: 3px solid white;
			@media (prefers-color-scheme: dark) {
				border: 3px solid #222;
			}
			.play {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				color: white;
				background-image: url(/static/images/play.svg);
				background-size: cover;
				background-repeat: no-repeat;
				padding: 25px;
				opacity: 0.9;
			}
			&.selected {
				border: 3px solid #4ec9f8;
				opacity: 1;
				border-radius: 5px;
			}
		}
	}

	aside {
		display: grid;
		gap: var(--basic-gap);
		line-height: 1.5;

		.thumbnail {
			margin-left: -15px;
			margin-top: -15px;
			max-width: calc(100% + 30px);
			width: calc(100% + 30px);
			border-radius: 5px 5px 0 0;
			margin-bottom: 5px;
		}

		.button {
			width: 100%;
			color: white;
		}

		.info {
			.by {
				opacity: 0.4;
				margin-bottom: 10px;
			}
		}
		.reviews {
			text-decoration: none;
			.mixed span {
				color: #ddc128;
				text-transform: capitalize;
				@media (prefers-color-scheme: dark) {
					color: #f8dd4e;
				}
			}
			.positive span {
				color: #4ec9f8;
				text-transform: capitalize;
			}
		}
		.donate {
			display: grid;
			gap: var(--basic-gap);
		}
		a {
			color: inherit;
		}
		.download-button-and-version-selector {
			display: flex;
			gap: 0px;
			align-items: center;
			justify-content: space-between;
			.download-version-button {
				border-radius: 0 6px 6px 0;
				width: 45px;
        height: 50px;
				display: flex;
				align-items: center;
				justify-content: center;
				cursor: pointer;
				margin: inherit;
				background: linear-gradient(0deg, rgb(114, 210, 99), rgb(133, 206, 94));
        border-left: 1px solid #ffffff91;
				position:relative;
				@media (prefers-color-scheme: dark) {
					background: linear-gradient(0deg, rgb(51, 184, 96), rgb(2, 151, 88));
        	border-left: 1px solid #a0e6b191;
				}
				select {
					/* Removing default style */
					border: 0;
					appearance: none;
					color: transparent;
					display: block;
					width: 100%;
					height: 100%;
					background: transparent;
					option {
						color: black;
						background: transparent;
					}
				}
				svg {
					position: absolute;
					width: 23px;
          pointer-events: none;
          top: calc(50% - 10px);
          left: 7px;
          height: 20px;
				}
			}
			#download-button {
				/* border-radius: 6px 0 0 6px; */
				flex-grow: 1;
				text-align: center;
				margin-top: 0px;
				&.with-version-selector {
					border-radius: 6px 0 0 6px;
				}
			}
		}
		.version-dropdown {
			width: 100%;
			background: transparent;
			border: 0;
			font-size: 14px;
			height: 40px;
			margin-bottom: 15px;
			text-align: center;
			opacity: 0.6;

			border-radius: 5px;
			margin-top: 10px;
			background: rgba(128, 128, 128, 0.17);
		}
		.logged-out-terms {
			text-align: center;
			font-size: 12px;
			margin-top: 7px;
			margin-bottom: 10px;
			opacity: 0.6;
		}
		.terms-checkbox-container {
			display: grid;
			grid-template-columns: 16px 1fr;
			gap: 5px;
			align-items: start;
			margin-top: 10px;
			span {
				font-size: 12px;
				margin-bottom: 10px;
				opacity: 0.8;
				display: inline-block;
			}
		}
	}

	.asset-body {
		font-size: 1em;
		line-height: 1.618;
		ul, ol {
			margin-left: 36px;
		}
		h2, h3, h4, h5, h6 {
			margin-top: 1em;
			margin-bottom: 1em;
			line-height: 1.25;
		}
		h1 {
			margin-bottom: 0.5em;
			margin-top: 0;
		}
		h2 {
			padding-bottom: .3em;
			font-size: 1.5em;
			border-bottom: 1px solid rgba(149, 149, 149, 0.3019607843);
		}
		h3 {
			font-size: 1.25em;
		}
		h4 {
			font-size: 1em;
			margin-bottom: 0.5em;
		}
		a {
			text-decoration: underline;
			color: #478cbf;
		}
		p {
			margin-bottom: 1em;
		}
		li {
			margin-top: .25em;
		}
		img {
			max-width: 100%;
		}
	}

	.title {
		font-size: 20px;
		font-family: var(--header-font-family);
		font-weight: 400;
		display: inline-block;
		a {
			display: inline-block;
			padding: 4px 0 12px;
			text-decoration: none;
			color: inherit;
		}
	}

	.reviews {
		display: grid;
		gap: 20px;
		.title span {
			opacity: 0.6;
			font-size: 0.8em;
		}
		.review {
			display: grid;
			padding: 15px;
			gap: 10px;
			border-radius: 10px;
			box-shadow: 0 3px 17px -10px rgba(0, 0, 0, 0.36);
			background: #f7f7f7;
			border: 1px solid #e1e1e1;
			@media (prefers-color-scheme: dark) {
				background: #282828;
				border-color: #3e3e3e
			}
			.body {
				white-space: pre-line;
				font-weight: 300;
			}
			.rating {
				display: grid;
				grid-template-columns: 1fr 1fr;
				font-size: 0.8em;
				font-weight: 300;
				.info {
					display: flex;
					align-items: end;
				}
				.actions {
					text-align: right;
				}
				img {
					max-width: 100%;
					width: 20px;
					margin-right: 10px;
					position: relative;
					&.negative {
						top: 5px;
					}
				}
				a {
					color: inherit;
					font-weight: 600;
					text-decoration: none;
				}
				span {
					opacity: 0.7;
				}
			}
		}
		.actions {
			a {
				color: inherit;
				opacity: 0.7;
				font-weight: 100 !important;
			}
		}
		.reply {
			background: rgba(166, 166, 166, 0.12);
			position: relative;
			left: -16px;
			padding: 15px;
			margin-right: -32px;
			margin-bottom: -15px;
			border-radius: 0 0 10px 10px;
			border: 1px solid rgba(255, 255, 255, 0.07);
			span {
				font-size: 0.8em;
				font-weight: 300;
				display: inline-block;
  			margin-bottom: 7px;
			}
			p {
				white-space: pre-line;
				font-weight: 300;
			}
			a {
				color: inherit;
				font-weight: 600;
				text-decoration: none;
			}
		}
	}

	.flag-option {
		color: inherit;
		opacity: 0.7;
		font-weight: 100 !important;
		cursor: pointer;
	}

	h2.write-a-review {
		margin-top: 30px;
	}
	#reviews form {

		/* TODO: mobile */

		background: #282828;
		padding: 15px;
		border-radius: 8px;
		@media (prefers-color-scheme: light) {
			background: #f1f1f1;
		}
		
		p {
			margin-bottom: 10px;
		}
		textarea {
			width: 100%;
			resize: vertical;
			height: 38px;
			min-height: 70px;
			padding: 10px;
			font-family: inherit;
			border-radius: 5px;
			border: 1px solid #606060;
			margin-bottom: 9px;
			@media (prefers-color-scheme: light) {
				border-color: #e1e1e1;
			}
		}
		.value-selector {
			margin: 10px 0 28px;
			label {
				margin-right: 20px;
				&[for="positive"] {
					background: #478cbf;
				}
				&[for="negative"] {
					background: #6f312f;
				}
			}
			label, input {
				cursor: pointer;
			}
			input {
				/* hiding them */
				position: absolute;
  			opacity: 0;
			}
			img {
				max-width: 23px;
				position: relative;
				top: 3px;
				&.negative {
					top: 9px;
				}
			}
		}
		.value-selector input[type="radio"] + label {
			opacity: 0.5;
			transition: all 0.3s ease;
			padding: 9.5px;
			border-radius: 6px;
		}
			
		.value-selector input[type="radio"]:checked + label {
				opacity: 1;
				@media (prefers-color-scheme: light) {
					color: white;
				}
		}

		.value-selector input[type="radio"]:not(:checked) + label {
			background: transparent;
		}
	}

	.tooltip {
		position: relative;
		display: inline-block;
	}

	.tooltip .tooltiptext {
		visibility: hidden;
		width: 120px;
		background-color:rgba(0, 0, 0, 0.8);
		color: #fff;
		text-align: center;
		border-radius: 6px;
		padding: 5px 0;

		/* Position the tooltip */
		position: absolute;
		z-index: 1;
		
	}

	.tooltip:hover .tooltiptext {
		visibility: visible;
	}

}