/*
    CSS overrides for Cumulus UI
    Last modified: 2025/11/21 10:28:53
*/

body {
    padding-top: 60px;
}

.top-buffer { margin-top:40px; }

.dropdown-menu { background-color: #222222;}
.dropdown-menu>li>a { color: #FFFFFF}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { color: #000000}

.datepicker.dropdown-menu { background-color: #dddddd;}

/* Increase navigation menu contrast */
.navbar-inverse .navbar-nav>li>a {
    color: #28e1ff;
}

.navbar-inverse .navbar-nav>li>a {
    color: #28e1ff;
}

.navbar-inverse .navbar-nav .open .dropdown-menu>a {
    color: #28e1ff;
}
.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a {
    color: #3fff3c;
    background-color: #080808;
}

.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover {
    color: #3fff3c;
    background-color: #080808;
}

.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover {
    color: #3fff3c;
    background-color: #080808;
}
/* End increase navigation menu contrast */


/* Bootstrap/Alpaca overrides */
.help-block {
    font-size: 13px !important;
    padding-left: 20px !important;
    color: #00005099 !important;
    font-style: italic;
    font-weight: 600;
}
.glyphicon-info-sign {
    color: #00005099 !important;
}

.alpaca-field {
    color: #222;
}

.alpaca-field .alpaca-invalid {
    color:red;
}

.alpaca-message{
    color: red !important;
    font-size: 14px !important;
}

.hideme {
    visibility: hidden;
    width: 0px;
    height: 0px;
    display: flex;
}
.has-error .control-label,
.has-error .radio,
.has-error .checkbox,
.has-error .radio-inline,
.has-error .checkbox-inline,
.has-error.radio label,
.has-error.checkbox label,
.has-error.radio-inline label,
.has-error.checkbox-inline label,
.has-error .form-control,
.has-error .form-control:focus,
.has-error .input-group-addon {
    color: #ff0500;
    border-color: #ca2e2b;
}

/* 	----------------------------------------
 * 	ChartJS stuff
 * 	---------------------------------------*/

#chartcontainer  {
	height: 600px;
	width: 100%;
	margin-top:16px;
	margin-bottom: 16px;
	background: #fff;
	position: relative;
	display: flex;
	flex-direction: column;
}
.chart-buttons {
	height: 25px;
	font-size: 12px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.chart-buttons button {
	margin: 0 0 0 5px;
	height: 25px;
	font-size: 12px;
	font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', 'Geneva', 'Verdana', 'sans-serif';
	flex: 0 1 auto;
}

.chart-buttons-column {
	display: flex;
}

.mainChartContainer {
	position: relative;
	flex: 1 1 auto;
    margin: 5px;
}

.navChartContainer {
	height: 90px;
	margin-top: 10px;
	position: relative;
	flex: 0 1 auto;
}

#navChart {
	touch-action: none;
}

.chartDescription {
	color: white;
}

.graphs-width {
	max-width:1250px;
	margin: auto
}

@media (max-width: 650px) {
	figure { margin-left: 0; margin-right: 0 }
	.w3-panel { padding-left: 5px; padding-right: 5px }
	.w3-col.s12 { padding-left: 0; padding-right: 0; }
}

.spinner-container {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: #adadad;
}

/* Define styles for the spinner */
.spinner {
    display: inline-block;
    aspect-ratio: 1 / 1;            /* keep it square */
    padding: 3rem;               /* controls overall size */
    box-sizing: border-box;         /* include border/padding in layout */
    border: 7px solid #968f8f;
    border-radius: 50%;
    border-top-color: blue;         /* Color for the spinning part */
    animation: spin 2s linear infinite;
}

/* Define keyframe animation for spinning */
@keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}