@font-face {
    font-family: 'Montserrat';
    src: url('/public/platforma/fonts/Montserrat-Regular.woff') format('woff');
}

@font-face {
    font-family: 'Montserrat Light';
    src: url('/public/platforma/fonts/Montserrat-Light.woff') format('woff');
}

@font-face {
    font-family: 'Montserrat Bold';
    src: url('/public/platforma/fonts/Montserrat-Bold.woff') format('woff');
}

@font-face {
    font-family: 'Montserrat Black';
    src: url('/public/platforma/fonts/Montserrat-Black.woff') format('woff');
}

@font-face {
    font-family: 'Cambria Regular';
    src: url('/public/platforma/fonts/Cambria.woff') format('woff');
}

@font-face {
    font-family: 'Cambria Bold';
    src: url('/public/platforma/fonts/Cambria-Bold.woff') format('woff');
}

@font-face {
    font-family: 'Cambria Italic';
    src: url('/public/platforma/fonts/Cambria-Italic.woff') format('woff');
}

@font-face {
    font-family: 'Cambria BoldItalic';
    src: url('/public/platforma/fonts/Cambria-BoldItalic.woff') format('woff');
}

html, body {
    font-family: "Montserrat", sans-serif;
    font-size: 15px;
    background-color: var(--bgColorMain);
    color: var(--colorTextMain);
}

.rounded {
    border-radius: var(--borderRadius);
    overflow: hidden;
}

.bg-panel {
    background-color: var(--bgColorPanel);
    border-radius: var(--borderRadius);
    padding: 10px;
}

.icon {
    width: 24px;
    height: 24px;
}

input, select {
    width: 100%;
    height: 38px;
    border: 1px solid var(--colorBorder);
    border-radius: var(--borderRadius);
    padding: 5px;
    background-color: var(--bgColorPanel);
    color: var(--colorPrimary);
    outline: none;
}

h3 {
    font-size: 18px;
    font-family: "Montserrat Bold", sans-serif;
    margin-bottom: 10px;
    color: var(--colorMain);
}

h3:only-child {
    margin-bottom: 0;
}

.filter-search, .filter-friends {
    margin-bottom: 10px;
}

.filter-search-row {
    display: flex;
    margin-bottom: 10px;
}

.filter-search input:not(:last-child), .filter-search select:not(:last-child) {
    margin-right: 10px;
}

.filter-search-row input {
    width: calc(100% - 70px);
}

.filter-search__search-by-name__button {
    width: 60px;
    height: 38px;
    background-color: var(--colorMain);
    border-radius: var(--borderRadius);
    display: flex;
    align-items: center;
    justify-content: center;
}

.filter-search__search-by-name__button * {
    fill: var(--colorTextOnMainColor);
}

.event {
    margin-bottom: 10px;
    display: flex;
    cursor: default;
}

.event-timings {
    width: 100px;
}

.event-timings-time {
    margin-bottom: 10px;
}

.event-timings-time-end, .event-timings-weekday, .event-location {
    font-size: 12px;
    color: var(--colorTextSecondary);
}

.event-timings-time-start {
    margin-bottom: 4px;
}

.event-main {
    width: calc(100% - 180px);
    margin: 0 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.event-like {
    width: 60px;
}

.event-like-button {
    width: 100%;
    height: 30px;
    border: 1px solid var(--colorBorder);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--borderRadius);
}

.event-like svg {
    height: 20px;
}

.event-like * {
    fill: var(--colorTextSecondary)
}

.event_favourite .icon-heart-silhouette {
    display: none;
}

.event:not(.event_favourite) .icon-heart-fill {
    display: none;
}

.event_favourite .event-like-button {
    background-color: var(--colorMain);
    border: none;
}

.event_favourite * {
    fill: var(--bgColorPanel);
}

.shield {
    display: none;
    position: fixed;
    width: 100vw;
    height: 100vh;
    left: 0;
    top: 0;
    background-color: rgba(0,0,0,0.8);
    z-index: 3;
}

.popup {
    width: calc(100vw - 40px);
    max-width: 600px;
    margin: 20px auto;
    padding: 10px;
    border-radius: var(--borderRadius);
    background-color: var(--bgColorPanel);
}

.popup-header {
    height: 30px;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

.popup-content {
    max-height: calc(100vh - 80px);
    overflow: auto;
}

.event-details-avatar {
    background-size: cover;
    border-radius: var(--borderRadius);
}

@media screen and (max-width: 879px) {
    .event-details-avatar {
        width: calc(100vw - 60px);
        height: calc(100vw - 60px);
    }
}

@media screen and (min-width: 880px) {
    .event-details-avatar {
        width: 200px;
        height: 200px;
    }

    .event-details-header {
        display: flex;
        justify-content: space-between;
    }

    .event-details-main {
        width: calc(100% - 220px);
    }

    .popup-content {
        padding: 20px;
    }
}

.event-details-urls {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.event-details-url {
    color: var(--colorTextMain);
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid var(--colorBorder);
}

.event-details-url * {
    fill: var(--colorTextMain);
}

.event-details-description {
    margin-top: 10px;
}

.event-details-name {
    margin-top: 10px;
    font-size: 18px;
    color: var(--colorMain);
    font-family: "Montserrat Bold", sans-serif;
}

.event-details-location {
    margin-top: 10px;
    font-size: 15px;
    color: var(--colorTextMain);
}

.event-details-timings {
    margin-top: 5px;
    font-size: 15px;
    color: var(--colorTextSecondary);
}

.popup-header-close {
    display: flex;
    align-items: center;
    color: var(--colorMain);
}

.popup-header-close * {
    fill: var(--colorMain);
}

.popup-header-close svg {
    margin-right: 5px;
}

.event-main_with-details .event-name {
    text-decoration: underline;
    color: var(--colorMain);
}

.event-details-description pre {
    font-family: Montserrat, sans-serif;
    line-height: 16px;
    width: 100%;
    white-space: pre-wrap;
}

.popup-header-close {
    cursor: pointer;
}

.popup-event-details {
    cursor: default;
}

.bg-panel:not(:last-child) {
    margin-bottom: 10px;
}

.page-index {
    cursor: default;
}

.page-with-content h4 {
    font-size: 15px;
    font-family: "Montserrat Bold", sans-serif;
    margin-bottom: 10px;
    margin-top: 20px;
    color: var(--colorMain);
}

.page-with-content h5 {
    font-size: 15px;
    font-family: "Montserrat Bold", sans-serif;
    margin-bottom: 10px;
    margin-top: 20px;
}

.page-with-content p {
    margin-bottom: 4px;
}


.wide-padding {
    padding: 20px;
}

.page-with-content a {
    color: var(--colorMain);
    text-decoration: underline;
}

.post-time {
    color: var(--colorMainDark);
    font-family: "Montserrat Light", serif;
}

.post-title {
    font-family: "Montserrat Bold", sans-serif;
    margin-top: 5px;
    margin-bottom: 10px;
}