:root {
    /*
    ##pace-blue: #3498db;      
    ##pace-orange: #ffa500;    
    ##pace-white: #ffffff;    
    ##pace-off-white: #F2F2F2;
    ##pace-light-blue: #86c2f3;
    ##pace-dark-blue: #246a99; 
    
    /* Pace Tech brand colors */
    
    --brandcolor-light: #4DBAF3;
    --brandcolor-mid: #3498db;
    --brandcolor-dark: #074A8E;
    --brandcolor-accent: #ffa500;
    --brandcolor-white: #ffffff;
    --brandcolor-green: #2E8B57;
    --brandcolor-red: #C04000;
    --brandcolor-scheme: Blues;
    --brand-language: en;
    --brand-font: "Aptos", Verdana, Geneva, Tahoma, sans-serif;
    --brand-name: Capallo;

    /* Vekoma brand colors */

    /* brandcolor-white: #ffffff; */
    /* brandcolor-light: #66C266; */
    /* brandcolor-mid: #228B22; */
    /* brandcolor-dark: #166F16; */
    /* brandcolor-accent: #f9e79f; */
    /* brandcolor-scheme: Greens; */
    /* brand-language: en; */
    /* brand-font: Courier, Verdana, Geneva, Tahoma, sans-serif; */

}

/* Change the entire page background */
body {
    background-color: white !important;
}

.unselectable {
    user-select: none; /* Standard syntax */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
}

/* Improve tab styling */
.nav-tabs .nav-link {
    font-weight: bold;
    color: #495057;
    border-radius: 5px 5px 0 0;
}

.nav-tabs {
    display: flex; /* Flexbox layout */
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove padding */
    backdrop-filter: blur(10px); /* Frosted glass effect */
    background-color: rgba(255, 255, 255, 0.1); /* Semi-transparent background */
    border-radius: 15px; /* Rounded corners for the container */
    padding: 5px; /* Space within the container */
}

.nav-tabs .nav-item {
    margin: 0; /* Remove margin for alignment */
}

.nav-tabs .nav-link {
    background-color: rgba(255, 255, 255, 0.3); /* Semi-transparent background */
    color: var(--brandcolor-mid); /* Color for text */
    border: none; /* No borders */
    border-radius: 8px; /* Rounded tabs */
    margin: 0; /* Remove margins */
    transition: all 0.3s ease; /* Smooth transition for all properties */
    padding: 10px 20px; /* Padding for tab size */
    backdrop-filter: blur(5px); /* Slight blur effect for tab */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

.nav-tabs .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.5); /* More opaque background on hover */
    color: var(--brandcolor-dark); 
    transform: translateY(-3px); /* Lift effect on hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Enhanced shadow on hover */
}

.nav-tabs .nav-link.active {
    background-color: var(--brandcolor-mid); /* Blue tint for active tab */
    color: var(--brandcolor-white); /* White text for active tab */
    border-radius: 8px; /* Rounded for active tab */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Deeper shadow for active state */
    transform: translateY(0); /* Neutralize lift */
}

.standard-button {
    background-color: var(--brandcolor-white); /* Blue background */
    color: var(--brandcolor-mid); /* White text */
    border: 1px solid var(--brandcolor-light); /* Blue border */
    border-radius: 8px; /* Rounded corners */
    padding: 10px 20px; /* Padding for size */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    font-size: 1rem;
    font-weight: bold;
}

.standard-button:hover {
    background-color: var(--brandcolor-mid); /* Darker blue on hover */
    color: var(--brandcolor-white); /* White text on hover */
    border: 1px solid var(--brandcolor-light);
}

.resizable {
    resize: vertical;
    overflow: auto;
}


.pace-dropdown {
    display: flex !important;
    border: 1px solid var(--brandcolor-light) !important;
    border-top: 2px solid var(--brandcolor-mid) !important; /* Add a top border */
    text-overflow: ellipsis;
    
    /* white-space: nowrap; */
    border-radius: 5px;
    color: dodgerblue !important;
    font-size: 12px !important;
    font-family: 'Aptos', Verdana, Geneva, Tahoma, sans-serif !important;	
}

.pace-dropdown .Select-menu-outer { /* dit werkt voor de list items */
    background-color: white !important;
    font-size: 12px !important;
    font-family: 'Aptos', Verdana, Geneva, Tahoma, sans-serif !important;
    border: 1px solid var(--brandcolore-mid) !important;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    line-height: 1.2;
    color: dodgerblue !important;
    
}
.pace-dropdown .Select-placeholder, .Select--single > .Select-control .Select-value .Select-div{
    font-size: 12px !important; /* Adjust font size */
    font-style: italic !important; /* Italicize the placeholder */
    padding-left: 6px;
    background-color: white ;
    box-sizing: border-box;
    /* border: 1px solid var(--pace-light-blue) !important; */
    /* border-top: 2px solid var(--pace-blue) !important;  */
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 5px;
}

.icon-button {
    font-size: 20px;
    color: var(--brandcolor-mid);
    border: none;
    background: none;
    cursor: pointer;
    transition: 0.3s;
    opacity: 1;
}
.icon-button:hover {
    opacity: 0.7;
}

/* DATEPICKERRANGE STYLING */

/* hide the keyboard shortcuts button */
.DayPickerKeyboardShortcuts_buttonReset {
    display: none !important;
}

/* All days */
/* .CalendarDay {
    background-color: white;
    color: #000000;
    border: 1px solid #d3d3d3;
} */

/* Hovered day */
/* .CalendarDay:hover {
    background-color: #e0f7fa;
    color: #00796b;
    border: 1px solid #80cbc4;
} */

/* today's date */
.CalendarDay__today {
    background-color: #10e0fb23;
}

/* Highlight the selected start and end dates */
.CalendarDay__selected,
.CalendarDay__selected:active,
.CalendarDay__selected:hover {
    background-color: var(--brandcolor-mid);  /* Example: strong blue */
    color: white;
}

/* Highlight the selected span of dates */
/* .CalendarDay__selected_span {
    background-color: #cce5ff;
    color: #004085;
}

.CalendarDay__selected_span:hover {
    background-color: #b8daff;
    color: #003768;
} */

/* make the whole widget look like .form-control (≈ 38 px high) */
.date-picker-range .DateRangePickerInput{
    display:inline-flex;
    align-items:center;
    width:100%;
    height:calc(1.5em + .75rem + 2px);      /* 38 px = default BS input */
    padding:0;                              /* let inner inputs add padding */
    border:1px solid #ced4da;
    border-radius:.375rem;                  /* Bootstrap 5 default */
    background:#fff;
}

/* style each text box */
.date-picker-range .DateInput,
.date-picker-range .DateInput input{
    width:100%;                             /* both halves can grow/shrink */
}

.date-picker-range .DateInput input{
    border:none;            /* outer wrapper already has the border */
    padding:.375rem .75rem;
    font-size:1rem;
    line-height:1.5;
    color:#212529;
    background:transparent;
}

/* --- keep arrow / X in their own slots and stop text overlapping --- */
.date-picker-range .DateInput{
    flex:1 1 0;           /* each date field gets an equal share of space          */
    min-width:0;          /* …but can shrink, so it never pushes over the icons    */
}


.date-picker-range .DateRangePickerInput_clearDates{
    flex:0 0 auto;        /* same idea for the “×”                                 */
    padding-right:.75rem; /* aligns with the right‑hand padding of normal inputs   */
}

/* --- stop the date text from intruding under the arrow / “×” --- */
.date-picker-range .DateInput{
    flex:1 1 0;          /* share remaining space */
    min-width:0;         /* and allow shrinking   */
    width:auto !important;   /* cancels the old width:100% */
}

.date-picker-range .DateInput input{
    overflow:hidden;         /* text stays inside its box      */
    text-overflow:ellipsis;  /* shows … if it still can’t fit  */
    white-space:nowrap;
}

/* let each date stay inside its half but show the full text */
.date-picker-range .DateInput input{
    overflow:hidden;          /* still prevents overlap */
    white-space:nowrap;       /* keep it on one line    */
    text-overflow:clip;       /* **removes the ellipsis** */
    font-size:.875rem;        /* 14 px: small enough to fit, still readable */
    padding:.375rem .50rem;   /* trim horizontal padding for a few extra px */
}

/* optional: make the arrow take a hair less space */
.date-picker-range .DateRangePickerInput_arrow{
    padding:0 0rem;
    margin-left: -30px;
    z-index: 0;
}

/* Target the “track” portion of the vertical slider */
.blue-fill-slider .rc-slider-vertical .rc-slider-track {
  background-color: var(--brandcolor-dark) !important;
}

/* Optionally restyle the handle so it matches */
.blue-fill-slider .rc-slider-vertical .rc-slider-handle {
  border-color: var(--brandcolor-dark) !important;
  /* background-color: white !important; */
}

/* You can also tweak the “rail” (the unfilling part) if desired */
.blue-fill-slider .rc-slider-vertical .rc-slider-rail {
  background-color: #ddd;
}

.employee-button {
  background-color: var(--brandcolor-mid);
  border: none;
  /* font-size: clamp(0.5rem, 1.5vw, 1rem); */
  line-height: 1.1;
  white-space: normal;
  text-align: center;
  height: 50px;           
  width: 80px;         
  flex: 0 0 auto;   
  display: inline-flex;    
  align-items: center;
  justify-content: center;
}

.employee-button span {
  display: -webkit-box;          /* required */
  -webkit-box-orient: vertical;  /* required */
  overflow: hidden;              /* required */
  text-overflow: ellipsis;

  /* number of lines to keep */
  -webkit-line-clamp: 3; 
  line-clamp: 3; /* standard, for modern browsers */

  /* text handling */
  word-break: break-word;
  overflow-wrap: anywhere;
  text-align: center;

  /* responsive font sizing */
  font-size: clamp(0.55rem, 1.4vw, 0.85rem);
  line-height: 1.1;
}

.normal-hover:hover {
    background-color: var(--brandcolor-dark); /* Darker blue on hover */
    color: var(--brandcolor-white); /* White text on hover */
}

.red-hover:hover {
    background-color: #C04000; /* Red background on hover */
    color: var(--brandcolor-white); /* White text on hover */
}

.green-hover:hover {
    background-color: #2E8B57; /* Green background on hover */
    color: var(--brandcolor-white); /* White text on hover */
}