/* Login */
#username {/* https://www.w3schools.com/css/tryit.asp?filename=trycss_padding_intro */
    padding-left: 15px;
    border-radius: 2%;
    border: 1px solid #777777;
}

#password {
    padding-left: 15px;
    border-radius: 2%;
    border: 1px solid #777777;
}
/* Login */


/* Switch https://www.w3schools.com/howto/howto_css_switch.asp*/
/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  /*width: 103vh; id='switche' -> w-100*/
  height: 7vh;
}

/* 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: #0D6EFD;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 6vh;
  width: 50%;
  left: 0.3vh;
  bottom: 0.5vh;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

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

input:focus + .slider {
  box-shadow: 0 0 0vh #000000;
}

input:checked + .slider:before {
  -webkit-transform: translateX(135vh);
  -ms-transform: translateX(135vh);
  transform: translateX(99%);/*Hacia la derecha*/
}

/* Rounded sliders */
.slider.round {
  border-radius: 36px 36px 0px 0px;
}
/* eye   border-radius: 50px 0px 50px 0px; */
.slider.round:before {
  border-radius: 32px 32px 0px 0px;
}

/* Switch 2 */
/* https://stackoverflow.com/a/39846603 */
.slider:after
{
 content:'EMPLEADO';
 color: rgb(0, 0, 0);
 display: block;
 position: absolute;
 transform: translate(-5vh,-2.5vh);
 top: 3vh;
 left: 20%;
 font-size: 4vh;
 font-family: Arial, sans-serif;
}

input:checked + .slider:after
{  
  content:'VISITANTE';
  left: 73%;
}
/* Switch 2 */


/* Cambiar color cuando se selecciona visitante */
.mostrar{/*Campos del formulario que se ocultan al cambiar entre empleado y visitante*/
display: none !important;
}

/* Boton añadir, cambio de color */
.naranja{
  /* https://www.w3schools.com/css/css_important.asp */
  background-color:#FB9B31 !important;
  /* https://www.w3schools.com/css/css_border_color.asp */
  border-color: #FB9B31 !important;
}
/* Boton añadir, cambio de color */

/* estilo de bootstrap azul a naranja https://stackoverflow.com/a/54925591 
.enfoque:focus {
  border-color: #FB9B31 !important;
  box-shadow: 0rem 0rem 0rem 0.3rem rgba(251, 155, 49, 0.25) !important;
}
*/


/*https://mdbootstrap.com/support/angular/customize-color-of-checkbox/*/
.checkbox-color[type='checkbox']:checked {
  background-color: #FB9B31;
}
/* Cambiar color cuando se selecciona visitante */

/* --------------------------------- */
.mostrarCheck{/*Campos del formulario que se ocultan al cambiar entre empleado y visitante*/
display: none !important;
}

/* navbar2 */
.b{
margin-top: 3.5rem !important;
width: 30vh !important;
 box-shadow: 0 0 8px 5px rgba(53, 51, 51, 0.5);
 clip-path: polygon(0% 0%, 120% 0%, 120% 120%, 0% 120%);
/* box-shadow: 5px 5px rgb(255, 230, 0), 10px 10px rgb(27, 79, 252), 15px 15px rgb(177, 67, 67); */
}

.accordion {
	--bs-accordion-btn-color: rgb(255, 255, 255) !important;
	--bs-accordion-btn-bg: #212529 !important;
	--bs-accordion-active-color: rgb(255, 255, 255) !important;
	--bs-accordion-active-bg: #212529 !important;
}

.accordion-button::after {
-webkit-filter: grayscale(1) invert(1) !important;
filter: grayscale(1) invert(1) !important;
}

.accordion-button:focus {
    box-shadow: none !important;
    border-color: rgba(0,0,0,.125) !important;
}

.swal2-timer-progress-bar {
  height: 15px !important; /* Adjust the desired height */
  background-color:#8afc5c !important;
}

/* body {
    margin: 0;
    width: 100vw;
    height: 100vh;
}

div {
    width: 100vw;
    height: 100vh;
} */