:root
{
  --main-color: #303030;
  --link-color: #0078FF;
  --chat-color: #424242;
  --font-color: #aaaaaa;
}

*{font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;}
html,body{margin:0px;padding:0px;color:var(--font-color);background-color:black;}
/* body{overscroll-behavior-y: none;} */
hr{height:2px;border-width:0;background-color:var(--link-color);}
a{text-decoration:none;color:var(--link-color);font-weight:bold;user-select: none;}

form{display:inline;}

/* Malert überschreiben: */
#malert_head{background-color:var(--link-color);}
#malert_innen,#malert_inhalt{background-color:var(--main-color);color:var(--font-color);}
#malert_inhalt{background-color:var(--main-color);color:var(--font-color);max-height:calc( 100vh - 300px );user-select:text;}
#malert_innen{top:110px;width:500px;}
#malert_headline{color:#fff;}

/* /Malert überschreiben: */

#dunkel{display:none;position:fixed;top:0px;left:0px;height:100%;z-index:1000;width:100%;background-color:#000000;opacity:0.5;}

.fett{font-weight:bold;}

div{
  box-sizing: border-box;
  user-select: none;
}
input[type=text],input[type=search],textarea{border:1px solid var(--link-color);width:100%;font-size:16px;border-radius:5px;background-color:var(--font-color);color:var(--main-color);}
input[type=text]:focus,input[type=search]:focus,textarea:focus{outline: none;}
#suchfeld{width:calc(100% - 80px);height:28px;}
#website_main,#main{background-color:var(--main-color);margin:auto auto;width:100%;min-height:100%;max-width:1200px;border:2px solid var(--main-color);}
#head{z-index:1001;width:100%;max-width:1200px;background-color:var(--main-color);position:fixed;top:0px;padding:5px 5px 0px 5px;margin-left:-2px;}
#ueb{font-size:20px;}
#menubutton{padding:5px;font-size:25px;}
#last_refresh{font-size:12px;padding-left:5px;}
#lupe_rechts{float:right;padding:5px;font-size:25px;}

#website_content,#content
{
  background-color:black;
  padding-left:5px;
  padding-top:88px;
  scroll-behavior: smooth;
  width:100% ;
  vertical-align: top;
  overflow-x: scroll;
  white-space: nowrap;
  box-sizing: border-box;
  /*padding-left:200px;*/
  scroll-snap-type: x mandatory;
}

.tab
{
  background-color:var(--main-color);
  /* border:1px solid var(--link-color); */
  height:calc(100% - 97px);
  overflow-y: scroll;
  padding:5px;
  width:calc(50% - 4px);
  display: inline-block;
  margin-right:3px;
  scroll-snap-align: center;
  position: relative; /* sehr wichtig sonst freezed Chrome mobile */
  white-space: normal;
}

.tab::-webkit-scrollbar,#content::-webkit-scrollbar {
  display: none;
}
#users{width:calc(35% - 4px);}
#chat{width:calc(65% - 4px);}

.tablink{margin-right:5px;border-bottom:5px solid var(--main-color);font-size:14px;width:calc(50% - 5px);line-height:40px;float:left;text-align: center;cursor:pointer;}
#tablink_users{width:calc(35% - 5px);}
#tablink_chat{width:calc(65% - 5px);}

.aktiv{border-bottom:5px solid var(--link-color);}

.chathinweis{padding:10px;}

a.anchor {
    display: block;
    position: relative;
    top: -500px;
    visibility: hidden;
}

.last_push{font-size:13px;font-weight:normal;color:var(--font-color);}


/* #chat_inner{height:calc(100% - 45px);overflow-y:scroll;} */
#chat_flex{display:flex;flex-direction: column;height:100%;align-content: stretch;}
#chat_scroll{flex:1;overflow-y:scroll;}
.pad10{padding:10px;}
#chat_eingabe{background-color:var(--main-color);padding:5px;}

#eingabefeld{width:calc(100% - 40px);resize: none;padding:3px;float:left;margin-bottom:3px;}
.chatbutton{float:right;width:23px;height:23px;font-size:20px;display:block;margin:0px 0px 5px 5px !important;}
#anhang{display:none;}

.fett{font-weight:bold;}

.l{float:left;}
.r{float:right;}

.button{padding:5px;border:1px solid var(--link-color);border-radius:5px;margin:0px 5px 5px 0px;white-space: nowrap;line-height:40px;}
#malert_head a{background-color:var(--main-color);color:white;display:inline-block;padding:6px;border-radius:5px;width:26px;text-align: center;}

.user{display:block;border:1px solid var(--link-color);border-radius:5px;margin-bottom:5px;cursor:pointer;padding:10px;}
.user_selected{background-color:var(--chat-color);}
.blacklisted{background-color:black;color:var(--font-color);}
.profilbild{width:35px;height:35px;margin-right:5px;border-radius:100%;border:1px solid var(--link-color);background-size:cover;float:left;}

.push{overflow-x:hidden;background-color:var(--chat-color);border:1px solid var(--link-color);margin-bottom:3px;margin-top:3px;cursor:pointer;padding:3px;max-width:90%;min-width:60px;clear:both;}
.marked_green{border:2px solid green;}
.marked_red{border:2px solid red;}
.marked_yellow{border:2px solid yellow;}
.last_push_data,.push_data{display:none;}

.links{border-radius:0px 5px 5px 0px;float:left;border-left:0px;}
.rechts{border-radius:5px 0px 0px 5px;float:right;border-right:0px;}

.zeit{float:right;font-size:10px;}
.sender_name{clear:both;font-size:11px;}

.badge{display:inline-block;font-size:8px;width:14px;height:14px;line-height:14px;text-align:center;background-color:black;color:white;margin-top:-5px;border-radius:50%;padding:3px;font-weight:bold;}

#website_navi,#navi
{
  position:fixed;
  top:85px;
  margin-left:0px;
  height:100%;
  width:200px;
  z-index:1001;
  padding:5px;
  background-color:var(--main-color);
}
#website_navi a,#navi a{text-decoration:none;font-weight:bold;color:var(--link-color);padding:10px;display:block;border-bottom:1px solid var(--link-color);}
#website_navi i,#navi i{width:25px;}

/* WEBSITE */
#website_main
{
  background-color:black;
}
#website_navi
{
  top:50px;
}
#website_content
{
  user-select: text;
  margin-top:45px;
  padding-top:5px;
  padding-bottom:50px;
  width:100%;
  background-color:var(--main-color);
  overflow-x: auto;
  white-space: normal;
}

/* MOBIL */
@media(max-width: 900px)
{
  .tab{width:calc(100% - 4px);}
  #users{width:calc(100% - 4px);}
  #chat{width:calc(100% - 4px);}
  #tablink_users{width:calc(50% - 5px);}
  #tablink_chat{width:calc(50% - 5px);}
  #content{max-width:100%;margin:0 0;}
}