.card-custom{
    background: #fff;
    padding: 15px;
    margin: 20px 0;
    border-radius: 15px;
    /*box-shadow: 0 0 16px #cdcbcb;*/
}
.card-custom .card-custom {
    margin: 0;
    padding: 10px;
}
.card-custom.head{
    background: #2d2d2d;
    display: flex;
    justify-content: center;
    align-items: center;
}
.card-custom.head a{max-width: 80%}
.card-custom.head h2{
    color: #fff;
}
.card-custom.body {}
.card-custom.body h2{
    font-size: 20px;
    font-weight: 700;
}
.card-custom.body h3{
    font-size: 16px;
    margin: 14px 0px;
}
.card-custom.body .step{
    margin: 0;
    padding: 0;
    list-style: none;
}
 .card-custom.body .step li{
    display: flex;
    line-height: 30px;
    padding: 5px;
     opacity: 0.3;
}
 .card-custom.body .step li.active{
    color: #2861c7;
    opacity: 1;
 }
.card-custom.body .step li.active span{
    color: #2861c7;
    border: solid 2px #2861c7;
}
.card-custom.body .step li span{
    border: solid 2px #252525;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    margin: 0 10px;
    /*color: #181818;*/
}
.card-custom.body .step li i{
    margin: 0 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #2861c7;
}
h3.date{
    text-align: center;
    font-size: 16px;
}
h3.date span{
    font-size: 14px;
}
.calendar {
    display: flex;
    justify-content: start;
    align-items: start;
    flex-wrap: wrap;
}

.calendar .day {
    background: #fff;
    border: none;
    width: 14%;
    padding: 6px;
    color: #979797;
}

.calendar .day.active:hover {
    background: #f5f5f5;
}

.calendar .day.active.select {
    border: solid 1px #ccc;
}
.calendar .day.active {
    transition: 0.3s;
    color: #000;
}

.timetable{ display: flex; justify-content: start; flex-wrap: wrap}
.timetable .hour{
    background: #fff;
    border: solid 1px #bbb;
    margin: 10px;
    width: 15%;
    transition: 0.3s;
}
.timetable .hour:hover{
    background: #f5f5f5;
}
.timetable .hour.select {
    border: solid 1px #000;
    background: #e3e3e3;
}
.circle-success{
    background: #fff;
    border: solid 2px #00eb28;
    color: #00eb28;
    padding: 15px;
    border-radius: 50%;
    margin: 10px;
}
.circle-success i{
    font-size: 25px;
}

.step-4 h2{
    font-size: 20px;
}

 @media only screen and (max-width: 667px){
    
    .timetable .hour{
        background: #fff;
        border: solid 1px #bbb;
        margin: 10px;
        width: 25%;
        transition: 0.3s;
    }
}