#hall-spinner {
  	background-color: var(--color_50-percent-black);
  	height: 100%;
  	width: 100vw;
  	position: fixed;
  	inset: 0;
  	display: table;
    color: #848484;
  	top: 0;
  	bottom: 0;
  	margin: 0;
  	padding: 0;
  	z-index: 9999999;
    opacity:0;
    pointer-events:none;
    transition:.3s;
}
#hall-spinner.active{
    opacity:1;
}


#hall-of-fame-wrapper {
    margin: 40px auto 0 auto;
    max-width: 94vw;
}

.hall-of-fame-box {
    width: 100%;
    max-width: 600px;
    margin: 140px auto 40px auto;
}
.hall-controls {
    margin: 0px 0 60px 0;
    font-size: 100% !important;
}
.hall-controls label {
    font-size: larger !important;
    letter-spacing: var(--letter-spacing-font-larger) !important;
}

h1.hall-of-fame {
    text-align: center;
    margin: 0px 0 10px 0;
    padding: 20px 10px 20px 10px;
    font-size: 280%;
    line-height: 110%;
    font-family: var(--font_serif);
}

#hall-of-fame-form,
#messages {
    padding: 0 20px 0 20px;
    width: 360px;
    max-width: 100%;
    margin: 20px auto 0 auto;
}
#hall-of-fame-form input,
#hall-of-fame-form .btn-link {
    margin: 20px 0 0 0;
    background: rgb(255 255 255 / 90%);
    border-color: rgb(0 0 0 / 30%);
}
#hall-of-fame-form label {
    background: none;
    padding: 0 0 10px 6px;
    font-size: small;
    letter-spacing: var(--letter-spacing-04);
    display: block;
    width: 100%;
    margin: 0px 0 0 0;
    line-height: 1;
}
.label-info {
    display: block;
    font-size: smaller;
    padding: 6px 0 0 0;
}
#hall-of-fame-form label sup {
    font-size: larger;
    color: var(--font_color-red);
    }

    /*
#hall-of-fame-form input {
    width: 360px;
    max-width: 100%;
    font: var(--font_style_01);
    margin: 0 auto 24px auto;
    padding: 0.4rem 0.6rem 0.4rem 0.6rem;
    text-align: left;
}
*/
.sortable{
    cursor:pointer;
    user-select:none;
    position:relative;
    padding-right:20px;
}


.sort-indicator {
    display: table-cell;
    width: 18px;
    height: auto;
    padding: 0 6px 0 6px;
    border: 0px solid red;
    margin: 0;
    position: relative;
    color: var(--font_color-white-persistent);
}

.sort-indicator::before,
.sortable.sort-asc > .sort-indicator::before {
    content:'';
    display:block;
    position:absolute;
    transition: 0.2s;
    top: 1px;
    left: 1px;
    width: 10px;
    height: 10px;
    background-repeat:no-repeat;
    background-size:contain;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath fill='white' d='M5.966 11.576.422.465h11.111z'/%3E%3C/svg%3E");
}
th.sortable.sort-desc > .sort-indicator::before {
    transform:rotate(180deg);
}



.cell-th {
    display: table-cell;
    border-collapse: collapse;
    color: var(--font_color-white-persistent);
    letter-spacing: var(--letter-spacing-04);
    font-weight: 400;
}

#hallTable {
    width: 100%;
    border-collapse: collapse;
    line-height: 1;
    color: var(--font_color-black);
}

#hallTable th,
#hallTable td {
    border: 1px solid var(--color_10-percent-black);
    padding: 8px;
    text-align: left;
    font-size: smaller;
}
[data-theme="dark"] #hallTable th,
[data-theme="dark"] #hallTable td {
    border-bottom: 1px solid var(--color_10-percent-white);
}
td.mobile-meta-col {
    border-bottom: none !important;
    }

#hallTable td {
    line-height: 148%;
    font-size: small;
    min-width: fit-content;
}
#hallTable tr {
    border-bottom: 1px solid var(--border_color-grey);
}
#hallTable thead tr {
    border-bottom: none;
}

#hallTable th {
    background: var(--bg-black-persistent);
}

/*
#hallTable.sort-reference td[data-column="reference"],
#hallTable.sort-code td[data-column="code"] {
    background: var(--bg-hall-light);
}
*/
/* #hallTable.sort-reference td[data-column="reference"] .mobile-label, */
/*#hallTable.sort-code td[data-column="code"] {
    background: var(--bg-hall-light);
}
*/
#pagination {
    width: 94%;
    margin: 60px auto 60px auto;
    text-align: center;
    max-width: var(--wrap-woocommerce-max-width);
}
#pagination button {
    margin: 0 10px 10px 0;
    padding: 12px;
    min-width: 2.8em;
    border: 1px solid transparent;
    background: var(--bg-black-persistent);
    color: var(--font_color-white-persistent);
    border-radius: 4px;
    font-weight: normal;
    line-height: 1;
}
#pagination button:disabled {
    background: #e2e2e2;
    color: var(--font_color-black-persistent);
}
#pagination button:hover {
    opacity: 0.8;
    cursor: pointer;
}
#pagination button:disabled:hover {
    opacity: 1;
    cursor: auto;
}
#hallTable td:nth-child(4),
#hallTable th:nth-child(4),
#hallTable td:nth-child(5),
#hallTable th:nth-child(5),
#hallTable td:nth-child(6),
#hallTable th:nth-child(6){
    text-align:center;
    font-size: smaller;
    opacity: 1;
}
/*
#hallTable td:nth-child(3),
#hallTable th:nth-child(3){
  opacity: 0.8;
}
*/

#hallTable td:nth-child(6) span.cell-th,
#hallTable th:nth-child(6) span.cell-th {
    text-align:center;
    display: block;
}

.td-code {
    margin: 2px 0 0 0;
    display: flex;
}

.td-code-small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: xx-small;
    opacity: 0.3;
    display: block;
    margin: -6px 0 0px 0;
    text-align: left;
    max-width: 30ch;
}

#hallTable .hall-team {
    box-sizing: border-box;
    position: relative;
    display: inline-flex;
    gap: 5px;
    height: auto;
    line-height: 1;
    padding: 0px;
    margin: 0;
    align-self: flex-start;
    width: auto;
    justify-content: left;
    flex-direction: row;
    align-items: center;
    font-size: smaller;
}

/* .td-code .hall-team-wrapper:nth-child(2) > .hall-team > .hall-team-flag { opacity: 0.7; } */

.td-code .hall-team-wrapper:nth-child(2) { opacity: 0.6; }
.td-code .hall-team-wrapper:nth-child(3) { opacity: 0.4;  }
.td-code .hall-team-wrapper:nth-child(4) { opacity: 0.2; }

#hallTable .hall-team-flag {
    width: 24px;
    height: 18px;
    overflow: hidden;
    border-radius: 2px;
}
/*
.td-code .hall-team-wrapper:nth-child(1) > .hall-team > .hall-team-flag {
    width: 32px !important;
    height: 24px !important;
}
*/



#hallTable .ellipsis-wrapper .hall-team-name {
    color: var(--font_color-black);
    padding: 6px 10px 0 1px;
    text-transform: uppercase;
    max-width: 100%;
    line-height: 1;
}
.mobile-meta-col {
    /* display: grid; */
    grid-template-columns: repeat(3, 1fr);
}


@media screen and (min-width: 1024px) {
    .td-code-small {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: x-small;
        max-width: 100ch;
    }
}


.meta-col {
    display: inline-block;
    width: 28.3%;
}
.meta-col .label-nr {
    display: block;
    float: left;
    padding: 0 2px 0 5px;
}
.meta-col.date {
    font-size: x-small;
}

#hallTable.sort-rank_position .meta-col.rank .label-nr,
#hallTable.sort-points .meta-col.points .label-nr {
    font-size: large;
    display: block;
    margin: 2px 10px 0 10px;
    line-height: 1;
    background: #000;
    border-radius: 50%;
    padding: 0.4em 0.25em 0.1em 0.19em;
    letter-spacing: -0.05em;
    height: 32px;
    width: 32px;
    float: right;
    text-align: center;
    color: var(--font_color-white);
}
#hallTable.sort-rank_position .meta-col.rank .label-nr,
#hallTable.sort-points .meta-col.points .label-nr {
    background: #86373a;
}

.mobile-sort-buttons,
.mobile-label{
    display:none;
}

@media (max-width:768px){

    .hall-controls {
        margin: 0 0 40px 0;
    }
    #hallTable thead {
        display:none;
    }
    #hallTable {
        font-size: small;
    }
    #hallTable td {
        font-size: smaller;
        width: 98% !important;
        margin-left: 1%;
    }
    #hallTable td[data-column="name"] {
        border-top: none;
    }

    #hallTable,
    #hallTable tbody,
    #hallTable tr,
    #hallTable td {
        display: block;
        width:100%;
    }
    #hallTable tr {
        margin-bottom: 10px;
        border: var(--border_dashed);
        padding: 4px 0 4px 0;
        border-radius: 6px;
        box-shadow: var(--box-shadow-bg-box);
    }
    #hallTable td {
        display:grid;
        grid-template-columns:84px 1fr;
        gap: 4px;
        padding: 2px 0;
        align-items: center;
    }
    #hallTable th, #hallTable td {
        padding: 2px;
        border-top: 1px solid var(--color_5-percent-black);
    }
    .mobile-label{
        display: block;
        opacity: .5;
        padding: 0 6px 0 6px;
        font-weight: 400;
        /* font-size: smaller; */
    }
    #hallTable td:nth-child(4),
    #hallTable th:nth-child(4),
    #hallTable td:nth-child(5),
    #hallTable th:nth-child(5),
    #hallTable td:nth-child(6),
    #hallTable th:nth-child(6) {
        text-align: left;
        font-size: smaller;
        opacity: 1;
        margin-left: 1% !important;
    }

    #hallTable td[data-column="name"] .label-txt,
    #hallTable td[data-column="reference"] .label-txt {
        font-size: 132%;
        padding: 2px 0 3px 0;
    }

    .mobile-meta-col {
        display:grid;
        grid-template-columns: repeat(3, auto) !important;
        gap: 0px !important;
        margin: 0 !important;
    }
    .meta-col {
        text-align: left;
        padding: 0px;
        border-right: 1px solid var(--color_10-percent-white);
        width: auto;
    }
    .meta-col.date { border-right: none; }

    .mobile-meta-col .mobile-label {
        display: inline-block;
    }
    .mobile-sort-buttons {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
        margin-bottom: 20px;
    }
    .mobile-sort-buttons .btn-small-text {
        text-align: left;
        color: var(--font_color-black);
        padding: 0 0 0 16px;
    }
    .mobile-sort-buttons .sort-indicator {
        position: absolute;
        top: 5px;
        left: 6px;
        width: 10px;
        opacity: 0.7;
    }
    .mobile-sort-buttons .sort-indicator::before,
    .mobile-sort-buttons .sortable.sort-asc > .sort-indicator::before {
        position: absolute;
        top: 1px;
        left: 1px;
        color: var(--font_color-black);
    }
    .mobile-sort-buttons .sort-indicator::before,
    .mobile-sort-buttons .sortable.sort-asc > .sort-indicator::before {
        background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath fill='black' d='M5.966 11.576.422.465h11.111z'/%3E%3C/svg%3E");
    }
    [data-theme="dark"] .mobile-sort-buttons .sort-indicator::before,
    [data-theme="dark"] .mobile-sort-buttons .sortable.sort-asc > .sort-indicator::before {
        background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath fill='white' d='M5.966 11.576.422.465h11.111z'/%3E%3C/svg%3E");
    }
    .mobile-sort-buttons button {
        padding: 5px 8px 5px 6px;
        font-size: smaller;
        line-height: 1;
        background: var(--bg-group-button);
        border-radius: 4px;
        border: 1px solid;
        border-color: var(--border_color-grey);
        box-shadow: var(--box-shadow-button);
        text-align: left;
    }

    .mobile-sort-buttons .sortable.active .btn-small-text,
    .mobile-sort-buttons .sortable.active .sort-indicator::before {
        color: var(--color_bordeaux);
    }

    .sortable.sort-asc .sort-indicator::before {
        transform:rotate(180deg);
    }
}



.hall-of-fame-box {
    width: 100%;
    max-width: 600px;
    margin: 10px auto 80px auto;
}
h1.hall-of-fame {
    text-align: center;
    margin: 0px 0 10px 0;
    padding: 20px 10px 20px 10px;
    font-size: 280%;
    line-height: 110%;
    font-family: var(--font_serif);
}
#hall-of-fame-form-wrapper {
    background: var(--bg-box);
    padding: 30px 0px 40px 0px;
    margin: 0px auto 50px auto;
    max-width: var(--wrap-small);
    box-shadow: var(--box-shadow-bg-box);
    border: var(--border_bg-box);
}
#hall-of-fame-inline #hall-of-fame-form-wrapper {
    padding: 50px 10px 40px 10px;
    margin: 60px auto 50px auto;
}
#hall-of-fame-form,
#messages {
    padding: 0 20px 0 20px;
    width: 360px;
    max-width: 100%;
    margin: 20px auto 0 auto;
}
#hall-of-fame-form label {
    background: none;
    padding: 0 0 10px 6px;
    font-size: small;
    letter-spacing: var(--letter-spacing-04);
    display: block;
    width: 100%;
    margin: 0px 0 0 0;
    line-height: 1;
}
#hall-of-fame-inline #hall-of-fame-form label {
    font-size: inherit;
    letter-spacing: var(--letter-spacing-00);
    line-height: 148%;
}

.label-info {
    display: block;
    font-size: smaller;
    line-height: 142%;
    padding: 6px 0 0 0;
}
#hall-of-fame-form label sup {
    font-size: larger;
    color: var(--font_color-red);
    }
#hall-of-fame-form input {
    width: 360px;
    max-width: 100%;
    font: var(--font_style_01);
    margin: 0 auto 24px auto;
    padding: 0.4rem 0.6rem 0.4rem 0.6rem;
    text-align: left;
}


#hall-of-fame-form input#hall-code.not-editable {
    background: none;
    color: var(--font_color-black) !important;
    text-align: center;
    overflow: hidden !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 58ch;
    font-size: smaller;
    opacity: 0.5;
}
#hall-of-fame-form input#hall-code.not-editable:active,
#hall-of-fame-form input#hall-code.not-editable:focus,
#hall-of-fame-form input#hall-code.not-editable:focus-visible {
    border: 1px solid;
    border-color: var(--color_50-percent-black);
    outline: none;
    background-color: transparent;
    background: transparent;
    font-size: smaller;
}

#hall-of-fame-form input#hall-code.not-editable::selection {
background: transparent;
}
/* Remove the dropdown arrow for datalists in Chrome/Safari */
input#hall-ref::-webkit-calendar-picker-indicator {
    display: none !important;
}



#hall-send {
    margin: 20px auto 0 auto !important;
    display: flex;
}
#hall-of-fame-page #hall-send {
    margin: 20px 0 !important;
    zoom: 0.9;
}
.hall-send-formular-button {
    max-width: 300px;
}
#hall-send.disabled {
    opacity: 0.1;
}
#applyFilters,
#showAllBtn {
    margin: 0 0 0 0 !important;
}
#showAllBtn {
    opacity: 0.4;
    padding: 0;
}
body.hall-filtered #showAllBtn {
    opacity: 1;
}

.hall-button-wrap {
    display: grid;
    grid-template-columns: repeat(2, auto) !important;
    gap: 16px;
    zoom: 0.8;
}

#hallCount-wrapper {
    margin: 4px 0 0px 48px;
    position: relative;
    color: var(--color_bordeaux);
    font-family: var(--font_serif);
    font-size: 240%;
}
.bordeaux {
    color: var(--color_bordeaux);
}
#hallCountWrap {
    display: flex;
    vertical-align: top;
    align-items: flex-start;
    gap: 8px;
    margin: 4px 0 0 27px;
}
#hallCountReference {
    display: flex;
    font-size: 70%;
    text-transform: uppercase;
    margin: 0 0 0 53px;
}

.simple-image-wrapper {
    border: 1px solid var(--border_color-grey);
    padding: 20px;
    margin: 30px 0 0;
    background: #242426;
}
.simple-image-wrapper.light {
    background: #ffff;
    padding: 30px 20px 30px 20px;
}
.simple-image-wrapper img {
    width: 100%;
    max-width: 320px;
    display: block;
    margin: 0 auto;
}
.simple-image-wrapper img.img-shadow {
    box-shadow: var(--box-shadow-strong);
}



#reference-logo-wrap > a > span,
#reference-logo-wrap > span > span {
    display: inline-block;
    background-position: center center;
    background-size: cover;
    aspect-ratio: 16 / 9; /* scalable height */
    width: 160px;
    max-width: 120px;
    max-height: 54px;
    margin: 2px 10px -3px 10px;
}
#reference-logo {
    display: inline-block;
    line-height: 1;
    margin: 4px 2px 2px 53px;
    padding: 0;
    /* background-color: var(--bg-box);
    border: var(--border_bg-box);
    box-shadow: var(--box-shadow-bg-box);
    */
}

/* Sponsor Gruppe 01241 */
#reference-logo.g1 > span { background-image: url(sponsoren/logo_01241.png);}
#reference-logo.g1 { background-color: #000; }

/* Sponsor Gruppe Lanchonete 63 */
#reference-logo.g2 > span { background-image: url(sponsoren/sponsor-63.jpg);}
#reference-logo.g2 { background-color: #232426; }

#hallCount {
    display: block;
}
.hallTxt {
    font-size: 42%;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-06);
    display: block;
    line-height: 1;
    padding: 6px 0 0 0;
    margin: 2px 0 0 0;
}

#messages {
    opacity: 0;
    transition: opacity 1s ease-in-out;
    margin: 0 auto;
}

#messages.error,
#messages.success {
    opacity: 1 !important;
    margin: 0 auto 30px auto;
    padding: 10px 20px 10px 20px;
    /* border-left: 6px solid; */
    line-height: 148%;
    letter-spacing: var(--letter-spacing-00);
    text-align: center;
    box-shadow: var(--box-shadow-bg-box);
    border: var(--border_bg-box);
    border-radius: 2px;
}

#hall-of-fame-inline #messages.error {
    font-size: smaller;
}

#messages.error {
    background: #ffdddd;
    color: var(--font_color-red);
    /* border-left-color: var(--font_color-red); */

}
#messages.success {
    background: var(--bg-selected-green);
    color: #008000;
    /* border-left-color: var(--border-selected-green-left); */
    background-color: var(--bg-selected-green);
}
[data-theme="dark"] #messages.success {
    color: #b8e3b8;
    /* border-left-color: var(--border-selected-green-left); */
    background-color: #bcffc947;
}
#messages.success .success-box .inline-button {
    margin: 8px 0 8px 0px;
}




.analyzer-box {
    width: 100%;
    max-width: 600px;
    margin: 80px auto 40px auto;
}
h1.analyzer {
    text-align: center;
    margin: 0px 0 10px 0;
    padding: 20px 10px 20px 10px;
    font-size: 280%;
    line-height: 110%;
    font-family: var(--font_serif);
}
.analyzer-box .prediction-text-inner {
    padding: 20px 20px 20px 20px;
    background: rgb(255 255 255 / 0%);
    border: 1px solid rgb(255 255 255 / 0%);
    box-shadow: 2px 2px 12px -3px rgb(0 0 0 / 0%);
    font-size: smaller;
    line-height: 148%;
    text-align: center;
}
.analyzer-box #prediction-text,
.analyzer-box #prediction-text-wrapper {
    max-width: 100%;
    position: relative;
}
.text-bg-yellow {
    /* color: var(--font_color-red); */
    background: var(--bg-message-yellow);
    padding: 0 4px 0 4px;
}
[data-theme="dark"] .text-bg-yellow {
    color: var(--font_color-red);
    background: #e4c325;
    padding: 0 4px 0 4px;
}
#analyzer-form-wrapper {
    /* background: var(--bg-box); */
    padding: 0px;
    margin: 0 0 0 0;
    text-align: center;
}
#analyzer-form {
    padding: 0 20px 0 20px;
}
#analyzer-form input, #analyzer-form label, #analyzer-form .btn-link {
    display: flex;
    float: none;
    margin: 20px auto 0 auto;
    background: rgb(255 255 255 / 90%);
    border-color: rgb(0 0 0 / 30%);
}

#analyzer-form input {
    width: 360px;
    max-width: 100%;
    font: var(--font_style_01);
    margin: 0 auto 36px auto;
    padding: 0.4rem 0.6rem 0.4rem 0.6rem;
    text-align: left;
}

#score-message {
    opacity: 0;
    transform: translateY(40px);
    text-align: left;
    margin: 40px 0 0 0;
    padding: 8px;
    border: 1px solid #ffffff;
    background: #fff;
    font-size: smaller;
    color: var(--font_color-black-persistent);
    line-height: 136%;
    box-shadow: var(--box-shadow-wide);
    transition: opacity 1s ease, transform 0.6s ease;
}

#score-message.show {
  opacity: 1;
  transform: translateY(0);
}

#date-validation {
    padding: 0 0 0 6px;
    margin: 30px 0 10px 0;
    text-align: left;
    font-size: smaller;
    line-height: 148%;
    color: inherit;
    opacity: 0;
    transform: translateY(5px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
#date-validation.show {
  opacity: 1;
  transform: translateY(0);
}
#date-validation > span.valid-bet > span,
#date-validation > span.invalid-bet > span {
    text-transform: uppercase;
    background: var(--bg-selected-green);
    letter-spacing: var(--letter-spacing-metaheader);
    padding: 0 4px 0 4px;
}
#date-validation > span.invalid-bet > span {
    background: var(--bg-selected-red);
}

#score-wrapper {
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
  pointer-events: none;
  padding: 0px;
}

#score-wrapper.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}


#score {
    position: relative;
    width: 90%;
    padding: 0;
    display: block;
    margin: 0 auto;
    /* background: #fff; */
    /* height: 36px;*/
}

#result-indicator-bg {
    position: relative;
    width: 100%;
    height: 12px;
    background: linear-gradient(90deg, rgb(23 144 251 / 90%) 0%, rgb(221 0 0 / 40%) 40%, rgb(230 0 0) 100%);
    z-index: 2;
}

#result-indicator {
    position: absolute;
    right: 0;
    top: 22px;
    height: 12px;
    width: 100%;
    background: var(--bg-cool-gray);
    transition: width 0.1s linear;
    z-index: 9;
}


#result-value-wrap {
    padding: 20px 0 0 0;
    text-align: center;
}

#result-value {
    width: 100%;
    font-weight: bold;
    font-size: 320%;
    margin: 2px 0 10px 0;
}

.basic-row,
.scala-text {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
}

.scala-text {
    font-size: 11px;
    line-height: 1;
    padding: 0 0 6px 0;
}

.scala-text .left  { text-align: left; margin-left: -2px; padding: 0 0 5px 0; }
.scala-text .center{ text-align: center; padding: 0 0 5px 0; }
.scala-text .right { text-align: right; margin-right: -11px; padding: 0 0 5px 0; }

.basic-row > :nth-child(1) {
  text-align: left;
}

.basic-row > :nth-child(2) {
  text-align: center;
}

.basic-row > :nth-child(3) {
  text-align: right;
}

#result-scala span.result-scala-line {
    background-position: 50% 50%;
    background-image: url(result-scala.svg);
    background-repeat: no-repeat;
    display: inline-block;
    background-size: 100%;
    width: 100%;
    height: 24px;
    position: absolute;
    top: 12px;
    left: 0;
    right: 0;
    z-index: 12;
}
[data-theme="dark"] #result-scala span.result-scala-line {
    background-image: url(result-scala-white.svg);
}

#error-message {
  color: var(--font_color-red);
  margin-top: 40px;
  opacity: 0;
  transition: opacity 0.6s ease;
}
#error-message.show {
  opacity: 1;
}





#score-details {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 0px;
    font-size: smaller;
    line-height: 132%;
}

.score-row {
    display: grid;
    grid-template-columns: 20px 5fr 24px 36px 3fr;
    align-items: center;
    padding: 4px 1px 3px 1px;
    border-top: 1px solid rgb(0 0 0 / 20%);
    align-items: flex-start;
}

.score-row .label {
  text-align: left;
}
.score-row.total .label {
  text-align: right;
}
.score-row .counter span {
    display: inline-block;
    text-align: center;
    border: 1px solid rgb(0 0 0 / 50%);
    padding: 0 3px;
    margin: 0 2px 0 0;
    opacity: 0.5;
}

.score-row .value {
  text-align: center;
}

.score-row .points {
  text-align: right;
  font-weight: bold;
}

.score-row .comment {
  text-align: right;
  opacity: 0.5;
  padding: 0 0 0 8px;
}

.true::before {
  content: "✔";
  color: #00c853;
}

.false::before {
  content: "✖";
  color: #d50000;
}
.layer-textblock #score-message-info {
    background: var(--bg-white);
    font-size: smaller;
    color: var(--font_color-black);
    box-shadow: none;
    border: var(--border_color-grey-dark);
    padding: 0;
    margin: 0;
}
.layer-textblock #score-details-info {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 0px;
    font-size: smaller;
    line-height: 132%;
}

.layer-textblock .score-row {
    grid-template-columns: 20px 4fr 24px 3fr;
}
.layer-textblock .score-row {
    border-top: var(--border_bg-box);
}
.layer-textblock .score-row .counter span {
    border: 1px solid var(--border_color-grey-dark);
}
.logo-effet {
    background-position: 4px -31px;
    background-image: url(sponsoren/logo-effet.svg);
    background-repeat: no-repeat;
    display: inline-block;
    background-size: 94%;
    width: 121px;
    height: 24px;
    margin: 13px 0 0px 0;
}


.pdf {
    white-space: nowrap;
    display: inline-block;
    align-items: center;
    width: auto;
    height: auto;
    margin: 0;
}
.pdf::before {
    content: "";
    display: inline-block;
    background-repeat: no-repeat;
    background-image: url(icon-pdf.svg);
}

.pdf::before {
    background-size: cover;
    aspect-ratio: 1 / 1;
    margin: 0 6px -4px 0;
}

.pdf::before {
    background-size: 80% !important;
    background-position: 10% 100%;
    width: 24px;
    height: 24px;
}

[data-theme="dark"] .pdf::before {
    background-position: 10% 50%;
}
.pdf-outer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 20px 0 0 0;
    gap: 0px 30px;
}
.pdf-wrap {
    margin: 10px 0 0 0;
}
/*
@media screen and (max-width: 440px) {
    .pdf-outer {
        grid-template-columns: repeat(1, auto) !important;
    }
} */