/*
www.devsaran.com
*/
@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic,700,700italic);


/* =Reset
Principal:  #254061
Secundario: #DCE6F2
-------------------------------------------------------------- */

.swiper
{
  width: 90%;
  height: 75%;
}

.swiper .swiper-button-prev
{
  --swiper-navigation-size: 20px;
  background-color: white;
  height: 70px;
  width: 50px;
  margin-top: -35px;
  border-radius: 0 65px 65px 0;
  left: -15px;
  color: #999999;
}

.swiper .swiper-button-next
{
  --swiper-navigation-size: 20px;
  background-color: white;
  height: 70px;
  width: 50px;
  margin-top: -35px;
  border-radius: 65px 0 0 65px;
  right: -15px;
  color: #999999;
}

.swiper .swiper-pagination
{
  --swiper-pagination-color: #555555;
  --swiper-pagination-bullet-size: 8px;
  --swiper-pagination-bullet-width: 8px;
  --swiper-pagination-bullet-height: 8px;
  --swiper-pagination-bullet-inactive-color: #BBBBBB;
  --swiper-pagination-bullet-inactive-opacity: 0.4;
  --swiper-pagination-bullet-opacity: 1;
  --swiper-pagination-bullet-horizontal-gap: 4px;
  --swiper-pagination-bullet-vertical-gap: 6px;
}

.swiper-slide
{
    height: 100%;
}

td.fondo_menu
{
  width: 32px;
  height: 80vh;
  vertical-align: top;
  background-color: #DCE6F2;
  z-index: 0;
}

.boton_imagen_home
{
  vertical-align: middle;
  height: 40px;
  width: 150px;
  border-top: 10px solid #DCE6F2;
  border-left: 14px solid #DCE6F2;
  cursor: pointer;
  text-decoration: none;
  font-family: Tahoma;
  font-size: 12px;
  font-weight: bold;
  color: #333333;
  background-color: #DCE6F2;
  background-repeat: no-repeat;
  border-radius: 10%;
}

.boton_imagen_home_bajo
{
  vertical-align: middle;
  height: 20px;
  width: 150px;
  border-top: 10px solid #DCE6F2;
  border-left: 14px solid #DCE6F2;
  cursor: pointer;
  text-decoration: none;
  font-family: Tahoma;
  font-size: 12px;
  font-weight: bold;
  color: #333333;
  background-color: #DCE6F2;
  background-repeat: no-repeat;
  border-radius: 10%;
}

.elemento_lista_home{
  height: 22px;
  font-family: Tahoma;
  font-size: 11px;
  color: #000000;
  padding-left: 2px;
  padding: 0px 0px 0px 0px;
}

.menu_acciones
{
  vertical-align: middle;
  height: 18px;
  border-top: 3px solid #254061;
  border-left: 13px solid #254061;
  border-bottom: 3px solid #254061;
  cursor: pointer;
  text-decoration: none;
  font-family: Tahoma;
  font-size: 11px;
  font-weight: bold;
  color: #FFFFFF;
  background-color: #254061;
  background-repeat: no-repeat;
}

.submenu_acciones
{
  vertical-align: middle;
  height: 24px;
  border-top: 3px solid #254061;
  border-left: 13px solid #254061;
  border-bottom: 3px solid #254061;
  cursor: pointer;
  text-decoration: none;
  font-family: Tahoma;
  font-size: 11px;
  font-weight: bold;
  color: #FFFFFF;
  background-color: #254061;
  background-repeat: no-repeat;
  padding: 8px 0px 0px 10px;
}

.boton
{
  color: #FFFFFF;
  background-color: #254061;
  font-family: Tahoma;
  font-size: 12px;
  font-weight: bold;
  width: 200px;
  height: 28px;
  border-left: none;
  border-top: none;
  border-right-color: #EEEEEE;
  border-bottom-color: #EEEEEE;
  cursor: pointer;
}

.boton_2
{
  color: #FFFFFF;
  background-color: #254061;
  font-family: Tahoma;
  font-size: 11px;
  font-weight: bold;
  width: 75px;
  height: 22px;
  border-left: none;
  border-top: none;
  border-right-color: #EEEEEE;
  border-bottom-color: #EEEEEE;
  cursor: pointer;
}

.boton_imagen
{
  vertical-align: middle;
  height: 20px;
  border-top: 3px solid #254061;
  border-left: 13px solid #254061;
  border-bottom: 3px solid #254061;
  cursor: pointer;
  padding: 4px 0px 0px 3px;
  text-decoration: none;
  font-family: Tahoma;
  font-size: 11px;
  font-weight: bold;
  color: #FFFFFF;
  background-color: #254061;
  background-repeat: no-repeat;
}

.boton_orden_asc
{
  vertical-align: middle; 
  text-decoration: none; 
  background-repeat: no-repeat; 
  background-image: url(images/boton_asc.png);
}

.boton_orden_desc
{
  vertical-align: middle; 
  text-decoration: none; 
  background-repeat: no-repeat; 
  background-image: url(images/boton_desc.png);
}

.file-upload {
  cursor: pointer;
  vertical-align: middle;
  text-decoration: none;
  font-family: Tahoma;
  font-size: 11px;
  font-weight: bold;
  color: #333333;
  background-color: #EEEEEE;
  background-repeat: no-repeat;
}

.file_upload_celda{
  height: 18px;
  font-family: Tahoma;
  font-size: 11px;
  text-decoration: none;
  color: #000000;
  background-color: #EEEEEE;
}

.boton_imagen_transparente
{
  height: 20px;
  border-top: 3px;
  border-left: 13px;
  border-bottom: 3px;
  cursor: pointer;
  padding: 4px 0px 0px 1px;
  vertical-align: middle;
  text-decoration: none;
  font-family: Tahoma;
  font-size: 11px;
  font-weight: bold;
  color: #333333;
  background-repeat: no-repeat;
}

.boton_imagen_transparente_sin_texto
{
  height: 20px;
  border-top: 3px;
  border-left: 13px;
  border-bottom: 3px;
  cursor: pointer;
  padding: 4px 0px 0px 1px;
  text-decoration: none;
  background-repeat: no-repeat;
}

.boton_imagen_transparente_sin_texto_old
{
  height: 20px;
  border-top: 3px solid #DAB3E7;
  border-left: 5px solid #DAB3E7;
  border-bottom: 3px solid #DAB3E7;
  cursor: pointer;
  padding: 4px 0px 0px 3px;
  text-decoration: none;
  font-family: Tahoma;
  font-size: 11px;
  font-weight: bold;
  color: #333333;
  background-color: #DAB3E7;
  background-repeat: no-repeat;
}

.boton_order_asc
{
  height: 10px;
  width: 10px;
  cursor: pointer;
  text-decoration: none;
  font-family: Tahoma;
  font-size: 6px;
  color: #EEEEEE;
  background-color: #EEEEEE;
  background-repeat: no-repeat;
  background: #254061 url(images/boton_asc.jpg) no-repeat;
}

.boton_order_desc
{
  height: 10px;
  width: 10px;
  cursor: pointer;
  text-decoration: none;
  font-family: Tahoma;
  font-size: 6px;
  color: #EEEEEE;
  background-color: #EEEEEE;
  background-repeat: no-repeat;
  background: #254061 url(images/boton_desc.jpg) no-repeat;
}

.boton_imprimir
{
  height: 20px;
  border-top: 3px solid #254061;
  border-left: 13px solid #254061;
  border-right: none;
  border-bottom: 3px solid #254061;
  cursor: pointer;
  padding: 4px 82px 20px 3px;
  text-decoration: none;
  font-family: Tahoma;
  font-size: 11px;
  font-weight: bold;
  color: #FFFFFF;
}

.boton_imagen_pequeno
{
  height: 17px;
  border-top: 1px solid #254061;
  border-left: 1px solid #254061;
  border-bottom: 1px solid #254061;
  cursor: pointer;
}

.boton_imagen_grande
{
  height: 25px;
  border-top: 3px solid #254061;
  border-left: 13px solid #254061;
  border-bottom: 3px solid #254061;
  cursor: pointer;
  padding: 8px 0px 0px 3px;
  text-decoration: none;
  font-family: Tahoma;
  font-size: 14px;
  color: #FFFFFF;
  background: #254061 url(images/boton_salir_ayc.jpg) no-repeat;
}

.caja{
  width: 250px;
  border: 2px solid #254061;
  background-color: #DCE6F2;
  -webkit-box-shadow: 0 0 10px rgba(0,0,0,.2);
  -moz-box-shadow: 0 0 10px rgba(0,0,0,.2);
}

.caja_2{
  margin: 0 auto;
  width: 250px;
  border: 2px solid #254061;
  background-color: #DCE6F2;
  -webkit-box-shadow: 0 0 10px rgba(0,0,0,.2);
  -moz-box-shadow: 0 0 10px rgba(0,0,0,.2);
}

.caja_texto_1{
  background: #FFFF99;
  height: 17px;
  padding-left: 10px;
  font-family: Tahoma;
  font-size: 12px;
  color: #000000;
  text-align: left;
}

.caja_texto_20{
  background-color: #FFFFFF;
  height: 17px;
  padding-left: 10px;
  font-family: Tahoma;
  font-size: 11px;
  color: #000000;
  text-align: left;
}

.caja_texto_2{
  background-color: #FFFF99;
  height: 17px;
  padding-left: 10px;
  font-family: Tahoma;
  font-size: 11px;
  color: #000000;
  text-align: left;
}

.caja_texto_22{
  background-color: #FFFF00;
  height: 17px;
  padding-left: 10px;
  font-family: Tahoma;
  font-size: 11px;
  color: #000000;
  text-align: left;
}

.caja_texto_23{
  background-color: #FFBB00;
  height: 17px;
  padding-left: 10px;
  font-family: Tahoma;
  font-size: 11px;
  color: #000000;
  text-align: left;
}

.caja_texto_24{
  background-color: #FF5500;
  height: 17px;
  padding-left: 10px;
  font-family: Tahoma;
  font-size: 11px;
  color: #000000;
  text-align: left;
}

.caja_texto_25{
  background-color: #FF0000;
  height: 17px;
  padding-left: 10px;
  font-family: Tahoma;
  font-size: 11px;
  color: #000000;
  text-align: left;
}

.caja_texto_3{
  background-color: #DDDDDD;
  height: 17px;
  padding-left: 10px;
  font-family: Tahoma;
  font-size: 11px;
  color: #000000;
  text-align: left;
}

.calendario_1{
  background-color: #FFFF99;
  font-family: Tahoma;
  font-size: 11px;
  color: #000000;
}

.calendario_2{
  background-color: #DDDDDD;
  font-family: Tahoma;
  font-size: 11px;
  color: #000000;
}

.calendario_3{
  background-color: #FFFFCC;
  font-family: Tahoma;
  font-size: 11px;
  color: #000000;
}

.calendario_4{
  background-color: #254061;
  font-family: Tahoma;
  font-size: 11px;
  color: #FFFFFF;
}

.celda{
  height: 32px;
}

.celda_titulo{
  height: 38px;
  font-family: Tahoma;
  font-weight: bold;
  font-size: 14px;
  color: #254061;
  background-color: #FFFFFF;
}

.celda_titulo_2{
  height: 38px;
  font-family: Tahoma;
  font-weight: bold;
  font-size: 14px;
  color: #000000;
  text-align: center;
}

.celda_titulo_3{
  height: 32px;
  font-family: Tahoma;
  font-weight: normal;
  font-size: 12px;
  color: #000000;
  text-align: center;
}

.celda_titulo_4{
  height: 28px;
  font-family: Tahoma;
  font-weight: bold;
  font-size: 11px;
  color: #000000;
  text-align: left;
}

.celda_divisoria{
  height: 1px;
  background-color: #FFFFFF;
}

.celda_divisoria_negra{
  height: 1px;
  background-color: #000000;
}

.celda_divisoria_vert{
  width: 1px;
  background-color: #FFFFFF;
}

.celda_doc{
  height: 13px;
  font-family: Tahoma;
  font-weight: normal;
  font-size: 9px;
  color: #000000;
  text-align: right;
}

.celda_fondo_claro{
  height: 20px;
  font-family: Tahoma;
  font-size: 11px;
  color: #000000;
  background-color: #DCE6F2;
  padding-left: 10px;
  text-align: left;
  border-left: solid;
  border-top: solid;
  border-right: solid;
  border-bottom: solid;
  border-left-width: thin;
  border-top-width: thin;
  border-right-width: thin;
  border-bottom-width: thin;
}

.celda_fondo_blanco{
  height: 20px;
  font-family: Tahoma;
  font-size: 11px;
  color: #000000;
  background-color: #FFFFFF;
  padding-left: 10px;
  text-align: left;
  border-left: solid;
  border-top: solid;
  border-right: solid;
  border-bottom: solid;
  border-left-width: thin;
  border-top-width: thin;
  border-right-width: thin;
  border-bottom-width: thin;
}

.celda_fondo_azul_oscuro{
  height: 20px;
  font-family: Tahoma;
  font-size: 11px;
  font-weight: bold;
  color: #FFFFFF;
  background-color: #254061;
  padding-left: 10px;
  text-align: left;
  border-left: solid;
  border-top: solid;
  border-right: solid;
  border-bottom: solid;
  border-left-width: thin;
  border-top-width: thin;
  border-right-width: thin;
  border-bottom-width: thin;
}

.combo_1{
  background-color: #FFFF99;
  height: 22px;
  padding-left: 10px;
  font-family: Tahoma;
  font-size: 11px;
  color: #000000;
  text-align: left;
}

.combo_2{
  background-color: #DDDDDD;
  height: 22px;
  padding-left: 10px;
  font-family: Tahoma;
  font-size: 11px;
  color: #000000;
  text-align: left;
}

div.fondo_1{
  font-family: Tahoma;
  font-size: 14px;
  color: #FFFFFF;
  background-color: #254061;
  height: 42px;
  padding-left: 10px;
}

div.fondo_2{
  font-family: Tahoma;
  font-size: 14px;
  color: #000000;
  background-color: #DCE6F2;
  height: 35px;
  padding-left: 10px;
}

td.fondo_4{
  width: 32px;
  height: 510px;
  vertical-align: top;
  background-color: #DCE6F2;
}

.elemento_lista{
  height: 22px;
  font-family: Tahoma;
  font-size: 11px;
  color: #000000;
  background-color: #FFFFFF;
  padding-left: 2px;
  padding: 0px 0px 0px 0px;
}

.elemento_agenda{
  height: 22px;
  font-family: Tahoma;
  font-size: 11px;
  color: #000000;
  background-color: #FFFFFF;
  padding: 0px 1px 0px 1px;
}

.elemento_agenda_home{
  height: 22px;
  font-family: Tahoma;
  font-size: 11px;
  font-weight: bold;
  color: #000000;
  background-color: #DCE6F2;
  padding: 0px 1px 0px 1px;
}

.elemento_rojo{
  height: 22px;
  font-family: Tahoma;
  font-size: 11px;
  color: #000000;
  background-color: #FF0000;
  padding-left: 2px;
}

.elemento_agenda_realizada{
  height: 22px;
  font-family: Tahoma;
  font-size: 11px;
  color: #000000;
  background-color: #DDDDDD;
  padding: 0px 1px 0px 1px;
}

.elemento_agenda_cancelada{
  height: 22px;
  font-family: Tahoma;
  font-size: 11px;
  color: #000000;
  background-color: #999999;
  padding: 0px 1px 0px 1px;
}

.elemento_agenda_LightCoral{
  height: 22px;
  font-family: Tahoma;
  font-size: 11px;
  color: #000000;
  background-color: #F08080;
  padding-left: 2px;
}

.elemento_agenda_Pink{
  height: 22px;
  font-family: Tahoma;
  font-size: 11px;
  color: #000000;
  background-color: #FFC0CB;
  padding-left: 2px;
}

.elemento_agenda_Orange{
  height: 22px;
  font-family: Tahoma;
  font-size: 11px;
  color: #000000;
  background-color: #FFA500;
  padding-left: 2px;
}

.elemento_agenda_Khaki{
  height: 22px;
  font-family: Tahoma;
  font-size: 11px;
  color: #000000;
  background-color: #F0E68C;
  padding-left: 2px;
}

.elemento_agenda_DarkKhaki{
  height: 22px;
  font-family: Tahoma;
  font-size: 11px;
  color: #000000;
  background-color: #BDB76B;
  padding: 0px 1px 0px 1px;
}

.elemento_agenda_Thistle{
  height: 22px;
  font-family: Tahoma;
  font-size: 11px;
  color: #000000;
  background-color: #D8BFD8;
  padding: 0px 1px 0px 1px;
}

.elemento_agenda_Violet{
  height: 22px;
  font-family: Tahoma;
  font-size: 11px;
  color: #000000;
  background-color: #EE82EE;
  padding: 0px 1px 0px 1px;
}

.elemento_agenda_LightGreen{
  height: 22px;
  font-family: Tahoma;
  font-size: 11px;
  color: #000000;
  background-color: #90EE90;
  padding: 0px 1px 0px 1px;
}

.elemento_agenda_MediumAquamarine{
  height: 22px;
  font-family: Tahoma;
  font-size: 11px;
  color: #000000;
  background-color: #66CDAA;
  padding: 0px 1px 0px 1px;
}

.elemento_agenda_PaleTurquoise{
  height: 22px;
  font-family: Tahoma;
  font-size: 11px;
  color: #000000;
  background-color: #AFEEEE;
  padding: 0px 1px 0px 1px;
}

.elemento_agenda_LightSteelBlue{
  height: 22px;
  font-family: Tahoma;
  font-size: 11px;
  color: #000000;
  background-color: #B0C4DE;
  padding: 0px 1px 0px 1px;
}

.elemento_agenda_Red{
  height: 22px;
  font-family: Tahoma;
  font-size: 11px;
  color: #000000;
  background-color: #FF0000;
  padding: 0px 1px 0px 1px;
}

.elemento_agenda_LightYellow{
  height: 22px;
  font-family: Tahoma;
  font-size: 11px;
  color: #000000;
  background-color: #FFFF99;
  padding: 0px 1px 0px 1px;
}

.elemento_agenda_Yellow{
  height: 22px;
  font-family: Tahoma;
  font-size: 11px;
  color: #000000;
  background-color: #FFFF00;
  padding: 0px 1px 0px 1px;
}

.elemento_agenda_LightOrange{
  height: 22px;
  font-family: Tahoma;
  font-size: 11px;
  color: #000000;
  background-color: #FFBB00;
  padding: 0px 1px 0px 1px;
}

.elemento_agenda_Green{
  height: 22px;
  font-family: Tahoma;
  font-size: 11px;
  color: #000000;
  background-color: #44BB44;
  padding: 0px 1px 0px 1px;
}

.elemento_agenda_VeryDarkMasOrange{
  height: 22px;
  font-family: Tahoma;
  font-size: 11px;
  color: #FFFFFF;
  background-color: #D84315;
  padding-left: 2px;
}

.elemento_agenda_DarkMasOrange{
  height: 22px;
  font-family: Tahoma;
  font-size: 11px;
  color: #000000;
  background-color: #F4511E;
  padding-left: 2px;
}

.elemento_agenda_MasOrange{
  height: 22px;
  font-family: Tahoma;
  font-size: 11px;
  color: #000000;
  background-color: #FF7043;
  padding-left: 2px;
}

.elemento_agenda_LightMasOrange{
  height: 22px;
  font-family: Tahoma;
  font-size: 11px;
  color: #000000;
  background-color: #FFAB91;
  padding-left: 2px;
}

.elemento_agenda_VeryLightMasOrange{
  height: 22px;
  font-family: Tahoma;
  font-size: 11px;
  color: #000000;
  background-color: #FBE9E7;
  padding-left: 2px;
}

.enlace_1{
  font-family: Tahoma;
  font-size: 11px;
  color: #254061;
  font-weight: bold;
}

.etiqueta_1{
  height: 20px;
  font-family: Tahoma;
  font-size: 11px;
  color: #000000;
  background-color: #DDDDDD;
  padding-left: 10px;
  text-align: left;
}

.etiqueta_2{
  font-family: Tahoma;
  font-size: 11px;
  color: #000000;
}

.etiqueta_3{
  font-family: Tahoma;
  font-size: 11px;
  color: #333333;
  font-weight: bold;
  padding: 2px 0px 0px 0px;
}

.etiqueta_empresa{
  font-family: Tahoma;
  font-size: 14px;
  color: #FFFFFF;
  background-color: transparent;
  margin-left: 10px;
  padding-left: 10px;
  padding: 0px 5px 0px 10px;
}

.lista_check{
  background-color: #FFFF99;
  padding-left: 10px;
  font-family: Tahoma;
  font-size: 11px;
  color: #000000;
  text-align: left;
  vertical-align: top;
  border: solid 1px #BBBBBB;
}

.menu_normal{
  font-family: Tahoma;
  font-size: 11px;
  color: #000000;
  background-color: #DCE6F2;
  height: 24px;
  font-weight: bold;
  padding: 8px 5px 0px 10px;
}

.menu_imagen{
  font-family: Tahoma;
  font-size: 11px;
  color: #000000;
  background-color: #DCE6F2;
  height: 50px;
  font-weight: bold;
  padding: 18px 5px 0px 10px;
}

.menu_imagen_2{
  font-family: Tahoma;
  font-size: 11px;
  color: #000000;
  background-color: #DCE6F2;
  font-weight: bold;
  padding: 18px 5px 0px 10px;
  vertical-align: middle;
  background-repeat: no-repeat;
  text-decoration: none;
  cursor: pointer;
  border-top: 3px solid #DCE6F2;
  border-bottom: 3px solid #DCE6F2;
}

.menu_seleccionado{
  color: #FFFFFF;
  background-color: #254061;
}

.menu_dinamico{
  font-family: Tahoma;
  font-size: 11px;
  color: #000000;
  background-color: #DCE6F2;
  height: 24px;
  font-weight: bold;
  padding: 8px 5px 0px 10px;
}

.menu_dinamico_oscuro{
  font-family: Tahoma;
  font-size: 11px;
  color: #FFFFFF;
  background-color: #254061;
  height: 24px;
  font-weight: bold;
  padding: 8px 5px 0px 10px;
}

.msgbox_tabla{
  background-color: #DCE6F2;
}

.msgbox_titulo{
  height: 38px;
  font-family: Tahoma;
  font-weight: bold;
  font-size: 14px;
  color: #254061;
  background-color: #DCE6F2;
}

.msgbox_texto{
  height: 38px;
  font-family: Tahoma;
  font-weight: bold;
  font-size: 12px;
  color: #254061;
  background-color: #DCE6F2;
}

.tabla_menu{
    border: 1px solid #FFFFFF;
    background-color: #EEEEEE;
}

.titulo_1{
  font-family: Tahoma;
  font-size: 14px;
  color: #000000;
  height: 30px;
  font-weight: bold;
  text-align: center;
}

.titulo_2{
  font-family: Tahoma;
  font-size: 12px;
  color: #254061;
  height: 30px;
  font-weight: bold;
  text-align: center;
}

.titulo_lista{
  height: 20px;
  font-family: Tahoma;
  font-size: 11px;
  color: #000000;
  background-color: #DDDDDD;
  padding: 0px 1px 0px 1px;
}


.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext {
    margin-left: -60px;
    top: 150%;
    left: 50%;
    visibility: hidden;
    width: 150px;
    background-color: #FFFFDD;
    color: #333333;
    text-align: center;
    border-radius: 3px;
    padding: 6px 0;
    position: absolute;
    z-index: 1;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #FFFFDD transparent;
}

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

.tooltip .tooltiptextright {
    top: -5px;
    left: 110%;
    visibility: hidden;
    width: 60px;
    background-color: #FFFFDD;
    color: #333333;
    text-align: center;
    border-radius: 3px;
    padding: 6px 0;
    position: absolute;
    z-index: 1;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.tooltip .tooltiptextright::after {
  content: " ";
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent #FFFFDD transparent transparent;
}

.tooltip:hover .tooltiptextright {
    visibility: visible;
}

.tooltip .tooltiptextleft {
    top: -5px;
    right: 110%;
    visibility: hidden;
    width: 60px;
    background-color: #FFFFDD;
    color: #333333;
    text-align: center;
    border-radius: 3px;
    padding: 6px 0;
    position: absolute;
    z-index: 1;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.tooltip .tooltiptextleft::after {
  content: " ";
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent #FFFFDD;
}

.tooltip:hover .tooltiptextleft {
    visibility: visible;
}