:root {
 --body-background: #EFF2FF;
 --block-margin: 0px 4px 16px 0px;

 --head-background: #0086E6;
 --head-color: #cbe6fa;

 --panel-shadow: 5px 5px 5px #cbe6fa;
 --panel-border: 0px solid #000000;
 --panel-head-background: #0086E6;
 --panel-head-color: white;
 --panel-head-color-hover: #404040;
 --panel-margin: 0px 0px 16px 0px;
 --panel-background: rgba(255, 255, 255, 1);
 --panel-color-even: #FFFFFF;
 --panel-color-even-hover: #EEEEEE;
 --panel-color-odd: #FFFFFF;
 --panel-color-odd-hover: #EEEEEE;
 --panel-color-selected: #DDDDDD;

 --table-head-background: #DDDDFF;
 --table-head-color: blue;
 --table-head-color-hover: #404040;

 --input-border: 1px solid rgba(205, 205, 205, 0.4);
 --input-background: white;
 --input-background-hover: rgba(205, 205, 205, 0.4);
}

@font-face { /*Импорт шрифта Ubuntu-Bold*/
 font-family: 'Ubuntu-B';
 src: local(ubuntu-b), url('../fonts/Ubuntu-B.ttf');
}

@font-face { /*Импорт шрифта Ubuntu-Regular*/
 font-family: 'Ubuntu-R';
 src: local(ubuntu-r), url('../fonts/Ubuntu-R.ttf');
}

body {
 white-space: nowrap;
 text-align: center;
 font-family: Ubuntu-R;
 font-style: normal;
 font-stretch: ultra-expanded;
 background: var(--body-background);
 color: #967272;
 padding: 0px;
 margin: 0px;
}

div.global {
 width: 98%;
 min-width: 800px;
 display: block;
 height: auto;
 text-align: left;
 padding: 0px 0px;
 margin: 0px auto;
}

div.globalHeader {
 display: block;
 height: 110px;
 position: fixed;
 width: 100%;
 background-color: var(--head-background);
 background-image: url('../../img/scheme/default/_classic/head_ukr.png');
 background-repeat: no-repeat;
 border-spacing: 0px;
 border: var(--panel-border);
 box-shadow: var(--panel-shadow);
 margin: 0px 4px 16px 0px;
 z-index: 1000;
}

div.globalSubHeader {
 width: 100%;
 height: 125px;
}

div.globalLeft {
 display: inline-block;
 position: relative;
 width: 200px;
 height: auto;
 white-space: normal;
 vertical-align: top;
 margin: 0px 12px 0px 0px;
}

div.globalRight {
 display: inline-block;
 position: relative;
 width: calc(100% - 216px);
 height: auto;
 white-space: normal;
 vertical-align: top;
 margin: 0px 12px 0px 0px;
}

div.globalFooter {
 display: block;
 width: 100%;
 height: auto;
 border-spacing: 0px;
 border: var(--panel-border);
 background-color: var(--head-background);
 vertical-align: middle;
 text-align: center;
 box-shadow: var(--panel-shadow);
 color: var(--head-color);
 font-size: 9px;
 font-family: Ubuntu-B;
 font-weight: bold;
 padding: 0px 0px 5px 0px;
 margin: 0px;
}

div.globalFooter p {
 padding: 5px 0px 3px 0px;
 margin: 0px;
}

div.globalFooter a {
 color: white;
}

div.globalFooter a:hover {
 color: blue;
}

div.globalFooter table {
 width: 100%;
 background: #495762;
 font-size: 10px;
 color: white;
 margin: 0px 0px 3px 0px;
}

div.globalFooter table td {
 padding: 3px 20px;
}

div.globalFooter table td:nth-child(1) {
 width: 20%;
 text-align: right;
}

div.globalFooter table td:nth-child(2) {
 width: 20%;
 text-align: left;
}

div.globalFooter table td:nth-child(3) {
 text-align: center;
}

div.globalFooter table td:nth-child(4) {
 width: 20%;
 text-align: left;
}

div.dlogin {
 position: absolute;
 width: 250px;
 right: 25px;
 top: 20px;
 border-spacing: 0px;
 color: white;
}

div.dlogin table {
 width: 250px;
 text-align: right;
 border-spacing: 0px;
 font-size: 12px;
 color: white;
}

div.dlogin table tr {
}

div.dlogin table tr td {
 padding: 2px;
}

div.dlogin table tr td a {
 color: white;
}

div.dlogin table tr td input {
 font-size: 11px;
 width: 180px;
 padding: 3px 5px;
 margin: 0px;
 border: var(--panel-border);
 border-spacing: 0px;
 border-radius: 1px;
}

div.dlogin table tr td input[type=submit] {
 margin: 2px 0px 3px 0px;
}

div.dlogin table tr td input:hover {
 background-color: var(--input-background-hover);
}

div.panel {
 background-color: var(--panel-background);
 box-shadow: var(--panel-shadow);
 border: var(--panel-border);
 border-spacing: 0px;
 width: 100%;
 font-size: 12px;
 text-align: left;
 margin: var(--panel-margin);
 white-space: normal;
 padding: 0px;
}

div.panel div.senderText {
 display: block;
 height: 460px;
 float: none;
}

div.panel div.senderText div.solution {
 display: block;
 width: 75%;
 height: 100%;
 float: left;
}

div.panel div.senderText div.solutionHTML {
 display: block;
 width: 65%;
 height: 100%;
 float: left;
}

div.panel div.senderText div.test {
 display: block;
 width: calc(25% - 1px);
 height: auto;
 float: right;
 margin: 0px 0px 1px 0px;
}

div.panel div.senderText div.testCSS {
 display: block;
 width: calc(35% - 1px);
 height: 424px;
 float: right;
 margin: 0px 0px 1px 0px;
}

div.panel div.senderText div.test textarea.test {
 height: 370px;
 overflow: auto;
 border: 0px solid #CCCCFF;
 border-spacing: 0px;
 resize: none;
 padding: 5px;
 font-size: 14px;
 line-height: 17px;
 font-family: Courier New;
 margin: 0px;
 outline: none;
}

div.panel div.senderText div.control {
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 flex-wrap: wrap;
 width: calc(25% - 1px);
 height: auto;
 float: right;
}

div.panel div.senderText div.control input.send {
 font-size: 10px;
 width: 100%;
 padding: 0px;
 height: 22px;
 margin: 0px;
 background-color: var(--head-background);
 border-spacing: 0px;
 border: 0px solid #CCCCFF;
 color: white;
 outline: none;
}

div.panel div.senderText div.control input.send:hover {
 color: black;
}

div.panel div.senderText div.control input.debug {
 font-size: 10px;
 width: calc(50% - 1px);
 padding: 0px;
 height: 35px;
 margin: 0px 0px 1px 0px;
 font-weight: bolder;
 background-color: var(--head-background);
 border-spacing: 0px;
 border: 0px solid #CCCCFF;
 color: white;
 outline: none;
}

div.panel div.senderText div.control input.debug:hover {
 color: black;
}

div.panel div.senderText div.control input.syntax {
 font-size: 10px;
 width: calc(50% - 1px);
 padding: 0px;
 height: 35px;
 margin: 0px 0px 1px 0px;
 font-weight: bolder;
 background-color: var(--head-background);
 border-spacing: 0px;
 border: 0px solid #CCCCFF;
 color: white;
 outline: none;
}

div.panel div.senderText div.control input.syntax:hover {
 color: black;
}

div.panel div.senderText div.control select {
 width: calc(100% - 1px);
 height: 30px;
 font-size: 10px;
 padding: 0px 10px;
 text-align: center;
 margin: 0px 0px 1px 0px;
 background-color: var(--head-background);
 border: 0px solid #CCCCFF;
 border-spacing: 0px;
 outline: none;
 color: white;
}

div.panel div.senderText div.control select:hover {
 color: black;
}

div.panel div.senderText div.control select.editstyle {
 width: calc(35% - 1px);
}

div.panel div.senderText div.control select.language {
 width: calc(65% - 1px);
}

div.panel div.senderText div.control select.user {
 width: calc(100% - 1px);
 height: 25px;
}

div.panel div.panelHead {
 display: block;
 height: auto;
 width: 100%;
 text-align: center;
 font-size: 12px;
 font-weight: bold;
 vertical-align: middle;
 background-color: var(--panel-head-background);
 color: var(--panel-head-color);
 padding: 4px 0px;
}

div.panel div.panelHead a {
 color: var(--panel-head-color);
}

div.panel div.panelHead a:hover {
 color: var(--panel-head-color-hover);
}

div.panel div.panelMenu {
 display: block;
 width: 100%;
}

/* Панель Search */
div.panelLineSearch {
 display: block;
 width: 100%;
 height: 72px;
 text-align: center;
 vertical-align: middle;
 background-color: white;
 font-size: 12px;
 padding: 0px;
}

div.panelLineSearch table {
 width: 100%;
 height: 100%;
 font-size: 12px;
 padding: 10px 0px;
 margin: 0px;
}

div.panelLineSearch table tr {
 padding: 0px;
 margin: 0px;
}

div.panelLineSearch table tr th {
 padding: 0px;
 margin: 0px;
}

div.panelLineSearch table tr td {
 padding: 0px 10px;
 margin: 0px;
}

/* form */
form {
 padding: 0px;
 margin: 0px;
 width: 100%;
}

form select {
 width: 100%;
 border: var(--input-border);
 border-spacing: 0px;
 background-color: var(--input-background);
 font-size: 10px;
 padding: 4px 6px;
 margin: 2px 0px;
}

form select:hover {
 background-color: rgba(225, 225, 225, 0.4);
}

form input {
 width: 75%;
 border: var(--input-border);
 background-color: var(--input-background);
 border-spacing: 0px;
 font-size: 10px;
 padding: 5px 6px;
 margin: 2px 0px;
}

form input[type=text] {
 width: 100%;
}

form input[type=datetime] {
 width: 25%;
 text-align: center;
}

form select[type=number] {
 width: 25%;
}

form a.button {
 width: 10%;
 border: var(--input-border);
 background-color: var(--input-background);
 border-spacing: 0px;
 font-size: 10px;
 padding: 2px 6px;
 margin: 2px 0px;
}

form a.button:hover {
 background-color: rgba(225, 225, 225, 0.4);
}

form input:hover {
 background-color: rgba(225, 225, 225, 0.4);
}

form input[type=submit] {
 width: 20%;
 border: var(--input-border);
 background-color: var(--input-background);
 border-spacing: 0px;
 font-size: 10px;
 text-align: center;
 margin: 2px 0px;
}

form input[type=submit]:hover {
 background-color: rgba(225, 225, 225, 0.4);
}

form input[type=datetime] {
 width: 25%;
}

form input[type=file] {
 width: 100%;
}

form input[type=search] {
 width: 100%;
}

form input[type=checkbox] {
 top: 5px;
 right: 3px;
 width: 12px;
 height: 12px;
 padding: 5px;
}

/* ----------------------------------------------------------------- */

div.panelLine {
 display: block;
 text-align: left;
 font-size: 12px;
 margin-bottom: 1px;
 padding: 0px;
}

div.panelLineCounter {
 display: block;
 text-align: center;
 vertical-align: middle;
 background: white;
 font-size: 12px;
 padding: 5px 5px 5px 5px;
 margin: 0px 0px 0px 0px;
}

div.panelLineCounter table {
 width: 100%;
 font-size: 10px;
}

div.panelLineCounter table tr td {
 padding: 0px;
}

div.panelSubHead {
 display: block;
 text-align: center;
 font-size: 12px;
 padding: 5px;
}
/*
div.panelSubHead input[type=submit] {
 width: 100%;
 background-color: var(--input-background);
 border: var(--input-border);
 border-spacing: 0px;
 padding: 4px;
}

div.panelSubHead input[type=submit]:hover {
 background-color: rgba(135, 135, 135, 0.4);
}
*/
div.panelLine a.item {
 display: block;
 text-decoration: none;
 padding: 5px;
}

div.panelLine a.selected {
 display: block;
 text-decoration: none;
 background: var(--panel-color-selected);
 padding: 5px;
}

div.panelLine:nth-child(even) {
 background-color: var(--panel-color-even);
}

div.panelLine:nth-child(even):hover {
 background-color: var(--panel-color-even-hover);
}

div.panelLine:nth-child(odd) {
 background-color: var(--panel-color-odd);
}

div.panelLine:nth-child(odd):hover {
 background-color: var(--panel-color-odd-hover);
}

/* Условие задачи */
div.panelCell {
 display: inline-block;
 width: 100%;
 height: auto;
 background-color: #FFFFFF;
 font-size: 12px;
 padding: 0px;
 margin: 0px;
 line-height: 1.5;
 white-space: normal;
}

div.panelCell code {
 word-wrap: break-word;
}

div.panelCell img.avatar {
 width: 200px;
 border: 0px;
 margin: 0px;
}

div.panelCell img.pictures {
 display: inline-block;
 width: 300px;
 margin: 20px 0px 0px 20px;
}

div.panelCell p {
 display: inline-block;
 width: calc(100% - 360px);
 text-align: justify;
 margin: 20px 0px 20px 20px;
}

div.panelCell p.control {
 display: inline-block;
 vertical-align: top;
 width: 300px;
 text-align: right;
 margin: 20px 0px 20px 20px;
}

div.panelCell hr {
 display: inline-block;
 width: calc(100% - 362px);
 padding: 0px;
 margin: 0px 20px;
}

div.panelCell p.full {
 display: inline-block;
 width: calc(100% - 40px);
 text-align: justify;
 margin: 20px 0px 20px 20px;
}

div.panelCell table {
 width: 100%;
 padding: 10px;
 font-size: 12px;
}

div.panelCell table tr {
 vertical-align: top;
}

div.panelCell table tr td {
 padding: 10px;
 line-height: 1.5;
 text-align: justify;
}

div.panelCell table tr td pre {
 font-family: Courier;
 font-family: FreeMono;
 line-height: 1.2;
}

/* Панель "Осталось до начала/завершения */
div.panelCell div.timeLeft {
 width: 100%;
 padding: 10px 0px;
 text-align: center;
 font-size: 16px;
 font-weight: bold;
}

/* Панель Новость, Пост, Правила и т.д ( с картинкой )*/

/* ================================================================ */

div.panelPost {
 display: inline-block;
 width: 100%;
 height: auto;
 background-color: #FFFFFF;
 font-size: 12px;
 padding: 0px;
 margin: 0px;
 line-height: 1.5;
 white-space: normal;
}

/* Выравнивение по левой стороне */
div.panelPost img.pictures {
 display: inline-block;
 width: 300px;
 margin: 20px 0px 20px 20px;
}

/* Выравнивение по правой стороне */
div.panelPost img.serutcip {
 display: inline-block;
 width: 300px;
 margin: 20px 20px 20px 0px;
}

/* Тело поста */
div.panelPost div.body {
 display: inline-block;
 width: calc(100% - 360px);
 text-align: justify;
 padding: 0px;
 margin: 0px 0px 20px 20px;
}

/* Таблица редактора записей */
div.panelPost div.body table {
 width: 100%;
 font-size: 12px;
 line-height: 1.5;
 text-align: left;
 margin: 0px;
}

div.panelPost div.body table tr {
 vertical-align: top;
}

div.panelPost div.body table tr:first-child td {
}

div.panelPost div.body table tr:first-child:hover td {
 background: #dddddd;
}

div.panelPost div.body table tr:hover td {
 background: #eeeeee;
}

div.panelPost div.body table tr td {
 padding: 5px;
}

div.panelPost div.body pre {
 font-weight: bold;
 margin-bottom: 10px;
 margin-left: 10px;
}

/* Нижняя часть поста */
div.panelPost div.footer {
 display: inline-block;
 width: calc(100% - 40px);
 text-align: right;
 margin: 0px 0px 20px 20px;
}

div.panelPost div.head {
 display: inline-block;
 width: calc(100% - 360px);
 margin: 20px 20px 15px 20px;
 text-align: left;
}

div.panelPost hr {
 display: inline-block;
 width: calc(100% - 364px);
 margin: 0px 20px 15px 20px;
}

div.panelPost p {
 display: inline-block;
 width: calc(100% - 380px);
 vertical-align: top;
 margin: 20px 20px 15px 20px;
 text-align: left;
}

div.panelPost p.control {
 display: inline-block;
 width: 300px;
 vertical-align: top;
 margin: 20px 0px 20px 20px;
 text-align: right;
}

/* При выводе только заголовка поста (без текста самого поста) */
div.panelPost p.headonly {
 display: inline-block;
 width: calc(100% - 360px);
 text-align: justify;
 margin: 10px 0px 10px 20px;
}

div.panelPost p.head {
 margin: 20px 20px 15px 20px;
}

div.panelPost p.full {
 width: calc(100% - 40px);
 text-align: left;
 padding: 0px 0px 15px 0px;
 margin: 0px;
}

div.panelPost p.head_full {
 width: calc(100% - 40px);
 margin: 20px 0px 0px 20px;
}

div.panelPost p.buttons {
 width: calc(100% - 40px);
 text-align: right;
 margin: 20px 20px 20px 20px;
}

div.panelPost hr.full {
 display: inline-block;
 width: calc(100% - 42px);
 text-align: justify;
 margin: 18px 20px 0px 20px;
}

div.panelPost p table {
 width: 100%;
 font-size: 12px;
 line-height: 1.5;
}

div.panelPost p table tr {
 vertical-align: top;
}

div.panelPost p table tr td {
 text-align: justify;
 padding: 4px;
}

div.panelPost textarea.message {
 width: 100%;
 height: 320px;
 border: 1px solid #DDDDDD;
 margin: 10px 0px 0px 0px;
 padding: 10px;
 font-size: 16px;
 font-family: Courier New;
}

/* Панель "Пример входного и выхдного теста" */
div.panelPost div.panelTest {
 display: inline-block;
 vertical-align: top;
 width: calc(50% - 2px);
}

div.panelPost div.panelTest p.test {
 display: block;
 text-align: justify;
 width: calc(100% - 40px);
 margin: 15px 20px 0px 20px;
}

div.panelPost div.panelTest pre.test {
 margin: 15px 20px 15px 20px;
 padding: 0px;
}

/* ================================================================ */

img.smallIcon {
 border: 0px;
 margin-top: 5px;
 margin-bottom: 5px;
}

table.panel {
 width: 100%;
 background: var(--panel-background);
 box-shadow: var(--panel-shadow);
 border: var(--panel-border);
 border-spacing: 0px;
 font-size: 12px;
 text-align: left;
 margin: var(--panel-margin);
 padding: 0px;
}

table.panel tr.lineHead {
 text-align: center;
 color: var(--table-head-color);
 background-color: var(--table-head-background);
}

table.panel tr.LineDark {
 background-color: #FFFFFF;
 text-align: left;
}

table.panel tr.LineDark:hover {
 background-color: #EEEEEE;
}

table.panel tr.LineLight {
 background-color: #FFFFFF;
 text-align: left;
}

table.panel tr.LineLight:hover {
 background-color: #EEEEEE;
}

table.panel tr.LineWhite {
 text-align: left;
 background-color: #FFFFFF;
}

table.panel th {
 padding: 4px;
 text-align: center;
}

table.panel tr.LineHead a {
 color: var(--table-head-color);
 text-decoration: none;
}

table.panel tr.LineHead a:hover {
 color: var(--table-head-color-hover);
 text-decoration: none;
}

table.panel td {
 padding: 6px;
}
/*
table.panel th input[type=checkbox] {
 padding: 0px;
 margin: 0px 3px;
}
*/
table.panel th img {
 padding: 0px;
 margin: 0px 3px;
 border: 0px solid blue;
 wifth: 14px;
 height: 14px;
}

/* Переключение страниц */
table.selectPage {
 font-size: 10px;
 width: 100%;
 text-align: left;
 border: 0px solid #B4BCC2;
 margin: 0px 0px 12px 0px;
 border-spacing: 0px;
}

table.selectPage tr td {
 padding: 4px;
}

table.selectPage tr td a {
 text-decoration: none;
 padding: 4px;
}

table.selectPage tr td a:hover {
 text-decoration: underline;
}

.datetime {
 padding: 2px;
 font-size: 12px;
 width: 30%;
 text-align: center;
}

.varchar {
 padding: 2px;
 font-size: 12px;
 width: 100%;
}

.password {
 padding: 2px;
 font-size: 12px;
 width: 50%;
}

.short {
 padding: 2px;
 font-size: 12px;
 width: 50%;
}

.number {
 padding: 2px;
 font-size: 12px;
 width: 20%;
}

.button {
 display: inline-block;
 width: 120px;
 text-align: center;
 text-decoration: none;
 background-color: var(--input-background);
 border: var(--input-border);
 border-spacing: 0px;
 padding: 4px;
 vertical-align: middle;
}

a.button {
 text-decoration: none;
 padding: 3px 4px 2px 0px;
}

table.photo {
 font-size: 12px;
 text-align: left;
 border: 0px solid #B4BCC2;
 margin-bottom: 0px;
 border-spacing: 3px;
}

tr.photo {
 padding: 0px;
 text-align: center;
}

td.photo {
 padding: 0px;
 text-align: center;
}

img.photo {
 border: 2px solid #B4BCC2;
 box-shadow: var(--panel-shadow);
}

img {
 border: 0px;
}

a {
 color: var(--panel-head-background);
 text-decoration: none;
}

a:hover {
 color: var(--panel-head-color-hover);
 text-decoration: underline;
}

a.head {
 color: white;
 text-decoration: none;
}

a.head:hover {
 color: blue;
 text-decoration: underline;
}

a.pupil {
 color: blue;
 text-decoration: none;
}

a.pupil:hover {
 color: blue;
 text-decoration: underline;
}

a.teacher {
 color: green;
 text-decoration: none;
}

a.teacher:hover {
 color: green;
 text-decoration: underline;
}

a.wheel {
 color: red;
 text-decoration: none;
}

a.wheel:hover {
 color: red;
 text-decoration: underline;
}

a.noteacher {
 color: #000000;
 text-decoration: none;
}

a.noteacher:hover {
 color: #000000;
 text-decoration: underline;
}

a.accept {
 color: grey;
 text-decoration: none;
}

a.wa {
 color: grey;
 text-decoration: none;
}

div.numtable {
 width: calc(100% - 20px);
 display: flex;
 flex-direction: row;
 justify-content: flex-start;
 flex-wrap: wrap;
 margin: 10px 20px;
}

div.numtable a.problem {
 width: calc(5% - 2px);
 height: auto;
 font-size: 10px;
 text-align: center;
 text-decoration: none;
 background-color: var(--input-background);
 border: 0px;
 border-spacing: 0px;
 padding: 5px 0px;
 margin: 1px;
}

@media all and (max-width: 1000px) {
 div.numtable a.problem {
  width: calc(10% - 2px);
 }
}

div.pictogram {
 width: 100%;
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 flex-wrap: wrap;
 border-spacing: 0px;
 margin: 0px;
}

div.pictogram div.problem {
 width: calc(20% - 7px);
 height: 280px;
 font-size: 12px;
 text-align: center;
 text-decoration: none;
 padding: 0px;
 margin: 0px 0px 10px 0px;
 background-color: var(--panel-background);
 box-shadow: var(--panel-shadow);
 border: var(--panel-border);
 border-spacing: 0px;
}

div.pictogram div.problem:hover {
 background-color: #EEEEEE;
}

div.pictogram div.problem div.cell {
 padding: 10px 10px 0px 10px;
 text-align: left;
}

div.pictogram div.problem div.cell a.id {
 width: calc(60% - 3px);
 padding: 0px;
 display: inline-block;
 text-align: right;
}

div.pictogram div.problem div.cell a.name {
 width: 100%;
 padding: 15px 0px 0px 0px;
 display: inline-block;
 text-align: left;
 font-family: Ubuntu-B;
}

div.pictogram div.problem div.cell img.pictures {
 width: 40%;
 height: 30%;
 display: inline-block;
}

div.pictogram div.problem div.cell li {
 list-style: none;
 line-height: 1.5;
}

@media all and (max-width: 1600px) {
 div.pictogram div.problem {
  width: calc(20% - 7px);
 }
}

@media all and (max-width: 1400px) {
 div.pictogram div.problem {
  width: calc(25% - 7px);
 }
}

@media all and (max-width: 1100px) {
 div.pictogram div.problem {
  width: calc(33.333% - 7px);
 }
}

div.homework {
 display: inline-block;
 position: inherit;
 padding: 0px;
 margin-top: 0px;
 background: url(../../img/scheme/default/button/homework.png);
 background-size: cover;
 width: 32px;
 height: 32px;
 z-index: 9;
}

div.newcontest {
 display: inline-block;
 position: inherit;
 padding: 0px;
 margin-top: 0px;
 background: url(../../img/scheme/default/button/contests.png);
 background-size: cover;
 width: 46px;
 height: 32px;
 z-index: 9;
}

div.panelLineEvents {
 display: block;
 height: auto;
 text-align: center;
 vertical-align: middle;
 background: white;
 font-size: 12px;
 padding: 5px 5px 5px 5px;
 margin: 0px 0px 0px 0px;
}

div.mediaproblem {
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 justify-content: space-between;
}

@media all and (min-width: 1540px) {
 div.mediaproblem div.panel {
  width: calc(50% - 3px);
 }
}

div.panelProblemList {
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 justify-content: space-between;
 background-color: var(--panel-background);
 box-shadow: var(--panel-shadow);
 border: var(--panel-border);
 border-spacing: 0px;
 width: calc(100% - 10px);
 font-size: 12px;
 text-align: left;
 margin: var(--panel-margin);
 white-space: normal;
 padding: 5px;
}

div.problemInfo {
 display: block;
 position: relative;
 width: auto;
 padding: 5px;
 text-align: center;
}

div.problemInfo:hover {
 background: #eeeeee;
}

div.problemInfo div.popup {
 display: none;
}

div.problemInfo:hover div.popup {
 display: block;
 position: absolute;
 top: 23px;
 left: 0px;
 text-align: left;
 width: 300px;
 border: 1px solid #B4BCC2;
 border-spacing: 5px;
 box-shadow: 0.4em 0.4em 5px rgba(122, 122, 122, 0.7);
 background: #FFFFFF;
 font-family: arial;
 font-size: 12px;
 padding: 10px;
 z-index: 99999;
}

div.problemInfo:hover div.popup b.popup {
 display: block;
 text-align: center;
 width: 100%;
 padding: 0px 0px 5px 0px;
}

div.problemInfo:hover div.popup i.popup {
 display: block;
 text-align: left;
 width: 100%;
 padding: 5px 0px;
}