html {
    font-family: "Lucida Sans", sans-serif;
    background-color: #1f1f1f;
    min-height: 100%;
}

.hide{
    display:none;
}

.section-heading{
    background-color: rgba(255, 255, 255, 0.5);  
    padding: 1rem;
    text-align: center;
    margin-bottom: 1rem;

    font-size:large;
    font-weight: bold;
}

.content-wrapper {
    margin-right: auto;
    margin-left: auto;
    max-width: 960px;
    min-width: 400px;
    min-height: fit-content;
    padding-bottom: 1rem;
    background-color: rgba(255, 255, 255, 0.1);
}

.header {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    color:rgba(245, 245, 245, 0.767);
    background-color: rgba(255, 255, 255, 0.2);
    padding: 15px;
    padding: 0px;
}

.content {
    padding: 1rem;
}

.default-container {
    background-color: rgba(255, 255, 255, 0.5);  
    padding: 1rem;
    text-align: center;
    margin-bottom: 1rem;
}

.intro-text {
    background-color: rgba(255, 255, 255, 0.5);  
    padding: 1rem;
    text-align: center;
    margin-bottom: 1rem;
}

/* Login Section */
.login {
    font-weight: bold;
    background-color: rgba(255, 255, 255, 0.5);  
    padding: 1rem;
    margin-top: 2rem;
    text-align: center;
}

.login-failure {
    color: darkred;
    font-weight: bold;
    background-color: rgba(255, 255, 255, 0.2);
    padding: 0.5rem;
    min-width: fit-content;
    max-width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

/* Contact Section */
.contacts {
    margin-top:5rem;
    background-color: rgba(255, 255, 255, 0.5);
    padding: 1rem;
}

.contacts-heading {
    background-color: rgba(255, 255, 255, 0.5); 
    text-align: center;
    font-weight:bold;
    padding: 1rem;
}

.contact {
    background-color: rgba(255, 255, 255, 0.2);
    padding: 1rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.contact-name {
    font-weight:bold;
}

/* Funding Disclaimer */
.funding-disclaimer {
    background-color: rgba(255, 255, 255, 0.5);  
    padding: 1rem;
    margin-top: 1rem;
    margin-left:auto;
    margin-right:auto;
}

.funding-disclaimer-header {
    background-color: rgba(255, 255, 255, 0.5); 
    text-align: center;
    font-weight:bold;
    padding: 1rem;
}

.funding-disclaimer-text {
    background-color: rgba(255, 255, 255, 0.2);
    padding:1rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Logo */
.logos{
    text-align: center;
    margin-top: 0.5rem;
    margin-left: auto;
    margin-right:auto;
    padding: 1rem;
}

.questionnaire {
    background-color: rgba(255, 255, 255, 0.5);
}


/* Tool Selection */

.tool-selection {
    max-width: 50%;
    min-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    color:black;
    padding: 15px;
}

.button {
    background-color: #4CAF50;
    background-color: rgba(255, 255, 255, 0.5);
    border: none;
    color: white;
    padding: 15px 32px;
    margin-bottom: 15px;
    text-align: center;
    text-decoration: none;
    display: block;
    font-size: 16px;
    /* fade in */
    opacity: 0.8;
    transition: 0.3s;
  }
.button:hover{
    opacity: 1.0;
}


/* disable buttons for tools not yet implemented */

.tool-disabled {
    /* grey out the tools not yet implemented*/
    color:gray;
    pointer-events: none;
}

.tool-c {
    font-weight: bold;
    color: white;
}

/* custom categories */
.add-cc-container{
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1.0rem;
    margin-bottom: 0.0rem;
    background-color: rgba(255, 255, 255, 0.5);
    padding: 1rem;
}
.add-cc-expandable-container{
    display:none;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0.0rem;
    margin-bottom: 0.0rem;
    background-color: rgba(255, 255, 255, 0.5);
    padding: 1rem;
}
.add-cc-expansion-button{
    background-color: rgba(255, 255, 255, 0.2);
    padding: 1rem;
    display:inline;
    margin-left: 0rem;
    margin-right: 0.5rem;
}
.add-cc-button{
    padding:1rem;
    text-align: center;
}
.add-cc-text{
    background-color: rgba(255, 255, 255, 0.2);
    padding: 1rem;
    display:inline;
}

/* custom questions */
.add-cq-container{
    width: 90%;
    margin-left: 0.5rem;
    margin-right: 1rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    background-color: rgba(255, 255, 255, 0.5);
    padding: 1rem;
}
.add-cq-expandable-container{
    display:none;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0.0rem;
    margin-bottom: 0.0rem;
    background-color: rgba(255, 255, 255, 0.5);
    padding: 1rem;
}
.add-cq-text{
    background-color: rgba(255, 255, 255, 0.2);
    padding: 1rem;
    display:inline;
}
.add-cq-text.input{
    width:100%;
}
.add-cq-qscore{
    padding:1rem;
}
.add-cq-button{
    text-align: right;
}

/* Sanity Check*/
.sc-heading{
    background-color: rgba(255, 255, 255, 0.2);
    padding: 1rem;
    margin-bottom: 1rem;
    font-size: larger;
    font-weight: bold;
    text-align: center;
}

.sc-questions{
    background-color: rgba(255, 255, 255, 0.2);
    padding: 1rem;
}

.sc-question{
    background-color: rgba(255, 255, 255, 0.2);
    padding: 1rem;
}
.sc-question-cb{
    background-color: rgba(255, 255, 255, 0.2);
    display:inline-block;
    margin-right:0px;
    width: 100px;

}

.sc-question-label{
    display:inline-block;
    text-align: left;
}

.sc-question-tooltip{
    visibility: hidden;
    width: fit-content;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 0.5rem;
    border-radius: 6px;
    font-size: small;
}

.sc-warning{
    background-color:red;
    padding: 1rem;
    margin:1rem;
}

.sc-selection-submit{
    text-align:center;
    line-height: normal;
    width: 60%;
    padding: 1rem;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1rem;
    background-color: rgba(245, 245, 245, 0.253);
}



/* VP Management Chart*/
.diagram {
    background-color: rgba(255, 255, 255, 0.2);
    padding: 1rem;
}

.svg-container {
    padding: 5rem;
}

/* Box Bewertung des VP*/
/* label="Bewertung_Box*/
/* id="rect5266*/
#rect5266 {
    fill: orange;
}

/* Box Checkliste*/
/* label="Checkliste_Box*/
/* id="rect5310*/
#rect5310 {
    fill: orange;
}

/* repair Box 'Gravierende Schwierigkeiten*/
/* id="rect5324*/
#rect5324 {
    fill: white;
}

/* repair path from Checkliste/
/* id="path5322*/
/* compare to id="path5290*/
path {
    stroke: black;
    stroke-width: 0.4;
    stroke-miterlimit: 8;
    fill-rule: evenodd;
}

/* the actual tooltip*/
.svg-tooltip{
    display:none;
    background-color: rgba(255, 255, 255, 0.781);
    min-height:fit-content;
    max-width:fit-content;
    padding: 0.5rem;
    overflow:hidden;
    white-space:normal;
}




/** Weight selection **/
.weight-selection-container {
    margin-top:1rem;
    background-color: rgba(255, 255, 255, 0.5);
    min-height:fit-content;
    padding: 1rem;
}

.subcategory-weight-selection {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    background-color: rgba(255, 255, 255, 0.5);
    padding: 1rem;

    font-size: large;
    font-weight: bold;
}

.subcategory-weight-selector {
    font-size: xx-large;
}

.category-disabled {
    color:grey;
}

.weight-selection-submit {
    text-align:center;
    line-height: normal;
    width: 60%;
    padding: 1rem;
    margin-left: auto;
    margin-right: auto;
    background-color: rgba(245, 245, 245, 0.253);
}

.weight-selection-submit-button {
    margin-left: auto;
    margin-right: auto;
}


/* VPM Fragenkatalog */
.VPM-Fragenkatalog {
    background-color: rgba(255, 255, 255, 0.5);
    padding:1rem;
}

.vpm-category-text {
    line-height: normal;
    padding: 0.5rem;
    background-color: rgba(245, 245, 245, 0.253);
    margin-bottom: 0.5rem;
}

.tooltip-image {
    height: 1rem;
    margin-right: 0.5rem;
}

/* Tooltip container */
.vpm-category-tooltip {
    position: relative;
    display: inline-block;
    /*border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
  }
  
  /* Tooltip text */
  .vpm-category-tooltip .vpm-category-tooltiptext {
    visibility: hidden;
    width: fit-content;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 0.5rem;
    border-radius: 6px;
    font-size: small;
  
    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
  
    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 0.3s;
  }
  
  /* Tooltip arrow */
  .vpm-category-tooltip .vpm-category-tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
  }
  
  /* Show the tooltip text when you mouse over the tooltip container */
  .vpm-category-tooltip:hover .vpm-category-tooltiptext {
    visibility: visible;
    opacity: 1;
  } 

  .expand-questions{
      margin-top:0.5rem;
      width:fit-content;
      background-color: darkgray;
  }

  .expand-questions:hover{
    margin-top:0.5rem;
    width:fit-content;
    background-color: darkgray;
}

.expand-btn-control {
    display:none;
}

.expand-btn {
    width: 60px;
    height: 20px;
    width: fit-content;
    height: fit-content;
    background: silver;
    border-radius: 5px;
    padding: 1px 3px;
    box-shadow: 1px 1px 1px #000;
    display: block;
    text-align: center;
    background-image: linear-gradient(to bottom, #f4f5f5, #dfdddd);
    font-family: arial;
    font-size: 12px;
    line-height:20px;
}

.expand-btn:hover {
    background-image: linear-gradient(to bottom, #c3e3fa, #a5defb);
}

.expand-btn:active {
    margin-left: 1px 1px 0;
    box-shadow: -1px -1px 1px #000;
    outline: 1px solid black;
    background-image: linear-gradient(to top, #f4f5f5, #dfdddd);
}

.btnControl:checked + label {
    width: 70px;
    height: 74px;
    line-height: 74px;
}

.vpm-expandable-questions{
    background-color: rgba(245, 245, 245, 0.253);
    padding:0.2rem;
  }

  .vpm-expandable-question{
    background-color: rgba(245, 245, 245, 0.253);
    padding:1rem;
    margin-top:1rem;
    margin-bottom:1rem;
    margin-left:2rem;

    font-size: large;
    font-weight: bold;
  }

  .subcategory-score-selection{
    background-color: rgba(245, 245, 245, 0.253);
    margin-left: auto;
    margin-right: auto;
    margin-right: 2rem;
    width: fit-content;
    font-size: larger;
  }

  .score-selection-submit {
    text-align:center;
    line-height: normal;
    width: 60%;
    padding: 1rem;
    margin-left: auto;
    margin-right: auto;
    background-color: rgba(245, 245, 245, 0.253);
}

.score-selection-submit-button {
    margin-left: auto;
    margin-right: auto;
}


/** VPM Auswertung **/
.eval-category{
    background-color: rgba(245, 245, 245, 0.253);
    padding:1rem;
    margin-top:1rem;
    margin-bottom:1rem;
    margin-left:2rem;
}

.eval-category-main{
    background-color: rgba(245, 245, 245, 0.253); 
    padding:1rem;
}
.eval-cat-title{
    display:inline-block;
    font-size: larger;
    font-weight: bold;
}
.eval-cat-percentage{
    text-align:right;
}

.vpm-eval-sc{
    background-color: blue;
}

.eval-final{
    background-color: rgba(245, 245, 245, 0.253);
    padding:1rem;
    margin-top:1rem;
    margin-bottom:1rem;
    margin-left:2rem;
    text-align: center;
}
.eval-final-text{
    font-size: normal;
    font-weight: bold;
    margin-bottom: 1rem;
}
.eval-final-link{
    font-size: larger;
    font-weight: bold;
    padding:1rem;
    text-align: right;
}

.eval-container{
    width:100%;
    margin-left:auto;
    margin-right:1rem;
}
.eval-good{
    font-weight:bold;
    background-color: green;
    padding:0.5rem;
}
.eval-ok{
    font-weight:bold;
    background-color: yellow;
    padding:0.5rem;
}
.eval-bad{
    font-weight:bold;
    background-color: red;
    padding:0.5rem;
}
.eval-invalid{
    font-weight:bold;
    color:darkgray;
    background-color: grey;
    padding:0.5rem;
}


/* VPM Maßnahmenkatalog */
.qm-links-container{
    background-color:rgba(255, 255, 255, 0.5);  
    padding: 1rem;
    text-align: center;
    margin-bottom: 1rem;
}
.qm-links{
    background-color: darkgray; 
    padding: 1rem;
    text-align: center;
    margin-bottom: 1rem;
}

.checklist-title{
    font-size: larger;
    font-weight: bold;
}

.checklist-category{
    background-color: rgba(255, 255, 255, 0.5);  
    padding: 1rem;
    margin-bottom: 1rem;
}
.checklist-category-percentage{
    display:none;
}
.checklist-questions{
    display:block;
}

/* VPM Maßnahmenkatalog Auswertung */
.checklist-category-container{
    background-color: rgba(255, 255, 255, 0.5);  
    padding: 1rem;
    margin-bottom: 1rem;
}
.checklist-category-result{
    text-align:right;
}
.checklist-eval-question-text{
    text-align: left;
}
.checklist-eval-question-score{
    text-align: right;
    font-size:medium;
    font-weight: normal;
}

/* Questionnaire */
.questionnaire-main-category{
    text-align: center;
    font-size: larger;
    background-color: greenyellow;
    margin-bottom: 1rem;
}

.questionnaire-sub-category{
    text-align: center;
    font-size: large;
    background-color: teal;
    border-radius: 1rem;
    width: 50%;
    padding: 0.5rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0.5rem;
}

.questionnaire-item{
    text-align: center;
    font-size: medium;
    line-height: 1.6;
    background-color: darkviolet;
    background-color: rgba(245, 245, 245, 0.253);
    border-radius: 1rem;
    width: 75%;
    padding: 1rem;
    margin-left:auto;
    margin-right:auto;
    margin-bottom: 1rem;
}

.questionnaire-item-text{
    line-height: normal;
    border-radius: 1rem;
    padding: 0.5rem;
    background-color: rgba(245, 245, 245, 0.253);
}

 /* Tooltip container */
 .tooltip {
    position: relative;
    display: inline-block;
  }
  
  /* Tooltip text */
  .tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
  
    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
  
    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 0.3s;
  }
  
  /* Tooltip arrow */
  .tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
  }
  
  /* Show the tooltip text when you mouse over the tooltip container */
  .tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
  } 

.questionnaire-item-selection{
    display: flex;
    flex-direction:column;
    line-height: 1.6;
    padding-top: 1rem;
}

.questionnaire-submit{
    text-align:center;
    line-height: normal;
    width: 75%;
    padding: 1rem;
    border-radius: 1rem;
    margin-left: auto;
    margin-right: auto;
    background-color: rgba(245, 245, 245, 0.253);
}

input[type="submit"]{
    font-size: 1em;
    }

.weight-selection{
    width:auto;
    margin-right: 0;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    color: green;
    font-size: 1.3em;
}