html {
    font-size: 14px;
}

@media (max-width: 576px) {
    .accordion-button {
        padding: 0.5rem 1rem;
    }

    .card {
        margin-bottom: 0.5rem;
    }
}

@media (max-width: 576px) {
    .table-sm th, .table-sm td {
        font-size: 0.875rem;
        padding: 0.25rem;
    }
}

@media (max-width: 576px) {
    .accordion-button .row {
        display: flex;
        flex-direction: column;
    }
}

@media (max-width: 576px) {
    .accordion-button .row {
        flex-direction: column;
        text-align: left;
    }
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}

.thumbnail-img {
    height: 200px; /* Fast höjd */
    width: 100%; /* Fyll bredden på föräldraelementet */
    object-fit: cover; /* Beskär bilden för att fylla utrymmet */
    object-position: center; /* Fokus på centrum av bilden */
}

.btn-adjust-position {
    position: relative;
    top: -15px; /* Flyttar knappen uppåt */
    transform: translateY(-50%); /* Finjusterar placeringen */
    padding: 3px 8px; /* Gör knappen kompaktare */
    font-size: 0.75rem; /* Gör texten mindre */
}

/* Slot-texten och knappen placeras horisontellt bredvid logon */
.slot-container {
    display: flex;
    align-items: flex-start; /* Justera till toppen */
    margin-bottom: 10px;
}

/* Slot-texten och knappen bredvid logon */
.slot-text {
    margin-left: 10px;
    display: flex;
    flex-direction: column;
}

/* Mobilanpassning - slotnamn och knapp bredvid logotypen */
@media (max-width: 576px) {
    .slot-container {
        display: flex;
        flex-direction: row;
        align-items: center; /* Placera logon och texten i mitten vertikalt */
    }

    .slot-text {
        margin-left: 10px;
        display: flex;
        flex-direction: column;
    }

    .btn-adjust-position-slot {
        margin-top: 5px;
        display: block; /* Gör knappen blocknivå */
    }
}

/* Justering av knappens positionering */
.btn-adjust-position-slot {
    padding: 3px 8px;
    font-size: 0.75rem;
    margin-top: 5px;
}



/* Justering för mobilvyn */
@media (max-width: 576px) {
    .btn-adjust-position {
        top: -10px; /* Gör den lite mindre uppflyttad för mobil */
    }

    /* För att justera layout för "Rapportera"-knappen och casinonamn i mobilvyn */
    .casino-header {
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* Placera allt till vänster */
    }

        .casino-header h1 {
            font-size: 1.5rem; /* Anpassa storleken på casinonamnet för mobil */
            margin-bottom: 0.5rem;
        }

        .casino-header .btn-adjust-position {
            top: 0; /* Ta bort den vertikala justeringen för mobil */
            transform: none; /* Ta bort transform för mobil */
        }
}

/* För desktopvyer */
@media (min-width: 577px) {
    .casino-header {
        display: flex;
        align-items: center;
    }

        .casino-header .btn-adjust-position {
            margin-left: 1rem; /* Skapa utrymme mellan casinonamnet och knappen */
        }
}

.btn-outline-danger, .btn-outline-warning {
    padding: 3px 8px; /* Minska padding för mindre storlek */
    font-size: 0.75rem; /* Minska textstorleken */
}

h5 {
    position: relative;
}

.ms-3 {
    margin-left: 1rem !important;
}

/* Specifik CSS för rapportera och otillgänglig knapparna */
.btn-report,
.btn-availability {
    width: 30px; /* Anpassa bredden för endast ikonen */
    overflow: hidden; /* Dölj överflödig text */
    white-space: nowrap; /* Förhindra radbrytning */
    transition: width 0.4s ease; /* Gör en mjuk övergång i bredd */
}

    /* När man hovrar över knapparna */
    .btn-report:hover,
    .btn-availability:hover {
        width: 120px; /* Expandera knappen när man hovrar */
    }

    /* Göm texten som standard */
    .btn-report .btn-text,
    .btn-availability .btn-text {
        visibility: hidden; /* Göm texten */
        opacity: 0;
        transition: opacity 0.4s ease; /* Gör en smidig övergång av texten */
    }

    /* Visa ikonen som standard */
    .btn-report .btn-icon,
    .btn-availability .btn-icon {
        visibility: visible; /* Visa ikonen */
        opacity: 1;
    }

    /* När man hovrar, visa texten och dölj ikonen */
    .btn-report:hover .btn-text,
    .btn-availability:hover .btn-text {
        visibility: visible; /* Visa texten */
        opacity: 1;
    }

    .btn-report:hover .btn-icon,
    .btn-availability:hover .btn-icon {
        visibility: visible; /* Ikonen visas fortfarande under expanderingen */
        opacity: 1;
    }