


@media screen and (max-width: 768px) {
    #imageGenerator > .imageTiles {
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 98%;
        height: 70%;
        padding: 10px 10px;
        overflow-y: auto;
        border-radius: 20px;
        border-bottom: 2px solid #e91e6241;
        background: repeating-linear-gradient(-45deg, 
            #8888885e, #2e242471 2px,
            transparent 1px, transparent 8px
        );
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    #imageGenerator > .imageTiles > .tile {
        position: relative;
        background: #000;
        width: 100%; 
        height: 400px; 
        border-radius: 25px;
        overflow: hidden;
        cursor: pointer;
        flex-shrink: 0; 
    }
    .GenerateImageControls
    {
        top: 2%;
        position: relative;
        width: 60%;
        justify-content: space-between;
    }
    .acceptBtn i,
    .rejectBtn i
    {
        display: none;
    }
    .acceptBtn,
    .rejectBtn
    {
        position: relative;
        margin-right: 50px;
        font-size: 1em;
        padding: 10px 10px;
        width: 100px;
        margin-bottom: 20px;
    }
    .acceptBtn
    {
        left: 100%;
    }
    .interruptButton
    {
        scale: 0.8;
    }
       
    
}

@media screen and (max-width: 1024px) {
    #imageGenerator > .imageTiles {
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 98%;
        height: 70%;
        padding: 10px 10px;
        overflow-y: auto;
        border-radius: 20px;
        border-bottom: 2px solid #e91e6241;
        background: repeating-linear-gradient(-45deg, 
            #8888885e, #2e242471 2px,
            transparent 1px, transparent 8px
        );
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    #imageGenerator > .imageTiles > .tile {
        position: relative;
        background: #000;
        width: 100%; 
        height: 400px; 
        border-radius: 25px;
        overflow: hidden;
        cursor: pointer;
        flex-shrink: 0; 
    }
    .GenerateImageControls
    {
        top: 75%;
        position: absolute;
        width: 80%;
        justify-content: space-between;
    }
    .acceptBtn i,
    .rejectBtn i
    {
        display: none;
    }
    .acceptBtn,
    .rejectBtn
    
    {
        position: absolute;
        top: 5px;
        margin-right: 50px;
        font-size: 0.8em;
        padding: 10px 10px;
        width: 100px;
    }
    .rejectBtn
    {
        left: 80%
    }
    .acceptBtn
    {
        left: 100%;
    }
    .interruptButton
    {
        top:  5px;
        scale: 0.8;
    }
    .interruptButton
    {
        scale: 0.8;
    }
       
    
}


@media screen and (max-width: 600px) {
    #imageGenerator > .imageTiles {
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 98%;
        height: 70%;
        padding: 10px 10px;
        overflow-y: auto;
        border-radius: 20px;
        border-bottom: 2px solid #e91e6241;
        background: repeating-linear-gradient(-45deg, 
            #8888885e, #2e242471 2px,
            transparent 1px, transparent 8px
        );
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    #imageGenerator > .imageTiles > .tile {
        position: relative;
        background: #000;
        width: 100%; 
        height: 400px; 
        border-radius: 25px;
        overflow: hidden;
        cursor: pointer;
        flex-shrink: 0; 
    }
    .GenerateImageControls
    {
        top: 75%;
        position: absolute;
        width: 70%;
        justify-content: space-between;
    }
    .acceptBtn i,
    .rejectBtn i
    {
        display: none;
    }
    .acceptBtn,
    .rejectBtn
    
    {
        position: absolute;
        top: 5px;
        margin-right: 50px;
        font-size: 0.8em;
        padding: 10px 10px;
        width: 100px;
    }
    .acceptBtn
    {
        left: 100%;
    }
    .rejectBtn
    {
        left: 60%
    }
    .interruptButton
    {
        top:  5px;
        scale: 0.8;
    }
    .promptBox .overlay.display
    {
        left: 5%;
        font-size: 0.8em;
        top: 5%;

    }
    
}