@import 'variablesGlobales.css';
.guardarServicio{
    color: white;
    background: rgb(84,10,193);
    background: linear-gradient(90deg, rgba(84,10,193,1) 0%, rgba(65,159,223,1) 74%, rgba(62,181,227,1) 87%, rgba(60,194,230,1) 96%, rgba(55,239,239,1) 100%);
    font-weight: bold;
    border-radius: 20px;
    border: none;
    width: 165px;
    margin-right: 5px;
}
.botonesServicio{
    margin-top: 3%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    align-content: center;
}
.botonesPaciente{
    margin-top: 3%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    align-content: center;
}

.tablaServicios{
    display: block;
    max-height: 460px;
    overflow-y: auto;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}
.panelgrandeEPS{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 90%;
    width: 100%;
    padding: 10px;
}
.tablaServicios::-webkit-scrollbar {
    width: 8px;     /* Tamaño del scroll en vertical */
    height: 8px;    /* Tamaño del scroll en horizontal */
}
.tablaServicios::-webkit-scrollbar-thumb {
    background: rgb(84,10,193);
background: linear-gradient(80deg, rgba(84,10,193,1) 17%, rgba(134,91,231,1) 51%, rgba(144,106,238,1) 80%, rgba(162,136,252,1) 100%);
    border-radius: 4px;
}
.tablaServicios::-webkit-scrollbar-thumb:hover {
    background: rgb(84,10,193);
background: linear-gradient(80deg, rgba(84,10,193,1) 17%, rgba(134,91,231,1) 51%, rgba(144,106,238,1) 80%, rgba(162,136,252,1) 100%);
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
}
.tablaServicios::-webkit-scrollbar-track {
    background: #ccdff0;
    border-radius: 4px;
}
.flipswitch {
  position: relative;
  background: white;
  width: 120px;
  height: 40px;
  -webkit-appearance: initial;
  border-radius: 3px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  outline: none;
  font-size: 14px;
  
  font-weight: bold;
  cursor: pointer;
  border: 1px solid #ddd;
}

.flipswitch:after {
  position: absolute;
  top: 5%;
  display: block;
  line-height: 32px;
  width: 45%;
  height: 90%;
  background: #fff;
  box-sizing: border-box;
  text-align: center;
  transition: all 0.2s ease-in 0s;
  color: black;
  border: #888 1px solid;
  border-radius: 3px;
}

.flipswitch:after {
  left: 2%;
  content: "NO";
}

.flipswitch:checked:after {
  left: 53%;
  content: "SI";
  background-color: #540AC1;
  color: white;
}