button.hidden,
.user-hidden,
.farm-hidden,
.search-hidden,
.hidden {
    display: none !important;
}



.btn-nav {
    width: 64px;
    height: 64px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin: 0px 2px;
}

.btn-nav img {
    height: 100%;
    width: 100%;
    background-size: cover;
    position: absolute;
    left: 0px;
    top: 0px;
    padding: 4px;
    filter: invert(1);
}


.btn-nav img.tag:hover {
    filter: invert(1);
    transition: all 0.3s;
}

.btn-nav img.tag:active {
    animation: none;
}

.btn-nav img.tag {
    height: 60%;
    width: 60%;
    filter: invert(0);
    background-color: white;
    border: 4px solid black;
    border-radius: 8px;
    z-index: 1000;
}

.btn-nav img.tag.chain {
    left: calc(70% + 4px);
    top: calc(60% + 4px);
}

.btn-nav img.tag.center {
    left: calc(15% + 4px);
    top: calc(60% + 4px);
}


@media screen and (max-width: 992px) {
    .btn-nav {
        width: 40px;
        height: 40px;
    }

    .btn-nav img.tag {
        height: 80%;
        width: 80%;
        filter: invert(0);
        background-color: white;
        border: 4px solid black;
        border-radius: 8px;
        z-index: 1000;
    }

    .btn-nav img.tag.chain {
        left: calc(50% + 6px);
        top: calc(50% + 4px);
    }

    .btn-nav img.tag.center {
        left: calc(0% + 4px);
        top: calc(50% + 4px);
    }

}

@media screen and (max-width: 480px) {
    .btn-nav {
        width: 32px;
        height: 32px;
    }
}


.btn-nav img:hover,
.btn-nav.active img {
    filter: invert(0);
    transition: all 0.3s;
}

.invert-img img {
    filter: invert(1);
}


img.size28 {
    width: 28px;
    height: 28px;
    margin: 2px;
}

img.size28+div {
    margin-left: 6px;
}

img.size40, button.size40 {
    max-width: 40px;
    max-height: 40px;
}
img.size40 {
    margin: 2px;
}

img.size40+* {
    margin-left: 6px;
}


.captions img+div {
    display: inline;
}

#weeks,
#filters {
    flex: 0.5;
}

.column-filter-panel {
    background-color: black;
    position: fixed;
    z-index: 1000;
}

/* #filter-type-panel {
    background-color: black;
    position: absolute;
    left: 146px;
}

#filter-days-panel {
    background-color: black;
    position: absolute;
    left: 190px;
} */

/* 
@media screen and (min-width: 576px) {
    #filter-status-panel {
        left: 58px;
    }    
    #filter-type-panel {
        left: 190px;
    }
    #filter-days-panel {
        left: 234px;
    }
  
} 

@media screen and (min-width: 992px) {
    #filter-status-panel {
        left: 82px;
    }    
    #filter-type-panel {
        left: 286px;
    }

    #filter-days-panel {
        left: 354px;
    }
}  */

#filter-status>div button,
#filter-type>div button,
#filter-days>div button {
    background-color: black;
}

#filter-status>div button img:hover,
#filter-type>div button img:hover,
#filter-days>div button img:hover {
    filter: invert(1);
    transition: all 0.3s;
    zoom: 0.5;
}

#filter-status button.selected,
#filter-status-panel button.selected {
    background-color: #e32878;
}

#filter-type button.selected,
#filter-type-panel button.selected {
    background-color: #e37328;
}


#filter-days button.selected,
#filter-days-panel button.selected {
    background-color: #e3dd28;
}


#tabs button.selected,
#filter-farm button.selected,
#filter-user button.selected {
    background-color: #3ca4ff;
}

#filter-search button.selected {
    background-color: #adf3ef;
}

#user-mode button:not(.coordinador):not(.supervisor) {
    display: none;
}

#user-mode button.coordinador>img {
    content: url(/assets/icons/icon/coordination.png);
}

#user-mode button.supervisor>img {
    content: url(/assets/icons/icon/god.png);
}

#user-mode button.selected {
    background-color: rgb(255, 103, 0)
}

[data-filter="status-all"]>img {
    content: url(/assets/icons/icon/all.png);
}

[data-filter="status-done"]>img {
    content: url(/assets/icons/icon/done.png);
}

[data-filter="status-undone"]>img {
    content: url(/assets/icons/icon/undone.png);
}

[data-filter="type-all"]>img {
    content: url(/assets/icons/icon/folders.png);
}

[data-filter="type-marcaje"]>img {
    content: url(/assets/icons/icon/stamp.png);
}

[data-filter="type-sacrificio"]>img {
    content: url(/assets/icons/icon/butcher.png);
}

[data-filter="type-vida"]>img {
    content: url(/assets/icons/icon/truck.png);
}

[data-filter="type-vacuna"]>img {
    content: url(/assets/icons/icon/injection.png);
}


[data-filter="days-all"]>img {
    content: url(/assets/icons/icon/calendar.png);
}

[data-filter="days-L"]>img {
    content: url(/assets/icons/icon/l.png);
}

[data-filter="days-M"]>img {
    content: url(/assets/icons/icon/m.png);
}

[data-filter="days-X"]>img {
    content: url(/assets/icons/icon/x.png);
}

[data-filter="days-J"]>img {
    content: url(/assets/icons/icon/j.png);
}

[data-filter="days-V"]>img {
    content: url(/assets/icons/icon/v.png);
}

[data-filter="days-S"]>img {
    content: url(/assets/icons/icon/s.png);
}

[data-filter="days-D"]>img {
    content: url(/assets/icons/icon/d.png);
}

[data-filter="days-L"]>img,
[data-filter="days-M"]>img,
[data-filter="days-X"]>img,
[data-filter="days-J"]>img,
[data-filter="days-V"]>img,
[data-filter="days-S"]>img,
[data-filter="days-D"]>img {
    zoom: 3;
}

.offcanvas-width-xl {
    --bs-offcanvas-width: min(95vw, 600px) !important;
}

.offcanvas-width-xxl {
    --bs-offcanvas-width: min(95vw, 90vw) !important;
}

.offcanvas-width-md {
    /* add Responsivenes to default offcanvas */
    --bs-offcanvas-width: min(95vw, 400px) !important;
}

.offcanvas-width-sm {
    --bs-offcanvas-width: min(95vw, 250px) !important;
}



.offcanvas-height-xl {
    --bs-offcanvas-height: min(95vh, 600px) !important;
}

.offcanvas-height-xxl {
    --bs-offcanvas-height: min(95vh, 90vh) !important;
}

.offcanvas-height-md {
    /* add Responsivenes to default offcanvas */
    --bs-offcanvas-height: min(95vh, 400px) !important;
}

.offcanvas-height-sm {
    --bs-offcanvas-height: min(95vh, 250px) !important;
}

footer>#status {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

footer>#status #connection img {
    width: 28px;
    height: 20px;
    border-radius: 6px;
    padding: 0px 2px;
    margin: 2px;
}

footer>#status #connection .icon-linked {
    background-color: yellowgreen;
}

footer>#status #connection .icon-unlinked {
    background-color: red;
}

footer>#status #connection.offline .icon-linked,
footer>#status #connection:not(.offline) .icon-unlinked,
footer>#status #connection:not(.offline) #pendigOperations {
    display: none;
}