.container-basic{
    font-size: var(--fontMain);
}
.events{
    width: var(--eventwidth);
    flex-wrap: var(--flexwrap);
    gap: var(--eventsgap);
    margin: 0 auto;
    justify-content: center;
    /* justify-content: flex-start; */
}
.event-content .category{
    font-size: 15px;
    padding: 2px 5px;
    display: inline-block;
    color: #fff;
    background-color: var(--colorGrayLight);
    border-radius: 5px;
}
.display-month .month{
    font-size: 1.2em;
    font-weight: 500;
    color: #fff;
    display: inline-block;
    padding: 10px;
    margin-left: 10px;
}
a .event-holder{
    color: #000;
}
.event-holder .event-content{
    background-color: #fff;
    padding: 10px;
}
.event-holder.past{
    filter: brightness(0.91);
}
.event-content .title{
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.event-content .counter{
    font-size: 0.9em;
    color: #929292;
}
.event-content .location i{
    font-size: 20px;
    color: #d43030;
}
.event-content .time{
    color: #068d49;
}
.events a{
    flex: 0 0 var(--eventholderwidth);
}
.event-holder{
    width: var(--eventholderwidth);
    position: relative;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.event-image{
    width: var(--eventholderwidth);
    height: var(--eventholderheight);
    padding-top: var(--eventholderpaddingtop);
    overflow: hidden;
    position: relative;
}
.event-image img{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.img-null{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: var(--eventholderwidth) !important;
    height: var(--eventholderheight) !important;
}
.event-date{
    padding: 5px;
    color: #fff;
}

.show .banner{
    width: 100%;
    background-color: #929292;
    overflow: hidden;
    position: relative;
}
/* .show .banner img{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
} */
.show .info{
    font-size: 18px;
}
.show .datebox{
    color: #fff;
    display: inline-block;
    padding: 5px 10px;
}
.show .time{
    color: #068d49;
}
.show .marker i{
    color: #068d49;
}
.show .btn.zoom{
    color: #fff;
    padding: 5px 15px;
    margin-top: 5px;
    background-color: #617eff;
    display: inline-block;
}
.show .btn.zoom:hover{
    background-color: #849aff;
}
.show .em{
    word-break: break-word;
}
.small-text{
    font-size: 0.8em;
    color:  #929292;
}

.form-item{
    margin-bottom: 20px;
}

.form-item.group{
    display: none;
}

.form-item .checkbox{
    margin-top: 0px;
}

.form-item ul{
    padding: 0;
    margin-top: 5px;
    margin-bottom: 5px;
}

.form-item li{
    padding: 0;
    margin: 0;
    list-style: disc;
    list-style-position: inside;
}

.white-space{
    height: 10px;
    margin: 10px 0;
}

.em{
    opacity: 0.6;
    font-size: 18px;
}
.table-normal{
    display: block;
    overflow-x: auto;
}
.table-normal .name{
    width: 250px;
}
.table-normal .food{
    width: 230px;
}
.table-normal .email{
    width: 150px;
}

.img-holder{
    height: 250px;
    overflow: hidden;
}

.table-normal .count{
    color: var(--colorThemeDarker);
    font-weight: 600;
    opacity: 1;
}

.table-schedule tr:nth-child(1){
    background-color: #c8d6e6;
}
/*.table-schedule tr:nth-child(9){
    background-color: #f1facf;
}
.table-schedule tr:nth-child(11){
    background-color: #f1facf;
}
.table-schedule tr:nth-child(12){
    background-color: #c8d6e6;
}
.table-schedule tr:nth-child(15){
    background-color: #f1facf;
} */
/* .table-schedule tr:nth-child(5){
    background-color: var(--colorThemeDark);
    color: #fff;
} */

@media only screen and (max-width: 600px) {

    :root{
        --flexwrap: wrap;
        --eventsgap: 30px;
        --eventholderwidth: 100%;
        --eventholderheight: 260px;
        --eventholderpaddingtop: 50%;
        --eventwidth: 100%;
    }
    .event-image{
        height: 0px;
    }

    /* Medium devices: */
    .deskview{
        display: none;
    }
    .mobileview{
        display: block;
    }
    .img-holder{
        height: 150px;
    }
    .familyname{
        flex: 0 60%;
    }
}

@media only screen and (min-width: 601px) {

    :root{
        --flexwrap: wrap;
        --eventsgap: 30px;
        --eventholderwidth: 250px;
        --eventholderheight: 140px;
        --eventholderpaddingtop: 0px;
        --eventwidth: calc( var(--eventholderwidth) * 2 + var(--eventsgap));
    }

    /* Large devices: */
    .deskview{
        display: block;
    }
    .mobileview{
        display: none;
    }
    .familyname{
        flex: 0 50%;
    }
}

@media only screen and (min-width:870px) {
    :root{
        --flexwrap: wrap;
        --eventwidth: calc( (var(--eventholderwidth) + 30px) * 3 - var(--eventsgap));
    }
}

@media only screen and (min-width:1200px) {
    :root{
        --eventwidth: calc( (var(--eventholderwidth) + 30px) * 4 - var(--eventsgap));
    }
}