/*#media-page-container:first-of-type {
    margin-bottom: 200vh;
}*/

@media (max-device-width: 800px) {
	:root {
		--media-p-right-w: 0px !important;
	}
	#media-right-items-container {
		display: none;
	}


	#media-basic-info {


		& #media-stats {
			/* display: inline-block !important; */
			/* width: unset !important; */
		}

		& #media-size,
		& #media-messages,
		& #media-file-count {
			display: none !important;
		}
	}
}


:root {
	--media-p-right-w: max(350px, 25vw);
	--media-p-right-w: min(
		max(350px, 5vw),
		25vw
	);

	--media-p-main-w: calc(100% - var(--media-p-right-w));
	--min-vid-h: 15vh;
	--max-vid-h: 65vh;
}

#media-page-container {
	padding-top: 0.5rem;
}

.syöpä {
/*	padding-top: 15px; */
}

#media-page-container.current-media #media-info-link a {
	/* color: #bbbbdb !important; */
	/* font-weight: bold; */
	/* font-size: 105%; */
	/* filter: drop-shadow(1px 1px 1px black) */
}


#channelsForm {
	background: #050101;
}

/* #channels-modal { */
/* 	position: fixed; */
/* 	left: 0; */
/* 	top: 0; */
/* 	width: 100vw; */
/* 	height: 100vh; */
/* 	display: flex; */
/* 	justify-content: center; */
/* 	align-items: center; */
/* 	background: #00000030; */
/* } */

		h1#media-title
		{
			overflow: hidden;
			text-overflow: ellipsis;
			font-size: 120%;
			line-height: 120%;
			margin: 0;
			white-space: pre;
		}


.spoiler-container canvas.mirror {
	display: none;
}

#media-page-container {

	display: flex;
    margin-bottom: 10vh;
	align-items: flex-start ;
	scroll-margin-top: 2rem;
	scroll-margin-top: calc(var(--header-height, 2rem) + 0.5rem);
	margin-top: 0.5rem;

	& #main-content
	{

    	--line-height: 2.5ch;
		max-width: var(--media-p-main-w);
		width: var(--media-p-main-w);
		flex-basis: var(--media-p-main-w);
		/*margin-top: 0.5rem;*/

		div#media-content
		{
			& div.media-page-content
			{
				width: 100%;
				text-align: center;
				margin-top: 0.8rem;

				& #media-stats 
				{
					text-align: center;
				}

				& .file
				{
					display: block;
					min-width: 5vw;
					max-width: min(750px, max(600px, 45vw));
					position: relative;
					width: auto;
					height: auto;
					position: relative;
				}

				& video.file
				{
					max-height: 60vh;
				}

				& .file.mirrored
				{
					filter: drop-shadow(0rem 0rem 20rem rgb(0,0,0,0.9)), blur(5rem);
					z-index: 1;
				}

				& canvas.mirror:not(.active)
				{
					display: none;
				}

				& .media-file:not(.spoiler-container) canvas.mirror.active
				{
					z-index: -0;
					position: absolute; 
					z-index: 0;
					width: 100%;
					height: 100%;
					filter: blur(2rem);
					opacity: 0.6;
					left: 0;
				}
				

				& .spoiler-container:not(:hover) {
					background-image: var(--spoiler-image);
					background-size: 10%;
					/*background-size: 100%;*/
					background-repeat: repeat;
					/*background-repeat: repeat;*/
				}

				& .spoiler-container {
					background-repeat: no-repeat;
					background-size: contain;
					min-height: 200px;
					min-width: 200px;
					background-position: center;
				}

				& .spoiler-container:hover {
					background-image: none;
				}

				& .file-spoilered {
					cursor: pointer;
					/* max-height: 800px; */
					/* max-width: 800px; */
					opacity: 0;
				}

				& .file-spoilered:hover {
					opacity: 1;
					background-image: none;
					max-height: initial;
					min-width: initial;
				}
			}

			& #media-basic-info 
			{

				line-height: var(--line-height);
				position: sticky;
				display: flex;
				/* width: 100%; */
				flex-wrap: wrap;
				justify-content: space-between;
				text-align: center;
				/* font-size: 90%; */
				font-family: 'Courier New', Courier, monospace;
						
				& #media-user-actions
				{
					/* width: 100%; */
					order: -1;
					letter-spacing: 0.05rem;
				}

				& #media-info-sender
				{
					margin-left: 2ch;
					order: -2;
					display: flex;
					align-items: center;
					height: var(--line-height);

					& a.media-poster-link
					{
						height:  var(--line-height);
						display: flex;
						align-items: center;
					}

					& a.avatar-link
					{
						align-items: center;
						height:  var(--line-height);
						& img
						{
							margin-right: 1ch;
							width:  var(--line-height) !important;
							height:  var(--line-height) !important;
							max-width: unset !important;
							max-height: unset !important;
							object-fit: cover !important;
						}
					}
				}

				& #media-stats
				{
					order: 1;
					width: 100%;
					display: flex;
					flex-wrap: wrap;
					font-size: 95%;
					justify-content: space-between;

					& #media-date {
						/* margin: auto; */
					}

					& *:not(x-coma) {
						display: inline-block;
						padding-left: 0.8ch;
					}
					& *:first-child {
						padding-left: 0.5ch;
					}
				}
			}

			& #media-added-channels-container
			{
				font-size: 110%;
				text-align: center;
			}

			& #media-tags {
				margin-top: 0.3rem;
			}

			& #media-tags-wrapper 
			{
				text-align: center;
				display: flex;
				justify-content: space-between;
				align-items: center;

				& .tag-container {
					display: inline-flex !important;
				}
			}
		}
	}




	& div#media-right-items-container
	{
		max-width: var(--media-p-right-w);
		min-width: var(--media-p-right-w);
		width: var(--media-p-right-w);
		flex-basis: var(--media-p-right-w);
		padding: 5px;
		align-self: baseline;
		max-height: 100%;
		overflow-y: auto;;
	}
}

#user-container #media-basic-info {
	/* width: 175% !important; */
	/* margin-left: -10rem; */
}


#media-added-channels-container {
		margin: 0.5rem 0 0.5rem 0;

	& .media-channel {

		& h5 {
			margin: 0;
			display: inline-block;
		}
	}
}


#media-page-container:not(.current-media) {
	border: 1px solid transparent !important
}
#media-page-container.current-media {
	 border: 1px solid #ffffff2e !important
}


.file.virgin {
    /* max-width: 30vw !important; */
	max-width: 100%;
	height: auto;
}



#media-rate {
    text-decoration: none;
}

#media-rate.do-rate {
    /*color: #2f712b;*/
    cursor: pointer;
    font-size: 1.2rem;
}
/*#media-rate.cancel-rate {
    color: #e16060 !important;
}*/


#media-modal-container {
    top: 0;
    left: 50%;
    position: fixed;
    transform: translate(-50%);
    background: var(--base-color-0);
    z-index: 500;

    height: max(100%,100vh);
    width: max(100%, 100vw);
    text-align: center;
    background-color: #000000b5;

    display: flex;
    align-items: center;
    justify-content: center;
}
.media-header-link {
    display: none;
}
#media-modal {
    /*
    max-height: 100vh;
    /*
    max-height: 97%;
    margin-top: 1%;
    */
    text-align: center;
    /*width: 100%;*/
    display: flex;
    max-height: 100vh;
    overflow-y: auto;
    /*overflow-x: hidden */
    scrollbar-width: thin;
    scrollbar-color: #ac9595 transparent;
    background: transparent !important;;

}
.media-jump:hover {
    filter: brightness(125%);
}
/*
#media-modal::-webkit-scrollbar {
    display: none;
}*/


#media-modal > img, #media-modal > video {
    cursor: pointer;
    margin: auto;
    vertical-align: middle;
    /* height: 100%; */
}


/*
.media-file video {
	min-height: 50vh;
	max-height: var(--max-vid-h, 85vh);
	width: auto;
}*/

.media-file video.fat-gif {
	object-fit: contain;
	min-width: 100%;
	height: auto;
	margin: 0;;
}

.media-file {
    margin: auto;
}

.fileinfo {
	margin-top: 0.5rem;
	& #media-file-link {
		white-space: pre;
		max-width: 95%;
		display: contents !important;
	}
	& #file-meta,
	& #file-actions,
	& #media-file-link {
		display: inline-block;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	& span {
		display: contents !important;
	}

}
.media-file > img {
    cursor: pointer;
}

h3.tag {
    font-size: 95%;
    margin: 0;
}

.unapproved tag {
    cursor: pointer;
    text-decoration: underline;
}


.media-navi {
    background-color: whitesmoke;
}

#media-actions {
    display: inline-block;
    font-weight: bold;
    margin-top: 3px;
    margin-left: 2px;
    margin-right: 2px;
}

#media-actions:empty {
    display: none !important;
}

.media-spoilered:hover {
    background-image: none;
}

.media-comment-container {
    width: max(min(90%, 1700px), 100%);
    text-align: left ;
}

.media-file > .embedded-media {
    min-width: 600px;
    min-height: 400px;
}

.media-file {
    color: black;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.media-jump.next {
	margin-right: 2rem;
}
.media-jump.prev {
	margin-left: 2rem;
}
.media-jump {
	font-size: 115%;
}

.media-jump.no-media {
    font-weight: lighter;
    opacity: 0.4;
}

/*
#media-page-container:first-of-type {
	margin-bottom: 250vh;
}*/

#main-body.sansers {
	scroll-snap-type: mandatory;
	  scroll-snap-points-y: repeat(300px);
	& #media-page-container {
		scroll-snap-align: start;
	}

	& .media-page-container  {
		contain: layout style;

		& div#media-right-items-container {
			overflow: hidden !important;
		}

	}
}

#top-media-links {
	margin-bottom: 1rem;
	align-items: center;
}

#mahti-modal {

    & #media-page-container {
        max-width: min(800px, 60vw);
        max-height: calc(100vh - 1rem);
        overflow-y: auto;
        overflow-x: hidden;
        margin-top: 2rem;
        margin-bottom: 2rem;
        flex-direction: column;
        scrollbar-width: thin;

        & #media-stats #media-size,
        & #media-stats #media-file-count {
            display: none;
        }

        & #media-stats {
            text-align: center;
        }
    }


    .media-bottom-row-arrow {
        display: none;
    }

    .file {
        /*object-fit: scale-down !important;
        max-width: 100% !important;*/
    }

    & #media-page-container video.file {
        max-height: 80vh;
        overflow-y: auto;
    }

    & #media-right-items-container {
        display: none;

    }

    & #top-media-links {
        display: none !important;

    }

    & #media-content {
        & #media-basic-info {
            top: 0 !important;
        }
    }

    & #media-carousel-list {
        margin-bottom: 5px;
    }

	

}

#media-info-link
{
	display: contents;
	overflow: hidden;
	& a {
		/*margin-top: auto;
		margin-bottom: 0.2rem;*/
		overflow: hidden;
		white-space: pre;
		margin-top: auto;
		display: flex;
	}
}