/* Панель, Черный список */

#panel {
  position: fixed;
  top: 170px;
  left: -293px;
  margin: 70px 0 0 2px;
  overflow: hidden;
  z-index: 10000;
  background: url(https://forumstatic.ru/files/001c/62/de/19146.png) left top no-repeat,
              url(https://forumstatic.ru/files/001c/62/de/15455.png) left center no-repeat,
			  url(https://forumstatic.ru/files/001c/62/de/58823.png) left bottom no-repeat,
              url(https://forumstatic.ru/files/001c/62/de/48287.png) left top repeat-y;
  background-size: contain, contain, contain, contain;
  width: 322px;
  filter: drop-shadow(0 0 1px #000);
}

#panel .panel-wrapper {
  float: left;
  width: 288px;
}
#panel-content {
  background: transparent;
  border: none;
  box-shadow: none;
  width: auto;
  height: auto;
  float: none;
  padding: 5px;
  text-align: center;
}
#panel-sticker {
  float: left;
  cursor: pointer;
  width: 30px;
  padding: 0;
  opacity: 0;
}
#panel-sticker span {
  display: block;
  writing-mode: vertical-lr;
  text-orientation: upright;
  white-space: nowrap;
  height: 400px;
}
#blockUsers > li > strong {
  cursor: pointer;
  font-size: 0px;
  color: red;
  font-weight: bold;
  top: -2px;
  position: relative;
  background: url(https://forumstatic.ru/files/001b/97/ef/33780.png) no-repeat center center;
  background-size: contain;
  height: 12px;
  width: 12px;
  display: inline-block;
  margin-left: 4px;
}
.blockButton:before {
  content: "";
  cursor: pointer;
  margin-top: 18.5px;
  margin-left: 2px;
  position: absolute;
  height: 10px;
  width: 10px;
  opacity: 1;
  background: url(https://forumstatic.ru/files/001b/97/ef/33780.png) no-repeat;
  background-size: contain;
  z-index: 2;
  padding-left: 5px;
}

ul#blockUsers {
  list-style-type: none;
  float: none;
  margin: 0;
  padding: 0;
  display: inline-block;
  text-align: left;
}

/* Положение крестика */
.toBlock {
  display: grid;
  align-content: start;
}

.blockButton, .post-author {
  grid-row: 1;
}

/* Правки для владок */

#panel .panel-wrapper {
  display: grid;
  grid-template:
                 ". buttop ." auto
                 ". panel-windows ." auto
                 / auto 1fr auto;				 
  overflow: hidden;
}

.gid3 #panel .panel-wrapper {justify-items: center;}

#panel .buttop {grid-area: buttop;}

#panel .panel-windows, #panel .panel-buttons div:hover, #panel .panel-buttons > .panel-activevkladka {
  font-family: Mason;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: bold;
  color: #6e736a!important;
  border-style: solid;
  border-color: rgba(116, 91, 66, 0.6);
  border-top-width: 1.2px;
  border-left-width: 1.2px;
  border-right-width: 1.2px;
  border-bottom-width: 1.2px;
}

#panel .panel-windows {
  display: grid;
  grid-area: panel-windows;
  max-height: 400px;
  border: none !important;
  border-radius: 0;
  background: transparent;
}

#panel .panel-windows > div {
  transition: transform 0.2s;
  transform: translateX(86%);
}

#panel .panel-windows > .panel-activevkladka {
  transform: translateY(0px);
  transform: translateX(0%);
  opacity: 1;
  z-index: 1;
}

#panel .panel-window {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  overflow: auto;
  line-height: 1.4em;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.2s, transform 0.2s;
  transition-delay: 0.4s;
  padding: 10px 4px;
  z-index: 0;
}

#panel .panel-buttons {
  grid-template-columns: auto 1fr;
  margin: 4px;
}

#panel .panel-buttons div {
  padding: 4px 10px;
  margin-top: 0;
  line-height: 100%;
  border-radius: 4px;
  transition: background-color .3s;
  font-family: Mason;
  text-transform: uppercase;
  font-size: 12px;
  color: #586d5a;
  text-align: center;
  background: rgb(0, 0, 0, 0.1);
  border-style: solid;
  border-color: rgba(116, 91, 66, 0.4);
  border-top-width: 1.2px;
  border-left-width: 1.2px;
  border-right-width: 1.2px;
  border-bottom-width: 1.2px;
  cursor: pointer;
}

#panel .panel-buttons div:hover, #panel .panel-buttons > .panel-activevkladka {
  border-radius: 4px;
  margin-top: 0;
  background: rgb(0, 0, 0, 0.2)!important;
}

/* Календарь */

.calendar_list {
  display: grid;
  grid-template-columns: auto;
  font-family: Trajan;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 9px;
  color: #6e736a;
}

.calendar_list h4, .chronology, #panel .panel-buttons div {text-transform: uppercase;}

.chronology {
  grid-row: 1;
  padding-bottom: 10px;
  text-align: center;
  color: #7d765f;
  font-family: Mason;
  text-transform: uppercase;
  font-size: 12px;
}

.calendar_tab {
  display: grid;
  grid-template-columns: 1fr 20px auto;
  grid-row: 2;
}

.moon, .galaxy {border: 1px solid #000000;}

.moon {
  margin-left: 2px;
}

.numbers {
  border: 1px solid #000000;
  border-width: 1px 0;
}

#panel ul {list-style-type: none;}

#panel h4 {margin: 0;}

#panel h4, #panel li {
  padding: 4px 4px 2px;
  border-bottom: 1px solid #000000;
}

#panel .blockeduser {
  padding: 0;
  border-bottom: 0;
}

#panel li:last-child {border: none;}

.moon ol, .galaxy ul, .numbers ul {margin: 0;}

.numbers span {opacity: 0;}

#panel .moon h4, #panel .moon ol {padding-left: 4px;}

.galaxy ul, .numbers ul {padding: 0;}

.numbers ul {text-align: center;}

.moon ol {
  list-style: none;
  counter-reset: i;
}

ol li {counter-increment: i;}

ol li:before {content: counter(i) ".  ";}

.numbers h4 {background: url(https://forumstatic.ru/files/001c/62/de/10973.png) repeat;}

.moon h4, .numbers ul, .galaxy h4 {background: rgb(0, 0, 0, 0.1);font-family: Mason; text-transform: uppercase; font-size: 12px;}

/* Стилизация подсказки */

*[data-title]::after {
  content: attr(data-title);
  z-index: 1;
  position: absolute;
  top: -18px;
  left: -16px;
  font-family: 'Trajan'!important;
  font-size:12px!important;
  font-weight: bold!important;
  text-transform:lowercase;
  letter-spacing:0.5px;
  color:#979385;
  text-shadow:0px 0px 2px #000000;
  transition: opacity 0.8s ease;
  background: url(https://forumstatic.ru/files/001c/62/de/81010.jpg) repeat transparent;
  border: 1.4px solid rgba(116, 91, 66, 0.5);
  border-radius: 4px/4px;
  box-shadow: inset rgba(0, 0, 0, 0.3) 0px 0px 5px, rgba(0, 0, 0, 0.1) 0px 0px 3px;
  padding: 4px 5px 2px 5px;
  opacity: 0;
  transition: 300ms;
}

*[data-title]:hover::after {
  opacity: 1;
}