*{font-family:arial;}

body {
  background-color:#222222;
  margin:0px;
  padding:0;
  color:#dddddd;
}
div{box-sizing: border-box;}
form{display:inline;}
#toast{z-index:10000;}

a{color:#eeeeee;}

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

#alles
{
  width:100%;
  /* height:100%; */
  /* scroll-behavior: smooth; */
  vertical-align: top;
  white-space: nowrap;
  /* scroll-snap-points-y: repeat(100vw); */
  scroll-snap-type: x mandatory;
  overflow-x:scroll;
  /* overflow-y: hidden; */
}
.box
{
  height:99svh;
  border:1px solid black;
  display:inline-block;
  overflow: hidden;
  padding:5px;
  position: relative; /* sehr wichtig sonst freezed Chrome mobile */
  white-space: normal;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
.box::-webkit-scrollbar,#alles::-webkit-scrollbar {
  display: none;
}
*::-webkit-scrollbar{display: none;}

textarea,input,button,.button{background-color:#222222;color:#dddddd;outline:0;border:0;}
button,.button,input[type=submit]{background-color:#dddddd;color:#222222;font-size:15px;font-weight:bold;padding:5px;cursor:pointer;border:1px solid black;}
#links button{height:30px;}
textarea,input[type=text],input[type=search]{width:100%;font-size:18px;padding:4px;border:0px;font-family:'Courier New', Courier, monospace;}
input[type=text],input[type=search]{border:1px solid black;}

.box_inner{display: flex; flex-direction: column; height:100%;}
.box_oben{padding:3px;height:40px;font-size:20px;background-color:black;}
.box_oben input{padding:0px;font-size:28px;background-color:black;}
.box_unten{flex-grow: 1; flex-shrink:1; margin: 0; padding: 0; padding-top:10px;overflow-y: scroll;}

h1,h2,h3,h4,h5,h6{margin:0px;margin-bottom:2px;}

#links{width:15%;
  /* overscroll-behavior-y: contain; */
  user-select:none;
}
#mitte_l{width:35%;}
#mitte_r{width:35%;}
#rechts{width:15%;}

#qr_outer{background-color:white;padding:20px;display:flex;align-items:center;justify-content:center;}
#qr_inner{margin:auto auto;}

.zettel_item{padding:5px;border-top:1px solid black;cursor:pointer;margin-bottom:2px;}
.zettel_item_la{font-size:12px;}

#textarea,#textfeld{font-size:16px;height:99%;line-height:22px;}
*:focus {
  outline: 0;
}
::placeholder {
  color: #dddddd;
  opacity: 1; /* Firefox */
}
#textfeld{overflow-y:scroll;}
#textfeld h1{line-height:35px;}
#textfeld a{word-wrap: break-word;}
#textfeld img{max-width:100%;}
#textfeld ul,#textfeld ol{margin:0px;margin-left:-20px;}
#textfeld blockquote{margin:0px 0px 0px 20px;}
#textfeld div.code{padding:10px;border:1px solid cyan;font-family: 'Courier New';white-space: pre;overflow-x:scroll;}
/* #textfeld div.code::-webkit-scrollbar{display: block;} */
#textfeld span.code{padding:2px;border:1px solid cyan;font-family: 'Courier New';}
#textfeld .fa-calculator{color:cyan;}
#textfeld span.todo{padding:2px;background-color:blue;}
#textfeld label.durchgestrichen{text-decoration: line-through;}
#textfeld label{user-select:none;}
#textfeld input[type=checkbox]{margin-right:5px;}

@media(max-width: 800px)
{
  #alles{width:100%;}
  #links{width:calc(100% - 10px);}
  #mitte_l{width:calc(100% - 10px);}
  #mitte_r{width:calc(100% - 10px);}
  #rechts{width:calc(100% - 10px);}
}