:root {  --background-color: #F8F7FA; --foreground-color: #FFFFFF; --text-color: #19181A; --highlight-text-color: var(--text-color); --active-text-color: #F8F7FA; --inactive-text-color: #A5A5A5; --btn-bg: #F8F7FA; --box-shadow: #EFEFEF; --border-width: .1rem; --border-radius: 1.5rem; --spacing: 1.8rem;}  .modal-body{ max-width: 500px;} .h3{ display: block; font-size: 1.17em; margin-block-end: 0.5em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold;} main section { display: block;} main button.h-main { border: none; background: none; padding: 0; margin-right: 0; margin-bottom: 0;} main section .actions { display: flex; align-items: center; flex-wrap: wrap; gap: 2rem; margin-bottom: 2rem;} main section h2.h-main { display: inline-flex;  color: var(--color-main); margin-bottom: 0;} main section .addLink {  text-align: right;  max-width: max-content; margin-left: auto;} #events button.h-main { display: inline;} #events .container > h2.h-main { display: inline; margin-left: 2rem;} @media screen and (min-width: 62em) { #events .wrap { display: grid; grid-template-columns: 1.5fr 1fr; gap: 4rem; }}#search-form { display: flex; border: .1rem solid var(--border-main); background: var(--bg-dark);} #search-form > button { width: 3.5rem; border: none; background: none; padding: 0 .75rem; color: var(--text-light); font-size: 2.2rem; font-weight: 600;} #filters { margin-top: 2rem;  } #categoryFilter { margin-bottom: 1.5rem;} #search-input { width: 100%; padding: .5rem; border: none; background: none; text-align: center; color: var(--text-light);} .btn-collapse { width: 100%; color: var(--text-light);} .btn-collapse h2 { margin-bottom: 0;} .filters-content { min-height: max-content;} #category > button { display: flex; align-items: center;} #see-calendar { display: none; margin-bottom: 2rem; margin-left: auto; border: none;}  .agenda { width: auto;  height: fit-content; background-color: var(--foreground-color); border-radius: var(--border-radius); box-shadow: 0px 0px 10px var(--box-shadow);} .agenda.hidden { height: 0; overflow: hidden; visibility: hidden;} @media screen and (max-width: 61.99em) { .agenda:not(.hidden) { margin-bottom: 5rem; }}  .calendar-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 20px; padding-bottom: 15px;} .calendar-toolbar > .prev-month > img { transform: rotate(180deg);} .calendar-toolbar > .current-month{ font-size: 20px; font-weight: bold; color: var(--highlight-text-color);} #events .agenda .btn { background: var(--btn-bg); border: none; border-radius: var(--border-radius); padding: 11px 15.5px; color: var(--highlight-text-color); font-family: 'Quicksand',sans-serif; font-weight: 600; font-size: 0.9rem; margin-right: 1px; box-shadow: 0px 0px 0px var(--box-shadow); aspect-ratio: 1;} .weekdays,.calendar-days{ display: grid; grid-template-columns: repeat(7,1fr); align-items: center;  padding-inline: var(--spacing); justify-items: stretch; gap: .5rem;}.weekdays{ padding-top: 12px;}.calendar-days{ padding-bottom: 12px;} .calendar-days > div,.calendar-days > button { display: grid; align-items: center; justify-items: center; aspect-ratio: 1/1; min-height: 5rem;} .calendar-days > button > span:not(.day) { max-width: 100%; font-size: 1rem; line-height: 1rem; text-align: left; white-space: nowrap; overflow: hidden;} .calendar-days > button > span.events { display: inline-flex; max-width: 100%; gap: .5rem; overflow: hidden;} .calendar-days > button > span.events > span { width: 1rem; height: 1rem; color: var(--color-main); background-color: var(--color-main); border-radius: 50%; flex-shrink: 0;} .calendar-days > button.current-day > span.events > span { color: var(--white); background-color: var(--white);} .calendar-days > button:active > span.events > span { color: var(--white); background-color: var(--white);} .weekday-name,[class$='-day']{  color: var(--text-color); text-align: center;  font-weight: 400; font-size: 1.6rem; border: none; background: none;} .weekday-name{ color: var(--highlight-text-color); font-weight: 700;} .current-day{ background-color: var(--color-main); color: var(--active-text-color); border-radius: var(--border-radius); font-weight: 700; transition: .5s; cursor: pointer; aspect-ratio: 1;} .padding-day{ color: var(--inactive-text-color); user-select: none;} .agenda .btn:hover,.agenda .month-day:hover{ border-radius: var(--border-radius); background-color: var(--white); color: var(--color-main); transition: .1s; cursor: pointer; box-shadow: inset 0px 0px 0px 1.5px var(--color-main);} .agenda .btn:focus,.agenda .month-day:focus{ border-radius: var(--border-radius); background-color: var(--color-main); color: var(--active-text-color);} .goto-buttons{ padding: 1.8rem; display: flex; justify-content: space-evenly;} .border-top{ border-top: var(--border-width) solid var(--box-shadow);} #modal-daily,#modal-event { overflow: auto;}  #results { margin-top: 2rem; margin-bottom: 2rem; display: none;} #results.visible { display: block;} #results .noresult { font-weight: 600; font-size: 1.8rem; color: var(--color-main);}  #modalTitle { font-weight: 600;} #modal-daily header { padding-bottom: 3rem; border-bottom: .1rem solid var(--border-profile); margin-bottom: 2rem;} #events .last-events .h-main,#results .h-main { color: var(--text-main); margin-bottom: 2rem;} #modal-daily h3 span,#events .last-events h3 span,#results h3 span { margin-right: 1rem;} #modal-daily .modal-content { padding: 0;} #modal-daily .modal-content p { text-align: center; color: var(--text-main); font-size: 0.9em; width: max-content;} #modal-daily article { padding: 1rem;} #events .last-events article,#results article{ padding: 1rem; background: var(--white);  box-shadow: 0 1px 5px #00000015;} #events .last-events.next article { max-width: 30rem;} #modal-daily article:not(:last-child) { margin-bottom: 1rem;} #events .last-events article:not(:last-child),#results article:not(:last-child) { margin-bottom: 2rem;} #modal-daily article .body,#events .last-events article .body,#results article .body { display: grid; grid-template-columns: repeat(2,1fr); justify-items: center; align-items: center; margin-bottom: 2rem;} #modal-daily article .body{ margin-bottom: 0;} #modal-daily article button,#events .last-events article button,#results article button { margin-left: auto; display: block;} #modal-daily article h3,#events .last-events article h3,#results article h3 { margin-bottom: 2rem;} #modal-daily article h3{ margin-bottom: 1em;}#modal-daily header,#modal-daily .modal-actions{ display: none;} #events .last-events{ overflow-y: auto; max-height: 56em;} @media screen and (min-width: 48em) { #modal-event { min-width: 40rem; }} #modal-event .header > small { display: flex; justify-content: right; align-items: center; gap: .6rem;} #modal-event .header img { max-width: 5rem; max-height: 5rem; margin: 0;} #modal-event .socials { display: flex;} #modal-event .description p { margin-bottom: 1rem;} #modal-event .socials img { width: 2rem; filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(0%);} #modal-event .socials li:not(:last-child) { margin-right: 2rem;} #modal-event .time { display: grid; grid-template-columns: repeat(2,1fr); grid-template-rows: 1fr auto; grid-template-areas: "start end" "time time";} #modal-event .time .start { grid-area: start;}#modal-event .time .end { grid-area: end;} #modal-event .time .start,#modal-event .time .end { display: flex; flex-direction: column; color: var(--color-main); font-weight: 100; text-align: center; justify-self: center;} #modal-event .time .start .wrapper,#modal-event .time .end .wrapper { display: flex; flex-direction: column; justify-content: center; padding: .8rem; border-radius: .5rem; box-shadow: var(--text-lighter) 0 .1rem .2rem .1rem;} #modal-event .time .start .day,#modal-event .time .end .day { font-size: 1.8rem; color: var(--text-main);} #modal-event .time .start .date,#modal-event .time .end .date { font-size: 4rem; line-height: 1; font-weight: 800;} #modal-event .time .start .month-year,#modal-event .time .end .month-year { font-size: 1.8rem; color: var(--text-main);} #modal-event .time .start .year,#modal-event .time .end .year { font-size: 3rem;} #modal-event .time .start .time,#modal-event .time .end .time { font-weight: 600; font-size: 2.5rem; justify-content: center; color: var(--white); background-color: var(--text-color); margin-top: 1rem; border-radius: .5rem; box-shadow: var(--text-lighter) 0 .1rem .2rem .1rem; margin-bottom: 2rem;} #modal-event .time .time { grid-area: time; display: flex; color: var(--text-main); margin-top: 2rem; justify-content: center; font-size: 2rem;} .see-more { width: max-content; font-weight: 400; color: var(--color-main); text-transform: none;}@media screen and (min-width: 36em) { .see-more { grid-area: highlighted3-end; justify-self: end; }} .see-more::after { filter: invert(26%) sepia(39%) saturate(6483%) hue-rotate(208deg) brightness(90%) contrast(90%);} .container-socials{ display: flex; flex-direction: row; gap : 5rem; margin-top: 3rem; align-items: center; justify-content: center;} .fb-share-button{ margin-top: -.4rem;} .container-socials a:not(:last-child) { margin-right: 1.5rem;} .container-socials img { filter: contrast(35%); max-width: 2.5rem;} .view{ display: block!important; margin: 2rem 0;}  .comments { position: relative; padding-top: 0!important; margin-top: 5rem;} .comments::before { content: ''; position: absolute; top: 0; left: 0; display: block; height: 100%; width: 100%; background-color: var(--white); z-index: -1;} .comments .h-main { color: var(--color-main); font-weight: 600;} #commentForm { display: flex; flex-direction: column; max-width: 100%; margin-bottom: 3rem;} #addComment { width: 100%; height: auto; min-height: 10rem; color: var(--text-main); padding: 1rem; border: .1rem solid var(--border-main);} #btnConfirmComment { flex-grow: 0; width: max-content; align-self: end; margin-top: 3rem;} .comments #visitor-message { font-size: 1.8rem; font-weight: 200; margin-bottom: 2rem; color: var(--color-secondary);} .comments #visitor-actions { display: flex; flex-wrap: wrap; max-width: 40rem; gap: 2rem;} .comments #visitor-actions a { flex-grow: 1;} .comments .mainComment button { background: none; border: none; color: var(--text-lighter); padding: 0;} .comments .comment { display: flex; flex-direction: column; padding: 0rem 2rem !important;} .comments .comment .options { display: flex; justify-content: flex-end; align-items: center;} .comments .comment .options a:not(:last-child) { margin-right: 1rem;} .comments .comment .options img { height: 1.5rem;} .comments .comment .main { display: flex; align-items: center;} .comments .comment figure { margin-right: 3rem; max-width: 5rem;} .comments .comment img { max-width: 5rem;} .comments .comment .text span:not(.name) { color: var(--text-lighter); font-size: 1.4rem;} .comments .comment .text .name { color: var(--color-main);} .comments .comment .commentText { margin: .5rem 0; color: var(--text-main);} .comments .comment .commentText[contenteditable = "true"] { color: var(--text-light); padding: 1rem 2rem; border: .1rem solid var(--border-main);} .comments .comment .commentText[contenteditable = "true"]:focus-visible { outline: none;} .commentsList>li:not(:last-child) { margin-bottom: 5rem;} .commentsList .btn-collapse { color: var(--text-lighter); transform: translateX(8rem); font-size: 1.4rem; padding: 0;} .commentsList .btn-collapse::after {  display: none;} .commentsList form[name="responseForm"] { margin-left: 8rem; margin-bottom: 2rem; width: calc(100% - 8rem);} .commentsList form[name="responseForm"] textarea { width: 100%; border: .1rem solid var(--border-main); color: var(--text-main);} .commentsList form[name="responseForm"] input { display: block; margin-left: auto; margin-top: 2rem; font-size: 1.4rem;} .comments .responseList { margin-left: 8rem;} #save-editable-comment { float: right; font-size: 1.4rem; padding: 1rem 2rem;} .comments .responseList .respComment { margin-bottom: 1rem;} .modal-content .comment-review { display: block; padding: 2rem; margin: 2rem 0; border: .1rem solid var(--border-main);} .modal-content .slider-label { font-size: 1.4rem;} .inputComment{ width: 100%; resize: none;} .reply-form{ margin: 1rem 0rem;}