* {
  transition: all 150ms;
}

/*------------ body ------------*/

body {
  padding: 0 15px;
  font-family: Verdana, Serif;
  background-color: #150f0d;
  color: #f8baa6;
}

a {
  color: #f45d2c;
}

h2 {
  background-position: center;
  background-image: url('../image/textures/logo.png');
  background-repeat: no-repeat;
  background-size: contain;
  height: 50px;
}

button {
  border: 1px solid #555;
  border-radius: 3px;
  background-color: #333;
  color: #ddd;
  padding: 4px 8px;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: bold;
}

button:hover {
  border-color: #f45d2c;
  background-color: #f8baa6;
  color: #333;
}

.flex-right { 
  display: flex; /* Объявление контейнера */
  flex-direction: row; /* Метод выстраивания */
  justify-content: center; /* Выравнивание */
  padding: 10px; /* Поля */
}

.flex-down { 
  display: flex; /* Объявление контейнера */
  flex-direction: column; /* Метод выстраивания */
  justify-content: center; /* Выравнивание */
  padding: 10px; /* Поля */
}

/*my*/
.sconfigure { 
  cursor: pointer;
  text-decoration: underline;
}

#musicoff {
  cursor: pointer;
  text-decoration: none; /* line-through // none */
}

#endweb {
  font-size: 10px;
}

#loadasp {
  position: relative;
  transform: translate(0%, -30%);
}

#httphelp {
  color: red;
}

/*------------ guipanel ------------*/

#guipanel > .panel {
  padding: 32px 35px 32px 32px;
  background-position: center;
  background-image: url('../image/textures/GUImatrix.png');
  background-repeat: no-repeat;
  background-size: 100% 97%;
}

#guipanel #outputasp {
  margin: 10px 0;
}

/*------------ outputasp ------------*/
/*my*/
#outputasp { 
  position: absolute;
  width: 30px;
  height: 30px;
  transform: translate(-53%, -52%);
}

#outputaspb {
  position: absolute;
  width: 40px;
  height: 40px;
  transform: translate(-51%, -25%);
}

#outputaspb1 {
  position: absolute;
  width: 30px;
  height: 30px;
  transform: translate(35%, -15%);
}

#outputasp1 { 
  position: absolute;
  width: 20px;
  height: 20px;
  transform: translate(76%, 1.9%);
}

#outputaspb2 {
  position: absolute;
  width: 30px;
  height: 30px;
  transform: translate(-135%, -15%);
}

#outputasp2 { 
  position: absolute;
  width: 20px;
  height: 20px;
  transform: translate(-180%, 1.9%);
}

/*------------ aspanel ------------*/

#aspanel {
  z-index: 10;
  width: 405px;
  height: 290px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  /*justify-content: space-around;*/
  justify-content: flex-start;
  align-content: start;
  overflow-y: auto;
}

#aspanel > span {
  z-index: 10;
  margin: 2px 2px;
  width: 60px;
  height: 40px;
  position: relative;
  border-radius: 5px;
  /*border: 1px solid #fff;*/
}

#aspanel > span.inactive {
  background-color: #78645a94 !important;
  display: none;
}

#aspanel > span:not(.inactive) {
  cursor: pointer;
}

#aspanel > span:not(.inactive):hover {
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.85) !important;
}

#aspanel > span > img {
  z-index: 10;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-80%, -50%);
}

#aspanel > span > span.count {
  z-index: 100;
  display: inline-flex;
  align-items: flex-end;
  justify-content: right;
  position: absolute;
  bottom: 0;
  right: 0;
  border-radius: 5px 0 5px 0;
  font-size: 10px;
  font-weight: bold;
  padding: 2px 4px;
  color: #fff;
}

/*my*/
#aspanel > span > div.name {
  z-index: 100;
  /*display: inline-flex;*/
  /*align-items: flex-end;*/
  /*justify-content: right;*/
  position: relative;
  /*bottom: 0;*/
  /*right: 0;*/
  /*border-radius: 5px 0 5px 0;*/
  transform: translate(0%, -40%);
  font-family: "Arial", Serif;
  font-size: 7.5px;
  font-weight: bold;
  padding: 2px 4px;
  color: #d1f3f5; /*fff*/
}

/*------------ guipluspanel ------------*/

#guipluspanel {
  padding: 30px;
  background-position: 51% 75%;
  background-image: url('../image/textures/GUIpluspanel.png');
  background-repeat: no-repeat;
  background-size: 50%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

#ands {
  display: block;
  width: 70px;
  height: 35px;
  background-position: center;
  background-image: url('../image/textures/ands1.png');
  background-repeat: no-repeat;
  background-size: cover;
  cursor: pointer;
}

#ands:active {
  background-position: center, center;
  background-image: url('../image/textures/ands2.png'), url('../image/textures/ands1.png');
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
}

#guipluspanel .plus-place {
  margin: 0 15px;
}

#s1 {
  cursor: pointer;
  transform: translate(-4.5%, 0%);
}

#s2 {
  cursor: pointer;
  transform: translate(4.5%, 0%);
}

/*------------ asmatrix ------------*/

#asmatrix {
  padding: 30px;
  background-position: center;
  background-image: url('../image/textures/GUImatrix.png');
  background-repeat: no-repeat;
  background-size: contain;
}

#asmatrix > canvas {
  z-index: 20;
}

#matrix {
  height: 400px;
  width: 400px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: flex;
  align-items: center;
  justify-content: center;
}

#matrix.start {
  background-image: url('../image/textures/ASmatrixS.png');
  cursor: pointer;
}

#matrix.game {
  background-image: url('../image/textures/ASmatrix.png');
}

#canvas {
  z-index: 15;
}

/*my*/
#outputlevelb {
  position: absolute;
  transform: translate(-49%, -7%);
}