/*LiveWhale Widget Styles*/
.widget {
    padding: var(--gutter) 0;
    display: grid;
    grid-gap: var(--gutter) 0;
    grid-template-columns: var(--gutter) 1fr var(--gutter);
    align-content: start;
    --gutter: 20px;
}

    .widget > * {
        grid-column: 2 / -2;
    }

    .widget > .full {
        grid-column: 1 / -1;
    }

.hs {
    display: grid;
    grid-gap: calc(var(--gutter) / 2);
    grid-template-columns: 0px;
    grid-template-rows: 285px;
    grid-auto-flow: column;
    grid-auto-columns: 200px;
    overflow-x: scroll;
    padding-bottom: calc(.75 * var(--gutter));
    margin-bottom: calc(-.25 * var(--gutter));
}

    .hs:before,
    .hs:after {
        content: '';
        width: 10px;
    }

.widget ul {
    list-style: none;
    padding: 0;
}

.widget {
    width: 100%;
    height: 100%;
}

.hs > li,
.event {
    transform: scale(.96);
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgb(240, 240, 240);
    border-radius: 8px;
    border: solid 1px gray;
    background-repeat: no-repeat;
    height: 285px;
    background-size: 200px 200px;
}

.no-scrollbar {
    scrollbar-width: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

    .no-scrollbar::-webkit-scrollbar {
        display: none;
    }

.event-title {
    text-align: center;
    margin: 0 !important;
    max-width: 187px;
    color: #d95e00;
    max-height: 48px;
    font-size: 16px;
    overflow: hidden;
}

    .event-title span {
        width: 100%;
    }

.content-container {
    height: 100%;
    width: 100%;
    padding: 5px;
}

.event:hover .content-container {
    background-color: rgba(200, 200, 200, .5);
    border-radius: 8px;
    cursor: pointer;
}

.event:hover .read-more {
    visibility: visible;
}

.event:hover {
    transform: scale(1);
}

.event-date-time-row {
    margin: 0 !important;
    max-width: 187px;
    min-height: 20.16px;
    display: flex;
}

.event-date {
    margin: 0;
    padding: 0;
    font-size: 14px;
    width: 50%;
}

.event-time {
    text-align: right;
    margin: 0;
    padding: 0;
    font-size: 14px;
    width: 50%;
}

.read-more {
    display: grid;
    height: 190px;
    align-content: center;
    text-align: center;
    font-size: 30px;
    color: rgba(255, 255, 255, .9);
    visibility: hidden;
    margin-bottom: 10px;
}

.event-paddle-left {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    color: #ED7E1E;
    width: 20%;
    padding: 15px;
}

.event-paddle-right {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: #ED7E1E;
    width: 20%;
    padding: 15px;
}

.event-paddle-left i {
    transform: scale(3);
    text-align: center;
    cursor: pointer;
}

.event-paddle-right i {
    transform: scale(3);
    text-align: center;
    cursor: pointer;
}

.top {
    display: flex;
}