:root {
  --color1: #ff00ea;
  --color2: #2f00ff;
  --firstcolor: #dddddd94;
  --firstcolor2: #b8b8b8d3;
  --secondcolor: #707070c9;
  --shadowcolor: #0000008a;
  --placecolor: #707070;
  --textcolor: #000000;
  --hovtextcolor: #363636;
  --backgraundcolor: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5));

  /* logical z-index scale (kept monotonically increasing) */
  --z-base: 0;
  --z-content: 1;
  --z-picker: 8;
  --z-sticky: 9;
  --z-toolbar: 10;
  --z-sidebar-tabs: 11;
  --z-backdrop: 4;
  --z-dropdown: 50;
  --z-popup: 56;
  --z-overlay: 999;
  --z-modal: 1000;
  --z-notify: 1100;
}

:root[theme='dark'] {
  --firstcolor: #2020206c;
  --firstcolor2: #242424d3;
  --secondcolor: #363636;
  --shadowcolor: #ffffff7d;
  --placecolor: #707070;
  --textcolor: azure;
  --hovtextcolor: #b3b3b3;
  --backgraundcolor: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
}

/* body */
body {
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover !important;
  background-position: center;
  font-family: 'n', sans-serif;
  z-index: var(--z-content);
  -webkit-locale: "ru";
  color: var(--textcolor);
}

input {
  background: transparent;
  border: none;
  border: 1px color-mix(in srgb, var(--color1), transparent 50%) solid;
  /* box-shadow: inset 0 0 10px color-mix(in srgb, var(--color1), transparent 60%); */
  border-radius: 5px;
  color: var(--textcolor);
  background: rgb(46, 46, 46);
  outline: none;
  text-align: center;
}

h3 {
  font-size: 1.17em;
  font-weight: bold;
}

h2 {
  font-size: 1.5em;
  font-weight: bold;
}

tspan {
  color: var(--textcolor);
}

#tableContainer {
  /* border: 1px solid #ccc; */
  cursor: default;
  background: transparent;
  transition: width 380ms cubic-bezier(.22, .9, .32, 1);
}

body.stats-open #tableContainer {
  width: calc(100% - 470px);
}

main.title {
  transition: width 380ms cubic-bezier(.22, .9, .32, 1);
}

body.stats-open main.title {
  width: calc(97.89% - 470px);
}

.container {
  width: 100%;
  height: calc(100% - 35px);
  position: relative;
  overflow: hidden;
  min-width: 300px;
  min-height: 200px;
}



@keyframes blink {
  50% {
    color: white;
  }
}

@keyframes msgsel {

  0%,
  100% {
    background: black;
  }

  50% {
    background: #adadad2b;
  }
}

@keyframes builddefault {

  0%,
  100% {
    color: red;
    text-shadow: 0 0 10px azure, 0 0 20px azure;
  }

  50% {
    color: azure;
    text-shadow: 0 0 10px red, 0 0 20px red;
  }
}


.check-icon {
  align-items: center;
  margin-top: 10px;
  margin-left: 10px;
}

.builddefault {
  animation: builddefault 1s ease-in-out 3;
}


.msgsel {
  animation: msgsel 0.5s ease-in-out 2;
}

.uploadFileFile {
  height: calc(100% - 51px);
  width: 100%;
  opacity: 0;
  position: absolute;
  display: flex;
  align-items: center;
}

.uploadFileFilefm {
  height: 30%;
  width: 55%;
  opacity: 0;
  position: absolute;
  display: flex;
  align-items: center;
}

.selector {
  background-color: #3030308f;
  border: none;
  border-bottom: solid 2px var(--color1);
  color: var(--textcolor);
  height: 25px;
  margin-bottom: 5px;
}

.uid {
  text-overflow: clip;
  white-space: nowrap;
  overflow: hidden;
}


.user {
  text-overflow: clip;
  white-space: nowrap;
  overflow: hidden;
}

.userinfo {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.buttonico {
  width: 40px;
  border: #000000 solid 2px;
  cursor: pointer;

}

.buttonico:hover {
  border: #464646 solid 2px;
}

.userinfo {
  height: 100px;
}

@media (max-width: 1150px) {
  .userinfo {
    height: fit-content;
  }
}

.pcname {
  text-overflow: clip;
  white-space: nowrap;
  overflow: hidden;
}

.buttonsheader {
  margin-top: 2px;
  text-align: center;
  border: 1px color-mix(in srgb, var(--color1), transparent 50%) solid;
  box-shadow: inset 0 0 5px color-mix(in srgb, var(--color1), transparent 60%);
  /* filter: invert(100%); */
  color: azure;
  margin-left: 5px;
}

.deftext {
  margin-bottom: 10px;
  padding: 5px;
  font-size: 20px;
}

#gotDevices {
  overflow: scroll;
}

.pagessel {
  width: 130px;
  clear: both;
  float: right;
  position: relative;
  font-size: 20px;
  margin-right: 20px;
}

.pagelist {
  display: flex;
}

.pagelist::after {
  /* content: "next"; */
}

.pagenumber {
  margin-right: 4px;
  margin-top: 4px;
  height: 25px;
  width: 25px;
  border: #707070 solid 2px;
  border-radius: 10%;
  font-size: 25px;
  text-align: center;
  color: #ffffff;
  cursor: pointer;
}

.buttonsheader:hover {
  /* border: 2px #707070 solid; */
  cursor: pointer;
}

.buttonsheader.active {
  background: var(--color1);
  border-color: var(--color1);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.35), 0 0 10px color-mix(in srgb, var(--color1), transparent 60%);
  color: #fff;
}

.buttonsort {
  filter: invert(100%);
  text-align: center;
  cursor: pointer;
}

.buttonsort:hover {
  filter: invert(50%);
  text-align: center;
}

.builderblock {
  width: 420px;
  height: 100%;
  background: #3030305d;
  /* border: var(--color1) 1px solid; */
  /* padding: 10px; */
}

.testblock {
  width: 400px;
  height: 200px;
  border: 2px var(--color1) dotted;
}

.headinfo {
  display: none;
  margin-top: 5px;
  font-size: 30px;
  text-shadow: #fcfcfc 2px 2px 2px;
  float: right;
}

.buildercontent {
  border-bottom: 2px solid var(--color1);
  height: 360px;
  margin-left: 12px;
  margin-right: 12px;
  min-width: 844px;
  /* display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  grid-template-rows: auto;
  grid-auto-flow: dense;
  gap: 20px; */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.bilderprogress {
  border-bottom: 2px solid var(--color1);
  height: 300px;
  font-size: 30px;
  margin-left: 12px;
  margin-right: 12px;
  width: 740px;
  padding-top: 60px;
  padding-bottom: 10px;
  margin-bottom: 20px;
  background: #3030305d;
  text-align: center;
}


.buldercenter {
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: fixed;
  text-align: center;
  display: flex;
}

#backblur {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-filter: blur(10px);
  filter: blur(10px);
  z-index: var(--z-backdrop);
  display: none;
  background-color: black;
  opacity: 0.6;
}

.confirmpopup {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #000000c2;
  position: fixed;
  text-align: center;
  border-radius: 10px;
  height: 200px;
  width: 500px;
  z-index: var(--z-toolbar);
  overflow: hidden;
  display: none;
}

.mainpopup {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #000000c2;
  position: fixed;
  text-align: center;
  border-radius: 10px;
  height: 400px;
  width: 700px;
  z-index: var(--z-toolbar);
  display: none;
  box-shadow: 0 0 10px color-mix(in srgb, var(--color1), transparent 60%);
}

.forummsg {
  border-radius: 1px;
}

.first-forummsg {
  max-width: 100%;
  border-bottom: 3px solid var(--color1);
  border-top: 1px color-mix(in srgb, var(--color1), transparent 60%) solid;
  border-left: 1px color-mix(in srgb, var(--color1), transparent 60%) solid;
  border-right: 1px color-mix(in srgb, var(--color1), transparent 60%) solid;
  min-height: 200px;
  background: #3030305d;
  box-shadow: inset 0 0 12px color-mix(in srgb, var(--color1), transparent 75%);
  margin-bottom: 10px;
  padding: 8px;
  border-radius: 3px;
  scroll-margin-top: 60px;
}

.backblur {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-filter: blur(10px);
  filter: blur(10px);
  z-index: var(--z-backdrop);
  background-color: black;
  opacity: 0.6;
}

.lefbackblur {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-filter: blur(10px);
  filter: blur(10px);
  z-index: var(--z-backdrop);
  background-color: black;
  opacity: 0.6;
}

#delitebuild {
  top: 50%;
  left: 50%;
  border-radius: 10px;
  transform: translate(-50%, -50%);
  background: #000000c2;
  height: 200px;
  width: 700px;
  display: none;
  position: fixed;
  text-align: center;
  z-index: var(--z-popup);
}

#editorPopup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  height: 90%;
  background: #171717;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  z-index: var(--z-modal);
  box-shadow: 0 0 20px color-mix(in srgb, var(--color1), transparent 60%);
}

#editorContainer {
  width: 100%;
  height: 90%;
}

#editorPopup button {
  margin: 10px;
}

#overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: var(--z-overlay);
}

#filterwindow {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #000000c2;
  position: fixed;
  text-align: center;
  border-radius: 10px;
  height: 400px;
  width: 700px;
  z-index: var(--z-toolbar);
  display: none;
}

#builderwindow {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #000000c2;
  position: fixed;
  text-align: center;
  border-radius: 10px;
  height: 500px;
  width: 1020px;
  z-index: var(--z-toolbar);
  display: none;
}

#tablesetwindow {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #000000c2;
  position: fixed;
  border-radius: 10px;
  height: 550px;
  width: 700px;
  z-index: var(--z-toolbar);
  display: none;
}

#tablep2pwindow {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #000000c2;
  position: fixed;
  border-radius: 10px;
  height: 550px;
  width: 700px;
  z-index: var(--z-toolbar);
  display: none;
}

#storagewindow {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #000000c2;
  position: fixed;
  border-radius: 10px;
  height: 250px;
  width: 700px;
  z-index: var(--z-toolbar);
  display: none;
}


#massdowindow {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #000000c2;
  position: fixed;
  border-radius: 10px;
  height: 550px;
  width: 700px;
  z-index: var(--z-toolbar);
  display: none;
}

.massdoslector {
  width: calc(100% - 20px);
  display: flex;
  justify-content: space-around;
  padding: 10px;
  border-bottom: 1px solid var(--color1);
}

.massdosel {
  cursor: pointer;
  width: 50%;
  text-align: center;
}

#massdoing {
  overflow: scroll;
  width: 100%;
  height: 60%;
  border: 1px solid var(--color1);
}

#massdoselected {
  height: 20%;
  border: 1px solid var(--color1);
  overflow: scroll;
}

.massdo {
  display: flex;
  justify-content: space-between;
  border-bottom: var(--color1) 1px solid;
  margin: 5px;
}

.massdo:hover {
  background: rgba(78, 78, 78, 0.459) 10px;
}

.massdo1 {
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#statswindow {
  top: 0;
  right: 0;
  background: #1a1a1a;
  position: fixed;
  border-radius: 0;
  padding: 0;
  height: 100%;
  width: 470px;
  max-width: 92vw;
  z-index: var(--z-sticky);
  display: none;
  opacity: 0;
  transform: translateX(105%);
  transition: transform 380ms cubic-bezier(.22, .9, .32, 1), opacity 260ms ease;
  overflow: visible;
  /* box-shadow: inset 1px 0 0 0 var(--color1),
              -8px 0 24px -6px color-mix(in srgb, var(--color1), transparent 50%); */
}

body.no-canvas #statswindow {
  margin-top: 33px;
  height: calc(100% - 33px);
}

#statswindow.open {
  opacity: 1;
  transform: translateX(0);
}

#statswindow .pophead {
  position: relative;
  background: linear-gradient(180deg, #2a2a2a 0%, #232323 100%);
  border-radius: 0;
  height: 44px;
  padding: 0 16px;
  align-items: center;
  /* box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset,
              0 4px 12px rgba(0,0,0,0.25),
              0 1px 0 #1a1a1a; */
}

#statswindow .pophead .popaccent {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color1) 0%, transparent 60%);
  pointer-events: none;
}

#statswindow .popname {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 0;
  height: 100%;
}

#statswindow .popname .popicon {
  color: var(--color1);
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--color1), transparent 60%));
}

#statswindow .popname b {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: #f1f1f1;
}

#statswindow .popname .popsub {
  font-size: 11px;
  letter-spacing: 0.6px;
  color: #888;
  padding: 2px 8px;
  margin-left: 4px;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 3px;
  font-variant-numeric: tabular-nums;
}

#statswindow #mainstatsblock {
  height: calc(100% - 44px) !important;
  padding: 14px 12px 10px 50px;
  box-sizing: border-box;
  overflow: visible;
  position: relative;
}

#statswindow #statsTabs {
  position: absolute;
  top: 14px;
  left: 0px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: var(--z-sidebar-tabs);
  padding: 0;
  margin: 0;
  pointer-events: auto;
}

#statswindow .tab-btn {
  width: 38px !important;
  min-height: 78px !important;
  padding: 12px 0 !important;
  background: #2a2a2a93 !important;
  border: 1px solid #3a3a3a !important;
  border-left: none !important;
  border-radius: 0 8px 8px 0 !important;
  color: #b8b8b8 !important;
  font-size: 11px !important;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  text-orientation: upright;
  cursor: pointer;
  writing-mode: vertical-rl;
  text-align: center;
  box-shadow: 3px 2px 8px rgba(0, 0, 0, 0.35);
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}

#statswindow .tab-btn:hover {
  background: #353535 !important;
  color: #fff !important;
  border-color: #4a4a4a !important;
}

#statswindow .tab-btn.active {
  background: var(--color1) !important;
  border-color: var(--color1) !important;
  color: #fff !important;
  box-shadow: 4px 2px 12px color-mix(in srgb, var(--color1), transparent 50%);
}

#statswindow .stats-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 10px 14px;
  margin: 6px 4px 14px;
  background: #232323;
  border-radius: 3px;
  text-align: left;
  box-shadow: inset 3px 0 0 0 var(--color1),
    -2px 0 8px -2px color-mix(in srgb, var(--color1), transparent 55%);
}

#statswindow .stats-title .field {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #d4d4d4;
}

#statswindow .stats-title .total {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

#statswindow .stats-title .total small {
  font-size: 11px;
  color: #888;
  font-weight: 500;
  margin-left: 6px;
  letter-spacing: 0.5px;
}

#statswindow .stat-row {
  position: relative;
  display: grid;
  grid-template-columns: 12px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  margin: 4px 4px;
  background: #232323;
  border-radius: 4px;
  overflow: hidden;
  outline: 1px solid transparent;
  transition: background 200ms ease, outline-color 200ms ease, transform 200ms ease;
}

#statswindow .stat-row:hover,
#statswindow .stat-row.hover {
  background: #2c2c2c;
}

#statswindow .stat-row.hover {
  outline-color: var(--color1);
  transform: translateX(2px);
}

#statswindow .stat-row .bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  opacity: 0.12;
  pointer-events: none;
  transition: opacity 200ms ease;
}

#statswindow .stat-row.hover .bar {
  opacity: 0.32;
}

#statswindow .stat-row .swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  position: relative;
  z-index: var(--z-content);
}

#statswindow .stat-row .label {
  position: relative;
  z-index: var(--z-content);
  text-align: left;
  font-size: 13px;
  color: #e2e2e2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#statswindow .stat-row .meta {
  position: relative;
  z-index: var(--z-content);
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-variant-numeric: tabular-nums;
}

#statswindow .stat-row .meta .val {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

#statswindow .stat-row .meta .pct {
  font-size: 11px;
  color: #888;
  min-width: 38px;
  text-align: right;
}

#statswindow .nodata {
  text-align: center;
  color: #777;
  font-size: 13px;
  padding: 30px 0;
}

#buildconfigsmenu {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #000000c2;
  position: fixed;
  border-radius: 10px;
  height: 500px;
  width: 700px;
  z-index: var(--z-toolbar);
  display: none;
}

#proxylistpanel {
  height: calc(100% - 31px);
  overflow: scroll;
  align-items: center;
}

.proxychiled {
  width: calc(100% - 20px);
  background: #3030305d;
  border-radius: 7px;
  box-shadow: inset 0 0 10px color-mix(in srgb, var(--color1), transparent 40%);
  font-size: 20px;
  padding: 5px;
  margin-left: 3px;
  margin-top: 5px;
  display: flex;
  justify-content: space-between;
  vertical-align: middle;
  transition: box-shadow 140ms ease, background 140ms ease;
}
.proxychiled:hover {
  box-shadow: inset 0 0 15px color-mix(in srgb, var(--color1), transparent 30%);
  background: #3a3a3a6d;
}

.proxyinfo {
  width: 33%;
  text-align: center;
}

.pophead {
  display: flex;
  justify-content: space-between;
  height: 30px;
  /* background: #3b3b3b57; */
  border-radius: 10px 10px 0px 0px;
  /* border-bottom: var(--color1) 1px solid; */
}

.popname {
  display: flex;
  margin-top: 6px;
  margin-left: 10px;
}

.closebutton {
  margin-top: 2px;
  margin-right: 7px;
}

.closebutton:hover {
  filter: invert(60%);
  cursor: pointer;
}

.addbutton {
  filter: invert(100%);
}

.addbutton:hover {
  filter: 2px var(--color1) solid;
  cursor: pointer;
}

a.svg-cursor:before {
  content: "";
  display: block;
  position: absolute;
  background-color: transparent;
  cursor: pointer;
  /* plus width and height of the SVG */
}

svg {
  cursor: pointer;
}

.button1 {
  /* border: 1px color-mix(in srgb, var(--color1), transparent 50%) solid; */
  box-shadow: inset 0 0 5px color-mix(in srgb, var(--color1), transparent 40%);
  font-size: 100%;
  text-align: center;
  margin: 2px;
  padding: 10px;
  padding-top: 5px;
  height: 15px;
  width: 135px;
  background-color: #3030305d;
  border-radius: 3px;
  -webkit-user-select: none;
}

.button1:hover {
  /* border-bottom: 2px #ffffff solid; */
  cursor: pointer;
  /* border: 1px color-mix(in srgb, var(--color1), transparent 50%) solid; */
  box-shadow: inset 0 0 15px color-mix(in srgb, var(--color1), transparent 40%);
}

.button1inact {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

.button11 {
  display: inline-block;
  border-bottom: 2px var(--color1) solid;
  font-size: 100%;
  text-align: center;
  margin: 2px;
  padding: 10px;
  padding-top: 5px;
  height: 15px;
  width: 135px;
  background-color: #3030305d;
  -webkit-user-select: none;
  -webkit-box-shadow: 0px 0px 1px 1px var(--hovtextcolor);
  -moz-box-shadow: 0px 0px 1px 1px var(--hovtextcolor);
  box-shadow: 0px 0px 1px 1px var(--hovtextcolor);
}

.button11:hover {
  border-bottom: 2px #ffffff solid;
  cursor: pointer;
}

.buttoncfg {
  border: 2px #5a5a5a solid;
  font-size: 100%;
  text-align: center;
  margin: 1px;
  margin-right: 10px;
  /* padding: 10px; */
  padding-top: 3px;
  /* height:  15px; */
  height: 20px;
  width: 130px;
  background-color: #171717;
  -webkit-user-select: none;
}

.buttoncfg:hover {
  border: 2px #292929 solid;
  cursor: pointer;
}

.buttondelcfg {
  border: 2px rgb(0, 0, 0) solid;
  font-size: 100%;
  text-align: center;
  height: 20px;
  margin: 2px;
  padding-top: 3px;
  /* padding: 10px; */
  /* height:  15px; */
  width: 30px;
  background-color: #303030;
  -webkit-user-select: none;
}

.buttondelcfg:hover {
  border: 2px #ffffff solid;
  cursor: pointer;
}

.cfglist {
  margin-right: 9px;
  height: 450px;
  overflow: auto;
  white-space: nowrap;
}

.actwin {
  text-overflow: clip;
  white-space: nowrap;
  overflow: hidden;
}

.buildblock {
  border: black solid 2px;
}

.ip {
  text-overflow: clip;
  white-space: nowrap;
  overflow: hidden;
}

::placeholder {
  color: rgb(136, 136, 136);
}

.img1 {
  /* margin-top: -3px; */
  margin-left: 16px;
  margin-bottom: 10px;
  /* border: var(--color1) 1px solid; */
  height: 150px;
  width: 250px;
  border: 1px solid var(--color1)
}


.reloadimg1 {
  width: 30px;
  height: 30px;
  float: right;
  margin-top: 50%;
}

.reloadimg1:hover {
  color: var(--color1);
}

:active,
:focus {
  outline: 0;
  outline-offset: 0;
}

.buildheader {
  display: flex;
  width: 100%;
  /* border-left: var(--color1) 1px solid;
  border-bottom: var(--color1) 1px solid; */
  background: #3b3b3b75;
  padding: 2px;
}

.mainheader {
  display: flex;
  width: 100%;
  border-left: var(--color1) 1px solid;
  border-bottom: var(--color1) 1px solid;
  background: #3b3b3bc9;
  padding: 2px;
  overflow-y: scroll;
}

.setslabel {
  font-weight: normal !important;
  padding: 0 !important;
}

.buildmenu {
  display: flex;
  font-size: 20px;
  /* margin-top: 10px;
  margin-left: 10px; */
  -webkit-user-select: none;

}

.headtext {
  padding-top: 5px;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 20px;
  display: flex;
  justify-content: space-between;
  background: #3b3b3b57;
  padding-bottom: 5px;
}

.buildmenuitem {
  padding: 5px;
  cursor: pointer;
  border: gray 1px solid;
  border-bottom: var(--color1) 2px solid;
  margin-bottom: 3px;

}

.buildmenuitem:first-child {
  border-radius: 10% 0 0 10%;
}

.buildmenuitem:last-child {
  border-radius: 0 10% 10% 0%;
}

.buildmenuitemactive {
  color: var(--textcolor);
  background: #dfdfdf;
}

.buildcreatebut {
  margin: 12px;
  font-size: 20px;
  background: rgba(26, 26, 26, 0.3);
  padding-bottom: 5px;
  padding-top: 5px;
  text-align: center;
  cursor: pointer;
  box-shadow: inset 0 0 10px color-mix(in srgb, black, transparent 40%);
  -webkit-user-select: none;
}

.buildcreatebut:hover {
  box-shadow: inset 0 0 10px color-mix(in srgb, var(--color1), transparent 60%);
}

#bilderblock {
  margin-left: 12px;
  margin-right: 12px;
}

.buildchiled {
  /* border:#ffffff solid 1px; */
  /* border-left: solid 3px var(--color1); */
  width: 300px;
  background: #3030305d;
  padding: 8px;
  margin: 20px;
  /* border: rgb(68, 68, 68) 1px solid; */
  border-radius: 5px;
  box-shadow: 0 0 10px color-mix(in srgb, var(--color1), transparent 60%);
}

.buildtext {
  border-bottom: 1px #00000052 solid;
  padding-left: 3px;
  padding-bottom: 5px;
  padding-top: 5px;
}

.headerproxy {
  font-size: 20px;
  margin: 10px;
}

.linebuildchiled {
  display: flex;
  margin: 6px;
  justify-content: space-between;
  font-size: 17px;
}

.linebuildchiled2 {
  display: flex;
  margin-bottom: 5px;
  justify-content: space-between;
  font-size: 19px;
}

#pie-chart {
  min-height: 250px;
}

.svgbutton {
  height: 20px;
  width: 20px;
  color: var(--textcolor);
  text-align: center;
  padding: auto;
}

.svgbutton2 {
  height: 30px;
  width: 30px;
  color: var(--textcolor);
  margin: 0px -8px -8px -8px;
  text-align: center;
  padding: auto;
}

.svgbutton3 {
  height: 30px;
  width: 30px;
  color: var(--textcolor);
  text-align: center;
  padding: auto;
}

.svginf {
  color: var(--textcolor);
  height: 30px;
  width: 30px;
}

.lefeder {
  -webkit-app-region: drag;
  /* animation-duration: 2s;
  animation-name: slidelefeder; */
  display: flex;
  width: 31px;
  /* height: 100vh; */
  padding: 8px 8px 8px 0px;
  height: calc(100% - 32px);
  /* background: rgba(30,30,30,.70); */
  background: var(--firstcolor);
  position: fixed;
  z-index: var(--z-content);
  color: var(--color1);
  overflow: hidden;
  border-right: 1px rgba(128, 128, 128, 0.473) solid;
  /*filter: invert(100%);*/
}

.lefeder:hover {
  /* width: 10vh; */
  /* width: 70px; */
  /* border-right: 1px rgba(128, 128, 128, 0) solid; */
}

.nameslefeder {
  padding: 10px;
  padding-top: 15px;
  padding-left: 15px;
  padding-right: 0px;
  color: azure;
}

.headheader {
  padding: 1px;
  padding-bottom: 0px;
  /* background: #3b3b3b;  */
  background: var(--firstcolor);
  display: flex;
  /* position: fixed; */
  justify-content: space-between;
  width: 100%;
  /* border-left: var(--color1) 2px solid; */
  z-index: var(--z-content);
}

.lefeitems {
  /* animation-duration: 2s;
  animation-name: slidelefeder; */
  padding-left: 6px;
  width: 25px;
  height: 25px;
  margin-top: 9px;
  margin-bottom: 9px;
  /* filter: inborder-right: var(--color1) 1px solid;vert(80%) sepia(97%) saturate(4013%) hue-rotate(358deg) brightness(100%) contrast(127%); */
}

.butfileman {
  text-align: center;
  border: #000000 solid 2px;
  margin: 2px;
}

.lefeitems:hover {
  cursor: pointer;
  filter: brightness(90%) contrast(90%);
}

.lefeactive {
  background: #171717;
}

.lefeitems2 {
  margin-top: 1vh;
  margin-bottom: 1vh;
  filter: invert(100%) sepia(100%) saturate(100%) hue-rotate(59deg) brightness(1000%) contrast(100%);
}

.colorimp {
  width: 25px;
  border: none;
  /* border-radius: 100%; */
  /* margin-left: 15px; */
  margin-bottom: 5px;
}

#maincolsel {
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  background: transparent;
}

#maincolsel::-webkit-color-swatch-wrapper {
  padding: 0;
  border-radius: 10px;
}

#maincolsel::-webkit-color-swatch {
  border: none;
  border-radius: 10px;
}

#maincolsel::-moz-color-swatch {
  border: none;
  border-radius: 10px;
}

.infopreli {
  display: inline-block;
  float: left;
}

.trss {
  min-width: fit-content;
  padding-left: 7px !important;
  /*resize:horizontal;*/
  cursor: ew-resize;
  -webkit-user-select: none;
}

.trss:first-child {
  padding-left: 0;
}

.infoli {
  display: flex;
  width: auto;
  margin: 4px;
}

.infoli2 {
  display: flex;
  margin-top: 10px;
  margin-bottom: 10px;
}

.markerinfo {
  color: var(textcolor);
  margin-left: 2px;
}


.cfgchiled {
  display: flex;
  justify-content: space-between;
  margin-left: 20px;
  margin-right: 5px;
  margin-bottom: 10px;
  border-bottom: var(--color1) 2px solid;
}

/* links */
.nfl a,
.mlb a,
.nhl a,
.pga a {
  text-decoration: none;
  transition: color 0.2s ease-out;
}

.nfl a {
  color: #4fc0d2;
}

.context-menu {
  position: absolute;
  text-align: center;
  background: #1e1e1e;
  border: 1px color-mix(in srgb, var(--color1), transparent 50%) solid;
  border-radius: 3px;
  box-shadow: inset 0 0 12px color-mix(in srgb, var(--color1), transparent 75%), 0 0 10px color-mix(in srgb, var(--color1), transparent 60%);
  cursor: pointer;
}

.contextnav {
  display: flex;
  width: 150px;
}

.connavlog {
  order: 1;
}

.context-menu-left {
  position: absolute;
  text-align: center;
  background: #1e1e1e;
  border: 1px color-mix(in srgb, var(--color1), transparent 50%) solid;
  border-radius: 3px;
  box-shadow: inset 0 0 12px color-mix(in srgb, var(--color1), transparent 75%), 0 0 10px color-mix(in srgb, var(--color1), transparent 60%);
  cursor: pointer;
}

.panelsvgonline {
  color: var(--color1);
}

.panelsvgofline {
  color: grey;
}

.context-menu ul {
  padding: 0px;
  margin: 0px;
  min-width: 150px;
  list-style: none;
}

.context-menu ul li {
  padding: 3px;
  border-bottom: 1px color-mix(in srgb, var(--color1), transparent 70%) solid;
  border-left: transparent 2px solid;
  border-right: transparent 2px solid;
  min-width: 40px;
  transition: box-shadow 140ms ease, background 140ms ease;
}

.context-menu ul li a {
  text-decoration: none;
  color: var(--textcolor);
}

.context-menu ul li:hover {
  background: #3030305d;
  box-shadow: inset 0 0 15px color-mix(in srgb, var(--color1), transparent 40%);
}

.contextinfo {
  justify-content: space-around;
  display: flex;
  padding: 5px;
  border-bottom: var(--color1) 2px solid;
}

.contextinfo .online {
  color: #00ff91;
}

.funincontext {
  height: 20px;
  padding: 3px;
  width: 100%;
  display: flex;
}

.statdownblock {
  display: flex;
  justify-content: space-around;
  border-top: #838383 solid 2px;
  padding-top: 20px;
  margin-left: 20px;
  margin-right: 20px;
}

.funincontexttext {
  border-bottom: #242424ee 2px solid;
  padding-top: 3px;
  display: flex;
  padding-left: 30%;
  border-left: #00000000 2px solid;
  border-right: #00000000 2px solid;
}

.funincontexttext:hover {
  border-left: var(--color1) 2px solid;
  border-right: var(--color1) 2px solid;

}

#chengeima {
  background-size: contain !important;
  width: 268px;
  height: 160px;
}

.funinconchiled {
  margin-top: 5px;
  min-width: 40px;
}

.funincontext:hover {
  border-left: var(--color1) 2px solid;
  border-right: var(--color1) 2px solid;
}

.confunname {
  margin-bottom: 8px;
}

.conovermenuname {
  border-left: 1px color-mix(in srgb, var(--color1), transparent 50%) solid;
  border-bottom: 1px color-mix(in srgb, var(--color1), transparent 50%) solid;
  height: 16px;
  padding: 5px;
  margin-bottom: 8px;
  display: none;
}

.connav {
  border-left: 1px color-mix(in srgb, var(--color1), transparent 70%) solid;
  border-right: 1px color-mix(in srgb, var(--color1), transparent 70%) solid;
}

.confunchiled {
  border-bottom: 1px color-mix(in srgb, var(--color1), transparent 70%) solid;
  padding: 3px;
  border-right: transparent 2px solid;
  border-left: transparent 2px solid;
  min-width: 110px;
  color: var(--textcolor);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  transition: box-shadow 140ms ease, background 140ms ease;
}

.confunchiled:hover {
  background: #3030305d;
  box-shadow: inset 0 0 15px color-mix(in srgb, var(--color1), transparent 40%);
}

.confunhover {
  background: #3030305d;
  box-shadow: inset 0 0 15px color-mix(in srgb, var(--color1), transparent 40%);
}

.conconnectbut {
  margin: 2px;
  width: 100px;
  padding: 4px 6px;
  background: #3030305d;
  border: 1px color-mix(in srgb, var(--color1), transparent 50%) solid;
  border-radius: 3px;
  color: var(--textcolor);
  text-align: center;
  box-shadow: inset 0 0 5px color-mix(in srgb, var(--color1), transparent 60%);
  transition: box-shadow 140ms ease, background 140ms ease;
}

.conconnectbut:hover {
  box-shadow: inset 0 0 15px color-mix(in srgb, var(--color1), transparent 40%);
}

.hoverdash:hover::after {
  color: var(--color1);
  content: " -";
}

.hoverdash:hover::before {
  color: var(--color1);
  content: "- ";
}

a {
  color: var(--textcolor) !;
}

.mlb a {
  color: #52d29a;
}

li {
  text-overflow: clip;
  white-space: nowrap;
  overflow: hidden;
}

.user {
  text-overflow: clip;
}

.pcname {
  --text-overflow: clip;
  width: 30px;
}

.mlb a:hover {
  color: #279766;
}

input[type=radio] {
  position: absolute;
  visibility: hidden;
  display: none;
}

.addsecondfilter {
  display: none;
}

.secondfilter {
  display: flex;
}


/* .chillfriend{
  margin: 10px;
  margin-left: 8px;
  margin-right: 8px;
  border: gray solid 2px;
  text-align:center;
  height: 135px;
  width: 120px;
  cursor: pointer;
}

.chillfriend:hover{
  border: var(--color1) solid 2px;
} */

.chillfriendin {
  margin: 3px;
  background: rgba(26, 26, 26, 0.6);
  padding: 10px;
  border-bottom: var(--color1) 3px solid;
}

.friendchillname {
  margin-top: 10px;
  font-size: 20px;
}

.chiledinfo {
  color: var(--color1);
  margin-top: 10px;
}

.friend50 {
  width: 50%;
  margin: 10px;
}

.notifyblock {
  display: none;
  max-height: 70%;
  position: fixed;
  z-index: var(--z-overlay);
  float: right;
  top: 99%;
  left: 99%;
  transform: translate(-99%, -99%);
  overflow: hidden;
}

.notify {
  --ncolor: var(--color1);
  background: rgba(20, 20, 22, 0.92);
  border: 1px solid color-mix(in srgb, var(--ncolor), transparent 65%);
  border-radius: 8px;
  animation-duration: 0.7s;
  animation-name: slidenotify;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  min-width: 300px;
  padding-bottom: 10px;
  margin-bottom: 6px;
  cursor: pointer;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.5),
    0 0 14px color-mix(in srgb, var(--ncolor), transparent 55%),
    inset 0 0 12px color-mix(in srgb, var(--ncolor), transparent 80%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: box-shadow 0.25s ease;
  overflow: hidden;
}

.notify:hover {
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.6),
    0 0 22px color-mix(in srgb, var(--ncolor), transparent 40%),
    inset 0 0 18px color-mix(in srgb, var(--ncolor), transparent 70%);
}

.textnotify {
  font-size: 16px;
  text-align: center;
  padding: 10px 12px 0 12px;
  color: #e0e0e0;
}


#qrcode {
  margin-left: 20px;
  margin-top: 20px;
  background-color: whitesmoke;
  padding: 20px;
  width: fit-content;
}

.alert {
  font-size: 18px;
  padding: 8px 12px;
  border: none;
}

.alertin {
  margin-left: 5px;
}

@keyframes slidenotify {
  from {
    opacity: 0;
    transform: translateX(40px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slidelefeder {
  from {
    margin-right: 100px;
  }

  to {
    margin-right: 0px;
  }
}



.upfriend {
  width: 100%;
  max-height: 115px;
  border-bottom: azure 2px solid;
  overflow: scroll;
}

.reqchillfriend {
  /* border-left: var(--color1) 3px solid; */
  margin: 10px;
  padding: 12px;
  background: rgba(26, 26, 26, 0.3);
  border-left: var(--color1) 3px solid;
}

.reqchillfriend:hover {}

.reqchillfriend:last-child {
  margin-bottom: 10px;
}


.modulename {
  font-size: 20px;
  margin: 20px;
}

.themeblock {
  padding: 10px;
  margin-right: 30px;
  margin-left: 30px;
  margin-top: 30px;
  border-top: gray 1px solid;
  border-bottom: gray 1px solid;
  display: flex;
  overflow-y: scroll;
}

.chilltheme {
  margin: 5px;
  cursor: pointer;
}

.chilltheme:first-child {
  margin-left: 0px;
}

.backgraundblock {}

.chillselectorleft {
  display: flex;
  justify-content: space-around;
  /* border: rgb(255, 255, 255) solid 1px; */
  width: 135px;
  cursor: pointer;
}

.chillselectorright {
  display: flex;
  justify-content: space-around;
  /* border: rgb(255, 255, 255) solid 1px; */
  width: 135px;
  cursor: pointer;
}

.chillselectora {
  background: color-mix(in srgb, var(--color1), transparent 40%);
  cursor: default;
}


.chillselectback {
  width: 20px;
  height: 20px;
  margin: 3px;
  z-index: var(--z-content);
}

.alertblock {
  width: 260px;
  height: 180px;
  border: rgb(255, 255, 255) solid 2px;
  margin-left: 12px;
  padding: 5px;
}

#scriptname {
  cursor: pointer;
}

.abset {
  width: 80px;
  height: 55px;
  border: gray solid 2px;
  cursor: pointer;
}

.absetact {
  border: var(--color1) solid 2px;
}

.spacevizor {
  height: 95px;
  background: rgba(0, 0, 0, 0.671);
  margin: 20px;
}

.cstblock {
  margin: auto;
  width: 100%;
  justify-content: space-evenly;
  margin-top: 31px;
}

.cstblock:first-child {
  margin-top: 60px;
}

.backgraundtheme {
  margin: 5px 0;
  width: 274px;
  height: 160px;
  cursor: pointer;
  background: #000000;
}

label {
  color: var(--textcolor);
  display: inline-block;
  cursor: pointer;
  font-weight: bold;
  padding: 5px 10px;
}

input[type=radio]:checked+label {
  color: var(--textcolor);
  background: color-mix(in srgb, var(--color1), transparent 50%);
}

label+input[type=radio]+label {
  margin-left: -8px;
  border-left: solid 2px color-mix(in srgb, var(--color1), transparent 100%);
}

.radio-group {
  margin: 1px;
  border: 1px color-mix(in srgb, var(--color1), transparent 50%) solid;
  box-shadow: inset 0 0 10px color-mix(in srgb, var(--color1), transparent 60%);
  /* border-bottom: solid 2px var(--color1); */
  margin-top: 2px;
  margin-left: 2px;
  display: inline-block;
  overflow: hidden;
}

.headselectorbutton {
  text-align: center;
  padding: 5px;
  padding-left: 40px;
  border: 1px color-mix(in srgb, var(--color1), transparent 80%) solid;
  padding-right: 40px;
  cursor: pointer;
  margin-left: 2px;
  margin-bottom: 2px;
  font-size: large;
  height: 20px;
  border-radius: 3px;
  background: #3030305d;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.headselectorbutton:hover {
  border-color: color-mix(in srgb, var(--color1), transparent 55%);
  box-shadow: inset 0 0 8px color-mix(in srgb, var(--color1), transparent 75%);
}

.headselectorbutton.headselectorbuttonactive,
.headselectorbuttonactive {
  background: #30303090;
  border-color: color-mix(in srgb, var(--color1), transparent 35%);
  box-shadow: inset 0 0 12px color-mix(in srgb, var(--color1), transparent 55%);
}

.headselectorbutton.headselectorbuttonactive:hover,
.headselectorbuttonactive:hover {
  background: #303030b0;
  border-color: color-mix(in srgb, var(--color1), transparent 20%);
  box-shadow: inset 0 0 16px color-mix(in srgb, var(--color1), transparent 45%);
}

.prmini-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #3030305d;
  border: 1px color-mix(in srgb, var(--btn-accent, var(--color1)), transparent 80%) solid;
  cursor: pointer;
  color: #ddd;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.prmini-btn:hover {
  background: #30303090;
  border-color: color-mix(in srgb, var(--btn-accent, var(--color1)), transparent 55%);
  color: var(--btn-accent, var(--color1));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5),
    inset 0 0 8px color-mix(in srgb, var(--btn-accent, var(--color1)), transparent 75%);
}

.prmini-btn:active {
  background: #303030b0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4),
    inset 0 0 12px color-mix(in srgb, var(--btn-accent, var(--color1)), transparent 55%);
}

.list-container {
  margin: 0;
  margin-left: -10px;
  padding: 0;
  width: 200px;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.7);
  border: var(--color1) 1px solid;
  -webkit-user-select: none;
}

.list-container li:last-child {
  border-bottom: none;
}

.list-container .list-element {
  margin: 0;
  background-color: #3b3b3b;
  padding: 0 0.5rem;
  height: 30px;
  list-style: none;
  font-size: 20px;
  font-weight: 300;
  color: #fff;
  cursor: move;
  border-bottom: 0.1rem solid #444444;
  transition: 250ms all cubic-bezier(0.4, 0, 0.2, 1);
  /* display: flex; */
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  user-select: none;
  text-align: center;
}

.list-container .list-element .my-handle {
  padding-right: 20px;
  text-align: center;
}

.list-container .list-element.sortable-ghost {
  background-color: #303030;
}

.list-element {
  text-align: center;
}

.itpt {
  margin-bottom: 10px;
  margin-left: 10px;
  font-size: 20px;
  font: bold;
  display: flex;
  justify-content: space-around;
}

.nhl a {
  color: rgba(231, 196, 104, 0.7);
}

input[type=checkbox] {
  position: relative;
  cursor: pointer;
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 10px;
}

input[type=checkbox]:before {
  content: "";
  display: block;
  position: absolute;
  width: 10px;
  height: 10px;
  margin-top: -2px;
  top: 0;
  left: 0;
  border: 1px solid #333;
  box-shadow: 0 0 2px 1px #333;
  border-radius: 3px;
  background-color: #333;
  padding: 2px;
}

input[type=checkbox]:checked::before {
  box-shadow: inset 0 0 10px color-mix(in srgb, var(--color1), transparent 0%), 0 0 2px 1px var(--color1);
  border: 1px solid color-mix(in srgb, var(--color1), transparent 30%);
}

.nhl a:hover {
  color: rgba(201, 154, 32, 0.7);
}

.pga a {
  color: #eb7655;
}

.pga a:hover {
  color: #c33d17;
}

/* wrapper */
.uwrapper {
  display: none;
  width: 100%;
  /* margin: 20px auto 100px auto; */
  margin-bottom: 80px;
  padding: 0;
  color: var(--textcolor);
  overflow: hidden;
  position: relative;
  -webkit-user-select: none;
}

.uwrapper2 {
  display: none;
  width: 100%;
  /* margin: 20px auto 100px auto; */
  margin-bottom: 80px;
  padding: 0;
  color: var(--textcolor);
  overflow: hidden;
  position: relative;
  -webkit-user-select: none;
}

.tablebox {
  /* width: 100%; */
  margin-left: 40px;
  /* margin: 20px auto 100px auto; */
  padding: 0;
  color: var(--textcolor);
  overflow: hidden;
  position: relative;
}

.reqfriendsbutt {
  float: right;
  display: flex;
}

.friendbutt {
  color: rgba(160, 160, 160, 0.596);
  height: 30px;
  width: 30px;
  margin-top: -8px;
  margin-right: 10px;
}

.friendbutt:hover {
  color: var(--textcolor);
}

.friendssearch {
  height: 50px;
  margin-top: 20px;
  align-items: center;
  text-align: center;
  width: 100%;
  display: flex;
  justify-content: center;
}

.chiledaccess {
  background: rgba(26, 26, 26, 0.6);
  border-left: var(--color1) 2px solid;
  margin-left: 5px;
  margin-top: 5px;
  height: 30px;
  font-size: 18px;
  padding-top: 10px;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  justify-content: space-between;
}

.accessrules {
  overflow: scroll;
  height: 400px;
}

.addacess {
  height: 400px;
  padding: 20px;
}

.sendrequestbutton {
  margin-left: 10px;
  border: 2px azure solid;
  cursor: pointer;
  padding: 10px;
}

.sendrequestbutton:hover {
  border: 2px var(--color1) solid;
  color: var(--color1);
}

.securitypage {
  width: 100%;
  height: 50%;
}

.themepage {
  width: 100%;
  height: calc(100vh - 60px);
  overflow: auto;
}

.settingsflex {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.settingsflex>.tablebox2 {
  flex: 0 0 auto;
  width: 340px;
  max-width: 340px;
  box-sizing: border-box;
  display: table;
}

.settingsflex>.tablebox2 tbody,
.settingsflex>.tablebox2 tr {
  width: 100%;
}

.settingsflex>.tablebox2 td {
  width: auto;
}

.rowbtn td {
  position: relative;
  padding-right: 28px !important;
  transition: background 0.15s;
}

.rowbtn:hover td {
  background: color-mix(in srgb, var(--color1), transparent 88%);
}

.rowchev {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  opacity: 0.5;
}

@media (max-height: 900px),
(min-width: 900px) {
  .settingsflex {
    flex-direction: row;
  }
}

@media (max-width: 899px) {
  .settingsflex {
    flex-direction: column;
  }
}

.overtablebox2 {
  margin: 20px;
  margin-bottom: 0px;
  height: fit-content;
  max-width: fit-content;
  -webkit-box-shadow: 0px 0px 6px 1px var(--shadowcolor);
  -moz-box-shadow: 0px 0px 6px 1px var(--shadowcolor);
  box-shadow: 0px 0px 6px 1px var(--shadowcolor);
  padding: 10px;
}

.tablebox2 {
  display: block;
  background: #3030305d;
  padding-bottom: 8px;
  border-radius: 7px;
  table-layout: fixed;
  font-size: 18px;
  max-width: fit-content;
  box-shadow: inset 0 0 10px color-mix(in srgb, var(--color1), transparent 40%);
}

.shopitem:hover {
  box-shadow: 0px 0px 6px 1px azure;
  -webkit-box-shadow: 0px 0px 6px 1px azure;
}


.tableel {
  /* justify-content: space-around; */
  /* border-bottom: 2px solid var(--color1); */
  text-overflow: ellipsis;
}

.tableel td {
  padding: 10px;
  margin-top: 20px;
}

.tableel2 {
  /* justify-content: space-around; */
  text-overflow: ellipsis;
}

.tableel2 td {
  padding: 10px;
  margin-top: 20px;
}

table h3 {
  width: 100%;
  padding-top: 5px;
  padding-bottom: 7px;
  border-bottom: 2px solid azure;
}

.imco {
  /* content: url(image/chevron-right.svg); */
  width: 16px;
  height: 16px;
  margin: 0 !important;
}

.tableeltext {}

.row-fadeIn-wrapper:first-of-type {
  /* margin-top: 20px; */

}

/* lists */
.row ul {
  margin: 0;
  padding: 0;
}


.row ul li {
  margin: 0;
  font-size: 20px;
  font-weight: normal;
  list-style: none;
  display: inline-block;
  /*width: 10%;*/
  box-sizing: border-box;
}

.expand-btn {
  bottom: 5px;
  right: 5px;
  background: #5e5e5e;
  color: azure;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 3px;
  font-size: 0.9em;
}

.expand-btn:hover {
  color: white;
}

.feedback-btn {
  background: #5e5e5e;
  color: azure;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 3px;
  font-size: 0.9em;
  text-align: center;
  width: calc(100% - 20px);
}

.feedback-btn:hover {
  color: white;
}




@media only screen and (max-width: 1200px) and (min-width: 500px) {
  .row ul li {
    font-size: 18px;
  }

  .row-fadeIn-wrapper {
    /* height: 30px !important; */
  }

  .title {
    padding: 5px 0 2px 0 !important;
    height: 25px !important;
  }

  .uwrapper {
    margin-top: 70px !important;
  }

  #mainsetblock {
    display: grid !important;
  }

  #mainsetblock2 {
    display: grid !important;
  }
}

@media only screen and (max-width: 499px) {
  .row ul li {
    font-size: 13px;
  }

  .radio-group {
    display: none;
  }

  #mainsetblock {
    display: grid !important;
  }

  #mainsetblock2 {
    display: grid !important;
  }
}

#mainsetblock {
  display: flex;
}

#mainsetblock2 {
  display: flex;
}

.title ul li:first-child {
  padding: 0px 5px 0px 5px;
  height: 21px;
}

.trss {
  padding: 0px 10px 0px 0px !important;
}

.trss a {
  display: inline-block;
  overflow: hidden;
}

.title ul li {
  padding: 0px 10px 0px 0px;
  height: 21px;
}

.separator {
  padding: 0px 5px 0px 5px !important;
}

.row ul li {
  /* padding: 5px 10px; */

  /* padding: 1px 10px; */
}

/* rows */
.row {
  padding: 20px 0;
  --height: 30px;
  font-size: 0;
  position: relative;
  overflow: hidden;
  transition: all 0.2s ease-out;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  /*border-bottom: var(--color1);*/
}

#prbio {
  overflow: scroll;
}

.loader-49 {
  width: 48px;
  height: 48px;
  display: inline-block;
  position: relative;
  margin-top: 19%;
  margin-left: 39%;
  z-index: var(--z-content);
}

.loader-49::after,
.loader-49::before {
  content: "";
  width: 48px;
  height: 48px;
  border: 2px solid #FFF;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-animation: rotation 2s ease-in-out infinite alternate;
  animation: rotation 2s ease-in-out infinite alternate;
}

.loader-49::after {
  border-color: var(--color1);
  animation-direction: alternate-reverse;
}

.editmenu {
  transform: translate(-50%, -50%);
  background: #000000c2;
  position: fixed;
  border-radius: 10px;
  height: 200px;
  width: 400px;
  z-index: var(--z-modal);
  display: none;
}

.loader {
  min-width: 200px;
  width: 33.33%;
  height: 200px;
  padding: 10px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--textcolor);
  cursor: pointer;
  transition: 0.3s linear;
}


/* .row {
  height: 25vh;
} */
.row:hover {
  background-color: var(--firstcolor);
}

/* @media only screen and (max-width: 767px) {
  .row:hover {
    height: 20vh;
  }
}
@media only screen and (max-width: 359px) {
  .row:hover {
    height: 20vh;
  }
} */

.tableitems {
  padding-left: 15px !important;
  text-overflow: clip;
  white-space: nowrap;
  overflow: hidden;
  height: 34px;
}

.conpcname {
  margin: auto;
}

#stolbiki {
  padding-left: 15px !important;
}

.title {
  scrollbar-width: none;
  padding: 7px 0 2px 0;
  height: 30px;
  width: 97.89%;
  font-size: 0;
  /* background-color: #3b3b3b; */
  background-color: var(--firstcolor);
  border-bottom: var(--color1) 2px solid;
  border-left: var(--color1) 2px solid;
  position: fixed;
  z-index: var(--z-content);
  text-overflow: clip;
  white-space: nowrap;
  overflow: scroll;
}

.title::-webkit-scrollbar {
  display: none;
}

.userctrl {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-overlay);
}

.chart {
  position: absolute;
  width: 450px;
  height: 450px;
  top: 50%;
  left: 50%;
  margin: -225px 0 0 -225px;
}

.pieTip {
  position: absolute;
  float: left;
  min-width: 30px;
  max-width: 300px;
  padding: 5px 18px 6px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .97);
  color: #444;
  font-size: 19px;
  text-shadow: 0 1px 0 #fff;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.3;
  letter-spacing: .06em;
  box-shadow: 0 0 3px var(--firstcolor), 0 1px 2px var(--firstcolor);
  -webkit-transform: all .3s;
  -moz-transform: all .3s;
  -ms-transform: all .3s;
  -o-transform: all .3s;
  transform: all .3s;
  pointer-events: none;
}

.pieTip:after {
  position: absolute;
  left: 50%;
  bottom: -6px;
  content: "";
  height: 0;
  margin: 0 0 0 -6px;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  border-top: 6px solid rgba(255, 255, 255, .95);
  line-height: 0;
}

.chart path {
  cursor: pointer;
}

.title:hover {
  height: 30px;
  background-color: var(--firstcolor);
  /* background-color: #3b3b3b; */
}

@media only screen and (max-width: 767px) {
  .title-hide {
    display: none;
  }
}

.line1 {
  border-bottom: 3px var(--color1) solid;
  margin-bottom: 10px;
}

.container2 {
  /* display: inline-block; */
  position: relative;
  /* margin: 6%; */
  margin-top: 20px;
  /* padding-top: 3px; */
  color: azure;
}

.index {
  cursor: pointer;
  display: inline;
  margin-right: 34px;
  padding: 5px;
  user-select: none;
  -moz-user-select: none;
}

.index:last-child {
  margin: 0;
}

/* svg {
  left: -13px;
  position: absolute;
  top: -11px;
  transition: transform 500ms;
  width: 46px;
}
path {
  fill:none;
  stroke:grey;
  stroke-dasharray: 150 150;
  stroke-width:15;
} */
.container.open:not(.flip) path {
  animation: OpenRight 500ms;
}

.container.open.flip path {
  animation: OpenLeft 500ms;
}

.container.i1 svg {
  transform: translateX(0);
}

.container.i2 svg {
  transform: translateX(50px);
}

.container.i3 svg {
  transform: translateX(102px);
}

.container.i4 svg {
  transform: translateX(154px);
}

.container.i5 svg {
  transform: translateX(206px);
}

@keyframes OpenRight {
  25% {
    stroke-dasharray: 100 150;
  }

  60% {
    stroke-dasharray: 100 150;
  }

  100% {
    stroke-dasharray: 150 150;
  }
}

@keyframes OpenLeft {
  25% {
    stroke-dashoffset: -50px;
  }

  60% {
    stroke-dashoffset: -50px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

.nflt {
  border-left: 3px solid #4fc0d2;
}

.nfl {
  border-left: 3px solid #1c616c;
}

.nfl:hover {
  border-left: 3px solid #4fc0d2;
}

.nfl a:hover {
  color: #268695;
}

.currentuserline {
  border-left: 3px solid #4fc0d2;
  background-color: var(--firstcolor);
  color: #aaaaaa;
}

.mlb {
  border-left: 3px solid #1d6e4b;
}

.mlb:hover {
  border-left: 3px solid #52d29a;
}

.nhl {
  border-left: 3px solid rgba(157, 121, 25, 0.7);
}

.nhl:hover {
  border-left: 3px solid rgba(231, 196, 104, 0.7);
}

.pga {
  border-left: 3px solid #952f12;
}

.pga:hover {
  border-left: 3px solid #eb7655;
}

/* row one - fadeIn */
.row-fadeIn-wrapper {
  background: var(--firstcolor);
  opacity: 0;
  font-size: 0;
  height: 0;
  overflow: hidden;
  position: relative;
  transition: all 0.2s ease-out;
  -webkit-animation: fadeIn 0.4s ease-out 0s 1 alternate;
  animation: fadeIn 0.4s ease-out 0s 1 alternate;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  cursor: pointer;
  transition-delay: 0.3s;

}

.noanim {
  transition: all 0.01s ease-out;
  -webkit-animation: fadeIn 0.01s ease-out;
  animation: fadeIn 0.01s ease-out;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  cursor: pointer;
  transition-delay: 0s;
}

.row-fadeIn-wrapper:hover {
  transition-delay: 0.2s;
  height: 20vh;
}

@media only screen and (max-width: 767px) {
  .row-fadeIn-wrapper:hover {
    height: 20vh;
  }
}

@media only screen and (max-width: 359px) {
  .row-fadeIn-wrapper:hover {
    height: 20vh;
  }
}

.row-fadeIn-wrapper-killer:hover {
  height: 0 !important;
}

.notifyselector {
  display: flex;
  padding: 5px;
  border-bottom: 1px var(--color1) solid;
}

.notifyselitem {
  margin: 5px;
  font-size: 17px;
  cursor: pointer;
  width: 75px;
  padding-bottom: 5px;
  border-bottom: #adadad8f 2px solid;
  user-select: none;
}

.methpage {
  height: calc(100% - 111px);
  background: #000000;
}

.separator2 {
  width: 10px;
  cursor: col-resize;
  user-select: none;
  /* prevent text selection */
}

.separator:last-child {
  margin-right: 200px;
}

.fadeIn {
  padding: 0;
  font-size: 0;
  position: absolute;
  transition: all 0.2s ease-out;
  width: 100%;
}

article {
  height: fit-content;
}

.uwrapper {
  border-bottom: var(--color1) 2px solid;
}

.row-fadeIn-wrapper:last-child {
  /*border-bottom: var(--color1) 2px solid;*/
}

/* row two - fadeOut */
.row-fadeOut-wrapper {
  font-size: 0;
  overflow: hidden;
  position: relative;
  transition: all 0.2s ease-out;
  -webkit-animation: fadeOut 0.4s ease-out 8s 1 alternate;
  animation: fadeOut 0.4s ease-out 8s 1 alternate;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  opacity: 1;
  height: 65px;
}

.row-fadeOut-wrapper:hover {
  height: 50px;
}

/* update content */
.update-row {
  -webkit-animation: update 0.5s ease-out 12s 1 alternate;
  animation: update 0.5s ease-out 12s 1 alternate;
}

.more-content {}

.unfriendconfirm {
  border-radius: 10px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--firstcolor);
  height: 200px;
  width: 750px;
  display: none;
  position: fixed;
  text-align: center;
  z-index: var(--z-popup);
}

.filemanager {
  margin: 20px;
  height: 220px;
  background: var(--firstcolor);
  display: flex;
}

.chiledfolderlist {
  height: 99%;
  width: 30%;
  border: var(--color1) solid 2px;
  color: azure;
}

.chiledfolderlist:last-child {
  width: 70%;
  overflow: scroll;
}

.pcategory {}

.butfileman {
  margin: 5px;
  cursor: pointer;
}

.accessfriendmenu {
  border-radius: 10px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--firstcolor);
  height: 500px;
  width: 700px;
  display: none;
  position: fixed;
  text-align: center;
  z-index: var(--z-popup);
}

.update1 {
  position: absolute;
  top: 25px;
  display: inline-block;
  opacity: 1;
  -webkit-animation: update1 1s ease-out 12s 1 alternate;
  animation: update1 1s ease-out 12s 1 alternate;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.update2 {
  position: absolute;
  top: 25px;
  display: inline-block;
  opacity: 0;
  -webkit-animation: update2 4s ease-out 13s 1 alternate;
  animation: update2 4s ease-out 13s 1 alternate;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

/* more content */
ul.more-content li {
  position: relative;
  top: 22px;
  font-size: 20px;
  margin: 0;
  padding: 10px 13px;
  display: block;
  width: 100%;
  color: azure;
}

.raw {
  width: 200px;
  margin-left: 55px;
  margin-top: 10px;
  /* padding: 20px 0; */
}

.number {
  display: inline-block;
  position: relative;
  width: 100px;
}

.number input[type="number"] {
  display: block;
  height: 32px;
  line-height: 32px;
  width: 100%;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  text-align: center;
  -moz-appearance: textfield;
  -webkit-appearance: textfield;
  appearance: textfield;
}

.number input[type="number"]::-webkit-outer-spin-button,
.number input[type="number"]::-webkit-inner-spin-button {
  display: none;
}

.number-minus {
  cursor: pointer;
  position: absolute;
  top: 1px;
  left: 1px;
  bottom: 1px;
  width: 20px;
  padding: 0;
  display: block;
  text-align: center;
  border: none;
  font-size: 16px;
  font-weight: 600;
  background: var(--firstcolor);
  color: var(--color1);
  margin-bottom: 1px;
}

#recoverycode {
  font-size: 30px;
}

.subblock {
  margin-top: 7px;
  margin-left: 5px;
  margin-bottom: 5px;
  /* border-top: var(--color1) 2px solid;
  border-bottom: var(--color1) 2px solid; */
  width: 99%;
  height: 250px;
  display: flex;
  overflow-x: scroll;
}

.subchild {
  height: 150px;
  min-width: 300px;
  width: 200px;
  box-shadow: 0px 0px 6px 1px #b8b8b8;
  margin: 10px;
  cursor: pointer;
}

.subchildchild {
  background: #2c2c2c60;
  height: 99%;
  width: 99%;
}

/* .subchild:hover{
  box-shadow: 0px 0px 6px 1px var(--color1);
} */

.subname {
  margin-top: 10px;
}

.subdesc {
  margin-top: 20px;
}

.subtime {
  margin-top: 20px;
}

.popup {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #000000c2;
  position: fixed;
  text-align: center;
  border-radius: 10px;
  height: 400px;
  width: 700px;
  z-index: var(--z-toolbar);
  display: none;
  box-shadow: 0 0 10px color-mix(in srgb, var(--color1), transparent 60%);
}

.mailfirststep {
  text-align: center;
  margin-top: 20%;
}

.setmailfirststep {
  text-align: center;
  margin-top: 20px;
}

.mailsecondstep {
  text-align: center;
  margin-top: 15%;
}

.setmailsecondstep {
  text-align: center;
  margin-top: 15%;
}

#builds {
  height: calc(100% - 150px);
  width: 100%;
  display: inline-flex;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  overflow: scroll;
  justify-items: center;
  align-content: flex-start;
  justify-content: center;
  align-items: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
}

.maingrid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 30fr));
  justify-items: center;
}

#scripts {
  margin-top: 55px;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  justify-items: center;
}

.subfreezebut {
  border: white 1px solid;
  margin-top: 11px;
  height: 28px;
  border-radius: 10px;
  cursor: pointer;
  width: 180px;
  margin-bottom: 10px;
}

.subfreezebut:hover {
  color: var(--color1);
  border: var(--color1) 1px solid;
}

.subfreaze {
  margin-top: 2px;
  height: 18px;
  width: 18px;
}

.number-plus {
  cursor: pointer;
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  width: 20px;
  padding: 0;
  display: block;
  text-align: center;
  border: none;
  font-size: 16px;
  font-weight: 600;
  background: var(--firstcolor);
  color: var(--color1);
  margin-bottom: 1px;
}

#builderscripts {
  overflow: scroll;
  height: inherit;
}

#panelscripts {
  overflow: scroll;
  height: 80%;
  margin-bottom: 10px;
}

.plusintitle {
  border: solid 1px var(--color1);
  border-radius: 2px;
  color: azure;
  padding: 1px !important;
  height: 21px;
  width: 16px;
}

.plusintitle:hover {
  color: var(--color1);
  cursor: pointer;
}

.number-minus:hover {
  filter: brightness(70%);
}

.number-plus:hover {
  filter: brightness(70%);
}

.taskmgrprocchiled {
  border: 1px grey solid;
  border-left: 3px var(--color1) solid;
  font-size: 20px;
  padding: 5px;
  margin-top: 5px;
  display: flex;
  justify-content: space-between;
  background: #35353550;

}

.custom-select {
  color: azure;
  border: 1px color-mix(in srgb, var(--color1), transparent 50%) solid;
  box-shadow: inset 0 0 10px color-mix(in srgb, var(--color1), transparent 60%);
  margin-top: 5px;
  width: 225px;
  border-radius: 3px;
  background: #3030305d;
}

.custom-select__option {
  height: 26px;
  padding-top: 0;
  padding-right: 0;
  background: transparent;
  color: azure;
  border-top: 1px color-mix(in srgb, var(--color1), transparent 85%) solid;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.custom-select__option:first-child {
  border-radius: 3px 3px 0 0;
  border-top: 0;
}

.custom-select__option:last-child {
  border-radius: 0 0 3px 3px;
}

.custom-select__option:hover {
  background: #30303080;
  box-shadow: inset 0 0 10px color-mix(in srgb, var(--color1), transparent 65%);
}

.custom-select__option--value {
  border-radius: 3px !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-top: 0 !important;
}

.custom-select--active .custom-select__option--value {
  border-radius: 3px 3px 0 0 !important;
  border: 0 !important;
  border-bottom-color: transparent !important;
}

.custom-select--active {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  z-index: var(--z-dropdown);
}

.custom-select__dropdown {
  overflow: hidden;
  z-index: var(--z-dropdown);
  background-color: rgba(18, 18, 22, 0.97);
  border: 1px color-mix(in srgb, var(--color1), transparent 50%) solid;
  border-top: 0;
  border-radius: 0 0 3px 3px;
  max-height: 200px;
  overflow: auto;
  width: calc(100% + 2px) !important;
  left: -1px !important;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.5),
    0 0 12px color-mix(in srgb, var(--color1), transparent 80%);
}

.custom-select__option:focus {
  background-color: #30303080 !important;
  box-shadow: inset 0 0 10px color-mix(in srgb, var(--color1), transparent 65%) !important;
}

.custom-select,
.custom-select *,
.custom-select__dropdown,
.custom-select__dropdown * {
  outline: none !important;
}

.custom-select__dropdown {
  border-color: color-mix(in srgb, var(--color1), transparent 50%) !important;
}

/* The container must be positioned relative: */
.custom-select {
  position: relative;
  /* font-family: Arial; */
}

.custom-select select {
  display: none;
  /*hide original SELECT element: */
}

.select-selected {
  background-color: DodgerBlue;
}

/* Style the arrow inside the select element: */
.select-selected:after {
  position: absolute;
  content: "";
  top: 14px;
  right: 10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  /* border-color: #fff transparent transparent transparent; */
}

/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after {
  border-color: transparent transparent #fff transparent;
  top: 7px;
}

/* style the items (options), including the selected item: */
.select-items div,
.select-selected {
  color: #ffffff;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
}

/* Style items (options): */
.select-items {
  position: absolute;
  background-color: DodgerBlue;
  top: 100%;
  left: 0;
  right: 0;
  z-index: var(--z-contextmenu);
}

/* Hide the items when the select box is closed: */
.select-hide {
  display: none;
}

.select-items div:hover,
.same-as-selected {
  background-color: rgba(0, 0, 0, 0.1);
}

@media only screen and (max-width: 767px) {
  ul.more-content li {
    font-size: 11px;
  }
}

/* small content */
.small {
  color: rgba(102, 102, 102, 0.9);
  font-size: 10px;
  padding: 0 10px;
  margin: 0;
}

@media only screen and (max-width: 767px) {
  .small {
    display: none;
  }
}

/* keyframe animations */
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
    padding: 0;
  }

  to {
    opacity: 1;
    padding: 0 0 65px 0;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    padding: 0;
  }

  to {
    opacity: 1;
    padding: 0 0 65px 0;
    padding: 0 0 35px 0;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
    height: 65px;
  }

  to {
    opacity: 0;
    height: 0;
  }
}

@keyframes update {
  0% {
    background: var(--firstcolor);
  }

  50% {
    background: var(--secondcolor);
  }

  100% {
    background: var(--secondcolor);
  }
}

@keyframes update1 {
  0% {
    opacity: 0;
  }

  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@-webkit-keyframes update2 {
  0% {
    opacity: 0;
    color: rgba(255, 255, 255, 0.9);
  }

  20% {
    opacity: 1;
    color: #52d29a;
  }

  100% {
    opacity: 1;
    color: rgba(255, 255, 255, 0.9);
  }
}

@keyframes update2 {
  0% {
    opacity: 0;
    color: rgba(255, 255, 255, 0.9);
  }

  20% {
    opacity: 1;
    color: #52d29a;
  }

  100% {
    opacity: 1;
    color: rgba(255, 255, 255, 0.9);
  }
}

::-webkit-scrollbar {
  color: rgba(128, 128, 128, 0);
  width: 10px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  background-color: color-mix(in srgb, var(--color1), transparent 50%);
  border: 2px solid #80808000;
  cursor: pointer;
  border-radius: 3px;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
  background-color: #fcfcfc00;
  box-shadow: inset 0 0 10px color-mix(in srgb, black, transparent 60%);
  /* border: #000000 solid 1px; */
}


/* keyFrames */
@-webkit-keyframes rotation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes rotationBack {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}

@keyframes rotationBack {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}

@-webkit-keyframes rotationBreak {
  0% {
    transform: rotate(0);
  }

  25% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotationBreak {
  0% {
    transform: rotate(0);
  }

  25% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes zeroRotation {
  0% {
    transform: scale(1) rotate(0deg);
  }

  100% {
    transform: scale(0) rotate(360deg);
  }
}

@keyframes zeroRotation {
  0% {
    transform: scale(1) rotate(0deg);
  }

  100% {
    transform: scale(0) rotate(360deg);
  }
}

@-webkit-keyframes shadowExpandX {
  0% {
    box-shadow: 0 0, 0 0;
    color: rgba(255, 255, 255, 0.2);
  }

  100% {
    box-shadow: -24px 0, 24px 0;
    color: rgba(255, 255, 255, 0.8);
  }
}

@keyframes shadowExpandX {
  0% {
    box-shadow: 0 0, 0 0;
    color: rgba(255, 255, 255, 0.2);
  }

  100% {
    box-shadow: -24px 0, 24px 0;
    color: rgba(255, 255, 255, 0.8);
  }
}

@-webkit-keyframes shadowPulse {
  33% {
    background: #FFF;
    box-shadow: -24px 0 #FF3D00, 24px 0 #FFF;
  }

  66% {
    background: #FF3D00;
    box-shadow: -24px 0 #FFF, 24px 0 #FFF;
  }

  100% {
    background: #FFF;
    box-shadow: -24px 0 #FFF, 24px 0 #FF3D00;
  }
}

@keyframes shadowPulse {
  33% {
    background: #FFF;
    box-shadow: -24px 0 #FF3D00, 24px 0 #FFF;
  }

  66% {
    background: #FF3D00;
    box-shadow: -24px 0 #FFF, 24px 0 #FFF;
  }

  100% {
    background: #FFF;
    box-shadow: -24px 0 #FFF, 24px 0 #FF3D00;
  }
}

@-webkit-keyframes shadowRolling {
  0% {
    box-shadow: 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
  }

  12% {
    box-shadow: 100px 0 white, 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
  }

  25% {
    box-shadow: 110px 0 white, 100px 0 white, 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
  }

  36% {
    box-shadow: 120px 0 white, 110px 0 white, 100px 0 white, 0px 0 rgba(255, 255, 255, 0);
  }

  50% {
    box-shadow: 130px 0 white, 120px 0 white, 110px 0 white, 100px 0 white;
  }

  62% {
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 130px 0 white, 120px 0 white, 110px 0 white;
  }

  75% {
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 white, 120px 0 white;
  }

  87% {
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 white;
  }

  100% {
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0);
  }
}

@keyframes shadowRolling {
  0% {
    box-shadow: 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
  }

  12% {
    box-shadow: 100px 0 white, 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
  }

  25% {
    box-shadow: 110px 0 white, 100px 0 white, 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
  }

  36% {
    box-shadow: 120px 0 white, 110px 0 white, 100px 0 white, 0px 0 rgba(255, 255, 255, 0);
  }

  50% {
    box-shadow: 130px 0 white, 120px 0 white, 110px 0 white, 100px 0 white;
  }

  62% {
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 130px 0 white, 120px 0 white, 110px 0 white;
  }

  75% {
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 white, 120px 0 white;
  }

  87% {
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 white;
  }

  100% {
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0);
  }
}

@-webkit-keyframes animloader14 {
  0% {
    transform: scale(0);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes animloader14 {
  0% {
    transform: scale(0);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 0;
  }
}

@-webkit-keyframes scale50 {

  0%,
  100% {
    transform: scale(0);
  }

  50% {
    transform: scale(1);
  }
}

@keyframes scale50 {

  0%,
  100% {
    transform: scale(0);
  }

  50% {
    transform: scale(1);
  }
}

@-webkit-keyframes scaleOut {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes scaleOut {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

@-webkit-keyframes animloader27 {

  0%,
  100% {
    transform: scale(0);
    opacity: 1;
  }

  50% {
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes animloader27 {

  0%,
  100% {
    transform: scale(0);
    opacity: 1;
  }

  50% {
    transform: scale(1);
    opacity: 0;
  }
}

@-webkit-keyframes animloader28 {
  0% {
    box-shadow: -72px 0 #FFF inset;
  }

  100% {
    box-shadow: 48px 0 #FFF inset;
  }
}

@keyframes animloader28 {
  0% {
    box-shadow: -72px 0 #FFF inset;
  }

  100% {
    box-shadow: 48px 0 #FFF inset;
  }
}

@-webkit-keyframes animloader38 {
  50% {
    transform: scale(1) translate(-50%, -50%);
  }
}

@keyframes animloader38 {
  50% {
    transform: scale(1) translate(-50%, -50%);
  }
}

@-webkit-keyframes animloader42 {
  0% {
    box-shadow: -38px -6px, -14px 6px, 14px -6px;
  }

  33% {
    box-shadow: -38px 6px, -14px -6px, 14px 6px;
  }

  66% {
    box-shadow: -38px -6px, -14px 6px, 14px -6px;
  }

  100% {
    box-shadow: -38px 6px, -14px -6px, 14px 6px;
  }
}

@keyframes animloader42 {
  0% {
    box-shadow: -38px -6px, -14px 6px, 14px -6px;
  }

  33% {
    box-shadow: -38px 6px, -14px -6px, 14px 6px;
  }

  66% {
    box-shadow: -38px -6px, -14px 6px, 14px -6px;
  }

  100% {
    box-shadow: -38px 6px, -14px -6px, 14px 6px;
  }
}

@-webkit-keyframes animloader44 {
  0% {
    box-shadow: 14px 0 0 -2px, 38px 0 0 -2px, -14px 0 0 -2px, -38px 0 0 -2px;
  }

  25% {
    box-shadow: 14px 0 0 -2px, 38px 0 0 -2px, -14px 0 0 -2px, -38px 0 0 2px;
  }

  50% {
    box-shadow: 14px 0 0 -2px, 38px 0 0 -2px, -14px 0 0 2px, -38px 0 0 -2px;
  }

  75% {
    box-shadow: 14px 0 0 2px, 38px 0 0 -2px, -14px 0 0 -2px, -38px 0 0 -2px;
  }

  100% {
    box-shadow: 14px 0 0 -2px, 38px 0 0 2px, -14px 0 0 -2px, -38px 0 0 -2px;
  }
}

@keyframes animloader44 {
  0% {
    box-shadow: 14px 0 0 -2px, 38px 0 0 -2px, -14px 0 0 -2px, -38px 0 0 -2px;
  }

  25% {
    box-shadow: 14px 0 0 -2px, 38px 0 0 -2px, -14px 0 0 -2px, -38px 0 0 2px;
  }

  50% {
    box-shadow: 14px 0 0 -2px, 38px 0 0 -2px, -14px 0 0 2px, -38px 0 0 -2px;
  }

  75% {
    box-shadow: 14px 0 0 2px, 38px 0 0 -2px, -14px 0 0 -2px, -38px 0 0 -2px;
  }

  100% {
    box-shadow: 14px 0 0 -2px, 38px 0 0 2px, -14px 0 0 -2px, -38px 0 0 -2px;
  }
}

@-webkit-keyframes animloader45 {
  0% {
    box-shadow: -38px -12px, -14px 0, 14px 0, 38px 0;
  }

  33% {
    box-shadow: -38px 0px, -14px -12px, 14px 0, 38px 0;
  }

  66% {
    box-shadow: -38px 0px, -14px 0, 14px -12px, 38px 0;
  }

  100% {
    box-shadow: -38px 0, -14px 0, 14px 0, 38px -12px;
  }
}

@keyframes animloader45 {
  0% {
    box-shadow: -38px -12px, -14px 0, 14px 0, 38px 0;
  }

  33% {
    box-shadow: -38px 0px, -14px -12px, 14px 0, 38px 0;
  }

  66% {
    box-shadow: -38px 0px, -14px 0, 14px -12px, 38px 0;
  }

  100% {
    box-shadow: -38px 0, -14px 0, 14px 0, 38px -12px;
  }
}

@-webkit-keyframes animloader46 {
  0% {
    background: white;
    box-shadow: 9px -19px 0 -1px rgba(255, 255, 255, 0), 28px -19px 0 -2px rgba(255, 255, 255, 0), 39px -5px 0 -3px rgba(255, 255, 255, 0), 34px 10px 0 -4px rgba(255, 255, 255, 0), 22px 17px 0 -5px rgba(255, 255, 255, 0), 9px 16px 0 -6px rgba(255, 255, 255, 0);
  }

  14% {
    background: rgba(255, 255, 255, 0);
    box-shadow: 9px -19px 0 -1px white, 28px -19px 0 -2px rgba(255, 255, 255, 0), 39px -5px 0 -3px rgba(255, 255, 255, 0), 34px 10px 0 -4px rgba(255, 255, 255, 0), 22px 17px 0 -5px rgba(255, 255, 255, 0), 9px 16px 0 -6px rgba(255, 255, 255, 0);
  }

  28% {
    background: rgba(255, 255, 255, 0);
    box-shadow: 9px -19px 0 -1px rgba(255, 255, 255, 0), 28px -19px 0 -2px white, 39px -5px 0 -3px rgba(255, 255, 255, 0), 34px 10px 0 -4px rgba(255, 255, 255, 0), 22px 17px 0 -5px rgba(255, 255, 255, 0), 9px 16px 0 -6px rgba(255, 255, 255, 0);
  }

  42% {
    background: rgba(255, 255, 255, 0);
    box-shadow: 9px -19px 0 -1px rgba(255, 255, 255, 0), 28px -19px 0 -2px rgba(255, 255, 255, 0), 39px -5px 0 -3px white, 34px 10px 0 -4px rgba(255, 255, 255, 0), 22px 17px 0 -5px rgba(255, 255, 255, 0), 9px 16px 0 -6px rgba(255, 255, 255, 0);
  }

  57% {
    background: rgba(255, 255, 255, 0);
    box-shadow: 9px -19px 0 -1px rgba(255, 255, 255, 0), 28px -19px 0 -2px rgba(255, 255, 255, 0), 39px -5px 0 -3px rgba(255, 255, 255, 0), 34px 10px 0 -4px white, 22px 17px 0 -5px rgba(255, 255, 255, 0), 9px 16px 0 -6px rgba(255, 255, 255, 0);
  }

  71% {
    background: rgba(255, 255, 255, 0);
    box-shadow: 9px -19px 0 -1px rgba(255, 255, 255, 0), 28px -19px 0 -2px rgba(255, 255, 255, 0), 39px -5px 0 -3px rgba(255, 255, 255, 0), 34px 10px 0 -4px rgba(255, 255, 255, 0), 22px 17px 0 -5px white, 9px 16px 0 -6px rgba(255, 255, 255, 0);
  }

  85% {
    background: rgba(255, 255, 255, 0);
    box-shadow: 9px -19px 0 -1px rgba(255, 255, 255, 0), 28px -19px 0 -2px rgba(255, 255, 255, 0), 39px -5px 0 -3px rgba(255, 255, 255, 0), 34px 10px 0 -4px rgba(255, 255, 255, 0), 22px 17px 0 -5px rgba(255, 255, 255, 0), 9px 16px 0 -6px white;
  }

  100% {
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 9px -19px 0 -1px rgba(255, 255, 255, 0), 28px -19px 0 -2px rgba(255, 255, 255, 0), 39px -5px 0 -3px rgba(255, 255, 255, 0), 34px 10px 0 -4px rgba(255, 255, 255, 0), 22px 17px 0 -5px rgba(255, 255, 255, 0), 9px 16px 0 -6px rgba(255, 255, 255, 0);
  }
}

@keyframes animloader46 {
  0% {
    background: white;
    box-shadow: 9px -19px 0 -1px rgba(255, 255, 255, 0), 28px -19px 0 -2px rgba(255, 255, 255, 0), 39px -5px 0 -3px rgba(255, 255, 255, 0), 34px 10px 0 -4px rgba(255, 255, 255, 0), 22px 17px 0 -5px rgba(255, 255, 255, 0), 9px 16px 0 -6px rgba(255, 255, 255, 0);
  }

  14% {
    background: rgba(255, 255, 255, 0);
    box-shadow: 9px -19px 0 -1px white, 28px -19px 0 -2px rgba(255, 255, 255, 0), 39px -5px 0 -3px rgba(255, 255, 255, 0), 34px 10px 0 -4px rgba(255, 255, 255, 0), 22px 17px 0 -5px rgba(255, 255, 255, 0), 9px 16px 0 -6px rgba(255, 255, 255, 0);
  }

  28% {
    background: rgba(255, 255, 255, 0);
    box-shadow: 9px -19px 0 -1px rgba(255, 255, 255, 0), 28px -19px 0 -2px white, 39px -5px 0 -3px rgba(255, 255, 255, 0), 34px 10px 0 -4px rgba(255, 255, 255, 0), 22px 17px 0 -5px rgba(255, 255, 255, 0), 9px 16px 0 -6px rgba(255, 255, 255, 0);
  }

  42% {
    background: rgba(255, 255, 255, 0);
    box-shadow: 9px -19px 0 -1px rgba(255, 255, 255, 0), 28px -19px 0 -2px rgba(255, 255, 255, 0), 39px -5px 0 -3px white, 34px 10px 0 -4px rgba(255, 255, 255, 0), 22px 17px 0 -5px rgba(255, 255, 255, 0), 9px 16px 0 -6px rgba(255, 255, 255, 0);
  }

  57% {
    background: rgba(255, 255, 255, 0);
    box-shadow: 9px -19px 0 -1px rgba(255, 255, 255, 0), 28px -19px 0 -2px rgba(255, 255, 255, 0), 39px -5px 0 -3px rgba(255, 255, 255, 0), 34px 10px 0 -4px white, 22px 17px 0 -5px rgba(255, 255, 255, 0), 9px 16px 0 -6px rgba(255, 255, 255, 0);
  }

  71% {
    background: rgba(255, 255, 255, 0);
    box-shadow: 9px -19px 0 -1px rgba(255, 255, 255, 0), 28px -19px 0 -2px rgba(255, 255, 255, 0), 39px -5px 0 -3px rgba(255, 255, 255, 0), 34px 10px 0 -4px rgba(255, 255, 255, 0), 22px 17px 0 -5px white, 9px 16px 0 -6px rgba(255, 255, 255, 0);
  }

  85% {
    background: rgba(255, 255, 255, 0);
    box-shadow: 9px -19px 0 -1px rgba(255, 255, 255, 0), 28px -19px 0 -2px rgba(255, 255, 255, 0), 39px -5px 0 -3px rgba(255, 255, 255, 0), 34px 10px 0 -4px rgba(255, 255, 255, 0), 22px 17px 0 -5px rgba(255, 255, 255, 0), 9px 16px 0 -6px white;
  }

  100% {
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 9px -19px 0 -1px rgba(255, 255, 255, 0), 28px -19px 0 -2px rgba(255, 255, 255, 0), 39px -5px 0 -3px rgba(255, 255, 255, 0), 34px 10px 0 -4px rgba(255, 255, 255, 0), 22px 17px 0 -5px rgba(255, 255, 255, 0), 9px 16px 0 -6px rgba(255, 255, 255, 0);
  }
}

@-webkit-keyframes animloader34 {
  0% {
    border-color: rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.75);
  }

  33% {
    border-color: rgba(255, 255, 255, 0.75) rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.35);
  }

  66% {
    border-color: rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.75) rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.25);
  }

  100% {
    border-color: rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.75) rgba(255, 255, 255, 0.15);
  }
}

@keyframes animloader34 {
  0% {
    border-color: rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.75);
  }

  33% {
    border-color: rgba(255, 255, 255, 0.75) rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.35);
  }

  66% {
    border-color: rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.75) rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.25);
  }

  100% {
    border-color: rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.75) rgba(255, 255, 255, 0.15);
  }
}

@-webkit-keyframes animloader51 {
  0% {
    border-color: white rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
  }

  33% {
    border-color: white white rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
  }

  66% {
    border-color: white white white rgba(255, 255, 255, 0);
  }

  100% {
    border-color: white white white white;
  }
}

@keyframes animloader51 {
  0% {
    border-color: white rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
  }

  33% {
    border-color: white white rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
  }

  66% {
    border-color: white white white rgba(255, 255, 255, 0);
  }

  100% {
    border-color: white white white white;
  }
}

@-webkit-keyframes animloader57 {
  0% {
    box-shadow: 0 0, 0 0, 0 0;
  }

  33% {
    box-shadow: 24px 0px, 24px 0px, 24px 0px;
  }

  66% {
    box-shadow: 24px 24px, 24px 24px, 24px 0px;
  }

  100% {
    box-shadow: 0px 24px, 24px 24px, 24px 0px;
  }
}

@keyframes animloader57 {
  0% {
    box-shadow: 0 0, 0 0, 0 0;
  }

  33% {
    box-shadow: 24px 0px, 24px 0px, 24px 0px;
  }

  66% {
    box-shadow: 24px 24px, 24px 24px, 24px 0px;
  }

  100% {
    box-shadow: 0px 24px, 24px 24px, 24px 0px;
  }
}

@-webkit-keyframes animloader58 {

  0%,
  32% {
    box-shadow: 0 24px white, 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0);
  }

  33%,
  65% {
    box-shadow: 0 24px white, 24px 24px white, 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0);
  }

  66%,
  99% {
    box-shadow: 0 24px white, 24px 24px white, 24px 48px white, 0px 48px rgba(255, 255, 255, 0);
  }

  100% {
    box-shadow: 0 24px white, 24px 24px white, 24px 48px white, 0px 48px white;
  }
}

@keyframes animloader58 {

  0%,
  32% {
    box-shadow: 0 24px white, 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0);
  }

  33%,
  65% {
    box-shadow: 0 24px white, 24px 24px white, 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0);
  }

  66%,
  99% {
    box-shadow: 0 24px white, 24px 24px white, 24px 48px white, 0px 48px rgba(255, 255, 255, 0);
  }

  100% {
    box-shadow: 0 24px white, 24px 24px white, 24px 48px white, 0px 48px white;
  }
}

@-webkit-keyframes animloader58m {
  0% {
    transform: translate(0, 0) rotateX(0) rotateY(0);
  }

  33% {
    transform: translate(100%, 0) rotateX(0) rotateY(180deg);
  }

  66% {
    transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg);
  }

  100% {
    transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg);
  }
}

@keyframes animloader58m {
  0% {
    transform: translate(0, 0) rotateX(0) rotateY(0);
  }

  33% {
    transform: translate(100%, 0) rotateX(0) rotateY(180deg);
  }

  66% {
    transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg);
  }

  100% {
    transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg);
  }
}

@-webkit-keyframes flipX {
  0% {
    transform: perspective(200px) rotateX(0deg) rotateY(0deg);
  }

  50% {
    transform: perspective(200px) rotateX(-180deg) rotateY(0deg);
  }

  100% {
    transform: perspective(200px) rotateX(-180deg) rotateY(-180deg);
  }
}

@keyframes flipX {
  0% {
    transform: perspective(200px) rotateX(0deg) rotateY(0deg);
  }

  50% {
    transform: perspective(200px) rotateX(-180deg) rotateY(0deg);
  }

  100% {
    transform: perspective(200px) rotateX(-180deg) rotateY(-180deg);
  }
}

@-webkit-keyframes fill {
  0% {
    box-shadow: 0 0 inset;
  }

  100% {
    box-shadow: 0 -48px inset;
  }
}

@keyframes fill {
  0% {
    box-shadow: 0 0 inset;
  }

  100% {
    box-shadow: 0 -48px inset;
  }
}

@-webkit-keyframes fillX {
  0% {
    box-shadow: 0 0 inset;
  }

  100% {
    box-shadow: 48px 0 inset;
  }
}

@keyframes fillX {
  0% {
    box-shadow: 0 0 inset;
  }

  100% {
    box-shadow: 48px 0 inset;
  }
}

@-webkit-keyframes animloader56 {
  0% {
    transform: translate(0, 0) rotateX(0) rotateY(0);
  }

  25% {
    transform: translate(100%, 0) rotateX(0) rotateY(180deg);
  }

  50% {
    transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg);
  }

  75% {
    transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg);
  }

  100% {
    transform: translate(0, 0) rotateX(0) rotateY(360deg);
  }
}

@keyframes animloader56 {
  0% {
    transform: translate(0, 0) rotateX(0) rotateY(0);
  }

  25% {
    transform: translate(100%, 0) rotateX(0) rotateY(180deg);
  }

  50% {
    transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg);
  }

  75% {
    transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg);
  }

  100% {
    transform: translate(0, 0) rotateX(0) rotateY(360deg);
  }
}

@-webkit-keyframes animloader59 {
  0% {
    box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0);
  }

  12% {
    box-shadow: 0 24px white, 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0);
  }

  25% {
    box-shadow: 0 24px white, 24px 24px white, 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0);
  }

  37% {
    box-shadow: 0 24px white, 24px 24px white, 24px 48px white, 0px 48px rgba(255, 255, 255, 0);
  }

  50% {
    box-shadow: 0 24px white, 24px 24px white, 24px 48px white, 0px 48px white;
  }

  62% {
    box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px white, 24px 48px white, 0px 48px white;
  }

  75% {
    box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px rgba(255, 255, 255, 0), 24px 48px white, 0px 48px white;
  }

  87% {
    box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px white;
  }

  100% {
    box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0);
  }
}

@keyframes animloader59 {
  0% {
    box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0);
  }

  12% {
    box-shadow: 0 24px white, 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0);
  }

  25% {
    box-shadow: 0 24px white, 24px 24px white, 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0);
  }

  37% {
    box-shadow: 0 24px white, 24px 24px white, 24px 48px white, 0px 48px rgba(255, 255, 255, 0);
  }

  50% {
    box-shadow: 0 24px white, 24px 24px white, 24px 48px white, 0px 48px white;
  }

  62% {
    box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px white, 24px 48px white, 0px 48px white;
  }

  75% {
    box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px rgba(255, 255, 255, 0), 24px 48px white, 0px 48px white;
  }

  87% {
    box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px white;
  }

  100% {
    box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0);
  }
}

@-webkit-keyframes animloader60 {
  0% {
    top: 0;
    color: white;
  }

  50% {
    top: 30px;
    color: rgba(255, 255, 255, 0.2);
  }

  100% {
    top: 0;
    color: white;
  }
}

@keyframes animloader60 {
  0% {
    top: 0;
    color: white;
  }

  50% {
    top: 30px;
    color: rgba(255, 255, 255, 0.2);
  }

  100% {
    top: 0;
    color: white;
  }
}

@-webkit-keyframes animloader61 {
  0% {
    height: 48px;
  }

  100% {
    height: 4.8px;
  }
}

@keyframes animloader61 {
  0% {
    height: 48px;
  }

  100% {
    height: 4.8px;
  }
}

@-webkit-keyframes animloader61m {
  0% {
    height: 40px;
    transform: translateY(0);
  }

  100% {
    height: 10px;
    transform: translateY(30px);
  }
}

@keyframes animloader61m {
  0% {
    height: 40px;
    transform: translateY(0);
  }

  100% {
    height: 10px;
    transform: translateY(30px);
  }
}

@-webkit-keyframes animloader63 {
  0% {
    box-shadow: 20px 0 rgba(255, 255, 255, 0.25), 40px 0 white, 60px 0 white;
  }

  50% {
    box-shadow: 20px 0 white, 40px 0 rgba(255, 255, 255, 0.25), 60px 0 white;
  }

  100% {
    box-shadow: 20px 0 white, 40px 0 white, 60px 0 rgba(255, 255, 255, 0.25);
  }
}

@keyframes animloader63 {
  0% {
    box-shadow: 20px 0 rgba(255, 255, 255, 0.25), 40px 0 white, 60px 0 white;
  }

  50% {
    box-shadow: 20px 0 white, 40px 0 rgba(255, 255, 255, 0.25), 60px 0 white;
  }

  100% {
    box-shadow: 20px 0 white, 40px 0 white, 60px 0 rgba(255, 255, 255, 0.25);
  }
}

@-webkit-keyframes animloader64 {
  0% {
    box-shadow: 20px -10px, 40px 10px, 60px 0px;
  }

  25% {
    box-shadow: 20px 0px, 40px 0px, 60px 10px;
  }

  50% {
    box-shadow: 20px 10px, 40px -10px, 60px 0px;
  }

  75% {
    box-shadow: 20px 0px, 40px 0px, 60px -10px;
  }

  100% {
    box-shadow: 20px -10px, 40px 10px, 60px 0px;
  }
}

@keyframes animloader64 {
  0% {
    box-shadow: 20px -10px, 40px 10px, 60px 0px;
  }

  25% {
    box-shadow: 20px 0px, 40px 0px, 60px 10px;
  }

  50% {
    box-shadow: 20px 10px, 40px -10px, 60px 0px;
  }

  75% {
    box-shadow: 20px 0px, 40px 0px, 60px -10px;
  }

  100% {
    box-shadow: 20px -10px, 40px 10px, 60px 0px;
  }
}

@-webkit-keyframes animloader65 {
  0% {
    box-shadow: -10px 20px, 10px 35px, 0px 50px;
  }

  25% {
    box-shadow: 0px 20px, 0px 35px, 10px 50px;
  }

  50% {
    box-shadow: 10px 20px, -10px 35px, 0px 50px;
  }

  75% {
    box-shadow: 0px 20px, 0px 35px, -10px 50px;
  }

  100% {
    box-shadow: -10px 20px, 10px 35px, 0px 50px;
  }
}

@keyframes animloader65 {
  0% {
    box-shadow: -10px 20px, 10px 35px, 0px 50px;
  }

  25% {
    box-shadow: 0px 20px, 0px 35px, 10px 50px;
  }

  50% {
    box-shadow: 10px 20px, -10px 35px, 0px 50px;
  }

  75% {
    box-shadow: 0px 20px, 0px 35px, -10px 50px;
  }

  100% {
    box-shadow: -10px 20px, 10px 35px, 0px 50px;
  }
}

@-webkit-keyframes animloader66 {
  0% {
    width: 4.8px;
  }

  100% {
    width: 48px;
  }
}

@keyframes animloader66 {
  0% {
    width: 4.8px;
  }

  100% {
    width: 48px;
  }
}

@-webkit-keyframes animloader68 {
  0% {
    box-shadow: 20px 0 rgba(255, 255, 255, 0), 40px 0 rgba(255, 255, 255, 0), 60px 0 rgba(255, 255, 255, 0), 80px 0 rgba(255, 255, 255, 0), 100px 0 rgba(255, 255, 255, 0);
  }

  20% {
    box-shadow: 20px 0 white, 40px 0 rgba(255, 255, 255, 0), 60px 0 rgba(255, 255, 255, 0), 80px 0 rgba(255, 255, 255, 0), 100px 0 rgba(255, 255, 255, 0);
  }

  40% {
    box-shadow: 20px 0 white, 40px 0 white, 60px 0 rgba(255, 255, 255, 0), 80px 0 rgba(255, 255, 255, 0), 100px 0 rgba(255, 255, 255, 0);
  }

  60% {
    box-shadow: 20px 0 white, 40px 0 white, 60px 0 white, 80px 0 rgba(255, 255, 255, 0), 100px 0 rgba(255, 255, 255, 0);
  }

  80% {
    box-shadow: 20px 0 white, 40px 0 white, 60px 0 white, 80px 0 white, 100px 0 rgba(255, 255, 255, 0);
  }

  100% {
    box-shadow: 20px 0 white, 40px 0 white, 60px 0 white, 80px 0 white, 100px 0 white;
  }
}

@keyframes animloader68 {
  0% {
    box-shadow: 20px 0 rgba(255, 255, 255, 0), 40px 0 rgba(255, 255, 255, 0), 60px 0 rgba(255, 255, 255, 0), 80px 0 rgba(255, 255, 255, 0), 100px 0 rgba(255, 255, 255, 0);
  }

  20% {
    box-shadow: 20px 0 white, 40px 0 rgba(255, 255, 255, 0), 60px 0 rgba(255, 255, 255, 0), 80px 0 rgba(255, 255, 255, 0), 100px 0 rgba(255, 255, 255, 0);
  }

  40% {
    box-shadow: 20px 0 white, 40px 0 white, 60px 0 rgba(255, 255, 255, 0), 80px 0 rgba(255, 255, 255, 0), 100px 0 rgba(255, 255, 255, 0);
  }

  60% {
    box-shadow: 20px 0 white, 40px 0 white, 60px 0 white, 80px 0 rgba(255, 255, 255, 0), 100px 0 rgba(255, 255, 255, 0);
  }

  80% {
    box-shadow: 20px 0 white, 40px 0 white, 60px 0 white, 80px 0 white, 100px 0 rgba(255, 255, 255, 0);
  }

  100% {
    box-shadow: 20px 0 white, 40px 0 white, 60px 0 white, 80px 0 white, 100px 0 white;
  }
}

@-webkit-keyframes animloader69 {
  0% {
    width: 20px;
  }

  100% {
    width: 48px;
  }
}

@keyframes animloader69 {
  0% {
    width: 20px;
  }

  100% {
    width: 48px;
  }
}

@-webkit-keyframes animloader71 {
  0% {
    left: 0;
    transform: translateX(-100%);
  }

  100% {
    left: 100%;
    transform: translateX(0%);
  }
}

@keyframes animloader71 {
  0% {
    left: 0;
    transform: translateX(-100%);
  }

  100% {
    left: 100%;
    transform: translateX(0%);
  }
}

@-webkit-keyframes animloader89 {
  0% {
    box-shadow: 11px 0 rgba(255, 255, 255, 0), 22px 0 rgba(255, 255, 255, 0), 33px 0 rgba(255, 255, 255, 0), 44px 0 rgba(255, 255, 255, 0);
  }

  25% {
    box-shadow: 11px 0 white, 22px 0 rgba(255, 255, 255, 0), 33px 0 rgba(255, 255, 255, 0), 44px 0 rgba(255, 255, 255, 0);
  }

  50% {
    box-shadow: 11px 0 white, 22px 0 white, 33px 0 rgba(255, 255, 255, 0), 44px 0 rgba(255, 255, 255, 0);
  }

  75% {
    box-shadow: 11px 0 white, 22px 0 white, 33px 0 white, 44px 0 rgba(255, 255, 255, 0);
  }

  100% {
    box-shadow: 11px 0 white, 22px 0 white, 33px 0 white, 44px 0 white;
  }
}

@keyframes animloader89 {
  0% {
    box-shadow: 11px 0 rgba(255, 255, 255, 0), 22px 0 rgba(255, 255, 255, 0), 33px 0 rgba(255, 255, 255, 0), 44px 0 rgba(255, 255, 255, 0);
  }

  25% {
    box-shadow: 11px 0 white, 22px 0 rgba(255, 255, 255, 0), 33px 0 rgba(255, 255, 255, 0), 44px 0 rgba(255, 255, 255, 0);
  }

  50% {
    box-shadow: 11px 0 white, 22px 0 white, 33px 0 rgba(255, 255, 255, 0), 44px 0 rgba(255, 255, 255, 0);
  }

  75% {
    box-shadow: 11px 0 white, 22px 0 white, 33px 0 white, 44px 0 rgba(255, 255, 255, 0);
  }

  100% {
    box-shadow: 11px 0 white, 22px 0 white, 33px 0 white, 44px 0 white;
  }
}

@-webkit-keyframes animloader91 {
  0% {
    box-shadow: 0 0 inset;
  }

  100% {
    box-shadow: 0 -70px inset;
  }
}

@keyframes animloader91 {
  0% {
    box-shadow: 0 0 inset;
  }

  100% {
    box-shadow: 0 -70px inset;
  }
}

@-webkit-keyframes animloader92 {
  0% {
    box-shadow: 2px 0px rgba(255, 255, 255, 0), 12px 0px rgba(255, 255, 255, 0.3), 20px 0px rgba(255, 255, 255, 0);
  }

  50% {
    box-shadow: 2px -5px rgba(255, 255, 255, 0.5), 12px -3px rgba(255, 255, 255, 0.5), 20px -2px rgba(255, 255, 255, 0.6);
  }

  100% {
    box-shadow: 2px -8px rgba(255, 255, 255, 0), 12px -5px rgba(255, 255, 255, 0), 20px -5px rgba(255, 255, 255, 0);
  }
}

@keyframes animloader92 {
  0% {
    box-shadow: 2px 0px rgba(255, 255, 255, 0), 12px 0px rgba(255, 255, 255, 0.3), 20px 0px rgba(255, 255, 255, 0);
  }

  50% {
    box-shadow: 2px -5px rgba(255, 255, 255, 0.5), 12px -3px rgba(255, 255, 255, 0.5), 20px -2px rgba(255, 255, 255, 0.6);
  }

  100% {
    box-shadow: 2px -8px rgba(255, 255, 255, 0), 12px -5px rgba(255, 255, 255, 0), 20px -5px rgba(255, 255, 255, 0);
  }
}

@-webkit-keyframes animloader93 {
  0% {
    transform: rotate(-70deg);
  }

  10% {
    transform: rotate(-40deg);
  }

  20%,
  45%,
  35% {
    transform: rotate(-10deg);
  }

  40%,
  30% {
    transform: rotate(-30deg);
  }

  50%,
  60% {
    transform: rotate(20deg);
  }

  55%,
  65%,
  75% {
    transform: rotate(40deg);
  }

  70% {
    transform: rotate(45deg);
  }

  85%,
  90% {
    transform: rotate(50deg);
  }

  95% {
    transform: rotate(75deg);
  }

  100%,
  93% {
    transform: rotate(70deg);
  }
}

@keyframes animloader93 {
  0% {
    transform: rotate(-70deg);
  }

  10% {
    transform: rotate(-40deg);
  }

  20%,
  45%,
  35% {
    transform: rotate(-10deg);
  }

  40%,
  30% {
    transform: rotate(-30deg);
  }

  50%,
  60% {
    transform: rotate(20deg);
  }

  55%,
  65%,
  75% {
    transform: rotate(40deg);
  }

  70% {
    transform: rotate(45deg);
  }

  85%,
  90% {
    transform: rotate(50deg);
  }

  95% {
    transform: rotate(75deg);
  }

  100%,
  93% {
    transform: rotate(70deg);
  }
}

@-webkit-keyframes animloader94 {
  0% {
    transform: translate(-10px, -10px);
  }

  25% {
    transform: translate(-10px, 10px);
  }

  50% {
    transform: translate(10px, 10px);
  }

  75% {
    transform: translate(10px, -10px);
  }

  100% {
    transform: translate(-10px, -10px);
  }
}

@keyframes animloader94 {
  0% {
    transform: translate(-10px, -10px);
  }

  25% {
    transform: translate(-10px, 10px);
  }

  50% {
    transform: translate(10px, 10px);
  }

  75% {
    transform: translate(10px, -10px);
  }

  100% {
    transform: translate(-10px, -10px);
  }
}

@-webkit-keyframes animloader98 {
  0% {
    background-position: 0px 80px;
  }

  100% {
    background-position: 0px 0px;
  }
}

@keyframes animloader98 {
  0% {
    background-position: 0px 80px;
  }

  100% {
    background-position: 0px 0px;
  }
}

@-webkit-keyframes animloader98s {
  0% {
    box-shadow: 4px -10px rgba(255, 255, 255, 0), 6px 0px rgba(255, 255, 255, 0), 8px -15px rgba(255, 255, 255, 0), 12px 0px rgba(255, 255, 255, 0);
  }

  20% {
    box-shadow: 4px -20px rgba(255, 255, 255, 0), 8px -10px rgba(255, 255, 255, 0), 10px -30px rgba(255, 255, 255, 0.5), 15px -5px rgba(255, 255, 255, 0);
  }

  40% {
    box-shadow: 2px -40px rgba(255, 255, 255, 0.5), 8px -30px rgba(255, 255, 255, 0.4), 8px -60px rgba(255, 255, 255, 0.5), 12px -15px rgba(255, 255, 255, 0.5);
  }

  60% {
    box-shadow: 4px -60px rgba(255, 255, 255, 0.5), 6px -50px rgba(255, 255, 255, 0.4), 10px -90px rgba(255, 255, 255, 0.5), 15px -25px rgba(255, 255, 255, 0.5);
  }

  80% {
    box-shadow: 2px -80px rgba(255, 255, 255, 0.5), 4px -70px rgba(255, 255, 255, 0.4), 8px -120px rgba(255, 255, 255, 0), 12px -35px rgba(255, 255, 255, 0.5);
  }

  100% {
    box-shadow: 4px -100px rgba(255, 255, 255, 0), 8px -90px rgba(255, 255, 255, 0), 10px -120px rgba(255, 255, 255, 0), 15px -45px rgba(255, 255, 255, 0);
  }
}

@keyframes animloader98s {
  0% {
    box-shadow: 4px -10px rgba(255, 255, 255, 0), 6px 0px rgba(255, 255, 255, 0), 8px -15px rgba(255, 255, 255, 0), 12px 0px rgba(255, 255, 255, 0);
  }

  20% {
    box-shadow: 4px -20px rgba(255, 255, 255, 0), 8px -10px rgba(255, 255, 255, 0), 10px -30px rgba(255, 255, 255, 0.5), 15px -5px rgba(255, 255, 255, 0);
  }

  40% {
    box-shadow: 2px -40px rgba(255, 255, 255, 0.5), 8px -30px rgba(255, 255, 255, 0.4), 8px -60px rgba(255, 255, 255, 0.5), 12px -15px rgba(255, 255, 255, 0.5);
  }

  60% {
    box-shadow: 4px -60px rgba(255, 255, 255, 0.5), 6px -50px rgba(255, 255, 255, 0.4), 10px -90px rgba(255, 255, 255, 0.5), 15px -25px rgba(255, 255, 255, 0.5);
  }

  80% {
    box-shadow: 2px -80px rgba(255, 255, 255, 0.5), 4px -70px rgba(255, 255, 255, 0.4), 8px -120px rgba(255, 255, 255, 0), 12px -35px rgba(255, 255, 255, 0.5);
  }

  100% {
    box-shadow: 4px -100px rgba(255, 255, 255, 0), 8px -90px rgba(255, 255, 255, 0), 10px -120px rgba(255, 255, 255, 0), 15px -45px rgba(255, 255, 255, 0);
  }
}

@-webkit-keyframes animloader99 {
  0% {
    box-shadow: 0px 0px inset;
  }

  100% {
    box-shadow: 0px -80px inset;
  }
}

@keyframes animloader99 {
  0% {
    box-shadow: 0px 0px inset;
  }

  100% {
    box-shadow: 0px -80px inset;
  }
}

@-webkit-keyframes animloader100 {
  0% {
    box-shadow: 25px 0 white, 50px 0 white, 75px 0 white, 100px 0 white, 125px 0 white, 150px 0 white, 25px 0 white, 50px 0 white, 75px 0 white, 100px 0 white, 125px 0 white, 150px 0 white;
  }

  50% {
    box-shadow: 25px 20px white, 50px 60px rgba(255, 255, 255, 0), 75px 30px rgba(255, 255, 255, 0), 100px 70px rgba(255, 255, 255, 0), 125px 40px white, 150px 60px rgba(255, 255, 255, 0), 25px 20px white, 50px 30px white, 75px 10px white, 100px 30px white, 125px 30px rgba(255, 255, 255, 0), 150px 30px rgba(255, 255, 255, 0);
  }

  100% {
    box-shadow: 25px 60px rgba(255, 255, 255, 0), 50px 60px rgba(255, 255, 255, 0), 75px 50px rgba(255, 255, 255, 0), 100px 70px rgba(255, 255, 255, 0), 125px 70px rgba(255, 255, 255, 0), 150px 60px rgba(255, 255, 255, 0), 25px 80px rgba(255, 255, 255, 0), 50px 80px rgba(255, 255, 255, 0), 75px 70px rgba(255, 255, 255, 0), 100px 60px rgba(255, 255, 255, 0), 125px 30px rgba(255, 255, 255, 0), 150px 30px rgba(255, 255, 255, 0);
  }
}

@keyframes animloader100 {
  0% {
    box-shadow: 25px 0 white, 50px 0 white, 75px 0 white, 100px 0 white, 125px 0 white, 150px 0 white, 25px 0 white, 50px 0 white, 75px 0 white, 100px 0 white, 125px 0 white, 150px 0 white;
  }

  50% {
    box-shadow: 25px 20px white, 50px 60px rgba(255, 255, 255, 0), 75px 30px rgba(255, 255, 255, 0), 100px 70px rgba(255, 255, 255, 0), 125px 40px white, 150px 60px rgba(255, 255, 255, 0), 25px 20px white, 50px 30px white, 75px 10px white, 100px 30px white, 125px 30px rgba(255, 255, 255, 0), 150px 30px rgba(255, 255, 255, 0);
  }

  100% {
    box-shadow: 25px 60px rgba(255, 255, 255, 0), 50px 60px rgba(255, 255, 255, 0), 75px 50px rgba(255, 255, 255, 0), 100px 70px rgba(255, 255, 255, 0), 125px 70px rgba(255, 255, 255, 0), 150px 60px rgba(255, 255, 255, 0), 25px 80px rgba(255, 255, 255, 0), 50px 80px rgba(255, 255, 255, 0), 75px 70px rgba(255, 255, 255, 0), 100px 60px rgba(255, 255, 255, 0), 125px 30px rgba(255, 255, 255, 0), 150px 30px rgba(255, 255, 255, 0);
  }
}

@-webkit-keyframes animloader105 {
  0% {
    height: 64px;
  }

  90%,
  100% {
    height: 0px;
  }
}

@keyframes animloader105 {
  0% {
    height: 64px;
  }

  90%,
  100% {
    height: 0px;
  }
}

@-webkit-keyframes animloader106back {

  0%,
  30%,
  70% {
    transform: translateY(0px);
  }

  20%,
  40%,
  100% {
    transform: translateY(-5px);
  }
}

@keyframes animloader106back {

  0%,
  30%,
  70% {
    transform: translateY(0px);
  }

  20%,
  40%,
  100% {
    transform: translateY(-5px);
  }
}

@-webkit-keyframes animloader106 {
  0% {
    box-shadow: 4px 4px 12px 2px rgba(255, 61, 0, 0.75);
    width: 34px;
    height: 34px;
    background-position: -44px -44px;
    background-size: 100px 100px;
  }

  100% {
    box-shadow: 2px 2px 8px 0px rgba(255, 61, 0, 0.5);
    width: 30px;
    height: 28px;
    background-position: -36px -36px;
    background-size: 80px 80px;
  }
}

@keyframes animloader106 {
  0% {
    box-shadow: 4px 4px 12px 2px rgba(255, 61, 0, 0.75);
    width: 34px;
    height: 34px;
    background-position: -44px -44px;
    background-size: 100px 100px;
  }

  100% {
    box-shadow: 2px 2px 8px 0px rgba(255, 61, 0, 0.5);
    width: 30px;
    height: 28px;
    background-position: -36px -36px;
    background-size: 80px 80px;
  }
}

@-webkit-keyframes animloader108 {
  0% {
    box-shadow: 0 0 0 -2px, 0 0 0 -2px, 0 0 0 -5px, 0 0 0 -5px;
  }

  20% {
    box-shadow: 40px -1px 0 -2px, 0 0 0 -2px, 40px -1px 0 -5px, 0 0 0 -5px;
  }

  40% {
    box-shadow: 40px -1px 0 -2px, -40px -1px 0 -2px, 40px -1px 0 -5px, -40px -1px 0 -5px;
  }

  60% {
    box-shadow: 40px -1px 0 -2px, -40px -1px 0 -2px, 23px -29px 0 -5px, -40px -1px 0 -5px;
  }

  80%,
  95% {
    box-shadow: 40px -1px 0 -2px, -40px -1px 0 -2px, 23px -29px 0 -5px, -23px -29px 0 -5px;
  }

  100% {
    box-shadow: 40px -1px 0 -2px rgba(255, 255, 255, 0), -40px -1px 0 -2px rgba(255, 255, 255, 0), 23px -29px 0 -5px rgba(255, 255, 255, 0), -23px -29px 0 -5px rgba(255, 255, 255, 0);
  }
}

@keyframes animloader108 {
  0% {
    box-shadow: 0 0 0 -2px, 0 0 0 -2px, 0 0 0 -5px, 0 0 0 -5px;
  }

  20% {
    box-shadow: 40px -1px 0 -2px, 0 0 0 -2px, 40px -1px 0 -5px, 0 0 0 -5px;
  }

  40% {
    box-shadow: 40px -1px 0 -2px, -40px -1px 0 -2px, 40px -1px 0 -5px, -40px -1px 0 -5px;
  }

  60% {
    box-shadow: 40px -1px 0 -2px, -40px -1px 0 -2px, 23px -29px 0 -5px, -40px -1px 0 -5px;
  }

  80%,
  95% {
    box-shadow: 40px -1px 0 -2px, -40px -1px 0 -2px, 23px -29px 0 -5px, -23px -29px 0 -5px;
  }

  100% {
    box-shadow: 40px -1px 0 -2px rgba(255, 255, 255, 0), -40px -1px 0 -2px rgba(255, 255, 255, 0), 23px -29px 0 -5px rgba(255, 255, 255, 0), -23px -29px 0 -5px rgba(255, 255, 255, 0);
  }
}

@-webkit-keyframes animloader108s {
  0% {
    box-shadow: 0 0 0 -2px, 0 0 0 -2px, 0 0 0 -5px, 0 0 0 -5px;
  }

  20% {
    box-shadow: 40px 2px 0 -2px, 0 0 0 -2px, 40px 2px 0 -5px, 0 0 0 -5px;
  }

  40% {
    box-shadow: 40px 2px 0 -2px, -40px 2px 0 -2px, 40px 2px 0 -5px, -40px 2px 0 -5px;
  }

  60% {
    box-shadow: 40px 2px 0 -2px, -40px 2px 0 -2px, 23px -23px 0 -5px, -40px 2px 0 -5px;
  }

  80%,
  95% {
    box-shadow: 40px 2px 0 -2px, -40px 2px 0 -2px, 23px -23px 0 -5px, -23px -23px 0 -5px;
  }

  100% {
    box-shadow: 40px 2px 0 -2px rgba(255, 255, 255, 0), -40px 2px 0 -2px rgba(255, 255, 255, 0), 23px -23px 0 -5px rgba(255, 255, 255, 0), -23px -23px 0 -5px rgba(255, 255, 255, 0);
  }
}

@keyframes animloader108s {
  0% {
    box-shadow: 0 0 0 -2px, 0 0 0 -2px, 0 0 0 -5px, 0 0 0 -5px;
  }

  20% {
    box-shadow: 40px 2px 0 -2px, 0 0 0 -2px, 40px 2px 0 -5px, 0 0 0 -5px;
  }

  40% {
    box-shadow: 40px 2px 0 -2px, -40px 2px 0 -2px, 40px 2px 0 -5px, -40px 2px 0 -5px;
  }

  60% {
    box-shadow: 40px 2px 0 -2px, -40px 2px 0 -2px, 23px -23px 0 -5px, -40px 2px 0 -5px;
  }

  80%,
  95% {
    box-shadow: 40px 2px 0 -2px, -40px 2px 0 -2px, 23px -23px 0 -5px, -23px -23px 0 -5px;
  }

  100% {
    box-shadow: 40px 2px 0 -2px rgba(255, 255, 255, 0), -40px 2px 0 -2px rgba(255, 255, 255, 0), 23px -23px 0 -5px rgba(255, 255, 255, 0), -23px -23px 0 -5px rgba(255, 255, 255, 0);
  }
}

@-webkit-keyframes animloader115 {
  0% {
    box-shadow: 10px 0 rgba(255, 255, 255, 0), 20px 0 rgba(255, 255, 255, 0);
  }

  50% {
    box-shadow: 10px 0 white, 20px 0 rgba(255, 255, 255, 0);
  }

  100% {
    box-shadow: 10px 0 white, 20px 0 white;
  }
}

@keyframes animloader115 {
  0% {
    box-shadow: 10px 0 rgba(255, 255, 255, 0), 20px 0 rgba(255, 255, 255, 0);
  }

  50% {
    box-shadow: 10px 0 white, 20px 0 rgba(255, 255, 255, 0);
  }

  100% {
    box-shadow: 10px 0 white, 20px 0 white;
  }
}

@-webkit-keyframes animloader116 {
  0% {
    top: 8px;
    transform: rotate(0deg) scale(1);
  }

  100% {
    top: 0px;
    transform: rotate(180deg) scale(1.5);
  }
}

@keyframes animloader116 {
  0% {
    top: 8px;
    transform: rotate(0deg) scale(1);
  }

  100% {
    top: 0px;
    transform: rotate(180deg) scale(1.5);
  }
}

@-webkit-keyframes animloader117 {
  0% {
    box-shadow: 0 0 inset;
  }

  100% {
    box-shadow: 0 -28px inset;
  }
}

@keyframes animloader117 {
  0% {
    box-shadow: 0 0 inset;
  }

  100% {
    box-shadow: 0 -28px inset;
  }
}

@-webkit-keyframes animMarker {
  0% {
    transform: rotate(45deg) translate(5px, 5px);
  }

  100% {
    transform: rotate(45deg) translate(-5px, -5px);
  }
}

@keyframes animMarker {
  0% {
    transform: rotate(45deg) translate(5px, 5px);
  }

  100% {
    transform: rotate(45deg) translate(-5px, -5px);
  }
}

@-webkit-keyframes animShadow {
  0% {
    transform: scale(0.5);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes animShadow {
  0% {
    transform: scale(0.5);
  }

  100% {
    transform: scale(1);
  }
}

@-webkit-keyframes bump {
  0% {
    transform: translate(-50%, 5px);
  }

  100% {
    transform: translate(-50%, -5px);
  }
}

@keyframes bump {
  0% {
    transform: translate(-50%, 5px);
  }

  100% {
    transform: translate(-50%, -5px);
  }
}

@-webkit-keyframes animPend {
  0% {
    transform: rotate(22deg);
  }

  50% {
    transform: rotate(0deg);
  }
}

@keyframes animPend {
  0% {
    transform: rotate(22deg);
  }

  50% {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes animPend2 {

  0%,
  55% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-22deg);
  }
}

@keyframes animPend2 {

  0%,
  55% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-22deg);
  }
}

@-webkit-keyframes animloader85 {

  0%,
  100% {
    transform: translateX(-150%);
  }

  50% {
    transform: translateX(150%);
  }
}

@keyframes animloader85 {

  0%,
  100% {
    transform: translateX(-150%);
  }

  50% {
    transform: translateX(150%);
  }
}

@-webkit-keyframes barStripe {
  0% {
    background-position: 1em 0;
  }

  100% {
    background-position: 0 0;
  }
}

@keyframes barStripe {
  0% {
    background-position: 1em 0;
  }

  100% {
    background-position: 0 0;
  }
}

@-webkit-keyframes raceBoard {
  0% {
    background-position: 0 0, 16px 16px;
  }

  100% {
    background-position: 32px 0px, 48px 16px;
  }
}

@keyframes raceBoard {
  0% {
    background-position: 0 0, 16px 16px;
  }

  100% {
    background-position: 32px 0px, 48px 16px;
  }
}

@-webkit-keyframes fadePush {
  0% {
    transform: translate(-50%, -15px);
    opacity: 0;
  }

  50% {
    transform: translate(-50%, 0px);
    opacity: 1;
  }

  100% {
    transform: translate(-50%, 15px);
    opacity: 0;
  }
}

@keyframes fadePush {
  0% {
    transform: translate(-50%, -15px);
    opacity: 0;
  }

  50% {
    transform: translate(-50%, 0px);
    opacity: 1;
  }

  100% {
    transform: translate(-50%, 15px);
    opacity: 0;
  }
}

@-webkit-keyframes fadePull {
  0% {
    transform: translate(-50%, 15px);
    opacity: 0;
  }

  50% {
    transform: translate(-50%, 0px);
    opacity: 1;
  }

  100% {
    transform: translate(-50%, -15px);
    opacity: 0;
  }
}

@keyframes fadePull {
  0% {
    transform: translate(-50%, 15px);
    opacity: 0;
  }

  50% {
    transform: translate(-50%, 0px);
    opacity: 1;
  }

  100% {
    transform: translate(-50%, -15px);
    opacity: 0;
  }
}

@-webkit-keyframes hitZak {
  0% {
    left: 0;
    transform: translateX(-1%);
  }

  100% {
    left: 100%;
    transform: translateX(-99%);
  }
}

@keyframes hitZak {
  0% {
    left: 0;
    transform: translateX(-1%);
  }

  100% {
    left: 100%;
    transform: translateX(-99%);
  }
}

@-webkit-keyframes animFw {
  0% {
    width: 0;
  }

  100% {
    width: 100%;
  }
}

@keyframes animFw {
  0% {
    width: 0;
  }

  100% {
    width: 100%;
  }
}

@-webkit-keyframes coli1 {
  0% {
    transform: rotate(-45deg) translateX(0px);
    opacity: 0.7;
  }

  100% {
    transform: rotate(-45deg) translateX(-45px);
    opacity: 0;
  }
}

@keyframes coli1 {
  0% {
    transform: rotate(-45deg) translateX(0px);
    opacity: 0.7;
  }

  100% {
    transform: rotate(-45deg) translateX(-45px);
    opacity: 0;
  }
}

@-webkit-keyframes coli2 {
  0% {
    transform: rotate(45deg) translateX(0px);
    opacity: 1;
  }

  100% {
    transform: rotate(45deg) translateX(-45px);
    opacity: 0.7;
  }
}

@keyframes coli2 {
  0% {
    transform: rotate(45deg) translateX(0px);
    opacity: 1;
  }

  100% {
    transform: rotate(45deg) translateX(-45px);
    opacity: 0.7;
  }
}

@-webkit-keyframes animloader121 {
  0% {
    background-position: 0% 0, 0 0, 120px 0, 120px 40px, 120px 80px, 120px 120px;
  }

  100% {
    background-position: 100% 0, 0 0, 120px 0, 120px 40px, 120px 80px, 120px 120px;
  }
}

@keyframes animloader121 {
  0% {
    background-position: 0% 0, 0 0, 120px 0, 120px 40px, 120px 80px, 120px 120px;
  }

  100% {
    background-position: 100% 0, 0 0, 120px 0, 120px 40px, 120px 80px, 120px 120px;
  }
}

@-webkit-keyframes animloader123 {
  0% {
    background-position: 0% 0, 120px 0, 120px 40px, 120px 80px;
  }

  100% {
    background-position: 100% 0, 120px 0, 120px 40px, 120px 80px;
  }
}

@keyframes animloader123 {
  0% {
    background-position: 0% 0, 120px 0, 120px 40px, 120px 80px;
  }

  100% {
    background-position: 100% 0, 120px 0, 120px 40px, 120px 80px;
  }
}

@-webkit-keyframes animloader124 {
  0% {
    background-position: 0% 0, 0 0, 70px 5px, 70px 38px, 0px 66px;
  }

  100% {
    background-position: 150% 0, 0 0, 70px 5px, 70px 38px, 0px 66px;
  }
}

@keyframes animloader124 {
  0% {
    background-position: 0% 0, 0 0, 70px 5px, 70px 38px, 0px 66px;
  }

  100% {
    background-position: 150% 0, 0 0, 70px 5px, 70px 38px, 0px 66px;
  }
}

@-webkit-keyframes animloader126 {
  0% {
    background-position: 0 0, 0 0, 0px 85px, 0px 110px;
  }

  100% {
    background-position: 150% 0, 0 0, 0px 85px, 0px 110px;
  }
}

@keyframes animloader126 {
  0% {
    background-position: 0 0, 0 0, 0px 85px, 0px 110px;
  }

  100% {
    background-position: 150% 0, 0 0, 0px 85px, 0px 110px;
  }
}

@-webkit-keyframes floating {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-25px);
  }
}

@keyframes floating {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-25px);
  }
}

@-webkit-keyframes animloader110 {
  0% {
    height: 100%;
  }

  100% {
    height: 0%;
  }
}

@keyframes animloader110 {
  0% {
    height: 100%;
  }

  100% {
    height: 0%;
  }
}

@-webkit-keyframes animloader111 {
  0% {
    width: 0%;
  }

  100% {
    width: 100%;
  }
}

@keyframes animloader111 {
  0% {
    width: 0%;
  }

  100% {
    width: 100%;
  }
}

@-webkit-keyframes animloader113 {
  0% {
    transform: translate(0px, 0px) scaleX(1);
  }

  14% {
    transform: translate(-12px, -16px) scaleX(1.05);
  }

  28% {
    transform: translate(-27px, -28px) scaleX(1.07);
  }

  42% {
    transform: translate(-46px, -35px) scaleX(1.1);
  }

  57% {
    transform: translate(-70px, -37px) scaleX(1.1);
  }

  71% {
    transform: translate(-94px, -32px) scaleX(1.07);
  }

  85% {
    transform: translate(-111px, -22px) scaleX(1.05);
  }

  100% {
    transform: translate(-125px, -9px) scaleX(1);
  }
}

@keyframes animloader113 {
  0% {
    transform: translate(0px, 0px) scaleX(1);
  }

  14% {
    transform: translate(-12px, -16px) scaleX(1.05);
  }

  28% {
    transform: translate(-27px, -28px) scaleX(1.07);
  }

  42% {
    transform: translate(-46px, -35px) scaleX(1.1);
  }

  57% {
    transform: translate(-70px, -37px) scaleX(1.1);
  }

  71% {
    transform: translate(-94px, -32px) scaleX(1.07);
  }

  85% {
    transform: translate(-111px, -22px) scaleX(1.05);
  }

  100% {
    transform: translate(-125px, -9px) scaleX(1);
  }
}

@-webkit-keyframes animloader113L {
  0% {
    box-shadow: 0 -6px, -122.9px -8px;
  }

  25%,
  75% {
    box-shadow: 0 0px, -122.9px -8px;
  }

  100% {
    box-shadow: 0 0px, -122.9px -16px;
  }
}

@keyframes animloader113L {
  0% {
    box-shadow: 0 -6px, -122.9px -8px;
  }

  25%,
  75% {
    box-shadow: 0 0px, -122.9px -8px;
  }

  100% {
    box-shadow: 0 0px, -122.9px -16px;
  }
}

@-webkit-keyframes animloader114 {
  0% {
    transform: translateY(8px) scaleY(1) scaleX(1.25);
  }

  25%,
  75% {
    transform: translateY(-5px) scaleY(1.2) scaleX(1);
  }

  50% {
    transform: translateY(-10px) scaleY(1) scaleX(1);
  }

  100% {
    transform: translateY(8px) scaleY(0.8) scaleX(0.8);
  }
}

@keyframes animloader114 {
  0% {
    transform: translateY(8px) scaleY(1) scaleX(1.25);
  }

  25%,
  75% {
    transform: translateY(-5px) scaleY(1.2) scaleX(1);
  }

  50% {
    transform: translateY(-10px) scaleY(1) scaleX(1);
  }

  100% {
    transform: translateY(8px) scaleY(0.8) scaleX(0.8);
  }
}

@-webkit-keyframes animloader118 {
  0% {
    transform: scale(0.8);
  }

  100% {
    transform: scale(1.2);
  }
}

@keyframes animloader118 {
  0% {
    transform: scale(0.8);
  }

  100% {
    transform: scale(1.2);
  }
}

@-webkit-keyframes animloader119 {
  0% {
    filter: blur(0px);
    transform: skew(0deg);
  }

  100% {
    filter: blur(3px);
    transform: skew(-4deg);
  }
}

@keyframes animloader119 {
  0% {
    filter: blur(0px);
    transform: skew(0deg);
  }

  100% {
    filter: blur(3px);
    transform: skew(-4deg);
  }
}


@media (max-width: 1050px) {
  #betanotify {
    display: none;
  }
}

.viser {
  margin-top: 540px;
  writing-mode: vertical-lr;
  rotate: 180deg;
}

/* selector */

.divs {
  width: 100px;
  height: 200px;
}

input[type=radio] {
  display: none;
}

#text {
  position: absolute;
  display: block;
  top: 0;
  text-align: center;
  padding-left: 31px;
  padding-right: 30px;
}

.select {
  display: inline-block;
  width: 99%;
  height: 34px;
  line-height: 30px;
  position: relative;
}

.items {
  display: block;
  min-height: 30px;
  position: absolute;
  border: 2px solid var(--firstcolor);
  background: var(--secondcolor);
  overflow: hidden;
  width: 100%;
  cursor: pointer;
}

.select input[name="list"]:not(:checked)~#text {
  color: black;
  background: #72727270;
}

.select input[name="list"]:checked~#text {
  background: transparent;
  color: transparent;
  z-index: var(--z-content);
}

#select:disabled~.items #text {
  background: #c4c4c4;
}

::placeholder {
  color: var(--hovtextcolor);
  opacity: 1;
}

/* #select:not(:checked) ~ .items
  {
    height: 30px;
  } */

.items label {
  border-top: 2px solid #72727270;
  display: none;
  padding-left: 10px;
  background: #72727270;
}

.items label:hover {

  cursor: pointer;
}

#select:checked~.items {
  padding-top: 30px;
}

#select:checked~.items label {
  display: block;
}

.items input:checked+label {
  display: block !important;
  border: none;
  background: var(--firstcolor);
}

#fontSelector {
  display: inline-block;
  margin-bottom: 20px;
}

#fontSelector label {
  margin-right: 10px;
}

#previewText {
  font-size: 18px;
}

.marketlefeder {
  border-right: var(--color1) 2px solid;
  height: 100%;
  width: 180px;
}

.micronameng {
  margin-top: 10px;
  font-size: 15px;
  text-align: center;
}

.chatbox {
  height: auto;
  overflow-x: hidden;
  overflow: scroll;
  height: calc(100% - 50px);
  margin: 10px;
  margin-bottom: 0px;
  scrollbar-width: none;
  background: #00000010;
  width: calc(100% - 20px);
}

.chatbox::-webkit-scrollbar {
  display: none;
}

.dropdown {
  position: relative;
  display: inline-block;
  margin: 5px;
  width: 34px;
}

.nodropdown {
  position: relative;
  display: inline-block;
  margin: 5px;
  width: 34px;
}

.dropdown-item {
  padding: 8px 16px;
  cursor: pointer;
  white-space: nowrap;
  color: #ddd;
  background: #1a1a1a;
  border-bottom: 1px color-mix(in srgb, var(--color1), transparent 85%) solid;
  text-align: center;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.dropdown-item:last-child {
  border-bottom: none;
}

.dropdown-item:hover {
  background: #30303080;
  color: #fff;
  box-shadow: inset 0 0 10px color-mix(in srgb, var(--color1), transparent 60%);
}

#themeDropdown {
  min-width: 150px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.chatcomposer {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

.chattools,
.chatinput-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.chatinput-actions {
  position: absolute;
  right: 6px;
  top: calc(50% + 4px);
  transform: translateY(-50%);
  z-index: var(--z-content);
}

.chattools {
  flex-wrap: wrap;
}

.chattool-btn {
  width: 24px;
  min-width: 24px;
  height: 24px;
  padding: 0;
  border: 1px color-mix(in srgb, var(--color1), transparent 60%) solid;
  background: #3030305d;
  box-shadow: inset 0 0 5px color-mix(in srgb, var(--color1), transparent 70%);
  color: #f2f2f2;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chattool-btn:hover {
  background: #30303080;
  border-color: color-mix(in srgb, var(--color1), transparent 30%);
  box-shadow: inset 0 0 12px color-mix(in srgb, var(--color1), transparent 50%);
  color: #fff;
}

.chattool-btn svg,
.chatinput-tools-btn svg,
.chatinput-emoji-btn svg {
  width: 14px;
  height: 14px;
  pointer-events: none;
}

.chatinput-field {
  position: relative;
  min-height: 34px;
}

.chatinput-field #chatinput {
  padding-top: 4px;
  padding-right: 64px;
  padding-bottom: 4px;
  border-radius: 0;
}

.chatinput-field #dmchatinput {
  padding-top: 4px;
  padding-right: 64px;
  padding-bottom: 4px;
  border-radius: 0;
}

.chatinput-tools-btn,
.chatinput-emoji-btn {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px color-mix(in srgb, var(--color1), transparent 55%) solid;
  background: #3030305d;
  box-shadow: inset 0 0 5px color-mix(in srgb, var(--color1), transparent 65%);
  color: #f2f2f2;
  border-radius: 3px;
  cursor: pointer;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.chatinput-tools-btn:hover,
.chatinput-emoji-btn:hover {
  background: #30303080;
  border-color: color-mix(in srgb, var(--color1), transparent 25%);
  box-shadow: inset 0 0 15px color-mix(in srgb, var(--color1), transparent 45%);
  color: #fff;
}

.emoji-picker,
.tools-picker {
  display: none;
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  width: 290px;
  max-width: calc(100vw - 40px);
  padding: 12px;
  border: 1px color-mix(in srgb, var(--color1), transparent 50%) solid;
  border-radius: 4px;
  background: rgba(18, 18, 22, 0.97);
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.55),
    0 0 18px color-mix(in srgb, var(--color1), transparent 75%),
    inset 0 0 12px color-mix(in srgb, var(--color1), transparent 85%);
  backdrop-filter: blur(4px);
  z-index: var(--z-picker);
}

.emoji-picker.open,
.tools-picker.open {
  display: block;
  animation: pickerFadeIn 0.16s ease-out;
}

@keyframes pickerFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.emoji-picker-title,
.tools-picker-title {
  color: var(--color1);
  font-size: 11px;
  margin-bottom: 10px;
  padding-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-bottom: 1px color-mix(in srgb, var(--color1), transparent 65%) solid;
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.tools-grid .chattool-btn {
  width: 100%;
  min-width: 0;
  height: 34px;
  justify-content: flex-start;
  gap: 8px;
  padding: 0 10px;
  font-size: 12px;
}

.tools-grid .chattool-btn span {
  pointer-events: none;
}

.emoji-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.emoji-btn {
  height: 34px;
  border: 1px color-mix(in srgb, var(--color1), transparent 75%) solid;
  background: #3030305d;
  box-shadow: inset 0 0 4px color-mix(in srgb, var(--color1), transparent 80%);
  border-radius: 3px;
  cursor: pointer;
  font-size: 18px;
  color: #fff;
  transition: transform 0.12s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.emoji-btn:hover {
  transform: translateY(-1px);
  background: #30303080;
  border-color: var(--color1);
  box-shadow: inset 0 0 12px color-mix(in srgb, var(--color1), transparent 50%);
}

.textbox1 {
  font-size: 18px;
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 20px;
  height: 32px;
  width: calc(100% - 12px);
  background: #3030307d;
  outline: none;
  box-shadow: none;
  /* border-bottom: var(--color1) 2px solid; */
  box-shadow: inset 0 0 20px color-mix(in srgb, var(--color1), transparent 60%);
  border-radius: 5px;
  color: white;
}

#comchat {
  height: calc(100% - 50px);
  max-height: calc(100% - 50px);
}

.comchat2 {
  margin-top: 40px;
  max-height: calc(100% - 90px) !important;
}

#themetags {
  height: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.tag {
  padding: 4px 8px;
  margin-bottom: 6px;
  background: #3030305d;
  border: 1px color-mix(in srgb, var(--color1), transparent 65%) solid;
  border-radius: 3px;
  color: #ddd;
  font-size: 12px;
  cursor: pointer;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.tag:hover {
  border-color: color-mix(in srgb, var(--color1), transparent 35%);
  box-shadow: inset 0 0 8px color-mix(in srgb, var(--color1), transparent 70%);
}

.tag:first-child {
  margin-left: 5px;
}

.comtag {
  width: 85%;
  padding: 8px 10px;
  background: #3030305d;
  border: 1px color-mix(in srgb, var(--color1), transparent 70%) solid;
  border-radius: 3px;
  margin-top: 5px;
  margin-bottom: 5px;
  cursor: pointer;
  color: #ddd;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.comtag:hover {
  border-color: color-mix(in srgb, var(--color1), transparent 40%);
  box-shadow: inset 0 0 10px color-mix(in srgb, var(--color1), transparent 65%);
  color: #fff;
}

.comtag-active {
  border-color: color-mix(in srgb, var(--color1), transparent 30%) !important;
  box-shadow: inset 0 0 12px color-mix(in srgb, var(--color1), transparent 55%) !important;
  background: #30303080 !important;
  color: #fff !important;
}

.author-time {
  font-weight: bold;
}

.message-avatar {
  width: 60px;
  height: 60px;
  border-radius: 10%;
  margin-right: 5px;
  cursor: pointer;
}

.message {
  width: calc(100% - 10px);
  max-width: 1000px;
  height: fit-content;
  margin-bottom: 10px;
  padding: 6px 8px;
  background: #3030305d;
  border: 1px color-mix(in srgb, var(--color1), transparent 80%) solid;
  border-radius: 3px;
  transition: border-color 0.2s ease;
  scroll-margin-top: 60px;
}

.message:hover {
  border-color: color-mix(in srgb, var(--color1), transparent 65%);
}

.msgcont {
  display: flex;
  flex: 1;
  min-width: 0;
}

.message:last-child {
  margin-bottom: 0px;
}

.message-sel {
  background: #30303090;
  box-shadow: inset 0 0 12px color-mix(in srgb, var(--color1), transparent 55%);
  border-color: color-mix(in srgb, var(--color1), transparent 40%) !important;
}

.message-right {
  margin-left: auto;
  flex-direction: row-reverse;
}

.message-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: calc(100% - 70px);
  min-width: 0;
  margin-left: 5px;
  overflow: clip;
}

.message-header {
  display: flex;
  align-items: baseline;
}

.message-username {
  font-weight: bold;
  margin-right: 10px;
  cursor: pointer;
}

.message-time {
  font-size: 0.8em;
  color: var(--hovtextcolor);
}

.message-status {
  margin-left: 10px;
  font-size: 0.8em;
  color: var(--hovtextcolor);
}

.message-text {
  width: 100%;
  max-width: 100%;
  margin-top: 5px;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  /* max-height: 1000px; */
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
  display: block;
  -webkit-line-clamp: 3;
  /* Adjust number of lines */
  -webkit-box-orient: vertical;
  padding: 2px;
}

.scroll-down-button {
  position: fixed;
  bottom: 80px;
  right: 20px;
  z-index: var(--z-modal);
  background-color: #3030305d;
  border: 1px color-mix(in srgb, var(--color1), transparent 50%) solid;
  box-shadow: inset 0 0 8px color-mix(in srgb, var(--color1), transparent 65%);
  padding: 8px 12px;
  border-radius: 3px;
  color: #fff;
  cursor: pointer;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.scroll-down-button:hover {
  border-color: color-mix(in srgb, var(--color1), transparent 25%);
  box-shadow: inset 0 0 14px color-mix(in srgb, var(--color1), transparent 45%);
}

.profileinfo {
  text-align: center;
}

.profileinfoitem {
  width: 100px;
  display: flex;
  margin: 10px;
}

#comchat {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.chatinput-container {
  display: flex;
  position: relative;
  width: 100%;
}

.chatinput-blocker {
  width: 100%;
  height: 100%;
}

img {
  max-width: 600px;
  cursor: pointer;
}

.zoomed {
  transform: scale(var(--scale, 1));
}

.fullscreen-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  place-items: center;
  z-index: var(--z-modal);
  overflow: hidden;
}

.fullscreen-image {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  cursor: grab;
  transform: translate(var(--x, 0px), var(--y, 0px)) scale(var(--scale, 1));
  transition: transform 0.25s ease, opacity 0.25s ease;
  opacity: 0;
  /* по умолчанию скрыта */
  will-change: transform, opacity;
}

.fullscreen-image.visible {
  opacity: 1;
  transform: translate(var(--x, 0px), var(--y, 0px)) scale(var(--scale, 1));
}

.fullscreen-image:active {
  cursor: grabbing;
}

body.no-select {
  user-select: none;
}


.close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  color: white;
  font-size: 30px;
  cursor: pointer;
}

.search-overlay {
  position: fixed;
  top: 40px;
  right: 20px;
  background: #3b3b3b;
  border: 2px solid var(--color1);
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: var(--z-modal);
  display: none;
  width: 250px;
}

.search-input {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 13px;
  margin-bottom: 8px;
  box-sizing: border-box;
}

.search-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.search-info {
  font-size: 12px;
  color: #666;
}

.search-buttons {
  display: flex;
  gap: 5px;
}

.search-btn {
  padding: 4px 8px;
  border: 1px solid var(--color1);
  background: #3b3b3b;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  color: azure;
}

.search-btn:hover {
  background: #f0f0f0;
}

.search-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.selectedtags {
  background: #3030305d;
  border-bottom: var(--color1) solid 2px;
  height: 20px;
  margin: 10px 5px;
}


#rotationSlider {
  -webkit-appearance: none;
  appearance: none;
  width: 440px;
  height: 40px;
  background: #4b4b4b79;
  /* Светло-серый фон трека */
  border-radius: 1px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
  /* Тень для глубины */
}

#rotationSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 50px;
  height: 36px;
  background: linear-gradient(#4d4d4d, #525252);
  /* Градиент как в iOS 6 */
  border: 1px solid #adb5bd;
  border-radius: 1px;
  cursor: grab;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: var(--z-content);
}

#rotationSlider::-webkit-slider-thumb:active {
  cursor: grabbing;
  background: linear-gradient(#4d4d4d, #525252);
  /* Темнее при нажатии */
}

#rotationSlider::-moz-range-track {
  background: #d3d3d3;
  /* Светло-серый фон для Firefox */
  height: 40px;
  border-radius: 1px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

#rotationSlider::-moz-range-thumb {
  width: 50px;
  height: 36px;
  background: linear-gradient(#666666, #505050);
  /* Градиент как в iOS 6 */
  border: 1px solid #adb5bd;
  border-radius: 1px;
  cursor: grab;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

#rotationSlider::-moz-range-thumb:active {
  cursor: grabbing;
  background: linear-gradient(#777777, #525252);
}

#rotationSlider:disabled {
  background: #5555553f;
  /* Светлее для отключенного состояния */
  cursor: not-allowed;
}

#rotationSlider:disabled::-webkit-slider-thumb,
#rotationSlider:disabled::-moz-range-thumb {
  background: #2A2A2A;
  /* Светлее для отключенного состояния */
  cursor: not-allowed;
}

/* Фоновая надпись для интуитивности */
#rotationSlider::before {
  content: "Slide to Verify →";
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #c9cbce;
  /* Серый текст */
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
  z-index: var(--z-content);
  transition: opacity 0.3s;
}

/* Скрываем надпись, когда слайдер в конце */
#rotationSlider[value="460"]::before {
  opacity: 0;
}

.topsecret {
  display: none;
}

/* .f11down{
  background: #000000;
  animation: f11anim;
  animation-duration: 2s;
  position: fixed;
  height: 100%;
  width: 100%;
  text-align: center;
}

@keyframes f11anim{
  from {
    background: #00000000;
  }

  to {
    background: #000000;
  }
} */

/* #select:checked ~ .bg
  {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 0;
  } */


#qrcode>img {
  width: 100px;
}

input[type="range"] {
  -webkit-appearance: none;
  width: 200px;
  height: 6px;
  /* border-radius: 4px; */
  background: linear-gradient(92deg, #00000000, var(--color1));
  outline: none;
  border: none;
}

/* Ползунок */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: var(--color1);
  border: 3px solid #171717;
  /* border-radius: 50%; */
  cursor: pointer;
  transition: 0.15s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

/* Для Firefox */
input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: var(--color1);
  border: 3px solid #171717;
  /* border-radius: 50%; */
  cursor: pointer;
  transition: 0.15s ease;
}

/* ===== TASK MANAGER REDESIGN ===== */
.tmgr-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 100px);
  gap: 0;
  overflow: hidden;
}

.tmgr-tabs {
  display: flex;
  gap: 2px;
  padding: 0 4px;
  border-bottom: 1px solid color-mix(in srgb, var(--color1), transparent 60%);
  background: #1a1a1a;
  flex-shrink: 0;
}

.tmgr-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  font-size: 13px;
  color: #888;
  cursor: pointer;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  user-select: none;
}

.tmgr-tab:hover {
  color: var(--textcolor);
  background: #2a2a2a;
}

.tmgr-tab--active {
  color: var(--color1);
  background: #242424;
  border-color: color-mix(in srgb, var(--color1), transparent 50%);
  box-shadow: inset 0 0 12px color-mix(in srgb, var(--color1), transparent 75%),
    0 -2px 8px color-mix(in srgb, var(--color1), transparent 80%);
}

.tmgr-tab--active svg {
  filter: drop-shadow(0 0 3px var(--color1));
}

.tmgr-content {
  display: none;
  flex: 1;
  overflow: hidden;
  padding: 12px;
  background: #1e1e1e;
  border: 1px solid color-mix(in srgb, var(--color1), transparent 60%);
  border-top: none;
  border-radius: 0 0 6px 6px;
  box-shadow: inset 0 0 20px color-mix(in srgb, var(--color1), transparent 85%),
    0 4px 16px rgba(0, 0, 0, 0.4);
}

.tmgr-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.tmgr-search {
  flex: 1;
  display: flex;
  align-items: center;
  background: #2a2a2a;
  border: 1px solid color-mix(in srgb, var(--color1), transparent 60%);
  border-radius: 4px;
  padding: 0 10px;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.tmgr-search:focus-within {
  border-color: color-mix(in srgb, var(--color1), transparent 30%);
  box-shadow: 0 0 8px color-mix(in srgb, var(--color1), transparent 70%),
    inset 0 0 6px color-mix(in srgb, var(--color1), transparent 80%);
}

.tmgr-search__icon {
  width: 14px;
  height: 14px;
  min-width: 14px;
  min-height: 14px;
  max-width: 14px;
  max-height: 14px;
  color: #666;
  flex-shrink: 0;
  transition: color 0.15s ease;
}

.tmgr-search:focus-within .tmgr-search__icon {
  color: var(--color1);
}

.tmgr-search__input {
  flex: 1;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--textcolor);
  font-size: 13px;
  padding: 8px;
  text-align: left;
  border-radius: 0;
}

.tmgr-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #3030305d;
  border: 1px solid color-mix(in srgb, var(--color1), transparent 50%);
  border-radius: 4px;
  color: var(--textcolor);
  font-size: 13px;
  cursor: pointer;
  user-select: none;
  transition: box-shadow 0.15s ease, background 0.15s ease;
  box-shadow: inset 0 0 5px color-mix(in srgb, var(--color1), transparent 40%);
}

.tmgr-btn:hover {
  background: #40404080;
  box-shadow: inset 0 0 12px color-mix(in srgb, var(--color1), transparent 30%),
    0 0 8px color-mix(in srgb, var(--color1), transparent 70%);
}

.tmgr-btn:active {
  transform: scale(0.97);
}

.tmgr-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(100% - 50px);
  padding-right: 4px;
}

.tmgr-list::-webkit-scrollbar {
  width: 5px;
}

.tmgr-list::-webkit-scrollbar-track {
  background: #1a1a1a;
}

.tmgr-list::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--color1), transparent 50%);
  border-radius: 3px;
}

.tmgr-proc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  margin-bottom: 3px;
  background: #2a2a2a;
  border: 1px solid color-mix(in srgb, var(--color1), transparent 70%);
  border-left: 3px solid var(--color1);
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  transition: box-shadow 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}

.tmgr-proc:hover {
  background: #35353580;
  box-shadow: inset 0 0 10px color-mix(in srgb, var(--color1), transparent 50%),
    0 0 6px color-mix(in srgb, var(--color1), transparent 75%);
  border-color: color-mix(in srgb, var(--color1), transparent 40%);
}

.tmgr-proc__name {
  color: var(--textcolor);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 70%;
}

.tmgr-proc__pid {
  color: #888;
  font-size: 12px;
  font-family: monospace;
}

.tmgr-proc .childs {
  margin-left: 14px;
  border-left: 1px dashed color-mix(in srgb, var(--color1), transparent 70%);
  padding-left: 6px;
}

.tmgr-ctx {
  position: fixed;
  z-index: var(--z-overlay);
  background: rgba(20, 20, 22, 0.97);
  border: 1px solid color-mix(in srgb, var(--color1), transparent 40%);
  border-radius: 6px;
  padding: 4px 0;
  min-width: 140px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6),
    inset 0 0 12px color-mix(in srgb, var(--color1), transparent 80%),
    0 0 12px color-mix(in srgb, var(--color1), transparent 70%);
  backdrop-filter: blur(8px);
}

.tmgr-ctx__item {
  padding: 8px 16px;
  font-size: 13px;
  color: var(--textcolor);
  cursor: pointer;
  transition: background 0.12s ease, box-shadow 0.12s ease;
  border-left: 2px solid transparent;
}

.tmgr-ctx__item:hover {
  background: #3030305d;
  box-shadow: inset 0 0 12px color-mix(in srgb, var(--color1), transparent 40%);
  border-left-color: var(--color1);
}

.tmgr-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #666;
  font-size: 14px;
}

input[type="range"]::-moz-range-thumb:hover {
  transform: scale(1.15);
}

/* ── DM (private messages) view ────────────────────────────── */
#dmview {
  display: none;
  flex-direction: row;
  height: calc(100% - 50px);
  max-height: calc(100% - 50px);
  width: 100%;
  overflow: hidden;
}

#dmthreadlist {
  width: 260px;
  min-width: 260px;
  height: 100%;
  border-right: var(--color1) 2px solid;
  background: #1a1a1a;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.dmthreadlist-header {
  padding: 10px;
  text-align: center;
  border-bottom: 1px solid #30303080;
  font-size: 15px;
  color: #ddd;
  flex-shrink: 0;
}

#dmthreaditems {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
}

.dmthreaditem {
  display: flex;
  align-items: center;
  padding: 10px;
  cursor: pointer;
  border-bottom: 1px solid #30303040;
  transition: background 0.15s ease, box-shadow 0.15s ease;
  gap: 10px;
}

.dmthreaditem:hover {
  background: #30303080;
}

.dmthreaditem-active {
  background: #30303090;
  box-shadow: inset 4px 0 0 0 var(--color1);
}

.dmthreadavatar {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid #444;
  flex-shrink: 0;
}

.dmthreadinfo {
  flex: 1;
  overflow: hidden;
  min-width: 0;
}

.dmthreadname {
  color: #ddd;
  font-size: 14px;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dmthreadlast {
  color: #aaa;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dmthreadtime {
  color: #777;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

#dmthreadview {
  flex: 1;
  display: flex;
  flex-direction: row;
  height: 100%;
  overflow: hidden;
  min-width: 0;
}

#dmmain {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

#dmprofileslideout {
  width: 260px;
  background: #1a1a1a;
  border-left: 1px solid #30303080;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.dmheadprofile-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: #ccc;
}

.profileactions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0 0;
  border-top: 1px solid #30303040;
  margin-top: 10px;
}

.dmheadprofile-btn:hover {
  color: #fff;
  background: #30303060;
}

.dmprofile-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-bottom: 1px solid #30303080;
  background: #222;
  font-size: 14px;
  color: #ddd;
  flex-shrink: 0;
}

.dmprofile-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 22px 48px;
  gap: 22px;
  overflow-y: auto;
  flex: 1;
}

#dmprofile-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 1px 12px;
  gap: 3px;
}

.dmprofile-loading {
  color: #888;
  font-size: 13px;
  padding: 20px 0;
}

.dmprofile-avatar {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid #444;
  margin: 0 auto;
  display: block;
}

.dmprofile-name {
  font-size: 16px;
  color: #ddd;
  text-align: center;
  word-break: break-word;
  display: block;
}

.dmprofile-role {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  background: #30303080;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline-block;
}

.dmprofile-section {
  width: 100%;
  margin-top: 14px;
  text-align: center;
}

.dmprofile-label {
  font-size: 10px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.dmprofile-value {
  font-size: 13px;
  color: #ccc;
  word-break: break-word;
}

.dmprofile-bio {
  max-height: 120px;
  overflow-y: auto;
  white-space: pre-wrap;
  background: #0e0e0e60;
  border: 1px solid #30303060;
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
}

#dmthreadheader {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-bottom: 1px solid #30303080;
  background: #222;
  font-size: 14px;
  color: #ddd;
  flex-shrink: 0;
}

#dmthreadheader b {
  font-size: 14px;
  color: #ddd;
}

#dmeverychat {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  background: #00000010;
  padding: 10px;
  margin: 0;
  width: 100%;
  height: auto;
  scrollbar-width: none;
}

#dmeverychat::-webkit-scrollbar {
  display: none;
}

#dmeverychat .message {
  max-width: 70%;
  width: fit-content;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

#dmeverychat .message.message-sel {
  background: #30303090;
  border-color: color-mix(in srgb, var(--color1), transparent 60%);
}

.dm-message-delete {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: #999;
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.2s ease, color 0.2s ease;
}

#dmeverychat .message:hover .dm-message-delete,
.dm-message-delete:focus-visible {
  opacity: 0.7;
}

.dm-message-delete:hover {
  color: #e66;
  opacity: 1 !important;
}

.dm-message-delete:disabled {
  opacity: 0.35 !important;
  cursor: wait;
}

@media (hover: none) {
  .dm-message-delete {
    opacity: 0.7;
  }
}

#dminputcontainer {
  border-top: 1px solid #30303080;
  padding: 8px;
  display: flex;
  align-items: flex-end;
  background: #1a1a1a40;
  flex-shrink: 0;
}

#dminputcontainer .chatcomposer {
  flex: 1;
}

#dminputcontainer .chatinput-field {
  position: relative;
}

#dmeverychat .message-text {
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
}