:is(.xOB, .xOBDis, .xOBErr) {
    display: grid;
    grid-template-columns:
        [left] min-content min-content 1fr min-content [right];
    grid-template-rows:
        [top] min-content min-content 1fr min-content[bottom];
    grid-template-areas:
        "objectblock-image objectblock-input objectblock-label objectblock-price"
        "objectblock-image . objectblock-description objectblock-description"
        "objectblock-image . objectblock-extend objectblock-extend";
    padding: var(--optionblock-padding);
    border-width: var(--optionblock-border-width);
    border-radius: var(--optionblock-border-radius);
    border-style: var(--optionblock-border-style);
    box-shadow: var(--optionblock-shadow);
}

.xOB {
    border-color: var(--optionblock-border-color);
    background-color: var(--optionblock-background-color);
}

.xOBDis {
    border-color: var(--optionblock-disabled-border-color);
    background-color: var(--optionblock-disabled-background-color);
}

.xOBErr {
    border-color: var(--optionblock-error-border-color);
    background-color: var(--optionblock-error-background-color);
}

:is(.xOB, .xOBDis, .xOBErr) > img {
    grid-area: objectblock-image;
    padding-right: var(--optionblock-image-gap);
}

:is(.xOB, .xOBDis, .xOBErr)  > :is(input[type='radio'], input[type='checkbox']) {
    grid-area: objectblock-input;
    align-self: center;
}

:is(.xOB, .xOBDis, .xOBErr)  > .xL {
    grid-area: objectblock-label;
    padding-left: var(--optionblock-gap-column);
    align-self: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:is(.xOB, .xOBDis, .xOBErr)  > div[ct='odl'] {
    grid-area: objectblock-description;
    padding-left: var(--optionblock-gap-column);
    padding-top: var(--optionblock-gap-row);
}

:is(.xOB, .xOBDis, .xOBErr)  > .xOP {
    grid-area: objectblock-price;
    padding-left: var(--optionblock-gap-column);
    align-self: center;
}

:is(.xOB, .xOBDis, .xOBErr)  > .xPG {
    grid-area: objectblock-extend;
}

:is(.xOB, .xOBDis, .xOBErr)  > :is(input[type='radio'], input[type='checkbox']) ~ .xPG {
    padding-top: var(--optionblock-gap-row);
    padding-left: var(--optionblock-gap-column);
}

:is(.xOB, .xOBDis, .xOBErr)  > br {
    display: none;
}


/* Needs to be organized
--------------------------------------------
--------------------------------------------
--------------------------------------------
-------------------------------------------- */

/* Option Block */

.xOBDis[allow] {
    color: #666666;
    color: rgba(102, 102, 102, 0.25);
}
.xOBDis:not([allow]) {
    filter: opacity(var(--optionblock-disabled-opacity));
}

.xOB blockquote {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    margin-top: 1rem;
}

.xSelected {
    border-radius: var(--optionblock-border-radius);
    background: cornsilk;
    border: 1px solid saddlebrown;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAJ1BMVEVNcKz///9NcKxNcKxNcKxNcKxNcKxNcKxNcKxNcKxNcKxNcKxNcKzS2z7tAAAADXRSTlMAAAUNEBMfJicuOj1If2nrTAAAAF9JREFUeF49jqEOQFAYhb/LUK9NsDtB0XVJE80TqJou2TyDrmuCrN6nItj509nOOf93SP/D0p1+w2Dje6iW8RNTDeFuyC6ApiWfAZIV1wNEB0UJEDwSshRWXQ+FEFQzXvQtFUHJu/QsAAAAAElFTkSuQmCC') !important /*iconEmptyDot.png*/ ; background-repeat: no-repeat; background-position: 3px 2px; color: black;
    height: 18px;
    min-width: 68px;
    display: inline-block;
    padding: 2px 6px 0 21px;
    margin: 1px;
    user-select: none;
}

.xSelected[sel] {
    background: rgb(204, 252, 204);
    border: 1px solid lightgreen;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAJ1BMVEVNcKz///9NcKxNcKxNcKxNcKxNcKxNcKxNcKxNcKyZrc+tvdnh5/Ec7um7AAAACXRSTlMAAF2kwO/2+f760HMWAAAAbElEQVR4Xj1OsQ2EMBBzxAIBgUSLxAB01GGD71jhayagYAUkBxaI9CNkgvxSuEDn5iz77mzUL+AxrscCB199yXMSmSlsDo0ESQNaCpkBneZV+EHPO+XEXST+C0Vk/RJlaTmSDHZuDy3CQq3GA00BL10xV5bmAAAAAElFTkSuQmCC') !important /*iconDotCheck.png*/ ;
    background-repeat: no-repeat;
    background-position: 3px 2px;
}