@font-face {
    font-family: 'Linux Libertine';
    src: url('LinLibertine_R.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }
  body {
    font-family: 'Linux Libertine', serif;
    color: #111;
  }

section {
	padding-top: 100px;
    padding-left: 50px;
    padding-right: 50px;
	padding-bottom: 100px;
}

section h2 {
    font-size: 3em;
    width: 100%;
}

h2 a:hover {
  text-decoration: none;
}

section h3 {
	width: 100%
}

section .section-title {
	margin-bottom: 30px;
}

h4 {
	font-weight: 700;
	font-size: 1.2vw;
}
p {
	text-align: justify;
	font-size: 20px;
	font-weight: 300;
}

hr {
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
}
label, span { /* Disable text selection */
	-moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


/* Custom navbar style */
.navbar-brand {
	font-size: 200%;
}
.navbar-nav {
	margin-right: -20px;
}
ul > .nav-item{
    letter-spacing: 1px;
    padding-left: 5px;
    padding-right: 5px;
    text-transform: uppercase;
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 700;
    font-size: 1.1em;
}

/* Custom jumbotron style */
.jumbotron {
	margin-bottom: 0px;
	padding-bottom: 0px;
	padding-top: 20px;
    margin-left: -40px;
}

.bubble-click{
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  position: absolute;
  z-index: 2;
}

.bubble {
  /*z-index : 2;*/
  width: 100%;
  border-radius: 50%;
  margin-left:0%;
  position:relative;
  line-height: 0;
  /*background: linear-gradient(135deg, #a7cfdf 0%,#23538a 100%);*/
  box-shadow: inset -8px -7px 4px 0px rgba(0,0,0,0.3);
}

.bubble::after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.bubble-text {
  position: absolute;
  bottom: 50%;
  width: 100%;
  text-align: center;

  font-family: Papyrus,fantasy;
  font-weight: bolder;
  font-size: 3em;
}

.rcorners::after {
    content: "";
    display: block;
    padding-bottom: 100%;
}

.rcorners-1 {
    position: absolute;
    bottom: 120px;
    border-radius: 0px 10px 10px 0px;
    background: #4fa49d;
    padding: 20px;
    width: 30px;
    height: 92px;
}

.rcorners-text-1 {
position: relative;
left: -18px;
writing-mode: vertical-rl;
text-align: center;
font-weight: bolder;
font-size: 1.5em;
}

.rcorners-2 {
    position: absolute;
    bottom: -55px;
    border-radius: 0px 10px 10px 0px;
    background: #4fa49d;
    padding: 20px;
    width: 30px;
    height: 150px;
}

.rcorners-text-2 {
position: relative;
left: -18px;
writing-mode: vertical-rl;
text-align: center;
font-weight: bolder;
font-size: 1.5em;
}


.rcorners-3 {
    position: absolute;
    bottom: -260px;
    border-radius: 0px 10px 10px 0px;
    background: #4fa49d;
    padding: 20px;
    width: 30px;
    height: 178px;
}

.rcorners-text-3 {
position: relative;
left: -18px;
writing-mode: vertical-rl;
text-align: center;
font-weight: bolder;
font-size: 1.5em;
}

/* Custom interactiveDemo section style */
#interactiveDemo .container-fluid {
	width: 100%;
}
/* Comparative analysis conf */
#cmp-conf-row {
	display:flex;
	flex-direction: row;
	align-items: stretch;
}

.input-group > input {
	text-align: right;
}
.incrementer {
	display: flex;
	flex-direction: column;
	border-color: #ced4da;
	border-width: 1px;
	border-style: solid;
	border-radius: 0.2rem;
	border-left-style: hidden;
	padding-right: 0.1rem;
}
.incrementer > button {
	background-color: transparent;
}
.incrementer > button:focus {
	outline: 0;
}
.incrementer .increase {
	position: relative;
	height: 50%;
	border: 0;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 0.45rem auto;
	background-image: url("data:image/svg+xml;charset=utf-8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'> <polygon points='50,20 100,100 0,100' style='fill:grey;'/> </svg>");
}
.incrementer .decrease {
	position: relative;
	height: 50%;
	border: 0;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 0.45rem auto;
	background-image: url("data:image/svg+xml;charset=utf-8,  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'> <polygon points='0,0 100,0 50,80' style='fill:grey;'/> </svg>");
}
.incrementer .increase:active{
	background-image: url("data:image/svg+xml;charset=utf-8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'> <polygon points='50,0 100,100 0,100' style='fill:black;'/> </svg>");
}
.incrementer .decrease:active{
	background-image: url("data:image/svg+xml;charset=utf-8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'> <polygon points='0,0 100,0 50,100' style='fill:black;'/> </svg>");
}


.input-group .custom-select {
	flex: 0 0 50px;
	background-position: right 5px center;
    background-repeat: no-repeat;
    background-size: 0.45rem auto;
    background-image: url("data:image/svg+xml;charset=utf-8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'> <polygon points='0,0 60,0 30,40' style='fill:grey;'/> </svg>");
    text-align-last: center;
    text-align: center;
    padding-right: 13px;
    padding-left: 5px;
    color:#343a40;
    background-color: #ecf0f1;
}
.input-group-text {
	color: #343a40;
}
.input-group>.form-control:focus{
	box-shadow: 0 0 0 0.1rem rgba(44,62,80,0.25);
}


.progress-label {
	text-align: center;
	padding-left: 13px;
	padding-right: 5px;
	padding-top: 6px;
	font-weight: bold;
}

/* disable webkit's spinner for number input
input[type=number]::-webkit-inner-spin-button {	 Styling number input spinner button, not support on Firefox, Edge, IE
  width: 27px;
  height: 27px;
  margin-right: -19px;
  margin-left: 5px;
}*/
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Merge policy selecting bar */
.mp-btn-group {
	width: 100%;
}
.cmp-indiv-mp .mp-btn-group {
	width: 65%;
}
.mp-btn-group .btn {	/*Override*/
	flex: 1 1 100%;
	overflow: hidden;
	background-color: #ecf0f1;
	color:#2C3E50;
	border-color: rgb(206, 212, 218);
	padding: 0.10rem 0.75rem;
}
.mp-btn-group .btn:hover, .mp-btn-group .btn:active {
	color: #fff;
	background-color: #2C3E50; /*#95a5a6*/
    border-color: #798d8f;
}
.mp-btn-group .btn:focus {	/*Override original focus */
	/*background-color: #ecf0f1;
	color:#2C3E50;
	border-color: rgb(206, 212, 218);*/
	color: #fff;
	background-color: #2C3E50; /*#95a5a6*/
    border-color: #798d8f;
    outline: 0;
    -webkit-box-shadow: 0 0 0 0;
    box-shadow: 0 0 0 0;
    /*-webkit-box-shadow: 0 0 0 0.1rem rgba(44,62,80,0.25);
    box-shadow: 0 0 0 0.1rem rgba(44,62,80,0.25);*/
}
.mp-btn-group .btn:active, .mp-btn-group .btn-active{
	color: #fff;
	background-color: #2C3E50; /*#95a5a6*/
    border-color: #798d8f;
    outline: 0;
}
.cmp-indiv-mp {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.lsm-title { /* LSM name title */
	display: flex;
	font-size: x-large;
}

/* Custom bootstrap-slider style*/

.slider .tooltip.top {
	margin-top: 25px;
}
.slider-handle {
	position: absolute;
    top: 3px;
    width: 15px;
    height: 15px;
    background-color: #2C3E50;
    background-image: -webkit-linear-gradient(top, #2C3E50 0%, #95a5a6 100%);
    background-image: -o-linear-gradient(top, #2C3E50 0%, #95a5a6 100%);
    background-image: linear-gradient(to bottom, #2C3E50 0%, #95a5a6 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff2C3E50', endColorstr='#ffbc5353', GradientType=0);
    background-repeat: repeat-x;
    filter: none;
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
    border: 0px solid transparent;
}

.slider-track .slider-selection {
	position: absolute;
    background-image: -webkit-linear-gradient(top, #b4bcc2 0%, #f5f5f5 100%);
    background-image: -o-linear-gradient(top, #b4bcc2 0%, #f5f5f5 100%);
    background-image: linear-gradient(to bottom, #b4bcc2 0%, #f5f5f5 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff9f9f9', endColorstr='#fff5f5f5', GradientType=0);
    background-repeat: repeat-x;
    -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 4px;
}
.slider {
    display: inline-flex;
    vertical-align: middle;
    position: relative;
}
.slider.slider-horizontal {
    width: 90%;
    height: 20px;
}
.slider-box {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #ced4da;
}
.slide-box label {
	display: inline-flex;
	margin: 0px 5px;
}
.slider-tick {
	position: absolute;
    cursor: pointer;
    top: 3px;
    width: 15px;
    height: 15px;
    background-image: -webkit-linear-gradient(top, #b4bcc2 0%, #f5f5f5 100%);
    background-image: -o-linear-gradient(top, #b4bcc2 0%, #f5f5f5 100%);
    background-image: linear-gradient(to bottom, #b4bcc2 0%, #f5f5f5 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff9f9f9', endColorstr='#fff5f5f5', GradientType=0);
    background-repeat: repeat-x;
    -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    filter: none;
    opacity: 0;
    border: 0px solid transparent;
}
/*.slider.slider-horizontal .slider-tick-label:first-child {
	position: absolute;
	top: 10px;
	font-size: 40%;
	padding-top: 0;
}
.slider.slider-horizontal .slider-tick-label:last-child {
	position: absolute;
	left: 50%;
	top: 10px;
	font-size: 40%;
	padding-top: 0;
}*/


.custom-switch .custom-control-label::before {
	top: 5.25px;
	left: -27.5px;

}
.custom-switch .custom-control-label::after {
	top: calc(5.25px + 2px);
	left: calc(-27.5px + 2px);

}


.lsm-btn-group, .lsm-btn { /* Default, tree bush result */
	height: 18px;
	margin: 0 auto 3px;
	padding: 0px;
	border-radius: 0.35rem;
	vertical-align: top;
}
.lsm-btn-group .lsm-btn { /* Override, tree bush result for tiering */
	height: 18px;
	padding: 0px;
	margin: 0 2px 3px;
}
.lsm-btn-group .lsm-btn:first-child { /* Override, first run in each level in tiering */
	margin-left: 0px;
}
.lsm-btn-group .lsm-btn:last-child { /* Override, last first run in each level in tiering */
	margin-right: 0px;
}
.ellipsis {
	color: white;
	top: -4px;
	text-align: center;
}


/* LSM performance result display */
#cost-result {
	line-height: 2;
	font-size: 1.25rem;
	font-weight: 400;
	color: #111;
}
.metrics {
	padding-left: 0px;
	padding-right: 0px;
}
.metric-title{
	white-space: nowrap;
}
.cost-col {
	padding: 0px;
}


.col-lg-3 .row {
	padding-left: 15px;
	padding-right: 15px;
}

.abbr-dot {
	cursor: pointer;
	padding: 0px;
	margin: 0px 2px 3px;
	vertical-align: top;
	line-height: 20%;
	font-size: 20px;
}



/* For Control Panel*/

div.row h4 {
	margin:0 auto;
}

/*div#progress-box {
	border: hidden;
}*/

@media (min-width: 1200px) {

}

@media(max-width:991px) {
	ul > .nav-item {
		padding-left: 0px;
		padding-right: 0px;
    }
}
@media(max-width:575px) {
	.container {
		max-width: 85%;
	}
}

/*Team */
.team-member-img {
    border: 1px solid #2f2f2f;
}

.team-member-box-2 .team-member-img {
    width: 175px;
    margin: auto;
}

.team-member-box {
    text-align: center;
    padding: 30px;
    background-color: #272727;
    -webkit-transition: opacity 500ms;
    -moz-transition: opacity 500ms;
    -o-transition: opacity 500ms;
    transition: opacity 500ms;
}

.team-member-box:hover {
    background-color: #313131;
}

.team-member-box h3 {
    margin-top: 0;
    margin-bottom: 3px;
}

.team-member-box-2 h3 {
    margin-top: 20px;
    margin-bottom: 3px;
    font-size: 21px;
    text-align: center;
    font-weight: normal;
    line-height: 32px;
    font-family: "Helvetica Neue";
}

.team-member-box-2 p {
    font-size: 17px;
    text-align: center;
    font-weight: normal;
    line-height: 26px;
    font-family: "Helvetica Neue";
}

.team-image-wrapper {
    position: relative;
    margin: 0 auto;
    border-radius: 100%;
    overflow: hidden;
}

.team-image-wrapper .team-image-hover {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 100%;
    color: #fff;
    opacity: 0;
    -webkit-transition: opacity 500ms;
    -moz-transition: opacity 500ms;
    -o-transition: opacity 500ms;
    transition: opacity 500ms;
    background-color: rgba(137, 128, 254, 0.80);
}

.team-image-wrapper .team-image-hover .team-hover-content {
    border-radius: 100%;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
}

.team-image-wrapper:hover .team-image-hover {
    opacity: 1;
}

.team-image-hover:before {
    content: ' ';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.team-member {
    padding-top: 30px;
    text-align: center;
}

.team-member a h4{
	text-transform: none;
	text-decoration: none;
	font-size:25px;
	margin-bottom: 0px;
	color: #222;
}

.team-member img {
    margin: 0 auto;
    border: 7px solid #fff;
    max-width: 180px;
    max-height: 180px;
	box-shadow: 2px 3px 10px rgba(0,0,0,0.2);
}

.team-member a:hover,
.team-member a:hover p.text-muted,
.team-member a:hover h4 {
	color: #A51C30;
	text-decoration: none;
}
.team-member a:hover img {
	border-color: #A51C30;
}

.team-member p.text-muted {
	font-size: 21px;
	font-family: 'Helvetica Neue';
	color: #222;
	font-weight: normal;
    text-align: center;
}

.img-centered {
    margin: 0 auto;
}

.img-left {
    margin: -20px;
}

.img-logo {
    width: auto;
    height: 100px;
}

/* Footer Styling */
footer {
    background-color: #2C3E50 !important; /* Same color as run-button */
    color: white;
    padding-top: 20px;
    padding-bottom: 10px;
}

.footer-below {
    background-color: #2C3E50 !important; /* Ensure consistency */
    padding-top: 10px;
    padding-bottom: 5px;
}

.footer-below .container {
    padding-bottom: 10px;
}

/* Copyright Text */
.footer-below .row.text-center {
    font-size: 11px; /* Make text smaller */
    margin-top: 10px; /* Add space above */
}

/* Reduce Logo Size */
.img-logo {
    height: 70px; /* Reduce size */
    width: auto;  /* Keep aspect ratio */
}


progress {
    width: 10%;
    height: 9px;
    border-radius: 5px;
    background-color: #ddd; /* Background color */
}

progress::-webkit-progress-bar {
    background-color: #ddd; /* Background color */
    border-radius: 5px;
}

progress::-webkit-progress-value {
    background-color: #020c43; /* Primary Bootstrap blue */
    border-radius: 5px;
}

progress::-moz-progress-bar {
    background-color: #020c43; /* Primary Bootstrap blue */
    border-radius: 5px;
}

.cost {
    display: inline-block;
    min-width: 350px; /* Ensures alignment */
    text-align: center; /* Centers numbers */
}

.metric-title {
    min-width: 130px; /* Adjust based on label width */
    display: inline-block;
    text-align: center;
}

/* Play button */
#play-button, #b-button, #f-button {
    background: linear-gradient(135deg, #78b8e1 0%, #0e74e1 100%) !important; /* Light grey gradient */
    color: white;
    width: 120px;
}

#play-button:hover {
    background: linear-gradient(135deg, #5887b1 0%, #0064d1 100%) !important; /* Slightly darker gradient on hover */
}

/* Finish button */
#finish-button {
    background: linear-gradient(135deg, #085da3 0%, #177acc 100%) !important; /* Dark red to lighter red gradient */
    border: none;
    color: white;
}

#finish-button:hover {
    background: linear-gradient(135deg, #054e8a 0%, #1574c3 100%) !important;
}

/* Speed buttons (Fast, Medium, Slow) */

/* Fast button */
#fast-button {
    background: linear-gradient(135deg, #5D6D7E 0%, #AAB7B8 100%) !important; /* Dark grey to light grey */
    border: none;
    color: white;
}

#fast-button:hover {
    background: linear-gradient(135deg, #4D5656 0%, #99A3A4 100%) !important;
}

/* Medium button */
#medium-button {
    background: linear-gradient(135deg, #2C3E50 0%, #5D6D7E 100%) !important; /* Dark blue to grey */
    border: none;
    color: white;
}

#medium-button:hover {
    background: linear-gradient(135deg, #1B2631 0%, #4D5656 100%) !important;
}

/* Slow button */
#slow-button {
    background: linear-gradient(135deg, #17202A 0%, #2C3E50 100%) !important; /* Darkest blue-grey */
    border: none;
    color: white;
}

#slow-button:hover {
    background: linear-gradient(135deg, #0E1419 0%, #1B2631 100%) !important;
}

.progress-container {
    width: 100%;
    margin-top: 10px;
}

.input-group-text {
    font-weight: bold;
}

/* Main Control Panel */
#control-panel-wrapper {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    font-size: 1.25rem;
    padding: 10px;
    background-color: #f8f9fa; /* Light grey background */
    border-radius: 5px;
}

/* Control Panel */
#control-panel {
    display: flex;
    align-items: center;
    width: 100%;
    font-size: 1.25rem;
}

/* Progress Bar Container */
.progress-container {
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: 10px;
}

/* Wrapper to Ensure Proper Display */
.progress-wrapper {
    flex-grow: 1;
    background: white;
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 10px;
    margin: 0 10px;
}

/* Style for Progress Bar */
#progress-bar {
    -webkit-appearance: none;
    width: 100%;
    height: 12px;
    background: #ddd;
    border-radius: 15px !important;
    outline: none;
    overflow: hidden;  /* Ensure it clips properly */
    position: relative;
}


/* ✅ Dark Grey Progress Fill */
#progress-bar::-webkit-progress-bar {
    background-color: #ddd;
    border-radius: 6px;
}

/* ✅ Fix for Progress Dot (Slider Thumb) at the Start */
#progress-bar::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: #5D6D7E;
    border-radius: 50%;
    cursor: pointer;
    margin: 0;  /* Remove margin-left: -10px */
    position: relative;
    z-index: 2;
}
#progress-bar {
    -webkit-appearance: none;
    width: 100%;
    height: 12px;
    background: #ddd;
    border-radius: 6px;
    position: relative;
    padding: 0;  /* important */
    margin: 0;
}

#progress-bar::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: #5D6D7E;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    margin-left: -10px; /* Ensures it starts at the beginning */
}

/* Progress Percentage Label */
.progress-percent {
    font-weight: bold;
    background: #f8f9fa;
    border: 1px solid #ced4da;
    width: 70px;
    justify-content: center;;
}


#individual-analysis {
    border-bottom: 0px dotted #ccc; /* Add a light gray dotted line */
    margin-bottom: 0px; /* Adds spacing below the dotted line */
}

#write-batches-graph, #latency-graph {
    height: 400px;  /* Ensures plots have a height */
    width: 100%;  /* Make sure they take full width of the container */
    margin: 10px 0;
}

.section-divider {
    border: none;
    /* border-top: 2px dotted #ccc; Dotted line separator */
    margin: 30px 0; /* Space above and below */
    width: 100%; /* Ensure it spans the full width */
    opacity: 0.8; /* Slight transparency */
}

.toggle-switch {
    display: inline-flex;
    border: 1px solid #2C3E50;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    user-select: none;
    font-size: 0.75rem;
    font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-color: #ecf0f1;
    font-weight: 400;
    margin-bottom: 8px;
  }
  
  .toggle-option {
    padding: 4px 8px;
    background-color: #ecf0f1;
    color: #2C3E50;
    transition: background-color 0.3s, color 0.3s;
    text-align: center;
  }
  
  .toggle-option.active {
    background-color: #2C3E50;
    color: #fff;
    font-weight: 700;
  }
  
  #RWplot, #LRUplot, #Bplot {
    width: 100%;
    height: 400px;
  }
    /* Center the bottom plot */
    .row.justify-content-center {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* Adjust column width to maintain consistency */
    .col-md-6 {
        max-width: 50%; /* Ensures the top two plots are evenly spaced */
    }

    .col-md-8 {
        max-width: 50%; /* Centers and resizes the bottom plot */
    }

    .flex-parent-element {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        width: 100%;
        margin-top: 20px; /* Space between button and plots */
    }

    .flex-child-element {
        flex: 1 1 20%;
        min-width: 500px; /* Wider */
        height: 400px; /* Ensures proper height */
        background-color: transparent; /* Removes box background */
        border: none; /* Removes border */
        margin: 3px;
        padding: 0px;
    }

    #individual-analysis {
        font-family: 'Linux Libertine', serif;
        font-size: 1.18rem;      /* Base size for the whole section */
        color: #111;
      }
      
      #individual-analysis .input-group-text,
      #individual-analysis .form-control,
      #individual-analysis select,
      #individual-analysis input {
        font-family: 'Linux Libertine', serif;
        font-size: 1.18rem;      /* Slightly smaller for UI elements */
        font-weight: 400;
        color: #111;
      }

      #control-panel-wrapper {
        font-family: 'Linux Libertine', serif;
        font-size: 1.18rem;
        font-weight: 400;
        color: #111;
      }
      
      /* Buttons inside the control panel */
      #control-panel-wrapper .btn {
        font-family: 'Linux Libertine', serif;
        font-weight: 400;
        font-size: 1.18rem;
      }
      
      /* Progress bar text and labels */
      #control-panel-wrapper .input-group-text,
      #control-panel-wrapper .progress-box,
      #control-panel-wrapper .progress-percent {
        font-family: 'Linux Libertine', serif;
        font-weight: 400;
        font-size: 1.18rem;
      }
      
      /* Optional: Style the slider if needed */
      #control-panel-wrapper input.slider {
        height: 1.18rem;
        font-weight: 400;
        cursor: pointer;
      }
      
      
/* Main container for comparison panel and plots */
#comparative-analysis,
#show-plot-btn,
#comparative-analysis .container {
  font-family: 'Linux Libertine', serif;
  font-size: 1.15rem;
  color: #111;
  line-height: 1.6;
}

/* Section headings (like "Vary Buffer Pool Size") */
#comparative-analysis h5,
#comparative-analysis h4,
#comparative-analysis h3 {
  font-family: 'Linux Libertine', serif;
  font-size: 1.25rem;
  font-weight: 700;
  text-align: center;
}

/* Labels above inputs (e.g., "Workload", "Device") */
#comparative-analysis .input-group-text {
  font-size: 1.18rem;
  font-family: 'Linux Libertine', serif;
  font-weight: 400;
}

/* All inputs and dropdowns */
#comparative-analysis .form-control,
#comparative-analysis select,
#comparative-analysis input {
  font-size: 1.25rem;
  font-family: 'Linux Libertine', serif;
  font-weight: 400;
}

/* Button: "Run Experiments" */
#graph.run-button {
  font-size: 1.01rem !important;
  font-family: 'Linux Libertine', serif;
  font-weight: 400;
}

/* Toggle switch for raw/speedup */
.toggle-switch .toggle-option {
  font-family: 'Linux Libertine', serif;
  font-size: 1.01rem;
  font-weight: 400;
}

/* Plot captions */
.plot-caption {
  font-family: 'Linux Libertine', serif;
  font-size: 1.18rem;
  color: #111;
  text-align: center;
}

#RWplay-btn, #Bplay-btn {
    width: 2.5em;
    height: 2.5em;
    padding: 0;
    font-size: 1rem;
    position: relative;
  }
  
  .spinner-border {
    width: 1.2em;
    height: 1.2em;
  }

div.fixed {
	position: fixed;
	bottom: 50%;
	left: 0;
	width: 60px;
	height: 200px;
}

/* #sim-panel-horizontal-scroll .row {
    flex-wrap: nowrap;
    width: max-content;
} */

.tier {
    display: grid;
    gap: 0px;
}

.cell {
    width: 20px;
    height: 20px;
    border: 1px solid #ccc;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    background: #f8f9fa;
    /* transition: background 0.25s ease; */
}

.highlight-write {
    /* background: orange !important; */
    border: 3.5px solid black !important;
}

.highlight-read {
    /* background: cornflowerblue !important; */
    border: 3.5px solid blue !important;
}

.highlight-from {
    /* background: lightcoral !important; */
    border: 3.5px solid cyan !important;
}

.highlight-to {
    /* background: lightgreen !important; */
    border: 3.5px solid magenta !important;
}

/* ── Cell base ───────────────────────────────────────────────────────────────
   background-color is owned entirely by hotness.js (heatToColor).
   Do NOT set background here — it would fight the JS-driven colour.
   The old highlight-* classes are kept as no-ops so any leftover calls
   in external scripts don't throw errors, but they have no visual effect.   */
/* .cell {
    width: 20px;
    height: 20px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 20px;
    color: #333;
    box-sizing: border-box;
    position: relative;
    cursor: default;
    transition: background-color 0.30s ease,
                box-shadow      0.15s ease,
                border-color    0.15s ease,
                color           0.10s ease;
}
 
/* Legacy classes kept as no-ops so old call sites don't error */
/* .highlight-write {}
.highlight-read  {}
.highlight-from  {}
.highlight-to    {} */
 
/* ─── READ indicator — blue bottom border + bold text ────────────────────── */
/* .cell.op-read {
    border-bottom: 2.5px solid #1565c0 !important;
    font-weight: 700 !important;
    color: inherit;
} */
 
/* ─── WRITE indicator — yellow top border + bold text ───────────────────── */
/* .cell.op-write {
    border-top: 2.5px solid #f9a825 !important;
    font-weight: 700 !important;
    color: inherit;
} */
 
/* ─── MIGRATE source — dashed outline shrinks away ──────────────────────── */
/* @keyframes migSrc {
    0%   { box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.75); }
    60%  { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25); }
    100% { box-shadow: inset 0 0 0 0px rgba(0, 0, 0, 0);    }
} */
/* .cell.op-migrate-src {
    animation: migSrc 0.50s ease forwards;
} */
 
/* ─── MIGRATE destination — white flash floods in then fades ────────────── */
/* @keyframes migDst {
    0%   { box-shadow: inset 0 0 0 10px rgba(255, 255, 255, 0);    }
    30%  { box-shadow: inset 0 0 0 10px rgba(255, 255, 255, 0.80); }
    100% { box-shadow: inset 0 0 0 10px rgba(255, 255, 255, 0);    }
} */
/* .cell.op-migrate-dst {
    animation: migDst 0.55s ease forwards;
} */
 
/* ─── Migration-candidate markers ───────────────────────────────────────────
   candidate  hottest page in lower tier that has crossed the coldest in the
              tier above — migration is imminent; pulsing dark ring.
   victim     the cold page in the upper tier about to be displaced; dims.  */
 
/* @keyframes candidatePulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.80); }
    50%      { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25); }
}
.cell.migration-candidate {
    animation: candidatePulse 0.70s ease-in-out infinite;
}
 
@keyframes victimPulse {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 0.85; }
}
.cell.migration-victim {
    animation: victimPulse 0.70s ease-in-out infinite;
} */