.allapp_button{
    border: none;
    background-color: #ffffff00;
    height:60px; 
    aspect-ratio: 1;
    position: absolute;
    padding: 0;
    top:0;
    left:5px;
    &:hover{
        cursor: pointer;
        background-color: rgba(77, 77, 77, 0.7);
    }
}
#allapp_opt[isfixed='true']~.allapp_button{
	position:fixed !important;
	z-index: 2;
}
.allapp_img{
    height: 60px;
    aspect-ratio: 1;
    margin: 0;
    border: none;
    box-shadow: 0 0 10px black;
    border-radius: 50%;
}
.allapp_img:hover{
    fill: currentColor;
}

.allapp_button:focus-within  .allapp_panel{
    display: flex;
}
.allapp_button:focus-within + #allapp{
    width: 100%;
    height: 100%;
}

.allapp_panel{
    display: none;
    background-color: #cbfaff;
    border: #cfcfcf 1px solid;
    position: absolute;
    flex-wrap: wrap;
    flex-direction: row;
    color: black;
   
}
.allapp_panelC{
    width: 350px;
    height: max-content;
    gap: 10px;
    padding: 10px;
}

.allapp_icon{
    width: 100px;
    text-decoration: none;
    color: black;

}
.allapp_icon label{
    font-size: 1em;
    
}
.allapp_icon img{
    width: 100%;
    box-shadow: 0 3px 10px black;
    border-radius: 10px;
    margin-bottom: 15px;
    &:hover{
        box-shadow: 0 0 16px #000, 0 0 0 4px #97ff7c;
        cursor: pointer;
        background-color: #cefad1;
    }
}

@media screen and (orientation: portrait){
    .allapp_panelC{
        width: 570px;
        gap: 35px;
        padding: 20px;
    }
    .allapp_icon{
        width: 150px;
        
    }
	.allapp_img{
    height: 90px;
    aspect-ratio: 1;
    margin: 0;
    border: none;
    box-shadow: 0 0 10px black;
    border-radius: 50%;
}
}