.highcharts-title

{

  display: inline-block!important; 
  text-align: left!important;
}
 
.subtitles

  {
    margin-top: 0%;
  color: rgba(67, 67, 67, 0.79);
  font-size: 0.9em;
 
}
.charters {
  padding-right: 50px;
  height: 500px;
  width: auto;
  margin: 0 auto;
}
#libnebox {
  padding-right: 50px;
  height: 500px;
  width: auto;
  margin: 0 auto;
}
#containerx {
  padding-right: 50px;
  height: 500px;
  width: auto;
  margin: 0 auto;
}

.showhand {
  cursor: pointer;
}

#zones {
  width: 100%;
  margin: 0 auto;
}

#shares {
  width: 100%;
  margin: 0 auto;
  padding-left: 1.4rem;
  display: none;
}


#containerz {
  padding-right: 10px;
  height: 470px;
  width: auto;
  margin: 0 auto;
}

#containerb {
  padding-right: 10px;
  height: 560px;
  width: auto;
  margin: 0 auto;
}

#containerbcats {
  padding-right: 10px;
  height: 600px;
  width: auto;
  margin: 0 auto;
}

#containerbas {
  padding-right: 10px;
  height: 600px;
  width: auto;
  margin: 0 auto;
}

.innerleft {
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 8px;
}

.innerlmost {
  padding-left: 20px;
  padding-right: 0px;
 
}


.chartblue {
  font-weight: bold;
  display: block;
  margin-top: 8px;
  color: #4073af;
  font-size: 1.2rem;
}
.chartsmalltext {
  display: block;
  font-size: 100%;
  margin-top: 8px;
}
.displays {
  width: 100%;
}
.displays td {
  padding: 3px;
  font-size: 80%;
}
.displays th tr {
  padding: 3px;
  font-size: 90%;
}
tr:nth-child(even) {
  background-color: #f2f2f2;
}

#overlay {
  position: fixed;
  z-index: 99999;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.9);
  transition: 1s 0.4s;
}
#progress {
  height: 1px;
  background: #fff;
  position: absolute;
  width: 0; /* will be increased by JS */
  top: 50%;
}
#progstat {
  font-size: 0.7em;
  letter-spacing: 3px;
  position: absolute;
  top: 50%;
  margin-top: -40px;
  width: 100%;
  text-align: center;
  color: #fff;
}

/*
.ecl-site-header__banner:nth-child(2)

{
display: none!important;
}
*/

.wtWaiting {
  display: none !important;
}

.crpto {
  display: none !important;
}

.hdn {
  visibility: hidden;
}

th button {
  background-color: #f2f5f9;
  border: none;
  cursor: pointer;
  display: block;
  font: inherit;
  color: #4073af;
  height: 100%;
  margin: 0;
  min-width: max-content;
  padding: 0.5rem 1rem;
  position: relative;
  text-align: left;
  width: 100%;
}

th button::after {
  position: absolute;
  right: 0.5rem;
}

th button[data-dir="asc"]::after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpolygon points='0, 0 8,0 4,8 8' fill='%23818688'/%3E%3C/svg%3E");
}

th button[data-dir="desc"]::after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpolygon points='4 0,8 8,0 8' fill='%23818688'/%3E%3C/svg%3E");
}

.b-tab {
  display: none;
}

.b-tab.active {
  display: block;
}

#table {
  min-height: 470px;
}


.fler

{

  flex: 1;
  border: 1px solid #000;
}
 

hr.filterhr {
  border: none;
  border-top: 1px solid #000; /* This sets the color and style of the line */
  margin: 1.2em 0 0; /* This sets the margin-top to 1em */
}



/* Ensure .zecl-row behaves as a flex container and add right padding */
.zecl-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  padding-right: 6px; /* Adjust as needed */
}

/* Adjust the main content column */
.zecl-col-l-10 {
  flex: 0 0 calc(97% - 10px);
  max-width: calc(97% - 10px);
  box-sizing: border-box;
}

/* Adjust responsive styles */
@media (max-width: 564px) {
  .zecl-row {
    padding-right: 0; /* Remove right padding on smaller screens */
  }
  .zecl-col-l-10, .clans {
    width: 40px; /* Fix width to 3% */
    max-width: 100%;
  }
}

.clans {
  width: 40px; /* Fix width to 3% */
  margin-top: 8.5rem;
  background-color: #e7e8e9;
  box-sizing: border-box;
  border-left: 1px solid #d4d4d4;
  border-right: 1px solid #d4d4d4;
  justify-content: space-between;
}


 
 

 
.responsive-container {
  padding-left: 0%;
  padding-right: 0%;
}

 
@media (max-width: 1024px) {
  .responsive-container {
    padding-left: 1%;
    padding-right: 1%;
  }
}

 
@media (max-width: 600px) {
  .responsive-container {
    padding-left: 2%;
    padding-right: 2%;
  }
}


 


#tabsx {
  width: 100%;
  height: 100%; 
}

.tab-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}

/* Add focus styles for both tabs and icon-buttons */
.tab:focus,
.icon-button:focus {
  outline: none; /* Remove default outline */
  border: 2px solid #004494; /* EU blue color */
  border-radius: 4px; /* Rounded corners for the focus border */
  box-shadow: 0 0 0 2px rgba(0, 68, 148, 0.2); /* Subtle glow effect */
}

/* Remove default button styles from icon-button */
.icon-button {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
}

/* Make sure the focus state is only visible during keyboard navigation */
.tab:focus:not(:focus-visible),
.icon-button:focus:not(:focus-visible) {
  outline: none;
  border: none;
  box-shadow: none;
}

hr.engraved {
  border: 0;
  outline: none;
  height: 2px;
  background-color: transparent;
  box-shadow: 0 1px 1px rgba(255, 255, 255, 0.8), 0 -1px 1px rgba(0, 0, 0, 0.8);
  width: 90%;
  margin: 5px auto;
}

.tab {
  cursor: pointer;
  padding: 4px; /* Add some padding to make the focus border have space */
}

.tab.active svg use {
  border: 1px dotted silver;
  fill: #004494;
}

.tab svg use {
  fill: #919191;
}

.tab-content {
  display: none;
  clear: both; 
}

.tab-content.active {
  display: block;
  clear: both; 
}





.float-clear {
  clear: both;
}


.float-clear-height {
height: 0.5rem;
}


.blue-color use {
 fill: #00f7f7;   
  cursor: pointer;
 
}

.white-color use {
 fill: #919191; /* Change the fill color to blue */
}

/* Assuming the div directly contains the .white-color class */
div > .white-color {
  cursor: pointer;
}


.iconleft

{
  margin-bottom: 2rem!important;
  cursor: pointer;
  margin-left: 6px!important;
}

.iconbottom {
  display: inline-block; /* Ensure the SVG behaves like text */
  vertical-align: middle; /* Aligns the icon with the middle of the text */
  transform: translateY(2px); /* Moves the icon 10 pixels lower relative to its current position */
}

#image-preview {
  display: block; /* Ensure it's not hidden */
}

#image-preview img {
  max-width: 50%; /* Make sure the image fits within its container */
  height: auto; /* Maintain aspect ratio */
}

 


/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place even when the window is scrolled */
  z-index: 2147483647; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0, 0, 0, 0.674); /* Black w/ opacity */
  backdrop-filter: blur(8px);
  outline: none; /* Prevent focus outline when clicking on modal background */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: 10% auto; /* 15% from the top and centered */
  padding: 10px;
  border: 1px solid #888;
  width: 50%; /* Could be more or less, depending on screen size */
  position: relative;
  top: 10%;
  transform: translateY(-10%);
  outline: none; /* Prevent focus outline when tabbing through the modal */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  outline: none; /* Ensure the close button can be focused */
}

/* Close button hover/focus */
.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
}

/* Accessibility improvements */
.modal-content:focus {
  outline: 2px solid #005f9e; /* Provide a visible focus outline when tabbing */
}





.ecl-tabs {
  margin: 0 0 1rem!important;
  padding: 0;
  position: relative;
}

 

/* CSS */
.button-16 {
  background-color: #f8f9fa;
  border: 1px solid #f8f9fa;
  border-radius: 0px;
  color: #3c4043;
  cursor: pointer;
  font-family: arial,sans-serif;
  font-size: 12px;
  height: 30px;
  line-height: 22px;
  min-width: 44px;
  padding: 0 12px;
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: pre;
}

.button-16:hover {
  border-color: #dadce0;
 
 
}


#loadbar {
  margin-top: 200px;
    /* Any other styles the inner div has */
  }
  

/* Make the spinner overlay occupy the whole screen */
.spinner-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(223, 223, 223, 0.5);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 1;
  transition: opacity 200ms ease;
}

/* Center the SVG and text inside the spinner */
.spinners {
  display: flex;
  flex-direction: column; /* Stack the SVG and text vertically */
  justify-content: center;
  align-items: center;
}

/* Style for the SVG spinner */
.ecl-spinner__loader {
  width: 50px;  /* Adjust size as needed */
  height: 50px;
  animation: rotate 2s linear infinite; /* Rotate the spinner */
}

/* Circle within the SVG spinner */
.ecl-spinner__circle {
  stroke: #fff;  /* Set stroke color */
  stroke-dasharray: 90, 150;  /* To create the spinning dash effect */
  stroke-dashoffset: 0;
  animation: dash 1.5s ease-in-out infinite; /* Dash animation for the circle */
}

/* Loading text */
.ecl-spinner__text {
  margin-top: 10px; /* Space between the SVG and the text */
  color: #fff;
  font-size: 14px;
  text-align: center;
}

/* Rotate animation for the SVG */
@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

/* Dash animation for the circle stroke */
@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}



#spinner-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

 
.spinner {
  animation: rotate 2s linear infinite;
}

.path {
  stroke-dasharray: 187;
  stroke-dashoffset: 0;
  transform-origin: center;
  animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
}

@keyframes rotate {
  100% {
      transform: rotate(360deg);
  }
}

@keyframes dash {
  0% {
      stroke-dashoffset: 187;
  }
  50% {
      stroke-dashoffset: 46.75;
      transform: rotate(135deg);
  }
  100% {
      stroke-dashoffset: 187;
      transform: rotate(450deg);
  }
}

@keyframes color {
  100%, 0% {
      stroke: #3d3d3d;
  }
  40% {
      stroke: #5d5d5d;
  }
  66% {
      stroke: #7d7d7d;
  }
  80%, 90% {
      stroke: #a0a0a0;
  }
}

#spinner text {
  font-family: Arial, sans-serif;
  fill: #3d3d3d;
}


 
 
.no-bullets li {
  list-style-type: none; /* This removes the bullets */
  margin-bottom: 20px;   /* This adds space between the list items */
}

/* If you also want to remove the default padding on the ul */
.no-bullets {
  padding-left: 0;
}
 
.no-bullets li:not(:last-child) {
  margin-bottom: 20px;
}



.cpr

{
  border-top: 1px solid black; /* Change the color or style as needed */
  margin-top: 10px; /* Adjust the margin as needed */
  padding-top: 10px; /* Adjust the padding as needed */
  display: block;
 
  color: #003fab;
}



.tooltip {
  position: absolute;
  z-index: 999;
  background-color: #ffffff;
  color: #051036;
  padding: 5px;
  border: 1px solid #546FA6 ;
  border-radius: 2px;
  display: none;
  /* Adjust positioning */
  transform: translateX(-100%);
}

.tooltip-trigger:hover + .tooltip {
  display: block;
}
.infochartbg

{
  font: normal 1.45rem arial,sans-serif !important;
  font-weight: 700;
  display: inline-block;
  float: left;
  color: #404040;
}


.infochart {
  font: normal 1.05rem arial,sans-serif !important;
  font-weight: 400;
  display: block;  /* Change from inline-block to block */
  clear: left;     /* Add clear left */
  color: #404040;
}


.containerinfo{
  display: flex;
  flex-direction: column;
  gap: 1rem; /* Controls the space between the elements */
}

#infotable {
  font-size: 2rem;
}

#infotable-sub {
  font-size: 1.5rem;
}


.switch-container {
  display: flex;
  visibility: hidden;
  margin-bottom: 0rem;
  margin-left:0px;
  margin-right:10px;
  margin-top: -2.4rem;
 
}

 
 

.label {
  padding-left: 6px;
  padding-right: 6px;
  margin-top: 16px;
  font-size: 85%;
 
  color: rgb(0, 0, 0);
}

.switch {
  position: relative;
  margin-top: 15px;
  margin-right: 26px;
  display: inline-block;
  width: 40px; /* Adjust width */
  height: 20px; /* Adjust height */
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ffffff;
  border: 1px solid #004494;
  transition: .4s;
  border-radius: 15px; /* Adjust border radius */
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: #004494; /* Default circle color */
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #004494;
  border: 1px solid white;
}

/* Add focus styles for both keyboard and mouse interaction */
input:focus + .slider,
input:active + .slider {
  box-shadow: 0 0 1px #004494;
}

input:checked + .slider:before {
  background-color: white;
  transform: translateX(20px);
}


/* Base focus styles for all interactions */
input:focus + .slider {
  box-shadow: 0 0 1px #004494;
}

/* Enhanced focus styles for keyboard navigation */
input:focus-visible + .slider {
  outline: 2px solid #b3c0f0;
  outline-offset: 2px;
  /* Enhanced glowing effect for keyboard users */
  box-shadow: 0 0 5px #3860ed, 
              0 0 10px rgba(159, 225, 233, 0.4), 
              0 0 15px rgba(20, 111, 128, 0.2);
}

/* Simpler focus style for mouse interactions */
input:focus:not(:focus-visible) + .slider {
  /* Keep a subtle indication for mouse focus */
  box-shadow: 0 0 3px #004494;
  outline: none;
}

/* Fallback for browsers that don't support :focus-visible */
@supports not selector(:focus-visible) {
  .switch input:focus + .slider {
    outline: 2px solid #b3c0f0;
    outline-offset: 2px;
    box-shadow: 0 0 3px #004494;
  }
} 




/* Styles for the data table */
.data-table {
  width: 98%!important; /* Adjusts the width to account for the margin */
  border-collapse: collapse; /* Collapses the border between table cells */
  
}

/* Styles for the table headers and cells */
.data-table th,
.data-table td {
  text-align: left; /* Aligns the text to the left in headers and cells */
  padding: 8px; /* Adds some padding inside cells for better readability */
}

/* Additional styling for zebra striping (alternating row background colors) */
.data-table tr:nth-child(odd) {
  background-color: #fff; /* Lighter shade for odd rows */
}

.data-table tr:nth-child(even) {
  background-color: #f5f5f5; /* Slightly darker shade for even rows */
}

/* Style for the header row */
.ecl-table__head {
  background-color: #ddd; /* Adds a background color to the header row */
  font-weight: bold; /* Makes the header text bold */
}

/* Ensure buttons in headers are styled consistently */
.data-table .ecl-table__header button {
  background: none;
  border: none;
  text-align: left; /* Aligns button text to the left */
  width: 100%;
  padding: 0;
  font-weight: bold; /* Optional: makes the button text bold */
}

/* Adjustments for responsiveness or specific styling preferences might be needed */



.form_bold

{

  font-weight: bold;
  padding-bottom: 15px !important;
  padding-top: 15px !important;
  display: block;
}
 


 
.ecl-popover .ecl-button__container .ecl-icon.ecl-icon--m.ecl-button__icon {
  transform: scale(0.75);
}

.ecl-icon--light-grey {
  fill: #979797!important;
}

.form_bold2 {
  display: flex;
  align-items: center;
  font-weight: bold;
 
  width: 100%;
}

.ecl-button__container {
  display: flex;
  align-items: center;
}


.label-group {
  display: flex;
  align-items: center;
  gap: 0.5rem; 
}


.multiselect-wrapper {
  position: relative;
  width: 100%;
  max-width: 440px; /* Match this to the width of your other select elements */
  box-sizing: border-box;
 
}

.native-select {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.multiselect-container {
  position: relative;
  width: 100%;
  font-family: Arial, sans-serif;
}

 

.multiselect-button {
  width: 100%;
  padding: 8px 35px 8px 12px;
  background: white;
  border: 1px solid #546fa6; /* Changed to 2px by default */
  border-radius: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 16px;
  color: #404040;
  position: relative;
}

.multiselect-button:focus {
  outline: none;
  border-color: #3860ed;
}

.icon-container {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
}

.icon-container svg {
  width: 20px;   
  height: 20px; 
  transition: transform 0.2s ease;
  transform: rotate(180deg);
}

.multiselect-button.open .icon-container svg {
  transform: rotate(0deg);
}

.select-all-text{

  margin-top: 2PX;
  margin-bottom: 4PX;
 
}

.multiselect-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: white;
  border: 1px solid #707070;
  border-radius: 0;
  z-index: 1000;
  display: none;
}

.multiselect-dropdown.show {
  display: block;
}

.search-container {
  padding: 8px 16px;
  border-bottom: 1px solid #eee;
}

.search-box {
  width: 100%;
  box-sizing: border-box;  /* This ensures padding and border are included in width */
  padding: 8px;
  border: 1px solid #707070;
  border-radius: 0;
  font-size: 14px;
  color: #404040;
  margin: 0;
}

.search-box {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #707070;
  border-radius: 0;
  font-size: 14px;
  color: #404040;
}

.search-box::placeholder {
  color: #757575;
}

.select-all-container {
  
  margin-bottom: 4PX Solid #eee;;
}

.select-all-container .checkbox-label {
  padding: 8px 16px;  /* Same padding as other options */
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 8px 16px;
  color: #404040;
}

.checkbox-input {
  width: 18px;
  height: 18px;
  margin: 0;
  border: 2px solid #3860ed;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  position: relative;
}

.checkbox-input:checked {
  background-color: #3860ed;
}

.checkbox-input:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.checkbox-input:disabled {
  background-color: #eee;
  border-color: #ccc;
  cursor: not-allowed;
}

.checkbox-label.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.options-container {
  max-height: 300px;
  overflow-y: auto;
}

.action-buttons {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.apply-button {
  background: #3860ed;
  color: white;
  border: none;
  padding: 12px;
  border-radius: 0;
  cursor: pointer;
  font-weight: bold;
  width: 100%;
}

.clear-button {
  background: white;
  color: #3860ed;
  border: 1px solid #3860ed;
  padding: 12px;
  border-radius: 0;
  cursor: pointer;
  width: 100%;
}


.irs--round .irs-line {
  background-color: #e0e0e0;
}

.irs--round .irs-bar {
  background-color: #0073e6 !important;
}

.irs--round .irs-handle {
  background-color: #0073e6 !important;
  border: 3px solid #0073e6 !important;
  box-shadow: 0 2px 4px rgba(0, 115, 230, 0.3) !important;
}

.irs--round .irs-handle:hover {
  background-color: #005bb5 !important;
  border-color: #005bb5 !important;
}

.irs--round .irs-handle > i:first-child {
  background-color: #fff !important;
}

/* Year inputs styling to match ECL selects */
.year-slider-container {
  width: 100%;
}

.year-inputs-container {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
  gap: 10px;
}

.year-input-wrapper {
  flex: 1;
  position: relative;
}

.year-input-label {
  display: block;
  font-size: 12px;
  margin-bottom: 5px;
  color: #666;
  font-weight: 400;
}

.year-input {
  width: 100% !important;
  height: auto !important;
  padding: 0.75rem 1rem !important;
  border: 2px solid #d9d9d9 !important;
  border-radius: 0 !important;
  background-color: #fff !important;
  font-family: inherit !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
  text-align: center;
  -webkit-appearance: none;
  -moz-appearance: textfield;
}

.year-input:focus {
  outline: 3px solid #ffd617 !important;
  outline-offset: 0 !important;
  border-color: #0e47cb !important;
  box-shadow: none !important;
}

.year-input:hover {
  border-color: #404040 !important;
}

/* Remove number input arrows */
.year-input::-webkit-outer-spin-button,
.year-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


.table-redux {
width: 99%!important;
  border-collapse: collapse!important; /* Optional: makes borders cleaner */
}


.table-redux th,
.table-redux td {
  font-size: 72%;
  padding: 3px 5px; /* Smaller padding */
  margin: 2px;        /* Remove margin */
}