@font-face {
  font-family: Gotham;
  src: url(css/gotham-book.otf);
}

@font-face {
  font-family: Gotham;
  src: url(css/gotham-bold.otf);
  font-weight: bold;
}


/*** CONTAINERS ***/

HTML, BODY {
  color: #000000;
  font-family: Gotham, Century Gothic, Sans-Serif;
  line-height: 1.4;
}

BODY {
  padding: 0px;
  margin: 0px;
  background: #FFFFFF;
}


/*** TEKST STIJLEN ***/

H1 {
  color: #057EB2;
  font-weight: bold;
}

H2 {
  color: #000000;
  font-weight: bold;
}


A {
  color: #057EB2;
  font-weight: bold;
  text-decoration: none;
}

.btn-primary {
  background-color: #057EB2;
  color: #FFFFFF;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: #057EB2;
  color: #000000;
}


/*** PAGE TOP ***/

.section-page-top {
  text-align: right;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.section-page-top .btn-back {
  float: left;
}

.page-top-column {
  display: inline-block;
  padding-left: 2rem;
  padding-top: 0.5rem;
  color: #DD0000;
  font-family: Gotham, Century Gothic, Sans-Serif;
  font-size: 0.85rem;
  font-weight: bold;
}

.page-top-column SPAN {
  font-size: 1.45rem;
}


/*** HEADER ***/

.section-header {
  padding: 1rem 0;
}

.section-header .melden-logo {}

.section-header .melden-logo IMG {
  width: 100%;
  max-width: 100px;
}


/*** LOADER ***/

#loader {
  display: none;
  background-color: rgba(15, 155, 215, 0.7);
  color: #FFFFFF;
  text-align: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#loader .outer {
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  font-size: 2rem;
}


/*** CONTAINERS ***/

#container_formulier { display: block; }
#container_end { display: none; }


/*** SECTION ***/

.section {
  margin-top: 4px;
}

.melden-section-button {
  display: block;
  position: relative;
  background-color: #057EB2;
  margin-bottom: 1rem;
  padding: 0.7rem 2.5rem 0.7rem 1rem;
  font-size: 1.5rem;
  color: #FFFFFF;
}

.section.disabled .melden-section-button {
  background-color: #6c757d;
  color: #FFFFFF;
}

.melden-section-button:hover,
.melden-section-button:focus {
  color: #FFFFFF;
  text-decoration: underline;
}

.melden-section-button SPAN {
  position: absolute;
  right: 15px;
  top: 50%;
  margin-top: -14px;
  pointer-events: none;
}

.melden-section-button .fa-chevron-down { display: block; }
.melden-section-button .fa-chevron-up { display: none; }
.section.opened .melden-section-button .fa-chevron-down { display: none; }
.section.opened .melden-section-button .fa-chevron-up { display: block; }
.section.disabled .melden-section-button .fa-chevron-down { display: none; }
.section.disabled .melden-section-button .fa-chevron-up { display: none; }



/*** FORM ***/

.form-group {
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
  margin-bottom: 0.4rem;
}

.required-star {
  padding-left: 5px;
  color: #DD0000;
}

.error {
  margin-top: 0.3rem;
  color: #DD0000;
}

.vraag-invalid.form-group {
  border-left: 5px solid #DD0000;
  background-color: #FFEEEE;
}

.vraag-invalid INPUT,
.vraag-invalid TEXTAREA {
  border: 1px solid #DD0000;
}

#alert_betrokkenen { display: none; }


INPUT, TEXTAREA, BUTTON {
  box-sizing: border-box;
  font-family: inherit;
  font-size: inherit;
}

INPUT.input,
TEXTAREA {
  font-family: inherit;
  font-size: inherit;
}

INPUT.input,
TEXTAREA {
  border: 1px solid #7F9DB9;
  padding: 2px 4px;
}

.volgende { float: right; }
.vorige { float: left; }

LABEL { cursor: pointer; }

.form-check-label {
  padding: 0.2rem 0;
}


/*** TABLE ***/

#tbl_persons_involved {
  margin: 1rem 0;
}

#tbl_persons_involved .btn {
  float: right;
  margin-left: 0.5rem;
  cursor: pointer;
}

.person-involved {
  padding: 0.3rem 0.5rem;
}
.person-involved:nth-child(odd) {
  background-color: rgba(15, 155, 215, 0.2);
}


/*** MODAL ***/

.modal-header {
  background-color: #057EB2;
  color: #FFFFFF;
}

.modal-header .close {
  color: #FFFFFF;
}
.modal-header .close:hover,
.modal-header .close:focus {
  color: #000000;
}


/*** RANGE ***/

.range-numbers {
  margin: 0;
}

.range-numbers .col-1 {
  padding: 0;
}

.range-numbers .range-number {
  text-align: center;
  position: relative;
}

.range-numbers .range-number LABEL {
  display: block;
  margin: 0;
  padding: 0.5rem 0 1.3rem 0;
}

.range-numbers .range-number INPUT {
  position: absolute;
  left: 50%;
  bottom: 5px;
  margin-left: -6px;
}

.range-numbers .range-number INPUT[type=radio]:checked ~ LABEL {
  background: #71c5ea;
  border-radius: 3px;
}


.range-labels {
  margin-top: 0.5rem;
  overflow: hidden;
}

.range-label-left { float: left; }
.range-label-right { float: right; }


/*** SAMENVATTING ***/

.collapse4 H3 {
  margin-bottom: 1rem;
}

.samenvatting-row {
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid #DDD;
}

.samenvatting-label {
  color: #066c98;
}

.samenvatting-antwoord {}

.samenvatting-betrokkene {
  margin-bottom: 1rem;
}

.message-hide {
  display: none;
}



/* Extra small */
@media (max-width: 576px) {
  .section-header .melden-logo {
    display: none;
  }
  .section-header H1 {
    font-size: 1.5rem;
  }
}

/* Small */
@media (min-width: 576px) {
  /* Do stuff */
}

/* Medium */
@media (min-width: 768px) {
  /* Do stuff */
}

/* Large */
@media (min-width: 992px) {
  /* Do stuff */
}

/* Extra large */
@media (min-width: 1200px) {
  /* Do stuff */
}