#body{
    max-width:990px;
    max-height:99vh;
    background:#121212;
    margin: auto;
    font-family:Verdana, Helvetica, Tahoma;
    }
    .conteiner{
       display:inline-flex;
       max-height:100vh;
    }
    .right{
       background:gold;
       border-radius:4px;
       margin:3px;
       padding:10px;
       font-family:Verdana;
    }
    .div_form{
       display:none;
       background:gold;
       border-radius:4px;
       margin:3px;
    }
    .out_form{
       width:600px;
       background: gold;
       border-radius:4px;
       margin:3px;
       min-height:800px;
    }
    .line{
    display:flex;
    flex-direction: row;
    padding:10px;
   }
   H1, H2{
       text-align:center;
   }
   .income{
       position:absolute;
       display:none;
       top:100px;
       left:35%;
       text-align:center;
       background:rgba(255,215,0, .9);
       box-shadow: .1em .1em 15px #b89e14;
       border-radius:4px;
       border: solid 1px goldenrod;
       padding:10px;
       min-width:300px;
       width:400px;
   }
   #div_reg{
       position:absolute;
       display:none;
       top:100px;
       left:35%;
       text-align:center;
       background:rgba(255,215,0, .9);
       box-shadow: .1em .1em 15px #b89e14;
       border: solid 1px goldenrod;
       border-radius:4px;
       min-width:300px;
       min-height:450px;
       width:400px;
       padding:10px;
   }
   #div_reg:hover{
       cursor:move;
   }
   #profile {
       position:absolute;
       display:none;
       top:90px;
       left:25%;
       text-align:center;
       background:rgba(255,215,0, .9);
       box-shadow: .1em .1em 15px #b89e14;
       border-radius:4px;
       border: solid 1px goldenrod;
       padding:10px;
       min-width:300px;
       width:400px;
   }
   #editProfile {
       position:absolute;
       top:150px;
       left:33%;
       display:none;
       text-align:center;
       background:rgba(255,215,0, .9);
       box-shadow: .1em .1em 15px #b89e14;
       border-radius:4px;
       border: solid 1px goldenrod;
       padding:10px;
       min-width:300px;
       width:400px;
       z-index:22;
   }
   .butt_create{
       box-shadow: 0px 1px 0px 0px #fff6af;
       background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
       background-color:#ffec64;
       border-radius:6px;
       border:1px solid #ffaa22;
       display:inline-block;
       cursor:pointer;
       color:#333333;
       font-family:verdana;
       font-size:14px;
       font-weight:bold;
       padding:3px 10px;
       text-decoration:none;
       text-shadow:0px 1px 0px #ffee66;
   }
   .butt_create:hover {
       background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
       background-color:#ffab23;
   }
   .butt_create:active {
       position:relative;
       top:1px;
   }
   input, select{
       padding:.3em;
       margin:.3em;
       width:19em;
   }
   select, input[type=submit], input[type=button]{
       width:20em;
   }
   input[name="ask"], input[name="ans"]{
       width:600px;
       font-family:Verdana;
       font-size:1.2em;
   }
   input[name="create_item"]{
       width:255px;
       font-family:verdana;
       font-size:14px;
       padding:2px;
   }
   .stow{  /* span to open window 'income'  */
       cursor:pointer;
   }
   .bfreg{  /* span to open window registration  */
       cursor:pointer;
   }
   ._profile{
       cursor:pointer;
   }
   .right{
       background-image: url(img/tekstura-ornament-list-vintazh-uzor-zoloto.jpg);
   }
   .chat{
       height:85%;
       max-height:86vh;
       text-align:center;
       font-size:85%;
       background-color:white;
       padding:0.1em;
       margin-left:.1px;
       margin-right:1px;
       margin-top:0;
       text-align:left;
       overflow-y:scroll;
       box-shadow:inset 1px 1px 1px 1px #ffec64;
   }
   .chat::-webkit-scrollbar {
     width: 10px;               /* ширина scrollbar */
   }
   .chat::-webkit-scrollbar-track {
     background: #ffec64;        /* цвет дорожки */
   }
   .chat::-webkit-scrollbar-thumb {
     background-color: lightgreen;    /* цвет плашки */
     border-radius: 6px;       /* закругления плашки */
     border: 1px solid orange;  /* padding вокруг плашки */
   }
   #tosend{
       width:6em;
   }
   #main_input{
       width:36em;
   }
     #string{
       margin:2px;
     }
   .main_send{
       max-height:2em;
       border:solid 1px gold;
   }
   .left_pro{
       text-align:right;
   
   }
   .time{
       font-size:70%;
       color:grey;
       font-family:Arial;
   }
   #currentTime{
       font-size:70%;
   }
   .openProfile{
       cursor:pointer;
       text-decoration:underline;
   }
   .krest{
       transform: rotate(45deg);
       font-weight:bold;
       font-size:150%;
       float:right;
       border-radius:50%;
       border:solid 1px red;
       background-color:yellow;
       padding:.2em;
       margin:.2em;
       cursor:pointer;
   }
   .user_table{
       justify-content:center;
       max-width:45%;
   }
   #start{
       margin-left:5em;
   }
   #grid-container {
       margin:auto;
       display: grid; height: 300px; 
       grid-template-columns: 100px 100px;
       align-items: center; 
       align-content: flex-start;
   }
   #grid-container > div {
       border-radius:10%;
       border: 1px solid white; 
       margin: 2px; 
       padding: 2px;
   }
   .login{
       color:darkred;
       font-weight:bold;
   }
   #reload{
       cursor:pointer;
   }
   #clearChat{
       cursor:pointer;
   }
   #tech{
       color:#222;
       font-size:80%;
       line-height:1.2em;
   }
   #tech a {
       color:darkred;
       text-decoration: none;
    }
   #inChat{
       display:flex;
       flex-wrap:wrap;
       flex-direction:column;
   }
   .activLogin{
       background-color:darkred;
       font-size:80%;
       color:white;
       border-radius: .2em;
       margin:.2em;
       padding: .2em;       
   }
   /* for profile  */
.table {
    display: flex;
    margin-top:1em;
    margin-bottom:1em;
    font-size:90%;
  }
.column {
    flex: 1;
    padding: 0 6px;
    margin:0;
  }
.column-right {
    text-align: left;
    margin:0;
  }
.column-left {
    text-align: right;
    margin:0;
  }
  .blur{
    filter: blur(3px); -webkit-filter: blur(3px); -moz-filter: blur(3px);
    -o-filter: blur(3px); -ms-filter: blur(3px);
    filter: url(blur.svg#blur);
  }
  .noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}
  #countInMonth {
      text-width:bold;
  }