/*
@import url('https://fonts.googleapis.com/css2?family=Barlow&family=Barlow+Condensed:wght@500&family=Barlow+Semi+Condensed:wght@500&family=EB+Garamond&display=swap');
*/
@font-face {
    font-family:SL Gothic Text Regular;
    src:url(/customer/fonts/SLGothicText2-Regular.d61f5291.eot);
    src:url(/customer/fonts/SLGothicText2-Regular.d61f5291.eot) format("embedded-opentype"),
    url(/customer/fonts/SLGothicText2-Regular.70a501bc.woff2) format("woff2"),
    url(/customer/fonts/SLGothicText2-Regular.d09af25e.woff) format("woff")
}
@font-face {
    font-family:SL Gothic Text Regular Italic;
    src:url(/customer/fonts/SLGothicText2-RegularItalic.84832d8e.eot);
    src:url(/customer/fonts/SLGothicText2-RegularItalic.84832d8e.eot) format("embedded-opentype"),
    url(/customer/fonts/SLGothicText2-RegularItalic.f4b014c8.woff2) format("woff2"),
    url(/customer/fonts/SLGothicText2-RegularItalic.03b90cdc.woff) format("woff")
}
@font-face {
    font-family:SL Gothic Text Medium;
    src:url(/customer/fonts/SLGothicText2-Medium.0664f5bb.eot);
    src:url(/customer/fonts/SLGothicText2-Medium.0664f5bb.eot) format("embedded-opentype"),
    url(/customer/fonts/SLGothicText2-Medium.a8e05014.woff2) format("woff2"),
    url(/customer/fonts/SLGothicText2-Medium.4001a707.woff) format("woff")
}
@font-face {
    font-family:SL Gothic Text Medium Italic;
    src:url(/customer/fonts/SLGothicText2-MediumItalic.9f11f3f9.eot);
    src:url(/customer/fonts/SLGothicText2-MediumItalic.9f11f3f9.eot) format("embedded-opentype"),
    url(/customer/fonts/SLGothicText2-MediumItalic.ae55972b.woff2) format("woff2"),
    url(/customer/fonts/SLGothicText2-MediumItalic.01ba3802.woff) format("woff")
}
@font-face {
    font-family:SL Gothic Text Bold;
    src:url(/customer/fonts/SLGothicText2-Bold.ca61954e.eot);
    src:url(/customer/fonts/SLGothicText2-Bold.ca61954e.eot) format("embedded-opentype"),
    url(/customer/fonts/SLGothicText2-Bold.7f49c205.woff2) format("woff2"),
    url(/customer/fonts/SLGothicText2-Bold.8b90c074.woff) format("woff")
}
@font-face {
    font-family:SL Gothic Text Bold Italic;
    src:url(/customer/fonts/SLGothicText2-BoldItalic.93fc9dc6.eot);
    src:url(/customer/fonts/SLGothicText2-BoldItalic.93fc9dc6.eot) format("embedded-opentype"),
    url(/customer/fonts/SLGothicText2-BoldItalic.959ee772.woff2) format("woff2"),
    url(/customer/fonts/SLGothicText2-BoldItalic.3192a4fc.woff) format("woff")
}
@font-face {
    font-family:SL Gothic Display Bold;
    src:url(/customer/fonts/SLGothicDisplay-Bold.0b0c8f05.woff2) format("woff2"),
    url(/customer/fonts/SLGothicDisplay-Bold.6c1c3944.woff) format("woff")
}

/* ==========================================================
   KUND ANPASSADE STYLE INSTÄLLNINGAR
   Sätt ett värde på variablarna eller använd 0/none, kommentera inte bort variablarna.
   Om du vill använda dig utav hero bild, lägg till bild i images/hero.jpg/jpeg/png
   ========================================================== */

:root {

  /* GENERAL ----------------------------- */
  --primary-color: #ad1414; /* Använd denna för en generell användbar färg */
  --secondary-color: #f5bec3; /* Använd denna för en generell användbar färg */
  --tertiary-color: #fdedea; /* Använd denna för en generell användbar färg */
  --yellow-color: #ffcd05;
  --green-color: #00282d;
  --white-color: #fff;
  --black-color: #000;
 
  --radius-xs: 0.5rem;
  --radius-sm: 0.8rem;
  --radius-md: 1.2rem;
  --radius-lg: 1.8rem;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 6px 32px rgba(0, 0, 0, 0.10);

  /* GENERAL END ----------------------------- */

  /* Body */
  --body-bg: var(--tertiary-color);
  --body-font: "barlow", serif;
  --body-font: "SL Gothic Text Regular", serif;

  /* Typography */
  --headline-font: "barlow", serif;
  --headline-font:"SL Gothic Text Bold";
  --headline-font-weight: 700;
  --headline-color: var(--black-color); 

  --text-font: "EB Garamond", serif;   /* Typography paragraphs */
  --text-font-weight: 400;
  --text-color: var(--black-color);
  --text-muted: var(--secondary-color);

  /* Content, main container - see how it looks with hero img and without */
  --main-padding: 3rem;
  --main-padding-mobile: 1rem;
  --main-bg: var(--white-color);
  --main-border: 0px solid var(--white-color);  /* ex 1px solid #fafafa; */
  --main-border-radius: 1rem;
  --main-shadow: var(--shadow-md); /* ex. var(--shadow-md) */

  --start-page-main-bg: #00000000;
  --start-page-main-border: none;  /* ex 1px solid #fafafa; */
  --start-page-main-border-radius: 1rem;
  --start-page-main-shadow: none; /* ex. var(--shadow-md) */

  --event-page-main-bg: #00000000;
  --event-page-main-border: none;  /* ex 1px solid #fafafa; */
  --event-page-main-border-radius: 1rem;
  --event-page-main-shadow: none; /* ex. var(--shadow-md) */

  /* Hero */
  --hero-no-img-height: 120px; /* minumum height utan bild */  
  --hero-no-img-bg: rgba(0, 0, 0, 0);

  --hero-no-img-headline-color: var(--primary-color); /* Rubriken på varje sida, utan bild*/
  --hero-no-img-lead-font: "SL Gothic Text Bold", serif;
  --hero-no-img-lead-color: var(--primary-color); /* Texten under rubriken */

  --hero-img-height: 280px; /* minumum height med bild*/
  --hero-img-bg: rgba(0, 0, 0, 0.394); /* Overlay färg på bild */
  --hero-img-headline-color: #d6dde6; /* Rubriken på varje sida, med bild*/
  --hero-img-lead-font: "barlow", serif; 
  --hero-img-lead-font: "SL Gothic Text Regular", serif;
  --hero-img-lead-color: #e1e2eb; /* Texten under rubriken */

  /* Navbar */
  --navbar-height: 90px;
  --navbar-font: "SL Gothic Text Bold"; /* Fontfamily namn */
  --navbar-bg: var(--green-color);
  --navbar-shadow: var(--shadow-sm); /* Använd shadow sm/md/lg, egen eller ingen */
  --navbar-link-decoration: capitalize;
  --navbar-link: #ebf5f0;
  --navbar-link-hover: var(--yellow-color);

  /* Evenemang sida bild */
  --evpage-img-radius: var(--radius-sm);

  /* Links */
  --link-color: var(--primary-color);
  --link-decoration: none;
  --link-hover-color: var(--secondary-color);
  --link-hover-decoration: underline;
  --link-visited-color: var(--secondary-color);

   /* All btns */
  --btn-font-size: 1rem;
  --btn-font-weight: 500;
  --btn-border-radius: 999px;
  --btn-padding: 8px 16px;

  /* buttons primary */
  --btn-primary-bg: var(--green-color);
  --btn-primary-color: var(--white-color);
  --btn-primary-border: var(--green-color);

  --btn-primary-hover-bg: var(--green-color);   /* hover and focus */
  --btn-primary-hover-color: var(--white-color); /* hover and focus */
  --btn-primary-hover-border: var(--green-color); /* hover and focus */

  /* buttons primary outline */
  --btn-outline-primary-bg: none;
  --btn-outline-primary-color: var(--green-color);
  --btn-outline-primary-border: var(--green-color);

  --btn-outline-primary-hover-bg: var(--green-color);   /* hover and focus */
  --btn-outline-primary-hover-color: var(--green-color); /* hover and focus */
  --btn-outline-primary-hover-border: var(--green-color); /* hover and focus */

  /* Badge */
  --badge-padding: 0.3rem 0.6rem;
  --badge-font-size: 0.8em;

  /* event Card */
  --evcard-bg: #ffffff00;
  --evcard-bg: var(--white-color);
  --evcard-border: none;
  --evcard-border-radius: var(--radius-md); /* Använd t.ex. 12px 0px om du har en border eller shadow */
  --evcard-img-border-radius: 12px 0px;
  --evcard-shadow: var(--shadow-md); /* Använd shadow sm/md/lg, egen eller ingen */
  --evcard-color: var(--black-color);

  --evcard-hover-shadow: var(--shadow-md);
  --evcard-hover-bg: #ffffff00;
  --evcard-hover-bg: var(--white-color);

  --evcard-title-font: "Barlow Semi Condensed", sans-serif;
  --evcard-title-font: "SL Gothic Text Regular", serif;

  --evcard-title-font-size: 1.25rem;
  --evcard-title-font-weight: 500;
  --evcard-title-font-color: var(--black-color);

  --evcard-byline-font: sans-serif;
  --evcard-byline-font-size: 1rem;
  --evcard-byline-font-weight: 300;
  --evcard-byline-font-color: var(--black-color);

  /* Form */
  --form-input-bg: var(--white-color);
  --form-input-border-radius: var(--radius-xs);
  --form-input-border: #cad7df;
  --textarea-border-radius: var(--form-input-border-radius); /* larger text areas */

  /* Tables */
  --table-background: none;
  --table-thead-bg-color: #f8f9fa;

  /* Shopping basket */
  --basket-color: var(--white-color);

   /* Alert */
  --alert-border: none;   /* Ange inte en färg, det kommer automatiskt. None eller tomt värde */
  --alert-border-radius: 12px;

  /* Modals */
  --modal-bg: rgb(255, 255, 255);
  --modal-border: 1px solid #d1dbe2;
  --modal-border-radius: var(--radius-sm);

  /* Ev Accordion */
  --accordion-radius: var(--radius-sm);
  --accordion-border: 0;
  --accordion-box-shadow: var(--shadow-md);
  --accordion-margin-bottom: 1rem;  /* Space mellan varje accordion */

  --accordion-hover-shadow: var(--shadow-lg);
  --accordion-hover-transform: scale(1.01);  /* scale(1.02 or transform: translateY(-3px)) */

  --accordion-closed-color: var(--primary-color);
  --accordion-closed-bg: var(--white-color);
  --accordion-closed-border: 0; /* Only btn row */
  --accordion-closed-border-left: solid 6px var(--primary-color); /* Only btn row */
  --accordion-closed-font-weight: 600; /* Only btn row */
  --accordion-closed-font-size: 1.2rem; /* Only btn row */
  --accordion-closed-padding: 1.3rem 1.7rem; /* Only btn row */

  --accordion-open-bg: var(--primary-color);
  --accordion-open-color: var(--white-color);
  --accordion-open-border: 0;
  --accordion-open-body-bg: var(--white-color);

  --accordion-arrow-closed-color: var(--primary-color);
  --accordion-arrow-open-color: var(--white-color);

  /* Datepicker */
  --datepicker-border-color: #d1dbe2;   /* Colors */
  --datepicker-border-radius: var(--radius-sm);
  --datepicker-bg: var(--tertiary-color);

  --datepicker-header-bg: #425e88;
  --datepicker-header-text-color: var(--white-color);
  --datepicker-heading-text-color: var(--primary-color);

  --datepicker-date-text-color: var(--white-color);
  --datepicker-date-border-radius: var(--radius-xs);

  --datepicker-default-date-bg: #9cb6de;
  --datepicker-default-date-border-color: #9cb6de;

  --datepicker-active-date-bg: #0c983f;
  --datepicker-active-date-border-color: #0c983f;
  --datepicker-active-date-font-weight: 700;   /* Typography */

  /* Fullcalendar */
  --fc-title-font-size: 1.25rem;
  --fc-title-color: #0f172a;
  --fc-title-font-weight: 600;
  --fc-title-style: uppercase; /* uppercase | lowercase | capitalize | none */

  --fc-header-padding: 6px;
  --fc-header-color: #0f172a;
  --fc-header-bg: #9cb6de;   /* Day Header */

  --fc-calendar-radius: var(--radius-md);   /* Calendar Container */
  --fc-body-bg: rgb(244, 244, 244);   /* Calendar Body color */

  --fc-grid-border-width: 2px;   /* Grid */
  --fc-grid-border-style: solid;
  --fc-grid-border-color: var(--white-color);

  --fc-day-padding: 4px;
  --fc-today-bg: #d4ded3;   /* Today */
  --fc-disabled-day-bg: #e8e8e8;   /* Disabled day */

  --fc-event-text: var(--primary-color);   /* Events */
  --fc-event-padding: 4px 8px;
  --fc-border-radius: var(--radius-xs);
  --fc-event-hover-brightness: 0.95;   /* Event hover */

  /* Sittplatser */
  --seat-button-radius: var(--radius-xs); /* Sittplatser knapp */

  /* Sittplatser evenemang */
  --btn-seat-list-bg: var(--tertiary-color);
  --btn-seat-list-color: var(--primary-color) ;
  --btn-seat-list-border: 2px solid #eeeeee ;
  --btn-seat-list-radius: var(--radius-sm);
  
  --btn-seat-list-hover-bg: rgb(224, 229, 231);
  --btn-seat-list-hover-color: var(--primary-color) ;
  --btn-seat-list-hover-border: 1px solid #eeeeee;

  --btn-seat-list-active-bg: #c9d9ab;
  --btn-seat-list-active-border: 1px solid #d4e1bd;
  --btn-seat-list-active-color: var(--primary-color) ;

  /* Footer */
  --footer-bg: var(--green-color); 
  --footer-color: var(--white-color);
  --footer-padding: 2rem 0;
  --footer-line-color: var(--hr-border-color);
  --footer-link-color: var(--white-color);
  --footer-link-hover-color: var(--yellow-color);

  /* Övrigt (lägg till egna delar här om önskas) */
  --hr-border-color: var(--tertiary-color);
}


/* ==========================================================
   BODY, TEXT
   ========================================================== */

body {
  background-color: var(--body-bg);
  font-family: var(--body-font);
}
h1, h2{
  font-family: var(--headline-font);
  font-weight: var(--headline-font-weight);
  color: #ad1414;;
}
h3, h4, h5, h6 {
  font-family: var(--headline-font);
  font-weight: var(--headline-font-weight);
  color: var(--headline-color);
}

p {
  font-family: var(--text-font);
  font-weight: var(--text-font-weight);
  color: var(--text-color);
}

.text-muted {
  color: var(--text-muted);
}

/* ==========================================================
   CONTENT - Main container
   ========================================================== */

#bodyContent header + main > .container-lg{
  padding: 10px;
  background-color: var(--main-bg);
  border: var(--main-border);
  border-radius: var(--main-border-radius);
  box-shadow: var(--main-shadow);
}

#bodyContent main.start-page > .container-lg {
  background-color: var(--start-page-main-bg) !important;
  border: var(--start-page-main-border) !important;
  border-radius: var(--start-page-border-radius) !important;
  box-shadow: var(--start-page-shadow) !important;
}

#bodyContent main.event-page > .container-lg {
  background-color: var(--event-page-main-bg) !important;
  border: var(--event-page-border) !important;
  border-radius: var(--event-page-border-radius) !important;
  box-shadow: var(--event-page-shadow) !important;
}

@media (min-width: 768px) {
  #bodyContent header + main > .container-lg{
    padding: var(--main-padding);
  }
}


/* ==========================================================
   HERO
   ========================================================== */

.hero-no-image{
  min-height: var(--hero-no-img-height);
  background-color: var(--hero-no-img-bg);
  color: var(--hero-no-img-headline-color);
}

.hero-no-image h2{
  color: var(--hero-no-img-headline-color);
}

.hero-no-image .lead, .lead a , .lead a:hover , .lead a:focus , .lead a:visited {
  font-family: var(--hero-no-img-lead-font);
  color: var(--hero-no-img-lead-color);
}

.hero-with-image {
  min-height: var(--hero-img-height);
}

.hero-with-image::before {
  background-color: var(--hero-img-bg);
}

.hero-with-image h2{
  color: var(--hero-img-headline-color);
}

.hero-with-image .lead, .lead a , .lead a:hover , .lead a:focus , .lead a:visited {
  font-family: var(--hero-img-lead-font);
  color: var(--hero-img-lead-color);
}


/* ==========================================================
   NAVBAR
   ========================================================== */

.navbar {
  min-height: var(--navbar-height);
  background-color: var(--navbar-bg);
  box-shadow: var(--navbar-shadow);
}

.navbar-toggler .fa-bars {
  color: var(--basket-color);
}
.navbar-toggler{
  border-color: var(--navbar-bg);
}

.navbar-nav .nav-link {
  color: var(--navbar-link);
  text-transform: var(--navbar-link-decoration);
  transition: color 0.2s ease;
  font-family: var(--navbar-font);
  font-size: 20px;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: var(--navbar-link-hover);
  text-decoration: none;
}

.nav-link {
  position: relative;
}

.nav-link:not(.dropdown-toggle)::after,
.nav-link.dropdown-toggle::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.8px;
  background-color: var(--navbar-link-hover);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
}

.nav-link:not(.dropdown-toggle):hover::after,
.nav-link:not(.dropdown-toggle):focus-visible::after,
.nav-link.dropdown-toggle:hover::before,
.nav-link.dropdown-toggle:focus-visible::before {
  transform: scaleX(1);
}

.navbar-brand img{
  max-height:69px;
}
.dropdown-menu {
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-md);
}

/* ==========================================================
   EVENT SIDA
   ========================================================== */

.evenPage-img{
  border-radius: var(--evpage-img-radius);
}

.btn-seat-list {
  background-color: var(--btn-seat-list-bg)!important;
  color: var(--btn-seat-list-color)!important;
  border: var(--btn-seat-list-border)!important;
  border-radius: var(--btn-seat-list-radius)!important;
  transition: all 0.2s ease;
}

.btn-seat-list:hover {
  background-color: var(--btn-seat-list-hover-bg)!important;
  color: var(--btn-seat-list-hover-color)!important;
  border: var(--btn-seat-list-hover-border)!important;
}

.btn-seat-list-active{
  background-color: var(--btn-seat-list-active-bg)!important;
  border: var(--btn-seat-list-active-border)!important;
  color: var(--btn-seat-list-active-color)!important;
}

/* ==========================================================
   LINKS
   ========================================================== */

a {
  color: var(--link-color);
  text-decoration: var(--link-decoration);
  transition: color 0.2s ease;
}

a:hover, a:focus{
  color: var(--link-hover-color);
  text-decoration: var(--link-hover-decoration);
}

a:visited {
  color: var(--link-visited-color);
}


/* ==========================================================
   BUTTONS
   ========================================================== */

.btn {
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  border-radius: var(--btn-border-radius);
  padding: var(--btn-padding);
}

.btn-primary {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-color);
  border: 1px solid var(--btn-primary-border);
  transition: all 0.2s ease;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--btn-primary-hover-bg);
  border-color: var(--btn-primary-hover-border);
}

.btn-outline-primary {
  background-color: var(--btn-outline-primary-bg);
  color: var(--btn-outline-primary-color);
  border: 1px solid var(--btn-outline-primary-border);
}

.btn-outline-primary:hover {
  background-color: var(--btn-outline-primary-hover-bg);
  color: var(--btn-outline-primary-hover-color);
  border: 1px solid var(--btn-outline-primary-hover-border);;
}

/* ==========================================================
   BADGES
   ========================================================== */

.accordion-body .badge {
  padding: var(--badge-padding);
  font-size: var(--badge-font-size); 
  color: var(--primary-color) !important;
  background-color: var(--tertiary-color)!important;
}

/* ==========================================================
   CARDS
   ========================================================== */

.evCard .card {
  overflow: hidden;
  background-color: var(--evcard-bg);
  border: 1px solid var(--evcard-border);
  border-radius: var(--evcard-border-radius);
  box-shadow: var(--evcard-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  color: var(--evcard-color);
}

.card:hover {
  box-shadow: var(--evcard-hover-shadow);
  background-color: var(--evcard-hover-bg);
}

.evCard .card-img-top {
    transition: transform 0.3s ease;
    border-radius: var(--evcard-img-border-radius);
}

.evCard:hover .card-img-top {
    transform: scale(1.05);
}

.card-title{
  font-family: var(--evcard-title-font);
  font-size: var(--evcard-title-font-size);
  font-weight: var(--evcard-title-font-weight);
  color: var(--evcard-title-font-color);
}

.card-byline{
  font-family: var(--evcard-byline-font);
  font-size: var(--evcard-byline-font-size);
  font-weight: var(--evcard-byline-font-weight);
  color: var(--evcard-byline-font-color);
}

/* ==========================================================
   FORMS
   ========================================================== */

.form-control,
.form-select {
  background-color: var(--form-input-bg);
  border-radius: var(--form-input-border-radius);
  border-color: var(--form-input-border);
}

.textarea {
  border-radius: var(--textarea-border-radius);
}

/* ==========================================================
   TABLES
   ========================================================== */

.table {
  background: var(--table-background);
}

.table thead {
  background-color: var(--table-thead-bg-color);
}

/* ==========================================================
   SHOPPING BASKET
   ========================================================== */

#basketMenuDiv .fa-shopping-basket {
  color: var(--basket-color);
}

/* ==========================================================
   ALERTS
   ========================================================== */

.alert, .bg-success {
  border: var(--alert-border);
  border-radius: var(--alert-border-radius);
}

#evartContainer .bg-success{
  border-radius: var(--alert-border-radius);
}

/* ==========================================================
   MODALS
   ========================================================== */

.modal-content {
  background-color: var(--modal-bg);
  border-radius: var(--modal-border-radius);
  border: var(--modal-border);
  box-shadow: var(--shadow-md);
}


/* ==========================================================
   ACCORDION
   ========================================================== */


.accordion-item {
  border-radius: var(--accordion-radius);
  overflow: hidden;
}

.evAccordion .accordion-item {
    border: var(--accordion-border);
    border-radius: var(--accordion-radius);
    box-shadow: var(--accordion-box-shadow);
    margin-bottom: var(--accordion-margin-bottom);

    overflow: hidden;
    transition: transform .3s ease,  box-shadow .3s ease;
}

.evAccordion .accordion-item:hover {
    box-shadow: var(--accordion-hover-shadow);
    transform: var(--accordion-hover-transform);
}

.evAccordion .accordion-button {
    overflow: hidden;

    background: var(--accordion-closed-bg);
    color: var(--accordion-closed-color);
    border: var(--accordion-closed-border);
    border-left: var(--accordion-closed-border-left);
    box-shadow: none !important;

    font-weight: var(--accordion-closed-font-weight);
    font-size: var(--accordion-closed-font-size);
    padding: var(--accordion-closed-padding);
    transition: color .6s ease;
    z-index: 1;
}

.evAccordion .accordion-button::before {
    content: "";
    position: absolute;
    inset: 0;

    background: var(--accordion-open-bg);

    opacity: 0;
    transition: opacity .6s ease;
    z-index: -1;          /* Put behind text */
    pointer-events: none; /* Prevent click issues */
}

.evAccordion .accordion-button:not(.collapsed) {
    color: var(--accordion-open-color);
}
.evAccordion .accordion-button:not(.collapsed)::before {
    opacity: 1;
}
.accordion-button:not(.collapsed)::before {
    opacity: 1;
}

.evAccordion .accordion-button:not(.collapsed) {
    background: var(--accordion-open-bg);
    color: var(--accordion-open-color);
}

.evAccordion .accordion-button::after,
.evAccordion .accordion-button:not(.collapsed)::after {
    background-image: none;
    background-color: var(--accordion-arrow-closed-color);
    -webkit-mask: var(--bs-accordion-btn-icon) center / contain no-repeat;
    mask: var(--bs-accordion-btn-icon) center / contain no-repeat;
    transition: transform .35s ease;
}

.evAccordion .accordion-button:not(.collapsed)::after {
    background-color: var(--accordion-arrow-open-color);
}

.evAccordion .accordion-body {
    background: var(--accordion-open-body-bg);
    padding: 0;
}

.accordion-collapse {
    transition: height .45s cubic-bezier(0.4,0,0.2,1);
}


/* ==================================================
   DATE PICKER
   ================================================== */

.ui-widget {
    border-radius: var(--datepicker-border-radius);
    border: 1px solid var(--datepicker-border-color) !important;
    background-color: var(--datepicker-bg);
    box-shadow: var(--shadow-md);
}

.ui-widget-header {
    border-radius: var(--datepicker-border-radius);
    background-color: var(--datepicker-header-bg);
    color: var(--datepicker-header-text-color);
    border: none;
}

.ui-datepicker th {
    color: var(--datepicker-heading-text-color);
}

.red-background .ui-state-default {
    border-radius: var(--datepicker-date-border-radius);
    background: var(--color-danger);
    color: var(--datepicker-date-text-color);
    text-align: center;
}

.green-background .ui-state-default {
    border-radius: var(--datepicker-date-border-radius);
    background: var(--color-success);
    color: var(--datepicker-date-text-color);
    text-align: center;
}

.alDate-background .ui-state-default {
    border-radius: var(--datepicker-date-border-radius);
    background: var(--datepicker-default-date-bg);
    border-color: var(--datepicker-default-date-border-color);
    color: var(--datepicker-date-text-color);
    text-align: center;
}

.ui-datepicker-week-end .ui-state-default,
.ui-datepicker-unselectable .ui-state-default,
.ui-state-disabled .ui-state-default {
    border-radius: var(--datepicker-date-border-radius);
    text-align: center;
}

.alDate-background a.ui-state-active {
    background-color: var(--datepicker-active-date-bg);
    border: 1px solid var(--datepicker-active-date-border-color);
    font-weight: var(--datepicker-active-date-font-weight);
    text-align: center;
}

/* ==================================================
   FULLCALENDAR
   ================================================== */

/* Header title */
.fc .fc-toolbar-title {
  font-size: var(--fc-header-font-size);
  color: var(--fc-heading-color);
  font-weight: var(--fc-header-font-weight);
  text-transform: var(--fc-header-style);
}

/* Day headers */
.fc .fc-col-header-cell {
  background: var(--fc-header-bg);
  color: var(--fc-heading-color);
  font-weight: var(--fc-header-font-weight);
}

/* Calendar body container */
.fc .fc-view-harness {
  border-radius: var(--fc-calendar-radius);
  overflow: hidden;
  background: var(--fc-body-bg);
}

/* Grid */
.fc th,
.fc td,
.fc .fc-scrollgrid {
  border-width: var(--fc-grid-border-width);
  border-style: var(--fc-grid-border-style);
  border-color: var(--fc-grid-border-color);
}

/* Today */
.fc .fc-daygrid-day.fc-day-today {
  background: var(--fc-today-bg) !important;
}
/* Disabled day */
.fc .fc-day-disabled{
    background: var(--fc-disabled-day-bg) !important;
}

.fc .fc-daygrid-day{
  padding: var(--fc-day-padding);
}

/* Event styling */
.fc .fc-event {
  color: var(--fc-event-text);
  border-radius: var(--fc-border-radius);
  padding: var(--fc-event-padding);
}

/* Event hover */
.fc .fc-event:hover {
  filter: brightness(var(--fc-event-hover-brightness));
}

/* ==========================================================
   FOOTER
   ========================================================== */

.footer {
  background-color: var(--footer-bg)!important;
  padding: var(--footer-padding);
}

.footer hr{
  color: var(--footer-line-color);
}

.footer p{
  color: var(--footer-color);
}

.footer a, .footer a:visited {
  color: var(--footer-link-color);
}

.footer a:hover {
  color: var(--footer-link-hover-color)!important;
}

/* ==========================================================
   ÖVRIGT
   ========================================================== */

hr, hr.border{
  color: var(--hr-border-color);
  border-color: var(--hr-border-color)!important;
}

.evHeadContainer{
  background-color: #fff;
}