section.options {
    grid-area: options;
    background-color: rgba(255, 255, 255, 0.1);
    margin: 8px;
    border-radius: 4px;
    padding: 8px;
    font-size: 12px;
    display: grid;
    grid-template-columns: min-content min-content  min-content auto;
    grid-template-rows: repeat(2, min-content);
    gap: 1px 4px;
    grid-template-areas:
        "optTitle optTitle optQuestions optDownloadButton"
        "optData  optIcon  optQuestions optDownloadButton"
    ;
}
section.options.div
{
    margin: 0;
    padding: 0;
}

section.options button
{
    font-size: 16px;
    padding: 4px 4px;
    margin: 8px 0 0 0;
}

section.options div.optTitle
{
    grid-area: optTitle;
    color: rgba(33, 80, 97, 1);
    font-size: 15px;
    font-weight: 700;
}

section.options div.optIcon
{
    grid-area: optIcon;
    flex-flow: row wrap;
    display: flex;
    width: 60px;
    flex-direction: row;
}

section.options div.optData
{
    grid-area: optData;
    display: grid;
    grid-template-columns: repeat(2, auto);
    grid-template-rows: repeat(2, auto);
    font-size: 13px;
    background: rgba(255, 255, 255, 0.7);
    color:  rgba(33, 80, 97, 1);
    border-radius: 4px;
    padding: 4px;
    gap: 5px;
    text-align: right;
}

section.options div.optData div:nth-child(even)
{
    text-align: left;
}

section.options div.optQuestions
{
    grid-area: optQuestions;
}

section.options div.optDownloadButton
{
    grid-area: optDownloadButton;
    align-self: flex-end;
}

section.options input[type=text],
section.options input[type=search],
section.options input[type=password]
{
    border: 0;
    margin: 1px 4px;
    font-size: inherit;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 4px;
    padding: 0 4px;
    color: rgba(33, 80, 97, 1);
}

section.options button
{
    background: rgba(0, 0, 0, 0.3);
    color: white;
    width: 24px;
    height: 24px;
    font-size: 13px;
    margin: 1px 1px;
    border-radius: 4px;
    padding: 0 4px;
}

section.options button:hover
{
    transform: translate(0px, 0px);
    background-color: rgba(120, 160, 120, 0.5);
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2), -2px -2px 2px rgba(255,255, 255, 0.2);

}

section.options button:active
{
    transform: translate(-1px, 1px);
    background-color: rgba(160, 120, 120, 0.8);
    box-shadow: -2px 2px 2px rgba(0, 0, 0, 0.2), 2px 2px 2px rgba(255,255, 255, 0.02);
}