/*--------------------------------------------------------------------------------------------------------

# EVENT

--------------------------------------------------------------------------------------------------------*/
.display-flex .sv-archive-portlet {
   width: 100%;
}
.display-flex ul {
   display: flex;
   gap: 20px;
   flex-wrap: wrap;
}

.sap-event__item {
   display: flex;
   align-items: stretch;
   background-color: var(--env-section-background-color);
   height: 100%;
}

.sap-event__date, .sos-calendar-list__date  {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   font-family: "Ros Display", "Avenir", sans-serif;
   width: 100%;
   min-height: 11.25em;
   min-width: 11.25em;
   max-width: 11.25em;
   background-color: var(--env-element-secondary-background-color);
   box-sizing: border-box;
}

@media(max-width: 400px) {
   .sap-event__date, .sos-calendar-list__date {
      max-width: unset;
   }
}

.sap-event__date time,
.sos-calendar-list__date time {
   display: block;
   color: var(--env-element-secondary-font-color);
   font-family: inherit;
   font-size: 2.5em;
   font-weight: 600; 
   line-height: 1.17;
   text-transform: uppercase;
}

.sap-event__item .sap-event__date span:first-child,
.sap-event__item .sap-event__date time:first-child,
.sos-calendar-list__date time.day {
   color: var(--env-element-secondary-font-color);
   font-size: 4.375em;
   font-weight: 600;
   line-height: 1.17;
   font-family: inherit;
}

.sap-event__item .sap-event__date span:last-child,
.sap-event__item .sap-event__date time:last-child, 
.sos-calendar-list__date time.month {
   display: block;
   font-family: "Ros Display", "Avenir", sans-serif;
   color: var(--env-element-secondary-font-color);
   font-size: 2em;
   font-weight: 600; 
   line-height: 1.17;
   text-transform: uppercase;
   word-break: break-word;
}

.sap-event__txt {
   display: block;
   box-sizing: border-box;
   padding: 1.5em 2.125em;
   flex-grow: 1;
   box-sizing: border-box;
   
}

.sap-event__txt span.normal {
   font-size: 1.250rem;
}

.sap-event__item a {
   font-size: 1.563em;  
   font-weight: 600; 
   line-height: 1.17;
   text-decoration: none;
}

.sap-event__grey {
   margin-top: 1em;
}

.sap-event__grey span {
   font-size: 0.938em !important;
}

@media screen and (max-width: 400px) {
   .sap-event__item {
      flex-flow: column;
   }
}


/*--------------------------------------------------------------------------------------------------------

# EVENT CALENDAR

--------------------------------------------------------------------------------------------------------*/

.sap-event .sv-font-rubrik-4 {
   font-weight: 600;
   font-size: 1.4rem;
}

.sap-event .c5137 th {
   text-transform: uppercase;
   font-weight: 600;
   padding: 0.2rem;
}

.sap-event td, th {
   text-transform: uppercase;
   font-weight: 600;
   text-align: center;
   padding: 0.2rem 1rem;
   margin: 10px;
   border: 1px solid white; 
   background-color:#FBF3F4;
}

.sap-event td:hover {
   background-color: #ffffff;
}

.sap-event a{
   font-weight:700;
   text-decoration: underline;
}

.sap-event a:hover{
   text-decoration: none;
}

/* Sets the month navigation, month back to the left instead of center */
.sap-event tr:nth-child(7) td,
.sap-event tr:nth-child(8) td {
   text-align: left;
}

.sap-event tr:nth-child(7) td:hover,
.sap-event tr:nth-child(8) td:hover {
   background-color: #ffffff;
}

.sap-event tr:nth-child(7) td a:hover,
.sap-event tr:nth-child(8) td a:hover {
   color: #000000;
   text-decoration: none;
}

@media only screen and (max-width: 600px) {
   .sap-event td,
    .c5137 th {
       padding: 0.8rem 0.8rem;
   }

   .sap-event td,
   .sap-event td a,
   .c5137 th {
       font-size: 1.4rem;
   }
   
   
}

/* Startsida */

.sv-template-startsida-2024 .sv-defaultlist:has(.sap-event__item),
.sv-template-startsida .sv-defaultlist:has(.sap-event__item) {
   display: flex;
   flex-wrap: wrap;
   gap: 1.5em;
}
.sv-template-startsida-2024 .sv-defaultlist li:has(.sap-event__item), 
.sv-template-startsida .sv-defaultlist li:has(.sap-event__item) {
   width: 100%;
   margin-bottom: 0 !important;
}

@media (min-width: 990px) {
   .sv-template-startsida-2024 .sv-defaultlist li:has(.sap-event__item), 
	.sv-template-startsida .sv-defaultlist li:has(.sap-event__item) {
   	width: calc(100% / 2 - 0.75em);
	}
}

/*--------------------------------------------------------------------------------------------------------

# NEWS & EVENT FILTER

--------------------------------------------------------------------------------------------------------*/

/* Kalender / Evenemang */

.sos-calendar-list {
   display: flex;
   flex-direction: column;
   gap: 2rem;
   margin-bottom: 2rem;
   
}

.sos-calendar-list__item {
   display: flex;
   border-radius: var(--env-border-radius);
   overflow: hidden;
   background-color: var(--env-section-background-color);
   box-shadow: none;
   transition: all 0.2s ease;
   max-width: 750px;
   width: 100%;
}

.sos-calendar-list__item:hover {
   box-shadow: var(--env-box-shadow-small);
   transform: translateY(-2px);
}

.sos-calendar-list__info {
   display: flex;
   flex-direction: column;
   gap: 1rem;
   padding: 1.85em 1.875em;
}

.sos-calendar-list__info a {
   text-decoration: none;
}

.sos-calendar-list__info h3, .sos-calendar-list__info h1, .sos-calendar-list__info h2 {
   margin: 0;
}

.sos-calendar-list__place {
   font-size: 1rem !important;
}

.sos-calendar-list__summary {
   display: none;
}

.sos-calender-list__tags {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
   margin-top: 0.5rem;
}

.sos-calender-list__tags .env-badge--neutral {
   background-color: var(--env-border-color);
   color: var(--env-font-color);
}