/* UM colors
#001C3D
#E84E10
#00A2DB
#F8884A
#005370
#F8B296
#ABD1FF
#A1360B */


@font-face {
    font-family: 'IBMPlexSans-Regular';
    src: local('IBMPlexSans-Regular'),
         url('/static/fonts/IBMPlexSans-Regular.ttf') format("truetype");
}



html {
    position: relative;
    min-height: 100%;
    }
    
body {
    /* Margin bottom by footer height */
    margin-bottom: 80px;
}
    
footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    /* Set the fixed height of the footer here */
    height: 80px;
    background-color: #efefef;
}




html * {
    font-family: IBMPlexSans-Regular;
}

/* h1 {
    color: #001C3D;
} */

h1, h2, h3, h4, h5, h6 {
    color:  #001C3D;
    margin-top: 1em;
}

.logo {
    height: 40px;
    margin: 5px;
  }

.um-blue-2 {
    color: #00A2DB;
}

.bookcover {
    height: 300px;
    width: auto;
}

.graph {
    width: 100%;
    height: auto;
}

.bg-green {
    background: lightgreen;
}

.bg-yellow {
    background: #ffff66;
}

.bg-orange {
    background: #ffb266;
}

.bg-red {
    background: #FF6666;
}

.question-label {
    background: whitesmoke;
}


/* color PCAM when checked */
/* if you want to implement this, change {{ choice }} in pcam_form.html to:
{{ choice.tag }}
<label for="{{ choice.id_for_label }}">
{{ choice.choice_label }}
</label> */
/* 
input[type="radio"][value="1"]:checked + label {
    height: 100%;
    background-color: lightgreen;
}

input[type="radio"][value="2"]:checked + label {
    height: 100%;
    background-color: #ffff66;
}

input[type="radio"][value="3"]:checked + label {
    height: 100%;
    background-color: #ffb266;
}

input[type="radio"][value="4"]:checked + label {
    height: 100%;
    background-color: #FF6666;
} */


 /* Popup container */
 .popup {
    position: relative;
    /* display: inline-block; */
    cursor: pointer;
  }
  
  /* The actual popup (appears on top) */
  .popup .popuptext {
    visibility: hidden;
    width: 350px;
    background-color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    bottom: 75%;
    left: 0%;
    margin-left: -80px;
  }
  
  /* Popup arrow */
  .popup .popuptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
  }
  
  /* Toggle this class when clicking on the popup container (hide and show the popup) */
  .popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s
  }
  
  /* Add animation (fade in the popup) */
  @-webkit-keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
  }
  
  @keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
  } 


.btn-xlarge {
    padding: 18px 28px;
    font-size: 22px;
    line-height: normal;
    -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
            border-radius: 8px;
}




.checkbox-onderzoek {
    width: 30px;
    height: 30px;
}

.large-label {
    font-size: 1.3em;
}

.errorlist {
    color: red;
}