html,
body,
h1,
h2,
h3,
h4,
h5 {
font-family: "Droid Serif";
}
h1,h2,h3{
font-size:1.8em;
}
h4,h5,h6{
font-size:1.4em;
}
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
::-webkit-scrollbar-track {
  background: #ccc; 
}
::-webkit-scrollbar-thumb {
  background: #666; 
}
::-webkit-scrollbar-thumb:hover {
  background: #333; 
}
.w3-modal{
  z-index:20;
}
  #topbar {
    height: 80px;
  }

  #menu {
    display: none;
    position: fixed;
    top: 80px;
    left: 0;
    width: 100%;
    height: calc(100% - 80px);
    z-index: 6;
    overflow-y: scroll;
    overflow-x:hidden;
  }

  #chat {
    display: none;
    position: absolute;
    top: 80px;
    left: 0;
    width: 100%;
    height: calc(100% - 80px);
    z-index: 5;
  }

  #currentchat{
    padding:4px;
    width:100%;
    overflow-wrap: break-word;
    overflow-y: scroll;
    height:calc( 100% - 155px );
  }
  .marquee {
      height: 24px;
      overflow: hidden;
      position: relative;
  }
  
  .marquee p {
      position: absolute;
      width: max-content;
      height: 100%;
      margin: 0;
      line-height: 24px;
      text-align: center;
      -moz-transform: translateX(100%);
      -webkit-transform: translateX(100%);
      transform: translateX(100%);
      -moz-animation: scroll-left 2s linear infinite;
      -webkit-animation: scroll-left 2s linear infinite;
      animation: scroll-left 20s linear infinite;
  }
  .marquee p:hover{
    animation-play-state:paused
  }
  .paddingmargin{
    padding:4px;
    margin:4px;
  }
  @-moz-keyframes scroll-left {
      0% {
          -moz-transform: translateX(100%);
      }
      100% {
          -moz-transform: translateX(-100%);
      }
  }
  
  @-webkit-keyframes scroll-left {
      0% {
          -webkit-transform: translateX(100%);
      }
      100% {
          -webkit-transform: translateX(-100%);
      }
  }
  
  @keyframes scroll-left {
      0% {
          -moz-transform: translateX(100%);
          -webkit-transform: translateX(100%);
          transform: translateX(100%);
      }
      100% {
          -moz-transform: translateX(-100%);
          -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
      }
  }
  
  @media only screen and (min-width: 450px) {
    .paddingmargin{
      padding:8px;
      margin:8px;
    }
  }

  @media only screen and (min-width: 600px) {
    .paddingmargin{
      padding:12px;
      margin:12px;
    }}

  @media only screen and (min-width: 900px) {
    .paddingmargin{
      padding:16px;
      margin:16px;
    }
    #menu {
      display: block !important;
      left: 0;
      width: 220px;
      height: calc(100% - 80px);
    }

    #chat {
      z-index: 7;
    }

    #app {
      margin-left: 220px;
    }

    #btnmenu {
      display: none;
    }
  }

  @media only screen and (min-width: 1200px) {
    #topbar {
      padding-right: 300px;
    }

    #chat {
      display: block !important;
      position: fixed;
      top: 0;
      height: 100%;
      left: auto;
      right: 0;
      width: 300px;
      height: 100%;
    }

    #app {
      margin-right: 300px;
    }

    #btnchat {
      display: none;
    }
    #currentchat{
      height:calc( 100% - 75px );
    }
  }

  @media only screen and (min-width: 1600px) {}

.font-weight-bold{
  font-weight: bold;
}
.shake{
	animation: shake 0.5s; 
	animation-iteration-count: infinite; 
}
.shake:hover{
	animation: pause;
}
@keyframes shake {
    0% { transform: translate(1px, 2px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(2px, -2px) rotate(-1deg); }
}
.flipper {
animation: flip 2s; 
animation-timing-function: linear;
animation-iteration-count: infinite; 
}
@keyframes flip {
0% {transform: scaleX(-1);}
25% {transform: scaleX(0);}
50% {transform: scaleX(1);}
75% {transform: scaleX(0);}
100% {transform: scaleX(-1);}
}



.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #2196F3;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #2196F3;
  cursor: pointer;
}


.getin{
  opacity: 0;
  position: static;
  height:1px;
  width:1px;
  z-index: 1;
}
.getout {
  width:100% !important;
  -webkit-animation-duration: 1s;
  animation-duration: 3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: anim;
  animation-name: anim;
}
@-webkit-keyframes anim {
  0% {
      opacity: 1;
      -webkit-transform: translateY(0);
  }
  100% {
      opacity: 0;
      -webkit-transform: translateY(-100px);
  }
}
@keyframes anim {
  0% {
      opacity: 1;
      transform: translateY(0);
  }
  100% {
      opacity: 0;
      transform: translateY(-100px);
  }
}