.dashAnalysis {
	width: 100%;
	height: 400px;
}

#analysisMOMCobalt td select,
#varMOMCobalt td select{
    text-overflow: ellipsis;
    max-width: 85%;
}

/* in-page navbar */
.nav-pills a{
    color: black;
    text-align: center;
    font-size: 17px;
    border-radius: 15px;
    background-color: #ddd;
    padding: 14px;
    padding-left: 30px;
    padding-right: 30px;
    margin: 5px;
    margin-right: 10px;
}
.nav-pills .nav-item.active a{
	background-color: #555 !important;
	color: white;
}
.nav-pills .nav-item a:hover{
	background-color: #ccc;
color: black;
}

/* Adjust dashboard options */
@media (max-width: 768px) {
	.tsOptions {
		width: 100%;
	}
}


/* style of the div under the minitab */
div.view {
	padding: 20px;
	border: 2px solid #ddd;
	border-radius: 0 0 10px 10px;
	width: 100%;
    height: 100%;
}

.hidden {
	display: none;
}

.tablink {
	background-color: #bcbaba;
	color: white;
	float: left;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 14px 16px;
	font-size: 17px;
	width: 100%;
  }
  
.tablink:hover {
	background-color: #525151;
}

/* button.clicked{
	background-color: #a450ae;
} */

.alignRight {
	text-align:center;
}

#momCobaltMap {
	position: relative;
	width: 100%;
	/* text-align: center; */
	margin: auto;
}

#momCobaltIFrame {
	/* position: relative; */
	/* margin: auto; */
    width: 100%; 
    height: 400px; 
    border: 5px solid #d5d7d7;
	border-radius: 1%;
}


.loading-spinner {
	display: none;
    /* position: relative; */
    /* left: 50%; */
    transform: translate(-50%, -50%);
    border: 10px solid rgba(0, 0, 0, 0.1);
    border-top: 10px solid #3498db;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    animation: spin 1.5s linear infinite;
    z-index: 5;
    margin-left: 50%;
    margin-top: 15%;
}



@keyframes spin {
	0% { transform: translate(-50%, -50%) rotate(0deg); }
	100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* .dashPlotlyHalf {
	width: 27vw; 
	height: 50vh; 
	position: relative;
	z-index: 1;
} */

/* .dashPlotly20 {
	width: 20vw; 
	height: 50vh; 
	position: relative;
	z-index: 1;
} */

/* Adjust font size for smaller screens */
/* @media (max-width: 768px) {
	.dashPlotly {
		width: 80vw; 
	    height: 50vh;
	}
} */

.workingTop {
    margin-bottom: 5px;
	width:100%;
	background-color:black;
	border-radius:20px;
	border:1px solid purple;
	font-size:20px;
	text-align:center;
	padding:10px;
	display: inline-block;
	/* padding-left:30px; */
	color:white;
	z-index: 1000;
	white-space: nowrap;
}

.errorTop {
	/* top:14rem;
	left:10rem; */
    margin-bottom: 5px;
	width:100%;
	background-color:white;
	border-radius:20px;
	border:1px solid purple;
	font-size:20px;
	text-align:center;
	padding:10px;
	display: inline-block;
	/* padding-left:30px; */
	color:black;
	z-index: 1000;
	white-space: nowrap;
}

.whiteTop {
    margin-bottom: 5px;
	width:100%;
    height:auto;
	background-color:white;
	border-radius:20px;
	border:1px solid white;
	font-size:20px;
	text-align:center;
	padding:10px;
	display: inline-block;
	/* padding-left:30px; */
	color:white;
	z-index: 1000;
	white-space: nowrap;
}

.slidecontainer {
	width: 100%;
}
  
.slider {
	-webkit-appearance: none;
	width: 100%;
	height: 10px;
	background: purple;
	outline: none;
	opacity: 0.7;
	-webkit-transition: .2s;
	transition: opacity .2s;
	border-radius:20px;
	border:1px solid purple;
}

.slider:hover {
	opacity: 1;
}

.slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 8px;
	height: 25px;
	background: #1704aa;
	cursor: pointer;
	border-radius:20px;
	border:1px solid purple;
}

.slider::-moz-range-thumb {
	width: 8px;
	height: 25px;
	background: #1704aa;
	cursor: pointer;
	border-radius:20px;
	border:1px solid purple;
}

.ticks {
	display: flex;
	justify-content: space-between;
	width: 100%;
	margin-top: 10px;
}
  
.ticks span {
	flex: 1;
	text-align: center;
	padding: 0.2px;
	display: inline-block;
	transform: rotate(80deg); /* You can adjust the degree of rotation */
}

.sliderTitle {
	width: 100%;
	text-align: center;
	font-size: 1.3em;
}

.alignRight {
	text-align: right;
}

img#modalCbarFig {
	width: 100%;
}

.btn-custom-cir {
	border-radius: 100%;
	border: 0;
	padding: 0;
	margin: 0;
	width: 18px;
	height: 18px;
	font-size: 12px;
}

select {
	text-overflow: ellipsis;
}