/* Style for dropdown container */
.dash-dropdown .Select-control {
    background-color: #343a40 !important; /* Dark background */
    border: 1px solid #495057 !important; /* Border matching Darkly */
    color: white !important;              /* White text */
    border-radius: 5px !important;       /* Rounded corners */
}

/* Style for dropdown menu */
.dash-dropdown .Select-menu-outer {
    background-color: #343a40 !important; /* Dark background for options */
    color: white !important;              /* White text */
}

/* Ensure the text color for the selected value when inactive */
.dash-dropdown .Select.has-value.Select--single > .Select-control .Select-value .Select-value-label {
    color: white !important;               /* White text for the selected value */
}

/* Style for dropdown options */
.dash-dropdown .Select-option {
    background-color: #343a40 !important; /* Option background */
    color: white !important;              /* Option text */
}

/* Style for selected option */
.dash-dropdown .Select-option.is-selected {
    background-color: #495057 !important; /* Highlight selected option */
    color: white !important;               /* Ensure selected text is visible */
}

/* Style for the selected value in the dropdown */
.dash-dropdown .Select-control .Select-value {
    color: white !important;               /* Make sure selected value is white */
}

/* Style for the selected value when dropdown is inactive */
.dash-dropdown .Select-control .Select-value {
    color: white !important;               /* Ensure selected value is white */
}

/* Style for placeholder text */
.dash-dropdown .Select-placeholder {
    color: #aab8c2 !important;             /* Lighter gray for placeholder text */
}

/* Style on hover */
.dash-dropdown .Select-option:hover {
    background-color: #3e444a !important; /* Darker background on hover */
    color: white !important;               /* White text on hover */
}


.rounded-icon {
    display: inline-block;
    border: 2px solid white; /* Border color */
    border-radius: 50%; /* Makes it circular */
    padding: 0px; /* Space around the icon */
    margin-left: 2px; /* Space between icons */
}

.dropdown-flex {
    display: flex;
    gap: 0; /* Remove space between dropdowns */
}

.hidden-dropdown {
    display: none !important;
    visibility: hidden !important;
    margin: 0 !important;
    width: 0 !important;
}

.plotly-header {
    font-size: "16px";
    color: white;
    margin-bottom: 1rem; /* Equivalent to Bootstrap's `mb-4` */
    text-align: left;
}

.custom-dropdown {
    width: 150px; /* Adjust the width as needed */
}


.square-icon {
    display: inline-block;
    width: 16px; 
    height: 16px; 
    text-align: center;
    line-height: 18px; 
    border-radius: 0px; 
    font-size: 14px;
    margin: 2px 0 0 0; 
    vertical-align: middle;
}

.win { background-color: green; color: white; }
.loss { background-color: red; color: white; }
.draw { background-color: darkblue; color: white; }

.ot-win { background-color: darkblue; color: white;}
.ot-loss { background-color: darkblue; color: white; }



p {
    margin-bottom: 0;
    margin-top: 2px;
    text-align : left;
    vertical-align: middle;
 }


 .nav-link {
    padding: 6px 8px !important; /* override Bootstrap */
    font-size: 0.9rem; /* optional */
}


:root { 
  --nav-h: 56px; 
  --sb-w: 240px; 
  --sb-gap: 16px; /* extra gap between sidebar and content */
}

#sidebar {
  position: fixed;
  top: var(--nav-h);
  left: 0;
  width: var(--sb-w);
  height: calc(100vh - var(--nav-h));
  background: #1b1f24;
  z-index: 1000;
  overflow-y: auto;
}

#main-content {
  padding-top: calc(var(--nav-h) + 8px);
  padding-left: 230px;
  padding-right: 8px;
  width: 100%;
  box-sizing: border-box;
}

html, body { 
  overflow-x: hidden; 
}