/*flechas left y right*/
    .left, .right {
        cursor: pointer;
    }
    .angel-left, .angel-right {
        font-size: 32px;
        color: #4CAF50;
    }
    .angel-left{
        float: right;
    }
    .angel-right{
       float: left;
    }
    /* titulo del mes */
    .mes-titulo{
        font-size: 24px;
        text-align: center;
    }
    /* Tabla del calendario */
    .calendar{
        margin: 50px auto;
        width: 20%;
        height: 250px;
    }
    .calendar-day, .calendar-day-head{
        border-bottom: 1px solid #d2d2d2;
        padding: 9px;
        text-align: center;
    }
    .calendar-day-head{
        background: #4CAF50;
        color: #FFFF;
    }
    .dia_programado{
        background: #ccf7ce;
        border-radius: 50%;
        cursor: pointer;
        /* padding: 5px; */
    }
    /* Cartas de programados */
    .sin_programa{
        text-align: center;
    }
    .row-alert{
        justify-content: center;
    }
    .alarma{
        margin: 20px auto;
        width: 30%;
    }
    .contenedor{
        margin: 10px auto;
        width: 60%;
        display: none;
    }
    .horario{
        background-color: #4caf50;
    }
    /* Dia actual en el mes */
    .dia_act{
        border-color: #F44336 !important;
        border-radius: 50%;
        /* background: #FFC107; */
        /* padding: 2px; */
    }
    .day-number {
        width: 30px;
        height: 30px;
        padding: 2px;
        box-sizing: border-box;
        border: solid 3px transparent;
    }
    .borde {
        border-bottom: 1px solid #4CAF50;
    }
    .dia_entrenamiento{
        background: #ECF622;
        border-radius: 50%;
        cursor: pointer;
        padding: 5px;
    }

/* media query */
@media (min-device-width: 320px) and (max-device-width: 480px) {
    .calendar{
        margin: 10px 10px;
        width: 100%;
        height: 400px;
    }
    .mes-titulo{
        font-size: 20px;
    }
    .calendar-day, .calendar-day-head{
        padding: 3px 10px;

    }
    .contenedor{
        width: 100%;
        margin: 10px 10px;
    }
    .dia_programado{
        border-radius: 100%;
        padding: 2px;
    }
}

@media (min-device-width: 481px) and (max-device-width: 768px) {
    .calendar{
        margin: 20px auto;
        width: 50%;
    }
    .contenedor{
        width: 98%;
    }
}