/* ===================================

    Crafto - Bisiness

====================================== */

/* font */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@100;200;300;400;500;600;700;800&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam:wght@100;300;400;500;600;700;800&display=swap');

/* variable */

:root {     

    --base-color: #0f7b25;

    --dark-gray: #262b35;

    --medium-gray:#868d98;

    --primary-font: 'Be Vietnam', sans-serif;

    --alt-font: 'Sora', sans-serif;

}

/* reset */

body { 

    font-size: 17px;

    line-height: 32px;

}

/* header */

header .navbar-brand img {

    max-height: 26px;

}

.navbar .navbar-nav .nav-link {

    font-size: 17px;

    font-weight: 400;

}

.sticky .header-transparent .header-button .btn {

    color: var(--dark-gray);

    border-color: var(--dark-gray);

}

.sticky .header-transparent .header-button .btn:hover {

    border-color: var(--dark-gray);

    color: var(--white);

    background:  var(--dark-gray);

}

header.sticky.sticky-active [data-header-hover="light"] .widget-text i {

    color: var(--white);

}

/* accordion style 02 */

.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu {

    background-color: var(--dark-gray);

}

.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a {

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    color: var(--white);

}

.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li:hover a,

.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li.active a{

    opacity: .5;

}

/* bg color */

.bg-gradient-sherpa-blue-black {

    background-image: linear-gradient(to top, #ffffff, #0051ff);

}

.bg-gradient-sherpa-black-blue {

    background-image: linear-gradient(to right top, #232323, #222226, #232348, #22236D, #23248C);

} 

/* bg transparent color */

.bg-base-color-transparent {

    background-color: rgba(87, 88, 214,.8);

}

/*  tabs style 05  */

.tab-style-05 .nav-tabs > li.nav-item {

    letter-spacing: -.5px;

}

/* accordion */

.accordion .accordion-item .accordion-header .accordion-title i {

    top: 52%;

}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {margin-bottom: 25px}



/*  progress bar style 01  */

.progress-bar-style-01 .progress .progress-bar-title {

    bottom: 15px;

}

/* page title */

.page-title-extra-large h1 {

    font-size: 4.7rem;

    line-height: 4.7rem;

}

/* separator line */

.separator-line-9px {

    height: 9px;

}

/* tag */

.tag-cloud a { 

    padding-top: 5px;

    padding-bottom: 9px;

}

/* blog comment */ 

.blog-comment li .btn-reply {

    padding-top: 5px;

    padding-bottom: 7px;

}

/* number pagination style 01 */

.pagination-style-01 .page-item .page-link {

    line-height: 42px;

}

.pagination-style-01 .page-item.active .page-link {

    background: var(--dark-gray);

    color: var(--white);

}

/* top right bottom left */

footer {

    margin-top: 0; 

    margin-bottom: 0; 

    padding-top: 20px; 

    padding-bottom: 30px; 

}

.bottom-minus-45px {

    bottom: -45px;

}

.right-minus-45px {

    right: -45px;

}

/* footer */

footer .footer-logo img {

    max-height: 26px;

}

footer ul li {

    margin-bottom: 0;

}

.footer-dark a:hover {

    color: var(--white);

}

/* model popup */

.mfp-bg {

    background: #000000;

    opacity: 0.7;

}

/* Obecné nastavení boxů */

.feature-box {

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    align-items: center;

    padding: 20px;

    height: 100%;

    border-radius: 8px;

    background-color: #ffffff;

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

}



/* Nadpis boxů */

.box-title-vstup {

    font-size: 25px;

    font-weight: 600;

    color: #e36a00;

    text-align: center;

    margin-bottom: 20px;

}



/* Nadpis boxů */

.box-title-vystup {

    font-size: 25px;

    font-weight: 600;

    color: #0f7b25;

    text-align: center;

    margin-bottom: 20px;

}



/* Obsah boxů */

.feature-box-content {

    width: 100%;

    text-align: left;

}



/* Výsledky: zarovnání vlevo a vpravo */

.result-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 15px;

}



/* Styl pro popisky vlevo */

.label {

    font-size: 19px;

    font-weight: 500;

    color: #000;

    font-weight: bold;

}



/* Styl pro vstupní data - čísla */

.vstup {

    font-size: 18px;

    font-weight: 500;

    color: #e36a00;

}



/* Styl pro hodnoty vpravo */

.value {

    font-size: 18px;

    font-weight: 600;

    color: #0f7b25;

    text-align: right;

}



/* Styl pro tlačítko */

.btn2 {

    font-size: 15px;

    font-weight: 600;

    background-color: #e36a00; /* Modrá barva tlačítka */

    color: #fff; /* Bílý text */

    padding: 10px 20px; /* Vnitřní odsazení */

    margin-top: 20px;

    width: 100%;

    border: none;

    border-radius: 4px; /* Zaoblené rohy */

    cursor: pointer;

    transition: background-color 0.3s ease;

}



.btn2:hover {

    background-color: #0f7b25; /* Tmavší modrá při hoveru */

}



.btn2:active {

    background-color: #0f7b25; /* Tmavší modrá při hoveru */

}



/* Nadpis grafu */

.box-title-graf {

    font-size: 24px;

    font-weight: 600;

    color: #0f7b25;

    text-align: center;

    margin-bottom: 20px;

}



/* Box pro graf */

.feature-box {

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    align-items: center;

    padding: 20px;

    border-radius: 8px;

    background-color: #f7f7f7;

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

}



/* Kontejner pro obsah grafu */

.feature-box-content {

    width: 100%;

}



/* Skrývá bannery na menších zařízeních */

@media (max-width: 1024px) {

    .banner-left, .banner-right {

        display: none;

    }

}

/* Obecná pravidla pro bannery */

.banner-left, .banner-right {

    position: fixed; /* Statická pozice */

    width: 150px; /* Šířka podle obrázku */

    height: auto; /* Výška podle obrázku */

    z-index: 1000; /* Zajišťuje, že bannery budou nad obsahem */

}



/* Levý banner */

.banner-left {

    top: 100px; /* 100 px od horního okraje obrazovky */

    left: 15px; /* 15 px od levého okraje obrazovky */

}



/* Pravý banner */

.banner-right {

    top: 100px; /* 100 px od horního okraje obrazovky */

    right: 15px; /* 15 px od pravého okraje obrazovky */

}



/* Skrývá bannery na menších zařízeních */

@media (max-width: 1120px) {

    .banner-left, .banner-right {

        display: none; /* Skryje bannery na mobilních zařízeních */

    }

}



/* WORLD HODINY */

#world-clock-list {

    display: grid;

    grid-template-columns: repeat(3, 1fr); /* 4 sloupce */

    gap: 20px; /* Mezery mezi položkami */

    padding: 20px;

    justify-content: center; /* Zarovnání obsahu do středu */

}



@media (max-width: 1150px) {

    #world-clock-list {

        grid-template-columns: repeat(2, 1fr); /* 2 sloupce na tabletech */

    }

}



@media (max-width: 768px) {

    #world-clock-list {

        grid-template-columns: 1fr; /* 1 sloupec na telefonech */

    }

}



.world-clock-item {

    border: 1px solid #e0e0e0;

    border-radius: 8px;

    padding: 20px;

    background-color: #fff;

    text-align: center;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    transition: transform 0.2s ease, box-shadow 0.2s ease;

}



.world-clock-flag {

    font-size: 45px;

    text-align: left;

    margin-right: 10px;

}



.world-clock-city {

    font-size: 22px;

    font-weight: bold;

    margin: 0;

    text-align: right;

    color:#000

}



.world-clock-time {

    margin-top: 20px;

    font-size: 25px;

    color: #2d8b2e;

    text-align: center;

    font-weight: bold;

}



.line {

    border-bottom: 1px solid #ccc;

    width: 95%; /* Čára zabere cca 95 % mezery */

    margin-top: auto; /* Přilepí čáru ke spodní části */

}



.result-row {

    margin-bottom: 15px; /* Volitelná mezera mezi řádky */

    height: 30px; /* Nastavte výšku řádku podle potřeby */

}



#inputDataSummary {

    font-size: 14px;

    color: #525252;

    margin-bottom: 20px;

}



/* media query responsive */

@media (max-width: 1499px) {

    .navbar .navbar-nav .nav-link {

        padding-left: 15px;

        padding-right: 15px;

    } 

}

@media (max-width: 1399px) {

    .navbar .navbar-nav .nav-link {

        padding-left: 13px;

        padding-right: 13px;

    }

    .sticky-wrap.shadow-in {

        left: 35px;

    }

}

@media (max-width: 1300px) {

    .sticky-wrap.shadow-in {

        left: 10px;

    }

}

@media (max-width: 991px) {

    .header-transparent .header-button .btn {

        color: var(--dark-gray);

        border-color: var(--dark-gray);

    }

    .header-transparent .header-button .btn:hover {

        border-color: var(--dark-gray);

        color: var(--white);

        background:  var(--dark-gray);

    }

    .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu {

        width: calc(100% + 30px) !important;

        margin-left: -15px;

        padding: 10px 45px;

        margin-bottom: 0;

        margin-right: -15px;

    }

    .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li:last-child a {

        padding-bottom: 17px;

    }

}

@media (max-width: 767px) {

    p {

        margin-bottom: 20px;

    }

    .page-title-extra-large h1 {

        font-size: 40px;

        line-height: 46px;

    }

}