@charset "UTF-8";

@keyframes move-twink-back {
  from {
    background-position: 0 0;
  }

  to {
    background-position: -10000px 5000px;
  }
}

@-webkit-keyframes move-twink-back {
  from {
    background-position: 0 0;
  }

  to {
    background-position: -10000px 5000px;
  }
}

@-moz-keyframes move-twink-back {
  from {
    background-position: 0 0;
  }

  to {
    background-position: -10000px 5000px;
  }
}

@-ms-keyframes move-twink-back {
  from {
    background-position: 0 0;
  }

  to {
    background-position: -10000px 5000px;
  }
}

@keyframes move-clouds-back {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 10000px 0;
  }
}

@-webkit-keyframes move-clouds-back {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 10000px 0;
  }
}

@-moz-keyframes move-clouds-back {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 10000px 0;
  }
}

@-ms-keyframes move-clouds-back {
  from {
    background-position: 0;
  }

  to {
    background-position: 10000px 0;
  }
}

.stars,
.twinkling,
.clouds {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 300%;
  display: block;
  z-index: 1;
}
.u-layout-row{
  position: relative;
  z-index: 100;
}
.animated-gradient {
  background-image: -webkit-linear-gradient(125deg, #f2291b, #f7db25, #84f527);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation: hue 3s infinite linear;
  }@-webkit-keyframes hue {
   from {
     -webkit-filter: hue-rotate(0deg);
   }
   to {
     -webkit-filter: hue-rotate(-360deg);
   }
  }
#hi {
  position: relative;
  z-index: 2;
}
#videocontainer {
  position: relative;
  z-index: 1;
}
.stars {
  background: #000 url(https://botikmambed.xyz/kaif/stars.png) repeat top center;
  z-index: 0;
}

.twinkling {
  background: transparent url(https://botikmambed.xyz/kaif/twinkling.png) repeat top center;
  z-index: 1;

  -moz-animation: move-twink-back 200s linear infinite;
  -ms-animation: move-twink-back 200s linear infinite;
  -o-animation: move-twink-back 200s linear infinite;
  -webkit-animation: move-twink-back 200s linear infinite;
  animation: move-twink-back 200s linear infinite;
}

.clouds {
  background: transparent url(https://botikmambed.xyz/kaif/clouds3.png) repeat top center;
  z-index: 3;

  -moz-animation: move-clouds-back 200s linear infinite;
  -ms-animation: move-clouds-back 200s linear infinite;
  -o-animation: move-clouds-back 200s linear infinite;
  -webkit-animation: move-clouds-back 200s linear infinite;
  animation: move-clouds-back 200s linear infinite;
}

table {

  border-collapse: separate;
  border-spacing: 0;

  table-layout: fixed;
  width: 100%;


}

#contentset {
  display: inline-flex;
  flex-direction: column;
  margin: 6px;
  flex-wrap: nowrap;
  align-items: center;
}

.butset {
  background: none;
  border: none;
  color: #000;
  outline: none;
  margin-bottom: 4px;
  cursor: pointer;
  min-width: 100%;
}

.statuname {
  height: 17px;
}

.setnames {
  color: #000;
  background-color: rgb(18, 118, 177);
  font-size: medium;
  margin-top: 2px;
  margin-bottom: 6px;
}

#telegram-login-Forniteshop_Bot {
  float: left;
}

#mesall {
  display: inline-flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
  float: left;
}

#setimg:active {
  transition: transform 2s;
  transform: rotate(180deg);
}

#setimg {
  width: 30px;
}

#setting {
  background-color: #afd8ff;
  display: none;
  text-align: right;
  position: absolute;
  z-index: 1;
  right: 0;
  moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  border-radius: 2px;
}

#inputmes {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}

#nameinput {
  white-space: nowrap;
  text-align: center;
  margin-right: 5px;
  color: aqua;
}

#set {
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  position: absolute;
  right: 0;
}

#echo {
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
}

#videocontainer {
  border: 10px solid;
  border-image-slice: 1;
  border-width: 5px;
  border-image-source: linear-gradient(to top, #743ad5, #ff0000);
}

#main {
  border: 10px solid;
  border-image-slice: 1;
  border-width: 5px;
  border-image-source: linear-gradient(to top, #001aff, #743ad5);
}

.statu {
  height: 17px;
}

.brython-dialog-main {
  border: 5px solid rgb(194, 0, 253);
  moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -khtml-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

.brython-dialog-title {
  color: rgb(255, 255, 255);
  background: #000;
  border-style: solid;
  border-color: #000;
  border-width: 0px 0px 1px 0px;
  font-size: smaller;
  cursor: default;
}

.brython-dialog-close {
  margin-right: 10px;
  cursor: pointer;
  float: right;
  background-color: Transparent;
  font-size: medium;
  color: rgb(255, 255, 255);
  cursor: default;
  padding: 0.1em;
}

.brython-dialog-panel {
  font-family: Arial, Helvetica, sans-serif;
  font-size: smaller;
  background-color: #000;
  color: rgb(255, 255, 255);
  text-align: center;
  left: 10px;
  top: 10px;

}

.roles {
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  color: rgb(234, 0, 255);
}

#ban {
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  color: rgb(255, 0, 0);
}

#mute {
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  color: rgb(253, 253, 253);
}

#noban {
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  color: rgb(94, 255, 0);
}

#role {
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  color: rgb(111, 0, 255);
}

#norole {
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  color: rgb(255, 238, 0);
}

#manage {
  background: none;
  border: none;
  outline: none;
  cursor: pointer
}

.cont {
  display: inline-block;
  font-size: 85%;
}

#my_video_1 {
  width: 100%;
  height: 100%;
}

#but {
  display: inline-block;
  cursor: pointer;
}

#chat {
  overflow: auto;
  width: 100%;
  height: 500px;
  border: 10px solid #000;
  moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -khtml-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
  margin: 0.7em auto;
  background: rgba(7, 6, 6, 0.733);
}

#chat::-webkit-scrollbar {
  width: 10px;
}

#chat::-webkit-scrollbar-track {
  -webkit-box-shadow: 5px 5px 5px -5px rgba(34, 60, 80, 0.2) inset;
  background-color: rgba(7, 6, 6, 0.733);
}

#chat::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: linear-gradient(180deg, #00c6fb, #005bea);
}
#info {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
}

#channel_select {
  background-color: #7e0d61;
  color: #fff;
  border: none;
  padding: 0.625em;  /* 10px, если размер шрифта 16px */
  font-size: 1em;  /* 16px */
  cursor: pointer;
  outline: none;
  margin-right: 0.625em;  /* 10px */
  border-radius: 3.125em;  /* 50px */
  box-shadow: 0 0.1875em 0.375em rgba(0, 0, 0, 0.16), 0 0.1875em 0.375em rgba(0, 0, 0, 0.23);  /* 3px 6px */
  transition: all 0.3s ease;  
  width: 50%;
  height: 2.5em;  /* 40px, если размер шрифта 16px */
}

#channel_search {
  background-color: #f8f8f8;
  color: #000;  /* Изменено на черный */
  border: none;
  padding: 0.625em;  /* 10px, если размер шрифта 16px */
  font-size: 1em;  /* 16px */
  cursor: pointer;
  outline: none;
  margin-right: 0.625em;  /* 10px */
  border-radius: 3.125em;  /* 50px */
  box-shadow: 0 0.1875em 0.375em rgba(0, 0, 0, 0.16), 0 0.1875em 0.375em rgba(0, 0, 0, 0.23);  /* 3px 6px */
  transition: all 0.3s ease;  
  width: 50%;
  height: 2.5em;  /* 40px, если размер шрифта 16px */
}

#addclass {
  margin-top: 20px;
}

#channel_select:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.16), 0 6px 20px rgba(0, 0, 0, 0.23); 
}

#channel_select option {
  background-color: #000;
  color: #fff;
}

#online {
  background-color: #0c415a;
  color: #fff;
  border: none;
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
  outline: none;
  margin-left: 10px;  
  border-radius: 50px;  
}


#channel_search::placeholder {
  color: #000000;
}

#channel_search:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.16), 0 6px 20px rgba(0, 0, 0, 0.23); 
}
#login {
  background-color: #0c415a;
  color: #fff;
  border: none;
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
  outline: none;
  margin-left: 10px;  
  border-radius: 50px;
  transition: background-color 0.3s ease;
  display: none;
}

#login:hover {
  background-color: #0c5a1999;
}

#login:active {
  background-color: rgb(15, 90, 12);
}

#message {
  width: 100%;
}

.message1 {
  color: #bbbbbb;
}

input[type="text"],
textarea {
  background-color: #000000;
  color: #b4b2b2;
  border: solid #000;
}

table tr {
  width: 50%;
  margin: 0 auto;
  text-align: left;
}

.u-section-1 .u-sheet-1 {
  min-height: 1007px;
}

.u-section-1 .u-layout-wrap-1 {
  margin-bottom: 60px;
}

.u-section-1 .u-layout-cell-1 {
  min-height: 390px;
  background-image: none;
}

.u-section-1 .u-container-layout-1 {
  padding: 0px;
}

.u-section-1 .u-layout-cell-2 {
  min-height: 390px;
  background-image: linear-gradient(#1c2935, #41080a);
}

.u-section-1 .u-container-layout-2 {
  padding: 15px;
}

.u-layout-col,
.u-layout-row,
.u-layout-col>* {
  display: flex;
  justify-content: space-around;
}

.u-section-1 .u-text-1 {
  margin: 120px 0 0;
}

@media (max-width: 1199px) {
  .u-section-1 .u-sheet-1 {
    min-height: 692px;
  }



  .u-section-1 .u-layout-cell-1 {
    min-height: 322px;
  }

  .u-section-1 .u-layout-cell-2 {
    min-height: 322px;
  }
}

@media (max-width: 991px) {
  .u-section-1 .u-sheet-1 {
    min-height: 540px;
  }



  .u-section-1 .u-layout-cell-1 {
    min-height: 247px;
  }

  .u-section-1 .u-layout-cell-2 {
    min-height: 100px;
  }
}

@media (max-width: 767px) {
  .u-section-1 .u-sheet-1 {
    min-height: 1846px;
  }



  .u-section-1 .u-layout-cell-1 {
    min-height: 227px;
  }

  .u-section-1 .u-container-layout-1 {
    padding-left: 10px;
    padding-right: 10px;
  }

  .u-section-1 .u-container-layout-2 {
    padding-left: 10px;
    padding-right: 10px;
  }
}

@media (max-width: 575px) {
  .u-section-1 .u-sheet-1 {
    min-height: 1177px;
  }



  .u-section-1 .u-layout-cell-1 {
    min-height: 143px;
  }
}