hubl/src/styles/layout/events/events.scss

solid-event section {
    max-width: 1400px;
    margin: auto;
}
#events,
#circle-events {
    width: 100%;
    font-family: "Facit";
    font-weight: 400;
    color: var(--color-main-text);
    solid-event {
        solid-display div {
            max-width: 1110px;
            solid-display {
                margin: 0 0 20px 40px;
            }
        }
        .red-button,
        .event-type {
            background-color: var(--color-secondary);
        }
        .black-button {
            background-color: var(--highlight-font-color);
            margin-left: 10%;
        }
        .event-type,
        .event-place-name {
            font-weight: 700;
        }
        #listevents,
        #circle-listevents {
            [name="name"],
            event-display-link-event .mdi::before {
                color: var(--color-primary);
            }
        }
        .event-place-name,
        .nextevent-startdate,
        event-display-link-event {
            color: var(--highlight-font-color);
        }
        .solid-event {
            font-family: "Facit";
            font-weight: 400;
            .page-title {
                font-family: "RefrigeratorDelxW01Bold";
                font-size: 3.2rem;
                line-height: 3.8rem;
                color: var(--color-primary);
            }
        }
        #default-listevents,
        #circles-listevents {
            .newtype .button {
                font-size: 1.2rem;
                width: max-content;
                height: max-content;
                padding: 5px 20px;
                color: var(--color-primary);
            }
            solid-form {
                solid-form-dropdown-label {
                    margin-left: 15px;
                    label {
                        height: 2.5rem;
                    }
                    &::before {
                        font-family: "RefrigeratorDelxW01Bold";
                        font-size: 2.4rem;
                        line-height: 29px;
                        color: var(--color-primary);
                        top: -40px;
                        content: "Research an event";
                    }
                }
            }
            [name="name"] {
                font-family: "RefrigeratorDelxW01Bold";
                font-size: 1.8rem;
                line-height: 2.6rem;
                letter-spacing: 0.32px;
                color: var(--color-primary);
                padding: 5px;
                max-width: 250px;
                margin: 5px auto;
            }
            .event-type {
                font-size: 1.1rem;
                padding: 5px 20px;
                width: max-content;
                height: max-content;
            }
            event-display-location-events {
                padding: 5px;
            }
        }
        .eventdetail {
            solid-display div {
                display: block;
            }
            .mdi::before {
                margin: 0 5px 0 20px;
            }
            [name="infotext"] {
                text-align: left;
            }
            [name="name"] {
                font-family: "RefrigeratorDelxW01Bold";
                font-size: 3.2rem;
                line-height: 3.8rem;
                color: var(--color-primary);
                display: block;
            }
            color: var(--color-primary);
            .event-type {
                width: max-content;
                padding: 5px 20px;
                font-size: 1.1rem;
                line-height: 1.3rem;
                height: 13px;
                margin: 10px 20px;
            }
            [name="longDescription"] p {
                font-size: 1.6rem;
                line-height: 2.6rem;
            }
            event-display-link-event a {
                font-size: 1.6rem;
            }
        }
        .newevent label div, 
        .newevent solid-form-file-label div label {
            line-height: 2.2rem;
            text-transform: uppercase;
            color: var(--form-title);
            font-size: 13px;
            font-weight: 600;
            font-family: Open sans;
        }
        .newevent select, 
        .newevent textarea, 
        .newevent input, 
        .newtype input {
            background-color: var(--form-inputs-background);
        }
        .newevent input[type="submit"],
        .newtype input[type="submit"],
        button {
            width: max-content;
            padding: 5px 20px;
            background-color: #3C3F57;
        }
        .newevent input[type="file"] {
            background-color: transparent;
        }
    }
    @media (max-width: 991px) {
        #listevents {
            margin-top: 65px;
        }
    }
}

#events {
    background-color: #f0f3f6;
}

#circle-events solid-event .events solid-form solid-form-dropdown-label select {
    background-color: #f0f3f6;
}

.with-sidebar nav>solid-router>ul [name="circle-events"] {
    li::before {
        content: '';
        height: 40px;
        width: 40px;
        mask: url('/images/appointment.svg') center no-repeat;
        mask-size: contain;
        -webkit-mask: url('/images/appointment.svg') center no-repeat;
        -webkit-mask-size: contain;
        background-color: var(--color-right-menu-text);
    }
    &[active] li::before {
        background-color: var(--color-right-menu-active-text);
    }
}