* {
    box-sizing: border-box;
  }
  @media screen and (max-width: 990px) {
    #div_header { display: none !important; }
    .cbody { background-image: none !important; }
	.containerTab { height: calc(100vh - 130px) !important; }
	#b1.containerTab { height: calc(100vh - 130px)  !important; }
	#finalTab.containerTab { height: calc(100vh - 130px)  !important; }
  }

  html {
    height: 100%;
  }
  .row g-3 {
  padding: 10px;
  font-size: 20px;
  }
  
  .cbody {
    height: 100%;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:1.0em;
    margin-left: 8%;
    margin-right: 8%;
    background-image: url('http://heldenmaschine.dao-rpg.de/wp-content/uploads/2023/06/cropped-Sor_Symbol-2.png');
	  background-repeat:no-repeat;
	  background-position:left;
	  background-size: contain;
    
  }

  .maindiv{
    padding: 20px; min-height: 100% !important;
  }
  
  /* The grid: Three equal columns that floats next to each other */
  .column {
    margin-top: 10px;
    float: left;
    width: 16.66%;
    padding: 10px 0px;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
    color: white;
    
  }
  
  .containerTab {
    height: calc(100vh - 344px);
    /*min-height: 100%;*/
    padding: 10px;
    color: black;
	overflow: auto;
    overflow-x: hidden;
  }

  #b1.containerTab {
    height: calc(100vh - 285px);
    /*min-height: 100%;*/
    padding: 10px;
    color: black;
    overflow: auto;
    overflow-x: hidden;
  }

  #finalTab.containerTab {
    height: calc(100vh - 285px);
    /*min-height: 100%;*/
    padding: 10px;
    color: black;
  }
  
  /* Clear floats after the columns */
  .row:after {
    content: "";
    display: table;
    clear: both;
  }
  
  table {
    font-family: arial, sans-serif;
    /*border-collapse: collapse;*/
    width: 100%;
  }

  .trennung {
    border-right: 1px solid #cdd0d4;
  }

  td, th {
    text-align: left;
    padding: 8px;
  }
  
  tr:nth-child(even) {
    background-color: #dddddd;
  }
  
  .grid-container {
    background-color: white;
    padding: 0px;
  }
  
  .grid-item {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 0px;
    width: 280px;
    font-size: 20px;
    text-align: center;
    display: inline-block;
    margin-top: 5px;
  }
  
  .grid-container-inside {
    display: grid;
    grid-template-columns: 100px auto auto;
    background-color: white;
    padding: 0px;
  }
  
  .grid-container-inside > div {
    background-color: rgba(255, 255, 255, 0.8);
    text-align: left; 
  }
  
  .item1 {
    padding: 2px 0px 0px 2px;
    grid-row-start: 1;
    grid-row-end: 4;
  }
  .item2 {
    padding: 2px 0px 0px 0px;
    font-size: 25px;
    grid-column-start: 2;
    grid-column-end: 4;
  }
  .item3 {
    padding: 2px 0px;
    font-size: 15px;
  }

  .item4 {
    padding: 2px 0px;
    font-size: 15px;
    background-color: rgba(255,255,255,1.0);
  }

  a:link .link-text {
    color: #cfb55f;
  }

  .myinput {
    width: 100%; 
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing: border-box;
}

.top-fixed.scrolled {
 position: fixed;
 top: 344;
}

.navbar.navbar-expand-lg.navbar-dark.bar1 {
  background-color: #666666;
}

.navbar.navbar-expand-lg.navbar-dark.bar2 {
  background-color: #cfb55f;
}