/* General */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body,
html {
  /* position: fixed;
    overflow: hidden; */
  width: 100%;
  touch-action: none;
  -webkit-overflow-scrolling: touch;
}

::-webkit-scrollbar {
  display: none;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: url("/static/ajax-loader.gif") 50% 50% no-repeat;
}

body.loading .modal {
  overflow: hidden;
}

body.loading .modal {
  display: block;
}
body.loading1 .modal {
  overflow: hidden;
}

body.loading1 .modal {
  display: block;
}

@font-face {
  font-family: "museo-sans-300";
  src: url("/static/MuseoSans-300.otf");
}

@font-face {
  font-family: "museo-sans-500";
  src: url("/static/MuseoSans_500.otf");
}

@font-face {
  font-family: "museo-sans-700";
  src: url("/static/MuseoSans_700.otf");
}

::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

.touchMoveAllowed {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

input {
  border-radius: 5px !important;
}

input[type="search"] {
  -webkit-appearance: none;
  appearance: none;
}

/*input[type="date"] {*/
/*  -webkit-appearance: textfield;*/
/*}*/

/*input[type="datetime-local"] {*/
/*  -webkit-appearance: none;*/
/*}*/

/*select {*/
/*  -webkit-appearance: menulist;*/
/*}*/

#Uber_wrapper {
  display: flex;
  position: relative;
  margin: auto;
  /* background-color: #58a618; */

  font-family: "museo-sans-300", sans-serif;
  font-size: 30px;

  height: 100vh; /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
  max-width: 1080px;
  min-width: 280px;

  justify-content: center;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;

  overflow-x: hidden;
  overflow-y: auto;

  touch-action: none;
  -ms-touch-action: none;
}

#main_wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  overflow-x: hidden;
  overflow-y: auto;
  position: absolute;

  height: 100%;
  max-width: 1080px;
  min-width: 280px;
}

#dummy_right,
#dummy_right2,
#dummy_right3 {
  width: 100%;
  display: none;
  justify-content: center;
  position: absolute;

  right: -1000px;
  transition: transform 0.2s;
  background-color: white;

  overflow-x: hidden;
  overflow-y: auto;
  height: 100%;

  max-width: 1080px;
  min-width: 280px;
}

#dummy_right.unblocked,
#dummy_right2.unblocked,
#dummy_right3.unblocked {
  display: block;
}

#dummy_right.slide-left,
#dummy_right2.slide-left,
#dummy_right3.slide-left {
  transform: translateX(-1000px);
}

#app_loading_wrapper {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 9999;
  background-color: #ffffff;
  background-image: url("/static/Spinner-5.gif");
  background-repeat: no-repeat;
  background-position: center 30vh;
  overflow: hidden;
}

#page_404 {
  z-index: 9999;
  height: 100%;
  width: 100%;
  padding: 30px;
  font-size: 20px;
  text-align: center;
}

/* NAW */

.naw_form_wrapper {
  background-color: white;
  width: 100%;
  margin-bottom: 50px;
  -ms-overflow-style: none;
}

.naw_persoonsgegevens,
.naw_Adresgegevens,
.naw_Toestemming_fotos_delen,
.naw_Contactgegevens {
  width: 100%;
}

.naw_Persoonsgegevens,
.naw_Adresgegevens {
  padding-top: 15px;
}

.naw_item_wrappers {
  width: 100%;
  padding-top: 4px;
  padding-bottom: 4px;
  margin-top: 3px;
  margin-bottom: 3px;
  border: None;
  /* border-bottom: 1px solid #CCC; */
}

.naw_item_wrappers input {
  outline: none;
  font-family: "museo-sans-300", sans-serif;
  font-size: 17px;
  color: #46772e;
  border: none;
  width: 100%;
  background-color: white;
  border: 1px solid gray;
  padding: 5px;
}

.naw_item_left_text_wrapper {
  font-family: "museo-sans-300", sans-serif;
  font-size: 17px;
  color: #cccccc;
}

.naw_form_wrapper h1 {
  font-family: "museo-sans-700", sans-serif;
  color: #46772e;
  font-size: 16pt;
  font-weight: 700;
  margin-top: 20px;
  margin-bottom: 0;
}

.naw_body_wrapper {
  overflow-y: auto;
  height: 80vh;
  overflow-x: hidden;
  margin-right: 25px;
  padding-left: 25px;
  -ms-overflow-style: none;
  scrollbar-width: none;
  /*position: relative;*/
}
.naw_body_wrapper ::-webkit-scrollbar {
  display: none;
}

.naw_body_wrapper2 {
  margin-right: 25px;
  margin-top: 10px;
  padding-left: 25px;
}

.naw_banner {
  width: 100%;
  height: 150px;
  display: flex;
  background-image: url("/static/Botersla.png");
  background-size: 100%;
  align-items: center;
}

.naw_banner h3 {
  font-family: "museo-sans-300", sans-serif;
  width: 150px;
  margin-left: 25px;
  font-size: 25px;
  color: white;
  margin-top: auto;
  margin-bottom: 23px;
}

.naw_Logo-Heemskerk {
  height: 75px;
  margin-left: auto;
  margin-right: 25px;
  margin-top: auto;
  margin-bottom: 23px;
}

.naw_Aanpas_en_titel,
.naw_Aanpas_en_titel2 {
  display: flex;
}

.naw_Aanpas_en_titel {
  margin-top: 5px;
}

.naw_pennetje,
.naw_pennetje2 {
  width: 20px;
  height: 21px;
  margin-top: 20px;
  margin-left: auto;
}

.naw_fotootje {
  height: 23px;
  margin-left: auto;
}

.naw_id_wrapper {
  display: flex;
  border: None;
  border-bottom: 1px solid #ccc;
  font-size: 17px;
  font-weight: 500;
  padding-top: 35px;
  padding-bottom: 10px;
  color: #46772e;
}

.naw_button_wrapper {
  display: flex;
  align-content: center;
  width: 100%;
}

.naw_submit_form {
  width: 100%;
  height: 55px;
  border-radius: 10px;
  border: 0;
  margin: 30px 10px 20px 10px;
  background-color: #58a618;
  color: #ffffff;
  font-size: 20px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}

.naw_avg_item_wrapper {
  font-family: "museo-sans-300", sans-serif;
  border-bottom: 1px solid #ccc;
  font-size: 17px;
  padding-top: 20px;
  padding-bottom: 10px;
  color: #7c7c7c;
}

.naw_total_switch_wrapper {
  float: right;
  margin-left: auto;
  padding-bottom: 10px;
}

.naw_avg_text_wrapper {
  margin-top: 10px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  outline-style: none;
  height: 26px;
}

.switch:active {
  background-color: white;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  -webkit-tap-highlight-color: transparent;
}

.slider:before {
  position: absolute;
  content: "";
  height: 21px;
  width: 21px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: #50af31;
}

input:focus + .slider {
  box-shadow: 0 0 1px #50af31;
}

input:checked + .slider:before {
  -webkit-transform: translateX(23px);
  -ms-transform: translateX(23px);
  transform: translateX(23px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 30px;
}

.slider.round:before {
  border-radius: 50%;
}
@media (max-width: 500px) {
  .naw_Logo-Heemskerk {
    height: 65px;
  }
}

@media (max-width: 415px) {
  .naw_banner h3 {
    font-size: 20px;
    margin-right: 18px;
  }

  .naw_Logo-Heemskerk {
    height: 60px;
    margin-left: auto;
    margin-right: 18px;
  }

  .naw_banner {
    width: 100%;
    height: 150px;
    display: flex;
    background-image: url("/static/Botersla.png");
    background-size: 120% 140%;
    align-items: center;
  }
}

@media (max-width: 350px) {
  .naw_banner h3 {
    margin-left: 20px;
  }
  .naw_Logo-Heemskerk {
    height: 50px;
    margin-left: auto;
    margin-right: 13px;
  }
}

/* Login */

#login_slide_screen {
  color: white;
  text-align: center;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
  background-image: url("/static/Onboarding3.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  z-index: 4;
}

#login_slide_screen h1 {
  margin-top: 42vh;
  margin-top: calc(var(--vh, 1vh) * 60);
}

#login_slide_screen span {
  font-size: 20px;
}

#login_slide_screen span:first-child {
  font-family: "museo-sans-700", sans-serif;
}

#login_bottom_text {
  margin-top: 30vh;
  margin-top: calc(var(--vh, 1vh) * 10);
}

@media (max-height: 580px) {
  #login_slide_screen h1 {
    margin-top: 32vh;
    margin-top: calc(var(--vh, 1vh) * 32);
  }

  #login_bottom_text {
    margin-top: 20vh;
    margin-top: calc(var(--vh, 1vh) * 20);
  }
}

/* Homescreen */

#hs_form_wrapper {
  background-color: white;
  width: 100%;
  display: block;
}

#hs_banner_wrapper {
  width: 100%;
  height: 150px;
  display: flex;
  background-image: url("/static/Botersla.png");
  background-size: 100%;
  align-items: center;
}

#hs_title_wrapper {
  margin-top: auto;
  margin-left: 33px;
  margin-bottom: 30px;
}

#hs_banner_wrapper h3 {
  font-family: "museo-sans-700", sans-serif;
  color: #ffffff;
  font-size: 25px;
}

.hs_pictogram_wrapper {
  display: grid;
  columns: 3;
  align-items: center;
  justify-items: center;
  margin-left: 25px;
  margin-right: 25px;
  margin-top: 30px;
  grid-gap: 1rem;
  grid-template-columns: repeat(3, 31%);
}

.hs_pictogram {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  align-self: center;
  justify-self: center;
  font-size: 26px;
  padding-bottom: 11px;
  width: 160px;
  height: 160px;
  border: 0;
  border-radius: 20px;
  break-inside: avoid-column;
  margin-bottom: 20px;
  background-color: #50af31;
  color: white;
  cursor: pointer;
  position: relative;
}

.picto_image_wrapper {
  margin-top: 30px;
  display: inline-block;
  width: 100%;
}

.picto_text_wrapper {
  display: inline-block;
  width: 100%;
  font-size: 30px;
}
.picto_text_wrapper2 {
  display: inline-block;
  width: 100%;
  font-size: 16px;
  margin-top: -5px;
}

.picto_image_wrapper2 {
  margin-top: 5px !important;
}

.hs_picto_image {
  width: auto;
  height: 70px;
}

#banner_profile_wheel {
  position: relative;
  bottom: -60px;
  right: -55px;
  width: 30px;
  height: 30px;
  cursor: pointer;
}

#banner_profile_wheel2 {
  position: relative;
  bottom: -60px;
  right: -55px;
  width: 30px;
  height: 30px;
}

.profile_picture_wrapper {
  width: 85px;
  height: 85px;
  margin-left: auto;
  margin-right: 30px;
  margin-top: auto;
  margin-bottom: 25px;
  border-radius: 50%;
  background-size: 85px 85px;
  display: flex;
}

@media (max-width: 600px) {
  #hs_banner_wrapper h3 {
    font-size: 20px;
  }

  .hs_pictogram {
    width: 140px;
    height: 140px;
    font-size: 21px;
  }
  .hs_picto_image {
    width: auto;
    height: 60px;
  }

  .picto_image_wrapper {
    margin-top: 20px;
  }

  .picto_text_wrapper {
    font-size: 25px;
  }
  .profile_picture_wrapper {
    width: 70px;
    height: 70px;
    margin-right: 25px;
    margin-bottom: 20px;
    background-size: 75px 75px;
  }
  #banner_profile_wheel {
    bottom: -45px;
    right: -45px;
    width: 28px;
    height: 28px;
  }
  #banner_profile_wheel2 {
    bottom: -45px;
    right: -45px;
    width: 28px;
    height: 28px;
  }
}

@media (max-width: 500px) {
  .hs_pictogram {
    width: 110px;
    height: 110px;
    font-size: 20px;
  }
  .hs_picto_image {
    width: auto;
    height: 55px;
  }
  .picto_image_wrapper {
    margin-top: 15px;
  }
  .picto_text_wrapper {
    font-size: 20px;
  }
}
@media (max-width: 415px) {
  #hs_banner_wrapper {
    width: 100%;
    height: 150px;
    display: flex;
    background-image: url("/static/Botersla.png");
    background-size: 120% 140%;
    align-items: center;
  }

  .hs_pictogram {
    width: 91px;
    height: 91px;
    border-radius: 20px;
    font-size: 18px;
  }
  .hs_picto_image {
    width: auto;
    height: 44px;
  }
  .picto_image_wrapper {
    margin-top: 10px;
  }

  #banner_profile_wheel {
    bottom: -45px;
    right: -45px;
    width: 28px;
    height: 28px;
  }
  .hs_pictogram_wrapper {
    margin-left: 13px;
    margin-right: 13px;
    grid-gap: 0.6rem;
  }
}

@media (max-width: 350px) {
  .profile_picture_wrapper {
    width: 60px;
    height: 60px;
    margin-right: 25px;
    margin-bottom: 20px;
    background-size: 60px 60px;
  }
  #banner_profile_wheel {
    bottom: -40px;
    right: -40px;
    width: 24px;
    height: 24px;
  }
  #banner_profile_wheel2 {
    bottom: -40px;
    right: -40px;
    width: 24px;
    height: 24px;
  }
}

@media (max-width: 300px) {
  .hs_pictogram {
    width: 70px;
    height: 70px;
    border-radius: 15px;
    font-size: 16px;
  }
  .hs_picto_image {
    width: auto;
    height: 35px;
  }
  .picto_image_wrapper {
    margin-top: 9px;
  }
  .picto_text_wrapper {
    font-size: 16px;
  }
}

/* Screens_general */

.screen_wrapper {
  background-color: white;
  width: 100%;
  height: 100vh;
  -ms-overflow-style: none;
  overflow-y: hidden;
}

.screen_banner_wrapper {
  width: 100%;
  height: 150px;
  display: flex;
  background-image: url("/static/Botersla.png");
  background-size: 100%;
  align-items: center;
}

.screen_titel_wrapper {
  margin-bottom: 30px;
  margin-top: auto;
  width: 300px;
  margin-left: 33px;
}

.screen_titel_wrapper h3 {
  font-family: "museo-sans-700", sans-serif;
  font-size: 25px;
  color: #ffffff;
}

.screen_back_arrow {
  width: 35px;
  cursor: pointer;
}

.screen_right_image {
  margin-left: auto;
  margin-right: 25px;
  margin-top: auto;
  margin-bottom: 30px;
  height: 70px;
  width: auto;
}

@media (max-width: 600px) {
  .screen_banner_wrapper h3 {
    font-size: 20px;
  }

  .screen_banner_wrapper {
    width: 100%;
    height: 150px;
    display: flex;
    background-image: url("/static/Botersla.png");
    background-size: 120% 140%;
    align-items: center;
  }

  .screen_titel_wrapper h3 {
    font-size: 25px;
  }
  .screen_back_arrow {
    width: 30px;
  }
  .screen_right_image {
    height: 60px;
    width: auto;
  }
}

@media (max-width: 450px) {
  .screen_banner_wrapper h3 {
    font-size: 20px;
  }

  .screen_banner_wrapper {
    width: 100%;
    height: 150px;
    display: flex;
    background-image: url("/static/Botersla.png");
    background-size: 120% 140%;
    align-items: center;
  }

  .screen_titel_wrapper h3 {
    font-size: 20px;
  }
  .screen_back_arrow {
    width: 25px;
  }
}

@media (max-width: 400px) {
  .screen_right_image {
    height: 40px;
    width: auto;
  }
}

/* Screens_salaris */

#wrapper_salaris_option {
  margin: 30px 10px 10px;
  border-radius: 10px;
  padding: 5px 10px 5px;
}

.salaris_text {
  font-family: "museo-sans-700", sans-serif;
  font-size: 30px;
  color: #46772e;
  margin-right: 50%;
  width: 70%;
}

#salaris_loonstrook,
#salaris_jaaropgave {
  font-family: "museo-sans-300", sans-serif;
  font-weight: 500;
  font-size: 18px;
  padding-top: 10px;
  padding-bottom: 10px;
  color: white;
  cursor: pointer;
}

.salaris_loonstrook,
.salaris_jaaropgave {
  font-family: "museo-sans-300", sans-serif;
  font-weight: 500;
  font-size: 18px;
  padding-top: 10px;
  padding-bottom: 10px;
  color: white;
  cursor: pointer;
}

#salaris_jaaropgave {
  border-top: 0.5mm solid #ffffff;
}

.salaris_jaaropgave {
  border-top: 0.5mm solid #ffffff;
}

.right_arrow_screen {
  float: right;
  height: 21px;
  margin-right: 12px;
  margin-left: auto;
}

.wrapper_option {
  margin: 30px 10px 10px;
  border-radius: 10px;
  padding: 5px 10px 5px;
}

.option_text {
  font-family: "museo-sans-700", sans-serif;
  font-size: 30px;
  color: #46772e;
  margin-right: 50%;
  width: 70%;
}

.option2,
.option3 {
  font-family: "museo-sans-300", sans-serif;
  font-weight: 500;
  font-size: 18px;
  padding-top: 10px;
  padding-bottom: 10px;
  color: white;
  cursor: pointer;
  background-color: #50af31;
  margin-bottom: 10px;
  border-radius: 10px;
  padding-left: 5px;
  display: flex;
}

.option2,
.option3 {
  border-top: 0.5mm solid white;
}

#team_wrapper {
  margin: 30px 10px 10px;
  padding: 5px 10px 5px;
}

.mijn_team_member_wrapper {
  font-family: "museo-sans-300", sans-serif;
  font-weight: 300;
  font-size: 18px;
  padding-top: 10px;
  margin-top: 5px;
  padding-bottom: 10px;
  color: #46772e;
  cursor: pointer;
  border-bottom: 1px solid lightgray;
}

#to_do_item_wrapper {
  margin: 30px 10px 10px;
  padding: 5px 10px 5px;
}

.to_do_item {
  font-family: "museo-sans-300", sans-serif;
  font-weight: 300;
  font-size: 18px;
  padding-top: 10px;
  margin-top: 5px;
  padding-bottom: 10px;
  color: #46772e;
  cursor: pointer;
  border-bottom: 1px solid lightgray;
}

.to_do_red_circle {
  height: 32px;
  width: 32px;
  background: #ff3b30;
  border-radius: 50%;
  float: right;
  padding-top: 2px;
  align-items: center;
  color: #ffffff;
  text-align: center;
  position: absolute;
  font-size: 22px;
  top: -5px;
  right: -5px;
}
@media (max-width: 600px) {
  .to_do_red_circle {
    height: 28px;
    font-size: 18px;
    width: 28px;
  }
}

@media (max-width: 450px) {
  .to_do_red_circle {
    height: 25px;
    width: 25px;
  }
}

/* Screens_agenda */

#agenda_wrapper {
  margin: 30px 10px 30px;
  padding: 5px 10px 5px;
}

.Agenda_point_wrapper {
  padding-top: 10px;
  margin-top: 5px;
  padding-bottom: 10px;
  color: #46772e;
  cursor: pointer;
  border-bottom: 1px solid lightgray;
  display: flex;
}

.Agenda_datewrapper {
  font-family: "museo-sans-700", sans-serif;
  font-weight: 300;
  font-size: 20px;
  max-width: 70%;
}
.Agenda_titlewrapper {
  float: right;
  font-family: "museo-sans-300", sans-serif;
  font-weight: 300;
  font-size: 21px;
  margin-left: auto;
}

@media (max-width: 600px) {
  .Agenda_datewrapper {
    font-family: "museo-sans-700", sans-serif;
    font-weight: 300;
    font-size: 17px;
  }
  .Agenda_titlewrapper {
    float: right;
    font-family: "museo-sans-300", sans-serif;
    font-weight: 300;
    font-size: 18px;
    margin-left: auto;
  }
}

@media (max-width: 400px) {
  .Agenda_datewrapper {
    font-family: "museo-sans-700", sans-serif;
    font-weight: 300;
    font-size: 16px;
  }
  .Agenda_titlewrapper {
    float: right;
    font-family: "museo-sans-300", sans-serif;
    font-weight: 300;
    font-size: 16px;
  }
}

/* Team member pagina */

#team_member_wrapper {
  margin: 25px 15px 25px 25px;
}

.team_member_item_wrapper {
  width: 100%;
  padding-top: 4px;
  padding-bottom: 4px;
  margin-top: 5px;
  margin-bottom: 3px;
  border: None;
  border-bottom: 1px solid #ccc;
}

.left_text_wrapper {
  font-family: "museo-sans-300", sans-serif;
  color: #7c7c7c;
  font-size: 16px;
  margin-bottom: 5px;
}

.right_text_wrapper {
  outline: none;
  font-family: "museo-sans-300", sans-serif;
  font-size: 18px;
  color: #46772e;
  border: none;
  width: 100%;
  background-color: white;
}

#team_member_header_wrapper {
  font-family: "museo-sans-700", sans-serif;
  font-size: 18px;
  color: #46772e;
  margin-top: 21px;
  margin-bottom: 21px;
}

/* Calender style  */
.cld-main {
  width: 90%;
  align-items: center;
  font-size: 16px;
  margin: 10px auto 10px auto;
}

.cld-main a {
  color: #50af31;
}

.cld-main svg {
  fill: #50af31;
}

.cld-datetime {
  position: relative;
  width: 66%;
  min-width: 100px;
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
  margin-top: 15px;
  overflow: hidden;
  font-size: 19px;
}

.cld-datetime .today {
  position: relative;
  float: left;
  width: calc(100% - 40px);
  margin: auto;
  text-align: center;
}
.cld-nav {
  position: relative;
  width: 20px;
  height: 20px;
  margin-top: 2px;
}

.cld-nav:hover {
  cursor: pointer;
}

.cld-nav:hover svg {
  fill: #50af31;
}

.cld-rwd {
  float: left;
}

.cld-fwd {
  float: right;
}

.cld-labels,
.cld-days {
  padding-left: 0;
}

.cld-label,
.cld-day {
  box-sizing: border-box;
  display: inline-block;
  width: 14.28%;
  text-align: center;
}

.cld-day {
  border: 1px solid #eee;
}

.cld-day.disableDay {
  opacity: 0.5;
}

.cld-day.nextMonth,
.cld-day.prevMonth {
  opacity: 0.33;
}

.cld-number {
  position: relative;
  margin: 0;
  padding: 8px;
}

.cld-title {
  display: none;
  position: absolute;
  z-index: 5;
  top: 35px;
  left: 0;
  padding: 5px 10px;
  background: #fff;
  white-space: nowrap;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
}

.cld-title::before {
  content: "";
  position: absolute;
  top: -7.5px;
  left: 10px;
  width: 0;
  height: 0;
  border-left: 7.5px solid transparent;
  border-right: 7.5px solid transparent;
  border-bottom: 7.5px solid #ccc;
}

.cld-number.eventday {
  font-weight: bold;
  background-color: #50af31;
  color: white;
}

.cld-number.eventday:hover {
  cursor: pointer;
  /*background: #eee;*/
}

#calender_today {
  width: 80%;
  height: 80%;
  background-color: black;
  position: absolute;
  top: 10%;
  left: 10%;
  opacity: 0.3;
  border-radius: 50%;
}

@media (max-width: 600px) {
  .cld-main {
    font-size: 16px;
  }
}

/* Geplande locaties  */

#vakantie_text {
  font-size: 18px;
  color: #46772e;
  margin: 0px 15px 50px 20px;
}

.vakantie_element {
  font-size: 16px;
  display: flex;
  padding-bottom: 7px;
  margin-top: 15px;
  border-bottom: 1px solid #cccccc;
}

.vakantie_week_element {
  font-family: "museo-sans-700", sans-serif;
}

.vakantie_date_element {
  font-family: "museo-sans-300", sans-serif;
  margin-left: 15px;
}

/* Vakantie en TVT uren  */

#Status_wrapper {
  font-size: 18px;
  color: #46772e;
  margin: 30px 18px 50px 25px;
}

.vakantie_tvt_element_wrapper {
  font-size: 18px;
  color: #46772e;
  display: flex;
  padding-bottom: 10px;
  margin-top: 15px;
  border-bottom: 1px solid #cccccc;
}

.TVT_left_wrapper {
  font-family: "museo-sans-300", sans-serif;
  color: #919191;
}

.TVT_right_wrapper {
  font-family: "museo-sans-300", sans-serif;
  float: right;
  margin-left: auto;
}

/*Verlog_aanvragen */

.verlog_persoonsgegevens_wrapper {
  font-family: "museo-sans-300", sans-serif;
  font-size: 17px;
  margin: 40px 15px 0 25px;
}

.verlof_aanvraag_item {
  font-size: 17px;
  color: #46772e;
  display: flex;
  padding-bottom: 10px;
  margin-top: 18px;
}

.verlof_aanvraag_item1 {
  font-size: 17px;
  color: #46772e;
  display: flex;
  margin-top: 18px;
}

.verlof_aanvragen_input {
  height: 100%;
  outline: none;
  border: none;
  margin-left: auto;
  font-family: "museo-sans-300", sans-serif;
  color: #46772e;
  font-size: 16px;
  float: right;
  text-align: right;
  background-color: white;
}

.verlog_persoonsgegevens_wrapper h1 {
  font-family: "museo-sans-700", sans-serif;
  color: #46772e;
  font-size: 20px;
  margin-bottom: 10px;
  margin-top: -10px;
}

.Verlof_aanvragen_right_text {
  width: 100%;
}

.Verlof_aanvragen_left_text {
  color: #cccccc;
}

#soort_verlof_arrow_right {
  height: 21px;
  margin-right: 5px;
}

#verlof_aanvragen_button {
  margin-top: 25px;
  display: flex;
  align-content: center;
  width: 100%;
}

#verlof_submit_form {
  width: 90%;
  height: 55px;
  border-radius: 10px;
  border: 0;
  margin: 20px auto 20px auto;
  background-color: #58a618;
  color: #ffffff;
  font-size: 20px;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  appearance: none;
}

#verlof_selection {
  display: flex;
  font-family: "museo-sans-300", sans-serif;
  font-size: 17px;
  color: #46772e;
  margin-right: auto;
  border: none;
  float: left;
  background: transparent;
  width: 100%;
  border-radius: 5px;
  border: 1px solid gray;
  padding: 5px;
}

.verlof_option {
  margin-left: auto;
}

#verlof_verlog_reden {
  width: 100%;
  height: 80px;
  border: 1px solid gray;
  align-self: center;
  font-family: "museo-sans-300", sans-serif;
  font-size: 17px;
  padding: 5px;
  border-radius: 5px;
}

.verlof_tijd_wrapper {
  font-family: "museo-sans-300", sans-serif;
  font-size: 17px;
  margin-top: 6px;
  display: flex;
  padding-bottom: 10px;
  border-bottom: 1px solid #cccccc;
}

#verlof_aanvragen_input {
  border: none;
}

.verlof_tijd_wrapper_left {
  color: #cccccc;
}

.verlof_tijd_wrapper_right {
  margin-left: auto;
}

.verlof_tijd_hele_dag {
  transform: scale(1.2);
  margin-right: 7px;
  margin-left: 10px;
}

.verlof_tijdstip_aangeven {
  margin-left: 5px;
}

#verlof_verlof_reden_wrapper {
  margin: 15px 15px 0 25px;
}
/* Change naw */

#change_naw_titel {
  font-family: "museo-sans-500", sans-serif;
  font-size: 25px;
  color: #ffffff;
  margin-top: auto;
  margin-left: 33px;
  margin-bottom: 30px;
}

#change_naw_titel1 {
  margin-bottom: 4px;
}

.gegevens_aanpassen_headers {
  font-family: "museo-sans-700", sans-serif;
  color: #46772e;
  font-size: 16pt;
  font-weight: 700;
  margin-top: 20px;
}

/*Login screen*/

#login_total_wrapper {
  width: 100%;
  height: 100%;
  display: block;
  padding-bottom: 0 !important;
}

#login_header_wrapper {
  height: 100vh;
  display: block;
  width: 100%;
  background-color: #cccccc;
  /*background-image: url('/static/tomatensoep.png');*/
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  object-fit: cover;
}

#login_body_wrapper {
  background-color: #cccccc;
  height: 30vh;
}

#pincode_change_passw_wrapper {
  height: 10vh;
  width: 100%;
  display: flex;
}

#login_header_profile_wrapper {
  align-content: center;
  text-align: center;
  color: #ffffff;
  font-family: "museo-sans-700", sans-serif;
  font-size: 25px;
  height: 25vh;
  display: flex;
  flex-direction: column;
  margin-top: 3vh;
  margin-bottom: 4vh;
}

#login_image_text_wrapper {
  margin-top: auto;
  text-align: center;
  width: 100%;
}

#login_logo_wrapper {
  text-align: center;
  height: 20vh;
  position: relative;
  top: 17%;
}

#login_logo {
  margin-left: auto;
  margin-right: auto;
  height: 70%;
}

#login_credentials_wrapper {
  align-content: center;
  text-align: center;
  color: #ffffff;
  font-family: "museo-sans-500", sans-serif;
  font-size: 20px;
  height: 10vh;
}

#login_image_wrapper {
  align-content: center;
  width: 100%;
  margin: auto;
}

#login_credentials {
  align-content: center;
}

#login_credentials_wrapper {
  margin-top: 8vh;
  margin-bottom: 4vh;
}

#login_log_wrapper {
  align-content: center;
}

#login_image {
  width: 32%;
  max-width: 130px;
  min-width: 105px;
  border-radius: 100%;
}

#login_grid {
  display: flex;
  margin: 20px 70px 5px 70px;
}

.login_grid2 {
  display: flex;
}

.login_numberfield_grid {
  width: 23px;
  height: 23px;
  border-radius: 100%;
  margin: auto;
  border: 3px solid white;
}

#login_grid_all {
  width: 100%;
  height: 30vh;
}

.login_number_grid {
  margin: auto;
  margin-top: 10px;
  cursor: pointer;
}

.login_number_grid button {
  width: 250px;
  height: 5.6vh;
  font-size: 25px;
  border-radius: 10px;
  border: none;
  border-bottom: 1px solid black;
  cursor: pointer;
  background-color: #f8f8f8;
  color: black;
}

#login_delete_image {
  width: 30px;
  margin: auto;
}

@media (max-width: 800px) {
  .login_number_grid button {
    width: 30vw;
  }
}

.miss {
  -webkit-animation: miss 0.8s ease-out 1;
  animation: miss 0.8s ease-out 1;
}

@-webkit-keyframes miss {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  10% {
    -webkit-transform: translate(-25px, 0);
    transform: translate(-25px, 0);
  }
  20% {
    -webkit-transform: translate(25px, 0);
    transform: translate(25px, 0);
  }
  30% {
    -webkit-transform: translate(-20px, 0);
    transform: translate(-20px, 0);
  }
  40% {
    -webkit-transform: translate(20px, 0);
    transform: translate(20px, 0);
  }
  50% {
    -webkit-transform: translate(-10px, 0);
    transform: translate(-10px, 0);
  }
  60% {
    -webkit-transform: translate(10px, 0);
    transform: translate(10px, 0);
  }
  70% {
    -webkit-transform: translate(-5px, 0);
    transform: translate(-5px, 0);
  }
  80% {
    -webkit-transform: translate(5px, 0);
    transform: translate(5px, 0);
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

@keyframes miss {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  10% {
    -webkit-transform: translate(-25px, 0);
    transform: translate(-25px, 0);
  }
  20% {
    -webkit-transform: translate(25px, 0);
    transform: translate(25px, 0);
  }
  30% {
    -webkit-transform: translate(-20px, 0);
    transform: translate(-20px, 0);
  }
  40% {
    -webkit-transform: translate(20px, 0);
    transform: translate(20px, 0);
  }
  50% {
    -webkit-transform: translate(-10px, 0);
    transform: translate(-10px, 0);
  }
  60% {
    -webkit-transform: translate(10px, 0);
    transform: translate(10px, 0);
  }
  70% {
    -webkit-transform: translate(-5px, 0);
    transform: translate(-5px, 0);
  }
  80% {
    -webkit-transform: translate(5px, 0);
    transform: translate(5px, 0);
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

/* New login screens*/

#new_login_total_wrapper {
  margin-left: auto;
  margin-top: 10vh;
  margin-right: auto;
  width: 95%;
}

#new_login_mail_wrapper {
  background-color: #ffffff;
  width: 100%;
  height: 350px;
  margin-top: 100px;
}

@media (max-width: 590px) {
  #new_login_mail_wrapper {
    height: 370px;
  }
}

@media (max-width: 460px) {
  #new_login_mail_wrapper {
    height: 390px;
  }
}

@media (max-width: 360px) {
  #new_login_mail_wrapper {
    height: 410px;
  }
}

@media (max-width: 300px) {
  #new_login_mail_wrapper {
    height: 430px;
  }
}

.new_login_input_wrapper {
  width: 100%;
  padding: 30px 15px 30px 15px;
  font-family: "museo-sans-300", sans-serif;
}

#new_login_input_field {
  padding: 4px;
  font-family: "museo-sans-300", sans-serif;
  font-size: 18px;
  width: 100%;
  border: none;
  margin-top: 20px;
  border-bottom: 1px solid black;
  outline: none;
}

@media (max-width: 400px) {
  #new_login_input_field {
    padding-left: 2px;
  }
  .new_login_input_wrapper {
    padding-left: 12px;
    padding-right: 12px;
  }
}
@media (max-width: 360px) {
  #new_login_input_field {
    font-size: 16px;
  }
}
@media (max-width: 330px) {
  .new_login_input_wrapper {
    padding-left: 6px;
    padding-right: 6px;
  }
  #new_login_input_field {
    font-size: 15px;
  }
}

#new_login_next_button {
  margin-left: auto;
  margin-right: auto;
  width: 40%;
  background-color: #58a618;
  border-radius: 10px;
  text-align: center;
  color: #ffffff;
  padding: 10px;
  font-size: 20px;
}

#new_login_banner_wrapper {
  background-color: #58a618;
  font-family: "museo-sans-300", sans-serif;
  font-size: 25px;
  padding: 5px;
  padding-top: 10px;
  color: white;
  text-align: center;
}

#new_login_input_wrapper_id {
  margin-top: 10px;
}

#new_login_header_wrapper {
  width: 100%;
  height: 70px;
}

#mail_send_succes_wrapper {
  margin-top: auto;
  text-align: center;
  font-size: 17px;
  color: #58a618;
  height: 50px;
  padding-top: 15px;
}

#mail_send_fail_wrapper {
  margin-top: auto;
  text-align: center;
  font-size: 17px;
  color: #e54e4e;
  height: 50px;
  padding-top: 15px;
}

#pincode_change_passw {
  font-family: "museo-sans-300", sans-serif;
  margin: auto;
  padding: 10px;
  background-color: #50af31;
  font-size: 24px;
  min-height: 45px;
  border: none;
  border-radius: 10px;
  color: white;
  cursor: pointer;
  z-index: 10;
}

#pincode_reset_passw,
#pincode_reset_passw2 {
  font-family: "museo-sans-300", sans-serif;
  margin: auto;
  padding: 10px;
  background-color: #50af31;
  font-size: 24px;
  min-height: 45px;
  border: none;
  border-radius: 10px;
  color: white;
  cursor: pointer;
  z-index: 10;
}

@media (max-width: 500px) {
  #pincode_reset_passw,
  #pincode_reset_passw2 {
    font-size: 19px;
    padding: 10px;
  }
}

@media (max-height: 600px) {
  #pincode_reset_passw,
  #pincode_reset_passw2 {
    font-size: 16px;
    padding: 3px;
  }
}

@media (max-width: 350px) {
  #pincode_reset_passw,
  #pincode_reset_passw2 {
    width: 130px;
  }
}

/*News page*/

.glide__slides {
  height: 100%;
}
.glide__track {
  height: 100%;
}

.glide__slide {
  background-repeat: no-repeat;
  height: 100%;
  background-size: 100%;
  display: flex;
}

.top_article_title_wrapper {
  width: 75%;
  color: white;
  font-family: "museo-sans-700", sans-serif;
  font-size: 24px;
  font-weight: bold;
  align-self: flex-end;
  padding-bottom: 36px;
  padding-left: 10px;
}

#first_news_tile_wrapper {
  height: 250px;
  display: flex;
}

#news_page_footer_wrapper {
  width: 100%;
  position: absolute;
  bottom: 0px;
  background-color: #50af31;
  max-width: 1080px;
  min-width: 286px;
  z-index: 100;
  /* border-bottom: 10px solid #50af31; */
}
#news_page_footer_subwrapper {
  width: 100%;
  height: 80px;
  padding-bottom: 15px;
  display: flex;
  position: relative;
  z-index: 50;
}

.news_page_footer_tile {
  height: 100%;
  width: 20%;
  margin: auto;
  align-items: center;
  align-content: center;
  display: flex;
  cursor: pointer;
}

.news_page_footer_tile_image {
  width: 25px;
  height: 25px;
  align-self: center;
  margin: auto;
}

#news_elements_wrapper {
  padding: 0 0;
  margin-bottom: 30px;
  overflow-y: auto;
  border-bottom: 5px solid #50af31;
}

#middle_news_tile_wrapper {
  padding: 15px 4px 30px 4px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  cursor: pointer;
  overflow-y: auto;
  overflow-x: hidden;
}
@media (max-width: 700px) {
  #middle_news_tile_wrapper {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 500px) {
  #middle_news_tile_wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.middle_news_tile {
  margin: 3px;
}

.glide__bullets {
  z-index: 0;
}

.news_image_wrapper {
  height: 163px;
  width: 100%;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
}

.news_title_wrapper {
  height: 55px;
  color: #58a618;
  font-family: "museo-sans-500", sans-serif;
  font-size: 17px;
  font-weight: bold;
  padding: 10px 5px 5px 5px;
  hyphens: auto;
}

#news_page_filter_wrapper {
  width: 100%;
  background-color: rgb(70, 119, 46);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  position: relative;
}
.tile_clicked_dark_green {
  background-color: rgb(70, 119, 46);
}

.news_filter_options_wrapper {
  margin: auto;
  padding: 10px;
  height: 100%;
  width: 100%;
  color: white;
  font-family: "museo-sans-300", sans-serif;
  font-size: 16px;
  text-align: center;
  cursor: pointer;
}

.news_filter_options_wrapper.category_selected {
  background-color: rgba(0, 0, 0, 0.2);
}

.news_filter_options_image {
  /*width: 30px;*/
  height: 24px;
}

/*Edit news section*/

#create_news_wrapper {
  padding: 7px;
  background-color: #dbdbdb;
}

#Create_news_news_input {
  width: 100%;
  padding: 5px 30px 5px 30px;
  font-family: "museo-sans-300", sans-serif;
  font-size: 16px;
  border: none;
  background-color: white;
  min-height: 200px !important;
  overflow-y: scroll;
  max-width: 650px;
  margin: auto;
  display: block;
}

#edit_news_title_input {
  height: 100%;
  padding: 5px;
  width: 60%;
  border: None;
  margin: auto;
  max-width: 200px;
}

#nieuws_wrapper_edit_date_wrapper {
  height: 100%;
  padding: 5px;
  width: 60%;
  border: None;
  max-width: 200px;
  margin: auto;
}

#edit_news_title_wrapper {
  height: 38px;
  display: flex;
  font-family: "museo-sans-300", sans-serif;
  font-weight: bold;
  color: gray;
  font-size: 16px;
  padding: 4px 0 3px;
  max-width: 650px;
  margin: auto;
  margin-bottom: 5px;
}
#edit_news_title_wrapper ::placeholder {
  font-size: 16px;
  font-weight: bold;
  font-family: "museo-sans-300", sans-serif;
  color: gray;
}

#edit_news_category_input {
  height: 100%;
  margin-left: auto;
  border: none;
  font-size: 16px;
  font-weight: bold;
  font-family: "museo-sans-300", sans-serif;
  color: gray;
  background-color: white;
}

#Create_news_post_button,
#Create_news_post_button2 {
  border: 2px solid gray;
  color: gray;
  background-color: white;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: bold;
  font-family: "museo-sans-300", sans-serif;
  cursor: pointer;
}

#post_news_buttons_wrapper {
  display: flex;
  max-width: 650px;
  margin: 7px auto;
}

#Create_news_post_button2 {
  margin-left: auto;
}

#edit_news_uploaded_sub_images_wrapper {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  margin-bottom: 5px;
}

.edit_news_uploaded_image {
  padding: 5px;
  margin: auto;
}

.edit_news_sub_image {
  width: 100%;
  height: 60px;
  border: #adadad 1px solid;
  margin: auto;
  cursor: pointer;
}
.edit_news_main_image {
  width: 100%;
  max-height: 250px;
  border: #8f8f8f 1px solid;
  border-bottom: none;
  object-fit: cover;
  resize: vertical;
  margin: auto;
}

#edit_news_uploaded_main_images_wrapper {
  margin: 5px 0 0px;
  display: flex;
}

@media (max-width: 620px) {
  #edit_news_uploaded_sub_images_wrapper {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }
}
@media (max-width: 320px) {
  #edit_news_uploaded_sub_images_wrapper {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

#create_news_upload-btn-wrapper {
  position: relative;
  overflow: hidden;
  display: inline-block;
  cursor: pointer;
  margin: auto 0 auto 0;
}

#create_news_upload-btn-btn {
  border: 2px solid gray;
  color: gray;
  background-color: white;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: bold;
  font-family: "museo-sans-300", sans-serif;
  cursor: pointer;
}

#create_news_upload_input {
  font-size: 40px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

#file-upload-button {
  height: 40px;
}

#create_news_youtube_wrapper {
  width: 100%;
  max-width: 650px;
  margin: auto;
}

.create_news_youtube_wrapper {
  width: 100%;
  max-width: 650px;
}

#create_news_youtube_iframe {
  margin: auto;
  width: 100%;
  height: 200px;
}
.create_news_youtube_iframe {
  margin: auto;
  width: 100%;
  height: 200px;
}
.create_news_youtube_iframe2 {
  margin: auto;
  width: 100%;
  height: 100%;
}

#create_news_all_upload_wrappers {
  display: flex;
  margin-bottom: 7px;
}

.news_article_change_button {
  height: 30px;
  width: 30px;
  cursor: pointer;
  margin-top: -5px;
  margin-right: -5px;
  position: absolute;
  right: -3px;
  top: -3px;
}

.news_article_delete_button {
  height: 20px;
  width: 20px;
  cursor: pointer;
  margin-top: -5px;
  margin-right: -5px;
  position: absolute;
  bottom: -1px;
  right: 1px;
}

#change_news_button_wrapper {
  width: 100%;
}

#update_news_succesfull_upload {
  width: 100%;
  background-color: #58a618;
  color: white;
  font-family: "museo-sans-300", sans-serif;
  font-size: 19px;
  text-align: center;
  margin-top: 5px;
}

.news_image_wrapper_to_click {
  height: 100%;
  width: 75%;
  margin: auto;
}

#edit_news_first_row {
  display: flex;
  margin: auto;
  max-width: 650px;
}

#edit_news_prio_text_wrapper {
  color: gray;
  font-size: 16px;
  font-weight: bold;
  font-family: "museo-sans-300", sans-serif;
  text-align: center;
  margin-left: auto;
  margin-right: 10px;
  padding: 5px;
}

#edit_news_PV_text_wrapper {
  color: gray;
  font-size: 16px;
  font-weight: bold;
  font-family: "museo-sans-300", sans-serif;
  text-align: center;
  margin-left: auto;
  margin-right: 10px;
  padding: 5px;
}

#edit_news_prio_checkbox {
  height: 23px;
  width: 23px;
  margin-top: 3px;
}

#edit_news_PV_checkbox {
  height: 23px;
  width: 23px;
  margin-top: 3px;
}

#news_page_search_bar:focus {
  outline: none;
}

#news_random_bottom_div {
  width: 100%;
  height: 1px;
  margin-top: 10px;
}

#News_search_icon {
  z-index: 6;
  padding: 6px 0px 0 10px;
  position: absolute;
  margin-top: 2px;
  right: 0;
  top: 150px;
  border-radius: 66% 0 0 66%;
  background-color: rgb(80, 175, 49);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

#News_search_icon.shown {
  display: none;
}

#News_search_icon_image {
  width: 40px;
  height: 40px;
}

#edit_news_first_tile_upper_wrapper2 {
  position: relative;
}

#news_page_search_bar_wrapper {
  width: 100%;
  height: 0;
  border: none;
  display: flex;
  opacity: 0;
  transition: height 0.3s, opacity 0.3s;
}

#news_page_search_bar_wrapper.shown {
  height: 50px;
  opacity: 1;
  display: flex;
  border-bottom: 1px #f3f3f3 solid;
}

#news_page_search_bar {
  height: 100%;
  width: 100%;
  border: none;
  padding: 2px 15px 2px 15px;
  outline: 0;
  font-family: "museo-sans-300", sans-serif;
  font-size: 16px;
}

.news_page_search_delete {
  margin: auto 15px auto 15px;
  height: 47%;
  cursor: pointer;
  width: auto;
}

#news_page_search_button {
  width: 100px;
  height: 85%;
  margin: auto 5px auto auto;
  border: None;
  text-align: center;
  background-color: rgb(80, 175, 49);
  color: white;
}

#news_page_no_news {
  font-family: "museo-sans-500", sans-serif;
  margin: 30px;
  text-align: center;
}

@media (max-width: 350px) {
  .news_filter_options_image {
    height: 20px;
  }
  .news_filter_options_wrapper {
    font-size: 16px;
  }
}

@media (max-width: 320px) {
  .news_filter_options_image {
    height: 20px;
  }
  .news_filter_options_wrapper {
    font-size: 16px;
  }
}

.Naw_gegevens_headers {
  font-family: "museo-sans-300", sans-serif;
  color: #7c7c7c;
  font-size: 16px;
  margin-bottom: -5px;
}

#screen_back_arrow2 {
  margin-left: 25px;
  padding-top: 35px;
}

.Naw_gegevens_headers2 {
  font-family: "museo-sans-300", sans-serif;
  color: #7c7c7c;
  font-size: 16px;
}

.verlof_aanvragen_input2 {
  margin-top: 5px;
  margin-bottom: 3px;
}

#pdf_viewer {
  width: 100%;
  height: 80vh;
}

#download_pdf_fallback,
#download_pdf_fallback2 {
  margin: 20px auto 10px auto;
  background-color: #50af31;
  text-align: center;
  padding: 15px;
  width: 50%;
  color: white;
  font-family: "museo-sans-300", sans-serif;
  border-radius: 10px;
  cursor: pointer;
  font-size: 17px;
}

.screen_body_wrapper {
  overflow-y: auto;
  overflow-x: hidden;
  height: 80vh;
}

#news_article_single_image_wrapper {
  height: 250px;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

#news_article_header_wrapper {
  font-family: "museo-sans-500", sans-serif;
  padding: 5px 20px 6px 20px;
  font-size: 23px;
  max-width: 650px;
  margin: auto;
}
#news_article_header_wrapper_upper {
  margin-top: 10px;
  margin-right: 30px;
}
@media (max-width: 680px) {
  #news_article_header_wrapper_upper {
    margin-right: 0;
  }
}

#news_article_body_wrapper {
  padding: 5px 20px 10px 20px;
  font-family: "museo-sans-300", sans-serif;
  color: #6e6e6e;
  font-size: 16px;
}

#pincode_input_field {
  position: absolute;
  /*cursor: pointer;*/
  top: 10vh;
  width: 100%;
  height: 90vh;
  opacity: 0;
  z-index: 4;
}

#app_loading_wrapper {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 9999;
  top: 150px;
  left: 0;
  background-color: #ffffff;
  background-image: url("/static/Spinner-5.gif");
  background-repeat: no-repeat;
  background-position: center 30vh;
}

#page_404 {
  z-index: 9999;
  height: 100%;
  width: 100%;
  padding: 30px;
  font-size: 20px;
  text-align: center;
}

#calender_wrapper_rooster {
  margin-top: 20px;
}

#calender_wrapper_rooster .eventday {
  background: #7eaaff;
}

#calender_wrapper_rooster .eventday.clicked {
  background: #1175cb !important;
  color: white !important;
}

.details_header_wrapper {
  padding: 3px;
  margin: auto;
}
.rooster_details_begintijd_wrapper {
  padding: 3px;
  margin: auto;
}

.rooster_details_eindtijd_wrapper {
  padding: 3px;
  margin: auto;
}

.rooster_details_item_wrapper {
  display: flex;
  font-family: "museo-sans-300", sans-serif;
  text-align: center;
  font-size: 20px;
  color: #494949;
  border-bottom: #50af31 1px solid;
  margin: 10px;
  position: static;
}

#rooster_day_details_wrapper {
  margin-top: 10px;
}

#change_news_dropdown {
  margin-top: 18px;
  margin-left: 10px;
  border-radius: 5px;
  display: none;
}

#change_news_dropdown.option_visisble {
  display: block;
}

.change_news_dropdown_option {
  /*border-bottom: #2a2a2a 1px solid;*/
  padding: 5px;
  font-family: "museo-sans-300", sans-serif;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  background-color: #d0d0d0;
  font-size: 18px;
  color: #424242;
  cursor: pointer;
}

.edit_news_uploaded_image_2 {
  width: 100%;
  height: 100%;
}

#login_next_wrapper {
  margin-top: 10px;
  margin-bottom: 10px;
  display: flex;
}

#login_retype_mail_wrapper {
  margin-left: auto;
  margin-right: auto;
  width: 40%;
  background-color: #58a618;
  border: none;
  border-radius: 10px;
  text-align: center;
  color: #ffffff;
  padding: 10px;
  font-size: 20px;
}

.vakantie_jaar_header {
  /* display: flex; */
  text-align: center;
  margin-top: 25px;
  margin-bottom: 6px;
  padding-bottom: 4px;
  font-size: 18px;
  font-family: "museo-sans-700", sans-serif;
  border-bottom: #424242 1px solid;
}

.vakantie_jaar_header_arrow_wrapper_img {
  width: 25px;
  float: right;
  cursor: pointer;
  margin-top: 4px;
  margin-right: 10px;
}

#vakantie_legenda_options {
  margin: 10px;
  overflow-y: hidden;
  transition: height 0.3s, opacity 0.3s;
  height: 0;
  z-index: 10;
}

#vakantie_legenda_options.shown {
  display: block;
  height: 170px;
}

.vakantie_status_image {
  width: 22px;
}

.vakantie_delete_option {
  width: 22px;
  margin-left: auto;
}
.vakantie_delete_option_image {
  width: 20px;
  cursor: pointer;
}

.color_Werkdag {
  background: #7eaaff;
}

.color_Dokter {
  background: #ffa69e !important;
}

.color_Feestdag {
  box-shadow: 0px 0px 0px 3px black inset;
}

.color_Zwangerschapsverlof {
  background: #a5abaf !important;
}

.color_Vakantie {
  background-color: #50af31 !important;
}

.color_Ziek {
  background-color: #7c6354 !important;
}

.color_Overig {
  background-color: #f8fcda !important;
}

.color_Vrij {
  background-color: #ffffff !important;
  color: black !important;
  font-weight: normal !important;
}

.vakantie_vakantie_wrapper {
  display: flex;
  font-family: "museo-sans-300", sans-serif;
  font-size: 18px;
  margin-top: 1px;
  border-bottom: #dadada 1px solid;
  padding-left: 5px;
}

#rooster_vakantie_legend {
  column-count: 1;
  margin: 10px;
  margin-top: 10px;
  margin-left: 10px;
  position: fixed;
  z-index: 10;
  background-color: white;
  width: 90%;
  margin-left: 5%;
  margin-top: 20%;
  border-radius: 7px;
  -webkit-transform: translate3d(0, 0, 1px);
  transform: translate3d(0, 0, 1px);
}

.vakantie_color_class {
  height: 20px;
  width: 20px;
  margin-left: auto;
}

#vakantie_legenda_option_wrapper {
  width: 100%;
  background-color: #50af31;
  border-radius: 5px;
  font-size: 18px;
  font-family: "museo-sans-300", sans-serif;
  padding: 10px;
  color: white;
  cursor: pointer;
  -webkit-transform: translate3d(0, 0, 1px);
  transform: translate3d(0, 0, 1px);
}

#vakantie_legend_image {
  height: 20px;
  float: right;
  border-radius: 7px;
}

.Loonstroken_wrapper {
  display: flex;
  font-family: "museo-sans-300", sans-serif;
  font-weight: 500;
  font-size: 18px;
  padding-top: 10px;
  padding-bottom: 10px;
  color: white;
  cursor: pointer;
}

.Loonstroken_wrapper:not(:last-child) {
  border-bottom: 0.5mm solid #ffffff;
}

#all_salaris_stroken_wrapper {
  margin: 35px 10px 10px;
  background-color: #50af31;
  border-radius: 10px;
  padding: 5px 10px 5px;
  border-top: 0.5mm solid #ffffff;
}

.right_arrow_screen_salaris {
  margin-left: auto;
  width: 30px;
}

#Salaris_empty_wrapper {
  text-align: center;
  font-family: "museo-sans-300", sans-serif;
  font-size: 24px;
  margin-top: 20px;
  color: white;
}

#naw_file_input {
  width: 100px;
  height: 23px;
  right: 0;
  z-index: 20;
  opacity: 0;
  position: absolute;
}

/*#FormGeboortedatum{*/
/*    display: flex;*/
/*    margin-left: 0;*/
/*    padding-left: 0;*/
/*    text-align: left;*/
/*}*/

@supports (-webkit-touch-callout: none) {
  #FormGeboortedatum {
    /* margin-left: -9px; */
    padding-left: 0;
  }

  body {
    background-color: #58a618;
  }
}

.codex-editor {
  width: 100%;
  user-select: text;
  -ms-user-select: text;
  -moz-user-select: text;
  -webkit-user-select: text;
}

.codex-editor__redactor {
  padding-bottom: 0 !important;
}

#upload_delete_images_wrapper {
  height: 100%;
  width: 21px;
  margin-left: 20px;
}

#upload_delete_images {
  width: 18px;
  height: 18px;
  margin: auto;
  cursor: pointer;
}

#log_out_button {
  padding: 5px;
  margin-bottom: 15px;
  font-family: "museo-sans-300", sans-serif;
  font-size: 15px;
  cursor: pointer;
}

#picture_and_logout_wrapper {
  margin-left: auto;
  height: 100%;
  display: grid;
}

.inmutable_input {
  border: None !important;
  color: #515151 !important;
}

#new_adress_wrapper {
  display: flex;
  margin-top: 15px;
}

#new_adress {
  font-family: "museo-sans-500", sans-serif;
  color: #46772e;
  font-size: 16px;
  margin-top: 11px;
}

#new_adress_image {
  margin-left: auto;
  margin-top: 3px;
  cursor: pointer;
}

#new_adress_image_file {
  width: 24px;
  height: 24px;
}

.invisible {
  display: none;
}

#FormNaamgebruik {
  outline: none;
  font-family: "museo-sans-300", sans-serif;
  font-size: 17px;
  color: #46772e;
  border: 1px solid gray;
  width: 100%;
  background-color: white;
  /* margin-left: -3px !important; */
  padding: 5px;
  border-radius: 5px;
}

#onboarding_wrapper {
  width: 100%;
  height: 100%;
  background-color: white;
  z-index: 100;
  position: absolute;
  top: 0;
  margin-left: auto;
  left: 0;
  background: url("/static/onboarding/4_1.png");
  background-size: 100% 100%;
}

#onboarding_subwrapper {
  width: 74%;
  height: 68%;
  margin: auto;
  margin-top: 19vh;
  background-size: 100% 100%;
  border: 1px solid up_green;
  border-radius: 5px;
}

@media (max-height: 950px) {
  #onboarding_subwrapper {
    height: 67%;
  }
}

@media (max-height: 750px) {
  #onboarding_subwrapper {
    height: 66%;
  }
}

@media (max-height: 620px) {
  #onboarding_subwrapper {
    height: 65%;
  }
}

.onboarding_slide {
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
}

#close_onboarding {
  float: right;
  width: 25px;
  height: 25px;
  cursor: pointer;
  margin-right: 15px;
  margin-top: 10px;
  display: none;
}

#close_onboarding_wrapper {
  width: 100%;
  height: 40px;
}

.onboarding_slide_image_wrapper {
  width: 100%;
  height: 52%;
  display: flex;
}

.onboarding_slide_image {
  width: 35vw;
  height: 35vh;
  max-width: 350px;
  margin-left: 24%;
  margin-top: 7vh;
}

.onboarding_slide_image2 {
  width: 175px;
  height: 87px;
  max-width: 350px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 9vh;
}

.onboarding_slide_image3 {
  width: 120px;
  height: 87px;
  max-width: 349px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 9vh;
}

@media (max-width: 320px) {
  .onboarding_slide_image2 {
    width: 150px;
    height: 75px;
  }
}
@media (max-height: 800px) {
  .onboarding_slide_image_wrapper {
    width: 100%;
    height: 48%;
  }
}

/*@media (max-width: 700px){*/
/*    !*.onboarding_slide_image2{*!*/
/*    !*    width: 36vw;*!*/
/*    !*    height: 12vh;*!*/
/*    !*}*!*/

/*    .onboarding_slide_image3{*/
/*        width: 23vw;*/
/*        height: 13vh;*/
/*        min-width: 130px;*/
/*    }*/
/*}*/

/*@media (max-width: 500px){*/
/*    !*.onboarding_slide_image2{*!*/
/*    !*    width: 155px;*!*/
/*    !*}*!*/

/*    .onboarding_slide_image3{*/
/*        width: 25vw;*/
/*    }*/
/*}*/

.onboarding_slide_title {
  width: 100%;
  text-align: center;
  font-family: "museo-sans-500", sans-serif;
  color: #50af31;
  margin-top: 2vh;
  font-size: 25px;
}

.onboarding_slide_text {
  padding: 2vh;
  width: 58vw;
  max-width: 500px;
  margin: auto;
  font-size: 18px;
  font-family: "museo-sans-300", sans-serif;
  text-align: center;
}

.onboarding_slide_text_text {
  width: 100%;
  white-space: normal;
}

@media (max-width: 375px) {
  .onboarding_slide_text {
    font-size: 17px;
  }
  .onboarding_slide_title {
    font-size: 22px;
  }
}

@media (max-width: 350px) {
  .onboarding_slide_text {
    font-size: 17px;
  }
  .onboarding_slide_title {
    font-size: 20px;
  }
}

@media (max-width: 300px) {
  .onboarding_slide_text {
    font-size: 16px;
  }
  .onboarding_slide_title {
    font-size: 17px;
  }
}

@media (max-height: 700px) {
  .onboarding_slide_image {
    margin-top: 5vh;
  }
  .onboarding_slide_title {
    margin-top: 0;
  }
}

@media (max-height: 650px) {
  .onboarding_slide_image_wrapper {
    height: 46%;
  }
  .onboarding_slide_text {
    padding-top: 4%;
  }
}

@media (max-height: 600px) {
  .onboarding_slide_image_wrapper {
    height: 40%;
  }
  .onboarding_slide_image {
    margin-top: 2vh;
  }
  /*.onboarding_slide_image2{*/
  /*    margin-top: 6vh;*/
  /*}*/

  .onboarding_slide_image3 {
    margin-top: 6vh;
  }
}

@media (max-height: 600px) {
}

.pdf_file_item_wrapper {
  width: 100%;
  border: gray 2px solid;
  display: flex;
}

.upload_pdf_image_wrapper {
  display: flex;
  width: 100%;
  background-color: #dddddd;
  cursor: pointer;
}

.FAQ_question_wrapper {
  width: 90%;
  margin: auto;
}

.faq_antwoorden {
  color: white;
  padding-right: 5px;
  padding-left: 20px;
  padding-bottom: 20px;
  padding-top: 10px;
  font-size: 16px;
  font-style: italic;
  font-family: "museo-sans-300", sans-serif;
}

#vraag_stellen_body_wrapper {
  width: 90%;
  margin: auto;
  margin-top: 20px;
}

#vraag_stellen_body {
  border: 1px solid grey;
  font-family: "museo-sans-300";
  outline: none;
  font-size: 16px;
  width: 100%;
  height: 300px;
  padding: 10px;
  margin-bottom: 10px;
}

#vraag_stellen_titel_wrapper {
  width: 90%;
  margin: auto;
  margin-top: 10px;
}

#vraag_stellen_titel {
  width: 100%;
  padding: 7px;
  border: 1px solid grey;
  font-family: "museo-sans-300";
  font-size: 18px;
}

#vraagstellen_Send_button {
  margin-left: auto;
  padding: 10px;
  background-color: #50af31;
  color: white;
  font-family: "museo-sans-300", sans-serif;
  font-size: 18px;
  border: none;
}

#vraagstellen_send_wrapper {
  display: flex;
  width: 90%;
  margin: auto;
  cursor: pointer;
}

#vraagstellen_select_wrapper {
  display: flex;
  font-size: 19px;
  padding-top: 7px;
  font-family: "museo-sans-300";
}

.vraagstellen_option {
  margin-left: 10px;
  margin-right: 34px;
  height: 20px;
  width: 20px;
}

#vraagstellen_uitleg_div {
  font-family: "museo-sans-300", sans-serif;
  font-size: 17px;
  padding: 30px;
}

.pdf_download_image {
  width: 22px;
  height: 22px;
  margin: auto 9px auto;
}

.upload_pdf_image {
  margin: 7px;
  width: 30px;
  height: 35px;
}

.pdf_image_titel_wrapper {
  font-size: 16px;
  padding: 11px;
  font-family: "museo-sans-300", sans-serif;
  margin: auto 2px auto;
  color: #505050;
}

.pdf_download_image_wrapper {
  margin-left: auto;
  display: flex;
}

.nieuws_pdf_wrapper {
  width: 100%;
}

.ce-paragraph {
  overflow-wrap: break-word !important;
}

.naw_select_option {
  padding: 0 !important;
}

#opmerking_new_adres {
  color: #8f8f8f;
  font-family: "museo-sans-300", sans-serif;
  font-size: 17px;
  margin: 5px 10px 10px;
}

#naw_family_image {
  width: 22px;
  height: 20px;
  margin: auto;
}

#naw_family_image_wrapper {
  margin-left: auto;
  height: 100%;
  display: flex;
}

#naw_family_wrapper {
  display: flex;
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #ccc;
  cursor: pointer;
}

#naw_family_text {
  font-family: "museo-sans-300", sans-serif;
  font-size: 18px;
  color: #7c7c7c;
  margin: auto 0;
}

.family_members_wrapper {
  width: 100%;
}

.add_family_member_wrapper {
  margin-top: 10px;
}

.delete_family_member_wrapper {
  margin-top: 15px;
  margin-bottom: 25px;
  display: flex;
  border-bottom: 1px solid #ccc;
}

.family_member_banner_wrapper {
  display: flex;
  border-bottom: 1px solid #ccc;
  cursor: pointer;
}

.add_family_member_left_text {
  width: 70%;
  font-family: "museo-sans-300", sans-serif;
  color: #7c7c7c;
  font-size: 17px;
  padding-top: 8px;
}

.add_family_member_right_text {
  margin-left: auto;
}

.add_family_member_right_text_image {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

#family_list_wrapper {
  padding-left: 15px;
}

.family_member_data_wrapper {
  padding-left: 10px;
  margin-top: 10px;
}

.family_select {
  outline: none;
  font-family: "museo-sans-300", sans-serif;
  font-size: 17px;
  color: #46772e;
  border: 1px solid gray;
  width: 100%;
  background-color: white;
  /* margin-left: -3px !important; */
  padding: 5px;
  border-radius: 5px;
}

.family_noodgeval_text {
  padding-top: 3px;
}

.vraagstellen_option:checked {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #50af31;
  border-radius: 50%;
  border: 1px solid black;
}

#add_family_member_banner_wrapper {
  border-bottom: none !important;
  margin-top: 18px;
}

#add_add_family_member_banner_wrapper {
  font-family: "museo-sans-500", sans-serif;
  color: #46772e;
  font-size: 16px;
}

#delete_family_member_image {
  cursor: pointer;
}

#family_child_wrapper {
  color: #8f8f8f;
  font-family: "museo-sans-300", sans-serif;
  font-size: 17px;
  margin: 15px 10px 10px;
}

.ingeklapt {
  max-height: 0px !important;
  overflow: hidden;
}

.loonstrook_year_wrapper {
  transition: max-height 0.25s ease-out;
  max-height: 1200px;
}

.Loonstroken_wrapper_banner {
  display: flex;
  font-family: "museo-sans-300", sans-serif;
  font-weight: 500;
  font-size: 18px;
  padding-top: 10px;
  padding-bottom: 10px;
  color: white;
  cursor: pointer;
  border-bottom: 1px solid white;
}

#standalonepopup {
  width: 90%;
  margin-left: 5%;
  position: absolute;
  top: 52%;
  z-index: 5;
  display: none;
  max-height: 500px;
  background-size: contain;
  aspect-ratio: 5 / 3.95;
}

#login_emailtext {
  font-family: "museo-sans-500", sans-serif;
  font-size: 20px !important;
  margin: auto;
  text-align: center;
  margin-top: 20px;
  color: #080808;
}

#login_emailtext2 {
  font-family: "museo-sans-300", sans-serif;
  font-size: 18px;
  margin: auto;
  text-align: center;
  margin-top: 10px;
  color: #343434;
}

#verlof_warining_wrapper {
  font-family: "museo-sans-300", sans-serif;
  font-size: 18px;
  margin: auto;
  text-align: center;
  margin-top: 30px;
  color: #343434;
}

#standalone_cross {
  position: absolute;
  cursor: pointer;
  top: -10px;
  right: -10px;
}

#standalone_cross_img {
  width: 35px;
  height: 35px;
}

#vakantie_lijst_warning {
  margin-top: 10px;
  padding: 5px;
  padding-bottom: 0px;
}

.vakantie_lijst_warning {
  margin-top: 10px;
  padding: 15px 23px 0px 30px;
  font-family: "museo-sans-300", sans-serif;
  font-size: 18px;
  color: #7c7c7c;
}

.vervanger_switch_wrapper {
  font-family: "museo-sans-300", sans-serif;
  border-bottom: 1px solid #ccc;
  font-size: 18px;
  padding-top: 20px;
  padding-bottom: 5px;
  margin: 20px;
  color: #7c7c7c;
  display: flex;
}

.vervanger_switch_wrapper_text {
  margin-top: 10px;
  font-size: 19px;
}

.vervanger_total_switch_wrapper {
  float: right;
  margin-left: auto;
  padding-bottom: 5px;
}

#new_mail_adres_input {
  width: 93%;
  border: 1px solid #c4c4c4;
  padding: 10px;
  font-size: 19px;
  font-family: "museo-sans-300";
  max-height: 0px;
  transition: max-height 0.85s ease-out;
  display: none;
  margin: auto;
}

#new_mail_adres_inputwrapper {
  margin: 10px;
}

#new_mail_adres_input.uitgeschoven {
  max-height: 500px;
  display: block;
}

.input[type="text"] {
  border-radius: 10px;
}

.news_date_wrapper {
  font-family: "museo-sans-300", sans-serif;
  padding: 5px 20px 6px 30px;
  font-size: 17px;
  max-width: 650px;
  margin: auto;
  color: #464646;
}

.tvt_uitetalen_titel {
  font-family: "museo-sans-700", sans-serif;
  color: #46772e;
  font-size: 20px;
  margin: 40px 15px 0 25px;
}

#tvt_uitetalen_input_wraper {
  border: 1px solid gray;
  align-self: center;
  font-family: "museo-sans-300", sans-serif;
  font-size: 17px;
  padding: 6px;
  border-radius: 5px;
  margin: 10px 15px 0 25px;
}

#verlog_uitetalen_input_wraper {
  border: 1px solid gray;
  align-self: center;
  font-family: "museo-sans-300", sans-serif;
  font-size: 17px;
  padding: 6px;
  border-radius: 5px;
  margin: 10px 15px 0 25px;
}

#tvt_uitbetalen_warning {
  font-family: "museo-sans-300", sans-serif;
  font-size: 18px;
  margin: auto;
  text-align: center;
  padding: 15px;
  margin-top: 20px;
  color: #343434;
}

#verlof_uitbetalen_warning,
#aanmelden_pv_text {
  font-family: "museo-sans-300", sans-serif;
  font-size: 18px;
  margin: auto;
  text-align: center;
  padding: 15px;
  margin-top: 20px;
  color: #343434;
}

#tvt_uitetalen_input {
  width: 100%;
  height: 100%;
  border: None;
  outline: none;
}

#verlof_uitetalen_input {
  width: 100%;
  height: 100%;
  border: None;
  outline: none;
}

#tvt_uitbetalen_button {
  margin-top: 25px;
  display: flex;
  align-content: center;
  width: 100%;
}

#to_dos_wrapper {
  margin: 30px 10px 10px;
  padding: 5px 10px 5px;
}

.Agenda_point_wrapper0 {
  padding-top: 10px;
  margin-top: 3px;
  padding-bottom: 10px;
  color: #46772e;
  display: flex;
}

.Agenda_point_wrapper1 {
  border-bottom: 1px solid lightgray;
  cursor: pointer;
}

.to_do_taakwrapper {
  font-family: "museo-sans-300", sans-serif;
  font-weight: 300;
  font-size: 17px;
  margin-bottom: 5px;
  color: #9b9b9b;
  padding-left: 5px;
  cursor: pointer;
}

#calendar_subwrapper {
  display: flex;
}

#calendar_weeknummer_wrapper {
  height: 218px;
  width: 10%;
  margin-top: 93px;
}

.roostertijden_subwrapper {
  height: 30px;
  margin: 10px;
  width: 90%;
  font-family: "museo-sans-300", sans-serif;
  font-size: 17px;
  color: white;
  padding: 5px;
  padding-left: 16px;
  background-color: #50af31;
  margin-left: auto;
  margin-right: auto;
  cursor: pointer;
  border-radius: 5px;
}

.kloktijden_arrow {
  height: 16px;
  float: right;
  margin-right: 10px;
}

.hidden {
  display: none;
}

.kloktijden_textwrapper {
  max-height: 0;
  border-radius: 5px;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  transition: max-height 0.3s, opacity 0.3s;
  opacity: 0;
  overflow: hidden;
}

.kloktijden_textwrapper.kloktijd_shown {
  opacity: 1;
  max-height: 1000px;
  border: 1px solid #50af31;
  padding: 2px 5px 2px 5px;
  margin-bottom: 15px;
}

#wv_aanvragen_button_wrapper {
  margin-top: 25px;
  display: flex;
  align-content: center;
  width: 100%;
}

#wv_aanvragen_button {
  width: 90%;
  height: 55px;
  border-radius: 10px;
  border: 0;
  margin: 20px auto 20px auto;
  background-color: #58a618;
  color: #ffffff;
  font-size: 20px;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  appearance: none;
}

#wv_aanvragen_text_wrapper {
  font-family: "museo-sans-300", sans-serif;
  font-size: 18px;
  margin: auto;
  text-align: center;
  padding: 15px;
  margin-top: 20px;
  color: #343434;
}

#wv_button_wrapper {
  display: flex;
}

.kloktijden_row {
  display: flex;
  font-size: 17px;
  padding: 3px 11px;
  font-family: "museo-sans-300", sans-serif;
  color: #494949;
}

.kloktijden_row_data {
  float: right;
  margin-left: auto;
}

#rooster_day_tijden_wrapper {
  margin-bottom: 15px;
  height: calc(100vh - 308px - 150px - 20px - 30px);
  overflow-y: scroll;
  padding-bottom: 50px;

  position: relative !important;
  z-index: 4;
}

.nextpage_images {
  height: 32px;
}

.Aanvragen_image_wrapper {
  height: 100%;
  width: 60px;
  background-color: #50af31;
  margin-right: 2px;
  padding: 6px 6px 3px 11px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.option_overwrapper {
  height: 45px;
  border-radius: 10px;
  display: flex;
  font-family: "museo-sans-300", sans-serif;
  font-weight: 500;
  font-size: 18px;
  color: white;
  cursor: pointer;
  margin-bottom: 10px;
}

.option_overwrapper_small {
  height: 45px;
  border-radius: 10px;
  display: flex;
  font-family: "museo-sans-300", sans-serif;
  font-weight: 500;
  font-size: 18px;
  color: white;
  cursor: pointer;
  margin: 10px 10px;
}

.option1 {
  padding-top: 12px;
  padding-bottom: 10px;
  padding-left: 10px;
  background-color: #50af31;
  width: 100%;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

#geen_taken_wrapper {
  font-family: "museo-sans-300", sans-serif;
  text-align: center;
  font-size: 18px;
  color: black;
}

#rooster_overwrapper {
  overflow-y: hidden;
  height: 80vh;
}

#rooster_legend_button {
  width: 40px;
  height: 40px;
}

#rooster_legend_button_wrapper {
  z-index: 6;
  padding: 6px 3px 1px 10px;
  position: absolute;
  margin-top: 2px;
  right: 0;
  top: 150px;
  border-radius: 66% 0 0 66%;
  background-color: rgb(80, 175, 49);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.legend_invisible {
  display: None;
}

#gray_wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 150px;
  background: gray;
  opacity: 0.6;
}

#rooster_loading_div {
  height: 100%;
  width: calc(100% - 40px);
  background-color: gray;
  position: absolute;
  top: 0;
  /* opacity: 0.6; */
  margin: 10px 20px;
  background: url("/static/Spinner-7.gif") 50% 50% no-repeat;
  z-index: 10;
}

#wrapper_salaris_option2 {
  margin: 35px 10px 10px;
  background-color: #50af31;
  border-radius: 10px;
  padding: 5px 10px 5px;
}

.PV_right_arrow {
  width: 20px;
  margin-left: 20px;
}

.cdx-simple-image__caption {
  display: none !important;
}

#order_table_body {
  height: 100%;
  overflow-y: scroll;
}

#edit_mainpage_wrapper {
  margin: 30px 10px 10px;
  border-radius: 10px;
  padding: 5px 10px 5px;
}

.edit_page_wrapper {
  margin: 30px 10px 10px;
  border-radius: 10px;
  padding: 5px 5px 5px;
}

.edit_titel_wrapper {
  border: 1px solid gray;
  align-self: center;
  font-family: "museo-sans-300", sans-serif;
  font-size: 17px;
  padding: 6px;
  border-radius: 5px;
  margin: 10px 10px 0 10px;
}

.edit_titel_input {
  width: 100%;
  height: 100%;
  border: None;
  outline: none;
}

.file_wrapper {
  align-self: center;
  font-family: "museo-sans-300", sans-serif;
  font-size: 17px;
  padding: 0px;
  border-radius: 5px;
  margin: 10px 10px 20px 10px;
  display: flex;
}

.edit_file_input {
  width: 100%;
  height: 100%;
  border: None;
  outline: none;
  padding-top: 5px;
}

.edit_submit_button {
  height: 100%;
  padding: 5px 30px;
  margin-left: auto;
  border-radius: 5px;
  background-color: gray;
  border: None;
  color: white;
}

.file_list_item {
  display: flex;
  font-size: 20px;
  display: flex;
  padding-bottom: 7px;
  margin: 10px 10px 0 10px;
  margin-top: 10px;
  margin-top: 15px;
  border-bottom: 1px solid #cccccc;
  cursor: pointer;
}

.file_list_wrapper {
  margin-top: 30px;
}

.file_list_item_titel {
  width: 90%;
}

.info_sub_Header {
  height: 45px;
  border-radius: 10px;
  display: flex;
  font-family: "museo-sans-300", sans-serif;
  font-weight: 500;
  font-size: 18px;
  color: white;
  cursor: pointer;
  margin-bottom: 10px;
}

#info_wrapper {
  margin: 20px 10px 10px;
  padding: 5px 10px 5px;
}

.info_sub_body {
  padding-bottom: 10px;
  margin-top: 15px;
}

.info_sub_body_inactive {
  height: 0;
  overflow: hidden;
  transition: height 0.5s;
  padding: 0;
  transition: padding 0.5s;
}

.file_list_item2 {
  display: flex;
  font-size: 17px;
  display: flex;
  padding-bottom: 7px;
  margin: 10px 10px 0 10px;
  border-bottom: 1px solid #cccccc;
  cursor: pointer;
}

.search_bar_info {
  height: 50px;
  display: flex;
  border-bottom: 1px #f3f3f3 solid;
}

.search_input_info {
  height: 100%;
  width: 100%;
  border: none;
  padding: 2px 15px 2px 15px;
  outline: 0;
  font-family: "museo-sans-300", sans-serif;
  font-size: 16px;
}

.search_button_info {
  width: 100px;
  height: 85%;
  margin: auto 5px auto auto;
  border: None;
  text-align: center;
  background-color: rgb(80, 175, 49);
  color: white;
  cursor: pointer;
}

.edit_date_wrapper {
  margin: 10px 10px 0 10px;
}

.edit_date_input {
  width: 100%;
  height: 100%;
  border: None;
  outline: none;
}

.edit_submit_button_active {
  cursor: pointer;
  background-color: rgb(80, 175, 49);
}

.file_show_date_wrapper {
  font-family: "museo-sans-300", sans-serif;
  font-size: 15px;
  margin: 10px 10px 0 10px;
  color: #5b5b5b;
}

#mening_wrapper,
#nieuwpeiling_wrapper,
#peiling_overzicht_wrapper,
#peilingen_overzicht_wrapper {
  margin: 30px 10px 10px;
  border-radius: 10px;
  font-family: "museo-sans-300", sans-serif;
  padding: 5px 10px 5px;
}

#declaraties_wrapper {
  margin: 10px 10px 10px;
  border-radius: 10px;
  font-family: "museo-sans-300", sans-serif;
  padding: 5px 10px 5px;
}

#peilingen_overzicht_wrapper,
#editpeiling_wrapper {
  margin: 20px 10px 10px;
  border-radius: 10px;
  font-family: "museo-sans-300", sans-serif;
  padding: 5px 10px 5px;
}

#vraag_wrapper_nieuwpeiling {
  border: 1px solid gray;
  align-self: center;
  font-family: "museo-sans-300", sans-serif;
  font-size: 17px;
  padding: 6px;
  border-radius: 5px;
  margin: 50px 15px 0 25px;
}

#vraag_nieuwpeiling {
  width: 100%;
  height: 100%;
  border: None;
  outline: none;
}

.nieuwe_peiling_antwoord_wrapper {
  display: flex;
  margin-top: 10px;
}

.delete_antwoord {
  height: 25px;
  margin-left: auto;
  cursor: pointer;
}

.nieuwe_peiling_antwoord {
  width: 90%;
  padding: 6px;
  border: 1px solid gray;
  outline: None;
}

#antwoord_wrapper_nieuwpeiling {
  margin: 10px 15px 0 25px;
}

.add_antwoord {
  margin-top: 10px;
  height: 35px;
  margin-left: auto;
  cursor: pointer;
  margin-right: 10px;
}

#submit_wrapper_nieuwpeiling {
  display: flex;
  align-content: center;
  width: 100%;
}

#submit_nieuwpeiling {
  width: 90%;
  height: 55px;
  border-radius: 10px;
  border: 0;
  margin: 20px auto 20px auto;
  background-color: #58a618;
  color: #ffffff;
  font-size: 20px;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  appearance: none;
}

#preview_nieuwpeiling {
  width: 74%;
  height: 35px;
  border-radius: 10px;
  border: 0;
  margin: 20px auto 20px auto;
  background-color: #58a618;
  color: #ffffff;
  font-size: 18px;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  appearance: none;
}

#iedereen_wrapper_nieuwpeiling,
#active_wrapper_nieuwpeiling {
  margin: 10px 15px 0 25px;
  display: flex;
}

#iedereen_nieuwpeiling,
#active_nieuwpeiling {
  height: 26px;
  width: 26px;
  margin-left: auto;
}

#iedereen_text_nieuwpeiling,
#active_text_nieuwpeiling {
  font-family: "museo-sans-300", sans-serif;
  font-size: 18px;
}

.nieuwpeiling_options_text {
  font-family: "museo-sans-300", sans-serif;
  font-size: 18px;
  margin: 10px 15px 0 25px;
}

.nieuwpeiling_options_wrapper {
  margin: 0 15px 0 25px;
}

.nieuwpeiling_options {
  border: 1px solid gray;
  font-family: "museo-sans-300", sans-serif;
  font-size: 15px;
  padding: 6px;
  border-radius: 5px;
  width: 100%;
}

.selected_filter_poll {
  display: flex;
  border: 1px solid gray;
  font-family: "museo-sans-300", sans-serif;
  font-size: 15px;
  padding: 6px;
  border-radius: 5px;
  /* width: 90%; */
  margin: 5px 10px;
}

.delete_antwoord2 {
  height: 25px;
  margin-left: auto;
  cursor: pointer;
}

.peiling_over_wrapper {
  font-size: 18px;
  padding: 10px;
  border-bottom: 1px solid #cccccc;
}

.peiling_row {
  padding: 5px;
  display: flex;
}

.peiling_label {
  margin-left: 15px;
}

.peiling_input {
  height: 20px;
  width: 20px;
  margin-top: auto;
}

.peiling_titel {
  margin-bottom: 10px;
}

.peiling_submit_button {
  width: 70%;
  height: 50px;
  border-radius: 10px;
  border: 0;
  margin: 10px auto 5px auto;
  background-color: #58a618;
  color: #ffffff;
  font-size: 22px;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  text-align: center;
  appearance: none;
  padding-top: 10px;
}

.peilingen_overzicht_title_wrapper {
  text-align: center;
  margin-top: 25px;
  padding-bottom: 4px;
  font-size: 18px;
  font-family: "museo-sans-700", sans-serif;
  color: #46772e;
  border-bottom: #424242 1px solid;
}

.peilingelement_over_wrapper {
}

.peiling_delete_option {
  margin-left: auto;
  margin-right: 10px;
  cursor: pointer;
}

.peiling_delete_option_image {
  height: 25px;
}

.peilingelement_total_wrapper {
  font-size: 16px;
  display: flex;
  padding-bottom: 7px;
  padding-left: 3px;
  color: #46772e;
  margin-top: 15px;
  border-bottom: 1px solid #cccccc;
  cursor: pointer;
}

.poll_results_wrapper {
  margin: 10px 15px 0 25px;
}

.poll_results_titel {
  text-align: center;
  padding-bottom: 15px;
  font-size: 18px;
  font-family: "museo-sans-700", sans-serif;
  color: #46772e;
}

.poll_results_row {
  font-size: 16px;
  display: flex;
  padding-bottom: 7px;
  padding-left: 3px;
  margin-top: 15px;
  border-bottom: 1px solid #cccccc;
}

.poll_results_antwoord {
  width: 70%;
}

.poll_results_votes {
  width: 30%;
  text-align: right;
}

.poll_results_download_button {
  text-align: center;
  padding-top: 15px;
  height: 55px;
  border-radius: 10px;
  border: 0;
  margin: 20px auto 20px auto;
  background-color: #58a618;
  color: #ffffff;
  font-size: 20px;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  appearance: none;
}

#open_points_wrapper {
  padding: 1px 8px;
  margin-left: auto;
  background-color: #50af31;
  border-radius: 50%;
  color: white;
  float: right;
  margin-right: 10px;
  font-size: 18px;
  font-family: "museo-sans-700", sans-serif;
  border: 1px solid red;
  margin-top: -2px;
}

#declaraties_type_wrapper {
  margin: 5px 20px;
}

#declaraties_vervoers_type,
#declaraties_type,
#declaratie_date {
  width: 100%;
  border: 1px solid gray;
  font-family: "museo-sans-300", sans-serif;
  font-size: 15px;
  padding: 6px;
  border-radius: 5px;
}

#declaraties_omschrijving,
#declaraties_bedrag {
  border: 1px solid gray;
  font-family: "museo-sans-300", sans-serif;
  font-size: 15px;
  padding: 6px;
  border-radius: 5px;
  width: 100%;
}

#declaraties_bedrag {
  border: 1px solid gray;
  font-family: "museo-sans-300", sans-serif;
  font-size: 15px;
  padding: 6px;
  border-radius: 5px;
  width: 100%;
}

#declaraties_bedrag_wrapper,
#declaraties_date_wrapper {
  margin: 5px 20px;
}

#declaraties_submit_wrapper {
  display: flex;
  align-content: center;
  /* width: 100%; */
  margin: 5px 20px;
}

#declaraties_submit {
  width: 100%;
  height: 55px;
  border-radius: 10px;
  border: 0;
  margin: 20px auto 20px auto;
  background-color: #58a618;
  color: #ffffff;
  font-size: 20px;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  appearance: none;
}

#declaraties_bijlage_wrapper {
  margin: 5px 20px;
}

#declaraties_bijlage {
  width: 100%;
  font-size: 15px;
}

#declaraties_omschrijving_wrapper {
  margin: 5px 20px;
}

.declaraties_file_item {
  display: flex;
  align-items: center;
  margin-top: 5px;
  padding: 7px;
  font-family: "museo-sans-300", sans-serif;
  font-size: 15px;
}

.file-name {
  margin-right: 10px;
}

.declaraties_delete_button {
  width: 22px;
  margin-left: auto;
}

.declaraties_delete_image {
  width: 20px;
  cursor: pointer;
}

.declaraties_text {
  text-align: center;
  margin-top: 15px;
  padding-bottom: 4px;
  font-size: 18px;
  font-family: "museo-sans-700", sans-serif;
  color: #46772e;
}

#declaraties_bijlage_text {
  margin-top: 10px !important;
}

#declaraties_toelichting_wrapper {
  font-family: "museo-sans-300", sans-serif;
  font-size: 18px;
  margin: auto;
  text-align: center;
  padding: 15px;
  /* margin-top: 20px; */
  color: #343434;
}

.disabled_filter {
  background-color: #898989;
}

.peiling_date_wrapper {
  margin-bottom: 10px;
  text-align: center;
}

.vakantie_created_option {
  text-align: center;
  padding: 4px;
  color: gray;
  margin-top: 5px;
}

.vakantie_jaar_wrapper {
  height: 0;
  display: None;
}

.uitgeschoven {
  height: 100%;
  display: unset;
}

.rooster_details_week_wrapper {
  font-family: "museo-sans-300", sans-serif;
  text-align: center;
  font-size: 20px;
  color: #494949;
}

#declaraties_algemene_toelichting_wrapper {
  font-family: "museo-sans-300", sans-serif;
  font-size: 18px;
  margin: auto;
  text-align: center;
  padding: 15px;
  /* margin-top: 20px; */
  color: #7c7c7c;
}

.poll_results_row_preview {
  text-align: center;
}

#preview_container_nieuwpeiling {
  margin: 0 15px 0 25px;
  text-align: center;
}

.poll_results_row_preview_image {
  height: 25px;
  margin-left: auto;
  margin-right: auto;
  margin-top: -10px;
}

#poll_results_row_preview_first {
  display: flex;
}

#declaraties_input_wrapper {
  height: 40px;
  width: 135px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  /*Using a background color, but you can use a background image to represent a button*/
  /* background-color: #DDF; */
}

.fiets_leasen_li {
  font-size: 18px;
  color: #343434;
  padding: 3px 15px;
  font-family: "museo-sans-300", sans-serif;
}

.fiets_lease_titel {
  font-family: "museo-sans-700", sans-serif;
  color: #46772e;
  font-size: 20px;
  margin: 40px 15px 10px 25px;
}

.fiets_leasen_ol {
  padding: 5px 20px;
  margin-left: 25px;
}

#fiets_leasen_button_wrapper,
#pv_aanmelden_submit_wrapper {
  margin-top: 25px;
  display: flex;
  align-content: center;
  width: 100%;
}

#fiets_leasen_button,
#pv_aanmelden_submit {
  width: 90%;
  height: 55px;
  border-radius: 10px;
  border: 0;
  margin: 20px auto 20px auto;
  background-color: #58a618;
  color: #ffffff;
  font-size: 20px;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  appearance: none;
}

.fiets_leasen_ul {
  padding: 5px 20px;
  margin-left: 25px;
}

#agenda_banner_wrapper {
  height: 300px;
  width: 100%;
  background-image: url("/static/Agenda_banner.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.aanmelden_div_pv {
  padding: 30px 15px;
}

#pv_aanmelden_select {
  width: 100%;
  border: 1px solid gray;
  font-family: "museo-sans-300", sans-serif;
  font-size: 15px;
  padding: 6px;
  border-radius: 5px;
}

#pv_aanmelden_select_wrapper {
  margin: 0px 30px;
}

#pv_aanmelden_select_question {
  text-align: center;
  margin: 15px;
  padding: 3px 15px;
  font-size: 18px;
  font-family: "museo-sans-700", sans-serif;
  color: #46772e;
}