body {font-family: Arial, sans-serif;margin: 0;font-size: 20px;color: #fff;}
#editor { height: 200px; border: 1px solid #444; border-radius: 4px; }
.CodeMirror { height: 100%; }
#diagram-container {
  margin-top: 20px;
  padding: 10px;
  border: 1px solid #555;
  /* border-radius: 4px; */
  background: #fafafa;
  width: 50%;
  float: right;
  height: calc(100vh - 65px);
}
.CodeMirror.cm-s-cobalt {
  /* width: 47%; */
  float: left;
  height: calc(100vh - 41px);
}

#diagram-container {
  margin: 0;
}

button.render {
  font-size: 20px;
  margin: 10px 0;
}

/* Общие стили формы */
#user-form {
max-width: 400px;
margin: 2rem auto;
padding: 1.5rem;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 16px rgba(0,0,0,0.08);
font-family: 'Segoe UI', Tahoma, sans-serif;
color: #333;
}

/* Стили поля и лейбла */
.form-group {
margin-bottom: 1.25rem;
display: flex;
flex-direction: column;
}
.form-group label {
margin-bottom: 0.5rem;
font-weight: 600;
}
.form-group input,
.form-group select,
.form-group button {
padding: 0.75rem 1rem;
border: 1px solid #ccc;
border-radius: 8px;
font-size: 1rem;
transition: border-color 0.2s, box-shadow 0.2s;
}
.form-group input:focus,
.form-group select:focus {
outline: none;
border-color: #5b9bd5;
box-shadow: 0 0 0 3px rgba(91,155,213,0.2);
}

/* Кнопка отправки */
#submit-button {
width: 100%;
background-color: #5b9bd5;
color: white;
border: none;
cursor: pointer;
font-weight: 600;
transition: background-color 0.2s, box-shadow 0.2s;
}
#submit-button:hover {
background-color: #4a8ac2;
}
#submit-button:active {
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

/* Стили переключателя режима */
#mode-select {
appearance: none;
background: #f0f0f0;
background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="4" height="5"><path fill="%23666" d="M2 0 L0 2 H4 Z"/></svg>');
background-repeat: no-repeat;
background-position: right 0.75rem center;
padding-right: 2rem;
}

/* Скрытие элементов по классам */
.mode-register,
.mode-reset,
.mode-reset-new {
display: none;
}

/* Медиазапрос для мобильных */
@media (max-width: 480px) {
#user-form {
margin: 1rem;
padding: 1rem;
}
.form-group input,
.form-group select,
.form-group button {
padding: 0.65rem 0.9rem;
font-size: 0.95rem;
}
}


.form-group label, .window label {
position: absolute;
background: #fff;
font-size: 13px;
font-weight: 700;
margin-top: -10px;
margin-left: 13px;
}


.form-group input {
width: -webkit-fill-available;
}

form#user-form, .window {
position: fixed;
left: calc(50% - 200px);
z-index: 100;
}

.fade {
position: fixed;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
left: 0;
top: 0;
z-index: 100;
}

i.fa-solid.fa-xmark.oclose {
float: right;
margin-bottom: -46px;
background: #fff;
border: 1px solid;
padding: 2px 4px;
border-radius: 22px;
cursor: pointer;
}


i.fa-solid.fa-xmark.oclose:hover {
background-color: #333;
color: #fff;
}

.user {
display: table;
background: #666;
cursor: pointer;
float: right;
padding: 1px 9px 3px 7px;
border-radius: 10px;
margin-top: 3px;
}		

.user *{
font-size: 15px !important; 
}
.user:hover{
background: #000;
}

.user span {
padding-left: 6px;
}

nav>i {
background: #ececff;
padding: 6px;
width: 19px;
color: #4d0000;
border-radius: 7px;
cursor: pointer;
font-size: 17px;
}

nav {
background: #151515;
padding: 6px;
}

nav i span, .user .user_menu {
z-index: 500;
position: absolute;
background: #000;
font-size: 15px;
padding: 2px;
color: #fff;
top: 28px;
/* display: none; */
opacity: 0;
transition: 0.3s all ease;
}

nav i:hover span,  .user:hover  .user_menu{
display: block;
padding: 5px;
opacity: 1;
color: orange;
}

nav i:hover {color: #fff;background: #333;}    body {font-family: 'Roboto',Arial, sans-serif;margin: 0 !important;font-size: 20px;color: #fff;}
#editor { height: 200px; border: 1px solid #444; border-radius: 4px; }
.CodeMirror { height: 100%; }
#diagram-container {
  margin-top: 20px;
  padding: 10px;
  /* border: 1px solid #555; */
  border-radius: 4px;
  background: #fafafa;
  width: 50%;
  float: right;
  height: calc(100vh - 65px);
  border-radius: 0;
}
.CodeMirror.cm-s-cobalt {
  /* width: calc(50% - 3px) !important; */
  float: left;
  height: calc(100vh - 41px) !important;
}

#diagram-container {
  margin: 0;
  padding: 0 !important;
  height: calc(100%  - 43px);
}

button.render {
  font-size: 20px;
  margin: 10px 0;
}

/* Общие стили формы */
#user-form {
max-width: 400px;
margin: 2rem auto;
padding: 1.5rem;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 16px rgba(0,0,0,0.08);
font-family: 'Segoe UI', Tahoma, sans-serif;
color: #333;
}

/* Стили поля и лейбла */
.form-group {
margin-bottom: 1.25rem;
display: flex;
flex-direction: column;
}
.form-group label {
margin-bottom: 0.5rem;
font-weight: 600;
}
.form-group input,
.form-group select,
.form-group button {
padding: 0.75rem 1rem;
border: 1px solid #ccc;
border-radius: 8px;
font-size: 1rem;
transition: border-color 0.2s, box-shadow 0.2s;
}
.form-group input:focus,
.form-group select:focus {
outline: none;
border-color: #5b9bd5;
box-shadow: 0 0 0 3px rgba(91,155,213,0.2);
}

/* Кнопка отправки */
#submit-button {
width: 100%;
background-color: #5b9bd5;
color: white;
border: none;
cursor: pointer;
font-weight: 600;
transition: background-color 0.2s, box-shadow 0.2s;
}
#submit-button:hover {
background-color: #4a8ac2;
}
#submit-button:active {
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

/* Стили переключателя режима */
#mode-select {
appearance: none;
background: #f0f0f0;
background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="4" height="5"><path fill="%23666" d="M2 0 L0 2 H4 Z"/></svg>');
background-repeat: no-repeat;
background-position: right 0.75rem center;
padding-right: 2rem;
}

/* Скрытие элементов по классам */
.mode-register,
.mode-reset,
.mode-reset-new {
display: none;
}

/* Медиазапрос для мобильных */
@media (max-width: 480px) {
#user-form {
margin: 1rem;
padding: 1rem;
}
.form-group input,
.form-group select,
.form-group button {
padding: 0.65rem 0.9rem;
font-size: 0.95rem;
}
}


.form-group label {
position: absolute;
background: #fff;
font-size: 13px;
font-weight: 700;
margin-top: -10px;
margin-left: 13px;
}


.form-group input {
width: -webkit-fill-available;
}

form#user-form {
position: fixed;
left: calc(50% - 200px);
z-index: 100;
}

.fade {
position: fixed;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
left: 0;
top: 0;
z-index: 100;
}

i.fa-solid.fa-xmark.oclose {
float: right;
margin-bottom: -46px;
background: #fff;
border: 1px solid;
padding: 2px 4px;
border-radius: 22px;
cursor: pointer;
/* margin-right: 21px; */
color: #000;
}


i.fa-solid.fa-xmark.oclose:hover {
background-color: #333;
color: #fff;
}

.user {
display: table;
background: #2a3745;
cursor: pointer;
float: right;
padding: 4px 9px 3px 5px;
border-radius: 4px;
}		

.user *{
font-size: 15px !important; 
}
.user:hover{
background: #000;
}

.user span {
padding-left: 6px;
font-family: 'Roboto' !important;
font-weight: bold;
font-size: 15px !important;
}
.user i span{
font-family: 'Roboto' !important;
}
nav>i {
background: #ececff;
padding: 6px;
width: 19px;
color: #4d0000;
border-radius: 7px;
cursor: pointer;
font-size: 17px;
}

nav {
background: #151515;
padding: 6px;
display: table;
width: calc(100% - 12px);
}

nav i span, .user .user_menu {
z-index: 500;
position: absolute;
background: #000000e6;
font-size: 15px;
padding: 2px;
color: #fff;
top: 37px;
/* display: none; */
opacity: 0;
transition: 0.3s all ease;
font-family: 'Roboto';
font-weight: 300;
border-radius: 5px;
}

nav i:hover span,  .user:hover  .user_menu{
display: block;
padding: 5px;
opacity: 1;
color: orange;
}

nav i:hover {color: #fff;background: #333;}

div#credits {
display: table;
float: right;
}

div#credits {
padding: 5px;
color: gold;
}

.window {
width: 96%;
height: 200px;
background: #ffffff63;
left: 15px;
border-radius: 10px;
filter: drop-shadow(2px 4px 6px black);
z-index: 1000;
display: none;
padding: 10px;
bottom: 20px;
}

.wcontent {
width: 100%;
height: 168px;
overflow-y: scroll;
}

.button {
background: #094880;
display: table;
float: right;
margin: 5px;
padding: 3px 10px;
border-radius: 4px;
cursor: pointer;
}

.graph_list_item {
background: #ffffff;
display: table;
color: #000;
padding: 8px;
float: left;
margin: 5px;
cursor: pointer;
}

svg#graphDiv {
width: 100%;
height: 100%;
}

canvas#particleCanvas {
position: absolute;
}

nav i {
margin: 3px;
background: #2a3745;
color: #fff;
}


i.fa-solid.fa-coins {
color: gold !important;
}



svg#graphDiv {
mix-blend-mode: unset;
/* filter: invert(1) contrast(1.5) brightness(1.5); */
}

div#diagram-container {
background: #0062b8 !important;
}

div#diagram-container.preview {
transform: scale(0.6) translateY(-29%);
}

body {
background: #0062b8;
}

div#diagram-container {
border: none !important;
}

body {font-family: Arial, sans-serif;margin: 0;font-size: 20px;color: #fff;}
#editor { height: 200px; border: 1px solid #444; border-radius: 4px; }
.CodeMirror { height: 100%; }
#diagram-container {
  margin-top: 20px;
  padding: 10px;
  /* border: 1px solid #555; */
  border-radius: 4px;
  background: #fafafa;
  width: 50%;
  float: right;
  height: calc(100vh - 65px);
}
.CodeMirror.cm-s-cobalt {
  /* width: 47%; */
  float: left;
  height: calc(100vh - 41px);
}

#diagram-container {
  margin: 0;
}

button.render {
  font-size: 20px;
  margin: 10px 0;
}

/* Общие стили формы */
#user-form {
max-width: 400px;
margin: 2rem auto;
padding: 1.5rem;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 16px rgba(0,0,0,0.08);
font-family: 'Segoe UI', Tahoma, sans-serif;
color: #333;
}

/* Стили поля и лейбла */
.form-group {
margin-bottom: 1.25rem;
display: flex;
flex-direction: column;
}
.form-group label {
margin-bottom: 0.5rem;
font-weight: 600;
}
.form-group input,
.form-group select,
.form-group button {
padding: 0.75rem 1rem;
border: 1px solid #ccc;
border-radius: 8px;
font-size: 1rem;
transition: border-color 0.2s, box-shadow 0.2s;
}
.form-group input:focus,
.form-group select:focus {
outline: none;
border-color: #5b9bd5;
box-shadow: 0 0 0 3px rgba(91,155,213,0.2);
}

/* Кнопка отправки */
#submit-button {
width: 100%;
background-color: #5b9bd5;
color: white;
border: none;
cursor: pointer;
font-weight: 600;
transition: background-color 0.2s, box-shadow 0.2s;
}
#submit-button:hover {
background-color: #4a8ac2;
}
#submit-button:active {
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

/* Стили переключателя режима */
#mode-select {
appearance: none;
background: #f0f0f0;
background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="4" height="5"><path fill="%23666" d="M2 0 L0 2 H4 Z"/></svg>');
background-repeat: no-repeat;
background-position: right 0.75rem center;
padding-right: 2rem;
}

/* Скрытие элементов по классам */
.mode-register,
.mode-reset,
.mode-reset-new {
display: none;
}

/* Медиазапрос для мобильных */
@media (max-width: 480px) {
#user-form {
margin: 1rem;
padding: 1rem;
}
.form-group input,
.form-group select,
.form-group button {
padding: 0.65rem 0.9rem;
font-size: 0.95rem;
}
}


.form-group label, .window label {
position: absolute;
background: #fff;
font-size: 13px;
font-weight: 700;
margin-top: -10px;
margin-left: 13px;
}


.form-group input {
width: -webkit-fill-available;
}

form#user-form, .window {
position: fixed;
left: calc(50% - 200px);
z-index: 100;
}

.fade {
position: fixed;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
left: 0;
top: 0;
z-index: 100;
}

i.fa-solid.fa-xmark.oclose {
float: right;
margin-bottom: -46px;
background: #fff;
border: 1px solid;
padding: 2px 4px;
border-radius: 22px;
cursor: pointer;
}


i.fa-solid.fa-xmark.oclose:hover {
background-color: #333;
color: #fff;
}

.user {
display: table;
background: #666;
cursor: pointer;
float: right;
padding: 1px 9px 3px 7px;
border-radius: 10px;
margin-top: 3px;
}		

.user *{
font-size: 15px !important; 
}
.user:hover{
background: #000;
}

.user span {
padding-left: 6px;
}

nav>i {
background: #ececff;
padding: 6px;
width: 19px;
color: #4d0000;
border-radius: 7px;
cursor: pointer;
font-size: 17px;
}

nav {
background: #151515;
padding: 6px;
}

nav i span, .user .user_menu {
z-index: 500;
position: absolute;
background: #000;
font-size: 15px;
padding: 2px;
color: #fff;
top: 28px;
/* display: none; */
opacity: 0;
transition: 0.3s all ease;
}

nav i:hover span,  .user:hover  .user_menu{
display: block;
padding: 5px;
opacity: 1;
color: orange;
}

nav i:hover {color: #fff;background: #333;}    body {font-family: 'Roboto',Arial, sans-serif;margin: 0 !important;font-size: 20px;color: #fff;overflow: hidden !important;}
#editor {height: 200px;border: 1px solid #444;border-radius: 4px;/* width: auto; */}
.CodeMirror { height: 100%; }
#diagram-container {
  margin-top: 20px;
  padding: 10px;
  /* border: 1px solid #555; */
  border-radius: 4px;
  background: #fafafa;
  width: 50%;
  float: right;
  height: calc(100vh - 65px);
  border-radius: 0;
}
.CodeMirror.cm-s-cobalt {
  /* width: auto !important; */
  float: left;
  height: calc(100vh - 159px) !important;
  resize: horizontal;
}

#diagram-container {
  margin: 0;
  padding: 0 !important;
  height: calc(100%  - 43px);
}

button.render {
  font-size: 20px;
  margin: 10px 0;
}

/* Общие стили формы */
#user-form {
max-width: 400px;
margin: 2rem auto;
padding: 1.5rem;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 16px rgba(0,0,0,0.08);
font-family: 'Segoe UI', Tahoma, sans-serif;
color: #333;
}

/* Стили поля и лейбла */
.form-group {
margin-bottom: 1.25rem;
display: flex;
flex-direction: column;
}
.form-group label {
margin-bottom: 0.5rem;
font-weight: 600;
}
.form-group input,
.form-group select,
.form-group button {
padding: 0.75rem 1rem;
border: 1px solid #ccc;
border-radius: 8px;
font-size: 1rem;
transition: border-color 0.2s, box-shadow 0.2s;
}
.form-group input:focus,
.form-group select:focus {
outline: none;
border-color: #5b9bd5;
box-shadow: 0 0 0 3px rgba(91,155,213,0.2);
}

/* Кнопка отправки */
#submit-button {
width: 100%;
background-color: #5b9bd5;
color: white;
border: none;
cursor: pointer;
font-weight: 600;
transition: background-color 0.2s, box-shadow 0.2s;
}
#submit-button:hover {
background-color: #4a8ac2;
}
#submit-button:active {
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

/* Стили переключателя режима */
#mode-select {
appearance: none;
background: #f0f0f0;
background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="4" height="5"><path fill="%23666" d="M2 0 L0 2 H4 Z"/></svg>');
background-repeat: no-repeat;
background-position: right 0.75rem center;
padding-right: 2rem;
}

/* Скрытие элементов по классам */
.mode-register,
.mode-reset,
.mode-reset-new {
display: none;
}

/* Медиазапрос для мобильных */
@media (max-width: 480px) {
#user-form {
margin: 1rem;
padding: 1rem;
}
.form-group input,
.form-group select,
.form-group button {
padding: 0.65rem 0.9rem;
font-size: 0.95rem;
}
}


.form-group label {
position: absolute;
background: #fff;
font-size: 13px;
font-weight: 700;
margin-top: -10px;
margin-left: 13px;
}


.form-group input {
width: -webkit-fill-available;
}

form#user-form {
position: fixed;
top: 70px;
left: calc(50% - 200px);
z-index: 100;
filter: drop-shadow(2px 4px 19px black);
}

.fade {
position: fixed;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
left: 0;
top: 0;
z-index: 100;
}

i.fa-solid.fa-xmark.oclose {
float: right;
margin-bottom: -46px;
background: #fff;
border: 1px solid;
padding: 2px 4px;
border-radius: 22px;
cursor: pointer;
/* margin-right: 21px; */
color: #000;
}


i.fa-solid.fa-xmark.oclose:hover {
background-color: #333;
color: #fff;
}

.user {
display: table;
background: #2a3745;
cursor: pointer;
float: right;
padding: 4px 9px 3px 5px;
border-radius: 4px;
}		

.user *{
font-size: 15px !important; 
}
.user:hover{
background: #000;
}

.user span {
padding-left: 6px;
font-family: 'Roboto' !important;
font-weight: bold;
font-size: 15px !important;
}
.user i span{
font-family: 'Roboto' !important;
}
nav>i {
background: #ececff;
padding: 6px;
width: 19px;
color: #4d0000;
border-radius: 7px;
cursor: pointer;
font-size: 17px;
}
content>* {
height: calc(100vh - 49px) !important;
}
i#upload_mp3, #new_rec, .mind_map {background: #a5772a;padding-left: 8px;}
nav {
background: #201f00;
padding: 6px;
display: f;
width: calc(100% - 12px);
border-bottom: 2px solid #000;
box-shadow: 2px 4px 6px rgba(0,0,0,0.5);
}

nav i span, .user .user_menu {
z-index: 500;
position: absolute;
background: #000000e6;
font-size: 15px;
padding: 2px;
color: #fff;
top: 37px;
/* display: none; */
opacity: 0;
transition: 0.3s all ease;
font-family: 'Roboto';
font-weight: 300;
border-radius: 5px;
}

nav i:hover span,  .user:hover  .user_menu{
display: block;
padding: 5px;
opacity: 1;
color: orange;
}

nav i:hover {color: #fff;background: #333;}

div#credits {
display: table;
float: right;
}

div#credits {
padding: 5px;
color: gold;
}

.window {
width: 96%;
height: 200px;
background: #0062b86b;
left: 15px;
border-radius: 10px;
filter: drop-shadow(2px 4px 6px black);
z-index: 1000;
display: none;
padding: 10px;
bottom: 20px;
}

.wcontent {
width: 100%;
height: 168px;
overflow-y: scroll;
}

.button {
background: #094880;
display: table;
float: right;
margin: 5px;
padding: 3px 10px;
border-radius: 4px;
cursor: pointer;
}

.graph_list_item,.text_file_item {
background: #000000;
display: table;
color: #ffffff;
padding: 8px;
float: left;
margin: 5px;
cursor: pointer;
border-radius: 9px;
}

svg#graphDiv {
width: 100%;
height: 100%;
}

canvas#particleCanvas {
position: absolute;
}

nav i {
margin: 3px;
background: #453d2a;
color: #fff;
}


i.fa-solid.fa-coins {
color: gold !important;
}

#status {
display: none;
position: fixed;
bottom: 0;
width: 100% !important;
background: #00000070;
padding: 2px 10px 16px;
line-height: 13px;
font-family: system-ui;
color: #c2e4ee !important;
text-shadow: 3px 1px 3px black;
padding-left: 18px;
z-index: 11000;
height: 116px;
text-align: center;
font-size: 25px;
}

svg#graphDiv {
mix-blend-mode: unset;
/* filter: invert(1) contrast(1.5) brightness(1.5); */
border-radius: 0 !important;
filter: drop-shadow(2px 4px 4px rgba(0,0,0,0.5));
}

div#diagram-container {
background: linear-gradient(136deg, #7c7635, transparent) !important;
}

div#diagram-container.preview {
transform: scale(0.6) translateY(-29%);
}

body {
background: #49aaff;
}

div#diagram-container {
border: 0px solid #ccc !important;
margin-left: 0 !important;
padding-left: 0 !important;
border-radius: 0 !important;
overflow: scroll;
width: auto;
resize: horizontal;
height: calc(100vh - 164px) !important;
}


/* Общий стиль скролла для WebKit-браузеров (Chrome, Edge, Safari) */
body::-webkit-scrollbar,
.wcontent::-webkit-scrollbar {
width: 8px;   /* вертикальный скролл */
height: 8px;  /* горизонтальный скролл */
}

body::-webkit-scrollbar-track,
.wcontent::-webkit-scrollbar-track {
background: transparent;
}

body::-webkit-scrollbar-thumb,
.wcontent::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #d4af37, #ffd700); /* золотой градиент */
border-radius: 4px;
}

body::-webkit-scrollbar-thumb:hover,
.wcontent::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, #ffd700, #d4af37);
}

/* Firefox */
body,
.wcontent {
scrollbar-width: thin;
scrollbar-color: #d4af37 transparent;
overflow-y: scroll !important;
}
fieldset {
padding: 23px;
}
.graph_list_item.active {
background: #ffdb96;
color: #000;
}

a.mode-link {
color: #5b9bd5;
}

.mode-switch {
text-align: center;
}

audio#audio_player {
height: 20px;
mix-blend-mode: lighten;
filter: invert(1);
transform: translateY(3px);
}

#status svg {
width: 25px !important;
height: 25px !important;
}

textarea#transcriber {
width: 33%;
float: left;
height: calc(100vh - 163px) !important;
background: #0f2130;
font-size: 18px !important;
color: #fff;
overflow: scroll;
border: unset;
resize: horizontal;
padding: 1%;
filter: drop-shadow(2px 25px 18px rgba(0,0,0,0.4));
font-size: 15px;
}


.switch {
display: inline;
padding: 6px;
margin: 1px;
background: #2a3745;
cursor: pointer;
font-size: 14px;
text-transform: uppercase;
}

content {
width: 101%;
display: flex;
margin-left: -0.5%;
flex-wrap: wrap;
justify-content: center;
float: left;
height: calc(100% - 166px);
}
content>* {
transition: 0.5s all;
}
.sactive {filter: invert(1);}


select{
font-size: 20px;
background: #453d2a;
color: #fff;
margin-left: 25px;
padding: 1px 4px;
margin-bottom: -2;
margin-right: 4px;
}

rect,
polygon {
cursor: pointer;
fill: #fff; /* або будь-який початковий колір */
transition: fill 0.3s ease;
}


.node:hover *{
color:gold;
cursor: pointer;
fill: #01263e !important;
zoom: 1.01;
}

.node:hover rect,
.node:hover polygon {
  stroke: gold;
  stroke-width: 1px;
}

.progress { height: 20px; border-radius: 4px; overflow: hidden; margin: 10px 0; }
.bar {
height: 100%;
width: 0%;
background: linear-gradient(
  45deg, 
  #4caf50 25%, 
  #81c784 25%, 
  #81c784 50%, 
  #4caf50 50%, 
  #4caf50 75%, 
  #81c784 75%, 
  #81c784 100%
);
background-size: 40px 40px; /* размер "зебры" */
animation: moveStripes 1.5s linear infinite; /* анимация движения */
transition: width 0.3s ease;
box-shadow: 0 0 10px #4caf50, 0 0 20px #81c784;
border-radius: 4px; /* немного скруглений */
position: relative;
overflow: hidden;
}

/* Анимация движения зебры */
@keyframes moveStripes {
0% {
  background-position: 0 0;
}
100% {
  background-position: 40px 0;
}
}

#status.error { color: #f44336; }

.progress {
width: 100% !important;
position: fixed;
height: 4px !important;
bottom: -10px;
}

img.t456__imglogo.t456__imglogomobile {
margin-right: 12px;
}

#status {
max-height: 198px;
overflow-y: scroll;
display: block !important;
position: relative;
background: #000;
float: left;
text-align: left;
letter-spacing: 0.6px;
font-size: 13px;
padding-bottom: 0px;
border: unset;
border-top: 1px solid #d4af37;
}

.whisper {
width: 217px;
background: url('whisper.jpg');
height: 100%;
background-size: contain;
border-radius: 11px;
}