.doughnut{
    position: relative;
    width: 100%;
    /* height: 90vh; */
}
/* @media screen and (max-width: 600px) {
  .doughnut{
    height: 100vw;
  }
} */
.chartjs-render-monitor .chartjs-x-axis-label,
.chartjs-render-monitor .chartjs-y-axis-label {
  font-size: min(2vw,12px);
}
.chart_title{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: min(4.2vw, 1.7rem);
    background-color: unset;
}
.daily_routine{
    display: flex;
    position: relative;
    align-items: stretch;
    justify-content: space-between;
    max-width: 800px;
    margin: auto;
}
.schedule{
    flex-wrap:wrap;
    img{
        width: 30%;
    }

}
.sentence{
    font-size: min(4vw, 2.5rem);
    font-weight: bold;
}
.example{
    font-size: min(7vw,3rem);
    font-weight: 900;
    text-align: left;
}
.content{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 40%;
    max-width: 500px;
    position: relative;
    margin-right: 0;
    margin-left: auto;
    &::before{
        content: "";
        position: absolute;
        width: min(2vw, 2%);
        background-color: #3498db;
        left: -26%;
        top: 0;
        bottom: -20%;
        z-index: 1;
    }
    &:nth-child(even){
        flex-direction: row-reverse;
        margin-right: auto;
        margin-left: 0;
        &::before{
            left: unset;
            right: -26%;
        }
        .connection{
            &::after{
                left: 75%;
            }
        }
    }
}
.connection{
    width: 100%;
    position: relative;
    z-index: revert-layer;
    background-color: white;
    font-size: min(4vw, 2.5rem);
    font-weight: bold;
    &::after {
        content: "";
        position: absolute;
        width: 100%;
        left: 25%;
        top: 50%;
        background: #3498db;
        height: min(2vw, 1rem);
        z-index: -1;
        transform: translate(-50%, 50%);
    }
}
.arrow{
    font-size: min(4vw, 4rem);
    z-index: 1;
    position: relative;
    color: #3498db;

}
/* .meeting{
    background-image:url(../images/meeting.jpg);
}
.cashier{
    background-image:url(../images/cashier.jpg);
}
.instruction{
    background-image:url(../images/instruction.jpg);
}
.cleaning{
    background-image:url(../images/cleaning.jpg);
}
.plan{
    background-image:url(../images/plan.jpg);
}
.response{
    background-image:url(../images/response.jpg);
}
.front{
    background-image:url(../images/front.jpg);
} */