h4 h5 {
  margin-top: .5rem;
}

.headerbar {
/*
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  list-style: none;

  display: block;
  padding: 0 .5rem;
  margin: 0;

  text-decoration: none;
  list-style: none;
  */

  color: #2d2400 !important; /* RGB 45 36 0 Panta Rhei gray */
  background-color: #ffd01c !important;  /* tsa yellow */
}

.headerbar_nl {
/*
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  list-style: none;

  display: block;
  padding: 0 .5rem;
  margin: 0;

  text-decoration: none;
  list-style: none;
*/

  color: #f3f3f3 !important; /* offwhite */
  background-color: #069d06 !important;  /* second corrector green #069d06 RGB 6-157-6  PR2023-07-17 */
}

.headerbar_test {
/*
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  list-style: none;
  display: block;
  padding: 0 .5rem;
  margin: 0;

  text-decoration: none;
  list-style: none;
*/

  color: #2d2400 !important; /* RGB 45 36 0 Panta Rhei gray */
  background-color: #ff5722 !important;  /* orange, for testing site */
}


.headerbar_style {
/*
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  list-style: none;
*/
  display: block;
  padding: 0 .5rem;
  margin: 0;

  text-decoration: none;
  list-style: none;
  border-bottom: 2px solid #f3f3f3; /* offwhite */
}
/*
.headerbutton {
  display: inline-block;
  font-weight: $btn-font-weight;
  color: $body-color;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  background-color: transparent;
  padding: 0 .5rem;
  margin: 0;

}
*/

/* menubar */
.menubar {
  display: -ms-flexbox;
  /*display: flex;*/
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;

  display: block;
  padding: 1px 4px; /*padding: 0 .5rem;*/
  margin: 0px;
  width: 100%;

  overflow: hidden;
  text-decoration: none;
  list-style: none;

  background-color: #e0e0e0;

  /* test*/
    position: fixed;
    z-index: 99;
}

.menubar a {
  float: left;
  color: #212529;
  text-align: center;
  padding: 2px 8px; /*padding: 0 .5rem;*/
  text-decoration: none;
  font-size: 14px;
}

.menubar a:hover {
  background-color: #c4c4c4;
  color: black;
}
.menubar a.active {
  background-color: #646464; /* dark grey */
  color: white;
}


.tsa_hover:hover {
  background-color: #c4c4c4;
  color: black;
}


/* submenubar */
.submenubar {
 /* display: -ms-flexbox;*/
  /*display: flex;*/
 /* -ms-flex-wrap: wrap;*/
 /*     flex-wrap: wrap;*/

  display: block;
  padding: 1px 4px;
  margin: 0;

  overflow: hidden;
  text-decoration: none;
  list-style: none;


  background-color: #f5f5f5; /* this is reddish: background-color: #f8f8f8;*/


    /* test*/
    position: fixed;
    z-index: 98;
    margin-top: 27px; /*  margin-top: 38px; */
    width: 100%;

}

.submenubar a {
  float: left;
  color: #212529;
  text-align: center;
  padding: 1px 4px; /*padding: 0 .5rem;*/
  text-decoration: none;
  font-size: 14px;
}

.submenubar a:hover {
  background-color: #c4c4c4;
  color: black;
}
.submenubar a.active {
  background-color: #646464; /* dark grey */
  color: white;
}

.nopadding {
    padding-top: 0.05rem;;
    padding-bottom: 0.05rem;
}

.border_none {
    border: 0;
    /*background-color: transparent;*/
}
.border_right {
    border-right: 1px solid;
    border-color: #a5a5a5; /* medium grey; 165 165 165 */
}

.border_bg_invalid {
    border: 1px solid #dc3545;    /*  red like in django is-invalid */
    border-radius: .25rem;
    /*background-color: #f1b5b5;*/
    background: #ffe8e8; /* licht lichtrood; */
}
.border_invalid {
    border: 1px solid #dc3545;    /*  red like in django is-invalid */
    border-radius: .25rem;
}
.color_invalid {
    color: #dc3545;    /*  red like in django is-invalid */
}
.border_bg_valid {
    border: 1px solid  #4cbd67 !important;  /*  #28a745; is green like in django is-valid */
    border-radius: .25rem  !important;
    background-color: #d7f4de !important; /*#ade8bb;*/
}
.border_bg_transparent {
    border: 1px solid #303024; /* dark dark Panta Rhei grey 48 48 36 */
    border-radius: .25rem;
    background-color: transparent;

    /*margin: 8px;  /* mx-2 = .5 rem, mx-1 = .25 rem, 1 rem = 16 px  <top><right><bottom><left> */
    /*padding: 8px; */
}
.border_bg_warning {
    border: 1px solid  #ffc107 !important;  /*  #ffc107 orangeish */
    border-radius: .25rem  !important;
    background-color: #fff3cd !important; /* #fff3cd; alert-warning background  */
    padding: 8px;
}
.border_bg_message {
    border: 1px solid #303024; /* dark dark Panta Rhei grey 48 48 36 */
    border-radius: .25rem;
    background-color: #f5f5f5;  /* licht licht licht grijs 245 245 245 */
}
.border_bg_lightblue {
    /* border: 1px solid #303024; /* dark dark Panta Rhei grey 48 48 36 */
    border: 1px solid #2D4E77; /* HeaderBackColor Default Schema Blauw donkerblauw */
    border-radius: .25rem;
    /*background-color: #2d4e77;  /* HeaderBackColor Default Schema Blauw donkerblauw RGB 45,78,119 */
   /* background-color: #376191;  /*  FooterBackColor Default Schema Blauw medium blauw  RGB 55,97,145)  */
    background-color: #b8cce4;  /* AWP lichtblauw RGB 184,204,228  */
}
.border_bg_lightorange {
    border: 1px solid #303024; /* dark dark Panta Rhei grey 48 48 36 */
    border-radius: .25rem;
    background-color: #fde9d9; /* PR2023-08-03 lightest Excel orange for background in MSTAT */
}

.border_bg_lightgreen {
    border: 1px solid #303024; /* dark dark Panta Rhei grey 48 48 36 */
    border-radius: .25rem;
    background-color: #ebf1de; /* PR2023-08-03 lightest Excel green for background in MSTAT */
}

.bg_selected_blue {
    background-color: #376191 !important;  /*  FooterBackColor Default Schema Blauw medium blauw  RGB 55,97,145)  */
    color: #ffffff; /* #ffffff is white; #edf2f8; is light light blue*/
/*
    -webkit-transition: background-color 0.25s ease;
    -o-transition: background-color 0.25s ease;
    transition: background-color 0.25s ease;
*/
}

.text_decoration_line_through_red {
  text-decoration: line-through double red;  /* #dc3545;    /*  red like in django is-invalid  PR2024-09-27*/
}

/* to reset text-decoration after marking tobedeleted row with line-through red  PR2024-09-27 */
.text_decoration_initial {
  text-decoration: initial;
}


.border_calendarshift {
    border: 1px solid #808080 !important; /* Dark grey; */
}


/* PR2021-11-07 to show blue in links in modimport result message. */
.tsa_href {
    color: #15c;
    text-decoration: underline;
}


.display_show {
  display: block;
  /*margin-left: auto;*/
 /* margin-right: auto;*/
}

.display_hide {
  display: none;
}

.visibility_show {
  visibility: visible; /* visibility: collapse fr table elements */
}

.visibility_hide {
  visibility: hidden;
}

.pointer_show {
    cursor: pointer;
}

.no_select {
    /* to prevent text selection PR2020-11-29*/
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

}
.cell_error_odd {
    background: #ffcccc;
}
.cell_error_even {
    background: #ffefef;
}
.cell_saved_odd {
    background: #ccffcc; /* light green*/
}
.cell_saved_even {
    background: #deffde;  /* light light green*/
}
.cell_unchanged_odd {
    /*background: #e0e0e0;  /* light grey */
    /*background: #fafafa;  /* light light grey */
    background: #f2f5f8;  /* light light bluish grey */

}
.cell_unchanged_even {
    /* background: #f8f8f8;  /* light light grey */
    /* background: #e8e8e880; /*licht licht grijs 232 232 232 50% */
    /*background-color: #f5f5f5;  /* #f5f5f5 licht licht licht grijs 245 245 245;  this is reddish: background-color: #f8f8f8;*/
    background: #ffffff;  /* white */
}



/*
.cell_error tr:nth-child(even) td {
        background-color: #f4fbff; /* RGB(244,251,255) heel licht blauw */
        /*background-color: #F5FAFF; /* RGB 245, 250, 255 #F5FAFF = licht licht blauw; #B8CCE4 = 'TextboxBackColor Default Schema Blauw lichtblauw */
    /*background: #ffcccc
        /*background-color: rgba(0, 169, 230, 0.1)*/
/*}*/



/* PR2020-04-07 to get second moadl on top of first one */
/* from https://stackoverflow.com/questions/32634488/second-modal-doesnt-put-backdrop-on-first-one */
.z_index_1099 {
    z-index: 1099;
}
/* for mod confirm PR2020-04-21 */
.z_index_2099 {
    z-index: 2099;
}


/* CSS loader */
.loader {
  position: relative;
  width: 40px; /*  width: 80px; */
  margin: 10px auto; /*  margin: 100px auto; */
}

.duo {
  height: 10px;  /* height: 10px;*/
  width: 25px;  /* width: 25px; */
  background: hsla(0, 0%, 0%, 0.0);
  position: absolute;
}

.duo, .dot {
  animation-duration: 0.8s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.duo1 {
  left: 0;
}

.duo2 {
  left: 15px
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 5px;
  /*background: #2D4E77; /* HeaderBackColor Default Schema Blauw donkerblauw */
  background: #646464; /* dark grey */
  position: absolute;
}

.dot-a {
  left: 0px;
}

.dot-b {
  right: 0px;
}

@keyframes spin {
    0% { transform: rotate(0deg) }
   50% { transform: rotate(180deg) }
  100% { transform: rotate(180deg) }
}

@keyframes onOff {
    0% { opacity: 0; }
   49% { opacity: 0; }
   50% { opacity: 1; }
  100% { opacity: 1; }
}

.duo1 {
  animation-name: spin;
}

.duo2 {
  animation-name: spin;
  animation-direction: reverse;
}

.duo2 .dot-b {
  animation-name: onOff;
}

.duo1 .dot-a {
  opacity: 0;
  animation-name: onOff;
  animation-direction: reverse;
}

/* end of CSS loader */

/* ============== mtp-modal ================= PR2020-04-13 */
.mtp_modal {
  /*background-color: rgba(0,0,0,0.02); /* Transparent dimmed overlay */
  background-color: transparent;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: table;
  z-index: 2099;
}

.mtp_modal.hidden {
  display: none;
}

.mtp_modal .mtp_container {
 display: table-cell;
 text-align: center;
 vertical-align: middle;
 width: 200px;

}

.mtp_modal .mtp_body {
  box-shadow: 5px 10px #888888;
  display: inline-block;
  /*background-color: #f5f5f5; /* #f5f5f5 = 245 245 245  licht licht licht grijs;*/
  border: 1px solid #808080; /* dark grey 128 128 128 */

  border-radius: .25rem;
  padding: 10px;
}
.mtp_header {
    display: flex;
    align-items: flex-start; /* so the close btn always stays on the upper right corner */
    justify-content: space-between; /* Put modal header elements (title and dismiss) on opposite ends */
    /*border-bottom: 1px solid purple /*#808080; /* grijs; */

    background-color: #808080;
    color: #ffffff;
    /*font-weight: bold;*/
  }

/* from https://stackoverflow.com/questions/32459337/how-to-remove-bootstrap-modal-overlay*/
/* remove grey background from modal  PR2019-04-12 */
/* from https://stackoverflow.com/questions/53594423/how-to-open-a-bootstrap-modal-without-jquery-or-bootstrap-js-javascript */
.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    /*background-color: #000;*/
    background-color: transparent;
}
.modal-backdrop.in {
    filter: alpha(opacity=50);
    opacity: .5;
}
/*
.modal {
  background-color: rgba(0,0,0,0.4);  Transparent dimmed overlay
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: table;
}
*/
.modal.hidden {
  display: none;
}

.modal .container {
 display: table-cell;
 text-align: center;
 vertical-align: middle;
 width: 200px;
}

.modal .body {
  box-shadow: 5px 10px #888888;
  display: inline-block;
  background-color: white;
  border: 1px solid black;
  padding: 10px;
}
/* =================================*/

.tsa_bc_yellow {
    background-color: #ffd01c; /* tsa yellow */
}
.tsa_bc_yellow_light {
    background-color: #fbedba; /* lighter shade of tsa yellow */
}
.tsa_bc_yellow_lightlight {
    background-color: #fdf7e1; /* more lighter shade of tsa yellow */
}

.tsa_bc_darkdarkgrey {
    background-color: #303024; /* dark dark Panta Rhei grey 48 48 36 */
}
.tsa_bc_darkgrey {
    background-color: #808080; /* dark grey 128 128 128 */
}
.tsa_bc_mediumgrey {
    background-color: #a5a5a5; /* medium grey; 165 165 165 */
}
.tsa_bc_lightgrey {
    background-color:  #d8d8d8;  /* light grey 218 218 218 100%  /*  #e0e0e0; light grey 224 224 224 */
}
.tsa_bc_lightlightgrey {
    /*background: #f8f8f8; /*licht licht licht grijs 248 248 248 */
    /*background: #e8e8e880; /*licht licht grijs 232 232 232 50% */
    background-color: #f5f5f5; /* #f5f5f5 = 245 245 245  licht licht licht grijs; */
}
.tsa_bc_disabled {
    background-color: #e9ecef; /* background color of disabled form-control */
}
.tsa_bc_lightgreen {
    background-color: #d7f4de; /* licht groen; */
}
.tsa_bc_bluegreen {
    background-color: #64d6d6; /*blue-green*/
}
.tsa_bc_th_blue {
    background-color: #b6dcef;
}
.tsa_bc_th_red {
    background-color: #ffd9d9;
}
.tsa_bc_th_green {
    background-color: #e2ffd9;
}
.tsa_bc_medium_green {
    background-color: #6bc350; /* used in btn weekday*/
}

.tsa_bc_bluish {
    background-color: #6083cc; /*blueish*/
}
.tsa_bc_lighterreddish {
    background-color: #bd7f7f; /*lighter reddish*/
}
.tsa_bc_white {
    background-color: white;
}

.tsa_bc_transparent {
    background-color: transparent;
}

.tsa_color_darkgrey {
    color: #808080; /* Dark grey; 128 128 128 */
}
.tsa_color_mediumgrey {
    color: #a5a5a5 !important; /* medium grey; 165 165 165 */
}
.tsa_color_white {
    /* color: #f3f3f3; / offwhite */
    color: #fff !important; / white */

     /*font-weight: bold;*/
}
.tsa_color_mediumblue {
    /* color: #a5a5a5 !important;  medium grey; 165 165 165 */
    /*color: #2D4E77 !important;/* HeaderBackColor Default Schema Blauw donkerblauw */
    color: #015bff !important; /*HeaderForeColor Default Schema Blauw */
}


.tsa_color_placeholder_white::-webkit-input-placeholder {
    color: #fff; /* white */
 }

.tsa_bc_lightlightred {
    background: #ffe8e8cc; /* 255-232-232 80% licht lichtrood; */
}
.tsa_bc_lightred {
    background: #f1b5b580; /* #ffd0d0 255-208-208 50% licht rood; */

}
.tsa_bc_lightmediumred {
    background: #f1b5b5cc; /* 241-181-181 80% light medium rood; */
}
.tsa_bc_mediumred {
    background: #ffacac; /* 255-172-172  medium rood; */
}

.tsa_fontweight_bold {
    font-weight: bold;
}

/*==================================================*/
/* https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_popup */
/* Popup container - can be anything you want */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


/* The actual popup (appears on top) */
.popup .popuptext {
  /*visibility: hidden;*/
  display: none;
  position: absolute;

  width: 240px;

    font-size: 14px;
    font-family: "Lucida Sans", sans-serif;
    color: #fff; /* #ffd01c; */
    background: #646464; /* dark grey */
    text-shadow: 0px 1px 1px #000;

  text-align: center;
  border-radius: .25rem;
   /*padding: 6px 12px;*/
   padding: .25rem .5rem;

  z-index: 1;

}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #646464 transparent transparent transparent;

}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
  /* visibility: visible;*/
  display: inline-block;
  -webkit-animation: fadeIn .25s;
  animation: fadeIn .25s

}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}

.msgbox {
    position: absolute;
    background: #646464; /* dark grey */
    border-radius:4px;
    padding: 6px 12px;
    font-family: arial;
    font-size: 12px;
    text-shadow: 0px 1px 1px #000;
    color: #ffd01c; /* #ffc64a; */
      -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
  }
  .msgbox:before {
    content : " ";
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #646464; /* dark grey */
    position:absolute;
    bottom:-5px;
    left:5px;
      -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
  }
  /* ====== MOBILE NAVBAR ======================= */

.mobileheaderbar {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  list-style: none;

  display: block;
  padding: 2px 4px;
  margin: 0;

  text-decoration: none;
  list-style: none;
  color: #212529; /* color darkgrey as in btn */
  background-color: #ffd01c;
  border-bottom: 1px solid #f3f3f3; /* offwhite */

}

.mobiledatecontaner {
    display: -ms-flexbox;
    display: flex;
        -ms-flex-wrap: wrap;

    flex-direction: row; /* flex-direction: row | row-reverse | column | column-reverse; */
    flex-wrap: wrap; /* flex-wrap: nowrap | wrap | wrap-reverse;  */
    /*  flex-flow: is a shorthand flex-direction and flex-wrap <‘flex-direction’> || <‘flex-wrap’>  */
    justify-content: space-between; /*center space-between; space-around PR2019-01-05 */
    /*  align-items defines how flex items are laid out along the cross axis on the current line. */
        align-items: center;   /*   align-items: stretch | flex-start | flex-end | center |  */
    /*  align-content aligns a flex container's lines within when there is extra space in the cross-axis,   */
    align-content: flex-start;  /* flex-start | flex-end | center | space-between | space-around | stretch; */

    position:relative;

    padding: 0;
    width: 100%;

    overflow: hidden;
    text-decoration: none;
    list-style: none;

    /* background-color:  #d8d8d8;  /* light grey 218 218 218 100%  /*  #e0e0e0; light grey 224 224 224 */
    /*background: #f8f8f8; /*licht licht licht grijs 248 248 248 */
    /*background: #e8e8e880; /*licht licht grijs 232 232 232 50% */
    /*background-color: #f5f5f5; /* #f5f5f5 = 245 245 245  licht licht licht grijs;*/

}

.mobile_margin_top_33 {
    margin-top: 33px;
    margin-left: auto;
  margin-right: auto;
    max-width: 860px;
}

.mobileshiftcontaner {
    display: -ms-flexbox;
    display: flex;
        -ms-flex-wrap: wrap;

    flex-direction: row; /* flex-direction: row | row-reverse | column | column-reverse; */
    flex-wrap: wrap; /* flex-wrap: nowrap | wrap | wrap-reverse;  */
    /*  flex-flow: is a shorthand flex-direction and flex-wrap <‘flex-direction’> || <‘flex-wrap’>  */
    justify-content: space-between; /*center space-between; space-around PR2019-01-05 */
    /*  align-items defines how flex items are laid out along the cross axis on the current line. */
        align-items: center;   /*   align-items: stretch | flex-start | flex-end | center |  */
    /*  align-content aligns a flex container's lines within when there is extra space in the cross-axis,   */
    align-content: flex-start;  /* flex-start | flex-end | center | space-between | space-around | stretch; */

    position:relative;

    padding: 4px;

    margin: 4px 2px 2px 2px;  /* top right bottom left*/
    width: 99%;

    overflow: hidden;
    text-decoration: none;
    list-style: none;

    /* background-color:  #d8d8d8;  /* light grey 218 218 218 100%  /*  #e0e0e0; light grey 224 224 224 */
    /*background: #f8f8f8; /*licht licht licht grijs 248 248 248 */
    /*background: #e8e8e880; /*licht licht grijs 232 232 232 50% */
    /*background-color: #f5f5f5; /* #f5f5f5 = 245 245 245  licht licht licht grijs; */

}

.mobile_border {
    border-top: 2px solid #a5a5a5; /* medium grey; 165 165 165 */
}
  /* ============================= */


.tsa_container {
 display: flex;
 /*text-align: center;*/
 vertical-align: middle;
/* width: 200px;*/
}

.awp_navbar {
  background-color: #2d4e77; /* HeaderBackColor Default Schema Blauw donkerblauw */
  /*color: #ffffff /* #ffffff is white;#edf2f8; is light light blue /*95% #233d5c */
  background-image: none;
  background-repeat: no-repeat;
  text-decoration: none;
  list-style: none;

  padding: 2px 8px;  /* top, right, bottom, left: */
  border-bottom: 1px #f3f3f3; /* offwhite */
 }

.awp_navbar_item, .awp_navbaritem_may_select { /* PR20202-09-29 */
    /*background:  #2d4e77; /* HeaderBackColor Default Schema Blauw donkerblauw */
    /*color: #ffffff; /* #ffffff is white; #edf2f8; is light light blue*/
   /* font-size: 1.1rem;*/
   /* font-size: 18px;*/
    text-decoration: none;
    padding: 0px 32px 0px 8px;  /* top, right, bottom, left: */
    /*margin: 4px 4px 4px 8px;*/
    margin: 0px 4px 0px 8px;

/* PR2020-11-09 prevents selecting text. From https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting */
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */

}

.awp_navbaritem_may_select:hover {
  color: #a8c1e0;
  text-decoration: none;
  list-style: none;
  cursor: pointer;
 }


.navbar-item-default {
  background-color: transparent; /* #233d5c; /* #2d4e77; */
  color: #edf2f8; /*95% #233d5c */
  font-size: 1.25rem;
  line-height: inherit;
  background-image: none;
  background-repeat: no-repeat;
  text-decoration: none;
  list-style: none;
  white-space: nowrap;
 }