/*Farben*/
:root {
  --science-color: 92, 199, 255;
  --food-color: 102, 232, 103;
  --infrastructure-color: 255, 226, 109;
  --population-color: 255, 100, 98;
  --trade-color: 246, 75, 170;
  --stability-color: 171, 64, 232;
  --body-color: #fff;
  --header-color: #222;
  --table-header-bg-color: #555;
  --table-header-text-color: #fff;
}

.modal {
  background-color: rgba(0,0,0,0.6) !important;
}




body {
  background-color:var(--body-color);
}

img.float-right, figure.float-right {
  margin-left:30px;
}
img.float-left, figure.float-left {
  margin-right:30px;
}
.text-img, .figure-img {
  width:400px;
  max-width: 100% !important; 
  border:1px solid #aaa;
}

.page-header {
  text-align:center;
  margin-bottom:20px;
}


h1, h2, h3 {
  color:var(--header-color);
}
h6 {
  font-weight:bold;
}
.modal .row p {
  min-width:180px;
  /*text-align:justify;*/
}


/*TABLE-Formate*/

.table-responsive {
  max-width:100%;
}

.comparison-table {
    border-spacing: 3px;
    border-collapse: separate;
}

.custom-col-header {
  min-width:190px;
  text-align:center;
  padding-top:10px;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  background-color:var(--table-header-bg-color);
  color:var(--table-header-text-color);
}
.custom-col-header > i {
  display:block;
  margin: 0 auto -25px;
  font-size:40px;
  border-radius:40px;
  width:80px;
  height:80px;
  text-align:center;
  color:#fff;
  border:4px solid white;
  font-style:normal;
}

.custom-col-header-byzanz > i {
  background-image:url(../img/icons/Byzantine_imperial_flag.svg);
  background-size:55px;
  background-repeat:no-repeat;
  background-position:center;
  background-color:#c8100b;
}

.custom-col-header-islam> i {
  background-color:#009000 ;
  padding-top:15px;
  font-size:45px;
}

.custom-col-header-westrom> i {
  background-color:#fff ;
  color:#b00;
  font-size:55px;
  padding-top: 9px;
}

.comparison-table > tbody > tr {
  height:70px;
}

.comparison-table > tbody > tr > th {
  border-top-left-radius: 35px;
  border-bottom-left-radius: 35px;
  min-width:330px;
  vertical-align: middle;
  padding-left:0;
}

.comparison-table td, .comparison-table th, .comparison-table thead th {
  border:none;
}

.comparison-table tbody td {
  text-align:center;
  vertical-align: middle;
  padding:0;
}

.comparison-table > tbody a {
  display:inline-block;
  color:inherit;
  text-decoration:none;
  font-size:1.3rem;
  outline: none; 
  text-align:center;
  width:100%;
  height:100%;
}
.comparison-table > tbody a:hover {
  text-decoration:none;
  font-size:1.4rem;
}

.comparison-table > tbody > tr > th {
  vertical-align:middle;
}

.comparison-table > tbody > tr > th > i {
  height:50px;
  width:50px;
  margin-right:20px;
  margin-left:20px;
  background-color:#fff;
  border-radius:25px;
  font-size:30px;
  text-align:center;
  padding-top:8px;
  vertical-align: middle;
  border:2px solid #555;
}

/*
Funktioniert nicht auf Chrome, also scheiß drauf
.comparison-table > tbody > tr:not(.row-total) > td:nth-child(odd) > div {
  background-color:rgba(255,255,255,0.1);
}
.comparison-table > tbody > tr:not(.row-total) > td:nth-child(even) > div {
  background-color:rgba(255,255,255,0.2);
}
*/

.row-science > th, .row-science > td {
  background-color: rgba(var(--science-color),1);
}

.row-food > th, .row-food > td {
  background-color: rgba(var(--food-color),1);
}

.row-infrastructure > th, .row-infrastructure > td {
  background-color: rgba(var(--infrastructure-color),1);
}

.row-population > th, .row-population > td {
  background-color: rgba(var(--population-color),1);
}

.row-trade > th, .row-trade > td {
  background-color: rgba(var(--trade-color),1);
}

.row-stability > th, .row-stability > td{
  background-color: rgba(var(--stability-color),1);
}

.row-total > th, .row-total > td{
  background-color: var(--table-header-bg-color);
  color: var(--table-header-text-color);
  font-size:1.1em;
}
.row-total > th > i {
  color:black;
}

@media only screen and (max-width: 975px) {
  .container {
    position:absolute;
  }
  .container, .col-md-auto, .justify-content-md-center, .table-responsive, .table {
    width: 100%;
    padding:0;
    margin:0;
  }
  .comparison-table > tbody a {
    font-size:1rem;
  }
  .comparison-table > tbody a:hover {
    text-decoration:none;
    font-size:1.1rem;
  }

  .custom-col-header {
    min-width:130px;
  }
  .category-title{
    visibility:hidden;
    display:none;
  }
  .comparison-table > tbody > tr > th  {
    max-width:60px;
    min-width:0px;
    border-radius:0;
    margin-left:-3px;
      }

}

@media only screen and (max-width: 600px) {

  .comparison-table {
    border-spacing: 1px;
    border-collapse: separate;
}
  .category-title{
    visibility:hidden;
    display:none;
  }
  .comparison-table > tbody > tr  {
  max-height:60px;
  min-height:20px;
  height:60px;
  }
  .comparison-table > tbody > tr > th  {
  max-width:60px;
  min-width:0px;
  border-radius:0;
  margin-left:-3px;
    }
    .comparison-table > tbody > tr > th  > i {
    margin-left:5px;
    
    }
  .container, .col-md-auto, .justify-content-md-center, .table-responsive, .table {
    width: 100%;
    padding:0;
    margin:0;
  }
  .custom-col-header {
    min-width:100px;
    text-align:center;
    padding-top:10px;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    background-color:var(--table-header-bg-color);
    color:var(--table-header-text-color);
  }
  .row-total > th, .row-total > td{
    background-color: var(--table-header-bg-color);
    color: var(--table-header-text-color);
    font-size:1em;
  }

  .comparison-table > tbody a {
    font-size:1rem;
  }
  .comparison-table > tbody a:hover {
    text-decoration:none;
    font-size:1.1rem;
  }
  .custom-col-header {
    background-color:rgba(0,0,0,0)
  }
  .custom-col-header > i {
    border-radius:25px;
    width:50px;
    height:50px;
    border:2px solid white;
  }
  
  .custom-col-header-byzanz > i {
    background-size:30px;
    background-repeat:no-repeat;
    background-position:center;
    background-color:#c8100b;
  }
  
  .custom-col-header-islam> i {
    background-color:#009000 ;
    padding-top:7px;
    font-size:32px;
  }
  
  .custom-col-header-westrom> i {
    background-color:#fff ;
    color:#b00;
    font-size:35px;
    padding-top: 5px;
  }

}