/* Dieses CSS file erweitert das allgemeine styles.css File (muss dafuer aber eingebunden sein)

   Das allgemeine styles.css File hat einen Body und otree-body container, die 100% width haben
   Innerhalb dessen legen wir nun mit "main" einen Flex Container an.
 */
/*@import('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.0/css/bootstrap.min.css')*/
/*<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">*/

/*<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">*/


.otree-body {
  padding: 0;
}

.page-header {
  margin: 0; /* Margin von otree zuruecksetzen */
  padding: 0; /* Padding von Otree zuruecksetzen */
}


body {
  margin: 0;
}

#placeholder{
  background-color: white;
  min-height: 2000px;
  min-width: 960px;
  z-index: 300;
}

 p{
   font-size: 20px;
 }
.flex-main {
  display: flex;
  flex-wrap: wrap; /* overflow verhindern */
  /*background: darkgrey;*/
  border: 0px solid black;
}

  .Game-Title{
    display: flex;
    flex-grow: 1;
    align-items: baseline;
    justify-content: center;
    margin: 1.2rem;
    padding: 0;
  }

  .Game-Title h4 {
    margin: 0;
    margin-right: 0.7rem;
    font-weight: bold;
  }

  .Game-Title p {
    font-style: italic;
    margin: 0;
  }

.flex-main.debug{
    border-top: 1px solid black;
    margin-top: 2rem;

}
.debug{
    padding-right: 1rem;
    padding-top: 1rem;
}

.debug p{
  font-size: 12px;
  padding:0;
  margin: 0;
}

.flex-container{
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap; /* verhindert overflow wenn Screen small */
  background-color: white;
  padding: 1rem;
  border: 0px solid yellow;
  flex-basis: 0; /* sorg dafuer, dass alle items gleich gross sind egal welcher Inhalt */
  flex-grow: 1; /* fuellt gesamten Platz mit den items */

}
/* -------------------------------------------------------------*/
/* Game --------------------------------------------------------*/
/* -------------------------------------------------------------*/
.risk-information-1{
  flex-wrap: wrap; /* verhindert overflow wenn Screen small */
  padding: 0.5rem;
  /*padding-right: 0.3rem;*/
  flex-basis: 0;
  flex-grow:1;
  min-width: 430px;
  border: 20px solid white;
  border-radius:15px ;
}

.risk-information-2{
  flex-wrap: wrap; /* verhindert overflow wenn Screen small */
  padding: 0.5rem;
  /*padding-left: 0.3rem;*/
  /*padding-right: 0.3rem;*/
  flex-basis: 0;
  flex-grow:1;
  min-width: 430px;
  border: 20px solid white;
  border-radius:15px ;
}

  .risk-panel{
    flex-grow: 1;
  /*  background-color: #606060;*/
  }

  .panel-title{
    font-family: Arial;
    font-weight: normal;
    font-size: 25px;
    padding: 1rem;
    margin: 0;
    text-align: center;
    color: white;
    background-color: #15202b;
  }


   h4.choice-status {
     margin: 0;
     padding: 0;
     color: #252f3a;
     font-weight: bold;
     text-transform: uppercase;
   }

  .risk-panel-inner-body{
  display: flex;
  background-color: white;
  border: 4px solid #15202b; /*#606060*/
  }

  /* Experience Sampling------------------------------------------------------------*/

  .experience {
    background-color: white;
  }

  .exp-card1 {
    border: 2px solid #252f3a;
    padding: 1rem;
    border-radius: 25px;
    background-image: radial-gradient(#6c757d, #6c757d);
    flex-basis: 8rem;
    max-width: 8rem;
    flex: 33%;
    height: 12.5rem;
    margin: 1rem;
    margin-right: 0rem;
    display: flex;
  }

  .exp-card2 {
    border: 1px solid #606060;
    padding: 1rem;
    border-radius: 25px;
    background-color: #f2f2f2;
    flex-basis: 8rem;
    max-width: 8rem;
    flex: 33%;
    height: 12.5rem;
    margin: 1rem;
    margin-right: 0rem;
    display: flex;
  }
  .experience p {
    color: white;
    align-self: center;
    justify-self: center;
    flex-basis: 0;
    flex-grow:1;
    text-align: center;
  }

  .experience.exp-card2 p {
    color: black;
    font-size: 20px;
  }

  .experience.exp-card1 p{
    font-size: 25px;
  }

   .exp-container-button{
     flex-basis: 0;
      /* this means this item takes up the extra space */
     display: flex;
     justify-content: center;
     align-items: center;
     flex: 33%;
   }
   .btn-game{
     transition-duration: 0.2s;
     text-align: center;
     border: 1px solid grey;
     background-color: darkgrey;
   }

   .btn-game:hover {
     background-color: dimgrey;
     border: 1px solid grey;
     color: white;
   }
/* Description Box ------------------------------------------------------------*/

  .description {
    background-color: white;
  }

  .description p {
    color: white;
    align-self: center;
    justify-self: center;
    flex-basis: 0;
    flex-grow:1;
    text-align: center;
  }
  .desc-card1 {
    border: 2px solid #252f3a;
    padding: 1rem;
    border-radius: 25px;
    background-image: radial-gradient(#6c757d, #6c757d);
    flex-basis: 8rem;
    min-width: 8rem;
    height: 12.5rem;
    margin: 1rem;
    display: flex;

  }

  .description.desc-card1 p{
    font-size: 25px;
  }

  .table{
    table-layout: fixed ;
    width: 100% ;
  }
  .table td, .table th{
    text-align: center;
    width: 100%;
    font-size: 20px;

  }
  .desc-container-table{
    display: flex;
    flex-basis: 0;
    flex-grow:1;
    justify-content: center;
    align-items: center;
    padding: 1rem;
  }

  .table thead th {
    border-top: none;
    align-items: center;
  }





/* real-game --------------------------------------*/


.real-game{
  flex-wrap: wrap; /* verhindert overflow wenn Screen small */
  padding: 0;
  padding-right: 0.7rem;
}

 .real-game h4  {
   margin: 0;
   margin-right: 0.5rem;
   font-weight: bold;
   flex-grow: 1;
   text-align: center;
  }


 .real-game p  {
   margin: 0;
   padding: 0;
   flex-grow: 1;
   text-align: center;
  }

.flex-container.real-game {
  flex-direction: column;
  padding-top: 2rem;
}

.flex-container.real-game p{
  font-size: 16px;
}

   .btn-real-game{
     transition-duration: 0.2s;
     text-align: center;
     border: 1px solid #0062cc;
     background-color: #0062cc;
     color: white;
     font-weight: normal;
     min-width: 365px;
     margin-top: 1rem;
     font-size: 20px;
   }

   .btn-real-game:hover {
     background-color: #01176e;
     border: 1px solid #01176e;
     color: white;
   }
/*  --------------------------------------*/

.flex-container.radio-button { /* den ganzen Webkitkram brauchen wir wegen eines Bugs in Safari*/
  justify-content: center;
  padding: 0;
  /* -webkit-justify-content: center;*/
  /*  align-items: center;*/
  -webkit-align-items: center;
  flex-direction: column;
  flex-wrap: wrap;
  /*align-content: center;*/
}
  .custom-control.custom-radio {
  min-width: 400px; /* ohne eine fixed width, kann man die Elemente nicht ausrichten*/
  margin: 1rem;
  }



/* ---------------------------------------------------------------------------------*/
/* Radio Buttons */
/* ---------------------------------------------------------------------------------*/

.funkyradio div {
  clear: both;
  overflow: hidden;
}

/* das ist der ganze button */
.funkyradio label {
  margin: 0;
  min-width: 365px;
  padding: 0.5rem;
  *padding-right: 0.5rem;
  border-radius: 3px;
  border: 1px solid #0062cc;
  font-weight: normal;
  font-size: 20px;
}

/* Der ganze Label button, der nicht ausgewaehlt ist (ueberschreibt Normalform oben)*/
.funkyradio input[type="radio"]:not(:checked) ~ label {
  width: 100%;
  border-radius: 3px;
  border: 1px solid lightgrey;
  font-weight: normal; /*betrifft die Schrift des Labels*/
  color: grey;
}

.funkyradio input[type="radio"]:empty {
  display: none;
}

.funkyradio input[type="radio"]:empty ~ label {
  position: relative;
  line-height: 2em;
  text-indent: 3.25em;
  margin-top: 0.5rem;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

/*betrifft die checkmark box*/
.funkyradio input[type="radio"]:empty ~ label:before {
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  content: '';
  width: 2.5em;
  /*background: #D1D3D4;*/
  border-radius: 2px 0 0 2px;
  font-family: "Font Awesome 5 Free";
  content: '\2718';
  text-indent: .6em;
  color: darkgrey;
  padding: 0.5rem;
  padding-left: 0.4rem;/*betrifft das checkmark*/ /*betrifft das checkmark*/
}

/* Hover options */

.funkyradio input[type="radio"]:hover:not(:checked) ~ label:before {  /*betrifft das checkmark*/
  font-family: "Font Awesome 5 Free";
  content: '\2714'; /* font awesome kuerzel */
  text-indent: .6em;
  color: black;
  padding: 0.5rem;

}

.funkyradio input[type="radio"]:hover:not(:checked) ~ label {
  color: black;  /*betrifft die Schrift des Labels*/
  border: 1px solid black;
}


/* Checked Labels */

.funkyradio input[type="radio"]:checked ~ label:before {
  font-family: "Font Awesome 5 Free";
  content: '\2714';
  text-indent: .6em;
  color: #0062cc; /*betrifft das checkmark*/
}

.funkyradio input[type="radio"]:checked ~ label {
  color: black; /*betrifft die Schrift des Labels*/
  font-weight: normal;
}

.funkyradio-default input[type="radio"]:checked ~ label:before {
 /* background-color: darkred; *//*betrifft die Checkmark Box*/
}

/*--------------------------------------------------------*/