ShopPanel {
    position: relative;
    width: 100%;
    height: 100%;
    pointer-events: all;
    font-family: Geneva;
    transition: opacity 0.5s ease;
    opacity: 1;
    
        &:intro {
            opacity: 0;
        }
    .sidehud {
        position: absolute;
        right: 88%;
        top: 1%;
        height: 80%;
        width: 7%;
        font-size: 20px;
        z-index: 10;
        padding: 20px;
        background-color: rgba(56, 54, 54, 0.747);
      
        flex-direction: column;
        
        border-radius: 10px;
        margin-top: 10px;
        gap: 45px;
        


    }
        .exit-button {
    
    
    
            z-index: 100;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            font-size: 32px;
            align-items: center;
            justify-content: center;
            position: absolute;
            background-image: url(/ui/hud/exit.gif);
            background-position: center;
            background-size: cover;
    
            color: white;
            border-width: 5px;
            border-color: black;
            right: 100;
            top: 20;
            padding: 5px;
            cursor: pointer;
    
            :hover {
    
    
    
                position: relative;
                width: 100%;
                height: 100%;
                border-radius: 50%;
                align-items: center;
                justify-content: center;
    
            }
        }
        
    .panel-content{
            position: absolute;
            width: 100%;
            height: 100%;
            font-family: Geneva;
            flex-direction: row;
            padding: 10px;
            
            .panel-content-text{
                position: relative;
                    width: 100%;
                    background-color: rgba(0, 0, 0, 0.795);
                    border-radius: 10px;
                
                    .panel-content-layout
                    {
                        position: relative;
                            width: 100%;
                            background-color: rgba(0, 0, 0, 0.568);
                            border-radius: 10px;
                            border-color: rgba(255, 255, 255, 0.404);
                            border-width: 4px;
                          
                            color: white;
                            font-size: 23px;
                            
                         
                            .title {
                            
                                    
                                    
                                    background-color: #19369649;
                                    box-shadow: 4px 4px 0px #000000;
                                    border-width: 1px;
                                    border-color: #000000;
                                    color: #ffffff;
                                    font-size: 30px;
                                    font-weight: bold;
                                    font-style: italic;
                                    text-shadow: 4px 4px 0px #000000;

                             
                            
                                    padding: 10px;
                                    border-radius: 10px;
                                    margin-bottom: 10px;
                            
                                }
                            .help
                            {
                                position: absolute;
                                left: 3%;
                                top: 3%;
                                width: 3%;
                                height: 4%;
                                color: black;
                                justify-content: center;
                                align-items: center;
                                border-radius: 50%;
                                background-color: rgb(217, 255, 0);
                                    box-shadow: 4px 4px 0px #000000;
                                
                                :hover 
                                {
                                        position: absolute;
                                        width: 100%;
                                        height: 100%;
                                        border-radius: 50%;
                                        display: flex;
                                        /* Flexbox verwenden */
                                        justify-content: center;
                                        /* Horizontal zentrieren */
                                        align-items: center;
                                        /* Vertikal zentrieren */
                                        background-color: rgb(217, 255, 0);
                                        box-shadow: 4px 4px 0px #000000;
                                        transform: scale(1.1);
                                        color: black;
                                        text-align: center;
                                        /* Text zentrieren */
                                        sound-in: 'hover';
                                }
                                &:active:not(.disabled) {
                                sound-in: 'light_click';
                                background-color: rgb(250, 134, 39);
                                }
                            }
                           
                        .upgrade-section
                        {
                                top: 0%;
                                left: 16%;
                                padding: 20px;
                                gap: 10px;
                                flex-direction: column;
                                position: relative;
                                width: 70%;
                                height: 82.5%;
                                background-color: rgba(39, 39, 39, 0.815);
                                border-radius: 10px;
                                border-width: 1px;
                                border-color: #000000;
                                

                            .aspect-panel{
                                position: absolute;
                                    width: 25%;
                                    right: 12%;
                                    top: 65%;
                                    height: 45%;
                                
                                    flex-direction: column;
                                    justify-content: center;
                                    align-items: center;
                                    transition: ease-in-out 15.5s;
                                    .aspect-cost{
                                        position: relative;
                                        width: 100%;
                                        height: 20%;
                                       
                                        border-color: #000000;
                                        color: #ffffff;
                                        font-size: 30px;
                                        font-weight: bold;
                                        font-style: italic;
                                        gap: 15px;
                                  
                                        margin-bottom: 10px;
                                        justify-content: center;
                                        align-items: center;
                                        flex-direction: column;
                                        .number{
                                            position: relative;
                                            width: 80%;
                                            height: 50%;
                                            justify-content: center;
                                            align-items: center;
                                            background-color: #1996628c;
                                            border-width: 1px;
                                            border-color: #000000;
                                            color: #ffffff;
                                            font-size: 26px;
                                            font-weight: bold;
                                            font-style: italic;
                                            padding: 10px;
                                            border-radius: 10px;
                                            margin-bottom: 10px;
                                        }
                                    }
                                    
                                    .aspect-level{
                                        position: relative;
                                        width: 100%;
                                        height: 10%;
                                        background-color: #058a2625;
                                        top: 0%;
                                        border-width: 1px;
                                        border-color: #000000;
                                        color: #ffffff;
                                        font-size: 16px;
                                        font-weight: bold;
                                        font-style: italic;
                                        gap: 10px;
                                        border-radius: 10px;
                                        margin-bottom: 10px;
                                        justify-content: center;
                                        align-items: center;
                                        
                                       
                                
                                    }
                                    .aspect-button{
                                        position: relative;
                                        width: 50%;
                                        height: 20%;
                                        background-color: #1996628c;
                                        
                                        border-width: 1px;
                                        border-color: #000000;
                                        color: #ffffff;
                                        font-size: 25px;
                                        font-weight: bold;
                                        font-style: italic;
                                        padding: 10px;
                                        border-radius: 10px;
                                        margin-bottom: 10px;
                                        justify-content: center;
                                        align-items: center;

                                        :hover{
                                            position: relative;
                                            
                                            background-color: #0cbd5b;
                                            width: 100%;
                                            align-items: center;
                                            justify-content: center;
                                            border-radius: 10px;
                                            padding: 0px 1px;
                                            sound-in: 'hover';
                                            color: #000000;
                                        }
                                    } 
                                    

                            }
                             
                            .items2{
                                    position: relative;
                                    
                                    justify-content: center;
                                    gap: 1px;
                                    align-items: center;
                                    padding: 5%;
                                    flex-wrap: wrap;
                                    width: 50%;
                                    height: 100%;
                                    overflow-x: scroll;
                                    border-color: #000000;
                                    background-color: #00000091;
                                    border-width: 1px;
                            }
                            .iteminformation {
                                        position: absolute;
                                        right: -18%;
                                        top: 15%;
                                        
                                    }
                                    
                            .upgrade-slot{
                                right: 15%;
                                bottom:60%;
                                position: absolute;
                                width: 20%;
                                height: 25%;
                                justify-content: center;
                                align-items: center;
                                flex-direction: column;

                                

                                
                               
                            }
                            
                            .title4{
                                position: relative;
                                width: 100%;
                                height: 20%;
                                justify-content: center;
                                align-items: center;
                                background-color: #1996628c;
                                border-width: 1px;
                                border-color: #000000;
                                color: #ffffff;
                                font-size: 30px;
                                font-weight: bold;
                                font-style: italic;
                                padding: 10px;
                                border-radius: 10px;
                                margin-bottom: 10px;
                            }
                            .money{
                                            position: absolute;
                                            bottom:92.5%;
                                            left: 88%;
                                            color:yellow;
                                            font-size: 30px;
                                            font-weight: bold;
                                            font-style: italic;
                                            gap: 10px;
                                            
                                            
                                        }

                           
                            .upgrade-panel
                            {
                                position: absolute;
                                width: 25%;
                                right: 12%;
                                top: 45%;
                                height: 55%;
                                
                                flex-direction: column;  
                                justify-content: center;
                                align-items: center;
                                transition: ease-in-out 15.5s;
                                opacity: 0;

                                &.visible {
                                        opacity: 1;
                                    }
                                
                                    &.fade {
                                        opacity: 0;
                                        transition: opacity 1s ease-in-out;
                                    }
                                    
                                .upgrade-cost{
                                    position: relative;
                                    width: 100%;
                                    height: 100%;
                                   
                                   
                                    
                                    border-color: #000000;
                                    color: #ffffff;
                                    font-size: 30px;
                                    font-weight: bold;
                                    font-style: italic;
                                    gap: 15px;
                              
                                    margin-bottom: 10px;
                                    justify-content: center;
                                    align-items: center;
                                    flex-direction: column;
                                    .number{
                                        position: relative;
                                        width: 80%;
                                        height: 50%;
                                        justify-content: center;
                                        align-items: center;
                                        background-color: #1996628c;
                                        border-width: 1px;
                                        border-color: #000000;
                                        color: #ffffff;
                                        font-size: 26px;
                                        font-weight: bold;
                                        font-style: italic;
                                        padding: 10px;
                                        border-radius: 10px;
                                        margin-bottom: 10px;
                                    }
                                }
                                
                                .upgrade-level{
                                    position: relative;
                                    width: 100%;
                                    height: 100%;
                                    background-color: #058a2625;
                                    top: 0%;
                                    border-width: 1px;
                                    border-color: #000000;
                                    color: #ffffff;
                                    font-size: 24px;
                                    font-weight: bold;
                                    font-style: italic;
                                    gap: 10px;
                                    border-radius: 10px;
                                    margin-bottom: 10px;
                                    justify-content: center;
                                    align-items: center;
                                    .total-materials{
                                        color:green;
                                        width: 100%;
                                        height: 100%;
                                        position: relative;
                                        justify-content: center;
                                        align-items: center;
                                    }
                                    .missing-materials{
                                        color:rgb(128, 36, 36);
                                        width: 100%;
                                        height: 100%;
                                        position: relative;
                                        justify-content: center;
                                        align-items: center;
                                    }

                                    

                                }
                                
                                .upgrade-balance{
                                    position: relative;
                                    width: 100%;
                                    height:100%;
                                    
                                    top: 0%;
                                 
                                    border-color: #000000;
                                    color: #ffffff;
                                    font-size: 24px;
                                    font-weight: bold;
                                    font-style: italic;
                                    gap: 20px;
                                    border-radius: 10px;
                                    margin-bottom: 10px;
                                    justify-content: center;
                                    align-items: center;
                                    flex-direction: column;
                                    .number{
                                        position: relative;
                                        width: 80%;
                                        height: 100%;
                                        justify-content: center;
                                        align-items: center;
                                        background-color: #1996628c;
                                        border-width: 1px;
                                        border-color: #000000;
                                        color: #ffffff;
                                        font-size: 26px;
                                        font-weight: bold;
                                        font-style: italic;
                                        padding: 10px;
                                        border-radius: 10px;
                                        margin-bottom: 10px;
                                    }

                                }    
                                
                                .upgrade-button{
                                    position: relative;
                                    width: 50%;
                                    height: 100%;
                                    background-color: #1996628c;
                                    
                                    border-width: 1px;
                                    border-color: #000000;
                                    color: #ffffff;
                                    font-size: 30px;
                                    font-weight: bold;
                                    font-style: italic;
                                    padding: 10px;
                                    border-radius: 10px;
                                    margin-bottom: 10px;
                                    justify-content: center;
                                    align-items: center;
                                    :hover{
                                        position: relative;
                                        
                                        background-color: #0cbd5b;
                                        width: 100%;
                                        align-items: center;
                                        justify-content: center;
                                        border-radius: 10px;
                                        padding: 0px 1px;
                                        sound-in: 'hover';
                                        color: #000000;
                                    }
                                }                         
                            }
                            
                            .confirmation-dialog 
                        {
                            position: absolute;
                            top: 45%;
                            left: 37%;
                            width: 30%;
                            height: 30%;
                            background-color: rgba(255, 255, 255, 0);
                            display: flex;
                            color:black;
                            font-size: 24px;
                            justify-content: center;
                            align-items: center;
                            z-index: 1;
                           

                            .confirmation-content {
                                position: relative;
                                width: 100%;
                                height: 100%;
                                background-color: #cecece;
                                padding: 20px;
                                border-radius: 10px;
                                text-align: center;
                                flex-direction: column;
                                justify-content: center;
                                    align-items: center;
                                    border-width: 1px;
                                    border-color: #000;
                            }

                            .confirmation-button {
                                pointer-events: all;
                                z-index: 100;
                                margin: 10px;
                                padding: 10px 20px;
                                background-color: #0168d5;
                                color: #fff;
                                border: none;
                                border-radius: 5px;
                                cursor: pointer;
                                transition: background-color 0.3s ease;

                                &:hover {
                                    background-color: #0056b3;
                                }
                                
                            }
                            
                        }
                        .upgrade-result-dialog 
                        {
                        position: absolute;
                        top: 45%;
                        left: 37%;
                        width: 30%;
                        height: 30%;
                        background-color: rgba(238, 0, 0, 0);
                        display: flex;
                        color:black;
                        font-size: 24px;
                        justify-content: center;
                        align-items: center;
                        z-index: 1;

                        .upgrade-result-content {
                            position: relative;
                            width: 100%;
                            height: 100%;
                            background-color: #cecece;
                            padding: 20px;
                            border-radius: 10px;
                            text-align: center;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                            border-width: 1px;
                            border-color: #000;
                        }

                        .upgrade-result-content.success {
                            background-color: #009a24;
                            color: #000f04;
                            border: 1px solid #c3e6cb;
                        }

                        .upgrade-result-content.failed {
                            background-color: #430006;
                            color: #f00018;
                            border: 1px solid #ac6c72;
                        }
                        .upgrade-result-content.destroyed{
                            background-color: #000000;
                            color: #f00018;
                            border: 1px solid #ac6c72;
                        }

                        .upgrade-result-button {
                            pointer-events: all;
                            z-index: 100;
                            margin: 10px;
                            padding: 10px 20px;
                            background-color: #0168d5;
                            color: #fff;
                            border: none;
                            border-radius: 5px;
                            cursor: pointer;
                            transition: background-color 0.3s ease;

                            &:hover {
                                background-color: #0056b3;
                            }
                        }
                    }   
                }
                        .main-panel {
                                position: absolute;
                                width: 100%;
                                height: 100%;
                                background-color: #f0f0f000;
                                border-radius: 10px;
                                padding: 10px;
                                right: 5%;
                                
                        
                                .Panel {
                                    position: relative;
                                    justify-content: center;
                                 
                        
                                    background-color: #da2f2f00;
                        
                        
                                    width: 100%;
                                    height: 100%;
                        
                                    .section2 {
                                        top: 0%;
                                        left: 7%;
                                        padding:20px;
                                        gap: 10px;
                                        flex-direction: column;
                                        position: relative;
                                        width: 70%;
                                        height: 82.5%;
                                        background-color: rgb(39, 39, 39);
                                        border-radius: 10px;
                                        border-width: 1px;
                                        border-color: #000000;

                                        .sell-info {
                                            position: absolute;
                                            right: 5%;
                                            top: 35%;
                                            width: 30%;
                                            height: 20%;
                                            justify-content: center;
                                            align-items: center;
                                            background-color: #565757;
                                            background-image: url('/ui/textures/grey.jpg');
                                                background-position: center;
                                              
                                            
                                                background-size: cover;
                                            border-width: 1px;
                                            border-color: #000000;
                                            color: #ffffff;
                                            font-size: 30px;
                                            flex-direction: column;
                                            border-radius: 10px;
                                            padding: 10px;
                                            
                                            box-shadow: 4px 4px 0px #000000;

                                        
                                                .sell-amount {
                                                    position: relative;
                                                    width: 100%;
                                                    height: 100%;
                                                    top: 10%;
                                                    color:rgb(255, 238, 0);
                                                    font-size: 30px;
                                                    font-weight: bold;
                                                    font-style: italic;
                                                    background-color: #a5a7a700;
                                                    text-shadow: 3px 2px 0.1px #5e5e5e;
                                                  
                                                    gap: 10px;
                                                    justify-content: center;
                                                   
                                                }
                                        
                                        
                                                .sell-button {
                                                    position: relative;
                                                    width: 60%;
                                                    height: 50%;
                                                    background-color: #043100;
                                                    border-width: 1px;
                                                    border-color: #000000;
                                                    color: #ffffff;
                                                    font-size: 25px;
                                                    font-weight: bold;
                                                    font-style: italic;
                                                    padding: 10px;
                                                    justify-content: center;
                                                    align-items: center;
                                                    border-radius: 10px;
                                                    box-shadow: 4px 4px 0px #000000;
                                                    text-shadow: 3px 2px 0.1px #000000;

                                                    :hover{
                                                        position: relative;
                                                            
                                                            background-color: #137000;
                                                            border-width: 1px;
                                                            border-color: #000000;
                                                            color: #ffffff;
                                                            font-size: 25px;
                                                            font-weight: bold;
                                                            font-style: italic;
                                                            padding: 10px;
                                                            text-shadow: 3px 2px 0.1px #000000;
                                                            border-radius: 10px;
                                                            box-shadow: 4px 4px 0px #000000;
                                                    }
                                                }
                                        
                                        
                                            }
                                        .title-container{
                                            .title0 {

                                            position: relative;
                                            width: 100%;
                                            height: 100%;
                                            justify-content: center;
                                            align-items: center;
                                            background-color: #78a50fa1;
                                            border-width: 1px;
                                            border-color: #000000;
                                            border-width: 1px;
                                           
                                            color: #ffffff;
                                            font-size: 30px;
                                            font-weight: bold;
                                            font-style: italic;
                                            text-shadow: 4px 4px 0px #000000;
                                            box-shadow: 4px 4px 0px #000000;
                        
                                            padding: 10px;
                                            border-radius: 10px;
                                            margin-bottom: 10px;
                                            .toggle
                                            {
                                                left: 30%;
                                                width: 5%;
                                                height: 50%;
                                                position: relative;
                                                background-size: cover;
                                                background-image: url(/ui/hud/sort2.png);
                                                background-position: center;
                                                :hover:not(.disabled) {
                                                
                                                
                                                        cursor: pointer;
                                                        sound-in: 'hover';
                                                
                                                        border-radius: 5%;
                                                        transform: scale(1.1);
                                                    }
                                                
                                                    &:active:not(.disabled) {
                                                        sound-in: 'sound4';
                                                        background-color: rgb(250, 134, 39);
                                                        padding: 0 1%;
                                                        border-radius: 5%;
                                                        align-items: center;
                                                    }
                                            }
                        
                                        }
                                        }
                                        .title {
                                            
                                            justify-content: center;
                                            align-items: center;
                                            background-color: #007c1185;
                                            border-width: 1px;
                                            border-color: #000000;
                                            color: #ffffff;
                                            font-size: 30px;
                                            font-weight: bold;
                                            font-style: italic;
                        
                        
                                            padding: 10px;
                                            border-radius: 10px;
                                            margin-bottom: 10px;
                        
                                        }
                                        
                                        .title2 {
                                            position: absolute;
                                            left: 20%;
                                            top: 12%;
                                            width: 12%;
                                            height: 5%;
                                            justify-content: center;
                                            align-items: center;
                                            background-color: #fafafa;
                                            box-shadow: 4px 4px 0px #000000;
                                            border-width: 1px;
                                            border-color: #000000;
                                            color: #15a84d;
                                            text-shadow: 4px 4px 0px #000000;

                                            font-size: 35px;
                                            font-weight: bold;
                                            font-style: italic;
                        
                        
                                            padding: 10px;
                                            border-radius: 10px;
                                            margin-bottom: 10px;
                        
                                        }
                                        .box-information-main{
                                            position: absolute;
                                            flex-direction: column;
                                            width: 40%;
                                            height: 30%;
                                            top: 65%;
                                            right: 5%;
                                            transition: ease-in-out 5.5s;
                                      

                                            .box-information{
                                                position: relative;
                                                width: 100%;
                                                height: 100%;
                                                    gap: 10px;
                                               
                                                color: #ffffff;
                                                font-size: 24px;
                                                font-weight: bold;
                                                font-style: italic;
                                                padding: 10px;
                                                border-radius: 10px;
                                                margin-bottom: 10px;
                                               flex-direction: column;
                                                
                                                
                                                .box-description{
                                                    position: relative;
                                                    width: 100%;
                                                    height: 100%;
                                                    justify-content: center;
                                                    align-items: center;
                                                    gap: 30px;
                                                    
                                                    .icon{
                                                        
                                                        width: 20%;
                                                        transform: scale(0.7);
                                                        left: 1%;
                                                        bottom: 20%;
                                                        height: 120%;
                                                        position: relative;
                                                        background-image: url('/ui/textures/left-click.png');
                                                        background-position: center;
                                                        background-size: cover;
                                                        background-repeat: no-repeat;
                                                        justify-content: center;
                                                        align-items: center;
                                                    }
                                                    .icon2{
                                                        
                                                        width: 20%;
                                                      
                                                        border-radius: 50%;
                                                        transform: scale(0.7);
                                                        bottom: 20%;
                                                        height: 120%;
                                                        position: relative;
                                                        background-image: url('/ui/textures/rightclick2.png');
                                                        background-position: center;
                                                        background-size: cover;
                                                        background-repeat: no-repeat;
                                                        justify-content: center;
                                                        align-items: center;
                                                    }
                                                }
                                            }
                                            
                                        }
                                        .items0 {
                                                    position: relative;
                                            
                                                    justify-content: center;
                                                    gap: 1px;
                                                    align-items: center;
                                                    padding: 5%;
                                                    flex-wrap: wrap;
                                                    width: 50%;
                                                    height: 100%;
                                                    overflow-x: scroll;
                                             
                                                    background-color: #00000000;
                                                    
                                            
                                                }
                                        
                                        

                                        

                                    
                        
                                        .money{
                                            position: absolute;
                                            bottom:92.5%;
                                            left: 88%;
                                            color:yellow;
                                            font-size: 30px;
                                            font-weight: bold;
                                            font-style: italic;
                                            gap: 10px;
                                            text-shadow: 3px 3px 0px #000000;
                                            
                                            
                                        }
                                        .items-container{
                                            gap: 10px;
                                            position: relative;
                                           
                                            
                                            
                                            .items2 
                                            {
                                                    position: relative;
                                                    margin-top: 10px;
                                                    justify-content: center;
                                                    overflow-x: scroll;
                                                    align-items: center;
                                                    
                                                    flex-wrap: wrap;
                                                    width: 100%;
                                                    height: 100%;
                                                  
                                                    border-color: #000000;
                                                    
                                                    
                                                    
                                            
                                            }
                                            .pagination-controls {
                                            position: absolute;
                                            right: 0%;
                                            top: 100%;
                                            display: flex;
                                            justify-content: center;
                                            align-items: center;
                                            margin-top: 20px;
                                            }

                                            .pagination-controls button {
                                                margin: 0 10px;
                                                padding: 5px 10px;
                                                cursor: pointer;
                                                
                                                :hover:not(.disabled) 
                                                {
                                                    background-color: #0cbd5b;
                                                    padding: 0px 1px;
                                                    sound-in: 'hover';
                                                    color: #000000;
                                                }
                                                &:active:not(.disabled) 
                                                {
                                                    
                                                sound-in: 'light_click';
                                                transform: scale(0.95);
                                                
                                                
                                                
                                                }
                                            }

                                            .pagination-controls span {
                                                margin: 0 10px;
                                            }
                                            .box
                                            {
                                                position:absolute;
                                                flex-direction: column;
                                                width: 50%;
                                                height: 100%;
                                                transition: ease-in-out 5.5s;
                                                background-color: rgba(0, 0, 0, 0.834);
                                                box-shadow: 4px 4px 0px #000000;
                                           
                                            .sort{
                                                position: relative;
                                                width: 100%;
                                                height: 10%;
                                                justify-content: center;
                                                align-items: center;
                                                background-color: #967d198c;
                                                border-width: 1px;
                                                border-color: #000000;
                                                color: #ffffff;
                                                font-size: 30px;
                                                font-weight: bold;
                                                font-style: italic;
                                                padding: 10px;
                                                border-radius: 10px;
                                                margin-bottom: 10px;
                                               
                                                :hover:not(.disabled) {
                                                
                                                
                                                        cursor: pointer;
                                                        sound-in: 'hover';
                                                
                                                        border-radius: 5%;
                                                        transform: scale(1.1);
                                                    }
                                                
                                                    &:active:not(.disabled) {
                                                        sound-in: 'sound4';
                                                        background-color: rgb(250, 134, 39);
                                                        padding: 0 1%;
                                                        border-radius: 5%;
                                                        align-items: center;
                                                    }
                                            }
                                            
                                    
                                        }
                                        .box2
                                            {
                                                position:absolute;
                                                flex-direction: column;
                                                width: 50%;
                                                left: 50%;
                                                height: 100%;
                                                background-color: rgba(0, 0, 0, 0.834);
                                                box-shadow: 4px 4px 0px #000000;
                                            .sort{
                                                position: relative;
                                                width: 100%;
                                                height: 10%;
                                                justify-content: center;
                                                align-items: center;
                                                background-color: #9619288c;
                                                border-width: 1px;
                                                border-color: #000000;
                                                color: #ffffff;
                                                font-size: 30px;
                                                font-weight: bold;
                                                font-style: italic;
                                                padding: 10px;
                                                border-radius: 10px;
                                                margin-bottom: 10px;
                                                :hover:not(.disabled) {
                                                
                                                
                                                        cursor: pointer;
                                                        sound-in: 'hover';
                                                
                                                        border-radius: 5%;
                                                        transform: scale(1.1);
                                                    }
                                                
                                                    &:active:not(.disabled) {
                                                        sound-in: 'sound4';
                                                        background-color: rgb(250, 134, 39);
                                                        padding: 0 1%;
                                                        border-radius: 5%;
                                                        align-items: center;
                                                    }
                                            }
                                            
                                    
                                        }
                                            
                                        }
                                        
                                        .items-container2
                                        {
                                            width: 100%;
                                            height: 100%;
                                            overflow-y: scroll;
                                          

                                            .items3{
                                                    margin-top: 1%;
                                                    flex-direction: column;
                                                    position: relative;
                                                    overflow-x: scroll; // Ermöglicht das Scrollen im Container
                                                    width: 100%;
                                                    height: 2000px;
                                                    border-color: #000000;
                                                    background-color: #0000005e;
                                                    border-width: 1px;
                                                 
                                                    
                                                    
                                                    .box{
                                                        position: relative;
                                                        
                                                        flex-direction: column;
                                                        gap: 20px;
                                                        padding: 10px;
                                                        
                                                        .potions, .weapon, .armor, .accessories, .consumables, .materials{
                                                            position: relative;
                                                            
                                                            
                                                            
                                                            
                                                        }
                                                        
                                                        .title3{
                                                            position: relative;
                                                            width: 20%;
                                                            height: 20%;
                                                            justify-content: center;
                                                            align-items: center;
                                                            background-color: #5f5f5f;
                                                            border-width: 3px;
                                                            border-color: #000000;
                                                            box-shadow: 4px 4px 0px #000000;
                                                            color: #ffffff;
                                                            font-size: 30px;
                                                            font-weight: bold;
                                                            font-style: italic;
                                                            padding: 4px 5px;
                                                            border-radius: 10px;
                                                            margin-bottom: 10px;
                                                            
                                                           

                                                        }
                                                    }
                                               
                                            
                                                
                                                
                                                

                                            }
                                        }
                                        
                                    }
                                    
                                }
                                
                       
                                
                    }
                    
                    
            }
            
        }
    
    

    

        



    }
}
.fade {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}