* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html, body {
    font-family: Arial, sans-serif;
    color: white;
    height:100%;
}
.yellowColor {
    color: #f6b22aff;
}
@media (max-width: 555px) {
    .lowerFontOnSmDev {
        font-size: 14px; /* Menší velikost písma pro mobilní zařízení, kromě SVG a jeho potomků */
    }    
}

/*HEADER----------------------------------------------------------------*/
li > a {
    text-decoration: none;
    font-size: 1.5em;
    color: white;
}
p > a {
    text-decoration: none;
    color: white;
}

a:hover {
    color: #f6b22aff;
}

#logo {
    height: 40px;
    padding-left: 10px;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(246, 178, 42, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}

.nav-item:not(:last-child)::after {
    content: "→"; /* Unicode pro šipku doprava */
    color: #ccc; /* Barva šipky */
    margin-left: 10px; /* Mezera mezi textem a šipkou */
    margin-right: 0px; /* Mezera mezi šipkou a následující položkou */
    font-size: 25px; /* Velikost šipky */
}

.disabled-link {
    pointer-events: none; /* Uživatel nemůže kliknout na odkaz */
}

.active-link {
    color: #fdba37;
}

/*FOOTER----------------------------------------------------------------*/
@media (max-width: 991px) {
    .company-description {
        display: none;
    }

    .welcome {
        flex-direction: column;
    }
}

.logo-footer img {
    height: 90px;
}

.company-text-color {
    color: #f6b22aff;
}

/*POPUP-WINDOWS---------------------------------------------------------*/
/* Stylování pop-up okna */
.popup {
    position: fixed;
    z-index: 1;
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);    
}

/* Stylování obsahu uvnitř pop-up okna */
.popup-content {
    background-color: #fefefe;
    margin: auto;
    padding: 10px;
    border: 1px solid #888;
    width: 90%;
    border-radius: 8px;
}

.card-modify {
    min-width: 15rem;
}

.list-okna-style {
    display: flex;
    overflow-x: auto;
    width: 100%;
    max-width: 100%;
}

/* Tlačítko pro zavření pop-up okna */
.close-btn {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

    .close-btn:hover,
    .close-btn:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

/* Styl pro modální okno------------------------------------------------------------------------------ */
.modal {
    display: none; /* Skryto ve výchozím stavu */
    position: fixed; /* Zůstává na místě při scrollování */
    z-index: 1; /* Sits on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Při přetečení umožní scroll */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Styl obsahu modálního okna */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

    .close:hover,
    .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

/* Styl pro cookies------------------------------------------------------------------------------ */
.cookie-consent-popup {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #222;
    color: white;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    display: none;
}

    .cookie-consent-popup button {
        margin: 5px;
        padding: 8px 15px;
        border: none;
        cursor: pointer;
        font-weight: bold;
        border-radius: 3px;
    }

#acceptCookies {
    background: #28a745;
    color: white;
}

#declineCookies {
    background: #dc3545;
    color: white;
}


/*////////////////////////////////////////////////////////////*/

/* Třída pro červené tlačítko s 3D efektem */
.button-3d-red {
    position: relative;
    border: none;
    border-radius: 8px; /* Zaoblení rohů */
    background-color: #dc3545; /* Červená barva tlačítka */
    color: white; /* Barva textu */
    font-size: 1.25rem; /* Velikost písma */
    padding: 1rem 2rem; /* Vnitřní odsazení */
    text-align: center; /* Zarovnání textu na střed */
    cursor: pointer; /* Změna kurzoru na ruku při najetí myší */
    transition: all 0.3s ease; /* Plynulé přechody pro všechny vlastnosti */
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
}

    /* Efekt stínu při najetí myší */
    .button-3d-red:hover {
        background-color: #c82333; /* Tmavší červená při najetí myší */
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); /* Tmavý stín pro 3D efekt */
        transform: translateY(-2px); /* Mírné posunutí tlačítka nahoru */
    }

    /* Efekt při kliknutí */
    .button-3d-red:active {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Méně intenzivní stín při kliknutí */
        transform: translateY(0); /* Obnovení posunutí */
    }
    /* Styl pro deaktivované tlačítko */
    .button-3d-red:disabled,
    .button-3d-red[disabled] {
        background-color: #e0e0e0; /* Světlá šedá barva pozadí pro deaktivované tlačítko */
        color: #a0a0a0; /* Světlá šedá barva textu */
        cursor: not-allowed; /* Kurzoru ukazující, že tlačítko je neaktivní */
        box-shadow: none; /* Odstranění stínu */
        transform: none; /* Žádné posunutí */
        opacity: 0.6; /* Mírně průhledné pro vizuální indikaci, že tlačítko je deaktivované */
    }

/* Třída pro modré tlačítko s 3D efektem */
.button-3d-blue {
    position: relative;
    border: none;
    border-radius: 8px; /* Zaoblení rohů */
    background-color: #007bff; /* Modrá barva tlačítka (Bootstrap Primary) */
    color: white; /* Barva textu */
    font-size: 1.25rem; /* Velikost písma */
    padding: 1rem 2rem; /* Vnitřní odsazení */
    text-align: center; /* Zarovnání textu na střed */
    cursor: pointer; /* Změna kurzoru na ruku při najetí myší */
    text-decoration: none; /* Zabránění podtržení textu */
    transition: all 0.3s ease; /* Plynulé přechody pro všechny vlastnosti */
    display: inline-block; /* Ujistěte se, že tlačítko se chová jako inline-block */
    overflow: hidden; /* Skrytí přetečení */
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
}

    /* Efekt stínu při najetí myší */
    .button-3d-blue:hover {
        background-color: #0056b3; /* Tmavší modrá při najetí myší */
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); /* Tmavý stín pro 3D efekt */
        transform: translateY(-2px); /* Mírné posunutí tlačítka nahoru */
        color: white; /* Zajištění, že text zůstane bílý */
    }

    /* Efekt při kliknutí */
    .button-3d-blue:active {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Méně intenzivní stín při kliknutí */
        transform: translateY(0); /* Obnovení posunutí */
    }
/* Třída pro zelené tlačítko s 3D efektem */
.button-3d-green {
    position: relative;
    border: 1px solid #90e5ba;
    border-radius: 8px; /* Zaoblení rohů */
    background-color: #befabe; /* Světle zelená barva tlačítka */
    color: #333; /* Tmavší barva textu pro lepší kontrast */
    font-size: 1.0rem; /* Velikost písma */
    padding: 1rem 2rem; /* Vnitřní odsazení */
    text-align: center; /* Zarovnání textu na střed */
    cursor: pointer; /* Změna kurzoru na ruku při najetí myší */
    text-decoration: none; /* Zabránění podtržení textu */
    transition: all 0.3s ease; /* Plynulé přechody pro všechny vlastnosti */
    display: inline-block; /* Ujistěte se, že tlačítko se chová jako inline-block */
    overflow: hidden; /* Skrytí přetečení */
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
}

    .button-3d-green:hover {
        background-color: #9f9; /* Tmavší zelená při najetí myší */
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); /* Tmavý stín pro 3D efekt */
        transform: translateY(-2px); /* Mírné posunutí tlačítka nahoru */
        color: #333; /* Zajištění, že text zůstane tmavší pro lepší kontrast */
    }

    .button-3d-green:active {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Méně intenzivní stín při kliknutí */
        transform: translateY(0); /* Obnovení posunutí */
    }
/* Třída pro světle žluté tlačítko s 3D efektem */
.button-3d-yellow {
    position: relative;
    border: 1px solid #f7e0a7; /* Tmavší okraj pro kontrast */
    border-radius: 8px; /* Zaoblení rohů */
    background-color: #ffeeaaff; /* Světle žlutá barva tlačítka */
    color: #333; /* Tmavší barva textu pro lepší kontrast */
    font-size: 1.0rem; /* Velikost písma */
    padding: 1rem 2rem; /* Vnitřní odsazení */
    text-align: center; /* Zarovnání textu na střed */
    cursor: pointer; /* Změna kurzoru na ruku při najetí myší */
    text-decoration: none; /* Zabránění podtržení textu */
    transition: all 0.3s ease; /* Plynulé přechody pro všechny vlastnosti */
    display: inline-block; /* Ujistěte se, že tlačítko se chová jako inline-block */
    overflow: hidden; /* Skrytí přetečení */
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075); /* Lehké stínování */
}

    .button-3d-yellow:hover {
        background-color: #f5d9a1; /* Tmavší žlutá při najetí myší */
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); /* Tmavý stín pro 3D efekt */
        transform: translateY(-2px); /* Mírné posunutí tlačítka nahoru */
        color: #333; /* Zajištění, že text zůstane tmavší pro lepší kontrast */
    }

    .button-3d-yellow:active {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Méně intenzivní stín při kliknutí */
        transform: translateY(0); /* Obnovení posunutí */
    }

/* Třída pro šedé tlačítko s 3D efektem */
.button-3d-gray {
    position: relative;
    border: 1px solid #b0b0b0; /* Tmavší okraj pro kontrast */
    border-radius: 8px; /* Zaoblení rohů */
    background-color: #d9d9d9; /* Světle šedá barva tlačítka */
    color: #333; /* Tmavší barva textu pro lepší kontrast */
    font-size: 1.0rem; /* Velikost písma */
    padding: 1rem 2rem; /* Vnitřní odsazení */
    text-align: center; /* Zarovnání textu na střed */
    cursor: pointer; /* Změna kurzoru na ruku při najetí myší */
    text-decoration: none; /* Zabránění podtržení textu */
    transition: all 0.3s ease; /* Plynulé přechody pro všechny vlastnosti */
    display: inline-block; /* Ujistěte se, že tlačítko se chová jako inline-block */
    overflow: hidden; /* Skrytí přetečení */
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075); /* Lehké stínování */
}

    .button-3d-gray:hover {
        background-color: #c0c0c0; /* Tmavší šedá při najetí myší */
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); /* Tmavý stín pro 3D efekt */
        transform: translateY(-2px); /* Mírné posunutí tlačítka nahoru */
        color: #333; /* Zajištění, že text zůstane tmavší pro lepší kontrast */
    }

    .button-3d-gray:active {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Méně intenzivní stín při kliknutí */
        transform: translateY(0); /* Obnovení posunutí */
    }
/* Třída pro 3D tlačítko v barvě Bootstrap info s černým textem */
.button-3d-info {
    position: relative;
    border: 1px solid #117a8b; /* Tmavší okraj pro info barvu */
    border-radius: 8px; /* Zaoblení rohů */
    background-color: #0dcaf0ff; /* Přesná Bootstrap info barva */
    color: #000; /* Černý text pro lepší kontrast */
    font-size: 1.0rem; /* Velikost písma */
    padding: 1rem 2rem; /* Vnitřní odsazení */
    text-align: center; /* Zarovnání textu na střed */
    cursor: pointer; /* Změna kurzoru na ruku při najetí myší */
    text-decoration: none; /* Zabránění podtržení textu */
    transition: all 0.3s ease; /* Plynulé přechody pro všechny vlastnosti */
    display: inline-block; /* Ujistěte se, že tlačítko se chová jako inline-block */
    overflow: hidden; /* Skrytí přetečení */
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075); /* Lehké stínování */
}

    /* Efekty při najetí myší */
    .button-3d-info:hover {
        background-color: #0bb5d1; /* Tmavší info barva při najetí myší */
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); /* Tmavší stín pro 3D efekt */
        transform: translateY(-2px); /* Mírné posunutí tlačítka nahoru */
        color: #000; /* Zajištění, že text zůstane černý */
    }

    /* Efekty při kliknutí */
    .button-3d-info:active {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Méně intenzivní stín při kliknutí */
        transform: translateY(0); /* Obnovení posunutí */
    }
/* Třída pro 3D tlačítko v barvě Bootstrap primary */
.button-3d-primary {
    position: relative;
    border: 1px solid #0056b3; /* Tmavší okraj primary barvy */
    border-radius: 8px; /* Zaoblení rohů */
    background-color: #007bff; /* Bootstrap primary barva */
    color: #fff; /* Bílý text pro kontrast */
    font-size: 1.0rem; /* Velikost písma */
    padding: 1rem 2rem; /* Vnitřní odsazení */
    text-align: center; /* Zarovnání textu na střed */
    cursor: pointer; /* Změna kurzoru na ruku při najetí myší */
    text-decoration: none; /* Zabránění podtržení textu */
    transition: all 0.3s ease; /* Plynulé přechody pro všechny vlastnosti */
    display: inline-block; /* Ujistěte se, že tlačítko se chová jako inline-block */
    overflow: hidden; /* Skrytí přetečení */
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075); /* Lehké stínování */
}

    /* Efekty při najetí myší */
    .button-3d-primary:hover {
        background-color: #0056b3; /* Tmavší primary barva při najetí myší */
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); /* Tmavší stín pro 3D efekt */
        transform: translateY(-2px); /* Mírné posunutí tlačítka nahoru */
    }

    /* Efekty při kliknutí */
    .button-3d-primary:active {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Méně intenzivní stín při kliknutí */
        transform: translateY(0); /* Obnovení posunutí */
    }
/* Třída pro šedo-zelené tlačítko s 3D efektem */
.button-3d-gray-green {
    position: relative;
    border: 1px solid #ccc; /* Okraj šedého tlačítka */
    border-radius: 8px;
    background-color: #f2f2f2; /* Základní šedá barva */
    color: #333;
    font-size: 1.0rem;
    padding: 1rem 2rem;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
}

    /* Polovina tlačítka zelená, polovina šedá */
    .button-3d-gray-green.half-green {
        background: linear-gradient(to right, #befabe 50%, #f2f2f2 50%);
        border-color: #90e5ba; /* Okraj odpovídající zelené části */
    }

    /* Celé tlačítko zelené */
    .button-3d-gray-green.full-green {
        background-color: #befabe;
        border-color: #90e5ba; /* Zelený okraj */
    }

    /* Efekty při najetí a kliknutí */
    .button-3d-gray-green:hover {
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
        transform: translateY(-2px);
    }

    .button-3d-gray-green:active {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        transform: translateY(0);
    }

    .button-3d-gray-green.full-green:hover {
        background-color: #9f9; /* Tmavší zelená při najetí myší */
    }

    .button-3d-gray-green.half-green:hover {
        background: linear-gradient(to right, #9f9 50%, #ddd 50%);
    }
/* Třída pro deaktivovaná tlačítka */
.disabled {
    opacity: 0.6; /* Snížená opacita pro deaktivaci */
    pointer-events: none; /* Zablokování všech událostí myši */
}
/* Třída pro šedé tlačítko bez 3D efektu */
.button-gray {
    position: relative;
    border: none;
    border-radius: 8px; /* Zaoblení rohů */
    background-color: #d6d6d6; /* Světle šedá barva tlačítka */
    color: #333; /* Tmavší barva textu pro lepší kontrast */
    font-size: 1.25rem; /* Velikost písma */
    padding: 1rem 2rem; /* Vnitřní odsazení */
    text-align: center; /* Zarovnání textu na střed */
    cursor: not-allowed; /* Změna kurzoru na zakázaný */
    text-decoration: none; /* Zabránění podtržení textu */
    transition: background-color 0.3s ease; /* Plynulý přechod pouze pro změnu barvy pozadí */
    display: inline-block; /* Ujistěte se, že tlačítko se chová jako inline-block */
}
    /* Efekt při kliknutí */
    .button-gray:active {
        background-color: #b0b0b0; /* Ještě tmavší šedá při kliknutí */
    }

/* Třída pro tlačítko v setting containeru s 3D efektem */
    .btn-rotate {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    border: none;
    border-radius: 8px; /* Zaoblené rohy */
    background-color: #007bff; /* Hlavní barva tlačítka */
    color: white; /* Barva textu */
    font-size: 1rem; /* Velikost písma */
    transition: background-color 0.3s, box-shadow 0.3s, transform 0.3s; /* Plynulé přechody */
    cursor: pointer; /* Ukazatel jako ruka při najetí */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Mírný stín */
    width: 120px; /* Šířka tlačítka */
    text-align: center; /* Zarovnání textu na střed */
}

.btn-rotate:hover {
    background-color: #0056b3; /* Tmavší modrá při najetí */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Intenzivnější stín */
    transform: translateY(-2px); /* Mírné posunutí tlačítka nahoru */
}

.btn-rotate:active {
    background-color: #00408d; /* Ještě tmavší modrá při kliknutí */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Méně intenzivní stín */
    transform: translateY(0); /* Obnovení posunutí */
}

.btn-rotate svg {
    width: 24px; /* Šířka ikony */
    height: 24px; /* Výška ikony */
    fill: currentColor; /* Barva ikony bude odpovídat barvě textu tlačítka */
}
/*WINDOW ELEMENT SVG*/
.notVisibleInExteriorViewStyle {
    display: none;
}

/* Informační styl - návody------------------------------------------------------------------------------ */
.info-row {
    background-color: rgba(200, 200, 200, 0.5); /* Poloprůhledná šedá */
    color: #555; /* Tmavší šedý text */
    /*border: 1px solid #ccc; /* Světle šedý okraj */
    /*width: 90%; /* Zúžené řádky */
    border-radius: 30px; /* Zaoblené rohy */
    border-collapse: collapse; /* Sloučení okrajů */
}
.icon-large {
    font-size: 45px; /* Přizpůsobte velikost podle potřeby */
}


/* Nadpisy sekcí VNITŘNÍ PARAPETY VENKOVNÍ PARAPETY OSTATNÍ_SLUŽBY*/
.section-heading {
    text-align: center;
    padding: 15px;
    margin: 30px 0 20px 0;
    background-color: #f1f1f1;
    color: #333;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    font-size: 1.5rem;
    font-weight: bold;
}

/* 3D vzhled a ohraničení sekce na stránce*/
.section-block {
    padding: 20px !important;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19);
    margin: 10px 0;
}