/*
Used to keep page content between header and footer
*/
body {
    min-height: 75rem;
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
}

/* 
Used in page header
*/

.form-control-dark {
    border-color: var(--bs-gray);
}
.form-control-dark:focus {
    border-color: #fff;
}
.form-control-dark::placeholder {
    color: #fff;
}

.form-control-dark::-webkit-search-cancel-button {
    /* 
    Replace its default appearance
    -webkit-appearance: none;  
    height: 10px;
    width: 10px;
    background: green;
    */
    /*
    Make it green
    filter: invert(100%) sepia(100%) saturate(500%) hue-rotate(90deg);
    */
    /*
    Make it white
    */
    filter: brightness(0) invert(1);
}

/*
Used in alerts
*/

.alert-overlay {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 40%;
    z-index: 1055; /* higher than Bootstrap modals (1040) */
    border-radius: 0.25rem;
}

/*
Used in tooltips
    --bs-tooltip-bg: var(--bs-primary-bg-subtle);
    --bs-tooltip-color: var(--bs-black);
*/

.custom-tooltip {
    --bs-tooltip-bg: RoyalBlue;
    --bs-tooltip-color: White;
}

/*
Used for colored tags for news, tools, etc.
*/
.badge {
    margin-right: 5px;
    padding: 0.5em 0.75em;
    font-weight: normal;
}

/*
User inside of badges to show link-light without underline
*/
.link-light {
    text-decoration: none;
}


/*
Used for D3 tree nodes, links, etc.
*/
.node {
    cursor: pointer;
}

.node text {
    font: 12px sans-serif;
    /*transform: translateX(-8px);*/
}

.node circle {
    fill: #fff;
    stroke: LightSteelBlue;
    stroke-width: 2px;
}

.node.highlight circle {
    fill: #fff;
    stroke: dodgerblue;
    stroke-width: 2px;
}

.node.highlight text {
    /*font-weight: bold;*/
    fill: dodgerblue;
}

/*
Used for small icon buttons mostly for model items
*/
.bi-pencil-square:hover {
    color: dodgerblue;
}

.bi-trash:hover {
    color: crimson;
}

/*
Used for D3 chart, bars, etc.
*/

.hr-bar {
    fill: steelblue;
}
.hr-bar:hover {
    fill: orange;
}

.hr-gr-bar {
    fill-opacity: 0.7;
}

.axis-label {
    font-size: 14px;
    fill: black;
}
.tick text {
    white-space: pre-line; /* Allow text to wrap */
}
.name-label {
    font-size: 12px;
    fill: white;
}
.value-label {
    font-size: 12px;
    fill: black;
}
.legend-label {
    font-size: 14px;
}

/* Layout container for the chart and y-axis */
.sc-chart-wrapper {
    display: flex;
    position: relative;
}

/* Chart content should scroll horizontally */
.sc-vr-chart-content {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-grow: 1;
}

/* Chart content should scroll vertically */
.sc-hr-chart-content {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex-grow: 1;
}

/* Make y-axis sticky to keep it fixed while scrolling */
.sc-y-axis-container {
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: white; /* Ensure background covers behind the chart */
    margin-right: -1px; /* Adjust for border overlap */
}

.sc-x-axis-container {
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: white; /* Ensure background covers behind the chart */
    margin-right: -1px; /* Adjust for border overlap */
}


/* Styling for the legend */
.sc-chart-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    margin-top: 20px;
    padding: 10px;
}

.sc-chart-legend-item {
    display: flex;
    align-items: center;
    margin-right: 10px;
    margin-bottom: 10px;
}

.sc-chart-legend-color {
    width: 18px;
    height: 18px;
    margin-right: 8px;
}

/* Styling for modal window error fields */
#errorAlert {
    display: none;
}
.invalid-feedback {
    display: block;
    width: 100%;
}

/* Data table style */
.table-data {
    max-height: 600px;
    overflow-y: auto;
}

/* Resizable sidebar drag handle */
.resize-handle {
    width: 4px;
    cursor: col-resize;
    background-color: transparent;
    transition: background-color 0.2s;
    flex-shrink: 0;
    align-self: stretch;
    z-index: 102;
}
.resize-handle:hover,
.resize-handle.active {
    background-color: #0d6efd;
}
body.resizing {
    user-select: none;
    -webkit-user-select: none;
    cursor: col-resize !important;
}