body, html {
    height: 100%;
    margin: 0;
    font-family: Helvetica, Arial, sans-serif;
  }
  .hero-image {
    background-image: linear-gradient(rgba(250, 250, 247, 0.2), rgba(58, 59, 58, 0.35)), url("https://andershallgren99.se/images/head-record-716.jpg");
    height: 47%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  }

  .hero-image-cd {
    background-image: linear-gradient(rgba(250, 250, 247, 0.2), rgba(58, 59, 58, 0.35)), url("https://andershallgren99.se/images/head-record-cd-720.jpg");
    height: 47%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  }

  .hero-image-skiva {
    background-image: linear-gradient(rgba(250, 250, 247, 0.2), rgba(58, 59, 58, 0.35)), url("https://andershallgren99.se/images/search-record-716.jpg");
    height: 47%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  }

 .hero-image-absolute {
    background-image: linear-gradient(rgba(250, 250, 247, 0.2), rgba(58, 59, 58, 0.35)), url("https://andershallgren99.se/images/head-record-absolute-523.png");
    height: 47%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  }

.hero-image-filmmusik {
    background-image: linear-gradient(rgba(250, 250, 247, 0.2), rgba(58, 59, 58, 0.35)), url("https://andershallgren99.se/images/head-record-mgm-720.jpg");
    height: 47%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  }

.hero-image-samling {
    background-image: linear-gradient(rgba(250, 250, 247, 0.2), rgba(58, 59, 58, 0.35)), url("https://andershallgren99.se/images/head-record-samling-720.jpg");
    height: 47%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  }
  
  .hero-text {
    text-align: center;
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgb(250, 250, 250);
  }
  
  .hero-text button {
    border: none;
    outline: 0;
    display: inline-block;
    padding: 10px 25px;
    color: black;
    background-color: #ddd;
    text-align: center;
    cursor: pointer;
  }
  
  .hero-text button:hover {
    background-color: #555;
    color: white;
  }
  
  .scroll-up {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99;
    cursor: pointer;
     
    }

  .navbar.fixed-top {
    transition: top 0.3s;
}

.bg-progressbar {
  background: linear-gradient(90deg, #01612a, #28a745);
}

.nav-link:focus,
.navbar-nav .nav-link:focus,
.dropdown-toggle:focus {
  outline: none !important;
  box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.4) !important; /* Bootstrap-grön, transparent */
}

  .custom-card {
    border: 1px solid #0e4c80; /* Blå färg för kanten */
    background-color: #ffffff; /* Vit bakgrundsfärg */
    }

  a {
  color: #0e4c80;
  text-decoration: underline;
  }
  
  a:hover {
  color: #307C33;
  }
  
  .btn-outline-skiva {
  color: #ffffff; /* Vit text */
  background-color: #0e4c80; /* Blå bakgrund */
  border-color: #ffffff; /* Vit kant */
}

  .btn-outline-skiva:hover {
  color: #0e4c80; /* Blå text */
  background-color: #ffffff; /* Vit bakgrund */
  border-color: #0e4c80; /* Blå kant */
}

.btn-ny-skiva {
  color: #fff;
  background-color: #016029;
  border-color: #016029;
}
.btn-ny-skiva:hover {
  color: #fff;
  background-color: #007631;
  border-color: #007631;
}

.footer-link {
  color: #ffffff;
  text-decoration: underline;
}

.footer-link:hover {
  color: #cccccc;
}

/* =========================================
   CTA-BUTTON – samma stil som btn-outline-skiva
   men utan full bredd
   ========================================= */

.cta-button {
  color: #ffffff;              /* Vit text */
  background-color: #0e4c80;   /* Blå bakgrund */
  border: 1px solid #ffffff;  /* Vit kant */
  padding-left: 2rem;
  padding-right: 2rem;
  display: inline-block;       /* Viktigt: stoppar fullbredd */
  width: auto;                 /* Säkerställ innehållsbredd */
}

/* Hover */
.cta-button:hover {
  color: #0e4c80;              /* Blå text */
  background-color: #ffffff;  /* Vit bakgrund */
  border-color: #0e4c80;       /* Blå kant */
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(14, 76, 128, 0.5);
}

  .bg-search-skiva {
  background-color: rgba(244, 225, 210, 0.2); /* 50% opacitet */
}

  .fw-navbar-sallad {
  font-weight: bolder;
  color: #000000;
  }
  
  .nav-skiva {
  font-family: "Rubik", sans-serif;
  font-size: 1.25rem;
  font-weight: 300;
  font-style: normal;
  }
  
  .navbar-sok {
  font-family: 'Rubik', sans-serif;
  font-size: 1.25rem;
  font-weight: 300;
  color: #9d0a0e;
  }
  
  .text-link {
  color: #47964C !important; 
  }

  .material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 48
  }
  
  .head-font-sallad {
  font-family: 'Rubik', sans-serif;
  font-size: calc(4rem + 1.5vw);
  font-weight: 300;
  font-style: normal;
  }
  
  .h1-sallad {
  font-family: 'Rubik', sans-serif;
  font-size: calc(2rem + 1vw);
  }
  
  .h1-skiva {
  font-family: 'Rubik', sans-serif;
  font-size: calc(2rem + 1vw);
  text-align:center;
  }

  .h1-404 {
  font-family: 'Rubik', sans-serif;
  font-size: calc(3rem + 1vw);
  font-weight: 600;
  color: #29692A;
  text-align:center;
  }
  
  .h2-sallad {
  font-family: 'Rubik', sans-serif;
  font-size: calc(1.25rem + 1vw);
  font-weight: 300;
  font-style: normal;
  }
  
  .h2-skiva {
  font-family: 'Rubik', sans-serif;
  font-size: calc(1.25rem + 1vw);
  font-weight: 500;
  font-style: normal;
  }
  
  .h2-show-skiva {
  font-family: 'Rubik', sans-serif;
  font-size: calc(0.75rem + 1vw);
  font-weight: 400;
  font-style: normal;
  }
  
  .h2-skiva-lank {
  font-family: 'Rubik', sans-serif;
  font-size: calc(1rem + 1vw);
  font-weight: 500;
  font-style: normal;
  text-align: center;
}
  
  .h3-sallad {
  font-family: 'Rubik', sans-serif;
  font-size: calc(1rem + 0.6vw);
  }
  
  .h3-skiva {
  font-family: 'Rubik', sans-serif;
  font-size: calc(1.25rem + 0.6vw);
  font-weight: 400;
  color: #d77d00;
  font-style: normal;
  }

  .h3-statistik {
  font-family: 'Rubik', sans-serif;
  font-size: calc(1.25rem + 0.6vw);
  font-weight: 400;
  color: rgba(14, 76, 128);
  font-style: normal;
  }
  
  .h4-sallad {
  font-family: 'Rubik', sans-serif;
  font-size: calc(1rem + 0.3vw);
  }
  
  .h4-skiva-antal {
  font-family: 'Rubik', sans-serif;
  font-size: calc(1,5rem + 0.6vw);
  font-weight: 400;
  color: #ffffff;
  font-style: normal;
  }

  .h4-statistik {
  font-family: 'Rubik', sans-serif;
  font-size: calc(0.75rem + 0.6vw);
  font-weight: 300;
  color: rgba(14, 76, 128);
  font-style: normal;
  }
  
  .h4-skiva {
  font-family: 'Rubik', sans-serif;
  font-size: calc(1rem + 0.6vw);
  font-weight: 300;
  color: #d77d00;
  font-style: normal;
  }
  
  .h5-sallad {
  font-family: 'Rubik', sans-serif;
  font-size: 0.75rem;
  }
  
   .h6-sallad {
  font-family: 'Rubik', sans-serif;
  font-size: 1.5rem;
  font-variant: small-caps;
  }
  
   .p-sallad {
  font-family: 'Rubik', sans-serif;
  font-size: calc(0.8rem + 0.3vw);
  font-weight: 300;
  font-style: normal;
  }

   .p-skiva-text {
  font-family: 'Rubik', sans-serif;
  font-size: calc(0.8rem + 0.3vw);
  font-weight: 300;
  font-style: normal;
  }

   .p-fraga-faq {
  font-family: 'Rubik', sans-serif;
  font-size: calc(0.8rem + 0.3vw);
  font-weight: 300;
  font-style: normal;
  }
  
   .p-svar-faq {
  font-family: 'Rubik', sans-serif;
  font-size: calc(0.6rem + 0.3vw);
  font-weight: 300;
  font-style: italic;
  }
  
   .p-skiva-tid {
  font-family: 'Rubik', sans-serif;
  font-size: calc(0.8rem + 0.3vw);
  font-weight: 500;
  font-style: normal;
  }

  .p-album-statistik {
  font-family: 'Rubik', sans-serif;
  font-size: calc(0.8rem + 0.3vw);
  font-weight: 300;
  color: #01612a !important;
  font-style: normal;
  }

   .p-skiva-lank {
  font-family: 'Rubik', sans-serif;
  font-size: calc(0.9rem + 0.3vw);
  font-weight: 300;
  font-style: normal;
  }

   .pris-sallad {
  font-family: 'Rubik', sans-serif;
  font-size: 2rem;
  }
  
   .pris-show-sallad {
  font-family: 'Rubik', sans-serif;
  font-weight: 300;
  font-size: 1rem;
  }
  
   .adress-sallad {
  font-family: 'Rubik', sans-serif;
  font-weight: 300;
  color: #09600c;
  font-size: calc(0.8rem + 0.3vw);
  }

    #cookieConsent {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(32, 94, 146, 0.80);
    color: white;
    text-align: center;
    padding: 15px;
    z-index: 1000;
    display: none;
}

    /* Cookie consent container */
    .cookie-consent-container {
    max-width: 800px;
    color: white; /* Textfärg */
    margin: 0 auto;
    background-color: rgba(53, 148, 206, 0.75); /* Blå bakgrundsfärg */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px; /* Skapar utrymme från kanten */
    border-radius: 8px; /* Rundade hörn (valfritt) */
    gap: 10px; /* Avstånd mellan knapparna */
}

    /* CSS för knappen "Acceptera alla" */
    #acceptCookies {
    background-color: #4CAF50; /* Grön bakgrundsfärg */
    color: white; /* Textfärg */
    border: none; /* Ingen gräns */
    padding: 10px 20px; /* Justera storleken */
    font-size: 16px; /* Textstorlek */
    cursor: pointer; /* Visar att knappen är klickbar */
    border-radius: 5px; /* Rundade hörn */
    transition: background-color 0.3s ease; /* Smooth övergång för bakgrundsfärg */
}

    #acceptCookies:hover {
    background-color: #45a049; /* Färgen vid hover */
}

    /* CSS för knappen "Neka icke-nödvändiga" */
    #rejectCookies {
    background-color: #C8000E; /* Röd bakgrundsfärg */
    color: white; /* Textfärg */
    border: none; /* Ingen gräns */
    padding: 10px 20px; /* Justera storleken */
    font-size: 16px; /* Textstorlek */
    cursor: pointer; /* Visar att knappen är klickbar */
    border-radius: 5px; /* Rundade hörn */
    transition: background-color 0.3s ease; /* Smooth övergång för bakgrundsfärg */
}

    #rejectCookies:hover {
    background-color: #FF0012; /* Färgen vid hover */
}

@media (max-width: 768px) {
    .cookie-consent-container {
        flex-direction: column; /* Ändrar layouten till en vertikal stack */
        text-align: center; /* Säkerställer att texten centreras */
        gap: 15px; /* Ökar avståndet mellan elementen */
        padding: 15px; /* Mindre padding för att passa små skärmar */
    }

    .p-cookie {
        margin-bottom: 10px; /* Lägger till utrymme mellan text och knappar */
    }

    #acceptCookies, #rejectCookies {
        width: 100%; /* Gör knapparna lika breda som containern */
        max-width: 300px; /* Begränsar bredden för bättre utseende */
    }
}

    .p-cookie {
  font-family: 'Rubik', sans-serif;
  font-size: calc(0.8rem + 0.3vw);
  font-weight: 300;
  color: #ffffff;
  font-style: normal;
}

    .custom-jumbotron {
    width: 80%;
    margin: 0 auto;
    max-width: 800px;
    background-color: #0F396D; /* Bakgrundsfärg */
    border-radius: 20px; /* Rundade hörn */
    padding: 20px; /* Padding för innehåll */
    color: white; /* Textfärg */
}

    .h1-jumbotron {
    font-family: 'Rubik', sans-serif;
    font-size: calc(1.25rem + 1vw);
    font-weight: 500;
    font-style: normal;
    text-align: center;
}

    .custom-jumbotron ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Max 3 kolumner */
    gap: 15px; /* Utrymme mellan länkarna */
}


    .custom-jumbotron ul li {
    list-style-type: none;
}

    .custom-jumbotron ul li a {
    color: white; /* Gör länkarna vita */
    text-decoration: none;
}

    .custom-jumbotron ul li a:hover {
    text-decoration: underline; /* Understrykning vid hover */
}

    .container {
    flex: 1; /* Gör att huvudinnehållet tar upp all tillgänglig plats ovanför footern */
}

    footer {
    margin-top: auto; /* Flyttar footern till botten */
}

/* Fix för fast navbar som döljer översta innehållet */
.admin-top-offset {
  padding-top: 7.5rem; /* justera vid behov beroende på headerns höjd */
}

.text-icon-open {
  color: #47964C !important; /* ikonfärg när databasen är inloggad */
}

/* =========================================
   CARD IMAGES – tighter placement
   ========================================= */
.card-image {
  width: 100%;
  max-width: 500px;   /* justera detta värde */
  height: auto;
  display: block;
  margin: 0 auto;     /* centrerar bilden i kolumnen */

  /* Mjuk skugga */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);

  /* Liten separation från bakgrund */
  background-color: #ffffff;

  /* För framtida effekter */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}


/* =========================================
   TEXT SPACING – bättre luft mot card-kanter
   ========================================= */

/* Bild till vänster – flytta den IN mot mitten */
.card-image-left {
  margin-left: 0.5rem;
  margin-right: 0;
}

/* Bild till höger – flytta den IN mot mitten */
.card-image-right {
  margin-right: 1.5rem;
  margin-left: 0;
}

.card-image-tight {
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}

/* Mobilanpassning */
@media (max-width: 768px) {

  .card-text-left,
  .card-text-right {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .card-image-left,
  .card-image-right {
    margin-left: 0;
    margin-right: 0;
  }
}

.card-image:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
}

.card-image {
  border: 2px solid rgba(14, 76, 128, 0.5); /* din blå ton */
}

@media (max-width: 768px) {
  .card-image {
    border-radius: 12px;
  }
}

@media (min-width: 992px) {
  .card-image {
    border-radius: 16px;
  }
}

/* =========================================
   RECORD IMAGES – skiva-info.php
   ========================================= */
.record-image {
  width: 100%;
  max-width: 360px;   /* justera detta värde */
  height: auto;
  display: block;
  border-radius: 12px; /* Rundade hörn */
  border: 1px solid rgba(14, 76, 128); /* din blå ton */
  margin: 0 auto;     /* centrerar bilden i kolumnen */

  /* Mjuk skugga */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);

  /* Liten separation från bakgrund */
  background-color: #ffffff;

  /* För framtida effekter */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.record-image:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
  .record-image {
    max-width: 100%;
  }
}
/* ================================================
   Albumomslag på – show-skivor.php och SGL, LP OSV
   ================================================ */
.card-img-top {
  width: 100%;
  aspect-ratio: 1 / 1;   /* 🔑 alltid fyrkant */
  object-fit: cover;
  background-color: #f8f9fa; /* fallback om bild saknas */
}

/* =========================================
   CAROUSEL – blå, mjuka pilar (#0e4c80)
   ========================================= */

/* Flytta klickytorna utanför bilden */
.carousel-control-prev {
  left: -2rem;
}

.carousel-control-next {
  right: -2rem;
}

/* Återställ Bootstrap och tvinga synlighet */
/* Färgen styrs via currentColor (Bootstrap 5) */
.carousel-control-prev,
.carousel-control-next {
  color: #0e4c80 !important;
  opacity: 1;
}

/* Återställ Bootstrap och tvinga synlighet */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 100% 100% !important;

  width: 2.5rem;
  height: 2.5rem;

  opacity: 1 !important;
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.35));
}

/* Hover – lite extra tydlighet */
.carousel-control-prev:hover,
.carousel-control-next:hover {
  color: #0e4c80;
}

/* Vänster pil – mjuk rundning */
.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230e4c80' viewBox='0 0 16 16'%3E%3Cpath d='M10.5 1.5a.75.75 0 0 1 0 1.06L5.56 8l4.94 5.44a.75.75 0 1 1-1.12 1.02l-5.5-6a.75.75 0 0 1 0-1.02l5.5-6a.75.75 0 0 1 1.12 0z'/%3E%3C/svg%3E") !important;
}

/* Höger pil – mjuk rundning */
.carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230e4c80' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 1.5a.75.75 0 0 0 0 1.06L10.44 8l-4.94 5.44a.75.75 0 1 0 1.12 1.02l5.5-6a.75.75 0 0 0 0-1.02l-5.5-6a.75.75 0 0 0-1.12 0z'/%3E%3C/svg%3E") !important;
}

/* Hover – lite mer glow */
.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon {
  filter: drop-shadow(0 0 10px rgba(14, 76, 128, 0.6));
}

/* Mobil: dra in pilarna igen */
@media (max-width: 768px) {
  .carousel-control-prev {
    color: #0e4c80 !important;
    left: -1rem;
  }
  .carousel-control-next {
    color: #0e4c80 !important;
    right: -1rem;
  }
}

.carousel-indicators {
  bottom: -10px;
}

.carousel-indicators [data-bs-target] {
  background-color: #dadbdd;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin: 0 6px;
}

/* Aktiv indikator (valfri – lite tydligare) */
.carousel-indicators .active {
  background-color: #ffffff;
  opacity: 1;
}

/* =========================================
   CAROUSEL – flytta pilar utåt
   ========================================= */

.carousel-control-prev {
  left: -1.5rem;   /* justera värdet */
}

.carousel-control-next {
  right: -1.5rem;  /* justera värdet */
}

/* =========================================
   Färgad vinyl ikon i skiva-info.php
   ========================================= */

.skiva-info-icon {
    font-size: 1.7rem;   /* testa 1.3–1.6rem */
    vertical-align: text-bottom; /* eller baseline */
    margin-left: 0.2rem;
}

/* Standardfärger */
.vinyl-black  { color: #000000; }
.vinyl-white  { color: #f8f9fa; text-shadow: 0 0 1px #000; }
.vinyl-red    { color: #a80313; }
.vinyl-green  { color: #097a36; }
.vinyl-blue   { color: #0569ff; }

/* Nya färger */
.vinyl-yellow { color: #f9ce4d; }
.vinyl-orange { color: #fd7e14; }
.vinyl-purple { color: #803cc4; }
.vinyl-pink   { color: #fb3497; }

/* Special */
.vinyl-clear {
    color: #adb5bd; text-shadow: 0 0 1px #000;
    opacity: 0.6;
}

.vinyl-default {
    color: #6c757d;
}

/* =========================================
   DROPDOWN MENY
   ========================================= */

.letter-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2px;
    min-width: 220px;
}

.letter-item {
    text-align: center;
    padding: 4px 6px;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.3s ease-in-out;
}

.letter-item:hover {
    background-color: #0e4c80;
    color: #ffffff
}

.letter-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  pointer-events: none;
  color: #0e4c80;      /* Lås färgen här */
}

.vinyl-icon {
  font-size: 1.15rem;
}

.dropdown-item:hover .vinyl-icon {
  color: #0e4c80;
}

.dropdown-menu .fw-bold {
    font-size: 0.95rem;
}

.navbar .dropdown-toggle:focus,
.navbar .dropdown-toggle:active,
.navbar .dropdown-toggle.show {
    background-color: transparent !important;
    box-shadow: none !important;
}

.navbar .dropdown-toggle::after {
    display: none !important;
}

.navbar .nav-link:hover {
    color: #0e4c80 !important;
}

/* Förhindra att admin-ikonen blir blå */
.navbar .nav-link:hover .admin-pulse {
    color: #198754 !important;
}

/* =========================================
   ADMIN PULSERANDE IKON (Glow version)
   ========================================= */

.admin-pulse {
    color: #198754; /* Bootstrap success */
    animation: adminPulse 2s infinite ease-in-out;
}

@keyframes adminPulse {

    0% {
        transform: scale(1);
        opacity: 1;
        text-shadow:
            0 0 0px rgba(25, 135, 84, 0.0);
    }

    50% {
        transform: scale(1.18);
        opacity: 0.9;
        text-shadow:
            0 0 8px rgba(25, 135, 84, 0.6),
            0 0 18px rgba(25, 135, 84, 0.4),
            0 0 28px rgba(25, 135, 84, 0.2);
    }

    100% {
        transform: scale(1);
        opacity: 1;
        text-shadow:
            0 0 0px rgba(25, 135, 84, 0.0);
    }

}

/* =========================================
   HOVER-DROPDOWN (Desktop only)
   ========================================= */

@media (min-width: 992px) {

    .navbar .dropdown {
        position: relative;
    }

    .navbar .dropdown::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        height: 18px;
    }

    .navbar .dropdown-menu {
        left: 50%;
        top: 100%;
        margin-top: 0;
        transform: translateX(-50%) translateY(12px) scale(0.98);

        opacity: 0;
        transition:
            opacity 0.22s ease,
            transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);

        visibility: hidden;
        pointer-events: none;

        border-radius: 12px;
        border: 1.5px solid #0e4c80;

        box-shadow:
            0 10px 30px rgba(0, 0, 0, 0.08),
            0 4px 12px rgba(14, 76, 128, 0.20);
    }

    .navbar .dropdown:hover .dropdown-menu {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
        visibility: visible;
        pointer-events: auto;
    }

    .navbar .dropdown:hover > .nav-link {
        color: #0e4c80 !important;
    }
}
/* ========================================================
   Dropdown Fade på bokstäver som inte har skivor under sig
   ====================================================== */

.letter-disabled {
  opacity: 0.25;
  pointer-events: none;
  filter: grayscale(1);
}
.letter-disabled:hover {
  background: transparent !important;
  color: inherit !important;
}

.letter-icon,
.letter-icon i,
.letter-icon .vinyl-icon,
.letter-icon .vinyl-icon::before {
    color: #01612a !important;
    opacity: 1 !important;
    filter: none !important;
}


/* ========================================================
   Styr utseende för fältet "Medlemmar" på skiva-info.php
   ====================================================== */

.members-block {
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
}

.members-box {
  width: 100%;
  max-width: 360px;
  min-height: 120px;
  max-height: 320px;
  overflow-y: auto;
  overflow-x: hidden;

  display: block;
  border-radius: 4px;
  border: 1px solid rgba(14, 76, 128);
  margin: 0 auto;

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  background-color: #ffffff;

  transition: transform 0.3s ease, box-shadow 0.3s ease;

  padding: 14px 16px;
  line-height: 1.5;
  white-space: normal;
  word-break: break-word;
}