.event-calendar{
    width: 100%;
    border-radius: 5px;

}
.event-calendar-header{
    font-family: Quark-Bold;
    font-size: 30px;
    color: white;
    text-align: center;
    padding: 10px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background: #0a3d62;
}
.event-calendar button{
    width: 100%;
    font-size: 23px;
    padding: 10px;
    text-align: left;
    color: #0a3d62;
    font-family: Quark-Bold;
    background: white;
    text-transform: uppercase;
    border-radius: 5px;
    border:1px solid #636e72;
    outline: none;
}
.event-calendar button:hover{
    color: #0a3d62;
    background: #d9d9d9;
}
.event-calendar .active{
    color: #0a3d62;
    background: #d9d9d9;
}
.event-calendar button i{
    margin-top: 5px;
    float: right;
}
.event-calendar button i:before {
    content: "\f067";
    color: #0a3d62;
}
.event-calendar .active i:before {
    content: "\f068";
    color: #0a3d62;
}
.event-calendar-group{
    width: 100%;
    background: white;
    font-family: Quark-Bold;
    text-decoration: none;
    border-left: 1px solid #dfe6e9;
    border-right: 1px solid #dfe6e9;
}
.event-calendar-group a,
.event-calendar-group a:hover,
.event-calendar-group a:active,
.event-calendar-group a:focus{
    color: none;
    text-decoration: none;
}
.event-calendar-item{    
    padding: 5px;
    padding-left: 50px;
    background: white;
    border-bottom:1px solid #b2bec3;
}
.bg-gray{
    background: #f2f2f2;
}
/* .event-calendar-item:hover{
    background: #dfe6e9;
    text-decoration: none;
} */
.event-calendar-title{
    color: red;
    font-size: 23px;
    font-weight: 600;
}
.event-calendar-title .date-time{
    font-size: 17px;
    color: black;
}
.event-calendar-text p{
    margin: 0;
    font-size: 17px;
    font-weight: 600;
}

.event-calendar-text .course .icon{
    color:  #b3b300;
    text-transform: uppercase;
}
.event-calendar-text .course .topic{
    color: black;
    text-transform: uppercase;
}

@media (max-width: 575.98px) { 
    .event-calendar button{
        font-size: 20px;
    }
    .event-calendar-title{
        font-size: 18px;
    }
    .event-calendar-title .date-time{
        font-size: 15px;
    }
    .event-calendar-text p{
        font-size: 15px;
    }
    .event-calendar-item{    
        padding-left: 25px;
    }
 }

@media (min-width: 576px) and (max-width: 767.98px) {  }


@media (min-width: 768px) and (max-width: 991.98px) {  }

@media (min-width: 992px) and (max-width: 1199.98px) {  }

@media (min-width: 1200px) {  }