@charset "utf-8";
/* CSS Document for main #main*/

#page .home-nav {
	display: flex;
	flex-flow: wrap;
	justify-content: center; /*space-around;*/
	align-items: center;
	/*max-width: 600px;*/
	margin: auto;
	padding: 3px 0 20px;
}
#page .home-nav .buttons {
	border: none;
	padding: 2.5rem 2rem;
	text-align: center;
	text-decoration: none;
	display: block;
	font-family: Comfortaa, "Open Sans", sans-serif;
	font-size: 2.5rem;
	font-weight: bold;
	margin: 15px;
	cursor: pointer;
	border-radius: 10px;
	min-width: 220px;
	min-height: 80px;
}
#page .home-nav .buttons:hover {
	box-shadow: 0 0 10px #999;
	color: #333;
}
#page .home-nav .buttons span {
	font-size: 0.75em;
}
#page .home-nav .buttons span.subt {
	font-size: 0.5em;
	display: block;
}
#page .home-nav.klasmods {
	flex-basis: 100%;
}
.text-page {
	padding-left: 1rem;
}
.info {
	padding-left: 1rem;
}
.sites p.ps {
	padding: .125rem .5rem;
}
/* COLORS */
.c4 {
	background-color: #3e8bca;
	color: #fff;
}
.c5 {
	background-color: #FF5959;
	color: #fff;
}
.c6 {
	background-color: #3ecd85;
	color: #fff;
}
.c7 {
	background-color: #8080FB; /*6666FF EDED77;*/
	color: #fff;
}
#page .home-nav.a1 .buttons.c4 {
	/*opacity: 0.6;*/
    padding: 2.3125rem 2rem 2.5rem;
}
.home h2 {
	text-align: center;
}
.home h3 {
	display: contents;
}
/*
#page .home-nav.a2 .buttons.c7 {
	opacity: 0.5;
    padding: 6.5%;
    background-color: #88888818;
    border: 3px solid #8379f8;
    color: #8379f8;
}
*/
/* Project
#page .home-nav.a2 .buttons.c7 {
	opacity: 0.8;
    padding: 5% 7%;
    background-color: #88888818;
    border: 3px solid #8379f8;
    color: #8379f8;
}
.a1 .c7:after {
	content: "(\043F \0440 \043E \0435 \043A \0442 )";
	font-size: .5em;
	display: block;
}*/
.c8 {
	background-color: #e38b34;
	color: #fff;
}
.c8.m1 {
	background-color: #FFA64D;
	color: #666;
}
.c9 {
	background-color: #DFBC01; /*6AEB6A;*/
	color: #fff;
}
.c10 {
	background-color: #7ED22A;
	color: #fff;
}
.c11.m1 {
	background-color: #a34a43; /*59DEDE;*/
	color: #fff;
}
.c11.m2 {
	background-color: #35808f; /*59DEDE;*/
	color: #fff;
}
.c12.m3 {
	background-color: #7dbba9;
	color: #fff;
}
.c12.m4 {
	background-color: #30a4cb;
	color: #fff;
}
.k4 { color: #3e8bca; border-color: #3e8bca; background-color: #3e8bca22 }
.k5 { color: #FF5959; border-color: #FF5959; background-color: #FF595922 }
.k6 { color: #3ecd85; border-color: #3ecd85; background-color: #3ecd8522 }
.k7 { color: #8080FB; border-color: #8080FB; background-color: #8080FB22 }
.k8 { color: #FFA64D; border-color: #FFA64D; background-color: #FFA64D22 }
.k9 { color: #DFBC01; border-color: #DFBC01; background-color: #DFBC0122 }
.k10 { color: #7ED22A; border-color: #7ED22A; background-color: #7ED22A22 }
.k11.m1 { color: #a34a43; border-color: #a34a43; background-color: #a34a4322 }
.k11.m2 { color: #35808f; border-color: #35808f; background-color: #35808f22 }
.k12.m3 { color: #7dbba9; border-color: #7dbba9; background-color: #7dbba922 }
.k12.m4 { color: #30a4cb; border-color: #30a4cb; background-color: #30a4cb22 }

/* Задачи */
.klas .razd {
	padding-left: 1rem;
	border-top: 2px solid #888; 
}
.klas .razd-text {
	margin-left: 1.25rem;
}
.klas .razd:first-of-type {
	border-top: none; 
}
.klas h1 {
	border-width: 0 20px;
	border-radius: 20px;
	border-style: solid;
	padding: 5px;
	text-decoration: none;
}
.klas a {
	text-decoration: none;
}
.klas a:hover {
	text-decoration: underline;
}
.klas a.ah1 {
	text-decoration: none;
}
.klas > .subtitle {
	text-align: center;
	margin-left: 0;
	font-size: 0.8125rem;
}
/*.klas h2, 
.klas h3, 
.klas h4, 
.klas h5,
.klas h6 {
	text-align: left;
}*/
.klas h2 {
	padding-top: 0.8em;
	/*line-height: 1.7em;
	margin-left: 1rem;*/
}
.klas .klas-cont {
	padding-left: 1rem;
	margin-top: 3rem;
	margin-bottom: 3rem;
}
.klas .klas-cont h2 {
	padding: 0;
}
.klas .klas-cont h2.nolink {
	color: #888;
}
.klas .klas-cont h2:not(.r-addon) a {
	color: var(--h-color);
}
.klas .klas-cont h2::before,
.klas .klas-cont h3::before {
	content: "\e5e1";
	font-family: "Material Icons";
	font-size: 1rem;
	margin-right: .125rem;
	font-weight: normal;
	display: inline-block;
	vertical-align: baseline;
}
.klas .klas-cont h3 {
	margin-left: 2rem;
}
.klas .klas-cont h3:not(.r-addon) a {
	color: var(--txt-color);
}
.klas .klas-cont h2 a,
.klas .klas-cont h3 a {
	text-decoration: none;
}
.klas .klas-cont h3 a span.pod-alias {
	color: var(--h-color);
	font-size: 1.5rem;
}
.klas .klas-cont h3 a span.rzd-alias {
	color: var(--txt-color);
	font-family: simbalregular, "Open Sans", sans-serif;
	font-weight: normal;
}
.klas .klas-cont h3 a span.rzd-alias:after {
	content: ' : ';
	padding-right: .5rem;
}
.klas .klas-cont h2 a:hover,
.klas .klas-cont h3 a:hover,
.klas .klas-cont h3 a span:hover {
	color: var(--link-hov-color);
}
.klas h3 {
	/*margin-left: 2rem;*/
	margin-bottom: 0.25em;
}
.klas h4,
.klas h5,
.klas h6 {
	/*margin-top: 1.1em;
	margin-bottom: 1.1em;
	color: var(--txt-color);*/
}
/*
.klas h4 {
	margin-left: 3rem;
}
.klas h5 {
	margin-left: 4rem;
}
.klas h6 {
	margin-left: 5rem;
}
.klas p {
	*margin-left: 4rem;
}
*/
.klas .klas-cont > p {
	margin-top: -1rem;
}
.klas h3.f-opener, .klas h4.f-opener, .klas h5.f-opener, .klas h6.f-opener {
	cursor: pointer;
	color: var(--link-color);
}
.klas h3.f-opener:hover, .klas h4.f-opener:hover, .klas h5.f-opener:hover, .klas h6.f-opener:hover {
	color: var(--link-hov-color);
}
.klas h3.f-opener::after, .klas h4.f-opener:after, .klas h5.f-opener:after, .klas h6.f-opener:after {
	content: "\e5e1";
	font-family: "Material Icons";
	font-size: .875rem;
	line-height: 1em;
	margin-left: .125rem;
	font-weight: normal;
	display: inline-block;
	vertical-align: middle;
}
.klas h4.links a::after, .klas h5.links a::after, .klas h6.links a::after,
.klas h4.openinnew a::after, .klas h5.openinnew a::after, .klas h6.openinnew a::after,
.klas p.openinnew a::after {
	content: "\e89e";
	font-family: "Material Icons";
	font-size: .875rem;
	line-height: 1em;
	margin-left: .125rem;
	font-weight: normal;
	display: inline-block;
	vertical-align: baseline;
}
.klas .archives h4.archive a::after, .klas .files h4.file a::after {
	content: "\e2c4";
	font-family: "Material Icons";
	font-size: 1rem;
	line-height: 1em;
	margin-left: .125rem;
	font-weight: normal;
	display: inline-block;
	vertical-align: baseline;
}
.klas h3.f-opener:hover, .klas h3.f-opener:hover:after, 
.klas h4.f-opener:hover, .klas h4.f-opener:hover:after 
.klas h5.f-opener:hover, .klas h5.f-opener:hover:after 
.klas h6.f-opener:hover, .klas h6.f-opener:hover:after 
{
	color: var(--link-hov-color);
}

.klas p.file, .klas h4.dir, .klas h5.dir, .klas h6.dir {
	margin-top: .75rem;
	margin-bottom: .75rem;
	color: var(--link-color);
	font-size: 0.875rem;
	font-family: "Open Sans", sans-serif;
}
.klas p.file .material-icons {
	font-size: 1rem;
}
.klas h4.dir, .klas h5.dir, .klas h6.dir {
	color: var(--files-dir-color);
}
.klas p.file.level0, .klas h4.dir.level0, .klas h5.dir.level0, .klas h6.dir.level0 {margin-left: 3rem;}
.klas p.file.level1, .klas h4.dir.level1, .klas h5.dir.level1, .klas h6.dir.level1 {margin-left: 4rem;}
.klas p.file.level2, .klas h4.dir.level2, .klas h5.dir.level2, .klas h6.dir.level2 {margin-left: 5rem;}
.klas p.file.level3, .klas h4.dir.level3, .klas h5.dir.level3, .klas h6.dir.level3 {margin-left: 6rem;}
.klas p.file.level4, .klas h4.dir.level4, .klas h5.dir.level4, .klas h6.dir.level4 {margin-left: 7rem;}
.klas p.file.level5, .klas h4.dir.level5, .klas h5.dir.level5, .klas h6.dir.level5 {margin-left: 8rem;}
.klas p.file.level6, .klas h4.dir.level6, .klas h5.dir.level6, .klas h6.dir.level6 {margin-left: 9rem;}

.klas .f-clmns p.file.level0, .klas .f-clmns h4.dir.level0, .klas .f-clmns h5.dir.level0, .klas .f-clmns h6.dir.level0 {margin-left: 1rem;}
.klas .f-clmns p.file.level1, .klas .f-clmns h4.dir.level1, .klas .f-clmns h5.dir.level1, .klas .f-clmns h6.dir.level1 {margin-left: 2rem;}
.klas .f-clmns p.file.level2, .klas .f-clmns h4.dir.level2, .klas .f-clmns h5.dir.level2, .klas .f-clmns h6.dir.level2 {margin-left: 3rem;}
.klas .f-clmns p.file.level3, .klas .f-clmns h4.dir.level3, .klas .f-clmns h5.dir.level3, .klas .f-clmns h6.dir.level3 {margin-left: 4rem;}
.klas .f-clmns p.file.level4, .klas .f-clmns h4.dir.level4, .klas .f-clmns h5.dir.level4, .klas .f-clmns h6.dir.level4 {margin-left: 5rem;}
.klas .f-clmns p.file.level5, .klas .f-clmns h4.dir.level5, .klas .f-clmns h5.dir.level5, .klas .f-clmns h6.dir.level5 {margin-left: 6rem;}
.klas .f-clmns p.file.level6, .klas .f-clmns h4.dir.level6, .klas .f-clmns h5.dir.level6, .klas .f-clmns h6.dir.level6 {margin-left: 7rem;}

.klas .f-clmns h4.dir.level0.root {font-size: 1.25em;}

.urok, .files, .tests, .projects, .archives, .linkss { 
	padding-left: 1rem;
	margin-bottom: 1.1em;
}
.klas h2 span.outerspan {
	font-size: 1rem;
	color: var(--txt-color);
	margin-left: 1rem;
	/*display: block;*/
}
.klas h2 span.outerspan span {
	font-size: 1rem;
	font-family: simbalregular, "Open Sans", sans-serif;
	font-weight: normal;
	color: var(--txt-color);
	margin-left: initial;
	display: block;
	margin-bottom: .5rem;
}
.klas h2 span.razd-alias {
	font-size: 1rem;
	color: var(--txt-color);
	margin-right: 1rem;
}
.klas h2 span.razd-alias:after {
	content: ' : ';
}
.klas .klas-cont .perm-1-cont {
	margin-left: 1.25rem;
	margin-top: .5rem;
}
.klas .klas-cont .note-razd {
	margin: 0 1.25rem 2.5rem;
	padding: .5rem;
	*background-color: #ffe;
	border: solid .0625rem var(--link-perm1-color);
	*border-right: solid .5rem var(--h-color);
	border-radius: .5rem;
}
.klas .klas-cont .note-razd p.perm-1:before {
    content: '\e174';
    font-family: "Material Icons";
    font-size: 1.75rem;
	font-weight: 400;
	vertical-align: middle;
    color: var(--link-perm1-color);
}
.klas .klas-cont .note-razd .perm-1-cont p {
	margin: 0 0 .5rem 0;
}
.klas p.back {
	text-align: left;
	font-size: 0.875em;
	font-family: "Open Sans", sans-serif;
	margin-left: 1rem;
}
.klas p.back::before {
	content: '\e5e0';
	font-family: "Material Icons";
	color: var(--link-color);
	font-size: .875rem;
	margin-right: .125rem;
	font-weight: normal;
	vertical-align: middle;
}
.klas p.back a {
	text-decoration: none;
}
.clmns {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding-left: 1rem;
}
.clmn-left {
	flex: 0 1 50%;
}
.clmn-right {
	flex: 0 1 50%;
}
.clmn-alone {
	flex: 0 1 100%;
}
.clmn-row {
	flex: 0 1 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}
.zad {}
div.video, div.video2 {
	/*flex: 1 1 33%;*/
	flex: 0;
	display: flex;
	flex-flow: column;
	justify-content: space-between;
}
.klas h4,
.klas h5,
.klas h6 {
	margin-bottom: .25rem;
	margin-top:.25rem;
}
/*.klas h4.zad::before, 
.klas h4.zadNo::before,
.klas h4.video::before,
.klas h4.file::before,
.klas h4.test::before,
.klas h4.project::before,
.klas h4.projectNo::before*/
.klas h4::before,
.klas h4 a::before,
.klas h4 span.video2,
.klas h4 span.video2No,
.klas h5::before,
.klas h5 a::before,
.klas h5 span.video2,
.klas h5 span.video2No,
.klas h6::before,
.klas h6 a::before,
.klas h6 span.video2,
.klas h6 span.video2No,
.klas p.file::before {
	color: var(--txt-color);
	font-family: "Open Sans", sans-serif;
	padding-right: 0.5rem;
	font-size: .7em;
	font-weight: normal;
	min-width: 0.5rem;
	display: inline-block;
}
.klas h4 span.video2,
.klas h5 span.video2,
.klas h6 span.video2 {
	padding-right: 0;
	padding-left: 0.5rem;
}
.klas h4.zad::before,
.klas h5.zad::before,
.klas h6.zad::before {
	content: "\e5e1";
	font-family: "Material Icons";
	font-size: .6875rem;
	padding-right: .25rem;
	font-weight: normal;
	display: inline-block;
	vertical-align: baseline;
}
.klas h4.quiz::before,
.klas h5.quiz::before,
.klas h6.quiz::before,
.klas h4.quizNo::before,
.klas h5.quizNo::before,
.klas h6.quizNo::before {
	content: "\f04c";
	font-family: "Material Icons";
	font-size: 1.5rem;
	padding-right: .5rem;
	font-weight: normal;
	display: inline-block;
	vertical-align: middle;
}
.klas h4.zadNo::before,
.klas h5.zadNo::before,
.klas h6.zadNo::before,
.klas h4.zad::before,
.klas h5.zad::before,
.klas h6.zad::before {
	content: "\e94c";
	font-family: "Material Icons";
	font-size: 1.5rem;
	/*padding-right: .25rem;*/
	font-weight: normal;
	display: inline-block;
	vertical-align: middle;
	color: var(--link-color);
}
.klas .perm-1-cont h4.zadNo::before,
.klas .perm-1-cont h5.zadNo::before,
.klas .perm-1-cont h6.zadNo::before {
	color: var(--link-perm1-color);
}

.klas h4.zadNo a::before,
.klas h5.zadNo a::before,
.klas h6.zadNo a::before,
.klas h4.quizNo a::before,
.klas h5.quizNo a::before,
.klas h6.quizNo a::before {
	content: 'Зад. ' attr(data-zad);
}
.klas h4.zadNoL::before,
.klas h5.zadNoL::before,
.klas h6.zadNoL::before,
.klas h4.zad a::before,
.klas h5.zad a::before,
.klas h6.zad a::before {
	content: 'Задача ';
}
.klas h4.video::before,
.klas h5.video::before,
.klas h6.video::before {
	content: 'Видео '; 
}
 /*Видео */
.klas h4.video2::before, .klas h4.video2No::before,
.klas h5.video2::before, .klas h5.video2No::before,
.klas h6.video2::before, .klas h6.video2No::before {
	content: '';
	background-image: url(/images_site/icon.video.png);
	width: 1.5rem;
    min-width: initial;
    display: inline-block;
    height: 1.5rem;
    background-size: auto 1.5rem;
    background-repeat: no-repeat;
    vertical-align: middle;
}
.klas h4.videoNo::before,
.klas h5.videoNo::before,
.klas h6.videoNo::before {
	content: 'Зад. ' attr(data-zad);
}
.klas h4.file::before,
.klas h5.file::before,
.klas h6.file::before {
	/*content: 'Файл ';*/
	content: "\e415";
	font-family: "Material Icons";
	font-size: 1.5rem;
	font-weight: normal;
	display: inline-block;
	vertical-align: middle;
}
.klas h4.project::before,
.klas h5.project::before,
.klas h6.project::before {
	content: 'Проект ';
}
.klas h4.projectNo::before,
.klas h5.projectNo::before,
.klas h6.projectNo::before {
	content: 'Проект ' attr(data-zad);
}
.klas h4.test::before,
.klas h5.test::before
.klas h6.test::before {
	content: 'Тест ';
}
.klas h4.archive::before,
.klas h5.archive::before,
.klas h6.archive::before {
	/*content: 'ZIP ';*/
	content: "\eb2c";
	font-family: "Material Icons";
	font-size: 1.5rem;
	font-weight: normal;
	display: inline-block;
	vertical-align: middle;
}
/*
.klas .f-clmns p.file::before {
	background-image: url(/images_site/icons/file.png);
	margin-right: 5px;
}
.klas .f-clmns h4.dir::before, 
.klas .f-clmns h5.dir::before, 
.klas .f-clmns h6.dir::before, 
.klas .f-clmns p.file::before {
	content: '';
	width: 21px;
	min-width: initial;
	display: inline-block;
	height: 18px;
	background-size: auto 18px;
	background-repeat: no-repeat;
	background-position: top right;
	padding: 0;
}*/
.klas .f-clmns p.file::before {
    padding-right: .25rem;
    content: '\E24D';
    font-family: "Material Icons";
    font-size: 1.375rem;
    vertical-align: middle;
    color: var(--icon-file-color);
}
.klas .f-clmns h4.dir::before,
.klas .f-clmns h5.dir::before,
.klas .f-clmns h6.dir::before {
    padding-right: .25rem;
    /*content: '\E2C8';*/
    content: '\e2c7';
    font-family: "Material Icons";
    font-size: 1.5rem;
    vertical-align: middle;
    color: var(--icon-dir-color);
}
.klas .f-clmns h4.root.dir::before {
	color: var(--icon-root-color);
}

.klas div.item > p {
	margin-top: 0;
}
.klas .perm-0{}
.klas .perm-1{
	/*background-color: var(--perm-1-color);
	border-left: solid .5rem var(--h-color);*/
	padding: 0 .5rem 0 0;
}
/*
.klas .perm-1 h4,
.klas .perm-1 h5,
.klas .perm-1 h6 {
	line-height: 1.5rem;
}*/
/*
.klas .perm-1 h4::after,
.klas .perm-1 h5::after,
.klas .perm-1 h6::after {
    margin-right: 5px;
    content: '\e174';
    font-family: "Material Icons";
    font-size: 1.75rem;
	font-weight: 400;
    line-height: 1.75rem;
    float: left;
    color: var(--link-perm1-color);
}*/
/*.klas .perm-1.first {
	margin-left: -1.625rem;
}
.klas .perm-1.first::before {
    margin-right: 5px;
    content: '\0417 \0430  \0443 \0447 \0438 \0442 \0435 \043B \0438 ';
    font-family: "Open Sans", sans-serif;
    font-size: .8125rem;
	font-weight: 700;
    line-height: 1.75rem;
    float: left;
    color: var(--link-perm1-color);
}
*/
.klas .ui-widget-content a {
	color: var(--link-color);
}
.klas .ui-widget-content a:hover {
	color: var(--link-h-color);
}

.zad-cont {
	
}
.klas .pict, .video .videobox {
	margin-left: 3rem;
}
.klas .pict a img {
	display: block;
	max-width: 200px;
	width: 100%;
	height:auto;
}
.klas .video .videobox video {
	display: block;
	border: 1px solid #888;
}
.klas .video2 .videobox video {
	display: block;
	border: none;
}
/* ntbk */
.klas div.ntbk {
	margin-bottom: 0;
	padding-left: 1rem;
	margin-top: .5rem;
}
.klas div.ntbk div.item {
	margin-bottom: 0;
	padding-left: 1rem;
}
.klas h4.ntbk {
	*color: var(--txt2-color);
}
.klas h4.ntbk:before {
    content:'\f040';
    vertical-align: middle;
    font-family: "Material Icons";
    font-size: 1.75rem;
	font-weight: normal;
	font-style: normal;
    line-height: 1;
    color: var(--notebook-color);
}
.klas div.perm-1-env,
.klas div.item.perm-1 {
	margin-bottom: 0;
	padding-left: 1rem;
}

.klas h4.perm-1:before,
.klas h5.perm-1:before,
.klas h6.perm-1:before {
    content: '\e174';
    font-family: "Material Icons";
    font-size: 1.3125rem;
	font-weight: 400;
	vertical-align: middle;
    color: var(--link-perm1-color);
}
/*.klas .ntbk .clmns {
	padding-left: .8125rem;
}*/
.klas .ntbk a, 
.klas .ntbk h4.f-opener,
.klas .ntbk h5.f-opener,
.klas .ntbk h6.f-opener {
	color: var(--notebook-color);
}
.klas .ntbk a:hover, .klas .ntbk a:hover:after,
.klas .ntbk h4.f-opener:hover,
.klas .ntbk h5.f-opener:hover,
.klas .ntbk h6.f-opener:hover,
.klas .ntbk h4.f-opener:hover:after,
.klas .ntbk h5.f-opener:hover:after,
.klas .ntbk h6.f-opener:hover:after {
	color: var(--link-hov-color);
}
.klas .perm-1 a, 
.klas .perm-1 h4,
.klas .perm-1 h5,
.klas .perm-1 h6 {
	color: var(--link-perm1-color);
	font-size: .875rem;
	margin: .0625rem 0;
}
.klas .perm-1 a:hover, .klas .perm-1 a:hover:after,
.klas .perm-1 h4:hover, 
.klas .perm-1 h5:hover, 
.klas .perm-1 h6:hover, 
.klas .perm-1 h4:hover:after,
.klas .perm-1 h5:hover:after,
.klas .perm-1 h6:hover:after {
	color: var(--link-hov-color);
}
/* ui */
.files-ui :focus-visible {
    outline: none;
}
.files-ui.ui-widget-content {
	border: 1px solid #888;
	background: var(--page-bg-color);
	color: var(--txt-color);
}
.video-ui.ui-widget-content {
	border: 1px solid #888;
	background: var(--video-bg-color);
	color: var(--txt-color);
}
/*.files-ui {
	max-width: 800px;
}*/
.files-ui.ui-widget-content a {
	color: var(--link-color);
	border-style: none;
}
.files-ui .ui-dialog-titlebar {
	padding: .375em .625em;
}
.files-ui .ui-dialog-titlebar-close {
    right: .625em;
}
/*.files-ui .ui-dialog-title {
		color: var(--h-color);
	font-family: Comfortaa, "Open Sans", sans-serif;
	font-size: 1.1em;

}*/
.files-ui .ui-dialog-title, 
.video-ui .ui-dialog-title, 
.pip .ui-dialog-title {
	color: var(--txt-color);
	font-family: "Open Sans", sans-serif;
	font-size: 1rem;
	font-weight: normal;
	margin: 0;
}

.files-ui .ui-dialog-buttonpane { 
	background: var(--dialog-hf-bg-color);
	border-style: none;
	margin: 0;
	padding: .375em .625em .375em .625em;
	border-radius: 3px;
}
.files-ui .ui-widget-header {
	background-color:  var(--dialog-hf-bg-color);
	border-style: none;
}
.files-ui .ui-corner-all {
	border-style: none;
}
.files-ui.ui-dialog .ui-dialog-buttonpane button {
	margin: 0 .5rem 0 0;
	padding: .3125rem .875rem;
}
.files-ui .ui-button {
	font-family: "Open Sans", sans-serif;
	font-size: .9em;
	background-color: var(--dialog-btn-color);
	color: #fff;
}
.files-ui .ui-button:hover {
	color: #000;
}
/*.video-ui {
	max-width: 1290px;
}*/
.video-ui .ui-dialog-content, .pip .ui-dialog-content {
	padding: 0;
}
.video-ui, .pip {
	padding: 0.25rem;
}
.video-ui .ui-dialog-title::before { /*Видео */
	content: ''; 
	background-image: url(/images_site/icon.video.png);
	width: 1.6875rem;
    min-width: initial;
    display: inline-block;
    height: 1.375rem;
    background-size: auto 1.375rem;
    background-repeat: no-repeat;
    background-position: center left;
    vertical-align: bottom;
}
.ui-widget-overlay {
	background-color: rgba(0,0,0, 0.6);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	opacity: 1;
}
.ui-button .ui-icon {
	background-image: url("jq/images/ui-icons_ffffff_256x240.png");
}

.pip.files-ui.ui-dialog {
	position: fixed;
}
.pip.ui-dialog .ui-resizable-w {
	width: 5px;
}
.pip .ui-dialog-title::before { /* PiP */
	content: '\ea19';
    font-family: "Material Icons";
    font-size: 1.375rem;
	font-weight: normal;
    line-height: 1;
	display: inline-block;
    vertical-align: bottom;
	padding-right: .375rem;
    color: var(--dialog-btn-color);
}
.klas .urok h3 span {
	cursor: pointer;
}
.klas .urok h3 span:hover, .klas .urok h3 span:hover:after {
	color: var(--link-hov-color);
}
.klas .urok h3 span::after {
	content: '\ea19';
    font-family: "Material Icons";
    font-size: 1.5rem;
	font-weight: normal;
    line-height: 1;
	display: inline-block;
	padding-left: .375rem;
    vertical-align: middle;
    color: var(--dialog-btn-color);
}
.klas .ui-state-default, .klas .ui-state-active {
	border: none;
    background: transparent;
    font-weight: normal;
}
.klas .ui-state-default {
	color: var(--txt2-color);
}
.klas .ui-state-active, .klas .ui-state-default:hover {
	 color: var(--txt-color);
	font-weight: bold;
}
.klas .ui-state-default .ui-icon {
    background-image: var(--ui-icon-default);
}
.klas .ui-state-default:hover .ui-icon {
    background-image: var(--ui-icon-active);
}
.klas .ui-state-active .ui-icon {
    background-image: var(--ui-icon-active);
}
.klas .ui-widget-content {
    border: none;
    background: transparent;
    color: inherit;
}
.klas .ui-accordion .ui-accordion-header {
	padding: 0;
	margin: 0;
}
.klas .ui-accordion .ui-accordion-content {
	padding: 0;
	
}
.klas .ntbk.ui-accordion .ui-accordion-content,
.klas .perm-1.ui-accordion .ui-accordion-content {
	padding: 0;
}
.tnote {
	font-size: .8125rem;
	font-weight: normal;
	font-style: italic;
	color: var(--txt-color);
	font-family: "Open Sans", sans-serif;
}
div.item.file .f-opener {line-height: 1.5rem;}
/*
div.item.file .f-opener:before {
	content: "\e2c4";
	font-family: "Material Icons";
	font-size: 1.5rem;
	line-height: 1em;
	font-weight: normal;
	display: inline-block;
	vertical-align: middle;
	color: var(--link-color);
}*/

.klas div.item p.zadLinkTxt {
	margin: .5rem .5rem .5rem 1rem;
}
.klas div.item .zadTitle {
	margin-top: 1rem;
}
.klas div.item p.zadLinkTxt::before {
	content: "\e5e1";
	font-family: "Material Icons";
	font-size: .875rem;
	line-height: 1em;
	margin-left: .125rem;
	font-weight: normal;
	display: inline-block;
	vertical-align: middle;
}
.klas div.item .links.ebook::before {
	content: '\ea19';
    font-family: "Material Icons";
    font-size: 1.5rem;
	font-weight: normal;
	display: inline-block;
    vertical-align: middle;
}
.klas div.item .links.teach::before {
	content: '\e174';
    font-family: "Material Icons";
    font-size: 1.5rem;
	font-weight: normal;
	display: inline-block;
    vertical-align: middle;
}