.CommunityEvents {
}

.CommunityEvent.line {
    border-radius: 10px;
    background: #FFFFFF;
    min-height: 60px;
    /*margin-bottom: 15px;*/
    padding: 10px;
    display: flex;
}

.CommunityEvent.line .box {
    flex: 1;
    display: flex;
}

.CommunityEvent.line .middle {
    flex: 1;
}

.CommunityEvent.line .title {
    display: block;
    font-weight: 600;
    font-size: 13px;
    margin-top: 5px;
    letter-spacing: 1px;
    flex: 1;
    color: inherit;
}

.CommunityEvent.line .info {
    font-weight: 200;
    font-size: 12px;
    margin-top: 8px;
    margin-right: 10px;
    text-transform: lowercase;
}

.CommunityEvent.line .image {
    width: 60px;
    height: 50px;
    margin-right: 15px;
}

.CommunityEvent.line .image .img {
    width: 60px;
    background-size: cover;    
    background-position: center center;    
    background-repeat: no-repeat;
    border-radius: 10px;
}

.CommunityEvent.line .icons {
    display: none;
}

.CommunityEvent.line .next {
    width: 28px;
    height: 44px;
    margin-right: 5px;
    background: url("../img/next-red.svg") left center no-repeat;
    background-size: contain;
}







.CommunityEvent.rect {
    border-radius: 10px;
    overflow: hidden;
    min-height: 230px;
    /*margin-bottom: 40px;*/
    padding: 15px;
    display: flex;
    align-items: flex-end;
    background-size: cover;    
    background-position: center center;    
    background-repeat: no-repeat;
}

.CommunityEvent.rect .title {
    display: block;
    font-weight: 600;
    font-size: 13px;
    margin-top: 5px;
    letter-spacing: 1px;
}
.CommunityEvent.rect .info {
    font-weight: 200;
    font-size: 12px;
    margin-top: 8px;
    margin-right: 10px;
    text-transform: lowercase;
}

.CommunityEvent.rect .date {
    display: block;
    font-weight: 200;
    font-size: 12px;
    margin-top: 8px;
}

.CommunityEvent.rect .box {
    background: #FFFFFF;
    display: flex;
    width: 100%;
    border-radius: 10px;
    margin-top: auto;
}

.CommunityEvent.rect .box .middle {
    flex: 1;
}

.CommunityEvent.rect .box .right {
    /*margin-left: 20px;*/
}

.CommunityEvent.rect .box > * {
    padding: 10px;
}

.CommunityEvent.canceled .name {
    text-decoration: line-through;
}


.CommunityEvent.archive > * {
    opacity: 0.5;
}

.CommunityEvent.archive .image img {
    filter: grayscale(1);
}