﻿.generator-container {
    display: flex;
    justify-content: center;
    padding: 0;
}

.loot-section-container {
    display: flex;
    justify-content: space-around;

    margin-top: 2%;
}

.filter-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    
    width: 40%;
    padding: 5% 5%;

    box-shadow: 10px 5px 5px gray;
    border-radius: 5px;
    border: 1px solid gray;
}

.minmax-value-container {
    display: flex;
    flex-direction: row;
}

.categories-container{
    margin-top: 5%;
}

.checkboxes-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    row-gap: 10px;
    text-align: left;
    margin: 5% 0 5% 0;
    color: #C0D6DF;
}

.article-loot-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    width: 40%;
    padding: 5% 5%;

    box-shadow: 10px 5px 5px gray;
    border-radius: 5px;
    border: 1px solid gray;
}

.article-container ul {
    list-style-type: none;
}

.loot-list-container{
}

.loot-item-container {
    display: flex;
    flex-direction: row;
}


@media (max-width: 768px) {
    .loot-section-container {
        flex-direction: column;
        align-items: center;
        row-gap: 20px;
    }
}






    /*===========CSS för checkboxarna===========*/
    .checkbox-wrapper-16 .checkbox-input {
        clip: rect(0 0 0 0);
        clip-path: inset(100%);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }

        .checkbox-wrapper-16 .checkbox-input:checked + .checkbox-tile {
            border-color: #2260ff;
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
            color: black;
            background-color: #DD6E42;
        }

            .checkbox-wrapper-16 .checkbox-input:checked + .checkbox-tile .checkbox-icon,
            .checkbox-wrapper-16 .checkbox-input:checked + .checkbox-tile .checkbox-label {
                color: black;
            }

        .checkbox-wrapper-16 .checkbox-input:focus + .checkbox-tile {
            border-color: #2260ff;
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1), 0 0 0 4px #b5c9fc;
        }

    .checkbox-wrapper-16 .checkbox-tile {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 4.5rem;
        min-height: 3rem;
        border-radius: 0.5rem;
        border: 2px solid #b5bfd9;
        background-color: #fff;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
        transition: 0.15s ease;
        cursor: pointer;
        position: relative;
    }

        .checkbox-wrapper-16 .checkbox-tile:hover {
            border-color: #DD6E42;
        }

    .checkbox-wrapper-16 .checkbox-label {
        color: #707070;
        transition: 0.375s ease;
        text-align: center;
    }
