/*Solves the problem of the dash table not rendering properly*/
.dash-table-container .row {
  margin: 0;
}

/*Solution for the date picker which appread too big for the inputs */
.DateInput_input, .DateInput_input_1 {
  font-size: inherit; /*inherit;*/  /*or whatever size you would like to have*/
  height: 34px;
  border-radius:4px
}

/*Change color of Slider*/
.rc-slider-track {
  background-color: darkgreen;
}

.rc-slider-dot-active {  
  border-color: green;
  border: solid 2px green;
}

.rc-slider-handle {
  /*background-color: green;*/
  border-color: green;
}



/*Needed to make the dropdowns in dash tables work*/
.Select-menu-outer {
  display : block !important;
}

/* Change the colour for the dropdown menu inside the dash data table*/
.Select-menu-outer {
  --accent : rgb(80,80,80);
}

/* Change the colour for the arrow in the dropdown menu inside the dash data table*/
.Select-arrow {
	--accent: rgb(80,80,80);
}



/*dbc.Dropdownmenu class for navigation*/
.nav-dropdown-menu .dropdown-menu {
  border: 0px solid #444; /* or remove 'solid #444' entirely */
}

.nav-dropdown-menu .dropdown-item:hover,
.nav-dropdown-menu .dropdown-item:focus {
  background-color: rgb(232, 240, 254);
}

/*.dbc.Dropdownmenu for hub item menus*/
.hub-item-menu .dropdown-menu {
  border: 1px solid rgb(200, 200, 200); /* or remove 'solid #444' entirely */
  border-radius: 6px;
  font-size: 14px;
  color: rgb(180, 180, 180);
}

/* Class for the Hub Items menu toggle */
.hub-menu-dropdown-toggle {
  border: none;
  background: none;
  padding: 0;
  box-shadow: none; /* Removes focus ring if any */
  cursor: pointer;  /* Show pointer cursor on hover */
}

/* Hover/focus state for the same element */
.hub-menu-dropdown-toggle:hover,
.hub-menu-dropdown-toggle:focus {
  background-color: rgb(235, 235, 235);
}

/* Active state when user clicks (presses) on it */
.hub-menu-dropdown-toggle:active {
  background-color: rgb(210, 210, 210) !important;
}

/* Active state when user clicks (presses) on it */
.hub-menu-dropdown-toggle:disabled {
  color: rgb(255, 255, 255) !important;
  background-color: rgb(255, 255, 255) !important;
}

.hub-menu-dropdown-item {
  color: rgb(160, 160, 160);       /* text color */
  font-weight: 500;     /* bold text */
  font-size: 13px;      /* increase font size */
}

/* When hovering over the item */
.hub-menu-dropdown-item:hover {
  background-color: rgb(235, 235, 235);  /* custom hover background */
}

/* Active state when user clicks (presses) on it */
.hub-menu-dropdown-item:active {
  background-color: rgb(210, 210, 210) !important;
}

/* Active state when user clicks (presses) on it */
.hub-menu-dropdown-item:disabled {
  /*color: rgb(255, 255, 255) !important;*/
  background-color: rgb(255, 255, 255) !important;
}

/* Base styles for the custom input */
.hub-name-input {
  font-size: var(--input-size, 1.5rem); /* Default size, adjustable with size attribute */
  /*font-size: '40px' !important;*/
  /*color: var(--input-color, #000); /* Default text color */
  color: 'rgb(80, 80, 80)' !important;
  /*font-weight: var(--input-weight, normal); /* Default font weight */
  font-weight: 500 !important;
  /*border: '0px solid rgba(255, 255, 255, 0)' !important; /* No borders initially */
  border: none;
  outline: none !important; /* Remove default focus outline */
  transition: border 0.3s ease !important; /* Smooth transition for border on focus */
  background-color: transparent !important; /* Optional: Set transparent background */
}

/* Input on hover or click */
.hub-name-input:hover {
  border: 1px solid rgba(120, 120, 120); /* Border color on focus */
  border-radius: 4px; /* Optional: Add a border radius */
}

/* Input on focus or click */
.hub-name-input:focus {
  border: 1px solid var(--input-border-color, #007bff); /* Border color on focus */
  border-radius: 4px; /* Optional: Add a border radius */
}


/*Background color for tabs on hover*/
.tab:hover, .tab:focus {
  background-color: rgb(248,249,250)!important;
}


/*Define a class for the nav items when active or not*/
.nav-link.active {
  border-bottom: 3px solid rgb(0, 128, 255);
  color: rgb(29,53,84);
}

/*Define a class for the nav items when active or not this replaces the 
  active_button_style = {'color':cfx_utils.colors[0],'border-radius':'0px','backgroundColor':cfx_utils.colors[10], 'width':'100%'}*/
.nav-link-button.active {
  background-color: rgb(232,240,254);
  color: rgb(29,53,84);
  border-bottom: 0px solid rgb(255, 255, 255);
}

/* Style for non-active state */
.nav-link {
  color: rgb(29,53,84);
}

.not-active-navigation-link {
  border-bottom: 3px solid rgb(29,53,84);
}

/*Change the color of the pointer in tool tip https://community.plotly.com/t/dash-bootstrap-components-tooltip-color/60989 */
.tooltip-inner {
  background-color: rgb(0,60,113)
}

.bs-tooltip-top .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
    border-top-color: rgb(0,60,113);
}
.bs-tooltip-end .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {
    border-right-color: rgb(0,60,113);
}
.bs-tooltip-bottom .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
    border-bottom-color: rgb(0,60,113);
}
.bs-tooltip-start .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {
    border-left-color: rgb(0,60,113);
}

/*Bring the css from https://cdn.jsdelivr.net/npm/bootswatch@5.2.3/dist/cosmo/bootstrap.min.css*/
/* to make the drop down menu opn on the left of the menu*/
.dropdown-menu-end {
  --bs-position: end;
}
.dropdown-menu-end[data-bs-popper] {
  right: 0;
  left: auto;
}


/* making a button class for the buttons that have no border and an icon in them */
/* assets/style.css */
.hover-button:hover {
  background-color: rgb(232,240,254) !important;  /* Replace #NEW_COLOR with the color you want on hover */
}

.hover-button-clear-all:hover {
  background-color: rgb(225, 225, 225) !important;  /* Replace #NEW_COLOR with the color you want on hover */
}

.hover-button-save:hover {
  background-color: rgb(209, 231, 221) !important;  /* Replace #NEW_COLOR with the color you want on hover */
}

.hover-button-navigate:hover {
  background-color: rgb(209, 231, 221) !important;  /* Replace #NEW_COLOR with the color you want on hover */
}

.hover-button-delete:hover {
  background-color: rgb(248, 215, 218) !important;  /* Replace #NEW_COLOR with the color you want on hover */
}

/* dbc.Modal style */

.custom-modal .modal-dialog {
  width: 99vw !important; /* 99% of the viewport width */
  max-width: 99vw !important; /* Ensure it respects the full width */
  margin: auto !important; /* Center the modal */
}

.custom-modal .modal-content {
  height: 90vh !important; /* 90% of the viewport height */
  border-radius: 15px !important; /* Rounded corners */
  overflow: hidden !important; /* Ensure content doesn't overflow */
  background-color: white !important; /* White background for content */
}

/* Ensure nested modals are handled properly */
.modal-backdrop.show {
  z-index: 1040 !important; /* Increase z-index for backdrop */
}

.custom-modal .modal {
  z-index: 1050 !important; /* Ensure the modal is above the backdrop */
}


/* We ran into a problem where the leaflet maps inside a dbc.Tab wont render properly*/
/* We tried this solution but it didnt work https://stackoverflow.com/questions/75329708/dash-leaflet-not-rendering-when-inside-a-bootstrap-tab-container*/
/* So we are making the dcc.Tabs look the same as the dbc.Tabs*/
/* formatting dcc.tabs */
.tab_custom_container{
  margin-top: 1rem;
  padding: 0;
  width: 100%;
  border-top: 0.0px solid white !important;
  border-bottom: 0.5px solid rgb(200,200,200) !important;
}

.tab_custom {
  width: 15% !important; /*This is fixed and we need to go to calculated or label dependent*/
  /*margin-top: 1rem;*/
  text-align: center !important;
  background-color: transparent !important;
  color: rgb(4, 27, 114); /*text color of label*/
  /* border-top: white !important; */
  border-right: transparent !important;
  border-left: transparent !important;
  border-bottom: transparent !important;
  border-top: transparent !important;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  display: inline-block !important;
  align-items: center!important;
  justify-content: left !important;
  white-space: nowrap !important;/* Prevents text wrapping */
}

.tab_custom:hover {
  background-color: rgb(232,240,254) !important; /* Background color on hover */
}

.tab_custom_selected   {
  color: rgb(4, 27, 114) !important; /*text color of label*/
  /* border-top: transparent !important; */
  border-bottom: 3px solid rgb(0, 128, 255) !important;
}


/* formatting dbc.tabs */
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
  border-bottom: 3px solid rgb(0, 128, 255);
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
}

/* changing the hover style*/
.nav-tabs .nav-item .nav-link:not(.active):hover {
  background-color: rgb(232,240,254);
  border-top: none; 
  border-left: none;
  border-right: none;
}

/* making all labels in tabs bold*/
.nav-tabs .nav-link {
  color: rgb(4, 27, 114) !important;
}

/* Formatting dbc.Label*/
.form-label {
  font-weight: 500; /* Change font weight */
  color: rgb(130, 130, 130); /* Change font color */
}

/* Change font color in dropdown */
.Select-control, .Select-value, .Select-menu-outer {
    color: rgb(130, 130, 130); /* Change to your desired color */
}

/* Change font color of the selected value */
.Select--single > .Select-control .Select-value,
.Select-value-label {
    color: rgb(120, 120, 120) !important; /* Example: Change selected value color to green */
}

/* Change font color in dbc.Textarea */
.form-control {
  color: rgb(120, 120, 120) !important; /* Replace with your desired color */
}

/* Change border radius of the tooltip */
.tooltip-inner {
  border-radius: 4px !important;
}

/* Change color of the place holder for the dbc.Input */
.form-control::placeholder {
  color: rgb(160, 160, 160); /* Placeholder font color */
  opacity: 1; /* Full opacity */
}

/*Made a class for button to be shown under inputs or dropsdowns same as Form Text*/
.formtext-button {
  background-color: transparent;
  border: none;
  color: rgb(4, 27, 114); /* The color typically used in dbc.FormText */
  font-size: 0.8rem; /* Font size of dbc.FormText */
  padding: 0px 4px 0px 4px; /* Remove default padding */
  margin-top: 0.25rem; /* Margin similar to dbc.FormText */
  margin-bottom: 0.25rem; /* Margin similar to dbc.FormText */
  cursor: pointer;
}

.formtext-button:hover {
  color: rgb(4, 27, 114);
  background-color: rgb(232,240,254); /* Slightly darker shade for hover effect */ 
  /* text-decoration: underline; */
  border-radius: '10px';
}

/*Editable heading*/

.editable-heading {
  /*cursor: text;              /* Show text cursor on hover */
  cursor: pointer;  /* Moved from Python to CSS */
  /*font-weight: bold;         /* Looks like an H4 */
  /*font-size: 1.5rem;         /* Tweak as needed */
  /*color: cfx_utils.owner_dict[cfx_utils.app_owner]['active_button_color']; */
  color: rgb(4, 27, 114);
  font-weight: 350;
  transition: background 0.2s ease;
  padding: 4px;       /* Gives space so rounded corners are visible */
}

/* When the user hovers, show a light background */
.editable-heading:hover {
  background-color: #f2f2f2;
  border-radius: 4px; /* Adjust as desired */
  padding: 4px;       /* Gives space so rounded corners are visible */
}

.editable-heading:focus {
  outline: none;               /* Remove the default focus outline */
  border: 1px solid rgb(200, 200, 200);   /* Use solid instead of dashed */
  border-radius: 4px;          /* Optional: round corners */
  padding: 4px;                /* Helps the border stand out */
}

.quill-container {
  /*width: 600px;*/
  height: 300px;
  border: 1px solid rgb(200, 200, 200);
  border-radius: 4px; /* Set how round you want the corners */
  padding: 4px;
  margin-bottom: 20px;
  position: relative;
}

/* make sure Quill editors wrap long lines */
.ql-editor {
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
}

/* 
   1) Remove Quill’s individual borders on toolbar/container 
   2) Give the entire "ql-snow" block a single unified border + round corners 
   3) overflow: hidden ensures the toolbar and text area also have rounded corners
*/


/*Making ther quil wiht round corners*/
/* Toolbar: round ONLY the top corners */
.ql-toolbar.ql-snow {
  border: 1px solid #ccc !important;
  /*border-bottom: none !important;  /* So it merges cleanly with the container below */
  
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* Container: round ONLY the bottom corners */
.ql-container.ql-snow {
  border: 1px solid #ccc !important;
  border-top: none !important;     /* So it merges with the toolbar above */
  
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
}

/* For custom scrollbars */
.scrollable-div::-webkit-scrollbar {
  width: 6px; /* Width of the vertical scrollbar */
  height: 6px; /* Height of the horizontal scrollbar */
}

.scrollable-div::-webkit-scrollbar-track {
  background: #f1f1f1; /* Background of the scrollbar track */
  border-radius: 10px;
}

.scrollable-div::-webkit-scrollbar-thumb {
  background: rgb(187, 187, 187); /* Scrollbar color */
  border-radius: 10px;
}

.scrollable-div::-webkit-scrollbar-thumb:hover {
  background: rgb(187, 187, 187); /* Scrollbar color on hover */
}

/* Optional: Hide scrollbars on overflow (if needed) */
.scrollable-div {
  scrollbar-width: thin; /* For Firefox */
  scrollbar-color: rgb(187, 187, 187) #f1f1f1; /* Scrollbar thumb and track colors for Firefox */
}

.tasks-comments-container-div {
  scrollbar-width: thin; /* For Firefox */
  scrollbar-color: rgb(187, 187, 187) #f1f1f1; /* Scrollbar thumb and track colors for Firefox */
  overflow-y: scroll;
  height: calc(100vh - 470px);
  padding-right: 4px
}


/* Class to shape the images contained in bub/task/comments*/
.comment-box img {
  max-width: 70% !important; 
  height: auto !important;
}

/* Make the dbc.M odal corners round*/
/*Override the Bootstrap 5 Custom Property
  If Bootstrap is defining:*/
.modal-content {
  border-radius: var(--bs-modal-border-radius);
}

/*And you see --bs-modal-border-radius: var(--bs-border-radius-lg);, 
you can override that variable on the .modal-dialog for specific sizes. For example:*/

.modal-dialog.modal-sm {
  --bs-modal-border-radius: 4px !important;
}

.modal-dialog.modal-lg {
  --bs-modal-border-radius: 4px !important;
}

.modal-dialog.modal-xl {
  --bs-modal-border-radius: 4px !important;
}