/*
    Allows you to set grid column sizes for multiple screens at once
*/
/*
    Allows you to debug grid column sizes
*/
.page {
  margin-top: 50px; }

.page-content {
  padding-top: 15px !important;
  bottom: 0 !important; }

#hostHeader {
  background-color: #428BCA;
  border: 1px solid #428BCA;
  color: white;
  box-shadow: 0.75px 0.75px 6px 1px rgba(0, 0, 0, 0.16); }

#cntInfo {
  position: relative;
  width: calc(16.66667% - 23.33333px);
  float: left;
  margin-left: 20px;
  background-color: #428BCA;
  color: white;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 50px;
  margin-left: 0 !important;
  height: calc(100vh - 50px - 15px);
  border: 1px solid #428BCA; }
  @media screen and (min-width: 1260px) and (max-width: 1599px) {
    #cntInfo {
      width: calc(16.66667% - 17.5px);
      float: left;
      margin-left: 15px; } }
  @media screen and (min-width: 0) and (max-width: 1259px) {
    #cntInfo {
      width: calc(100% - 20px);
      float: left;
      margin-left: 10px; } }

.page-block {
  height: calc(100vh - 50px - 15px); }

#cntBetrokkene {
  position: relative;
  width: calc(33.33333% - 26.66667px);
  float: left;
  margin-left: 20px;
  padding-top: 30px; }
  @media screen and (min-width: 1260px) and (max-width: 1599px) {
    #cntBetrokkene {
      width: calc(33.33333% - 20px);
      float: left;
      margin-left: 15px; } }
  @media screen and (min-width: 0) and (max-width: 1259px) {
    #cntBetrokkene {
      width: calc(100% - 20px);
      float: left;
      margin-left: 10px; } }
  #cntBetrokkene #formBetrokkenen {
    position: relative;
    width: calc(100% - 40px);
    float: left;
    margin-left: 20px; }
    @media screen and (min-width: 1260px) and (max-width: 1599px) {
      #cntBetrokkene #formBetrokkenen {
        width: calc(100% - 30px);
        float: left;
        margin-left: 15px; } }
    @media screen and (min-width: 0) and (max-width: 1259px) {
      #cntBetrokkene #formBetrokkenen {
        width: calc(100% - 20px);
        float: left;
        margin-left: 10px; } }
    @media screen and (min-width: 1600px) {
      #cntBetrokkene #formBetrokkenen {
        margin-bottom: 20px; } }
    @media screen and (min-width: 1260px) and (max-width: 1599px) {
      #cntBetrokkene #formBetrokkenen {
        margin-bottom: 15px; } }
    @media screen and (min-width: 0) and (max-width: 1259px) {
      #cntBetrokkene #formBetrokkenen {
        margin-bottom: 10px; } }
    @media screen and (min-width: 1600px) {
      #cntBetrokkene #formBetrokkenen .form-field .form-label--left {
        flex-basis: 175px; } }
    @media screen and (min-width: 1260px) and (max-width: 1599px) {
      #cntBetrokkene #formBetrokkenen .form-field .form-label--left {
        flex-basis: 175px; } }
    @media screen and (min-width: 0) and (max-width: 1259px) {
      #cntBetrokkene #formBetrokkenen .form-field .form-label--left {
        flex-basis: 175px; } }
    @media screen and (min-width: 1600px) {
      #cntBetrokkene #formBetrokkenen .form-field .form-label--left, #cntBetrokkene #formBetrokkenen.form-field .form-label--left {
        flex-basis: 90px; } }
    @media screen and (min-width: 1260px) and (max-width: 1599px) {
      #cntBetrokkene #formBetrokkenen .form-field .form-label--left, #cntBetrokkene #formBetrokkenen.form-field .form-label--left {
        flex-basis: 90px; } }
    @media screen and (min-width: 0) and (max-width: 1259px) {
      #cntBetrokkene #formBetrokkenen .form-field .form-label--left, #cntBetrokkene #formBetrokkenen.form-field .form-label--left {
        flex-basis: 175px; } }
    #cntBetrokkene #formBetrokkenen .formBetrokkene {
      margin-bottom: 20px; }
  #cntBetrokkene .btnVerwijderBetrokkene {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    cursor: pointer;
    padding: 5px 7px 4px 7px;
    border-radius: 5px;
    border: 1px solid white;
    display: inline-block;
    color: white;
    font-size: 13px;
    position: relative;
    font-family: 'Heebo Medium', sans-serif;
    border-color: #CA4242;
    background-color: #CA4242;
    color: white; }
    #cntBetrokkene .btnVerwijderBetrokkene i {
      font-size: 11px;
      margin-top: 3px; }
      #cntBetrokkene .btnVerwijderBetrokkene i:first-child {
        float: left;
        margin-right: 7px;
        margin-top: 4px; }
      #cntBetrokkene .btnVerwijderBetrokkene i:last-child:not(:first-child) {
        float: right;
        margin-left: 7px; }
    #cntBetrokkene .btnVerwijderBetrokkene span {
      font-family: 'Heebo Medium', sans-serif; }
    #cntBetrokkene .btnVerwijderBetrokkene .button--hidden {
      display: none; }
    #cntBetrokkene .btnVerwijderBetrokkene span {
      color: white; }
    #cntBetrokkene .btnVerwijderBetrokkene:hover, #cntBetrokkene .btnVerwijderBetrokkene:focus {
      color: white;
      background-color: #A03434; }
      #cntBetrokkene .btnVerwijderBetrokkene:hover span, #cntBetrokkene .btnVerwijderBetrokkene:focus span {
        color: white; }
    #cntBetrokkene .btnVerwijderBetrokkene:active {
      color: #CA4242;
      background-color: white; }
      #cntBetrokkene .btnVerwijderBetrokkene:active span {
        color: #CA4242; }
    .page-block--disabled #cntBetrokkene .btnVerwijderBetrokkene, #cntBetrokkene .btnVerwijderBetrokkene.button-opaque--disabled, #cntBetrokkene .btnVerwijderBetrokkene:disabled {
      border-color: #CECECE;
      background-color: #CECECE;
      color: white;
      cursor: not-allowed; }
      .page-block--disabled #cntBetrokkene .btnVerwijderBetrokkene span, #cntBetrokkene .btnVerwijderBetrokkene.button-opaque--disabled span, #cntBetrokkene .btnVerwijderBetrokkene:disabled span {
        color: white; }
      .page-block--disabled #cntBetrokkene .btnVerwijderBetrokkene:hover, .page-block--disabled #cntBetrokkene .btnVerwijderBetrokkene:active, #cntBetrokkene .btnVerwijderBetrokkene.button-opaque--disabled:hover, #cntBetrokkene .btnVerwijderBetrokkene.button-opaque--disabled:active, #cntBetrokkene .btnVerwijderBetrokkene:disabled:hover, #cntBetrokkene .btnVerwijderBetrokkene:disabled:active {
        background-color: #CECECE !important;
        color: white !important; }
        .page-block--disabled #cntBetrokkene .btnVerwijderBetrokkene:hover span, .page-block--disabled #cntBetrokkene .btnVerwijderBetrokkene:active span, #cntBetrokkene .btnVerwijderBetrokkene.button-opaque--disabled:hover span, #cntBetrokkene .btnVerwijderBetrokkene.button-opaque--disabled:active span, #cntBetrokkene .btnVerwijderBetrokkene:disabled:hover span, #cntBetrokkene .btnVerwijderBetrokkene:disabled:active span {
          color: white; }
  #cntBetrokkene .center {
    text-align: center; }
    #cntBetrokkene .center #btnNieuweBetrokkene {
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      cursor: pointer;
      padding: 5px 7px 4px 7px;
      border-radius: 5px;
      border: 1px solid white;
      display: inline-block;
      color: white;
      font-size: 13px;
      position: relative;
      font-family: 'Heebo Medium', sans-serif;
      border-color: #33B247;
      background-color: #33B247;
      color: white;
      color: white;
      display: inline-block; }
      #cntBetrokkene .center #btnNieuweBetrokkene i {
        font-size: 11px;
        margin-top: 3px; }
        #cntBetrokkene .center #btnNieuweBetrokkene i:first-child {
          float: left;
          margin-right: 7px;
          margin-top: 4px; }
        #cntBetrokkene .center #btnNieuweBetrokkene i:last-child:not(:first-child) {
          float: right;
          margin-left: 7px; }
      #cntBetrokkene .center #btnNieuweBetrokkene span {
        font-family: 'Heebo Medium', sans-serif; }
      #cntBetrokkene .center #btnNieuweBetrokkene .button--hidden {
        display: none; }
      #cntBetrokkene .center #btnNieuweBetrokkene:hover, #cntBetrokkene .center #btnNieuweBetrokkene:focus {
        color: white;
        background-color: #288D38; }
        #cntBetrokkene .center #btnNieuweBetrokkene:hover span, #cntBetrokkene .center #btnNieuweBetrokkene:focus span {
          color: white; }
      #cntBetrokkene .center #btnNieuweBetrokkene:active {
        color: #33B247;
        background-color: white; }
        #cntBetrokkene .center #btnNieuweBetrokkene:active span {
          color: #33B247; }
      .page-block--disabled #cntBetrokkene .center #btnNieuweBetrokkene, #cntBetrokkene .center #btnNieuweBetrokkene.button-opaque--disabled, #cntBetrokkene .center #btnNieuweBetrokkene:disabled {
        border-color: #CECECE;
        background-color: #CECECE;
        color: white;
        cursor: not-allowed; }
        .page-block--disabled #cntBetrokkene .center #btnNieuweBetrokkene span, #cntBetrokkene .center #btnNieuweBetrokkene.button-opaque--disabled span, #cntBetrokkene .center #btnNieuweBetrokkene:disabled span {
          color: white; }
        .page-block--disabled #cntBetrokkene .center #btnNieuweBetrokkene:hover, .page-block--disabled #cntBetrokkene .center #btnNieuweBetrokkene:active, #cntBetrokkene .center #btnNieuweBetrokkene.button-opaque--disabled:hover, #cntBetrokkene .center #btnNieuweBetrokkene.button-opaque--disabled:active, #cntBetrokkene .center #btnNieuweBetrokkene:disabled:hover, #cntBetrokkene .center #btnNieuweBetrokkene:disabled:active {
          background-color: #CECECE !important;
          color: white !important; }
          .page-block--disabled #cntBetrokkene .center #btnNieuweBetrokkene:hover span, .page-block--disabled #cntBetrokkene .center #btnNieuweBetrokkene:active span, #cntBetrokkene .center #btnNieuweBetrokkene.button-opaque--disabled:hover span, #cntBetrokkene .center #btnNieuweBetrokkene.button-opaque--disabled:active span, #cntBetrokkene .center #btnNieuweBetrokkene:disabled:hover span, #cntBetrokkene .center #btnNieuweBetrokkene:disabled:active span {
            color: white; }

#cntReden {
  position: relative;
  width: calc(25% - 25px);
  float: left;
  margin-left: 20px;
  padding-top: 30px; }
  @media screen and (min-width: 1260px) and (max-width: 1599px) {
    #cntReden {
      width: calc(25% - 18.75px);
      float: left;
      margin-left: 15px; } }
  @media screen and (min-width: 0) and (max-width: 1259px) {
    #cntReden {
      width: calc(100% - 20px);
      float: left;
      margin-left: 10px; } }
  #cntReden #formReden {
    position: relative;
    width: calc(100% - 40px);
    float: left;
    margin-left: 20px; }
    @media screen and (min-width: 1260px) and (max-width: 1599px) {
      #cntReden #formReden {
        width: calc(100% - 30px);
        float: left;
        margin-left: 15px; } }
    @media screen and (min-width: 0) and (max-width: 1259px) {
      #cntReden #formReden {
        width: calc(100% - 20px);
        float: left;
        margin-left: 10px; } }
    @media screen and (min-width: 1600px) {
      #cntReden #formReden {
        margin-bottom: 20px; } }
    @media screen and (min-width: 1260px) and (max-width: 1599px) {
      #cntReden #formReden {
        margin-bottom: 15px; } }
    @media screen and (min-width: 0) and (max-width: 1259px) {
      #cntReden #formReden {
        margin-bottom: 10px; } }
    @media screen and (min-width: 1600px) {
      #cntReden #formReden .form-field .form-label--left {
        flex-basis: 175px; } }
    @media screen and (min-width: 1260px) and (max-width: 1599px) {
      #cntReden #formReden .form-field .form-label--left {
        flex-basis: 175px; } }
    @media screen and (min-width: 0) and (max-width: 1259px) {
      #cntReden #formReden .form-field .form-label--left {
        flex-basis: 175px; } }
    @media screen and (min-width: 1600px) {
      #cntReden #formReden .form-field .form-label--left, #cntReden #formReden.form-field .form-label--left {
        flex-basis: 130px; } }
    @media screen and (min-width: 1260px) and (max-width: 1599px) {
      #cntReden #formReden .form-field .form-label--left, #cntReden #formReden.form-field .form-label--left {
        flex-basis: 90px; } }
    @media screen and (min-width: 0) and (max-width: 1259px) {
      #cntReden #formReden .form-field .form-label--left, #cntReden #formReden.form-field .form-label--left {
        flex-basis: 175px; } }

#cntAfhandeling {
  position: relative;
  width: calc(25% - 25px);
  float: left;
  margin-left: 20px;
  padding-top: 30px; }
  @media screen and (min-width: 1260px) and (max-width: 1599px) {
    #cntAfhandeling {
      width: calc(25% - 18.75px);
      float: left;
      margin-left: 15px; } }
  @media screen and (min-width: 0) and (max-width: 1259px) {
    #cntAfhandeling {
      width: calc(100% - 20px);
      float: left;
      margin-left: 10px; } }
  #cntAfhandeling #formBehandelaar {
    position: relative;
    width: calc(100% - 40px);
    float: left;
    margin-left: 20px; }
    @media screen and (min-width: 1260px) and (max-width: 1599px) {
      #cntAfhandeling #formBehandelaar {
        width: calc(100% - 30px);
        float: left;
        margin-left: 15px; } }
    @media screen and (min-width: 0) and (max-width: 1259px) {
      #cntAfhandeling #formBehandelaar {
        width: calc(100% - 20px);
        float: left;
        margin-left: 10px; } }
    @media screen and (min-width: 1600px) {
      #cntAfhandeling #formBehandelaar {
        margin-bottom: 20px; } }
    @media screen and (min-width: 1260px) and (max-width: 1599px) {
      #cntAfhandeling #formBehandelaar {
        margin-bottom: 15px; } }
    @media screen and (min-width: 0) and (max-width: 1259px) {
      #cntAfhandeling #formBehandelaar {
        margin-bottom: 10px; } }
    @media screen and (min-width: 1600px) {
      #cntAfhandeling #formBehandelaar .form-field .form-label--left {
        flex-basis: 175px; } }
    @media screen and (min-width: 1260px) and (max-width: 1599px) {
      #cntAfhandeling #formBehandelaar .form-field .form-label--left {
        flex-basis: 175px; } }
    @media screen and (min-width: 0) and (max-width: 1259px) {
      #cntAfhandeling #formBehandelaar .form-field .form-label--left {
        flex-basis: 175px; } }
    @media screen and (min-width: 1600px) {
      #cntAfhandeling #formBehandelaar .form-field .form-label--left, #cntAfhandeling #formBehandelaar.form-field .form-label--left {
        flex-basis: 130px; } }
    @media screen and (min-width: 1260px) and (max-width: 1599px) {
      #cntAfhandeling #formBehandelaar .form-field .form-label--left, #cntAfhandeling #formBehandelaar.form-field .form-label--left {
        flex-basis: 90px; } }
    @media screen and (min-width: 0) and (max-width: 1259px) {
      #cntAfhandeling #formBehandelaar .form-field .form-label--left, #cntAfhandeling #formBehandelaar.form-field .form-label--left {
        flex-basis: 175px; } }
    #cntAfhandeling #formBehandelaar #selAfhandelingBehandelaar {
      width: 100%; }
  #cntAfhandeling #formUwGegevens {
    position: relative;
    width: calc(100% - 40px);
    float: left;
    margin-left: 20px; }
    @media screen and (min-width: 1260px) and (max-width: 1599px) {
      #cntAfhandeling #formUwGegevens {
        width: calc(100% - 30px);
        float: left;
        margin-left: 15px; } }
    @media screen and (min-width: 0) and (max-width: 1259px) {
      #cntAfhandeling #formUwGegevens {
        width: calc(100% - 20px);
        float: left;
        margin-left: 10px; } }
    @media screen and (min-width: 1600px) {
      #cntAfhandeling #formUwGegevens {
        margin-bottom: 20px; } }
    @media screen and (min-width: 1260px) and (max-width: 1599px) {
      #cntAfhandeling #formUwGegevens {
        margin-bottom: 15px; } }
    @media screen and (min-width: 0) and (max-width: 1259px) {
      #cntAfhandeling #formUwGegevens {
        margin-bottom: 10px; } }
    @media screen and (min-width: 1600px) {
      #cntAfhandeling #formUwGegevens .form-field .form-label--left {
        flex-basis: 175px; } }
    @media screen and (min-width: 1260px) and (max-width: 1599px) {
      #cntAfhandeling #formUwGegevens .form-field .form-label--left {
        flex-basis: 175px; } }
    @media screen and (min-width: 0) and (max-width: 1259px) {
      #cntAfhandeling #formUwGegevens .form-field .form-label--left {
        flex-basis: 175px; } }
    @media screen and (min-width: 1600px) {
      #cntAfhandeling #formUwGegevens .form-field .form-label--left, #cntAfhandeling #formUwGegevens.form-field .form-label--left {
        flex-basis: 130px; } }
    @media screen and (min-width: 1260px) and (max-width: 1599px) {
      #cntAfhandeling #formUwGegevens .form-field .form-label--left, #cntAfhandeling #formUwGegevens.form-field .form-label--left {
        flex-basis: 90px; } }
    @media screen and (min-width: 0) and (max-width: 1259px) {
      #cntAfhandeling #formUwGegevens .form-field .form-label--left, #cntAfhandeling #formUwGegevens.form-field .form-label--left {
        flex-basis: 175px; } }
  #cntAfhandeling #btnIndienen {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    cursor: pointer;
    padding: 5px 7px 4px 7px;
    border-radius: 5px;
    border: 1px solid white;
    display: inline-block;
    color: white;
    font-size: 13px;
    position: relative;
    font-family: 'Heebo Medium', sans-serif;
    border-color: #33B247;
    background-color: #33B247;
    color: white;
    color: white;
    margin-left: 20px;
    width: calc(100% - 40px);
    text-align: center; }
    #cntAfhandeling #btnIndienen i {
      font-size: 11px;
      margin-top: 3px; }
      #cntAfhandeling #btnIndienen i:first-child {
        float: left;
        margin-right: 7px;
        margin-top: 4px; }
      #cntAfhandeling #btnIndienen i:last-child:not(:first-child) {
        float: right;
        margin-left: 7px; }
    #cntAfhandeling #btnIndienen span {
      font-family: 'Heebo Medium', sans-serif; }
    #cntAfhandeling #btnIndienen .button--hidden {
      display: none; }
    #cntAfhandeling #btnIndienen:hover, #cntAfhandeling #btnIndienen:focus {
      color: white;
      background-color: #288D38; }
      #cntAfhandeling #btnIndienen:hover span, #cntAfhandeling #btnIndienen:focus span {
        color: white; }
    #cntAfhandeling #btnIndienen:active {
      color: #33B247;
      background-color: white; }
      #cntAfhandeling #btnIndienen:active span {
        color: #33B247; }
    .page-block--disabled #cntAfhandeling #btnIndienen, #cntAfhandeling #btnIndienen.button-opaque--disabled, #cntAfhandeling #btnIndienen:disabled {
      border-color: #CECECE;
      background-color: #CECECE;
      color: white;
      cursor: not-allowed; }
      .page-block--disabled #cntAfhandeling #btnIndienen span, #cntAfhandeling #btnIndienen.button-opaque--disabled span, #cntAfhandeling #btnIndienen:disabled span {
        color: white; }
      .page-block--disabled #cntAfhandeling #btnIndienen:hover, .page-block--disabled #cntAfhandeling #btnIndienen:active, #cntAfhandeling #btnIndienen.button-opaque--disabled:hover, #cntAfhandeling #btnIndienen.button-opaque--disabled:active, #cntAfhandeling #btnIndienen:disabled:hover, #cntAfhandeling #btnIndienen:disabled:active {
        background-color: #CECECE !important;
        color: white !important; }
        .page-block--disabled #cntAfhandeling #btnIndienen:hover span, .page-block--disabled #cntAfhandeling #btnIndienen:active span, #cntAfhandeling #btnIndienen.button-opaque--disabled:hover span, #cntAfhandeling #btnIndienen.button-opaque--disabled:active span, #cntAfhandeling #btnIndienen:disabled:hover span, #cntAfhandeling #btnIndienen:disabled:active span {
          color: white; }