body {
	background-color: #0a0a0b;
	color: #ffffff;
	/* font-family: Verdana, Arial, Helvetica, sans-serif; */
	font-family: Calibri, Candara, Segoe, Geneva, Tahoma, Arial, sans-serif;

	display: flex;
	flex-direction: column;
	margin: 0px;
}

.PageBackground {
	position: absolute;
	z-index: -1;
	width: 100%;
	height: 100%;
	background: #0a0a0b;
}

button {
	font-family: Calibri, Candara, Segoe, Geneva, Tahoma, Arial, sans-serif;
}

a {
	color: #6EA31D;

	transition-property: color;
	transition-duration: 0.1s;
}

a:hover {
	color: #FFF;
}

.page-container
{
	display:flex;
	flex-flow: column;
	margin-top: 16px;
	padding-bottom: 128px;
}

.flex-row-wrap
{
	display: flex;
	flex-flow: row wrap;
	margin: 0 auto;
	justify-content: center;
	gap: 1rem;
}

& .vaclive-logo {
	width: 520px;
	height: 64px;
	margin: 16px auto;
	background-image: linear-gradient(272deg, rgba(211, 95, 183, 0.20) -0.75%, rgba(93, 185, 210, 0.20) 99.83%),url(https://cdn.fastly.steamstatic.com/apps/csgo/images/vacnet_logo.svg);
	background-repeat: no-repeat;
	background-position: center;
	border-radius: 8px;
	margin-bottom: 1em;

}

.intro-text-container
{
	display: flex;
	margin: 0px auto;
	flex-direction: column;
	width: 480px;
	background-color: #242424;
	padding: 20px;
	border-radius: 8px;

	& .intro-text-p{
		margin: auto;
		padding: 10px;
		text-align: left;
		color: rgb(209, 209, 209);
	}

	textarea
	{
		resize: none;
		color: black;
		background-color: rgb(209, 209, 209);
	}
}

.invite-link-p {
	font-family: 'Courier New', Courier, monospace;
	font-size: 14px;
	font-weight: bold;
	background-color: #000000;
	border-radius: 8px;
	padding: 8px 16px;
	text-align: left;
}

.video-column {

	display:flex;
	flex-flow: column;
	justify-content: flex-start;

	& .top-section {
		width: max(888px, calc((90vh - 500px)*16/9) );
		height: 128px;
		background-color: #202123;
		border-radius: 8px;
		display: flex;
		margin-bottom: 1em;

		& .top-section-text
		{
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			width: fit-content;
			margin: auto 16px auto 48px;

			& .list-title {
				color: white;
				margin-top: 0;
				margin-bottom: 0px;
				font-size: 1rem;
				padding-bottom: 8px;
			}

			  /* Styles the bullet points */
			& .labeled-list {
				margin: 0;
				padding-left: 20px; /* Indents the bullets */
				color: white;
			}

			& .labeled-list li {
				margin-bottom: 4px; /* Adds space between each bullet */
				color: white;
				text-align: left;
				font-size: 14px;
			}
		}
	}
}

.verdict-column {
	width: 650px;
	box-sizing: border-box;

	& .top-section-logo {
		width: 100%;
		height: 128px;
		background-image: linear-gradient(272deg, rgba(211, 95, 183, 0.20) -0.75%, rgba(93, 185, 210, 0.20) 99.83%),url(https://cdn.fastly.steamstatic.com/apps/csgo/images/vacnet_logo.svg);
		background-repeat: no-repeat;
		background-position: center;
		border-radius: 8px;
		margin-bottom: 1em;

	}

	& .verdicts-container {
		display:flex;
		flex-direction: column;

		min-height: max(530px, calc(90vh - 500px + 30px));
		background-color: #202123;
		border-radius: 8px;
		padding: 16px;
		box-sizing: border-box;

		& .verdicts-container-inner{
			background-color: #313234;
			border-radius: 8px;
		}
	}
}

.videocontainer {
	height: max(530px, calc(90vh - 500px + 30px));
	width: max(888px, calc((90vh - 500px)*16/9) );
	margin: 0 auto;
	/* box-shadow: 0px 8px 16px -2px #00000078; */
}

@media (max-width: 2000px) {
	.hide-on-wrap {
		display: none;
	}

	.size-for-column {
		width: max(888px, calc((90vh - 500px)*16/9) );

		& .verdicts-container{
			height: 500px;
			min-height: auto;

			& .verdict-desc
			{
				text-align: center;
				width: auto;
			}

			& .verdict-block
			{
				padding: 8px 0px;
				margin: 0px 24px;
			}
		}
	}
}

.video-js { width: 100% !important; height: 100% !important; background-color: #202123; border-radius:8px;}
.video-js .vjs-control-bar { opacity: 1 !important; display: flex !important; border-radius:8px;}
.video-js .vjs-picture-in-picture-control { display: none; }
.video-js .vjs-time-control { min-width: 0; padding-left: 0; padding-right: 0; }
.video-js .vjs-tech {
	object-fit: contain;
	object-position: center top;
}

.datasourcetable { margin-left: auto; margin-right: auto; text-align: center; vertical-align: middle; }
.errormessage { color: red; font-size: 20px; margin: 10px auto; }
.infomessage { color: white; font-size: 14px; margin: 10px auto; }

.detailsbuttons { display: flex; align-items: center; justify-content: center; margin: 10px auto; }

.detailsbutton {
	margin: 5px 5px auto;
	background-color:rgba(255, 239, 215, 0.15);
	color: #FFEFD7;
	border: 1px solid rgba(255, 239, 215, 0.1);
	padding: 6px 16px;
	border-radius: 3px;

	transition-property: background-color;
	transition-duration: 0.1s;
}

.detailsbutton:hover {
	background-color:rgba(255, 239, 215, 0.3);
}

.detailstable, .detailstable th, .detailstable td { background-color: #f0f9ff; color: #323a4b; border: 1px solid #323a4b; margin-left: auto; margin-right: auto; }

.accountdata { border: 1px solid black; margin: 10px; }

.verdict-block
{
	padding: 18px 0px;
	margin: 0px 24px;
	border-bottom: 1px solid rgb(80, 80, 80);

	&:last-child
	{
		border-bottom: none;
	}

	& .verdict-desc{
		display: block;
		text-align: left;
		color: rgb(172, 172, 172);
		width: fit-content;
	}
}

.verdictbuttons {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: row;
	margin: 10px auto 10px;
}

.verdictbutton {
	display: flex;
	width: 200px;
	height: 40px;
	font-size: 16px;
	justify-content: center;
	align-items: center;
	background-color: #4D4D4D;
	border-radius: 20px;

	&.verdictbutton label {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		cursor: pointer;
		z-index: 100;
		user-select: none;
	}

    & input[type="radio"] {
        display: none;
    }

	&:has(input[type="radio"]:checked) {
		border: 1.5px solid white;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.295);
		background-color: #636363;
    }
}

.highlight-text { color: #FFC20A; font-weight: bold; }
.highlight-text-negative { color: #529cd8; font-weight: bold; }

.verdictbutton.skip  { width: 180px; margin: 0px 12px;}
.verdictbuttonslabel,
.verdictbuttonsverdictlabel
{
	margin: 8px 0px;
	font-size: 18px;
}

th {
	font-weight: normal;
	font-size: 13px;
	text-transform: uppercase;
	color:rgba(255, 239, 215, 0.6);
	letter-spacing: 1px;
}

.verdictbutton:hover {
	filter: brightness(1.2);
}

.submitbuttons {
	display: flex;
	gap: 1rem;
	width: 100%;
	justify-content: center;
	margin-top: auto
}

.submitverdictbutton,
.SecondaryButton,
.CopyToClipboardButton,
.backbutton {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100px;
	height: 40px;
	gap: 8px;
	font-size: 18px;
	font-weight: bold;
	background-color: #6EA31D;
	color: #f0f9ff;
	border: none;
	border-radius: 4px;
}

.backbutton {
	background-color: #58595e;
}

.SecondaryButton {
	background-color: #58595e;
	color: #FFEFD7;
	text-decoration: none;
	cursor: pointer;
}

.CopyToClipboardButton {
	text-decoration: none;
	height: 40px;
	width: 160px;
	padding: 0px 8px;
	color: #ffffff;
	margin: 10px auto 0px;
}

.invitebutton,
.invitebutton:visited {
	display: flex;
	width: 125px;
	height: 35px;
	gap: 8px;
	font-size: 16px;
	font-weight: bold;
	background-color: #59bee4;
	color: #f0f9ff;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	text-decoration: none;
	align-items: center;
	justify-content: center;
}

.invitebutton:not(.disabled):hover,
.submitverdictbutton:hover,
.backbutton:hover,
.CopyToClipboardButton:hover,
.SecondaryButton:hover {
	filter: brightness(1.2);
}

.invitebutton.disabled
{
	background-color: #808080;
	cursor: not-allowed;
}

.status-text-container {
	display: flex;
	background-color: rgb(43, 43, 43);
	width: fit-content;
	padding: 4px 10px;
	border-radius: 8px;
	margin: 8px auto 0px auto;
	opacity: 0;

	transition-property: opacity;
	transition-duration: .5s;

	&.show
	{
		opacity: 1;
		transition-property: opacity;
		transition-duration: .5s;
	}

	& p{
		margin: 0px;
		font-style: italic;
	}
}

.mail-to
{
	/* margin-top: 8px; */
}

.footer-container
{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	align-content: center;
	justify-content: center;
	background-color: rgb(24, 24, 24);
	padding: 12px 0px;
	z-index: 100;

	& .footer-buttons
	{
		display: flex;
		gap: 1.4em;
		justify-content: center;
		align-content: center;
		margin-bottom: 6px;
	}

	& p {
		margin: 0px;
		color: rgb(119, 119, 119);
		font-size: 12px;
	}
}

.modaloverlay { background-color: #323a4baa; display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;  z-index: 100; }
.modalcontent { color: #323a4b; background: #f0f9ff; position: absolute; left: 50%; top: 250px; transform: translate(-50%, 0%); display: inline-block; border: 2px solid #323a4b; padding: 4px; box-shadow: 0 4px 8px black; border-radius: 6px; }
.modalheader { background-color: #323a4b; color: #f0f9ff; text-align: center; display: flex; align-items: center; justify-content: center; cursor: move; font-weight: bold; height: 30px; margin-bottom: 2px; border-radius: 6px; font-size: 14px }
.modalclosebutton { position: absolute; right: 10px; cursor: pointer; font-size: 24px; }
.modalclosebutton:hover { filter: brightness(1.2); transform: scale(1.02); }

.evidencelog { font-family: 'Courier New', Courier, monospace; font-weight: bold; font-size: 12px; white-space: nowrap; }
#copybutton { background-color: #f0f9ff; color: #323a4b; display: block; margin: 0 auto; width: 120px; }
#copybutton:hover:enabled { filter: brightness(1.2); transform: scale(1.02); }
#copiedMessage { display: none; margin-left: 10px; color: green; }

.modalgraph {
	display: none;
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.5);
}

.modalgraph-content {
	background-color: #fff;
	margin: 15% auto;
	padding: 20px;
	border: 1px solid #888;
	width: 80%;
	max-width: 600px;
}

.closegraph {
	color: #aaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
	cursor: pointer;
}

.closegraph:hover {
	color: #000;
}

.PageHeader {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid rgba(255, 239, 215, 0.1);
	background-color: #00000030;
	padding: 0px 12px;
}

.PageHeader .right {
	margin-left: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
}

.PageTitle {
	font-size: 2em;
	font-weight: bold;
	margin-top: 3px;
}

.CSLogo {
	width: 80px;
	align-self: center;
}

.ClipCount {
	height: 200%;
	font-size: 0.9rem;
	padding: 6px 12px 6px 12px;
	border-left: 1px solid rgba(255, 239, 215, 0.5);
	border-right: 1px solid rgba(255, 239, 215, 0.5);
}

.perf_timing_area {
	display: none;
}

.intro-page-button {
	margin:32px auto;
	display: flex;
	justify-content: center;
}


.intro-page-button-small {
	margin:8px auto;
	display: flex;
	justify-content: center;
}