:root {
  --orange-color: #f26520;
  --gold-color: #f7941d;
  --yellow-color: #fdf202;
  
  --green-color: #00a650;
  --marine-color: #00a99e;
  --skyblue-color: #00adef;

  --blue-color: #0171bb;
  --darkblue-color: #0054a5;
  --navy-color: #2e3192;

  --indigo-color: #652d92;
  --violet-color: #8e288e;
  --fuchsia-color: #ee008c;

  --err-color: red;
  --red-color: #ee1157;
  --darkred-color: #9d0a10;
  --brown-color: #a1410f;

  --brown2-color: #a4620b;
  --olive-color: #aca000;
  --green2-color: #588528;
}

/* .light_theme */
body {
  --g0-color: #ffffff; 
  --g01-color: #f1f1f1; 
  --g1-color: #e1e1e1;
  --g11-color: #d1d1d1;
  --g2-color: #c2c2c2;
  --g21-color: #b7b7b7;
  --g3-color: #959595;
  --g31-color: #898989;
  --g4-color: #7d7d7d;
  --g41-color: #707070;
  --g5-color: #626262;
  --g51-color: #555555;
  --g6-color: #464646;
  --g61-color: #363636;
  --g7-color: #262626;
  --g8-color: #000000;

  --title-color: var(--violet-color);
  --header-color: var(--violet-color);

  --menu-color: var(--blue-color);
  --menu-visited-color: var(--darkblue-color);
  --menu-hover-color: var(--green-color);

  --border-color: none;

  --table-input-active-color: var(--brown2-color); 
  --table-input-active-border: var(--brown2-color);  

  --table-input-focus: var(--darkred-color); 
  --table-td-focus: var(--darkred-color); 


}


body.dark_theme {
  --g8-color: #ffffff; 
  --g7-color: #f1f1f1; 
  --g61-color: #e1e1e1;
  --g6-color: #d1d1d1;
  --g51-color: #c2c2c2;
  --g5-color: #b7b7b7;
  --g41-color: #959595;
  --g4-color: #898989;
  --g32-color: #7d7d7d;
  --g3-color: #707070;
  --g21-color: #626262;
  --g2-color: #555555;
  --g11-color: #464646;
  --g1-color: #363636;
  --g01-color: #262626;
  --g0-color: #000000;

  --title-color: var(--fuchsia-color);
  --header-color: var(--fuchsia-color);

  --menu-color:  var(--skyblue-color);
  --menu-visited-color: var(--blue-color);
  --menu-hover-color: var(--green-color);

  --border-color: none;

  --table-input-active-color: var(--brown2-color); 
  --table-input-active-border: var(--brown2-color);  

  --table-input-focus: var(--gold-color); 
  --table-td-focus: var(--gold-color); 
}

body {
  padding: 0px;
  margin: 0px;
  
  background-color: var(--g1-color);
  color: var(--g61-color);
  font-size: large;
  font-family: 'Segoe UI', Tahoma, Verdana, sans-serif;
}

.header {
  color: var(--header-color);
}
/* ================================ Макет ================================ */


/* Всё окно  */
#maxwrapper {
  display:flex;
  width: 100%;
  min-height: 99vh;
  margin: 0px auto;
}

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

/* Пространство слева и справа на широких мониторах  */
#space_right, #space_left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
  /* border: 1px solid var(--border-color); */
}  


#space_left {
  margin-right: 4px;
}

#space_right {
  margin-left: 4px;
}

/* Контент, включая header, footer и т.д.  */
#wrapper {
  display: flex;
  flex-direction: column;

  width: 100%;
  max-width: 1200px;
  margin: 4px auto;
  margin-bottom: 0;
  margin-top: 0;
  /* border-left: 1px solid var(--g1-color); */
  /* border-right: 1px solid var(--g1-color); */
}

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

header, .menu_top, #container, footer {
  margin: 0;
  /* margin-bottom: 4px; */
  border-bottom: 1px solid var(--g1-color);
}

header, .menu_top, #content, footer, #sidebar_right, #sidebar_left {
  padding: 8px;
  /* border: 1px solid var(--border-color); */
}

/* header {
  background-color: ivory;
} */

footer {
  margin-bottom: 0;
  text-align: center;
}

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

/* Контент + sidebars  */
#container {
  display:flex; /* Содержит флекс элементы*/
  flex-grow: 1; /* Занимает всё доступное пространство */

  /* flex-direction: row; по умолчанию */
  /* flex-direction: column; */
}

/* #sidebar_right, #sidebar_left, #content {
  display: inline-block;
} */

#sidebar_left {
  width: 20%;
  margin: 4px;
  margin-left: 0px;
  /* border-right: 1px solid var(--g1-color); */
  background-color: var(--g01-color);
}

#sidebar_right {
  width: 19%;
  margin: 4px;
  margin-right: 0px;
  background-color: var(--g01-color);
}

#content {
  /* width: 80%; */
  min-width: 600px;
  flex-grow: 1;
  text-align: center;
}

/* ================================ header ================================ */
header {
  padding: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
}

#div_logo {
  margin: 4px;
  padding: 0;
  width: 36px;
  /* background-color: #00adef; */
}  

#logo {
  height: 48px;
  display: block;
  margin: 0;
  padding: 0;
}

header div {
  margin: 0;
  padding: 0;
  border: 1px solid var(--border-color);
}
#title {
  flex-grow: 1;
  text-align: center;
  font-family: "Segoe Script", Helvetica, Arial, sans-serif;
  font-size: larger;
  font-weight: bolder;
  /* color: var(--violet-color); */
  color: var(--title-color);
}

header #login a, header #logout a {
  padding: 0 4px;
  margin-right: 4px;
  font-weight: 500;
  border-right: 1px solid var(--g1-color);
  border-bottom: 1px solid var(--g1-color);
}
header #login a {
  color: var(--marine-color);
}
header #logout a {
  color: var( --orange-color);
}

/* .float-right {
  margin: 0;
  padding: 0;
  border: 1px solid green;
} */
button {
  cursor: pointer;
}

#buter_button {
  /* display: inline-block; */
  display: none;
  padding: 0 auto;
  margin: 0 4px;
  font-size: smaller;
  font-weight: bold;
  line-height: 0.6;
  border: 0;
  background-color: inherit;
}

#buter_button:hover {
  background-color: var(--g01-color);
}

.buter_span  {
  display: block;
  padding: 0;
  margin: 6px 4px;
  border-bottom: 2px solid indigo;
  border-bottom: 2px solid var(--title-color);
  width: 20px;
}

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

#notfound h1 {
  color: var(--red-color);
}
#notfound p {
  font-size: large;
}
#notfound p span {
  color: var(--red-color);
  font-weight: 500;
}
#notfound a {
  font-size: large;
}

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

.wrapper_1 {
  margin: 10px auto;
}

.w700 {
  /* расположение по центру */
  position: absolute;
  left: 50%;
  /* width / 2 */
  margin-left: -350px; 

  width: 700px;
}



a {
  /* color: indigo; */
  color: var(--g7-color);
  color: var(--menu-color);
  text-decoration: none;
  /* padding: 0 4px; */
}

a:hover, a:visited:hover {
  /* color: magenta; */
  color: var(--menu-hover-color);
  /* background-color: var(--g0-color); */
}

a:visited {
  color: var(--menu-visited-color);
  /* color: darkviolet; */
}

/* ================================ Главное меню ================================ */


.menu_top {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  background-color: var(--g01-color);
  border: 1px solid var(--border-color);
}

.xmenu_point {
  padding: 0 4px;
  border-right: 1px solid var(--g1-color);
  color: var(--menu-color);
  font-weight: 400;
}



/* .menu_top_col {
  display: flex;
  flex-direction: column; 
} */
/* .menu_point_col {
  border-bottom: 0px solid var(--g1-color);
  flex-basis: 100%;
} */
/* ================================ footer ================================ */

footer {
  color: var(--g1-color);
  background-color: var(--g5-color);
}



/* ================================ Модальное окно ================================ */

/* Тестовый образец модального окна */
.mymodal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 600px;
  max-width: 96%;
  height: 600px;
  max-height: 96%;

  overflow: auto;

  z-index: 1010;

  /* border-width: 1px;
  border-color: chartreuse; */
  border-radius:7px;
  /* border-style: double; */

   /*Тень описывается смещениями по оси X и Y относительно элемента, 
   радиусом размытия и распространения, а также цветом.*/
  /* box-shadow: inset; */
  /* box-shadow: 1px 1px 13px red; */
  box-shadow: 3px  3px 3px 3px var(--g4-color);
 
  background-color:var(--g1-color);

  padding-left: 30px;
  margin-right: 30px;

}

/* Бутерброд-меню */
.mymodal_menu {
  position: fixed;

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 96%;
  height: 96%;

  overflow: auto;

  z-index: 1010;
  
  background-color: var(--g0-color);

  padding: 8px;
}


/* Оверлей - элемент, на его фоне которого показываем модальное окно. Закрывает собой весь документ */
.mymodal-overlay {
  /* рекомендация:
     не зацикливайтесь на числе "1000", вместо этого используйте свою документированную систему для z-index и не забывайте следовать ей. Это число должно быть достаточно высоким в вашей системе.
  */
  z-index: 1000;

  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background-color: floralwhite;  */
  background-color: rgba(0, 0, 0, 0.3);

}

.closed {
  display: none;
}

/* Кнопка закрытия модального окна */
.close_modal {
  display: block;
  position: absolute;
  position: fixed;
  right: 3px;
  top: 3px;
  border-radius:5px;
  /* width: 30px;
  height: 30px; */
 }


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

.shadow {
  border-right: 2px solid var(--g2-color);
  border-bottom: 2px solid var(--g2-color);
}

 .button {
  background-color: inherit;
  color: var(--menu-color);

  border: 0;
  font-size: inherit;
  font-family: inherit;
  text-align: justify;

  padding-top: 0;
  padding-bottom: 2px;

  border-right: 2px solid var(--g2-color);
  border-bottom: 2px solid var(--g2-color);

  cursor: pointer;
} 

buttonx, .menu_point {
  /* background-color: var(--yellow-color); */
  background-color: inherit;
  color: var(--menu-color);
  border: 0;
  /* font-size: large; */
  /* font-family: 'Segoe UI', Tahoma, Verdana, sans-serif; */
  font-size: inherit;
  font-family: inherit;
  text-align: justify;

  padding: 0 4px;
  padding-top: 0;
  padding-bottom: 2px;
  /* color: var(--marine-color); */
  /* font-weight: 100; */
  border-right: 2px solid var(--g1-color);
  border-bottom: 0px solid var(--g2-color);
}


a.button {
  padding: 0 4px;
  color: var(--menu-color);
  /* font-weight: 500; */
  border-right: 2px solid var(--g2-color);
  border-bottom: 2px solid var(--g2-color);
  cursor: pointer;
}

/* .menu_point {
  padding: 0 4px;
  color: var(--menu-color);

  border-right: 2px solid var(--g1-color);
  border-bottom: 0px solid var(--g1-color);
} */

.menu_point:hover, .menu_point:visited:hover, a.button:hover, .button:hover {
  color: var(--menu-hover-color);
}

a.menu_point:visited {
  /* color: var(--menu-visited-color); */
  color: var(--menu-color);
}

div.menu_point:visited {
  background-color: var(--menu-visited-color);
}



.center {
  text-align: center;
  /* position: fixed; */
  /* top: 50%;
  left: 50%; */
  /* transform: translate(-50%, -50%); */

  /* width: 600px;
  max-width: 96%;
  height: 600px;
  max-height: 96%; */

  /* overflow: auto; */

  /* z-index: 1010; */

  /* border-width: 1px;
  border-color: chartreuse; */
  border-radius:7px;
  /* border-style: double; */

   /*Тень описывается смещениями по оси X и Y относительно элемента, 
   радиусом размытия и распространения, а также цветом.*/
  /* box-shadow: inset; */
  /* box-shadow: 1px 1px 13px red; */
  box-shadow: 3px  3px 3px 3px grey;
 
  /* background-color:white; */

  /* padding-left: 30px; */
  /* margin-right: 30px; */

}


/*====================== Form ======================*/

/* .form_background { */
  /* height: 100%; */
  /* width: 100%; */
  /* display: flex; */
  /* flex-direction: column; */
  /* align-items: center; */
  /* justify-content: center; /* В центре по вертикали */
  /* background-color: var(--g01-color); */
/* } */

.form {
  /* width: 75%; */
  /* display: inline-block; */
  text-align: center;
  /* border: 1px solid green; */
}

.form fieldset {
  display: flex;
  flex-direction: column;
  /* display: inline-block; */
  /* width: 75%; */
  border: 1px solid var(--g1-color);
}

legend {
  /* color: #0054a5; */
  /* font-weight: bold; */
  font-size:xx-large;
}

fieldset label, fieldset input, fieldset textarea {
  display: block;
  float: left;
  margin-bottom: 8px;
  font-size: medium;
  min-width: 150px;
  /* border: 1px solid violet; */
}

fieldset label {
  /* background-color: var(--skyblue-color);   */
  display: block;
  width: 33%;
  text-align: right;
  padding-right: 4px;
  /* border: 1px solid violet; */
}
/*  */

fieldset input {
  margin-right: 8px;
  /* color: var(--g6-color);
  background-color: var(--g0-color);
  
  border: 1px solid violet; */
}

fieldset input[type="text"], fieldset textarea {
  /* width: 400px; */
  width: 63%;
}
fieldset input[type="button"], fieldset input[type="submit"] {
  margin-right: 8px;
  min-width: 10px;
  width: fit-content;
  cursor: pointer;
  color: var(--menu-visited-color);

  /* color: var(--g6-color);
  background-color: var(--g0-color); */
  /* color: red;
  background-color: blue; */
}

fieldset input[type="button"]:hover, fieldset input[type="submit"]:hover {
  /* color: var(--g0-color); */
  /* background-color: var(--g6-color); */
  color: var(--menu-hover-color);
}

fieldset input[type="number"] {
  width: 20%;
}
fieldset input[type="email"] {
  width: 40%;
}
fieldset input[type="password"] {
  width: 20%;
}
fieldset input[name="login"] {
  width: 20%;
}

fieldset span {
  display: block;
  float: left;
  margin-left: 8px;
  text-align: left;
  /* font-size: x-small; */
  /* width: 47%; */
  /* color: var(--red-color); */
  /* border: 1px solid magenta; */
}

/* fieldset textarea {
  width: 63%;
} */


/* fieldset div { */
  /* width: 90%; */
  /* border: 1px solid violet; */
/* } */

/* .mini {
  font-size: x-small;
  color: var(--fuchsia-color); 
  display: block;
  float: left;
  text-align: left;
  background-color: var(--skyblue-color);  
  margin-top: 8px;
} */

/* 
.form div table {
  display: inline-block;
  width: 99%;
  border: 1px solid magenta;
}

form table tr td {
  border: 1px solid lime;
  width:33%;
}

.form table tr td:first-child {
  color: red;
  text-align: right;
  padding-right: 4px;
}

.form table tr td:last-child {
  color: var(--green-color);
  min-width: 100px;
  text-align: left;
  border: 1px solid red;
  font-size: small;
} */

/* #space_right, #space_l { */
#space_r, #space_l {
  padding: 8px 0;
  margin: 8px;
  /* background-color: var(--g01-color); */
  text-align: center;
  /* border: 1px solid lime; */
}

/* ============================= Формы ============================= */

/* .frm {
  padding: 8px 0;
  margin: 8px;
  background-color: var(--fuchsia-color);  
  text-align: center;
  border: 1px solid lime;
}


input {
  font-size: medium;
} */

/* div.label {
  float: left;
   background-color: var(--fuchsia-color);  
} */



/* div label {
   background-color: var(--marine-color);  
   width: 100%;
   display: block;
   float: left;
   text-align: right;

} */

/* label input {
  float: right;
  margin-left: 4px;
} */

/* fieldset input {
  float: left;
  width: 56%;
} */



/* div.controls {
  display: inline-block;
  max-width: 85%;
   background-color: var(--g0-color);  
   text-align: left;

} */

/* ======================== ТАБЛИЦЫ  ===================== */

table {
  border: 1px solid var(--g4-color);
  width: 100%;
  /* width: 600px; */
  border-collapse: collapse;
  padding: 0;
  margin: auto;

  /* table-layout: fixed; */
  /* font-size: var(--table-font-size, medium); */
}
td, th {
  border: 1px solid var(--g4-color);
  border-collapse: collapse;
  padding: 3px;  

  overflow: hidden;
  text-overflow: ellipsis;
  /* padding: 0px;  */
  /* margin: 0;  */
}

thead {
  border: 1px solid var(--g4-color);
  /* font-weight: bolder ; */
}

td input, td input:focus {
  width: 100%;
  color: red;
  background-color: inherit;

  font-size: inherit;

  border: 0px solid magenta;
  padding: 0;
  margin: 0;

}

td input:active {
  color: var(--table-input-color);
  border: 0px solid var(--table-input-focus);
}  

td input:focus {
  color:  var(--table-input-focus);
  /* width: 100%; */
}

td:focus {
  color:  var(--table-td-focus);
  border: 1px solid var(--g7-color);
  border-radius: 3px;
}


input, input:default {
  border: 0px solid rgb(19, 127, 134);
}


/* ============= Адаптивная или отзывчивая (responsive) вёрстка ============= */

@media (min-width: 1024px) {

  /* Здесь и дальше: при расширении окна если меню спрятано, то надо вернуть */
  .menu_top {
    flex-direction: row;
    display: flex;
  }

}

@media (max-width: 1407px) {

  footer {
    border: 1px solid red;
  }

  #space_left, #space_right {
    display: none;
  }

}

@media (max-width: 1215px) {

  footer {
    border: 1px solid blue;
  }
  /* .menu_top {
    flex-direction: row;
    display: flex;
  } */

}

@media (max-width: 1023px) {

  footer {
    border: 1px solid green;
  }

  #buter_button {
    display: inline-block;
  }

  .menu_top {
    flex-direction: column;
    justify-content:start;
    position: fixed;
    display: none;

    align-items: start;
  }
  .menu_point, button.menu_point {
    border-bottom: 1px solid var(--g1-color);
    border-right: 0px;
    /* flex-basis: 100%; */
  }

}

@media (max-width: 768px) {

  footer {
    border: 1px solid magenta;
  }

  /* Размещаю сайдбары сверху и снизу */
  #container {
    /* flex-direction: row; */
    flex-direction: column;
  }
  #sidebar_left, #sidebar_right{
    width: auto;
  }
  #sidebar_left {
    margin-right: 0;
    margin-bottom: 4px;
  }
  #sidebar_right {
    margin-left: 0;
    margin-top: 4px;
  }
  
  #content {
    width: auto;
    min-width: auto;
    /* flex-grow: 1; */
    /* min-height: 500px; */
    /* height: 700px; */
    text-align: center;
  }


/* Form */

  /* fieldset input[type="text"] {
    width: 98%;
  } */
  fieldset label {
      width: 98%;
      text-align: left;
  }
  
  fieldset input[type="text"] {
    /* width: 400px; */
    width: 98%;
  }
  fieldset input[type="number"] {
    width: 50%;
  }
  fieldset input[type="email"] {
    width: 98%;
  }
  fieldset input[type="password"] {
    width: 98%;
  }
  fieldset input[name="login"] {
    width: 98%;
  }
}

/*             Всякое разное            */
.flex {
  display: flex; 
}

.vert {
  display: flex;
  flex-direction: column;
}

.message {
  text-align: left;
}

.info {
  text-align: left;
  color: var(--green-color);
}

.error {
  text-align: left;
  color: var(--err-color);
}

.hidden {
  display: none;
}

.red {
  /* display: block; */
  /* text-align: left; */
  color: var(--red-color);
  /* border: 1px solid magenta; */
}
.green {
  color: var(--green-color);
}
.indigo {
  color: var(--indigo-color);
}
.violet {
  color: var(--violet-color);
}
.marine {
  color: var(--marine-color);
}


div.login_buttons{
  float: right;
  width: 64px;
  text-align: center;
  /* background-color: #00adef; */
}

 textarea#log{
  width: 100%;
  height: 100px;
  text-align: left;
  background-color: #dbdbb2;
}

/* fieldset input[type="button"] {
  width: fit-content;
  color: red;
} */