:root {
    --pace-blue: #3498db;        /* var(--pace-blue) */
    --pace-orange: #ffa500;      /* var(--pace-orange) */
    --pace-white: #ffffff;       /* var(--pace-white) */
    --pace-off-white: #F2F2F2;   /* var(--pace-off-white) */
    --pace-light-blue: #86c2f3;  /* var(--pace-light-blue) */
    --pace-dark-blue: #246a99;   /* var(--pace-dark-blue) */
}

@font-face {
    font-family: 'PoiretOne-Regular';
    src: url('fonts/PoiretOne-Regular.ttf') format('truetype');
}

body {
    font-family: 'Aptos', 'Calibri', 'Arial', 'Helvetica', sans-serif;
    font-size: 18px;
}
  
.icon-style {
    font-size: 12px; 
    color: var(--pace-blue);
    text-align: left;
    margin-left: 0px;
    padding-left: 0px;
}

.highlight-different {
    background-color: yellow; /* Choose a color that signifies difference */
}


.custom-navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 30px;
    background-color: var(--pace-blue) !important; /* pace-blue */
    color: var(--pace-white) !important; 
    padding: 0; /* Remove padding to ensure the height is exactly 30px */
    align-items: center; /* Vertically center navbar contents */
    display: flex; 
}

.custom-navbar2 {
    background-color: var(--pace-blue); /* Your chosen color */
   
    width: 100%;
    
    padding: 10px;
    font-size: 14px;  
    z-index: 9999; 
    font-weight: bold;
    height: 30px;
    display: flex;
    align-items: center !important;
    
}

.custom-loadbar {
    position: relative;
    top: 0px;
    left: 0;
    height: 40px;
    font-size: small;  
}


.pace-title {
    font-size: 22px !important;
    color: var(--pace-white) !important;
    font-weight: bold;
    font-family: 'PoiretOne-Regular', sans-serif;
    padding-bottom: 2px;
}

.small-text {
    font-size: 12px;
    font-family: 'Aptos', 'Calibri', sans-serif;
}

.medium-text {
    font-size: 14px;
    font-family: 'Aptos', 'Calibri', sans-serif;
}

.container-duo {
    display: flex;
    flex-direction: row;
    padding: 0px;
    margin: 0px;
}   

.image-duo {
    max-width: 50%;
    max-height: 100px !important;
    float: right;
    /* border: 1px dotted black; */
    margin: 0px 0px 15px 20px;
    padding-top: 2%;
    align-content: top;
}

.text-duo {
    font-size: 14px;
    padding-left: 20px;
    padding-top: 2%;
    float: left;
}

.custom-alert {
    position: absolute;
    top: 40px;
    left: 40%;
    width: 300px;
    height: 180px;
    color: var(--pace-blue);
    font-size: x-small;  
    z-index: 9999;
    display:block;
}   
.alert-heading {
    font-size: 18px;
    font-weight: bold;
    font-family: 'PoiretOne-Regular', sans-serif;
    color: var(--pace-blue);
    padding-bottom: 2px;
}

.nav-item {
    display: inline-block;
    padding: 5px; /* Adjust padding as needed */
    margin-left: 10px; /* Adjust margin as needed */    
}

.nav-link {
    text-decoration: none;
    color: inherit;
}

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

.blue-text {
    color: var(--pace-blue); /* Replace with your chosen color */
}

.blue {
    color: var(--pace-blue); /* Replace with your chosen color */
}

.blue-text:hover {
    color: var(--pace-blue); /* Replace with your chosen color */
}

.orange-text {
    color: #44d600; /* Replace with your chosen color */
}

.orange-text:hover {
    color: #44d600; /* Replace with your chosen color */
}

.white-text {
    color: var(--pace-white); /* Replace with your chosen color */
}

.white-text:hover {
    color: var(--pace-orange); /* Replace with your chosen color */
}

.pace-label-3 {
    font-size: 20px;
    color: var(--pace-blue);
    font-weight: bold;
    font-family: 'Aptos', 'Calibri', sans-serif;
}

.pace-label-4 {
    font-size: 12px;
    color: var(--pace-light-blue);
    font-style: italic;
    font-family: 'Aptos', 'Calibri', sans-serif;
}

.pace-label-5 {
    font-size: 10px;
    color: var(--pace-blue);
    font-family: 'Aptos', 'Calibri', sans-serif;
}

.red-background {
    background-color: #ff0000 !important; /* Replace with your chosen color */
}

.center-text {
    text-align: center;
    line-height: 30%;
}

.center-link {
    position: absolute; /* Absolute positioning within the fixed navbar */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust for the element's own size */
    text-decoration: none;
    z-index: 1; /* Optional: ensure it's above other content */
    font-size: 30px;
}

.left-nav-items {
    display: inline-block;
}

.center-nav-items {
    display: inline-block;
}

.right-nav-items {
    position: relative; /* Needed for proper dropdown positioning */
    /* background-color: rgba(255, 0, 0, 0.945) !important; */
}

.right-nav-items .dropdown-menu {
    position: absolute;
    top: 71%; /* Bottom of button */
    background-color: var(--pace-off-white);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1000;
    align-items: center;
}

.nav-item, .nav-link {
    padding: 10px; /* Adjust as needed to achieve vertical centering */
    margin: 0; /* Optional: Remove any unwanted margin */
    
}

.navbar-nav {
    line-height: 1.5; /* Adjust as needed */
}

.right-nav-items .dropdown-menu .nav-item {
    display: block; /* Stack items vertically */
    padding: 5px 10px; /* Adjust padding as needed */
    margin: 0; /* Remove unwanted margins */
    
}

.right-nav-items .dropdown-item {
    display: block; /* Stack items vertically */
    padding: 5px 10px; /* Adjust padding as needed */
    text-decoration: none; /* Remove underline */
    color: var(--pace-blue); /* Set the text color */
    font-weight: bold;
}

.right-nav-items .dropdown-item:hover {
    color: var(--pace-orange); /* Set the hover color */
}

/*
-- button styles --
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_button_css
*/

.pace-layouts-dropdown {
    display: inline-flex !important;  /* Use inline-flex to keep it consistent with other items */
    align-items: center;  /* Center items vertically */
    justify-content: center;  /* Center items horizontally */
    border: 1px solid var(--pace-light-blue) !important;
    box-sizing: border-box;  /* Include border in height calculation */
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 5px;
    padding: 0 !important;  /* Ensure no padding */
    height: 20px;  /* Set the height */
    margin: 0;  /* Ensure no unwanted margins affect alignment */
    overflow:   2;  /*  Syntax: [ visible | hidden | clip | scroll | auto ]{1,2} */
    margin: 0;  /* Ensure no unwanted margins affect alignment */
}

.pace-layouts-dropdown { /* removed .Select-control */
    background-color: var(--pace-off-white) !important; /* var(--pace-white) !important; */
   /* border-color: var(--pace-off-white) !important; */
    border: none !important;
    /* border-top: 1px solid var(--pace-blue) !important; */
    line-height: 10px !important;
    display: inline;
    padding: 0px 2px 2px 2px !important;

    &:hover {
        border-color: var(--pace-orange) !important;
    }
}  

.pace-layouts-dropdown .Select-control:hover {
    border-color: var(--pace-orange) !important; /* Change border on hover for better UI feedback */
}
.pace-layouts-dropdown .Select-value-label {               /* attributes of the seleted option from the dropdown list */
    color: orange !important; /* var(--pace-blue) !important; */
    font-weight: bold !important; /* sets the font weight of the selected option from the dropdownlist */
    /* background-color: var(--pace-orange) !important; */
    /* border-color: var(--pace-blue) !important;        /* sets the border color of the selected option from the dropdownlist */
    /* border-width: 4px !important;                       /* sets the border width of the selected option from the dropdownlist */
    /* border-style: solid !important;                     /* sets the border style of the selected option from the dropdownlist */
    /* border-radius: 0px !important;                      /* sets the border radius of the selected option from the dropdownlist */
    /* box-shadow: 2px 2px 4px 0px var(--pace-blue) !important; /* sets the box shadow of the selected option from the dropdownlist */
}
.my-dropdown { /* removed .Select-control */
    background-color: var(--pace-off-white) !important; /* var(--pace-white) !important; */
    display: inline-flex;  /* Make the dropdown a flex container */
    align-items: center;  /* Center the items vertically */
    justify-content: center;  /* Center the items horizontally */
}

.my-dropdown .Select-placeholder, .my-dropdown .Select-value-label {
    line-height: 12px;  /* Vertically align the placeholder text */
    font-size: 14px;  /* Adjust font size */
}

.my-dropdown .Select-menu-outer {
    max-height: 200px !important;  /* Adjust dropdown menu height */
}

.custom-row-height {
    height: 120px; /* Or any other value you need */
}
.pace-text-input {
    border: 1px solid var(--pace-light-blue);
    border-radius: 5px;
    padding: 1px;
    padding-left: 5px;
    font-size: 16px;
    color: var(--pace-blue) !important;
    font-style: italic;
    font-family: 'Aptos', 'Calibri', 'Arial', 'Helvetica', sans-serif;
    margin-bottom: 2px;
    height: 38px;
}

.pace-font-b1 {
    font-size: 12px;
    color: var(--pace-blue);
    font-weight: bold;
    font-family: 'Aptos', 'Calibri', 'Arial', 'Helvetica', sans-serif;
}

.pace-text-input::placeholder {
    /* border: none;
    background-color: transparent;
    font-size: 12px; */
    color: var(--pace-light-blue) !important;
    /* font-family: 'Calibri', 'Arial', 'Helvetica', sans-serif; */
}

.wrap {
    white-space: normal;

}

.custom-tooltip {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s;
    background-color: white;
    /* border: 1px solid #ccc; */
    padding: 10px;
    z-index: 100;
}


.tooltip-arrow::before {
    border-top-color: transparent !important; /* Adjust for top placement */
    border-bottom-color: transparent !important; /* Adjust for bottom placement */
    border-left-color: transparent !important; /* Adjust for left placement */
    border-right-color: transparent !important; /* Adjust for right placement */
    
}

.tooltip-inner {
    background-color: var(--pace-blue);
    color: white;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 6px;
    border: 0px !important;
    box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1);
    max-width: 220px;
}

.tooltip.bs-tooltip-auto[x-placement^="bottom"] .arrow::before,
.tooltip.bs-tooltip-bottom .arrow::before {
    border-bottom-color: rgba(0, 0, 0, 0.85);
}


/* change the style of the dropdown placeholder */
.pace-dropdown .Select-placeholder {
    color:var(--pace-light-blue) !important;
    font-size: 12px !important;
    font-style: italic !important;
}

.headline {
    font-size: 30px;
    color: var(--pace-blue);
    font-weight: bold;
    font-family: 'PoiretOne-Regular', sans-serif;
}

.pace-img {
    max-width: 200px;
    max-height: 70px;
    justify-content: center;
    margin-top: -20px; 

}

.description_text_box_style {
    resize: vertical; /* Allow the user to vertically resize the textarea (not horizontally) */
    padding: 10px; /* Some padding */
    font-size: 12px; /* Increase font size */
    color: var(--pace-blue); /* Set the text color */
    font-family: 'Aptos', 'Calibri', 'Arial', 'Helvetica', sans-serif;
    height: 140px; /* Before scroll bar appears */
    line-height: 1.2; /* Specify line height */
    width: 100%; /* Set a default width */
    background-color: #f0f0f0f1; /* Set a background color */
    overflow: scroll; /* Add scrollbars to textarea if needed */
    border-radius: 5px;
}

/* Universal scrollbar styling */
*::-webkit-scrollbar {
    width: 8px;  /* Width of the vertical scrollbar */
    height: 8px;  /* Height of the horizontal scrollbar */
    border-radius: 5px;
}

*::-webkit-scrollbar-track {
    background-color: #f0f0f0;
    border-radius: 5px;
}

*::-webkit-scrollbar-thumb {
    background-color: darkgrey;
    border-radius: 5px;
}

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

/* 
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    background-color: var(--pace-white);
    border: 1px solid var(--pace-light-blue);
    border-radius: 5px;
    border-bottom: var(--pace-blue) 5px solid;
    color: var(--pace-blue);
    max-height: 50px;
} */

.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(--pace-blue); /* 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(--pace-orange); /* White text on hover */
    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(--pace-blue); /* Blue tint for active tab */
    color: var(--pace-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 */
}



/* ------------------------------------------------------------- */
.Select-control {
    background-color: var(--pace-white) !important; 
   /* border-color: var(--pace-off-white) !important; */
    border: none !important;
    /* border-top: 1px solid var(--pace-blue) !important; */
    line-height: 10px !important;
    display: inline;
    padding: 0px 2px 2px 2px !important;

    &:hover {
        border-color: var(--pace-orange) !important;
    }
}  

.Select-value-label {                                   /* attributes of the seleted option from the dropdown list */
    color: var(--pace-blue) !important;
    /* background-color: var(--pace-white) !important; */
    /* border-color: var(--pace-orange) !important;        /* sets the border color of the selected option from the dropdownlist */
    /* border-width: 4px !important;                       /* sets the border width of the selected option from the dropdownlist */
    /* border-style: solid !important;                     /* sets the border style of the selected option from the dropdownlist */
    /* border-radius: 0px !important;                      /* sets the border radius of the selected option from the dropdownlist */
    /* box-shadow: 2px 2px 4px 0px var(--pace-blue) !important; /* sets the box shadow of the selected option from the dropdownlist */
}

.Select-placeholder {
    color:var(--pace-light-blue) !important;
    font-size: normal;
}

.Select-menu-outer {
    color: var(--pace-blue) !important;                 /* sets the font color of the option items in the dropdownlist */  
    font-size: medium !important;                 /* sets the font size of the option items in the dropdownlist */
}

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

.pace-button {
    background-color: var(--pace-off-white); /* Grey color */
    color: var(--pace-blue);
    border: 1px solid var(--pace-blue);
    border-radius: 5px;
    /* padding: 10px 20px; */
    font-size: 16px;
    width: 50px !important;
    height: 30px !important;
    text-align: center;
    cursor: pointer;
    /* margin-right: 0px !important; */
    display: flex; /* Add this line */
    align-items: center; /* Add this line */
    justify-content: center; /* Add this line */
    vertical-align: top; /* Align button with progress bar */
    &:hover {
        border-color: var(--pace-orange);
        background-color: var(--pace-orange) !important; /* Add a darker background on hover */
    }
}

.pointer-cursor {
    cursor: pointer;
}

.pace-wide-button {
    background-color: var(--pace-off-white); /* Grey color */
    color: var(--pace-blue);
    border: 1px solid var(--pace-blue);
    border-radius: 5px;
    font-size: 14px;
    width: 90px;
    height: auto; /* Adjust height to fit content */
    line-height: 100%;
    cursor: pointer;
    display: flex; /* Flex display to enable alignment */
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center items horizontally */
    justify-content: center; /* Center items vertically */
    text-align: center; /* Ensure text is centered */
    padding: 5px; /* Add some padding for better spacing */
    white-space: normal; /* Allow text to wrap */
    &:hover {
        border-color: var(--pace-orange);
        background-color: var(--pace-orange) !important; /* Add a darker background on hover */
    }
}


/* Style for active buttons */
.active-button {
    background-color: #3498DB; /* Blue color */
    color: white;
    &:hover {
        border-color: var(--pace-orange);
        background-color: var(--pace-orange) !important; /* Add a darker background on hover */
    }

}

/* Style for idle buttons */
.idle-button {
    background-color: var(--pace-light-blue); 
    color: grey;
    border: 1px solid va(--pace-blue);
    &:hover {
        border-color: var(--pace-orange);
        background-color: var(--pace-orange) !important; /* Add a darker background on hover */
    }
}
/* Style for inactive buttons */
.inactive-button {
    background-color: var(--pace-off-white); /* Grey color */
    color: grey;
    border: 1px solid grey;
    &:hover {
        border-color: grey;
        background-color: var(--pace-off-white) !important; /* Add a darker background on hover */
    }

}

/* Clearfix hack for containing floats */
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

/* Bordered group styling */
.bordered-group {
    border: 1px solid var(--pace-light-blue) !important;  /* Set the border */
    border-radius: 5px;  /* Maintain rounded corners */
    height: 24px !important;  /* Reduce height, adjust if clipping still occurs */
    display: flex;  /* Use flex display for better control */
    align-items: center;  /* Vertically center items */
    box-sizing: border-box;  /* Ensure height includes border and padding */
    padding: 1px;  /* Small padding to prevent overflow */
    margin: 0;  /* No extra margins */
    z-index: 10;  /* Ensure it's not affected by stacking issues */
}

/* Dropdown specific adjustments to control borders */
.dropdown-container .Select-control {
    height: 16px !important;  /* Make sure control expands to the parent div */
    box-sizing: border-box !important;  /* Ensure padding and border are included in height */
    border: 1px solid var(--pace-blue) !important;  /* Add a border to the control */
    border-top: 2px solid var(--pace-blue) !important;  /* Add a top border */
    overflow: hidden;  /* Ensure no internal overflow affects the container */
    line-height: 1.0 !important;  /* Slightly smaller line height to avoid clipping */
    /* background-color: orange !important; */
}

/* Ensure dropdown menu is visible and positioned correctly */
.dropdown-container .Select-menu-outer {
    z-index: 1000 !important;  /* Make sure dropdown options appear above other elements */
    font-size: 12px !important;  /* Consistent font size for better fit */
    font-family: 'Aptos', Verdana, Geneva, Tahoma, sans-serif !important;  /* Monospace font for consistency */
    overflow: visible !important;  /* Ensure the dropdown menu is fully visible */
    background-color: var(--pace-off-white) !important;
    height: 16px !important;
}

/* Set styles for the dropdown value and placeholder */
.dropdown-container .Select-value-label, .dropdown-container .Select-placeholder {
    font-size: 11px !important;  /* Consistent font size for better fit */
    font-family: 'Aptos', Verdana, Geneva, Tahoma, sans-serif !important;  /* Monospace font for consistency */
    line-height: 1.2 !important;  /* Adjust line height to prevent vertical overflow */
    padding: 0px 2px !important;  /* Add a small padding for proper spacing */
    /* background-color: #ffa500 !important; */
    height: 16px !important;
}

/* Remove padding or margins that could contribute to clipping */
.dropdown-container {
    padding: 0;  /* No extra padding inside the dropdown container */
    margin: 0;  /* Remove margin to avoid unintended spacing */
}

/* General dropdown container */
.custom-dropdown {
    height: 25px !important;  /* Set a smaller consistent height */
    line-height: 1 !important;
    box-sizing: border-box !important;
    padding: 0 !important;
}

/* Specific styles for internal parts of the dropdown to reduce height */
.custom-dropdown .Select-control { /* do not remove .Select-control */
    min-height: 25px !important;  /* Match the dropdown container height */
    height: 100% !important;
    border-radius: 5px;
    display: flex;
    align-items: center;  /* Vertically align contents */
    justify-content: space-between;  /* Spread text and arrow between edges */
    box-sizing: border-box;
    padding: 0 8px !important;  /* Provide some horizontal padding for spacing */
    overflow: hidden !important;
}

.custom-dropdown .Select-placeholder,
.custom-dropdown .Select-value {
    line-height: 1 !important;  /* Reduce line height to avoid extra spacing */
    padding: 0 4px !important;  /* Minimal padding for proper spacing */
    font-size: 12px !important;  /* Control font size for better alignment */
    display: flex;
    align-items: center;  /* Vertically center the text */
    height: 100%;  /* Match the full height of the dropdown */
}

.custom-dropdown .Select-arrow-zone {
    padding: 0 !important;
    height: 100% !important;
    display: flex;
    align-items: center;  /* Vertically center the arrow */
    justify-content: center;  /* Center the arrow horizontally within its container */
    margin-left: auto;  /* Push the arrow to the right */
    width: 20px;  /* Define a fixed width for the arrow area */
}

/* Ensure dropdown menu is visible and positioned correctly */
.custom-dropdown .Select-menu-outer {
    z-index: 1000;  /* Ensure dropdown options are visible above other elements */
    overflow: visible !important;
}

/* Remove unnecessary padding or margins */
.custom-dropdown div { /* check! */
    padding: 2px !important;
    margin: 0 !important;
    background-color: white;
    font-size: 12px;
}


.thin-blue-border {
    border: 1px solid var(--pace-blue); /* Adjust the color to your preference */
    border-radius: 5px; /* Optional: Add border radius */
    /* padding: 5px;  */
}

/* In your CSS file */
.vertical-progress-bar {
    /* Rotate the progress bar */
    /* transform: translate(0, -50%); */
    transform: rotate(-90deg);
    align-items: top; /* Add this line */
    /* justify-content: center; Add this line */
    width:  30px;
    height: 15px;
    color:  var(--pace-light-blue);
    background-color: var(--pace-off-white );
    /* padding: 2px !important; */
    /* vertical-align: bottom; */
    /* margin: 10px; */
    /* Optional: Adjust the width and height to fit your layout */
    /* width: 30px; */
    /* height: 20px !important; */
    /* margin-bottom: 5px; */
    /* position: relative; */
    /* top: 20%; */
    /* right: 20%; */
    
}


.visible-container {
    border: 5px grey solid;
}

.button-progress-container {
    display: flex;            /* Use flexbox layout */
    justify-content: center;  /* Center items horizontally */
    align-items: center;      /* Center items vertically */
}

.progress-bar-container {
    margin: 0 15px;  /* Add some space between the buttons and the progress bar */
}

.dataset-name {
    display: block;
}

.icon-button {
    font-size: 24px;
    color: var(--pace-blue);
    background-color: white;
    /* border: 0px; */
    border: 1px solid var(--pace-light-blue); 
    border-radius: 5px;
}

.icon-button:disabled,
.icon-button[disabled] {
    background-color: white !important;
    /* border: 1px solid white !important; */
    color: lightgrey !important;
}

.search-icon-button {
    font-size: 14px;  /* Smaller icon */
    color: var(--pace-blue) !important;
    background-color: white;
    border: 1px solid var(--pace-light-blue) !important;
    border-radius: 5px;
    height: 24px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

#search_input_container {
    position: absolute;
    color: var(--pace-blue) !important;
    top: 28px;  /* below the 24px button + a bit of spacing */
    left: 0;
    z-index: 1000;
    background: white;
    border: 1px solid var(--pace-light-blue) !important;
    border-radius: 4px;
    box-shadow: 0px 2px 6px var(--pace-blue);
}

.status-icon-button {
    width: 30px;
    height: 24px;
    padding: 0;
    margin: 0;
    border: 1px solid var(--pace-light-blue);
    border-radius: 5px;
    background-color: white;
    overflow: hidden;
    margin-top: 8px; /* Adjust to align with the search button */
}


.status-die-icon {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}


#status_dropdown_container {
    position: absolute;
    background-color: white;
    border: 1px solid var(--pace-light-blue);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 13px;
    color: var(--pace-blue);
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
    min-width: 100px;
}


.floating-search-input {
    position: absolute;
    top: 4px;
    right: 30px;  
    width: 320px;
    height: 24px;
    font-size: 12px;
    color: var(--pace-blue);
    background-color: white;
    border: 1px solid var(--pace-light-blue);
    border-radius: 4px;
    padding: 2px 6px;

    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
}
.floating-search-input-C {
    position: absolute;
    top: 28px;
    right: 30px;  
    width: 320px;
    height: 24px;
    font-size: 12px;
    color: var(--pace-blue);
    background-color: white;
    border: 1px solid var(--pace-light-blue);
    border-radius: 4px;
    padding: 2px 6px;
    z-index: 1000;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
}

.search-toggle-scope-class-A {
    position: absolute;
    top: 4px; /* Adjusted to align with the search input */
    right: 0px;  
    z-index: 1000;
    width: 30px;
    height: 24px;
    background-color: white;
    border: 1px solid var(--pace-light-blue);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-toggle-scope-class {
    position: absolute;
    top: 28px; /* Adjusted to align with the search input */
    right: 0px;  
    z-index: 1000;
    width: 30px;
    height: 24px;
    background-color: white;
    border: 1px solid var(--pace-light-blue);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.search-toggle-scope-class-all {   
    position: absolute;
    top: 28px;
    right: 0px;  
    z-index: 1000;
    width: 30px;
    height: 24px;
    background-color: #3498db;
    border: 1px solid var(--pace-light-blue);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    /* classname: "fa-sharp fa-solid fa-sun-bright" */
}


.floating-search-input::placeholder {
    color: var(--pace-blue);
    font-style: italic;
    opacity: 1; /* Ensure it's fully visible */
}

/* #search_results_container {
    border-top: 1px dashed var(--pace-light-blue);
    padding-top: 6px;
    margin-left: 12px;
} */
.floating-search-results {
    position: absolute;
    display: block;
    top: 60px;  
    right: 0px; 
    width: 350px;
    max-height: 600px;
    overflow-y: auto;
    z-index: 1050;  
    background-color: ivory;
    border: 1px solid var(--pace-light-blue);
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 12px;
    color: var(--pace-blue);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.floating-search-results_C {
    position: absolute;
    display: block;
    top: 60px;  
    right: 0px; 
    width: 350px;
    /* height: 74px; */
    max-height: 600px;
    overflow-y: auto;
    z-index: 1050;  
    background-color: ivory;
    border: 1px solid var(--pace-blue);
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 12px;
    color: var(--pace-blue);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.custom-backdrop {
  /* background-color: var(--pace-light-blue) !important;  */
  background-color: transparent !important;  
  opacity: 0.2 !important; 
  backdrop-filter: blur(5px) !important; 
}

.swap-button {
    &:hover {
        border-color: var(--pace-orange);
        background-color: var(--pace-orange) !important; /* Add a darker background on hover */
    }
}

.delete-button {
    &:hover {
        border-color: red;
        background-color: red !important; /* Add a darker background on hover */
    }
}

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

.modal2 {
    position: fixed;    
    z-index: 1002; 
    left: 0; 
    top: 0; 
    width: 90%; 
    height: 90%; 
    margin: 10px; 
    /* background-color: rgba(0, 0, 0, 0.6); */
}

.modal-content {
    margin: 10px; 
    padding: 0px; 
    height: 100%; 
    /* background-color: silver; */
}

.my_box_container {
    display: flex;
    flex-wrap: wrap;  /* Allows items to wrap onto the next line when there's no more room */
    align-items: center;  /* Aligns items vertically in the center of the container */
    justify-content: flex-start;  /* Aligns items to the start of the container horizontally */
    border: 1px solid var(--pace-blue);
    border-radius: 5px;
    /* padding: 10px;  Adds padding inside the container for better spacing */
    /* gap: 10px;  Adds space between the flex items */
}


.my_box_input {
    cursor: pointer;
    margin: 10px 4px 0px 4px; /* space between input icon and label text */
    vertical-align: -2px;
    color: var(--pace-light-blue);
    accent-color: var(--pace-orange);
}

.my_box_label {
    font-size: 12px;
    margin: 8px 7px 12px 4px;
    color: var(--pace-blue);
    user-select: none;  /* Disables text selection */
    cursor: pointer;
}

/* Target all radio buttons */
input[type="radio"] {
    accent-color: var(--pace-blue); /* This is for modern browsers supporting accent-color property */
    border-color: var(--pace-light-blue);
}

/* Fallback for older browsers */
input[type="radio"]:not(:checked) {
    background-color: var(--pace-blue);
    border-color: var(--pace-light-blue);
}

.pace-radio-item {
    /* font-size: xx-small; */
    color: var(--pace-blue);
    padding: 2px !important;
    min-width: 45px;
    /* transform: scale(0.6); */
    margin-right: 4px;
}

.small-label {
    font-size: 12px; 
    margin-bottom: 0px;  
    margin-top: 5px;
    display: block;
    color: var(--pace-light-blue)
}

.small-label2 {
    font-size: 14px; 
    width: 120px;
    margin: 0px;
    padding: 0px;  
    display: inline-block;
    color: var(--pace-light-blue);
}

.md-line-spacing {
    margin: 0px;
    margin-top: 5px;
    margin-bottom: 0px;
    padding: 0px;
    /* line-height: 1.2; */
}

.pace-dropdown {
    border: 1px solid var(--pace-light-blue) !important;
    border-top: 2px solid var(--pace-blue) !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(--pace-light-blue) !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;
}

.scrollable-values .Select-multi-value-wrapper {
  display: block;          /* make it a full-width block */
  width: 100%;
  max-height: 120px;       /* your cap */
  overflow-y: auto;        /* scrollbar only when content > 120px */
  padding: 2px 36px 2px 6px; /* small vertical padding + space for arrow/clear */
  box-sizing: border-box;  /* prevents padding from causing overflow */
}

/* Optional: wrap long chip labels nicely */
.scrollable-values .Select-value {
  margin-top: 0;
  margin-bottom: 0;
  white-space: normal;   /* keep long labels wrapping */
}


/* Style the SL-dropdown items */
.SL-dropdown .Select-control {  /* once the dropdown is selected */
    width: 200px !important; 
    height: 20px !important;
    color: var(--pace-blue) !important;
    font-size: 12px !important;
    font-weight: bold !important;
    background-color: white !important;
    border: 1px solid var(--pace-light-blue) !important;
    border-top: 2px solid var(--pace-blue) !important; /* Add a top border */
    border-radius: 5px;
    line-height: 26px !important;
} 

.SL-dropdown .Select-placeholder { /* dit werkt */
    color: var(--pace-blue) !important;
    font-size: 12px !important;
    font-style: italic !important;
    background-color: white !important;
}
.SL-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(--pace-light-blue) !important;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
    /* line-height: 0.2; */
    color: steelblue !important;
}
.SL-dropdown .Select-option {
    background-color:violet !important;
    color: inherit !important;
    font-size: 12px !important;
    font-family: 'Aptos', Verdana, Geneva, Tahoma, sans-serif !important;
    /* border: 1px solid var(--pace-light-blue) !important;
    border-radius: 5px; */
}
.SL-dropdown .Select-option:hover {
    background-color: gold !important;
    color: violet !important;
}
.SL-dropdown .Select-option.is-selected {
    background-color: gold !important;
    color: violet !important;
}
.SL-dropdown .Select-option.is-focused {
    background-color: gold !important;
    color: violet !important;
}

.animated-button {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.animated-button:hover {
    transform: scale(1.01); /* Scale up slightly */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Add shadow */
}

.custom-backdrop {
    background-color: transparent !important; /* Make the backdrop transparent */
}

.scrollable-div {
    max-width: 100%; /* Constrain the width to the container */
    overflow-x: auto; /* Enable horizontal scrolling for overflow content */
    word-wrap: break-word; /* Break long words to prevent overflow */
    white-space: normal; /* Allow normal text wrapping */
    padding: 15px; /* Optional: Add some spacing */
    /* border: 1px solid #ccc; Optional: Visual boundary */
}

#react-select-2--value {
    height: 26px !important; 
    line-height: normal !important;
    vertical-align: middle; 
  }

/* end style SL-dropdown */
.filter-dropdown-container {
    padding: 6px 10px;
    border-radius: 6px;
    background-color: #f8f9fa; /* lichtgrijs */
    border: 1px solid #dee2e6;
    display: inline-block;
    font-size: 13px;
}

.filter-label {
    font-weight: 600;
    color: #3498db;  /* pace_blue */
    margin-bottom: 4px;
    font-size: 13px;
}

.status-checklist .form-check-label {
    color: #3498db;  /* pace_blue */
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
}

.status-checklist .form-check-input:checked {
    background-color: #3498db;  /* checkbox kleur bij selectie */
    border-color: #3498db;
}

.status-checklist .form-check {
    margin-right: 12px;
    margin-top: 2px;
}

.status-checklist .form-check-input:checked + .form-check-label {
    font-weight: bold;
    color: #1e5f99;
}

.status-checklist .form-check-input:hover {
    cursor: pointer;
}

.cy-context-menu {
  position: absolute;
  z-index: 9999;
  min-width: 220px;
  background: rgba(20, 20, 20, 0.95);
  color: white;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  padding: 10px 12px;
  backdrop-filter: blur(6px);
}

.cy-context-title {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 8px;
  opacity: 0.9;
}

.cy-context-actions > * {
  margin-right: 6px;
}

.cy-context-menu::before {
  content: "";
  position: absolute;
  top: -8px; left: 16px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid rgba(20,20,20,0.95);
}

.cy-context-menu { position: absolute; z-index: 9999; }


/* Additional styling for container alignment, if needed */
/* .dash-bootstrap .dbc-stack {
    align-items: inline-block !important;
} */
/* ------------------------------------------------------------- */
@media screen and (max-width: 768px) {

    .nav-item {
        display: inline-block;
        padding: 2px; /* Adjust padding as needed */
        margin-left: 2px; /* Adjust margin as needed */    
        text-align: start !important;
        vertical-align: middle !important;
    }

    .nav-link {
        text-decoration: none;
        /* color: var(--pace-blue); */
    }

    .custom-loadbar {
        position: relative !important; 
        top: -20px;
        left: 0;
        height: 30px;
        font-size: xx-small;  
    }

    .right-nav-items {
        font-size: small !important;    
    }

    .blue-text {
        font-size: small !important;
    }

    .pace-title {
        font-size: 20px !important;
        color: var(--pace-blue);
        font-weight: bold;
        font-family: 'PoiretOne-Regular', sans-serif;
    }

    .headline {
        font-size: 20px;
        color: var(--pace-blue);
        font-weight: bold;
        font-family: 'PoiretOne-Regular', sans-serif;
    }

    .pace-img {
        max-width: 30px !important;
        max-height: 20px !important;
        justify-content: center;
        display: none;              /* Hid the image for convenience */
    }

    .dataset-name {
        display: none;
    }

    .button-normal {
        padding: 2px; /* Padding */
        font-size: 8px; /* Increase font size */
    }

    .pace-dropdown {
        padding: 2px; /* Padding */
        margin-top: 2px !important;
        border-top: 2px solid var(--pace-blue) !important; /* Add a top border */
        font-size: xx-small !important;
    }

    /* .Select-control {
        background-color: var(--pace-white) !important;
        border-color: var(--pace-off-white) !important;
    }   */

    .Select-value-label {                                   /* attributes of the seleted option from the dropdown list */
        color: var(--pace-blue) !important;
        background-color: var(--pace-white) !important;
        font-size: xx-small;                                   /* sets the font size of the selected option from the dropdownlist */
        font-weight: bold;                                  /* sets the font weight of the selected option from the dropdownlist */
        /* border-color: var(--pace-orange) !important;        /* sets the border color of the selected option from the dropdownlist */
        /* border-width: 4px !important;                       /* sets the border width of the selected option from the dropdownlist */
        /* border-style: solid !important;                     /* sets the border style of the selected option from the dropdownlist */
        /* border-radius: 0px !important;                      /* sets the border radius of the selected option from the dropdownlist */
        /* box-shadow: 2px 2px 4px 0px var(--pace-blue) !important; /* sets the box shadow of the selected option from the dropdownlist */
    }
    
    .Select-placeholder {
        color:var(--pace-light-blue) !important;
        font-size: xx-small;
    }
    
    .Select-menu-outer {
        color: var(--pace-blue) ;                 /* sets the font color of the option items in the dropdownlist */
        font-size: xx-small     !important;                 /* sets the font size of the option items in the dropdownlist */
        font-weight: normal     ;                 /* sets the font weight of the option items in the dropdownlist */  
        border-color: var(--pace-orange) ;        /* sets the border color of the dropdownlist */
        border-width: 0px       ;                 /* sets the border width of the dropdownlist */
        border-style: solid     ;                 /* sets the border style of the dropdownlist */
        border-radius: 0px      ;                 /* sets the border radius of the dropdownlist */
        box-shadow: 1px 1px 2px 0px var(--pace-blue) !important; /* sets the box shadow of the dropdownlist */
        line-height: 12px;
    }    

    .pace-radio-item {
        font-size: xx-small;
        padding: 2px !important;
        min-width: 45px;
        transform: scale(0.6);
        margin-right: 4px;
    }
}