@import url('https://fonts.googleapis.com/css?family=Roboto Condensed');
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css");

@font-face {
    font-family: 'seven-segment';
    src: url('fonts/seven-segment.woff2') format('woff2');
}

@font-face {
    font-family: 'smd-led';
    src: url('fonts/smd-led.woff2') format('woff2');
}

@font-face {
    font-family: 'smd-led-single';
    src: url('fonts/smd-led-single.woff2') format('woff2');
}

@font-face {
    font-family: 'matrix';
    src: url('fonts/matrix.woff2') format('woff2');
}

/* Device breakpoints template */

 /* Extra small devices (phones, 600px and down)
 @media only screen and (max-width: 600px) {...} */

 /* Small devices (portrait tablets and large phones, 600px and up)
 @media only screen and (min-width: 600px) {...} */

 /* Medium devices (landscape tablets, 768px and up)
 @media only screen and (min-width: 768px) {...} */

 /* Large devices (laptops/desktops, 992px and up)
 @media only screen and (min-width: 992px) {...} */

 /* Extra large devices (large laptops and desktops, 1200px and up)
 @media only screen and (min-width: 1200px) {...} */

 :root {
    --pst-font-size-h1: 2.5em;
    --pst-font-size-h2: 2.125em;
    --pst-font-size-h3: 1.75em;
    --pst-font-size-h4: 1.5em;
    --pst-font-size-h5: 1.25em;
    --pst-font-size-p: 1em;
    --pst-font-size-rubric: 1.5em;
    --dg-red: red;
    --dg-red-dark: rgb(221, 90, 90);
}

 @media only screen and (max-width: 600px) {

    :root {
        --pst-font-size-h1: 2em;
        --pst-font-size-h2: 1.75em;
        --pst-font-size-h3: 1.5em;
        --pst-font-size-h4: 1.375em;
        --pst-font-size-h5: 1.25em;
        --pst-font-size-p: 0.875em;
        --pst-font-size-rubric: 1.275em;
    }
 }

p {
    font-size: var(--pst-font-size-p);
}

 ol {
    
    li::marker {
        padding-left: 10rem;
    }

    li + li {
        margin-top: 1rem;
    }

    ul {
        li + li {
            margin-top: 0;
        }
    }
 }

 ol li::marker {
    margin-right: 10rem;
    font-size: var(--pst-font-size-p);
 }

.bd-header {
    box-shadow: none;
    border-bottom: 2px solid #004183;
}

html[data-theme=light] {
    --pst-color-primary: #004183;
    --pst-color-secondary: #004183;
    --dg-red-display: var(--dg-red);
}

html[data-theme=dark] {
    --dg-red-display: var(--dg-red-dark);
}

.bd-header .navbar-nav>.current>.nav-link {
    border-bottom: none;
}

.prev-next-area a p.prev-next-title {
    text-decoration: none;
}

h1 {
    font-weight: bold;
    font-size: var(--pst-font-size-h1)
    /* border-top: 4px solid var(--pst-color-primary);
    border-bottom: 4px solid var(--pst-color-primary); */
}

h1 span.guilabel::before {
    background-color: transparent !important;    
}

h2 {
    font-weight: 600;
}

h5 {
    color: dimgray;;
}

/*  ADMONITION STYLES   */

div.admonition {
    display: table;
    width: 100%;
    border-left: none;
    padding-top: 1em;
    padding-bottom: 1em;
}

div.admonition > .admonition-title {
    background-color: transparent !important;
    display: table-cell;
    width: 50px;
    font-size: 0 !important;
    margin-right: 1em;
    margin-left: 2em;
    position: relative;
    vertical-align: middle;
}

div.admonition > .admonition-title:before {
    background-color: transparent !important;
    background-image: url('_images/icons/ISO_7010_M002.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 40px;
    height: 40px;
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50% !important;
    left: 50% !important;
    padding: 4em;
}

div.admonition.note > .admonition-title:before {
    background-image: url('_images/icons/ISO_7010_M001_info.svg');
}

div.admonition.admonition-question > .admonition-title:before {
    background-image: url('_images/icons/ISO_7010_M001_question.svg');
}

div.admonition.admonition-children > .admonition-title:before {
    background-image: url('_images/icons/ISO_7010_M055.svg');
}

div.admonition.caution > .admonition-title:before {
    background-image: url('_images/icons/ISO_7010_M001.svg');
}

div.admonition.admonition-earth > .admonition-title:before {
    background-image: url('_images/icons/ISO_7010_M005.svg');
}

div.admonition.admonition-mains > .admonition-title:before {
    background-image: url('_images/icons/ISO_7010_M006.svg');
}

div.admonition.hint > .admonition-title:before {
    background-image: url('_images/icons/example_hint.svg');
}

div.admonition.seealso > .admonition-title:before {
    background-image: url('_images/icons/seealso.svg');
}

div.admonition.attention > .admonition-title:before {
    background-image: url('_images/icons/ISO_7010_W012.svg');
}

div.admonition.admonition-hot > .admonition-title:before {
    background-image: url('_images/icons/ISO_7010_W017.svg');
}

div.admonition.admonition-flame > .admonition-title:before {
    background-image: url('_images/icons/ISO_7010_W021.svg');
}

div.admonition.warning > .admonition-title:before {
    background-image: url('_images/icons/ISO_7010_W001.svg');
}

div.admonition.admonition-recycle > .admonition-title:before {
    background-image: url('_images/icons/Recycling_symbol2.svg');
}

html[data-theme=light] div.admonition.admonition-trash > .admonition-title:before {
    background-image: url('_images/icons/WEEE_symbol_vectors.svg');
}

html[data-theme=dark] div.admonition.admonition-trash > .admonition-title:before {
    background-image: url('_images/icons/WEEE_symbol_vectors-dark.svg');
}

div.admonition > .admonition-title:after {
    color: transparent !important;
}

div.admonition > .admonition-title + * {
    margin-bottom: 0.4em;
}

div.admonition.admonition-navigation {
    border-color: hsl(200, 100%, 25%);
}
div.admonition.admonition-navigation > .admonition-title {
    background-color: var(--pst-color-info-bg);
    color: /* white; */
}
div.admonition.admonition-navigation > .admonition-title:after {
    color: hsl(200, 100%, 25%);
    content: "\e476"; /* the fa-scale icon */
}

td {
    div.admonition {
        margin-top: 0;
        margin-bottom: 0.825em;
    }
}

.title {
    /* font-family: 'Roboto Condensed', sans-serif; */
    color: var(--pst-color-primary);
    /* font-weight: bold; */
    font-size: 3rem;
    /* border-top: 4px solid var(--pst-color-primary);
    border-bottom: 4px solid var(--pst-color-primary);
    margin-top: auto;
    margin-bottom: 25px; */
}

img {
    border-radius: 2px;
}

img.no-rounded {
    border-radius: 0px !important;
}

.navbar-brand img {
    border-radius: 0 !important;
}

.responsive-img {
    max-width: 100%;
    width: 400px; /* Maximální šířka obrázku pro PC */
}

.responsive-steps {
    max-width: 100%;
    width: 800px; /* Maximální šířka obrázku pro PC */
}

.header-article__inner {
    margin-bottom: 20px;
}

.language-picker {
    display: flex;
    align-items: center;
    box-shadow: 10px rgba(0, 0, 0, 0.2);
}

.language-picker label {
    display: none;
}

.language-picker select {
    padding: 10px;
    margin-left: 10px;
    border: none;
    border-radius: 0.75em;
    background-color: var(--sd-color-light-bg);
    cursor: pointer;
    font-size: 0.8rem;
}

html[data-theme=dark] .language-picker select {
    background-color: #222832;
}

.responsive-steps {
    max-width: 100%;
    width: 800px; /* Maximální šířka obrázku pro PC */
    /* border: 1px solid rgb(212, 212, 212);*/
    border-radius: 25px; 
    margin-bottom: 5%;
}

.navigation-height {
    max-height: 100%;
    height: 200px; /* Maximální šířka obrázku pro PC */
}

.navigation-width {
    max-width: 100%;
    width: 600px; /* Maximální šířka obrázku pro PC */
}

.navigation-img {
    max-height: 100%;
}

.img-border {
    max-height: 100%;
    border: 1px solid #eee;
}

html[data-theme=dark] .img-border {
    max-height: 100%;
    border: 1px solid #3f3f3f;
    border-radius: 20px !important;
}

/* Table styles */

h1 + div.pst-scrollable-table-container {
    margin-top: 3rem;
}

.table {
    border: 2px solid var(--pst-color-border);
}

tr {
    border-bottom: 2px solid var(--pst-color-border) !important;
}

th {
    background-color: var(--pst-color-surface) !important;

    p {
        color: var(--pst-color-text-muted);
    }
}

td {
    background-color: var(--pst-color-background) !important;
}

.table-center-column-1 tr td:nth-child(1),
.table-center-column-1 tr th:nth-child(1),
.table-center-column-2 tr td:nth-child(2),
.table-center-column-2 tr th:nth-child(2),
.table-center-column-3 tr td:nth-child(3),
.table-center-column-3 tr th:nth-child(3),
.table-center-column-4 tr td:nth-child(4),
.table-center-column-4 tr th:nth-child(4),
.table-center-column-5 tr td:nth-child(5),
.table-center-column-5 tr th:nth-child(5),
.table-center-column-6 tr td:nth-child(6),
.table-center-column-6 tr th:nth-child(6),
.table-center-column-7 tr td:nth-child(7),
.table-center-column-7 tr th:nth-child(7),
.table-center-column-8 tr td:nth-child(8),
.table-center-column-8 tr th:nth-child(8),
.table-center-column-9 tr td:nth-child(9),
.table-center-column-9 tr th:nth-child(9),
.table-center-column-10 tr td:nth-child(10),
.table-center-column-10 tr th:nth-child(10),
.table-center-column-11 tr td:nth-child(11),
.table-center-column-11 tr th:nth-child(11),
.table-center-column-12 tr td:nth-child(12),
.table-center-column-12 tr th:nth-child(12) {
    text-align: center !important;
}

.table-right-column-2 tr td:nth-child(2),
.table-right-column-2 tr th:nth-child(2),
.table-right-column-3 tr td:nth-child(3),
.table-right-column-3 tr th:nth-child(3) {
    text-align: right !important;
}

.table-left-column-2 tr td:nth-child(2),
.table-left-column-2 tr th:nth-child(2),
.table-left-column-3 tr td:nth-child(3),
.table-left-column-3 tr th:nth-child(3),
.table-left-column-4 tr td:nth-child(4),
.table-left-column-4 tr th:nth-child(4) {
    text-align: left !important;
}

.table-red-line-left-8 tr:nth-child(8) td:first-child,
.table-red-line-left-9 tr:nth-child(9) td:first-child {
    
    border-left: solid 3px;
    border-color: var(--sd-color-danger);
}

table th ~ th {
    border-left: 1px solid var(--pst-color-table-inner-border);
}

a.image-reference::after {
    content: "" !important;
}

div.bd-article-container {

    a.reference.internal::after,
    a.reference.external::after {
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        content: " \f08e";
        font-size: 0.7em;
        vertical-align: super;
    }

    a.reference.internal:hover,
    a.reference.external:hover {
        text-decoration: underline;
    }

    a.reference.internal,
    a.reference.external {
        text-decoration: none;
    }
}

nav.bd-links li > a::after {
    content: "";
}

/*
table {
    
    a::after {
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        content: " \f08e";
        font-size: 0.7em;
        vertical-align: super;
    }

    a:hover {
        text-decoration: underline;
    }
}
*/

.modern-table-container {
    overflow-x: auto;

    table {
        width: 100%;
        border-collapse: collapse;

      }

    th {
        padding: 1rem;
        background-color: var(--pst-color-surface) !important;
        vertical-align: middle;
    }

    td {
        padding: 0.75rem;
        border-bottom: 1.5px solid var(--pst-color-surface) !important;
        background-color: var(--pst-color-background);
        vertical-align: middle;
    }

    tr:hover {
        background-color: var(--pst-color-surface);
    }

    th:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
    }
    td:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
        background-color: var(--pst-color-background);
    }

    th:not(:nth-child(1)):not(:nth-child(2)),
    td:not(:nth-child(1)):not(:nth-child(2)) {
        text-align: center;
    }

    @media only screen and (max-width: 960px) {
        th:not(:nth-child(1)):not(:nth-child(2)),
        td:not(:nth-child(1)):not(:nth-child(2)) {
            text-align: right;
        }
    }

    ul {
        color: var(--sd-color-primary-bg-text);
        padding-inline-start: 1rem;
    }
}

.table-circle-cell-blue-1 tr td:nth-child(1) {

    p {
        border-radius: 50%;
        width: 2em;
        height: 2em;
        background-color: var(--pst-color-info-bg);
        text-align: center;
        line-height: 2em;
    }
}

.table-circle-cell-red-1 tr td:nth-child(1),
.table-circle-cell-red-3 tr td:nth-child(3) {

    p {
        border-radius: 50%;
        width: 2em;
        height: 2em;
        background-color: var(--pst-color-success-bg);
        text-align: center;
        line-height: 2em;
    }
}

div.pst-scrollable-table-container:has(table.table-no-line) {
    overflow-x: hidden;
}

div.pst-scrollable-table-container:not(:last-of-type) table.table-no-line {
    margin-bottom: 0;
}

.table-no-line {
    border: none;
    margin-right: 4em !important;
    background-color: transparent !important;
    border-bottom: transparent !important;
    border-collapse: separate;

    tr.row-odd,
    tr.row-even {
        background: none !important;
    }

    th {
        vertical-align: middle;
    }
    
    tr {
        border: none !important;
    }

    td {
        vertical-align: middle;
        border: none !important;
    }

    td ~ td {
        border-left: none;
    }

    td ~ td {
        border-left: none;
    }
}


/* Card styles */

div.sd-card-body, div.sd-card {
    & a.reference.internal::after,
    & a.reference.external::after {
        content: "";
    }
}

html[data-theme=dark] .sd-card {
    border-radius: 1rem;
    border: none;
    background-color: #222832;
}

.sd-card {
    border-radius: 1rem;
    border: none !important;
    background-color: var(--sd-color-light-bg);
    transition: transform 0.5s ease;

    a {
        color: var(--pst-color-text-base);
        text-decoration: none;
    }
}

html[data-theme=dark] .sd-card-body {
    background-color: #222832 !important;
}

.sd-card-body {
    border-radius: 1rem;
    background-color: var(--sd-color-light-bg) !important;
}

.sd-card.docutils:hover {
    transform: scale(1.08);
}

.sd-card-footer {
    border-top-right-radius: 0rem !important;
    border-top-left-radius: 0rem !important;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
    background-color: inherit !important;
}

p.rubric {
    font-size: var(--pst-font-size-rubric);
    font-weight: var(--pst-font-weight-heading);
    border: none !important;
}

span.guilabel {
    font-size: 100%;
    padding: absolute;
    border-radius: 1em;
    border: none;
    color: var(--sd-color-primary-bg-text);
}

div.bd-header-announcement {
    background-color: var(--sd-color-info-bg);
}

/* ---------Footnote styles----------*/

span.backrefs, span.fn-bracket {
    display: none;
}

aside.footnote {
    font-size: 0.875em;
    color: var(--pst-color-text-muted);

    span.label, a {
        text-decoration: none;
        color: var(--pst-color-text-muted);
    }
}

a.footnote-reference::after {
    content: "";
}

.real-display {
    font-family: 'seven-segment', monospace;
    color: var(--sd-color-danger);
    font-weight: 900;
    vertical-align: bottom;
}

.real-display-product-dsc, .real-display-product-eco-m-dsc {
    font-family: 'smd-led', monospace;
    font-weight: 700;
}

.real-display-product-eco-m-dk {
    font-family: 'smd-led-single', monospace;
    font-weight: 700;
}

.matrix-display {
    font-family: 'matrix', monospace;
    color: var(--sd-color-danger);    
    vertical-align: bottom;
    font-weight: 700;
}

sup > .real-display {
    vertical-align: middle;
}


a.footnote-reference {
    text-decoration: none;
    color: var(--pst-color-text-muted);
    font-weight: bold;
}

/* DROPDOWN STYLES */

details.sd-dropdown summary.sd-card-header + div.sd-summary-content {
    border-bottom-left-radius: calc(.25rem - 1px) !important;
    border-bottom-right-radius: calc(.25rem - 1px) !important;
    border-top-left-radius: 0%;
    border-top-right-radius: 0%;
    background-color: var(--pst-color-on-background) !important;
}

.faq-container {
    margin-bottom: 10em;
}

/*-------Digital clock simulation-------*/

.led-clock-ecomdk {
    font-family: 'matrix', monospace;
    font-size: 20px;
    line-height: 1.6;
    background-color: #272727;
    color: var(--sd-color-danger);
    text-shadow:
        0 0 4px var(--sd-color-danger),
        0 0 10px var(--sd-color-danger),
        0 0 20px var(--sd-color-danger);
    text-align: center;
    white-space: pre;
    border-top: 4px solid #585858;
    border-bottom: 4px solid #585858;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1em;
    margin-bottom: 3rem !important;
    aspect-ratio: 1 / 1;
    justify-content: center;

    .led-first-row {
        font-family: 'matrix', monospace;
        font-size: 20px;
        width: calc(3 * 1ch + 2ch);
        text-align: center;
    }

    .led-second-row {
        font-family: 'matrix', monospace;
        font-size: 20px;
        width: calc(6 * 1ch + 2ch);
        text-align: center;
    }

    .led-third-row {
        font-family: 'smd-led-single', monospace;
        font-size: 28px;
        width: calc(5 * 1ch + 2ch);
        text-align: center;
        line-height: 1.4;
    }
}

.led-clocks {
    font-family: 'seven-segment', monospace;
    font-size: 28px;
    line-height: 1.4;
    background-color: #272727;
    color: var(--sd-color-danger);
    text-shadow:
        0 0 4px var(--sd-color-danger),
        0 0 10px var(--sd-color-danger),
        0 0 20px var(--sd-color-danger);
    text-align: center;
    white-space: pre;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.1em 0.9em !important;
    margin-bottom: 3rem;

    p {
        margin-bottom: 0;
    }
}

.led-clocks-product-dc {
    border: 6px solid #585858;
}

.led-clocks-product-eco-dc {
    border-top: 5px solid #585858;
    border-bottom: 5px solid #585858;
    border-left: 10px solid #585858;
    border-right: 10px solid #585858;
    border-radius: 6px;
}

.led-clocks-product-eco-m-dc {
    border-top: 5px solid #585858;
    border-bottom: 5px solid #585858;
}

.led-clocks-product-slh-dc, .led-clocks-product-eco-slh-dc {
    border: 16px solid #c9c9c9
}

.led-clocks-product-dsc {
    font-family: 'smd-led', monospace;
    border: 6px solid #585858;
}

.led-clocks-product-eco-m-dsc {
    font-family: 'smd-led', monospace;
    border-top: 5px solid #585858;
    border-bottom: 5px solid #585858;
}

.container.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    align-items: start;
    margin: 1rem 0 3rem 0;

    .display-values {
        font-size: 28px
    }

    .led-clock-ecomdk {
        margin-bottom: 0rem !important;
    }

    .led-clocks {
        margin-bottom: 0rem !important;
        max-width: fit-content;
    }
}

@media only screen and (max-width: 600px) {
    .container.menu-grid {
        max-width: max-content;
    }
}