/* Start:/bitrix/templates/niisite/components/bitrix/news.detail/testgame-next/style.css?179154396310905*/
.test-frame {
	--px-gap:12px;
	--px-margin:6px;
}

.test-frame .is-hidden {
	display:none !important;
}

.test-frame .test-title {
	text-align:center;
	font-size:133%;
	line-height:150%;
}

.test-frame .test-description {
	text-align:center;
	font-size:110%;
	line-height:120%;
}

.test-frame .panel-wrap {
	display:none;
	position:relative;
	padding:0px;
	transition:0.4s;
}

.test-frame .panel-wrap.is-sticky {
	position:fixed;
	top:0;
	width:calc(100% - calc(2*var(--field-size,0px)));
/*	left:var(--field-size,0px);*/
/*	right:var(--field-size,0px);*/
	z-index:+64;
}

.test-frame .panel-wrap.is-sticky + div {
/*	margin-top:120px;*/
}

.test-frame .panel-list {
	display:flex;
	list-style-type:none;
	padding:var(--px-margin) 0px;
	margin:0px;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:stretch;
	align-items:center;
	background-color:#FFFFFF;
	--bg-col:#E8E8E8;
	--fg-col:#336699;
	--bd-col:#336699;
	border-top:1px solid #999999;
	border-bottom:1px solid #999999;
/*	box-shadow:0px 0px 10px #999999;*/

}

.test-frame .panel-list > li.is-filled { --bg-col:#336699; --fg-col:#FFFFFF; --bd-col:#339966;}
.test-frame .panel-list > li.is-correct { --bg-col:#339966; --fg-col:#FFFFFF; --bd-col:#339966;}
.test-frame .panel-list > li.is-incorrect { --bg-col:#CC0033; --fg-col:#FFFFFF; --bd-col:#339966;}


.test-frame .panel-list > li {
	display:block;
	position:relative;
	min-width:2.8em;
	padding:var(--px-margin);
	margin:var(--px-margin);
/*	border-radius:var(--px-margin);*/
	text-align:center;
	background-color:var(--bg-col);
	color:var(--fg-col);
/*	border:1px solid var(--bd-col);*/
	transition:0.2s;
}

.test-frame .panel-list.panel-sel > li {
	cursor:pointer;
}

.test-frame.card .panel-list > li.is-current::after,
.test-frame.page .panel-list > li.is-current::after {
	display:block;
	position:absolute;
	content:'';
	left:0px;
	right:0px;
	z-index:+4;
	height:calc(var(--px-margin) / 2);
	top:calc(100% + var(--px-margin)/2);
	background-color:#336699;
}

.test-frame .panel-list.panel-sel > li:hover {
	box-shadow:0px 0px 8px var(--bg-col);
}

.test-frame .test-questions {
	display: grid;
	grid-template-rows: 1fr;
	transition: grid-template-rows 0.5s ease-in-out;
/*	border: 1px solid #F8F8F8;*/
	overflow: hidden;
	width:min(980px,100%);
	margin:0px auto;
}

.test-frame .test-question {
	grid-area: 1 / 1 / 2 / 2;
	opacity: 0;
	visibility: hidden;
	transition: 0.5s;
/*	background: #FFFFFF;*/
	padding: 0px;
}

.test-frame .test-question .test-question-pic {
	opacity:0;
	visibility:hidden;
	transition:0.8s;
}

.test-frame .test-question.is-active {
	opacity: 1;
	visibility: visible;
	height:auto;
}

.test-frame .test-question.is-active .test-question-pic {
	opacity:1;
	visibility:visible;
}

.test-frame .test-question:not(.is-active) {
	min-height: 200px;
	height: 200px;
	overflow: hidden;
}


.test-frame .test-question-number {text-align:left;}
.test-frame .test-question-number > span {display:inline-block;margin:6px 0px;padding:6px 12px;background-color:#E8E8E8;color:#336699;}

.test-frame .test-answer-result,
.test-frame .test-answer-list {
	list-style-type:none;
	margin: calc(3*var(--px-margin)) 0px;
	padding: calc(3*var(--px-margin));
	display:grid;
	gap:var(--px-gap);
	background-color:#CCCCCC;
	grid-template-columns: repeat(2, 1fr);
/*	grid-auto-rows: 1fr;*/
	align-items: stretch;
}

.test-frame .test-answer-result.test-answer-short,
.test-frame .test-answer-list.test-answer-short {
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

.test-frame .test-answer-right,
.test-frame .test-answer-wrong {
	--var-col:#666699;
	width:min(100%,640px);
	margin:24px auto;
	padding:12px;
	border:1px solid var(--var-col);
	color:var(--var-col);
}

.test-frame .test-answer-right {--var-col:#336699;}
.test-frame .test-answer-wrong {--var-col:#CC0033;}


@media screen and (max-width:720px) {

	.test-frame {
		--px-gap:6px;
		--px-margin:3px;
	}

	.test-frame .test-answer-result,
	.test-frame .test-answer-list {
		grid-template-columns: 1fr;
		grid-auto-rows: auto;
	}

	.test-frame .test-answer-right,
	.test-frame .test-answer-wrong {
		width:auto;
		margin:24px 0px;
	}

}

.test-frame .test-answer-result > li,
.test-frame .test-answer-list > li {
	border-radius:calc(4*var(--px-margin));
	border:1px solid #336699;
	background-color:#FFFFFF;
	display:flex;
	gap:calc(3*var(--px-margin));
	flex-direction:row;
	justify-content:stretch;
	align-items:center;
	margin:calc(1*var(--px-margin));
	padding:calc(3*var(--px-margin));
	transition:0.2s;
	user-select:none;
}

.test-frame .test-answer-list > li:has(.test-answer-mark) {
	cursor:pointer;
}

.test-frame .test-answer-result.test-answer-short > li,
.test-frame .test-answer-list.test-answer-short > li {
	display:flex;
	flex-direction:column;
	justify-content:stretch;
	align-items:center;
}

.test-frame .test-answer-result .test-answer-mark,
.test-frame .test-answer-list .test-answer-mark {
	display:block;
	position:relative;
	box-sizing:border-box;
	width:calc(7*var(--px-margin));
	height:calc(7*var(--px-margin));
	margin:calc(3*var(--px-margin));
	border:calc(var(--px-margin)) solid #336699;
	background-color:#FFFFFF;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:contain;
	flex-grow:0;
	flex-shrink:0;
}

.test-frame .test-answer-list .test-answer-mark {
	cursor:pointer;
}

.test-frame .test-answer-result .test-answer-mark {
	width:calc(10*var(--px-margin));
	height:calc(10*var(--px-margin));
	border:none;
}

.test-frame .test-answer-list li.q-marked .test-answer-mark::after {
	content:'';
	display:block;
	position:absolute;
	width:60%;
	height:60%;
	background-color:#336699;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
}

.test-frame .test-answer-result li.q-correct .test-answer-mark {
	background-image:url('data:image/svg+xml;utf8,<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M16 6L26 16L16 26M6 16L26 16" fill="none" stroke="%23336699" stroke-width="5" stroke-linecap="round"/></svg>');
}

.test-frame .test-answer-result.test-answer-short li.q-correct .test-answer-mark {
	background-image:url('data:image/svg+xml;utf8,<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M6 16L16 26L26 16M16 6L16 26" fill="none" stroke="%23336699" stroke-width="5" stroke-linecap="round"/></svg>');
}

.test-frame .test-answer-result li.q-marked.q-correct .test-answer-mark {
	background-image:url('data:image/svg+xml;utf8,<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M6 16L16 26L26 6" fill="none" stroke="%23009966" stroke-width="5" stroke-linecap="round"/></svg>');
}

.test-frame .test-answer-result li.q-marked.q-incorrect .test-answer-mark {
	background-image:url('data:image/svg+xml;utf8,<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M6 6L26 26M26 6L6 26" stroke="%23FF0000" stroke-width="5" stroke-linecap="round"/></svg>');
}


@media screen and (max-width:719px) {

	.test-frame .test-answer-list li.q-marked .test-answer-mark {
		background-color:#336699;
	}

	.test-frame .test-answer-list li.q-marked .test-answer-mark::after {
		display:none;
	}

}

.test-frame .test-answer-list.q-single .test-answer-mark,
.test-frame .test-answer-list.q-single li.q-marked .test-answer-mark::after {
	border-radius:50%;
}

.test-frame .test-answer-result .test-answer-img img,
.test-frame .test-answer-list .test-answer-img img {
	max-height:calc(10*var(--px-margin));
}

.test-frame .test-answer-result.test-answer-short .test-answer-img img,
.test-frame .test-answer-list.test-answer-short .test-answer-img img {
	max-height:calc(30*var(--px-margin));
}

.test-frame .test-answer-list > li:hover { 
	box-shadow:0px 0px 10px #336699;
}

.test-frame .test-panel {
	text-align:center;
	margin:calc(8*var(--px-margin)) 0px;
	padding:calc(2*var(--px-margin)) 0px;
}

.test-frame .test-panel input {
	display:none;
	box-sizing:border-box;
	margin:calc(2*var(--px-margin));
	padding:calc(2*var(--px-margin)) calc(4*var(--px-margin));
	font-size:calc(4*var(--px-margin));
	min-width:3em;
	color:#F0F0F0;
	background-color:#336699;
	border:none;
	border-radius:var(--px-margin);
	transition:0.4s;
}

.test-frame .test-panel[data-phase="answer"] input[data-act="answer"],
.test-frame .test-panel[data-phase="continue"] input[data-act="continue"],
.test-frame .test-panel[data-phase="result"] input[data-act="result"],
.test-frame .test-panel[data-phase="restart"] input[data-act="restart"] {
	display:inline-block;
}

.test-frame .test-panel input:not(:disabled):hover {
	color:#FFFFFF;
	background-color:#3366CC;
	box-shadow:0px 0px 10px #336699;
}

.test-frame .test-panel input:disabled {
	background-color:#999999;
	cursor:default;
}

.test-frame.scroll .test-navigate {display:none;}

.test-frame .modal-area {
	--col-mod-fg:#336699;
	display:none;
	opacity:0;
	position:fixed;
	left:0px;
	top:0px;
	z-index:256;
	width:100vw;
	height:100vh;
	width:100dvw;
	height:100dvh;
	transition:0.6s;
}

.test-frame.modal-error .modal-area {
	--col-mod-fg:#CC0033;
}

.test-frame.with-modal .modal-area {
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
}

.test-frame.with-modal.modal-shown .modal-area {
	opacity:1;
}

.test-frame .modal-area::before {
	content:'';
	position:absolute;
	z-index:2;
	left:0px;
	top:0px;
	right:0px;
	bottom:0px;
	opacity:0.5;
	background-color:#666666;
}

.test-frame .modal-popup {
	display:block;
	position:absolute;
	z-index:8;
	width:min(80vw,720px);
	height:min(70vh,400px);
	background-color:#F8F8F8;
	border:none;
	border-radius:18px;
	padding:48px 24px 48px 24px;
	text-align:left;
	color:var(--col-mod-fg,#336699);
	font-size:18px;
	line-height:24px;
	box-shadow:0px 0px 10px #666666;
}

.test-frame .modal-content {
	display:block;
	width:calc(100% - 24px);
	height:calc(100% - 48px);
	overflow-y:auto;
}

.test-frame .modal-content::-webkit-scrollbar {
	width: 12px;
}

.test-frame .modal-content::-webkit-scrollbar-track {
	background: #E8E8E8;
	border-radius: 6px;
}

.test-frame .modal-content::-webkit-scrollbar-thumb {
	background: var(--col-mod-fg,#336699);
	border-radius: 6px;
	border: 2px solid #E8E8E8;
}

.test-frame .modal-close {
	position:absolute;
	cursor:pointer;
	z-index:8;
	right:0px;
	top:0px;
	width:32px;
	background-color:#CC0033;
	color:#F8F8F8;
	text-align:center;
	padding:6px;
	border-radius:0px 18px 0px 18px;
}

.test-frame .modal-close::after {
	font-weight:bold;
	content: "\00d7";
}

.test-frame .modal-button {
	display:block;
	position:absolute;
	left:50%;bottom:24px;
	transform:translate(-50%,0px);
	cursor:pointer;
	min-width:120px;
	background-color:var(--col-mod-fg,#336699);
	color:#F8F8F8;
	text-align:center;
	border-radius:12px;
	padding:9px 18px;
}

.test-frame .res-text {
	width:min(100%,960px);
	margin:12px auto;
	text-align:left;
}


/* End */
/* /bitrix/templates/niisite/components/bitrix/news.detail/testgame-next/style.css?179154396310905 */