@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');

* {
	font-family:'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; /* plex.css */
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	--rh-primary-color    : #d5d5d5; 
	--rh-bg-odd-tab-color : #f2f2f2;
	--rh-bg-even-tab-color: rgba(157, 190, 108, 0.705); /* rh */
	--rh-bg-even-tab-color: #bad9f82c;
  --rh-active-color     : #4CAF50;
  --rh-idle-color       : rgb(255, 145, 0);
  --rh-stopped-color    : red;
  --rh-whiteFA-color    : #fafafa;
  --rh-switch-bg-color  : #bebebe;
  --rh-tx-color         : #333;
	--rh-loader-color     : var(--rh-active-color);
	
	/* IBM colors */
	--rh-ibm-blue-hover   : #0353E9;
	--rh-ibm-blue-main    : #0F62FE;
	--rh-ibm-bw-grey      : #F4F4F4;
	/* --rh-ibm-bw-mid-grey  : #8D8D8D; */
	--rh-ibm-bw-mid-grey  : #e5e5e5;
	--rh-ibm-bw-dark-grey : #262626;
	--rh-ibm-bw-white     : #FFFFFF;
	
  /* offset-x | offset-y | blur-radius | color */
  /* --rh-shadow           : 2px 2px 2px rgba(0, 0, 0, 0.075); */
  --rh-shadow           : 4px 4px 8px rgb(189 200 213), -4px -4px 8px rgb(255 255 255);

	--rh-max-width        : 1200px;
  --rh-min-width        : 360px;
}

html {
	overflow-x: hidden;
}

body {
	background: var(--rh-ibm-bw-grey);
	background: #F1F0F6;
	overflow-x: hidden;
	scroll-behavior: smooth;
	min-height: 100dvh;
	height: 100dvh;
}

a {
	text-decoration: none;
}

li {
	list-style: none;
}





/* SIDEBAR */
#sidebar {
	position: fixed;
	max-width: 260px;
	width: 100%;
	background: var(--rh-ibm-bw-white);
	/* background: pink; */
	top: 0;
	left: 0;
	/* height: 100%; */
	height: 100dvh;
	overflow-y: auto;
	scrollbar-width: none;
	z-index: 200;
	
	display: flex;
	flex-direction: column;
	/* transition: all .3s ease; */
	transition: all .3s ease-out;
	/* box-shadow: var(--rh-shadow); */

}
#sidebar.hide {
	max-width: 60px;
	/* rh */
	transition: none; /* Desactiva la transición inicialmente */
}
#sidebar.hide:hover {
	max-width: 260px;
}
#sidebar::-webkit-scrollbar {
	display: none;
}

#sidebar .brand {
	background-color: var(--rh-whiteFA-color);
	/* background-color: lightblue; */
	height: 60px;
	position: sticky;
	top: 0;
	left: 0;
	/* padding: 10px; */
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 100;
	transition: all .3s ease;
	pointer-events: none;
	box-shadow: var(--rh-shadow);
}

.brand img{
	width: 40px;
}

#sidebar .icon {
	min-width: 48px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 6px;
}

#sidebar .icon-right {
	margin-left: auto;
	transition: all .3s ease;
}

#sidebar .side-menu {
	padding: 10px 10px 10px 5px;
	transition: all .3s ease;
	/* background-color: #4CAF50; */
}

/* #sidebar.hide .side-menu {
	padding: 10px 6px;
} */

/* #sidebar.hide:hover .side-menu { 
	padding: 10px;
} */

#sidebar .side-menu a
{
	display: flex;
	align-items: center;
	font-size: 1rem;
	color: var(--rh-ibm-bw-dark-grey);
	/* background-color: red; */
	padding: 12px 16px 12px 0;
	transition: all .3s ease;
	border-radius: 10px;
	margin: 4px 0 0 0;
	white-space: nowrap;
}

#sidebar .side-menu > li > a:hover {
	background: var(--rh-ibm-bw-mid-grey);
}

#sidebar .side-menu > li > a.active .icon-right {
	transform: rotateZ(90deg);
}

#sidebar .side-menu > li > a.active,
#sidebar .side-menu > li > a.active:hover {
	background: var(--rh-ibm-blue-main);
	/* background: magenta; */
	color: var(--rh-ibm-bw-white);
}

#sidebar .side-dropdown > li:last-child  {
	padding-bottom: 10px;
}

#sidebar .divider {
	margin-top: 24px;
	font-size: 1rem;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--rh-ibm-bw-dark-grey);
	transition: all .3s ease;
	white-space: nowrap;
}

#sidebar.hide:hover .divider {
	text-align: left;
}

#sidebar.hide .divider {
	text-align: center;
}

#sidebar .side-dropdown {
	padding-left: 20px;
	max-height: 0;
	overflow-y: hidden;
	transition: all .3s ease;
}

#sidebar .side-dropdown.show {
	max-height: 1000px;
}

.parameters {
  display: flex;
  justify-content: space-between;
	align-items: center;
  color: var(--rh-tx-color);
  text-align: left;
	padding: 10px 0px;
  padding-bottom: .07rem;
}

.param__section {
	margin-top: 10px;
}

.parameters input {
  text-align: right;
  background-color:var(--rh-bg-odd-tab-color);
  border: .25px solid var(--rh-switch-bg-color);
  border-radius: 5px;
  padding-right: 5px;
	padding: 5px;
}

.parameters input:hover {
	background-color: var(--rh-ibm-bw-mid-grey);
}


.input-wrapper {
  display: flex;
  align-items: center;
}

.input-wrapper input[type="text"] {
  text-align: center;
  margin: 0 5px;
}

.input-wrapper button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--rh-switch-bg-color);
}

/* .input-wrapper button:hover {
  color: #007bff;
} */

.input-wrapper .increase:hover {
  color: var(--rh-active-color);
	font-weight: 600;
}

.input-wrapper .decrease:hover {
  color: var(--rh-stopped-color);
	font-weight: 600;
}






#sidebar .footer__portfolio {
	/* position: fixed; */
	/* bottom: 0; */
	/* background: var(--rh-ibm-bw-mid-grey); */
	border-radius: 50px 15px 15px 50px;
	margin: auto 10px 10px 6px;
	transition: .3s ease-in-out;
}

#sidebar .footer__portfolio a{
	display: flex;
	align-items: center;
	justify-content: start;
	gap: 1rem;

}

#sidebar .footer__portfolio:hover {
	background: var(--rh-ibm-bw-mid-grey);
}

.footer__portfolio__photo {
  display: block;
  width: 3rem;
  height: 3rem;
  /* object-fit: cover; */
  /* cursor: pointer; */
  /* border-radius: 50%; */
  /* border: 3px solid transparent; */
}

.footer__portfolio__name {
	font-size: 1rem;
	text-align: center;
  white-space: nowrap;
}

.footer__portfolio__name p {
	font-size: .5rem;
}

.footer__portfolio__icon {
	font-size: 1.5rem;
	color: var(--rh-tx-color);
}


/* SIDEBAR */




/* CONTENT */
#content {
	position: relative;
	width: calc(100% - 260px);
	left: 260px;
	transition: all .3s ease;
}
#sidebar.hide + #content {
	width: calc(100% - 60px);
	left: 60px;
}



/* NAVBAR */
nav {
	background: var(--rh-ibm-bw-white);
	/* background: pink; */
	height: 60px;
	padding: 0 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	grid-gap: 28px;
	position: sticky;
	top: 0;
	left: 0;
	z-index: 100;
	box-shadow: var(--rh-shadow);
}
nav .toggle-sidebar {
	font-size: 18px;
	cursor: pointer;
}

/* ------------------------------------------------------------ */
.switch__header {
  display: flex;
  justify-content: center;
  align-items: center;
}

.switch__header p {
	display: inline-block;
	font-size: 1.3rem;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.switch {
  margin-top: 60px;
  position: relative;
  display: inline-block;
  /* width: 60px; */
  width: 50px;
  /* height: 34px; */
  height: 25px;
  margin: 20px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--rh-primary-color);
  transition: .4s;
  /* border-radius: 34px; */
  border-radius: 25px;
	box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.322);
}

/* the switch red ball */
.slider:before {
	position: absolute;
  content: "";
  /* height: 26px;
  width: 26px; */
  height: 18px;
  width:  18px;
  left:    3px;
  bottom:  3px;
  background-color: var(--rh-stopped-color);
  transition: .2s;
  border-radius: 50%;
}

input:checked + .slider:before {
  background-color: var(--rh-active-color);
  /* transform: translateX(26px); */
  transform: translateX(26px);
}

.blocked {
  background-color: var(--rh-ibm-bw-dark-grey);
  color: var(--rh-whiteFA-color) !important;
  transition: .3s ease-in-out;
  padding: 0px 5px;
  border-radius: 5px;
}

.stopped {
  background-color: var(--rh-stopped-color);
  color: var(--rh-whiteFA-color) !important;
  transition: .3s ease-in-out;
  padding: 0px 5px;
  border-radius: 5px;
}

.idle {
  background-color: var(--rh-idle-color);
  color: var(--rh-whiteFA-color) !important;
  transition: .3s ease-in-out;
  padding: 0px 5px;
  border-radius: 5px;
}

.active {
  background-color: var(--rh-active-color);
  color: var(--rh-whiteFA-color) !important;
  transition: .3s ease-in-out;
  padding: 0px 5px;
  border-radius: 5px;
}

/* Blink animation for pause/resume button */
@keyframes blink-active {
  0% {
      color: var(--rh-whiteFA-color);
      background-color: var(--rh-active-color);
    }
    25% {
      /* color: var(--rh-active-color); */
      background-color: var(--rh-switch-bg-color);
    }
    100% {
      color: var(--rh-whiteFA-color);
      background-color: var(--rh-active-color);
  }
}

/* #statusMessage {
  font-size: 1.3rem;
	height: 25px;
	border-radius: 30%;
} */
 
/* #statusMessage.blink {
  animation: blink-active 1s infinite;
  transition: .3s ease-in-out;
  padding: 0px 5px;
} */

.loader5 {
  width:  1.5rem;
  height: 1.5rem;
  border: 0.25rem solid var(--rh-stopped-color);
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  box-sizing: border-box;
}

.loader5::after {
  content: '';  
  position: absolute;
  box-sizing: border-box;
  left: 9px;
  top: 12.5px;
  border: 0.25rem solid transparent;
  border-right-color: var(--rh-stopped-color);
  transform: rotate(-40deg);
}

.loader5Active {
	width:  1.5rem;
  height: 1.5rem;
  border: 0.25rem solid var(--rh-active-color);
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  box-sizing: border-box;
	animation: rotation 1s linear infinite;
}

.loader5Active::after {
	content: '';  
  position: absolute;
  box-sizing: border-box;
  left: 9px;
  top: 12.5px;
  border: 0.25rem solid transparent;
  border-right-color: var(--rh-active-color);
  transform: rotate(-40deg);
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


.nav__elapsed p {
	font-size: .75rem;
}

#timeElapsed {
	font-size: 1.3rem;
}

#cycleIDUI {
	font-size: .70rem;
	color: #bebebe;
}

/* ------------------------------------------------------------ */


/* NAVBAR */



/* MAIN */
main {
	width: 100%;
	padding: 5px 10px 10px 10px;
}
main .title {
	font-size: 28px;
	font-weight: 600;
	margin-bottom: 10px;
}
main .breadcrumbs {
	display: flex;
	grid-gap: 6px;
}
main .breadcrumbs li,
main .breadcrumbs li a {
	font-size: 14px;
}

main .info-data {
	margin-top: 20px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	grid-gap: 20px;
}
main .info-data .card {
	padding: 5px 10px;
	border-radius: 10px;
	background: var(--rh-ibm-bw-white);
	/* background: pink; */
	box-shadow: var(--rh-shadow);

	position: relative;
	overflow: hidden;
}

/* main .info-data .card:hover {
	background: var(--rh-ibm-bw-mid-grey);
} */



main .card .head {
	/* background: var(--rh-ibm-bw-white); */
	/* background: red; */
	display: flex;
	justify-content: space-between;
	align-items: start;
	font-size: 1.3rem;
}

main .card .head h2 {
	font-size: 24px;
	font-weight: 600;
}
main .card .head p {
	font-size: 1.3rem;
}
main .card .head .icon {
	font-size: 20px;
	color: var(--rh-active-color);
}
main .card .head .icon.down {
	color: var(--rh-stopped-color);
}
main .card .head .icon.idle {
	color: var(--rh-idle-color);
}
main .card .head .help-icon {
	color: var(--rh-switch-bg-color);
	font-size: 1.2rem;
}
main .card .progress {
	display: block;
	margin-top: 10px;
	height: 8px;
	width: 100%;
	border-radius: 10px;
	background: var(--rh-switch-bg-color);
	background: var(--rh-ibm-bw-grey);
	overflow-y: hidden;
	position: relative;
	margin-bottom: 4px;
	/* transition: all .3s ease; */
}
main .card .progress::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	background: var(--rh-ibm-blue-main);
	width: var(--value); /* assigned dynamic in JS */
	transition: all .5s ease;
}
main .card .label {
	font-size: 14px;
	font-weight: 700;
}

.info-data-cpu {
	/* background-color: red; */
  display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 10px;
}

.card__both {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;

	margin: 0px 0px;
	padding: 0px 0px 0px 10px;
	border-radius: 10px;
	background: var(--rh-ibm-bw-white);
	/* background-color: pink; */
	box-shadow: var(--rh-shadow);
}


.card__both:hover {
	background: var(--rh-ibm-bw-mid-grey);
}


.card__both__left {
	display: flex;
  flex: 1.80;
	flex-direction: row;
	justify-content: center;
	gap: 30px;
	align-items: center;
  /* padding-left: 10px; */
  font-size: 18px;
  color: var(--rh-ibm-bw-dark-grey);
}

.card__both__right {
  flex: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 1.3rem;
  color: var(--rh-ibm-bw-dark-grey);
  border-radius: 0 9px 9px 0;
  background-color: var(--rh-ibm-bw-mid-grey);
}

#maxNumProcessUI2, 
#newProcessExecutedUI2, 
#newProcessRejectedUI2,
#processFinishedUI3,
#maxSizeQueueUI2
{
	font-size: .75rem;	
}





.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--rh-ibm-bw-mid-grey);

  display: flex;
	flex-direction: column;
  align-items:start;
  justify-content: center;
	padding: 10px;
  opacity: 0;

  transition: opacity 0.4s ease;
  pointer-events: none; 
	/* No bloquea los clics ni la interacción */
}

.overlay i {
	font-size: 1.3rem;
	margin-bottom: auto;
}

.overlay p {
	font-size: 1rem;
}

.help-icon {
  cursor: pointer;
}

main .data {
	display: flex;
	grid-gap: 20px;
	margin-top: 10px;
	flex-wrap: wrap;
	
}
main .data .content-data {
	margin-top: 10px;
	flex-grow: 1;
	flex-basis: 400px;
	padding: 5px;
	border-radius: 10px;
	/* background: var(--light); */
	/* box-shadow: var(--rh-shadow); */
}
main .content-data .head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 24px;
}
main .content-data .head h3 {
	font-size: 20px;
	font-weight: 600;
}
main .content-data .head .menu {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}
main .content-data .head .menu .icon {
	cursor: pointer;
}

main .chart {
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	scrollbar-width: none;
	margin-top: 20px;
}
main .chart::-webkit-scrollbar {
	display: none;
}

/* TABLES */

.title__table {
	/* background: pink; */
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 10px;
	gap: 10px;
}

#table__container table {
  width: 90%;
  margin: 0px auto;
  border-collapse: collapse;
  border-radius: 15px;
  overflow: hidden;
	box-shadow: var(--rh-shadow);
}

#table__container__hist table {
  width: 90%;
  margin: 0px auto;
  border-collapse: collapse;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: var(--rh-shadow);

	/* overflow-y: auto; */
}

td {
  text-align: center;
  padding: 10px;
  font-size: .75rem;
}

th {
  text-align: center;
  padding: 10px;
  font-size: 1rem;
  font-weight: 300;
	color: var(--rh-ibm-bw-white);
}

#table__container table thead {
  background-color: var(--rh-ibm-blue-main);
}

#table__container__hist table thead {
  background-color: var(--rh-ibm-bw-dark-grey);

}
/* Limit the table body to show only 10 rows and add scroll */
tbody {
  display: block;
  max-height: 360px; /* Adjust based on row height */
  overflow-y: auto;
}

thead, tfoot {
  display: table;
  width: 100%;
  table-layout: fixed;
}

tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

tbody tr:nth-child(odd) {
  background-color: var(--rh-bg-odd-tab-color);
}

tbody tr:nth-child(even) {
  background-color: var(--rh-bg-even-tab-color);
}

tfoot {
	background-color: var(--rh-ibm-bw-grey);
  font-weight: bold;
}

tfoot tr td {
  border-bottom: none;
}

tbody tr:last-child td {
  border-bottom: none;
}

/* WebKit for (Chrome, Safari, Edge) */
::-webkit-scrollbar {
	/* Sroll bar width */
  width: 8px; 
}

::-webkit-scrollbar-thumb {
  background-color: #888; 
  border-radius: 0px;      
}

::-webkit-scrollbar-thumb:hover {
  background-color: #555;   
}

::-webkit-scrollbar-track {
  background: #f1f1f1;     
}


/* IBM Icons from Carbon */
.caem-card-svg-source {
	display: flex;
	width: 720px;
	height: 120px;
	fill: red;
	margin: 0 auto;
	/* font-weight: bolder; */
	gap: 20px;
}
.caem-card-svg-source-ibm {
	display: flex;
	width: 100px;
	height: 120px;
	fill: red;
	margin: 0 auto;
	/* font-weight: bolder; */
	gap: 20px;
}

/* -------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------- */
/* RESPONSIVE STYLES */
/* -------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------- */

@media screen and (max-width: 768px) {
	#content {
		position: relative;
		width: calc(100% - 60px);
		transition: all .3s ease;
	}

	nav .switch__header p {	
		font-size: 1rem;
		white-space: nowrap;
	}

	nav #timeElapsed {	
		font-size: 1rem;
	}

	nav #cycleIDUI {	
		font-size: .55rem;
	}

	nav #systemSwitch {
		display: none;
	}

	nav #loader5 {
		display: none;
	}

	th {
		padding: 10px 5px;
		font-size: .80rem;
	}

	#table__container table, 
	#table__container__hist table {
		width: 100%;
	}

}