#programadas #tasks.status-done .card:not(.done),
#programadas #tasks.status-undone .card:not(.undone) {
    display: none;
}

#programadas #tasks.type-vida .card:not(.vida-carga):not(.vida-descarga):not(.vida-compra),
#programadas #tasks.type-sacrificio .card:not(.sacrificio),
#programadas #tasks.type-marcaje .card:not(.marcaje),
#programadas #tasks.type-vacuna .card:not(.vacuna) {
    display: none;
}


#programadas #tasks {
    margin-top: 4px;
    overflow-x: hidden !important;
}


#programadas #tasks .card.movimiento {
    margin: 4px 0px;
}

#programadas #tasks .card.movimiento div>img {
    margin-right: 8px;
    width: 32px;
    height: 32px;
}


#programadas #tasks .card.movimiento .card-title {
    font-weight: bold;
}

#programadas #tasks .card.movimiento .card-title>span {
    font-weight: normal;
    font-family: 'Courier New', Courier, monospace;
    background-color: #e1e1e1;
    padding: 0px 4px;
    font-size: 0.8em;
    display: flex;
    align-items: center;
    margin: auto 12px auto 0px;
}

#programadas #tasks .card.movimiento .col {
    display: flex;
}

#programadas #tasks .card.movimiento img+div {
    border-radius: 8px;
    border: 1px dashed silver;
    margin: 2px;
    flex: 1;
    padding: 0px 4px;
}

#programadas #tasks .card.movimiento .badge {
    align-self: center;
}

#programadas #tasks .card.movimiento .col {
    display: none;
}

#programadas #tasks .card.movimiento .col[all],
#programadas #tasks .card.movimiento.vida .col[vida],
#programadas #tasks .card.movimiento.vida-carga .col[vida],
#programadas #tasks .card.movimiento.vida-descarga .col[vida],
#programadas #tasks .card.movimiento.vida-compra .col[vida],
#programadas #tasks .card.movimiento.vida-carga .col[carga],
#programadas #tasks .card.movimiento.vida-descarga .col[descarga],
#programadas #tasks .card.movimiento.vida-compra .col[descarga],
#programadas #tasks .card.movimiento.vida-compra .col[compra],
#programadas #tasks .card.movimiento.marcaje .col[marcaje],
#programadas #tasks .card.movimiento.sacrificio .col[sacrificio],
#programadas #tasks .card.movimiento.vacuna .col[vacuna] {
    display: flex;
}

#programadas #tasks .card.movimiento:not(.marcaje-pendiente) .estado-marcaje-pendiente,
#programadas #tasks .card.movimiento:not(.marcador-no-asignado) .estado-marcador-no-asignado {
    display: none !important;
}

/* Necesito que lso badges ocupen espacio para que se 
   posicionen a la drechay por eso no puedo simplemente 
   ocultar la columna */
#programadas #tasks .card.movimiento .col[all].badges>* {
    display: none;
}

#programadas #tasks .card.movimiento.marcaje .col[all].badges>[marcaje],
#programadas #tasks .card.movimiento.sacrificio .col[all].badges>[sacrificio],
#programadas #tasks .card.movimiento.vida .col[all].badges>[vida],
#programadas #tasks .card.movimiento.vida-carga .col[all].badges>[vida],
#programadas #tasks .card.movimiento.vida-descarga .col[all].badges>[vida],
#programadas #tasks .card.movimiento.vida-compra .col[all].badges>[vida],
#programadas #tasks .card.movimiento.vida-carga .col[all].badges>[carga],
#programadas #tasks .card.movimiento.vida-descarga .col[all].badges>[descarga],
#programadas #tasks .card.movimiento.vida-compra .col[all].badges>[compra],
#programadas #tasks .card.movimiento.vida-compra .col[all].badges>[descarga],
#programadas #tasks .card.movimiento.vacuna .col[all].badges>[vacuna],
#programadas #tasks .card.movimiento.no-asignado .col[all].badges>[all] {
    display: block;
}


#programadas #tasks .card {
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 6px 10px rgba(0, 0, 0, .08), 0 0 6px rgba(0, 0, 0, .05);
    transition: 0.15s padding ease-in, .3s transform cubic-bezier(.155, 1.105, .295, 1.12), .3s box-shadow, .3s -webkit-transform cubic-bezier(.155, 1.105, .295, 1.12);
    cursor: pointer;
    padding: 10px 16px;
}

#programadas #tasks .card:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, .12), 0 4px 8px rgba(0, 0, 0, .06);
}

@media screen and (min-width: 768px) {
    #programadas #tasks .card {
        padding: 14px 80px 18px 36px;
        transition: 0.15s padding ease-out;
    }
}

#programadas #tasks .card.movimiento {
    overflow: hidden;
}

#programadas #tasks.days-L .card.movimiento:not(.days-L),
#programadas #tasks.days-M .card.movimiento:not(.days-M),
#programadas #tasks.days-X .card.movimiento:not(.days-X),
#programadas #tasks.days-J .card.movimiento:not(.days-J),
#programadas #tasks.days-V .card.movimiento:not(.days-V),
#programadas #tasks.days-S .card.movimiento:not(.days-S),
#programadas #tasks.days-D .card.movimiento:not(.days-D) {
    display: none;
}


@media screen and (max-width: 400px) {
    #programadas #weeks .prev, 
    #programadas #weeks .next {
      display: none !important;
    }

    #programadas #weeks button {
        margin: 0px 8px;
    }
}

.icon-container {
    position: relative;
}

/* span[class*="biosecurity-"] {
    position: absolute;
    bottom: 0;
    right: 0;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: white;
    font-weight: bold;
    border: 1px dotted gray;
} */

/* span[class*="biosecurity-"] {
    position: absolute;
    bottom: 0;
    right: 0;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: white;
    font-weight: bold;
    border: 1px dotted gray;
    text-shadow: 1px 0px 2px black, -1px 0px 2px black, 0px -1px 2px black, 0px 1px 2px black;
} */

#programadas span[class*="biosecurity-"] {
    border-radius: 10%;
    width: 25px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: white;
    font-weight: bold;
    border: 1px dotted gray;
    text-shadow: 1px 0px 3px black, -1px 0px 3px black, 0px -1px 3px black, 0px 1px 3px black;
    filter: saturate(0.75) opacity(0.75);
}

#programadas .card .row>div {
    align-items: center !important;
}