/* 31.5.2022 */
/* --------------- Popups --------------- */
    .ui-dialog {
        display: none;
        width: 900px !important;
    }
    .ui-dialog-titlebar-close {
        display: none;
    }
    .ui-widget-content {
        border: unset;
    }
/* --------------- HTML --------------- */
    body {
        color: black;
    }
    div {
        font: normal 1.5rem Arial, sans-serif !important;   /* Don't do em, because otree changes the size for Waitpages!!! */
        /* font: normal 1.3rem Arial, sans-serif !important; /* My old Font*/
    }
    div.solid {
        /* für umrandete Sachen wie z.B. einzelne Argumente bei akzeptieren/nicht akzeptieren*/
        border-style: solid;
        padding: 15px;
        /*Anwendungen:
        - Akzeptieren,
        - Bestes Arg,
        */
    }
    h1 {
        width: 100%;
        font-size: 2rem !important;
        font-weight: bold;
        text-align: center;
    }
    h2 {
        width: 100%;
        font-size: 1.8rem !important;
        font-weight: bold;
        text-align: center;
    }
/* --------------- My Elements --------------- */
    .starttokeninfo_indiscontainer {
        font-size: 1.4rem;   /* Don't do em, because otree changes the size for Waitpages!!! */
    }

    .passteh {  /* for checks */
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        height: 0;
        width: 0;
        z-index: -1;
    }
/* --------------- Forms --------------- */
    .form-control {
        font-size: 1em;
    }
    .form-check-input {  /* How far are the radio buttons away from the labels? */
        margin-left: -1.5em;
    }
/* --------------- oTree --------------- */
    .card {
        /* Achtung. Bei normalen Pages ist "card" die debug-info. Bei Waitpages ist "card" die gesamte Seite.
         Deswegen nicht hier display: none eingeben, sondern bei debug-info!! */
    }
    .debug-info {
        display: none;
    }

    .card-header {
        font-size: 2rem;
    }
    .otree-wait-page {
        font: normal 1.5rem Arial, sans-serif !important;
        max-width: 70% !important;
    }
    .btn-primary {   /* Sind z. B. die Weiter-Buttons */
        padding: 0.4rem;
        background-color: red;
        color: black;
        font: normal 1.5rem Arial, sans-serif !important;
    }
    .btn-secondary {  /* Sind z. B. die Buttons für das beste Argument*/
        background-color: grey;
        color: black;
        color: white;
        font: normal 1.5rem Arial, sans-serif !important;
    }
    .otree-content {
        width: 100%
    }
    .otree-body {
        background-color: white !important;
        margin-top: 10px;
        padding: 1.25rem;
        font: normal 1.5rem Arial, sans-serif !important;
        min-width: 100%;
    }
    .button {
        background-color: red;
        color: black;
        font: normal 1.5rem Arial, sans-serif !important;
    }
    .alert-warning {   /* Das ist oben die Zeitanzeige für das System-Timeout */
        color: #1b1a15;
        background-color: #cdecff;
        border-color: #cdecff;
        text-align: right;
    }
    .container {
        margin: auto !important;
    }
/* --------------- Buttons --------------- */
    /* Button always on the same place */
    .buttonclassfixedposition {
      position: fixed;
      bottom: 30px;
      right: 30px;
      width: 90%;
      text-align: right;
    }
    .buttonclassmoreflexible {
      bottom: 30px;
      right: 0;
      width: 100%;
      text-align: right;
    }
    .buttonclassonline {
        margin-top: 4em;
        margin-right: 2em;
        text-align: right;
    }
 /* --------------- Diverse --------------- */
    .VotingResults {
        padding-top: 30px;
        padding-bottom: 30px;
        border-style: solid;
        vertical-align: middle
    }
    .ChatPageContainer {
        /*margin-top: 10px;  /* weggenommen, weil das bei waitpage und normal page unterschiedlich angewandt wird.*/
        max-width: 100%;    /* ist von card-body von waitpage übernommen*/
        padding-right: 15px;
        padding-left: 15px;

        margin-right: auto;
        margin-left: auto;

     /* border-style: dashed; Achtung. Wenn nichts anderes angegeben ist, wird sowohl das äußere, als auch das innere angemalt*/
     }
/* --------------- Charts --------------- */
    .spacer1 {
        height: 200px;
        width: 5%;
    }
    .spacer1heading {
        width: 5%;
    }
    .chartA {
        height: 300px;
        border-style: solid;
        width: 40%;

    }
    .chartAheading {
        width: 40%;
    }
    .chartAB_spacer {
        height: 200px;
        width: 10%;
    }
    .chartAB_spacerheading {
        width: 10%;
    }
    .chartB {
        height: 300px;
        border-style: solid;
        width: 40%;
    }
    .chartBheading {
        width: 40%;

    }
    table, th, td {
        text-align: right;
    }
    .info_graph_row {
        height: 30%;
        display: flex;
        justify-content: center;
    }
    .ChartContainerFor1 {
        max-width: 800px;
        height: 300px;
        margin: 0 auto;
        border-style: solid;
    }
    .ChartContainerFor2{
        height: 430px;
        border-style: solid;
        padding-top:15px;
        margin-top: 15px; /* Damit die y-Achse nicht so weit oben ist */
        margin-bottom: 0px;
        margin-left: 0px;
        margin-right: 0px;
    }


    .spacer1 {
        height: 200px;
        width: 5%;
    }
    .chartAB_spacer {
        height: 200px;
        width: 10%;
    }
    .highcharts-axis-title {
        font-size: 1.6em !important;
    }
    /* --------------- A B  --------------- */
    .A {
        margin-right: 30px;
        width: 40%;
    }
    .B {
        margin-right: 30px;
        width: 40%;
    }
    .A_roundandtext {
        margin-right: 30px;
        width: 40%;
        margin-left: 120px;
    }
    .lefttable{
         padding-right: 1em;
    }

/* --------------- Pages with Chats --------------- */
    .chatsideargs {
        font-size: 1.1rem !important;
    }
    .inputfor6 {
        width: 7.69%;    /*  = 1/13 Felder */
    }
    .Zeit {
            margin-right: 5px;
            margin-left: 5px;
            text-align: right;
    }
    .UeberschriftChat {
            overflow: hidden;    /*The overflow property specifies what should happen if content overflows an element's box. (Quelle: W3schools)*/
            //margin-right: 5px;
            //margin-left: 5px;
            /*padding: 15px;*/
            border-style: solid;
            text-align: center;
    }
    .ArgChatPart {

        overflow: auto;    /*Muss zu auto umgestellt werden. The overflow property specifies what should happen if content overflows an element's box. (Quelle: W3schools)*/
        //margin-right: 5px;
        //margin-left: 5px;
        position: relative;
        border-style: solid;
    }
    .ArgChatPartArg {
        padding: 15px;
        width:35%;
        height: 100%;
        border-style: solid;
    }
    .ArgChatPartCHATFenster {
        top: 0;
        width: 60%;
        height: 100%;
        right: 0;
        position:absolute;
        border-style: solid;
    }
    .ChatFensterErsatz {
        padding: 20%;
    }
/* --------------- Chat --------------- */

    .otree-chat {
        padding: 0px !important;
        margin: 0px !important;
        height: 100%;
    }
    .otree-chat__messages {
        /* Important! Don't change height or width here !! */
        font-size: 0.8em !important;
    }
    .otree-chat__nickname {
        font-weight: bold !important;
        width: 210px !important;
    }
    .otree-chat__input {
        background-color: #d8ecf3;
        width: 80% !important;
    }
    .HeadingEnter {
        /* Heading of Token assignment */
        border-style: none solid none solid;
        height: auto;
        color: black;
        padding: 5px; /* Das gleiche nehmen wie bei Token assignment */
        text-align: center;
        margin-right: 5px;
        margin-left: 5px;
    }