.card-title-rigth {
    float: right;
    margin-top: -46px;
}

/** Estilo para el boton de soporte **/

.rounded-lg {
    border-radius: 1rem;
  }
  
  .custom-file-label.rounded-pill {
    border-radius: 50rem;
  }
  
  .custom-file-label.rounded-pill::after {
    border-radius: 0 50rem 50rem 0;
  }

/** Estilo para el hover del cargue de funcionarios **/

#formato-funcionarios{
    opacity: 1;
    display: block;
    width: 100%;
    height: auto;
    transition: .5s ease;
    backface-visibility: hidden;      
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

#container-formato:hover #formato-funcionarios {
  opacity: 0.3;
}

#container-formato:hover .middle {
  opacity: 1;
}

.text a{
    text-decoration: none;
}

.text {
  color: white;
}
/* Estilo para esconder las filas de la tabla viajes */

.terminado {
    display: none;
}

/* FIN Estilo para esconder las filas de la tabla viajes */

.botones-acciones{
    display: flex;
}

/* Estilos para el boton de seleccionar archivo */

.btn-file {
    position: relative;
    overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}

/* FIN ESTILOS PARA EL BOTON DE SELECCIONAR ARCHIVO */

/** HACER IMAGEN DEL SOPORTE DEL VIAJE, ACOMODARSE AL MODAL */
.imagen-soporte-viaje {
    width: -webkit-fill-available;
}

/* CARD EVENTOS NUEVOS */

.card-nuevo-evento {
    margin-top: 0px !important;
}

/* CARD EVENTOS NUEVOS FIN */

.fa-izq {
    margin-right: 5px !important;
}

.fa-der {
    margin-left: 5px !important;
}

.card{
    -webkit-transition-property: all;
    -webkit-transition-duration: 0.5s;
    -moz-transition-property: all;
    -moz-transition-duration: 0.5s;
    -o-transition-property: all;
    -o-transition-duration: 0.5s;
    transition-property: all;
    transition-duration: 0.5s;
}

/* Uppercase */
.navbar-nav{
    text-transform: uppercase;
}

/* POPUB BUBBLE STYLING. */

.popup-bubble {
        /* Position the bubble centred-above its parent. */
        position: absolute;
        top: 0;
        left: 0;
        transform: translate(-50%, -100%);
        /* Style the bubble. */
        background-color: white;
        padding: 5px;
        border-radius: 5px;
        font-family: sans-serif;
        overflow-y: auto;
        max-height: 60px;
        box-shadow: 0px 2px 10px 1px rgba(0,0,0,0.5);
      }
      /* The parent of the bubble. A zero-height div at the top of the tip. */
      .popup-bubble-anchor {
        /* Position the div a fixed distance above the tip. */
        position: absolute;
        width: 100%;
        bottom: /* TIP_HEIGHT= */ 8px;
        left: 0;
      }
      /* This element draws the tip. */
      .popup-bubble-anchor::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        /* Center the tip horizontally. */
        transform: translate(-50%, 0);
        /* The tip is a https://css-tricks.com/snippets/css/css-triangle/ */
        width: 0;
        height: 0;
        /* The tip is 8px high, and 12px wide. */
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: /* TIP_HEIGHT= */ 8px solid white;
      }
      /* JavaScript will position this div at the bottom of the popup tip. */
      .popup-container {
        cursor: auto;
        height: 0;
        position: absolute;
        /* The max width of the info window. */
        width: 200px;
      }

#btn-group-top{
    float: right !important;
    margin: auto !important;
}

#map_cavas{
    float: right;
}

#legend {
    font-family: Arial, sans-serif;
    background: #fff;
    padding: 10px;
    margin: 10px;
    border: 3px solid #000;
}
#legend h3 {
    margin-top: 0;
}
#legend img {
    vertical-align: middle;
}

.nombre-geofence-vista{
    display: contents;
}

#cont-mapa{
    display: none;
    height: 100%;
    position: absolute;
    top: 0px; 
    right: 0px;
}

.navbar-toggler {
    background-color: #fff;
    padding: 12px 11px;
    margin-top: -8px;
    border-radius: 0px !important;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
}

.cont-alert {
    position: absolute !important;
    width: 100% !important;
    z-index: 1050 !important;
    top: 12px !important;
}

.cargando{
    width: 100%;
    text-align: center;
    padding: 0px 7px;
}
.oculto{
    display: none;
}
.opciones-flotante {
    position: absolute;
    z-index: 100;
    top: 23px;
    right: 0px;
    padding: 5px 10px;
}

.opciones-contenedor {
    position: absolute;
    z-index: 99;
    margin: 5px 1px;
    top: 20px;
    right: 0px;
    overflow: hidden;
    height: 30px;
    width: 0px;
}

.opciones-geozona {
    z-index: 100;
    right: 0px;
    padding: 5px 10px;
}

.opciones-contenedor-geo {
    z-index: 99;
    margin: 5px 1px;
    top: 20px;
    right: 0px;
    overflow: hidden;
    height: 30px;
    width: 0px;
}

.etiqueta{
	width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-left: 8px solid #378bf3;
    border-bottom: 10px solid transparent;
    float: left;
    margin-left: -8px;

}

.editar{
    display: none;
}

.principal-modal{
    max-width: 95% !important;
}

.opciones-botones {
    padding: 3px 6px 3px 6px;
}
.boton-editar{
    text-align: -webkit-center;
}
.botones-edicion{
    display: flex;
    align-items: center;
}

.botones-edicion > p{
    margin-bottom: 0px !important;        
    flex-grow: 1;
}

.opciones-botones > i{
    font-size: 12px !important;
}

/* Para tener la casilla de buscar en la misma fila que la paginacion (ya no es necesario, solo cuando se quiera la paginacion en la parte de arriba) */

/* .fixed-table-pagination {
    /* clear: unset !important; */
    /* margin-top: -54px; */
/* } */

/* Para que aparezcan los iconos en los botones de la tabla*/
.glyphicon {
    display: inline-block;
    font: normal normal normal 16px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-list-alt:before {
    content: "\f022";
}

.icon-share:before{
    content: "\f045";
}

.icon-th:before{
    content: "\f00b";
}

.flotante{
    position: absolute;
    top: 0px;
}

#boton-delete-shape{
    font-size: 6px;
    padding: 7px 4px;
    margin: 2px;
}
#boton-save-shape{
    font-size: 6px;
    padding: 7px 4px;
    margin: 2px;
}

.row-max-y300{
    overflow-y: auto;
    max-height: 300px;
}

.row-max-y250{
    overflow-y: auto;
    max-height: 250px;
}

.row-max-y200{
    overflow-y: auto;
    max-height: 200px;
}

.row-max-x300{
    overflow-y: auto;
    max-width: 300px;
}

.row-max-x250{
    overflow-y: auto;
    max-width: 250px;
}

.row-max-x200{
    overflow-y: auto;
    max-width: 200px;
}

.volver-flotante{
    position: absolute;
    top: 5px;
    left: 2%;
    z-index: 1100;
}

@media (max-width: 990px) {
    .volver-flotante{
        position: absolute;
        top: unset;
        left: 10px;
        bottom: 10px;
        z-index: 1100;
    }
}

@media (max-width: 576px) {
    .pull-right {
        float: unset;
    }
}

@media (min-width: 992px){
    .modal-lg {
        max-width: 1100px !important;
    }
}