main.bulk
{
    grid-area: main;
    background: rgba(255, 255, 255, 0.3);

    border-radius: 4px;
    box-shadow: -4px -4px 4px rgba(0, 0, 0, 0.1), 4px 4px 2px rgba(255, 255, 255, 0.1);

    margin: 8px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;

}

main.bulk h1
{
    font-size: 18px;
    color: rgba(33, 80, 97, 1);
}

main.bulk > div
{
    max-width: max-content;
    margin: 16px 0 0 0;
    background-color: rgba(0, 0, 0, 0.0);
    display: flex;
    padding-bottom: 4px;
    flex-wrap: wrap;
    font-size: 12px;
}



main.bulk > div div.item
{
    width: 190px;
    min-height: 100px;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 8px;
    margin: 0 8px 8px 0;
    color: rgba(255, 255, 255, 1);
    padding: 4px;

    display: grid;
    grid-template-columns: min-content auto min-content;
    grid-template-rows: min-content auto min-content;
    grid-gap: 4px;
    grid-template-areas:
        "type time ID"
        "desc desc desc"
        "status result options"
    ;
}

main.bulk > div div.item div
{
    background-color: rgba(255, 255, 255, 0.1);
    padding: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    text-align: center;
}

main.bulk > div div.item div.ID
{
    grid-area: ID;
}

main.bulk > div div.item div.time
{
    grid-area: time;
}

main.bulk > div div.item div.type
{
    font-size: 30px;
    background-color: rgba(255, 255, 255, 0.0);
}

main.bulk > div div.item div.desc
{
    grid-area: desc;
    background-color: rgba(255, 255, 255, 0.0);
    justify-content: left;
    align-items: center;

}

main.bulk > div div.item div.status
{
    grid-area: status;
}

main.bulk > div div.item div.status.Pending
{
    background-color: rgba(20, 120, 0, 1);
}

main.bulk > div div.item div.status.Spawning
{
    background-color: rgba(120, 120, 0, 1);
}

main.bulk > div div.item div.status.Processing
{
    background-color: rgba(230, 142, 0, 1);
}

main.bulk > div div.item div.status.Complete
{
    background-color: rgba(120, 255, 120, 1);
    color: rgba(0, 0, 0, 0.7);
}

main.bulk > div div.item div.status.Failed
{
    background-color: rgba(255, 100, 100, 1);
}

main.bulk > div div.item div.result
{
    grid-area: result;
}

main.bulk > div div.item div.options
{
    grid-area: options;
    background: rgba(0, 0, 0, 0.1);
    font-size: 20px;
    padding: 4px;
    box-shadow: -1px -1px 2px rgba(255, 255, 255, 0.2),
                1px 1px 3px rgba(0, 0, 0, 0.5);

    transition-duration: 0.2s;
}

main.bulk > div div.item div.options.disabled
{
    opacity: 0.6;
    cursor: not-allowed;
}


main.bulk > div div.item div.options:hover
{
    background-color: rgba(255, 255, 255, 0.2);/*rgba(120, 160, 120, 0.5)*/
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

main.bulk > div div.item div.options:active
{
    color: rgba(255, 255, 255, 0.8);
    background-color: rgba(255, 255, 255, 0.05);
    box-shadow: initial;
}