@import url(../_mypets.css);
.pets{
    list-style: none;
    display: flex;
    flex-direction: column;
    margin:0;
    padding:0;
}
.pets>div {
    position:relative;
    display: flex;
    gap: 1em;
    padding:1em;
    margin-bottom:1em;
    background:#fff;
    border:1px solid #999;
    border-radius: 1em;
}
.pets>div>.pic{
    width:20%;
    height:20%;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.pets>div>.pic>img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    
}
.pets>div>.info {
    font-size:12px;
    color: #333;
}
.pets>div>.info>span{display:block}

.pets>div>.btn-group{
    position:absolute;
    top: .5em;
    right: .5em;
}

.img-flag{
    height: 30px;
    width: 30px;
    object-fit: cover;
    border-radius: 50%;
}


#lineChartContainer{position:relative;}
#lineChartContainer>canvas{width:100%;background:#fff;border-radius: 1em;}

.drp-calendar.left,
.drp-calendar.right{
    color:#000;
}

@media screen and (max-width: 768px) {
    .daterangepicker.show-ranges.ltr .drp-calendar.left,
    .daterangepicker.show-ranges.ltr .drp-calendar.right{width:100%;padding:0;border:0;float: none !important;}
    .daterangepicker .calendar-table{border-radius: 0;}
    .daterangepicker {
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 !important;
    }
    
    .daterangepicker .calendar-table {
        width: 100% !important;
    }
    
    .daterangepicker td, 
    .daterangepicker th {
        padding: 5px !important;
    }
}