.input-group-text.wbs-code-box {
    min-width: 15ch;
    text-align: center;
    /* font-family: monospace; */
}
:root {
  --bs-primary: #28a745 !important;
  --bs-primary-rgb: 40, 167, 69 !important;
  --bs-btn-bg: #28a745 !important;
  --bs-btn-border-color: #28a745 !important;
  --bs-btn-hover-bg: #218838 !important;
  --bs-btn-hover-border-color: #1e7e34 !important;
  --bs-link-color: #28a745;
  --bs-link-hover-color: #1e7e34;
}

.btn-primary {
  --bs-btn-bg: var(--bs-primary) !important;
  --bs-btn-border-color: var(--bs-primary) !important;
  --bs-btn-hover-bg: #218838 !important;
  --bs-btn-hover-border-color: #1e7e34 !important;
}
input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-select:focus {
  border-color: #28a745 !important;
  box-shadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.25) !important;
}
.table-hover > tbody > tr:hover > * {
  background-color: #e2f7ec !important; /* verde claro */
  color: #000 !important;
}
th {
  position: relative;
}
th .resizer {
  position: absolute;
  right: 0;
  top: 0;
  width: 5px;
  height: 100%;
  cursor: col-resize;
  user-select: none;
}
.btn-close {
  background-image: url("/assets/icons/close.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1em;
  width: 1em;
  height: 1em;
  border: none;
  opacity: 0.5;
}
.btn-close:hover {
  opacity: 1;
}
.modal-dialog {
  max-height: 80vh;
  overflow-y: auto;
}
a {
  text-decoration: none;
}
body a {
  color: var(--bs-link-color) !important;
}
body a:hover {
  color: var(--bs-link-hover-color) !important;
}
.navbar a,
.navbar .nav-link {
  color: white !important;
}
.navbar a:hover,
.navbar .nav-link:hover {
  color: #f8f9fa !important; /* blanco más suave */
}
table thead th {
  background-color: #28a745!important;
  color: white!important;
}
input::selection,
textarea::selection,
select::selection {
  background: #c3eecd;       /* verde claro */
  color: #000;               /* texto negro */
}

/* Compatibilidad extra para navegadores modernos */
input::-moz-selection,
textarea::-moz-selection {
  background: #c3eecd;
  color: #000;
}

::selection {
  background-color: #c3eecd;
  color: #000;
}

::-moz-selection {
  background-color: #c3eecd;
  color: #000;
}

.dash-title {
  font-size:16px;
  text-align:center;
}
.dash-value {
  font-size:40px;
}
.dash-block {
  border: 1px;
  border-style: solid;
  border-color: #C0C0C0; 
}
.dash-alert {
    background: #FADBD8
}
/* The sidebar menu */
#myProgress {
  width: 100%;
  background-color: #F1F1F1;
}

.progress_div {
  width: 100%;
  background-color: #F1F1F1;
}

#myBar {
  width: 1%;
  height: 30px;
  background-color: #70F176;
}

.progress_bar {
  width: 1%;
  height: 30px;
  background-color: #70F176;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

#banner-message.alt {
  background: #28a745;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

.action_input {
  cursor: pointer;
  color: #28a745;
  font-weight: bold;
}

.action_input:hover {
  cursor: pointer;
  color: #10cb3c;
  font-weight: bold;
}

.sidebar {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0;
  right: 0;
  background-color: #ECF0F1; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar */
}

/* The sidebar links */
.sidebar a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #454545;
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidebar a:hover {
  color: #000000;
}

/* Position and style the close button (top right corner) */
.sidebar .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

/* The button used to open the sidebar */
.openbtn {
  font-size: 20px;
  cursor: pointer;
  background-color: white;
  color: #454545;
  padding: 10px 15px;
  border: none;
}

.openbtn:hover {
  background-color: #000000;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
  transition: margin-left .5s; /* If you want a transition effect */
  padding: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidebar {padding-top: 15px;}
  .sidebar a {font-size: 18px;}
}

.notfavorite {
  color:#E5E7E9
}
.notfavorite:hover {
  color:#909497
}
.favorite {
  color:#F7DC6F
}
.favorite:hover {
  color:#D4AC0D
}

.inputfile {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

.inputfile + label {
	width: 200px;
	height: 150px;
    font-size: 1.25em;
    font-weight: 700;
    text-align: center;
    color: black;
    background-color: #F2F3F4;
    display: inline-block;
    cursor: pointer; /* "hand" cursor */
    padding: 10px 0;
}

.inputfile:focus + label,
.inputfile + label:hover {
    background-color: #D6EAF8;
}

.upload-file {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

.upload-file + label {
    text-align: center;
    color: black;
    background-color: #F2F3F4;
    display: inline-block;
    cursor: pointer; /* "hand" cursor */
    padding: 10px 0;
}

.upload-file:focus + label,
.upload-file + label:hover {
    background-color: #D6EAF8;
}

.small-image {
  cursor: pointer;
}

.th-sorted {
  cursor: pointer;
}

.spot_red {
  height: 15px;
  width: 15px;
  background-color:red;
  border-radius: 50%;
  display: inline-block;
}

.spot_amber {
  height: 15px;
  width: 15px;
  background-color:#FFBF00;
  border-radius: 50%;
  display: inline-block;
}

.spot_green {
  height: 15px;
  width: 15px;
  background-color:green;
  border-radius: 50%;
  display: inline-block;
}

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 20px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .2s;
  transition: .2s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .2s;
  transition: .2s;
}

input:checked + .slider {
  background-color: #28a745;
}

input:focus + .slider {
  box-shadow: 0 0 1px #28a745;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.tooltip-new {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip-new .tooltiptext-new {
  visibility: hidden;
  width: 150px;
  background-color: #28a745;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  top: 20px;
  right: 0%;
  z-index: 1;
}

.tooltip-new:hover .tooltiptext-new {
  visibility: visible;
}

/* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
  visibility: hidden; /* Hidden by default. Visible on click */
  min-width: 250px; /* Set a default minimum width */
  margin-left: -125px; /* Divide value of min-width by 2 */
  background-color: #333; /* Black background color */
  color: #fff; /* White text color */
  text-align: center; /* Centered text */
  border-radius: 2px; /* Rounded borders */
  padding: 16px; /* Padding */
  position: fixed; /* Sit on top of the screen */
  z-index: 1; /* Add a z-index if needed */
  left: 50%; /* Center the snackbar */
  bottom: 30px; /* 30px from the bottom */
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
  visibility: visible; /* Show the snackbar */
  /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
  However, delay the fade out process for 2.5 seconds */
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}