button {font-size: 16pt; margin: 5px;}
select {font-size: 14pt;}
ul {font-size: 12pt; margin: 0px;}
p {text-align: justify; padding: 3px; margin: 1px;}
p:first-letter {margin-left: 1.5em;}
.vo {max-width: 130px;}
.vop {max-width: 120px;}
.vou {max-width: 220px;}
.ihelpg, .ihelpb, .ihelpr {font-size: 10pt; position: relative; left: 3px; top: -2px;}
.ihelpg {color: #080;}
.ihelpb {color: #00D;}
.ihelpr {color: #800;}
.fntmob {font-size: 12pt;}
input {font-size: 14pt;}
input[type="file"] {font-size: 10pt;}
h1 {font-size: 18pt;}
.b {border-collapse: separate; width: 95%; border: 0px; border-spacing: 5px;}
.b td {text-align: center; vertical-align: center; border: 1px solid #555; background: #EEE; border-radius: 5px; padding: 5px;}
.grayhelp {color: #808080; font-size: medium;}
h1, h3 {padding: 0px; margin: 0px 0px 5px 0px; text-align: center;}
iframe {width: 97%; height: 200px; margin: 1% 0px 1% 0px; padding: 1%;}
input, textarea {border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; resize: none;}
textarea {width: 96%; font-size: 14pt;}
fieldset {border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; background: #EEE; border: 1px solid; padding: 5px; width: 96%;}
hr {border: none; background: #337; height: 2px; width: 95%;}
.mimg {width: auto; max-height: 100px; max-width: 700px;}
.bimg {display: block; max-width: 700px; max-height: 300px; margin-left: auto; margin-right: auto;}
thead, tfoot {background: #EEE;}
.pg td {padding: 3px 5px 3px 5px;}
.cc td {text-align:center; vertical-align: center;}
.hand {cursor: pointer;}
.qnum {color: #FFF; background: #558; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 0px 10px 0px 10px;}
.qnum:before {content: "# ";}
.c {position: relative; left: 50%; margin-right: -50%; transform: translate(-50%, 0);}
.btn {background: #D0D0D0; border: 1px #404040 solid; color: #000000; border-radius: 5px; padding: 0px 3px 0px 3px; font-size:80%;}
.btn:hover {cursor: pointer; color: #FFFF80;}
.btnb {background: #D0D0D0; border: 1px #404040 solid; color: #000000; border-radius: 5px; padding: 0px 3px 0px 3px; position: absolute; left: 50%; transform: translate(-50%, 0); text-align: center;}
.btnb:hover {cursor: pointer; color: #FFFF80;}

/* печать, мобильные размеры */
@media (min-width: 500px) {.vo,.vou,.vop {max-width: 380px;} .fntmob {font-size: 14pt;} input {font-size: 16pt;} h1 {font-size: 24pt;}}
@page {margin: 1cm;}
@media screen {
	img {max-height: 200px;}
}
@media print {
	body {font-size: 12pt;}
	hr {page-break-before: always;}
	img {max-width: 100% !important; max-height: 300px;}
	.noprint {display: none;}
}

/* визуализация отображения формул */
eq {margin-right: 3px; margin-left: 3px;}
i {margin-right: 2px; margin-left: 2px;}
ss {white-space: nowrap; display: inline-block; position: relative; top: 0.6em; margin: -0.6em 0 0 0; padding: 0 3px 0 3px; font-size: small;}
sp {display: block;}
sb {white-space: nowrap; display: block;}
divb {display: block; border-bottom: 1px solid #000;}
vect {white-space: nowrap; display: inline-block; border-top: 1px solid #000; margin-top: 3px;}
frac {white-space: nowrap; display: inline-block; text-align: center; position: relative; top: 0.6em; margin: -0.6em 0 0 0; padding-left: 3px;}
fracf {white-space: nowrap; display: inline-block; text-align: center; position: relative; top: 1.2em; margin: -0.6em 0 0 0; padding-left: 3px;}
fracd {white-space: nowrap; display: inline-block; text-align: center; position: relative; top: 0.6em; margin: -0.6em 0 0 0; padding-left: 3px;}
fracr {white-space: nowrap; display: inline-block; text-align: center; position: relative; top: 1.5em; margin: -1.4em 0 0 0; padding-left: 3px;}
frace {white-space: nowrap; display: block; margin-bottom: 0.8em;}
fracef {white-space: nowrap; display: block; margin-bottom: 1em;}
fraced {white-space: nowrap; display: block; margin-bottom: 1.3em;}
fracer {white-space: nowrap; display: block; margin-bottom: 1.2em; padding-top: 0.3em;}
power {display: inline-block; font-size: x-small; position: relative; top: -1em; padding-top: 1em;}
powerd {display: inline-block; font-size: x-small; position: relative; top: -1.5em; padding-top: 1em;}
index {display: inline-block; font-size: x-small; position: relative; top: 0.6em; margin-bottom: 0.8em;}
sqrt {white-space: nowrap; display: inline-block; vertical-align: middle; border-top: 1px solid; border-left: 1px solid; transform: skew(-15deg); transform-origin: bottom left; margin: 0.3em 1em; position: relative; top: -0.1em;}
sqrt:before {content: ""; position: absolute; bottom: 0; height: 40%; width: 0.6em; left: -0.6em; border-top: 1px solid; border-right: 1px solid; transform: skew(30deg); transform-origin: bottom right;}
sqrtd {white-space: nowrap; display: inline-block; vertical-align: middle; border-top: 1px solid; border-left: 1px solid; transform: skew(-15deg); transform-origin: bottom left; margin: 0.3em 1em; position: relative; top: -0.1em;}
sqrtd:before {content: ""; position: absolute; bottom: 0; height: 40%; width: 0.6em; left: -0.6em; border-top: 1px solid; border-right: 1px solid; transform: skew(30deg); transform-origin: bottom right;}
sqrtb {white-space: nowrap; display: inline-block; vertical-align: middle; border-top: 1px solid; border-left: 1px solid; transform: skew(-15deg); transform-origin: bottom left; margin: 0.5em 1em; position: relative; top: -0.3em;}
sqrtb:before {content: ""; position: absolute; bottom: 0; height: 40%; width: 0.6em; left: -0.6em; border-top: 1px solid; border-right: 1px solid; transform: skew(30deg); transform-origin: bottom right;}
sqrtv {white-space: nowrap; display: inline-block; padding-left: 0.3em; transform: skew(15deg);}
sqrtvd {white-space: nowrap; display: inline-block; padding-left: 0; transform: skew(15deg);}
sqrtvb {white-space: nowrap; display: inline-block; padding-left: 0; transform: skew(15deg);}
sqrtp {white-space: nowrap; display: inline-block; position: relative; transform: skew(15deg); font-size: x-small; top: -0.7em; right: 1.5em;}
sqrtpd {white-space: nowrap; display: inline-block; position: relative; transform: skew(15deg); font-size: x-small; top: -0.7em; right: 1.5em;}
sqrtpb {white-space: nowrap; display: inline-block; position: relative; transform: skew(15deg); font-size: x-small; top: -0.9em; right: 1.5em;}
red {color: #f00;}

/* формулы, системы уравнений */
.braces {display: inline-block; text-align: left; position: relative; padding: .3em .5em; margin-left: 1em;}
.braces::before, .braces::after, .curly::before, .curly::after {content: ""; position:absolute; width: .8em; height: 25%;}
.braces::before, .braces::after {left: 0; border-left: 2px solid;}
.braces::before {top: 0; border-top-left-radius: .8em;}
.braces::after {bottom: 0; border-bottom-left-radius: .8em;}
.curly::before, .curly::after {left: -.8em; border-right: 2px solid;}
.curly::before {top: 25%; border-bottom-right-radius: .8em;}
.curly::after {bottom: 25%; border-top-right-radius: .8em;}

/* визуализация поля ввода задачи */
.edit {position: relative; background: #FFE; width: 98%; font-size: 14pt; border-radius: 5px; border: 1px solid #000; padding: 3px; margin-top: 2px;}
eng {color: #F00;}
calc {color: #099;}
calc eng {color: #F0F;}
rnd {color: #00F;}
rnd eng {color: #F0F;}
#iedit td {text-align: center;}
#stype div {display: inline-block; min-width: 30px; padding: 5px; margin: 5px; border: 1px solid #000; background: #CCC; border-radius: 5px; cursor: pointer;}

/* реализация списков */
#mySel {background: #FFF; padding: 3px; border: 1px solid #888; overflow-y: scroll; display: grid; grid-gap: 3px; position: absolute; box-shadow: 3px 3px 2px; left: 50%; margin-left: -150px; width: 300px; max-height: 300px; z-index: 1000; border-radius: 5px;}
#mySel > div {background: #EEE; padding: 3px; border: 1px solid #000; text-align: center; border-radius: 5px;}

/* сортировка Оформление */
th.sorted[data-order="1"],
th.sorted[data-order="-1"] {position: relative;}
th.sorted[data-order="1"]::after,
th.sorted[data-order="-1"]::after {top: 1px; right: 8px; position: absolute; color: #F00; font-size: 8pt;}
th.sorted[data-order="-1"]::after {content: "Яа"}
th.sorted[data-order="1"]::after {content: "Ая"}
.table_sort th {cursor: pointer; padding: 2px;} .table_sort th:hover {background: yellow;} .table_sort td {padding: 2px;} .table_sort {margin: auto; border-collapse: collapse;}
.detail {font-size: small; height: 7px;}
.detail td {width: 1em; text-align: center;}
.detail .bk {width: 1px; padding: 0; background: #000;}