:root {
/* colors */

  --default_background_color: #EDEDED;
  --default_selected_bg_color:  #08C;
  --default_hover_bg_color:  var(--default_background_color);
  --default_hover_color:  #666;
  --default_selected_color:  white;
  --default_input_border_color: #CCCCCC;
  --defaultPlaceholderColor: #999;
  --defaultInputTextColor: #777;
  --default_menu_background_color: #2A3F54;

  --editor_modal_background_darker_gray:  #EDEDED;
  --select2_text_color: #555555;
  
  --badge_success_bg_color: #1ABB9C;
  --badge_success_text_color: white;
  --badge_error_bg_color: #FF6347;
  --badge_error_text_color: white;
  --badge_warning_bg_color: #F39C12;
  --badge_warning_text_color: white;
  --badge_primary_bg_color: #3498DB;
  --badge_primary_text_color: white;
  --badge_info_bg_color: #3498db;
  --badge_info_text_color: white;
  --tile_shadow_color: #696969; 

  --warning_block_text_color: white;
  --warning_block_text_bg_color: #F39C12;
  --warning_block_border_color: red;

  --tooltip_text_color: #222222;
  --tooltip_label_color: #222222;
  --tooltip_border_color: #555;
  --tooltip_shadow_color: #696969;
  --tooltip_bg_color: white;
  --tooltip_opacity: 1;

  --btn_primary_color: #007BFF;
  --btn_success_color: #26B99A;
  --btn_warning_color: #FFC107;
  --btn_danger_color: #d9534f;
  --btn_info_color: #17A2B8;
  --btn_dark_color: #4B5F71;
  --btn_dark_sel_color: #223242;

  --btn_bar_vert_primary_color: var(--default_hover_color);
  --btn_bar_vert_primary_bg_color:  default;
  --btn_bar_vert_primary_hover_color:  #222;
  --btn_bar_vert_primary_hover_bg_color:  default;
  --btn_bar_vert_primary_selected_color:  var(--default_selected_bg_color);
  --btn_bar_vert_sub_primary_selected_color:  var(--badge_success_bg_color);
  --btn_bar_vert_sub2_primary_selected_color:  orange;
  --btn_bar_vert_primary_selected_bg_color:  default;
  --btn_bar_vert_border_color: #CCCCCC;

  --tile_stats_count_hover_bg_color:    var(--default_hover_bg_color);
  --tile_stats_count_hover_color:       var(--default_hover_color);
  --tile_stats_count_selected_bg_color: var(--default_selected_bg_color);
  --tile_stats_count_selected_color:    var(--default_selected_color);

  --customFilterIconColor: #17A2B8;
  --customFilterIconColorSelected: #d9534f;

  --title_trailing_color: #73879C;
  --title_leading_color:  #007BFF;

  --default_red:                        RGB(217,83,79);
  --default_orange:                     #F48127;

  --Status_text_color:                  white;
  --Status_Nieuw_bg_color:              darkblue;
  --Status_Gewijzigd_bg_color:          blue;
  --Status_Verstuurd_bg_color:          var(--default_orange);
  --Status_Afgewezen_bg_color:          var(--default_red);
  --Status_Geannuleerd_bg_color:        var(--default_red);
  --Status_Geaccepteerd_bg_color:       green;
  --Status_Afgerond_bg_color:           green;
  --Status_Te_ontvangen_bg_color:       #F0BD00;
  --Status_Error_bg_color:              var(--default_red);
  --Status_Info_bg_color:               darkblue;
  --Status_OK_bg_color:                 green;

  --Status_NoContract_color:            var(--default_red);
  --Status_DiffGroup:                   orange;
  --Status_HeeftVerzuim:                var(--default_orange);
  --Status_HeeftVerlof:                 green;

  --Status_Openstaand_bg_color:         RGB(240,173,78);
  --Status_Controleren_bg_color:        var(--default_red);
  --Status_Verzuim_bg_color:            var(--default_orange);
  --Status_Akkoord_bg_color:            RGB(38,185,154);
  --Status_Berekend_Akkoord_bg_color:   RGB(38,185,154);
  --Status_Niet_akkoord_bg_color:       var(--default_red);
  --Status_In_afwachting_bg_color:      RGB(240,173,78);
  --Status_Herberekenen_bg_color:       RGB(10,10,128);
  
  --Currency_negative:                  var(--default_red);
  --Currency_positive:                  green;

  --Documenten_Status_text_color:           white;
  --Documenten_Status_nieuw_bg_color:       var(--default_orange);
  --Documenten_Status_ingevuld_bg_color:    blue;
  --Documenten_Status_goedgekeurd_bg_color: green;
  --Documenten_Status_afgewezen_bg_color:   var(--default_red);

  --CheckBoxTop_border_color:           lightgray;

  --table_group_title_color:  #2222BB;
  --Documenten_error_bg_color: #FF3327 ;
  --Documenten_approved_bg_color: #33FF27 ;
  --tile_stats_alert_bg_color: #FF3327;
  --tile_stats_alert_color: white;
  --tile_stats_alert_hover_color: #FFC107;

  --processing_bg_color: #ddd;
  --processing_color: #73879c;

  --size_table_icon:  16px;
  --size_table_icon_font: 18px;
  --height_top_bar: 59px;
  --content_top: 52px;
}

iframe {
  padding:  2px;
}

canvas {
  touch-action: none;
}

.btn-app-xl {
  width: 120px;
}

.btn.btn-app {
  height: 50px;
  padding-top: 8px;
}

.alert {
  -webkit-box-shadow: 6px 6px 10px 0px var(--tile_shadow_color) !important;
  -moz-box-shadow: 6px 6px 10px 0px var(--tile_shadow_color) !important;
  box-shadow: 6px 6px 10px 0px var(--tile_shadow_color) !important;
}

a.btn-app-dashboard {
  width: 120px;
  height: 80px !important;
  border-radius: 6px !important  ;

  padding-top: 16px !important;
  margin-bottom: 2px;
  margin-right: 0px;
  -webkit-box-shadow: 3px 3px 7px 0px var(--tile_shadow_color) !important;
  -moz-box-shadow: 3px 3px 7px 0px var(--tile_shadow_color) !important;
  box-shadow: 3px 3px 7px 0px var(--tile_shadow_color) !important;
}

a.btn-app-dashboard:active {
  margin-top: -2px;
  margin-left: 12px;
  margin-bottom: 0px;
  margin-right: -2px;
  -webkit-box-shadow: 2px 2px 5px 0px var(--tile_shadow_color) !important;
  -moz-box-shadow: 2px 2px 5px 0px var(--tile_shadow_color) !important;
  box-shadow: 2px 2px 5px 0px var(--tile_shadow_color) !important;
}

a.btn-app-dashboard i {
  font-size: 28px !important;
  padding-bottom: 6px;
}

a.btn-app-dashboard i.red {
  color:#FF595E;
}

a.btn-app-dashboard i.blue {
  color:#1982C4;
}

a.btn-app-dashboard i.green {
  color:#8AC926;
}

a.btn-app-dashboard i.yellow {
  color:#FFCA3A;
}

a.btn-app-dashboard i.purple {
  color:#6A4C93;
}

div.Dashboard_title >h2 {
  display: flex;
  flex-direction: row;
  font-size: 22px;
  font-weight: bold;
}

div.Dashboard_title >h2:before, div.Dashboard_title >h2:after{
  content: "";
  flex: 1 1;
  border-bottom: 1px solid;
  margin: auto;
}

div.Dashboard_title >h2:before {
  margin-right: 10px;
  max-width: 150px;
}

div.Dashboard_title >h2:after {
  margin-left: 10px;
}

.count_wrap_center {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    word-break: break-word;
    white-space: pre-wrap;
    -moz-white-space: pre-wrap; 
}

.count_sm_i {
    font-size: 12px;
    font-weight: bold;
    font-style: italic;
}

.count_md_i {
    font-size: 14px;
    font-weight: bold;
    font-style: italic;
}

.tile_stats_count_fancy {
  border-radius: 3px !important  ;
  border: none !important;
  padding-top: 16px !important;
  margin-bottom: 2px;
  margin-right: 0px;
  -webkit-box-shadow: 1px 1px 3px 0px var(--tile_shadow_color) !important;
  -moz-box-shadow: 1px 1px 3px 0px var(--tile_shadow_color) !important;
  box-shadow: 1px 1px 3px 0px var(--tile_shadow_color) !important;
}

.tile_stats_count_fancy:active {
  margin-top: -2px;
  margin-left: 12px;
  margin-bottom: 0px;
  margin-right: -2px;
  -webkit-box-shadow: 1px 1px 3px 0px var(--tile_shadow_color) !important;
  -moz-box-shadow: 1px 1px 3px 0px var(--tile_shadow_color) !important;
  box-shadow: 1px 1px 3px 0px var(--tile_shadow_color) !important;
}

.tile_stats_count_fancy:hover:not(.tile_stats_count_fancy_selected) {
  background-color:  var(--tile_stats_count_hover_bg_color) !important;
  color:  var(--tile_stats_count_hover_color) !important;
}


.tile_stats_count_fancy_selected {
  background-color:  var(--tile_stats_count_selected_bg_color) !important;
  color:  var(--tile_stats_count_selected_color) !important;
}

.tile_stats_alert {
  background-color: var(--tile_stats_alert_bg_color) !important;
  color: var(--tile_stats_alert_color) !important;
}

.tile_stats_alert:hover { 
  background-color:  var(--tile_stats_alert_hover_color) !important;
}

/* Align text in badges */
.tile_stats_count {
  padding-top: 12px !important;
}

.disabledbutton {
  pointer-events: none;
  opacity: 0.4;
}

/* Overrule button colors */
.btn-primary {
  background-color: var(--btn_primary_color);
  border-color: var(--btn_primary_color);
}

.btn-warning {
  background-color: var(--btn_warning_color);
  border-color: var(--btn_warning_color);
}

.btn-info {
  background-color: var(--btn_info_color);
  border-color: var(--btn_info_color);
}
.btn-dark {
  background-color: var(--btn_dark_color);
  border-color: var(--btn_dark_color);
}

.btn-dark:hover {
  background-color: var(--btn_dark_sel_color);
}
.btn-primary:hover,
.btn-info:hover,
.btn-warning:hover,
.btn-dark:hover{
  transition: 0.1s;
}

.btn-primary,
.btn-info,
.btn-warning,
.btn-dark{
  transition: 0.8s;
}
  

.Field_label_info {
  font-size: 11px;
  font-style: italic;
  font-weight: 200;
}

.nav-sm .menu_section h3 {
  display: block !important;
  font-size: 12px;
  margin: 3px;
}

.vertical-center {
  min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
  min-height: 100vh; /* These two lines are counted as one :-)       */

  display: flex;
  align-items: center;
}


.btn-xxlarge {
  font-size: 24px;
  padding: 0px;
  height: 150px;
  width:150px;
}

.btn-xlarge {
    padding: 20px;
}


.btn-xsmall {
  font-size: 13px;
  padding: 0;
  height: 25px;
  width:70px;
}

.btn-tiny {
  font-size: 11px;
  padding: 0;
  margin: 0px;
  height: 17px;
  width:12px;
}

.col-centered{
    float: none;
    margin: 0 auto;
}

.btn-table {
  padding-left:  10px;
  padding-right: 10px;
  border-radius: 3px;
  text-align: center;
}

.divider {
  height: 1px;
  width:100%;
  display:block; /* for use on default inline elements like span */
  margin: 9px 0;
  overflow: hidden;
  background-color: black;
}

.form-horizontal .control-label{
  text-align: left !important; /* !important added for priority in SO snippet. */
}

.align_left {
  text-align: left !important; /* !important added for priority in SO snippet. */
}

#wrap {
  display: block;
  margin: 0 auto;
  width: 200px;
}

.m-r-s { margin-right: 0.5em; }

.zoom {      
-webkit-transition: all 0.35s ease-in-out;    
-moz-transition: all 0.35s ease-in-out;    
transition: all 0.35s ease-in-out;     
cursor: -webkit-zoom-in;      
cursor: -moz-zoom-in;      
cursor: zoom-in;  
}

.zoom:hover,  
.zoom:active,   
.zoom:focus {
/**adjust scale to desired size, 
add browser prefixes**/
-ms-transform: scale(10);    
-moz-transform: scale(10);  
-webkit-transform: scale(10);  
-o-transform: scale(10);  
transform: scale(10);    
position:relative;      
z-index:100;  
}

.vert-line:after {
  content: '';
  width: 0;
  height: 100%;
  position: absolute;
  border: 0.5px solid black;
  top: 0;
  left: 100%;
}

.arrow {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  top: 50%;
  border-style: solid;
  border-width: 7px 0 7px 20px;
  border-color: transparent transparent transparent black;
  left: -10px;
  transform: translateY(-50%);
}

.fullscreen-background {
   background: url('/images/login-background.jpg') no-repeat center center fixed; 
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}

.app-button-badge-success {
  background: var(--badge_success_bg_color) !important;
  border: 1px solid var(--badge_success_bg_color) !important;
  color: var(--badge_success_text_color) !important;
}

.app-button-badge-error {
  background: var(--badge_error_bg_color) !important;
  border: 1px solid var(--badge_error_bg_color) !important;
  color: var(--badge_error_text_color) !important;
}

.app-button-badge-warning {
  background: var(--badge_warning_bg_color) !important;
  border: 1px solid var(--badge_warning_bg_color) !important;
  color: var(--badge_warning_text_color) !important;
}

.app-button-badge-primary {
  background: var(--badge_primary_bg_color) !important;
  border: 1px solid var(--badge_primary_bg_color) !important;
  color: var(--badge_primary_text_color) !important;
}

.app-button-badge-info {
  background: var(--badge_info_bg_color) !important;
  border: 1px solid var(--badge_info_bg_color) !important;
  color: var(--badge_info_text_color) !important;
}

#imgExpandModal .modal-content {
  border-radius: 50% !important;
  height: 200px;
  width:  200px;
}

.textbox-low-height {
  height:20px;
  width: 100px !important;
}


.phonelink:before {
  content: url("/images/phonelink.png") " ";
}

.whatsapplink:before {
  content: url("/images/wattsapplink.png");
}

/*************************************************************
 Tooltip
*************************************************************/
.tooltip-main {
  font-weight: 700;
  background: var(--tooltip_bg_color);
  border: 1px solid var(--tooltip_border_color);
  color: var(--tooltip_border_color);
  float: right;
  text-align: left !important;
}

.tooltip-qm {
  float: left;
  margin: -2px 0px 3px 4px;
  font-size: 12px;
}

.tooltip-inner {
  max-width: 500px !important;
  min-width: 50px !important;
  font-size: 12px;
  line-height: 150%;
  padding: 5px 10px 5px 10px;
  background: var(--tooltip_bg_color);
  color: var(--tooltip_text_color);
  border: 1px solid var(--tooltip_border_color);
  border-radius: 7px;
  text-align: left;

  -webkit-box-shadow: 6px 6px 10px 0px var(--tooltip_shadow_color) !important;
  -moz-box-shadow: 6px 6px 10px 0px var(--tooltip_shadow_color) !important;
  box-shadow: 6px 6px 10px 0px var(--tooltip_shadow_color) !important;

}

.tooltip.show {
  opacity: var(--tooltip_opacity);
}

.tooltip-inner .datatables_label {
    min-width: 200px;
    font-weight: bold;
    color: var(--tooltip_label_color);
    line-height: 170%;
}

.tooltip-inner .datatables_content {
    min-width: 200px;
    line-height: 170%;
}

.tooltip-inner .datatables_header {
    font-size: 20px;
    font-weight: bold;
    line-height: 200%;
}

.tooltip-inner hr {
    border-top: 1px solid  var(--tooltip_label_color);
    margin: 0;
    padding: 0;
}


/* Formatting of status fields in the table, 
   StatusField is general formatting, others are called by name (content of status) */
.StatusField {
    color:  var(--Status_text_color);
    padding-left:  10px;
    padding-right: 10px;
    border-radius: 25px;
    text-align: center;
}

.TextAsStatus {
    border-radius: 8px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top:  0px;
    padding-bottom: 0px;
    height: 16px;
    display: inline-block;
}
.TextAsWarning {
    background-color:  var(--Status_Openstaand_bg_color);
    color:  var(--Status_text_color);
}
.TextAsSuccess {
    background-color:  var(--Status_Akkoord_bg_color);
    color:  var(--Status_text_color);
}

.Status_Nieuw          { background-color:  var(--Status_Nieuw_bg_color);          }
.Status_Gewijzigd      { background-color:  var(--Status_Gewijzigd_bg_color);      }
.Status_Verstuurd      { background-color:  var(--Status_Verstuurd_bg_color);      }
.Status_Afgewezen      { background-color:  var(--Status_Afgewezen_bg_color);      }
.Status_Verloren       { background-color:  var(--Status_Afgewezen_bg_color);      }
.Status_Geannuleerd    { background-color:  var(--Status_Geannuleerd_bg_color);    }
.Status_Geaccepteerd   { background-color:  var(--Status_Geaccepteerd_bg_color);   }
.Status_Gewonnen       { background-color:  var(--Status_Geaccepteerd_bg_color);   }
.Status_Afgerond       { background-color:  var(--Status_Afgerond_bg_color);       }
.Status_Te_ontvangen   { background-color:  var(--Status_Te_ontvangen_bg_color);   }
.Status_Openstaand     { background-color:  var(--Status_Openstaand_bg_color);     }
.Status_Herberekenen   { background-color:  var(--Status_Herberekenen_bg_color);   }
.Status_Verzuim        { background-color:  var(--Status_Verzuim_bg_color);        }
.Status_Controleren    { background-color:  var(--Status_Controleren_bg_color);    }
.Status_Akkoord        { background-color:  var(--Status_Akkoord_bg_color);        }
.Status_Gesloten       { color: unset;                                             }
.Status_Berekend_Akkoord{ background-color:  var(--Status_Akkoord_bg_color);       }
.Status_Niet_akkoord   { background-color:  var(--Status_Niet_akkoord_bg_color);   }
.Status_In_afwachting  { background-color:  var(--Status_In_afwachting_bg_color);  }
.Status_Error          { background-color:  var(--Status_Error_bg_color);          }
.Status_OK             { background-color:  var(--Status_OK_bg_color);             }

.Status_NoContract { 
  color: var(--Status_NoContract_color);
}

table.dataTable tbody>tr.selected .Status_NoContract {
  color: var(--Status_NoContract_color);
}

.Status_DiffGroup {
  color: var(--Status_DiffGroup);
}

.Status_HeeftVerzuim {
  color: var(--Status_HeeftVerzuim);
  font-weight: bold;
}

.Status_HeeftVerlof {
  color: var(--Status_HeeftVerlof);
  font-weight: bold;
}

table.dataTable tbody>tr.selected .Status_DiffGroup {
  color: var(--Status_DiffGroup);
}

.Status_HasContract { 
}

table.dataTable tbody>tr.selected .Status_HasContract {
  color: inherit;
}

table.dataTable tbody>tr:hover .Status_HasContract{
  color: inherit;
}


.CurrencyField:before      { content: "€ "; }       /* Only used for table fields, for edit fields the input-icon classes (below) are used) */
.CurrencyField             { }
.Currency_negative         { color:  var(--Currency_negative); }
.Currency_positive         { color:  var(--Currency_positive); }

.Documenten_StatusField        { }
.Documenten_Status_nieuw       { background-color:  var(--Documenten_Status_nieuw_bg_color);       color: var(--Documenten_Status_text_color); }
.Documenten_Status_ingevuld    { background-color:  var(--Documenten_Status_ingevuld_bg_color);    color: var(--Documenten_Status_text_color); }
.Documenten_Status_goedgekeurd { background-color:  var(--Documenten_Status_goedgekeurd_bg_color); color: var(--Documenten_Status_text_color); }
.Documenten_Status_afgewezen   { background-color:  var(--Documenten_Status_afgewezen_bg_color);   color: var(--Documenten_Status_text_color); }


#loginSubmit:disabled !important {
  cursor: not-allowed;
}

#loginSubmit:not(disabled) !important {
  cursor: auto;
}

.loginErrorMessage { 
  background-color:  var(--Status_Error_bg_color); 
  color:white;
  border-radius: 5px;
  padding: 3px 0 3px 0;
  margin-bottom: 10px;
}

.loginInfoMessage { 
  background-color:  var(--Status_Info_bg_color); 
  color:white;
  border-radius: 5px;
  padding: 3px 0 3px 0;
  margin-bottom: 10px;
}

.loginScreenTextLink {
  margin-top: 20px;
  margin-bottom: -20px;
}

.input-icon {
  position: relative;
}

.input-icon > i {
  position: absolute;
  display: block;
  transform: translate(0, -50%);
  top: 50%;
  pointer-events: none;
  width: 25px;
  text-align: center;
  font-style: normal;
}

.input-icon > input {
  padding-left: 25px;
  padding-right: 0;
}

div.DTE_Body .input-icon > i {
  font-size: 14px;
}

.input-icon-right > i {
  right: 0;
}

.input-icon-right > input {
  padding-left: 0;
  padding-right: 25px;
  text-align: right;
}

.CheckboxTop {
  border-top:  1px solid var(--CheckBoxTop_border_color);
  border-bottom:  1px solid var(--CheckBoxTop_border_color);
  padding: 9px;
}

.Indent10px  { margin-left: 10px;  }
.Indent25px  { margin-left: 25px;  }
.Indent50px  { margin-left: 50px;  }
.Indent100px { margin-left: 100px; }
.Indent200px { margin-left: 200px; }

.PaddingLeft10px  { padding-left: 10px;  }
.PaddingLeft25px  { padding-left: 25px;  }
.PaddingLeft50px  { padding-left: 50px;  }
.PaddingLeft100px { padding-left: 100px; }
.PaddingLeft200px { padding-left: 200px; }

.PaddingRight5px   { padding-right: 5px;  }
.PaddingRight10px  { padding-right: 10px;  }
.PaddingRight25px  { padding-right: 25px;  }
.PaddingRight50px  { padding-right: 50px;  }
.PaddingRight100px { padding-right: 100px; }
.PaddingRight200px { padding-right: 200px; }

.Padding0 { padding: 0; }
.Padding10px { padding: 10px; }
.Margin0 { margin:0; }

.IndentTop10px  { margin-top: 10px;  }
.IndentTop25px  { margin-top: 25px;  }

.IndentBottom10px  { margin-bottom: 10px;  }
.IndentBottom25px  { margin-bottom: 25px;  }

.PaddingTop5px { padding-top: 5px; }
.PaddingTop10px { padding-top: 10px; }

.div40percent { width: 40%; }
.div60percent { width: 60%; }

.FullWidth {
  min-width: 100%;
}

.EditorModalBackgroundDarkerGray { background-color: var(--editor_modal_background_darker_gray); }

.nav_menu_item_header {
  padding-left: 10px;
  padding-right: 15px;
  padding-top: 5px;
  padding-bottom: 5px;
  font-weight: bold;
}

.nav_menu_block_header {
  border-top:1px solid lightgray;
}

.nav_menu_item_header_label {
  font-size: 14px;
}

.nav_menu_item_header_value {
  font-size: 10px;
  padding-top: 10px;
  color: gray;
}

.nav_menu_item_company_name {
  padding-left: 0px;
  padding-top: 5px;
}

.ui-dialog {
  z-index: 9999;
}

.progress-bar-hidden {
  display: none;
}

.ui-dialog-titlebar-close {
  background: url('/images/closeWindow.png') no-repeat;
}


.no_line_break_after_div {
  display: inline;
}

.top_indent_15px {
  margin-top:  15px;
}

.top_indent_0px {
  margin-top:  0px;
}

.left_indent_15px {
  margin-left:  15px;
}

.bottom_indent_15px {
  margin-bottom:  15px;
}

.bottom_indent_5px {
  margin-bottom:  5px;
}

.bottom_indent_0px {
  margin-bottom:  0px;
}

.min_height_330px {
  min-height: 330px !important;
}

.stepContainer {
  height:  100% !important;
  overflow: hidden;
}

.label-align {
  text-align: right;
}

input.parsley-success,
select.parsley-success,
textarea.parsley-success {
  color: #468847;
  background-color: #DFF0D8;
  border: 1px solid #D6E9C6;
}

div.parsley-success {
  color: #468847;
}

input.parsley-error,
select.parsley-error,
textarea.parsley-error {
  color: #B94A48;
  background-color: #F2DEDE;
  border: 1px solid #EED3D7;
}

div.parsley-error {
  color: #B94A48;
}

.parsley-errors-list {
  margin: 2px 0 3px;
  padding: 0;
  list-style-type: none;
  font-size: 0.9em;
  line-height: 0.9em;
  opacity: 0;
  color: #B94A48;

  transition: all .3s ease-in;
  -o-transition: all .3s ease-in;
  -moz-transition: all .3s ease-in;
  -webkit-transition: all .3s ease-in;
}

.parsley-errors-list.filled {
  opacity: 1;
}

.sig-canvas {
  border: 2px dotted #CCCCCC;
  border-radius: 15px;
  cursor: crosshair;
  width: 620px;
  aspect-ratio: 620/180;
  max-width: 100%;
}

.documentIsSignedField {
  margin: 20px;
  font-size: 20px;
  font-style: italic;
  color: green;
}

.documentNeedsSignature {
  color:  var(--badge_warning_bg_color);
}

.min-width-210 {
  min-width: 210px;
}

.bold {
  font-weight: bold;
}

.text_size_14px {
  font-size: 14px;
}

.table_group_title {
  color:  var(--table_group_title_color);
  font-size: 18px;
  font-weight: bold;
}

#DataTable_documenten_documenten_wrapper {
  font-size: 14px;
}

#DataTable_documenten_documenten_wrapper th {
  font-weight: bold;
}

#DataTable_documenten_documenten_wrapper td {
  vertical-align: baseline;
}

#DataTable_documenten_documenten_wrapper button {
  font-size: 14px;
}

.documenten_video-responsive{
  overflow:hidden;
  padding-bottom:56.25%;
  position:relative;
  height:0;
  box-shadow: 4px 5px 15px -3px #000000;
}

.documenten_video-responsive iframe{
  left:0;
  top:0;
  height:100%;
  width:100%;
  position:absolute;
}

.documenten_link {
  font-size: 18px;  
}

.explanation_text {
  display: inline-block;
  font-size: min(3vw, 44px);
  font-weight: bold;
  width: 1000px;
  max-width: 100%;  
  overflow-wrap:break-word;

}

.comment_text_small {
  font-size: 10px;
  font-weight: normal;
}

.center {
  text-align: center;
}

.left
 {
  text-align: left;
  float: left;
}

input#Documenten_checkbox {
  width: 20px;
  height: 20px;
}

input#Documenten_checkbox:focus{
  box-shadow:none;
}

.DisplayDocumentenDataFormTable {
}

.DisplayDocumentenDataFormTitle {
  font-size: 16px;
  font-weight: bold;
  padding-top:  30px;
  padding-bottom: 10px;
  color:  var(--table_group_title_color);
}

.align_top {
    vertical-align: top;
}

.DisplayDocumentenDataRowDescription {
  padding-left: 40px;
  padding-bottom: 6px;

  font-size: 14px;
  font-weight: bold;
}

.DisplayDocumentenDataRowContent {
  padding-bottom: 6px;
  padding-left: 20px;

  font-size: 14px;
}

.DisplayDocumentenDataError {
  font-weight: bold;
  color: red;
}

.DisplayDocumentenDataOK {
  font-weight: bold;
  color: green;
}

.divs_at_same_line {
  display: inline-block;
}

.pull-right {
  text-align: right;
}

.pull-bottom {
  display: block;
  margin-top: 5px;
}


.indent-15percent {
  padding-left: 15%;
}

.Change_Status_Button {
  min-width: 100%;
  margin-top: 10px;
}

.Change_LockStatus_Button {
  min-width: calc(100% - 10px);
  margin-bottom: 5px !important;
  margin-left: 5px !important;
}

.container_table_div {
  display: none;
}


.documenten_setup_defs_table_div,
.documenten_setup_steps_defs_table_div,
.documenten_setup_steps_table_div,
.verkoop_sorteringen_table_div {
  display: none;
}

.container_loading {
  display: inline;
  margin-top: 200px;
  margin-bottom: 200px;
  margin-left: 50px;
  font-size: 20px;
  font-weight: bold;
  color: gray;
  text-align: center;
}

.FileUploaderWrapper {
    display: flex;
    flex-flow: column;
    height: 100%;
    width: 100%;
}

.FileUploader_dropzone {
    flex: 0 1 auto;
}

.SharepointBrowserWrapper {
    display: flex;
    flex-flow: column;
    height: 100%;
    width: 100%;
}

.SharepointBrowser {
    flex: 1 1 auto;
    visibility: hidden;
    margin: 10px;
    border: solid;
    background-color: #ffffbf;
    display: flex;
    flex-flow: column;
    overflow: auto;
}

.SharepointBrowserOtherContent {
    flex: 0 1 auto;
}

.SharepointBrowser_Address {
    flex: 0 1 auto;
    border-style:  solid;
    border-width: 0 0 1px 0;
    height: 30px;
    width: 100%;
    margin-bottom: 10px;
    padding: 5px;
    font-size: 16px;
}

.SharepointBrowser a {
    pointer-events: auto;
    cursor: pointer;
}

.SharepointBrowser_Root {
    font-weight: bold;
    margin-left: 10px;
}

.SharepointBrowser_Content {
    flex: 1 1 auto;
    padding: 5px;
    white-space: nowrap;
    width: 100%;
    height: 100%;
}

.SharepointBrowser_Filter {
    flex: 0 1 auto;
    border-style:  solid;
    border-width: 1px 0 0 0;
    height: 30px;
    width: 100%;
    margin-top: 10px;
    padding: 5px;
    font-size: 16px;
}

.SharepointBrowser_Content table tbody { 
    padding-left: 10px;
}

.SharepointBrowser_Content table thead { 
    font-weight: bold;
}

.Sharepoint_Table_AddressBar {
  height: 30px;
  min-width: 100px;
  margin: 10px;
}

.Sharepoint_Table_AddressBar:before {
  content: 'Folder: root:// ';
  color: #222222;
  padding-left: 10px;
}

.SharepointBrowser_AddressElement:hover,
.SharepointBrowser_Content table tbody td:hover { 
    background-color: #bfffbf;
}

.documenten_setup_information_div {
  display: inline-block;
  width: 100%;
  height: 100%;
  min-height: 300px;
  background-color: white;
  border: 1px solid #E8E8E8;
  padding: 0;
  margin: 0;
}

.documenten_setup_information_div h1 {
  margin-top: 10px;
  margin-left: 10px;
}

.documenten_setup_information_div p {
  font-size: 16px;
  margin-left: 20px;
  margin-top: 0;
}

.btn_huge {
  display: inline-block;
  width: 440px;
  max-width: 80%;
  aspect-ratio: 2;
  background-color: var(--badge_primary_bg_color);
  color: var(--badge_primary_text_color);
  text-align: center;
  padding-top: 10px;
  border-radius: 75px;
  margin: auto;
  font-size: min(10vw, 50px);
  font-weight: bold;
  margin: min(5%, 50px);
  box-shadow: 4px 6px 8px lightblue;

  pointer-events: auto;
  cursor: pointer;
}

.btn_huge:hover,
.btn_huge.green:hover {
    background-color: var(--badge_warning_bg_color);
    box-shadow: 2px 3px 4px lightblue;
    transition: 0.5s;
}

.btn_huge.green {
    background-color: green;
}

.input-icon {
  position: relative;
}

.input-icon > i {
  position: absolute;
  display: block;
  transform: translate(0, -50%);
  top: 50%;
  pointer-events: none;
  width: 25px;
  text-align: center;
  font-style: normal;
}

.input-icon > input {
  padding-left: 25px;
  padding-right: 0;
}

.input-icon-right > i {
  right: 0;
}

.input-icon-right > input {
  padding-left: 0;
  padding-right: 25px;
  text-align: right;
}

.bedrijvenAdditionalSetupArea {
  display: block;
}

.personalisation_windows {
  width: 100%;
  min-width: 100%;
  min-height:  200px;
}

.personalisation_textarea {
  min-height: 250px;
  height: 250px;
  width: 100%;
  min-width: 100%;
}

.personalisation_image_wrapper {
  width: 500px;
  height: 250px;
  margin-top: 24px;
  text-align: center;
  background: white;
  border: 1px solid #777777;
}

.personalisation_logo {
    height: 100%;
}

.personalisation_message {
  height: 40px;
  width: 100%;
  min-width: 100%;
  margin-top: 24px;
  font-size: 16px;
  font-weight: bold;
  visibility: hidden;
}

.personalisation_btn{
  margin-top: 20px;
  margin-left: 10%;
}

.personalisation_enable {
  visibility: hidden;
}

/* datatables progress indicator, enabled by processing: true in Odatatables */
.dataTables_processing {
  z-index: 99999;
  background: rgba(255, 255, 255, 0);
  border: none;
  box-shadow: none;
}


#MedewerkerIsActiefButton_wrapper {
  display: block;
  text-align: right;
  width: 100%;
  padding-right: 5px;  
  margin:  0;
}

/* disable linebreak in datatabels */
th, td { white-space: nowrap; overflow: hidden; }

.td_image {
  display: inline-block;
  position: relative;
  overflow: hidden;
  top: 1px;
  height: var(--size_table_icon);
  width:  var(--size_table_icon);
  margin: 0 auto !important;
  padding: 0 !important;
}

.TrueFalsePicture {
  display:inline-block;
  vertical-align: top;
  height: var(--size_table_icon);
  max-height: var(--size_table_icon);
  width: var(--size_table_icon);
  max-width: var(--size_table_icon);
}

.pdf-download {
  color: #CC0000;
  pointer-events: auto !important;
  cursor: pointer !important;
}

.success_icon,
table.dataTable tbody>tr.selected > .success_icon
{
  color: var(--btn_success_color) !important;
  font-size: 16px;
}

.info_icon,
table.dataTable tbody>tr.selected > .success_icon
{
  color: var(--btn_primary_color) !important;
  font-size: 16px;
}
tbody>tr.selected >td >div >a.info_icon {
  color: white  !important;
}

.danger_icon,
table.dataTable tbody>tr.selected > .danger_icon
{
  color: var(--btn_danger_color) !important;
  font-size: 16px;
}

.color-blue {
  color: blue;
}

#DTE_Field_description {
  height: 200px;
}

.required {
  color: blue;
  font-size: 16px;
}

.fontsize20 {
  font-size: 20px;
}


.btn-gender.active {
  /*color: lightsalmon;*/
  background-color: var(--btn_primary_color);
  color: white;
}

/*---------------------------------------------------------------------------------
   -- Cropper
   --   Limit image width to avoid overflow the container (for profile picture editor)  
*/
img {
  max-width: 100%; /* This rule is very important for the cropper */
}

.cropper-view-box,
.cropper-face {
  padding: 0;
  margin:  0;
}

.preview_circle {
  border-radius: 50%;
  padding: 0;
  margin:  0;
}

/*---------------------------------------------------------------------------------
  Edentify picture selector
*/
.EPS_wrapper {
  width: 100%;
  overflow: hidden;
}

.EPS_picture_area {
  height: 90%; /*640px;*/
  width: 100%;
  overflow: hidden;
}

.EPS_picture_outer_div {
  display: flex;
  justify-content: center;
  align-items: center;

  float: left;

  width: 33%;
  min-width: 33%;
  background-color: white;
}

.EPS_picture_outer_div_selected {
  background-color: var(--btn_primary_color);
}

.EPS_picture_inner_div {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 96%;
  min-width: 96%;
  margin-top: 5px;
  margin-bottom: 5px;
  background-color: dark-gray;
}

.EPS_index_text,
.EPS_progressBar_text  {
  text-align: center;
  padding-top: 20px;

  font-size: 22px;
  font-weight: bold;
  color: var(--btn_primary_color);
}

.EPS_index_text_warning {
  color:  red;
}
/*---------------------------------------------------------------------------------*/
.AutoReload {
}

.company_logo_bg img {
  background-color: var(--default_background_color);
  border-radius: 15px;
  padding:  5px;
}

.Title_trailing {
  font-size: 20px;
  color: var(--title_trailing_color) !important;
}

.Title_leading {
  font-size: 20px;
  color: var(--title_leading_color);
}

/*---------------------------------------------------------------------------------*/

table.navmenu_profile_table {
  border: none;
  padding: 0 !important;
  margin: 0 !important;
}


.nav_menu_text  {
  vertical-align: baseline;
  line-height: 8px;
  color: #AAAAAA;
}

.nav_menu_profile_picture {
  vertical-align: middle;
  margin:0 !important;
  padding: 0 !important;
}

@media screen and (min-width: 400px) { 
  .nav_menu_profile_picture {
    visibility: visible;
  }
}
@media screen and (max-width: 400px) { 
  .nav_menu_profile_picture {
    visibility: hidden;
  }
}

.nav_menu_profile_picture_img {
  margin:0 !important;
  padding: 0 !important;
}


/*---------------------------------------------------------------------------------
  Overruling and additions of datatables settings
---------------------------------------------------------------------------------*/

/* make the input full width at lower screen resolutions */
@media screen and (max-width: 1199px) { 
  div [data-dte-e="input"][class*="col-xs-"],
  div [data-dte-e="input"][class*="col-sm-"],
  div [data-dte-e="input"][class*="col-md-"],
  div [data-dte-e="input"][class*="col-lg-"],
  div [data-dte-e="input"][class*="col-xl-"],
  div [data-dte-e="input"][class*="col-xxl-"] {
    float: unset;
  }
}

/* add class dt-center to datatables */
th.dt-center, 
td.dt-center { 
  text-align: center; 
}

/* used to add padding to the text in the top nav menu (addition) */
.nav_menu_wrapper {
  white-space: nowrap;
}

/* used to add padding to the text in the top nav menu (addition) */
.nav_menu_wrapper_child {
  display: inline-block;
}

/* used to add padding to the text in the top nav menu (addition) */
.navbar-padding-top {
  padding-top: 0; 
}

/* content (tables) section */
body .container.body .right_col,
.main_container .top_nav {
    background: var(--default_background_color);
    position:  relative;
}

.background-color-as-menu {
  background-color: var(--default_menu_background_color);
  position: relative;
}

body .right_col,
body .right_col_Default {
  top: var(--content_top);
  z-index: 1 !important;
  background-color: var(--default_background_color);
  padding: 0 20px !important;
}
body .right_col_Alternative {
  top: 0px;
  z-index: 1 !important;
  background-color: var(--default_background_color);
}


/* top nav menu */
.nav_menu,
.navbar-right {
    background: var(--default_menu_background_color);
}

.navbar-right {
  padding-top: 5px;
}

ul.navbar-right {
  padding-left: 0;
}

ul.dropdown-menu {
  margin-top: 8px !important;
}

/* toolbox as on the dashboard section */
.panel_toolbox {
    background: white; 
}

/* top nav bar:  drop-down menu: titles*/
.nav.navbar-nav>li>a{
  color:  #AAAAAA !important;
}

/* top nav menu left: like expand/collapse menu icon */
.nav_menu a {
  color:  #AAAAAA; 
}


/* top nav bar:  drop-down menu:  hover and focus */
.top_nav .nav .open>a, 
.top_nav .nav .open>a:focus, 
.top_nav .nav .open>a:hover, 
.top_nav .nav>li>a:focus, 
.top_nav .nav>li>a:hover {
  background: #35495D;
}

/* top nav bar:  drop-down menu: sub items: hover */
.top_nav .nav>li>ul>li>a:hover 
{
  background: var(--default_hover_bg_color) !important;
  color: var(--default_hover_color) !important;
}


/* table rows: hover colors */
table.dataTable tbody>tr:hover {
  background: var(--default_hover_bg_color) !important;
  color: var(--default_hover_color) !important;
}

/* table rows: selected colors -> should be below the hover pseudo-class to overrule color when selected */
table.dataTable tbody>tr.selected, 
table.dataTable tbody>tr>.selected {
  background: var(--default_selected_bg_color) !important;
  color: var(--default_selected_color) !important;
}

/* hide the close button (x) in the title bar of the modals */
button.close {
  display: none;
}

/* Used for the drop-down 'extra opties' menu */
.btn-vertical {
  display:  block !important;
}

/* Used for the drop-down 'extra opties' menu */
.btn-vertical * {
  color: white !important;
}

/* Used for the drop-down 'extra opties' menu */
.btn-vertical a:hover {
  background-color: unset !important;
}

.AdditionalTableHeaderComment {
   text-align: right;
   padding-top: 6px;
}

/* make content (body) cover the full vertical screen range */
.nav-md .container.body .right_col {
    min-height:100vh !important; 
}

.main_menu_logo {
  padding: 10px 0 0 0;
  text-align: center;
  margin-bottom: -3px;
}

.main_menu_logo img {
  max-height: 35px;
  max-width: 35px;
}

.error_page_logo {
  margin-bottom: 20px;
}

.error_page_logo img {
  max-height: 90px;
  max-width: 90px;
}

.GroupAccessRightsHeightSelect {
  height: 300px;
  min-height: 300px;
}


select option:hover {
    box-shadow: 0 0 10px 100px var(--default_hover_bg_color) inset !important;
    color: var(--default_hover_color) !important;
}

select option:checked {
    box-shadow: 0 0 10px 100px var(--default_selected_bg_color) inset !important;
}

.select2-container--default .select2-selection--multiple, .select2-container--default .select2-selection--single {
  min-height: 34px;
  text-align: left;
  border-color: var(--default_input_border_color);
  border-radius: 4px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 22px;
  color: var(--select2_text_color);
  font-size: 14px;
  margin-left: 5px;
}

.select2-selection--single[aria-labelledby="select2-medewerkerSelection-container"]:not(:has(>span[title='-- Alle (actieve) medewerkers --']))
{
   background-color: #FFCA3A; /* rgb(255, 226, 212); */
}

.select2-selection.select2-selection--single:focus,
.form-control:focus {
  border: 1px solid var(--default_selected_bg_color);
}

.select2-results__group {
  color: blue;
  text-decoration: underline;
  font-weight: normal;
  font-style: italic;
}

.form-control {
  border-radius: 4px;
}

/* ============================================================================= */
/* New vertical button bar styling */

.nav_menu {
  margin:0;
  padding: 0;
  border: none;
}

.general_selection_button {
  margin-left: 20px;
}

.general_selection_buttons_div {
  margin: 0px 0px 10px -20px;
  padding-top: 5px;
  vertical-align: middle;
  display: inline-block;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-gutter: auto;

  width: calc(100% + 40px) ;
  border-width: 0 0 1px 0;
  border-style: solid;
  border-color: var(--btn_bar_vert_border_color); 
  background-color: white;
}

.general_selection_buttons_sub2_div,
.general_selection_buttons_sub_div {
  margin: -10px 0 5px -20px;
  padding: 5px 0 0 0;
  display: inline-block;
  white-space: nowrap;
  overflow-x: auto;
  width: 100%;
  background-color: white;

  width: calc(100% + 40px) ;
  border-width: 0 0 1px 0;
  border-style: solid;
  border-color: var(--btn_bar_vert_border_color); 
  background-color: white;

}

.general_selection_buttons_sub2_indent1 {
  margin: 20px 20px 0 20px;
}

.general_selection_buttons_sub_div .btn-bar-vert,
.general_selection_buttons_sub2_div .btn-bar-vert,
.general_selection_buttons_div .btn-bar-vert {
  display:inline-block;
  padding: 0 20px 2px 20px;
  margin: 0px -3px 0 -3px;
  font-size: 14px;
  font-weight: normal;
  border-width: 0;
  border-style: solid;
  border-color: var(--btn_bar_vert_primary_color);
  background-color: var(--btn_bar_vert_primary_bg_color);
  color: var(--btn_bar_vert_primary_color);
}

.general_selection_buttons_sub_div .btn-bar-vert:hover,
.general_selection_buttons_sub2_div .btn-bar-vert:hover,
.general_selection_buttons_div .btn-bar-vert:hover {
  margin: 0 -3px 0 -3px;
  color: var(--btn_bar_vert_primary_hover_color);
  border-color: var(--btn_bar_vert_primary_hover_color);
}

.general_selection_buttons_sub_div .btn-bar-vert.selected,
.general_selection_buttons_sub2_div .btn-bar-vert.selected,
.general_selection_buttons_div .btn-bar-vert.selected {
  border-width: 0 0 3px 0;
  font-weight: bold;
  margin: 0;
  background-color: var(--btn_bar_vert_primary_selected_bg_color);
}

.general_selection_buttons_sub_div .btn-bar-vert:hover,
.general_selection_buttons_sub2_div .btn-bar-vert:hover,
.general_selection_buttons_div .btn-bar-vert:hover {
  background-color: var(--btn_bar_vert_primary_hover_bg_color);
}

.general_selection_buttons_div .btn-bar-vert.selected {
  color: var(--btn_bar_vert_primary_selected_color);
  border-color: var(--btn_bar_vert_primary_selected_color);
}

.general_selection_buttons_sub_div .btn-bar-vert.selected {
  color: var(--btn_bar_vert_sub_primary_selected_color);
  border-color: var(--btn_bar_vert_sub_primary_selected_color);
}

.general_selection_buttons_sub2_div .btn-bar-vert.selected {
  color: var(--btn_bar_vert_sub2_primary_selected_color);
  border-color: var(--btn_bar_vert_sub2_primary_selected_color);
}

.FilenameUploadedFile {
  padding-top: 6px;
  font-size: 14px;
}

.inputIcon {
    color: var(--btn_primary_color);
}

.has-error .select2-selection {
    border-color: rgb(185, 74, 72) !important;
}

.customFilterIcon {
    color: var(--customFilterIconColor);
}

.customFilterIconSelected {
    color: var(--customFilterIconColorSelected);
}

.customFilterIcon i,
.inputIcon i {
    pointer-events: auto !important;
    cursor: pointer !important;
}

.CustomFilterEditor_Type {
    display: inline-block;
    width: 100%;
    margin-right: 10px;
    margin-bottom: 10px;
}

.CustomFilterEditor_Value {
    display: inline-block;
    width: 100%;
    margin-right: 10px;
    margin-bottom: 10px;
}

.CustomFilterEditor_Button {
    min-width: 100%;
    margin-top:  5px;
    margin-bottom: 10px;
}

.GeneralItemEditor_Button {
  min-width: 98%;
  margin-top:  5px;
  margin-bottom: 10px;
}

.GeneralItemEditor_Value {
  display: inline-block;
  width: 98%;
  margin-right: 10px;
  margin-bottom: 10px;
}

.GeneralItemEditor_Type {
  display: inline-block;
  width: 98%;
  margin-right: 10px;
  margin-bottom: 10px;
}
/*
select.GeneralItemEditor_Type:invalid:not(option) {
  color: lightgray;
}
*/
@media screen and (min-width: 1280px) { 
  .generalItemInputField,
  .generalItemInputFieldDiv {
    display: inline-block;    
  }
  .generalItemInputTitle {
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    text-align: left;
    margin-left: 2px;
  }
  .generalItemButtonDiv {
    display: inline-block;
    width: 6%;  
  }
}

@media screen and (max-width: 1280px) { 
  .generalItemInputField {
  }
  .generalItemInputFieldDiv,
  .generalItemButtonDiv {
    width: 100%;
    min-width: 100%;
  }
  .generalItemInputTitle {
    width: 100%;
    min-width: 100%;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
  }
}

.fa-pencil-slash {
  content: url('/images/read-only.svg');
  max-width: 15px;
  max-height: 15px;
  width: 15px;
  height: 15px;
}

.fa-text {
  font-size: 10px;
  cursor: default;
}


.fa-red {
  color: red;
}

.fa-green {
  color: green;
}

.fa-blue {
  color: var(--btn_primary_color);
}

.fa-orange {
  color: var(--default_orange);
}

.fa-darkyellow {
  color: #FFAA00;
}

.fa-purple {
  color: purple;
}

.fa-dark-red {
  color: darkred;
}

.fa-green {
  color: darkgreen;
}

.fa-dark-blue {
  color:  darkblue;
}

.fa-screen-mode-switch-mobile {
  font-size: 20px;
  margin: -5px 3px 0 3px;
}

table.dataTable tbody>tr.selected .fa-red,
table.dataTable tbody>tr.selected .fa-green,
table.dataTable tbody>tr.selected .fa-blue,
table.dataTable tbody>tr.selected .fa-dark-red,
table.dataTable tbody>tr.selected .fa-dark-green,
table.dataTable tbody>tr.selected .fa-dark-blue
{
  color: white !important;
}

.fa-btn {
  font-size: 22px;
  pointer-events: auto;
  cursor: pointer;
}

.min-width-150px {
  min-width: 150px;
}

.text-break {
  overflow-wrap:break-word;
}

.itemIsLink {
  pointer-events: auto;
  cursor: pointer;
}

/*html {
  scroll-padding-top:  25px;
}
*/

.nav_menu_help_icon {
  font-size: 30px;
  padding: 10px 0 0 0;
}

.btn .btn_badge {
  position: relative;
  top: -15px;
  right: -10px;
  border-radius: 5px;
  padding-left: 2px;
  padding-right: 2px;
}

.FieldsOrder_selectievak_div,
.Templates_selectievak_div {
  margin: 0 10px 0 10px;
  padding: 0px 5px 0px 20px;
  background-color: white;

  /*border: 5px solid gray;*/
  /*border-radius: 10px;*/
}

.validate_error {
  color:  red;
}

.documenten_confirm_read_button {
  border: 2px solid #CCCCCC;
}

.documenten_setup_fields_bestanden_toelichting_div {
  padding: 3px 5px 5px 5px;
}

.DocumentenIsPreviewMessageDiv {
  background-color: darkblue;
  color: white;
  padding: 7px 3px 5px 3px;
  margin-bottom: 6px;
  text-align: center;
  font-size: 22px;
}

div.DocumentenIsPreviewMessageDiv{
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

.top_nav.navbar-fixed-top {
/*  min-height: var(--height_top_bar) !important;*/
  position: fixed;
  top: 0;
/*  z-index: 1 !important;*/
/*  background-color: white;*/
}

.inklokControllerBlockMessageDiv {
  background-color: red;
  font-weight: bold;
  padding-top:  20px;
  padding-bottom: 20px;
  text-align: center;
  border-radius: 20px;
}

.inklokControllerBlockMessageDiv > .title {
  font-size: 36px;
  color: white;
}

.inklokControllerBlockMessageDiv > .reason {
  font-size: 20px;
  color:  black;
}

.inklokControllerInfoBlock > .reason {
  font-size: 20px;
  color:  black;
  font-weight: bold;
}


.inklokControllerInfoBlock > .instructions {
  font-size: 14px;
  font-style: italic;
  color:  black;
}

.padding_left0 {
  padding-left: 0;
}

.gewerkteUrenTooltipDate {
  font-weight: bold;
  font-size: 16px;
}

.gewerkteUrenTooltipItem {
  font-weight: normal;
  font-size: 12px;
}

.AGU_editorCopyButtonMessageDiv {
  margin: 10px 0 0 0;
  padding: 0;
}

@keyframes AnimatedWarningBlockCode {
  0%   {border: 3px solid var(--warning_block_text_bg_color);}
  50%  {border: 3px solid var(--warning_block_border_color);}
  100% {border: 3px solid var(--warning_block_text_bg_color);}
}

.AnimatedWarningBlock {
  color: var(--warning_block_text_color);
  background-color: var(--warning_block_text_bg_color);
  border: 3px solid var(--warning_block_text_bg_color);
  font-weight: bold;
  text-align: center;
  padding: 2px 5px 2px 5px;
  border-radius: 10px;
  animation-name: AnimatedWarningBlockCode;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

.btn-text-lg {
  font-size: clamp(18px, 5vw, 30px);
}

.panelInnerBlock
{
  border: 2px solid var(--default_background_color);
}

@media screen and (max-width: 767px) { 
  .PageTitle {
    display: none;
  }
}

@media screen and (min-width: 768px) { 
  .PageTitle {
    font-size: min(2vw, 28px);
    font-family: inherit;
    font-weight: 500;
    color: #AAAAAA;
  }
}

tr.dtSearchBar>th {
  padding: 2px 2px 3px 2px;
  border-color: blue;
  background-color: white;

  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

table tr.dtSearchBar>th input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: var(--defaultPlaceholderColor);
}
table tr.dtSearchBar>th input::-moz-placeholder { /* Firefox 19+ */
  color: var(--defaultPlaceholderColor);
}
table tr.dtSearchBar>th input:-ms-input-placeholder { /* IE 10+ */
  color: var(--defaultPlaceholderColor);
}
table tr.dtSearchBar>th input:-moz-placeholder { /* Firefox 18- */
  color: var(--defaultPlaceholderColor);
}
table tr.dtSearchBar>th input {
  color: var(--defaultInputTextColor);
}

.Sharepoint-folder-icon {
  color: orange;
}

.Sharepoint-file-icon {
  color: blue;
}

.Sharepoint-search-icon {
  color: green;
  margin-right: 10px;
}

.Sharepoint-toUser-icon {
  color: blue;
}

.Sharepoint-toCompany-icon {
  color: blue;
}

.Sharepoint-cancel-icon {
  color: red;
}

.Sharepoint-email-icon {
  color: green;
  margin-left: 10px;
}


.singleInputEditDialogSelect {
  z-index: -1;
  overflow: hidden;
  width: 100%;
}

.table-icon-circle {
  height: var(--size_table_icon);
  max-height: var(--size_table_icon);
  width: var(--size_table_icon);
  max-width: var(--size_table_icon);
  border-radius: 50%;
  display: inline-block;
  vertical-align: top;
}

.table-icon {
  height: var(--size_table_icon);
  max-height: var(--size_table_icon);
  width: var(--size_table_icon);
  max-width: var(--size_table_icon);
  display: inline-block;
  vertical-align: top;
  font-size: var(--size_table_icon_font);
  padding: 0 !important;
}


.margin-bottom-min6 {
  margin-bottom: -6px !important;
}

.margin-bottom-min12 {
  margin-bottom: -12px !important;
}

.dataTable tr, td {
  padding: 4px 10px 3px 10px !important;
}

div.dt-datetime {
  min-width: 305px !important;
}

.dataTable.table>thead>tr>th {
  background-color: white;
}

.x_content {
/*  float: none !important;*/
}

.info-tile-label {
  margin: 10px 0 0 10px !important;
}
.info-tile-count {
  font-size: 38px;
  font-weight: 700;
  margin: 7px 0 1px 10px;
  padding: 0;
  line-height: 1;
}

.info-tile-description {
  font-style: italic;
  margin: 0 0 0 15px;  
}

.dt_custom_title {
  font-size: 22px;
  font-weight: bold;
}

#UrenregistratiegroepTable>tbody>tr>td:first-child,
#UrenregistratiegroepTable>tbody>tr>td:nth-child(2) {
  cursor: move;
}

.languageContainer {
  margin-bottom: 10px;
}

.shiftup20px {
  position:relative;
  top: -20px;
}

.ContractenForm_messageDiv {
  background-color: var(--badge_warning_bg_color);
  color: var(--badge_warning_color);
  text-align: center;
  border-radius: 2px;
  padding: 3px;
  font-size:;
}

.fullWidth {
  display: block !important;
  width: 100%;
}

.icon-stack-wrapper {
  position: relative;
}

.icon-stack-base {
  font-size: 8px;
  position: absolute;
  right: -2px;
  bottom: -2px;
}

.form-group.teelt_invalid label {
  color: red;
}

.form-group.teelt_invalid .select2-container--default .select2-selection--single {
  border: 1px solid red;
}

.TTP_omscanPanel_error {
  color: red;
}

.STOBC_InfoWindow {
  width: 100%;

  border: 1px solid var(--default_input_border_color);
  border-radius: 4px;
  background-color: white;
  text-align: left;
  padding: 10px;
}

.STOBC_InfoWindow_Row label {
  min-width: 80px;
}


.profile_pic_in_editor {
  margin: 0;
  padding: 0;
  top: 0;
  text-align: center;
}

.profile_pic_in_editor img {
  max-height: 150px;
  max-width: 150px;
  margin: auto auto 5px auto !important;
  display: block;
}

.btn_cropper_dialog {
  margin-left: 10px ;
  margin-right: 10px ;

  min-width: 40px;
}


@media screen and (max-width: 767px) { 
  .PPE_docs-buttons button,
  .PPE_docs-buttons label {
    width: 45px;
    padding: 6px 10px 6px 10px;
    margin: 5px 3px 5px 3px;  
  }
}

@media screen and (min-width: 767px) { 
  .PPE_docs-buttons button,
  .PPE_docs-buttons label {
    width: 40%;
    max-width: 50px;
    padding: 6px 10px 6px 10px;
    margin: 5px 3px 5px 3px;
  }
}

.required_indicator {
  margin-left: 5px;
  color: var(--btn_primary_color);
}

.d-none {
  display: none;
}

.documenten_white_div {
  padding: 5px;
  background-color: white;
  border: 1px solid var(--default_input_border_color);
  border-radius: 4px;
}

.PreviewUploadedFileDiv img,
.PreviewProfilePictureDiv img {
  background-color: var(--default_background_color);
  padding: 5px;
  margin-left: 10px;
  border: 1px solid var(--default_input_border_color);
}

@media screen and (min-width: 767px) { 
  .PreviewUploadedFileDiv img,
  .PreviewProfilePictureDiv img {
    width: 50%;
    height: 50%;
  }
}

@media screen and (max-width: 767px) { 
  .PreviewUploadedFileDiv img,
  .PreviewProfilePictureDiv img {
    width: 90%;
    height: 90%;
  }
}

.documenten_profile_preview {
  margin: 20px 5px 10px 20px;
}

.LinkUploadedFileDiv {
}

.div-disabled {
    opacity: 0.4;                /* Maakt de div transparant */
    filter: grayscale(100%);     /* Maakt de inhoud grijs */
    pointer-events: none;        /* Voorkomt alle muisklikken en hovers */
    user-select: none;           /* Voorkomt dat tekst geselecteerd kan worden */
}

.dt-flatpickr-wrapper {
    position: relative;
}

.dt-flatpickr-wrapper .input {
    padding-right: 35px; /* ruimte voor icoon */
    min-width: 140px;
}

.calendar-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 10;
}