@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');
* {
    font-family: 'Open Sans', sans-serif;
    margin: 0 auto;
    padding: 0;
    /*    transition: .2s;*/
}

.page_size {
    width: 97%;
    box-sizing: border-box;
}

html {}

body {}

main {
    position: relative;
    height: calc(100vh - 73px);
    overflow: hidden;
    width: 100%;
}

body.facebook_background main {
    height: auto;
    overflow: auto;
    width: 100%;
}

main.uvodni_strana {
    background: linear-gradient(90deg, #4059b9 0%, rgb(93 28 102) 100%);
}

.zvyrazni {
    border: 1px solid red;
}


/* width */

::-webkit-scrollbar {
    width: 4px;
}

.cke_notifications_area {
    display: none !important;
}


/* Track */

::-webkit-scrollbar-track {
    background: #ffffff;
}


/* Handle */

::-webkit-scrollbar-thumb {
    background: #062659;
}


/* Handle on hover */

::-webkit-scrollbar-thumb:hover {
    background: #041839;
}

h1 {
    color: #062659;
}

h2 {
    text-align: center;
    line-height: 130%;
    margin: 12px 0;
    color: #062659;
    text-transform: uppercase;
}

h2.nadpis_apky {
    text-align: center;
    line-height: 130%;
    margin: 12px 0;
    color: #062659;
    text-transform: uppercase;
}

h3 {
    color: #062659;
}

h4 {
    color: #062659;
}

h5 {
    color: #062659;
}

h6 {
    color: #062659;
}

a {}

button {}

.cleaner {
    clear: both;
}

table {
    border-collapse: collapse;
    border: 0;
    font-size: 12px;
}

table tr:nth-of-type(even) {
    background: #f6f6f6;
}

table tr th {}

table tr td {
    border-collapse: collapse;
    border: 0;
    padding: 7px;
    max-width: 140px;
    border: 1px solid #e6e6e6;
    box-sizing: border-box;
}

table input[type="date"] {
    max-width: 94px;
}

table input#quantity {
    width: 48px;
}

table input {
    font-size: 12px;
}

a.tlacitko {
    display: inline-block;
    background: #e6e6e6;
    border-radius: 5px;
    color: #041839;
    box-sizing: border-box;
    padding: 2px 10px;
    margin-bottom: 3px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

a.tlacitko:hover {
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.5));
    /*background: rgba(255, 255, 255, 0.05);*/
}

table a.tlacitko {
    display: inline-block;
    background: #e6e6e6;
    border-radius: 5px;
    color: #041839;
    box-sizing: border-box;
    padding: 0px 10px;
    margin-bottom: 3px;
    font-size: 11px;
    font-weight: 600;
}

.overflow_table {
    width: 100%;
    overflow-x: scroll;
}

.info_table {
    padding: 30px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.1);
    border-radius: 25px;
    font-weight: bold;
    color: #062659;
    /* border: 1px solid #062659; */
}

p.podnadpis {
    font-size: 12px;
    color: #062659;
    text-align: center;
    margin: 15px 0;
}

#admin_zobrazeny_uzivatel {
    font-weight: bold;
    margin-right: 10px;
}

.active {
    display: block !important;
}

.no_active {
    display: none !important;
}

a.print_icon {
    display: inline-block;
    width: 21px;
    height: 21px;
    border-radius: 6px;
    background: #062659 url(img/print.svg)center center no-repeat;
    background-size: 13px;
    cursor: pointer;
    vertical-align: middle;
}

/* Dialog necháváme fixed, aby zůstal na obrazovce i při odscrollované
   stránce. Svislou pozici ale NESMÍME zamykat (dřív tu bylo
   top: 50% !important + translateY(-50%)) - jQuery UI zapisuje při
   přetahování top inline a !important ze stylopisu ho přebilo, takže
   dialogem nešlo hýbat nahoru ani dolů. Vycentrovat si ho jQuery UI
   umí samo. */
.ui-dialog {
    position: fixed;
    max-width: 95%;
}

.info_table.prihlaseni {}

.info_table.prihlaseni img.logo_prihlaseni {
    /* margin-bottom: 50px; */
    width: 100%;
    max-width: 350px;
    height: auto;
}

.info_table.prihlaseni .kontakt_blok {
    text-align: right;
    margin-bottom: 7px;
    margin-top: 18px;
    width: 100%;
    max-width: 350px;
}

.info_table.prihlaseni .kontakt_blok * {
    color: white;
    font-size: 10px;
    font-weight: 500;
    opacity: 0.9;
    font-style: italic;
}

.info_table.prihlaseni .kontakt_blok a {
    text-decoration: none;
    display: inline-block;
    margin-left: 10px;
}

.info_table.prihlaseni .kontakt_blok a:hover {
    text-decoration: underline;
    opacity: 1;
}

.info_table.prihlaseni form {
    max-width: 350px;
}

.info_table.prihlaseni form input {
    width: 100%;
    margin-bottom: 10px;
    box-sizing: border-box;
    padding: 11px;
    border-radius: 8px;
    border: 0;
}

.info_table.prihlaseni form button {
    display: block;
    box-sizing: border-box;
    padding: 11px 44px;
    border-radius: 8px;
    border: 0;
    background: #389df9;
    cursor: pointer;
    color: white;
    font-size: 17px;
    font-weight: 600;
}

.info_table.prihlaseni .error_msg {
    background: rgb(255 0 0 / 50%);
    color: white;
    padding: 8px 25px;
    border-radius: 10px;
    margin: 10px 0;
    text-align: center;
    font-size: 15px;
}


/*---------------- -LOADER ------------------*/

figure.loader_obal {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 231px;
}

.loader {
    width: 48px;
    height: 48px;
    border: 3px dotted #389df9;
    border-style: solid solid dotted dotted;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    animation: rotation 2s linear infinite;
}

.loader::after {
    content: '';
    box-sizing: border-box;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border: 3px dotted rgb(152 0 255);
    border-style: solid solid dotted;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    animation: rotationBack 1s linear infinite;
    transform-origin: center center;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes rotationBack {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}

@keyframes rotate {
    0% {
        transform: rotate(0deg)
    }
    100% {
        transform: rotate(360deg)
    }
}

@keyframes prixClipFix {
    0% {
        clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)
    }
    25% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)
    }
    50% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)
    }
    75% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)
    }
    100% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)
    }
}


/*---------------- -HLAVICKA ------------------*/

header.hlavicka {
    position: relative;
    height: auto;
    color: white;
    padding: 0;
    box-sizing: border-box;
    background: linear-gradient(90deg, #4059b9 0%, rgb(93 28 102) 100%);
}

header.hlavicka .header_obsah {
    position: relative;
    height: 40px;
}

header.hlavicka a.logo {
    position: absolute;
    display: flex;
    align-items: center;
    background-size: contain;
    width: auto;
    height: 100%;
    left: 0;
    top: 0;
    color: white;
    text-decoration: none;
    box-sizing: border-box;
    padding: 10px 23px;
    padding-right: 60px;
    z-index: 4;
    background: linear-gradient(90deg, #4059b9 0%, rgba(93, 28, 102, 0) 100%);
}

header.hlavicka .portal_info {
    margin-left: 37px;
    border-left: 1px solid rgba(255, 255, 255, 0.4);
    box-sizing: border-box;
    padding-left: 12px;
}

header.hlavicka .portal_info span {}

header.hlavicka .portal_info span.podnadpis {
    display: block;
    font-size: 12px;
    font-style: italic;
    opacity: 0.8;
}

header.hlavicka .portal_info span.portal {
    font-size: 18px;
    font-weight: 600;
}

header.hlavicka a.logo img {
    height: 100%;
    width: auto;
}

header.hlavicka div.header_info {
    position: absolute;
    right: 0;
    text-align: right;
    top: 4px;
}

header.hlavicka div.header_info span.cas {
    display: block;
    font-size: 25px;
}

header.hlavicka div.header_info span.datum {
    display: block;
    font-size: 14px;
}


/* jazyky */

header.hlavicka .zmena_jazyka {
    display: block;
    width: 50px;
    height: 27px;
    border-radius: 7px;
    box-sizing: border-box;
    margin-right: 6px;
    padding: 0px 5px;
    font-weight: 600;
    border: 0px;
    background: #bcd4f9;
    cursor: pointer;
}

header.hlavicka div.odhlaseni,
header.hlavicka div.prihlaseni {
    position: absolute;
    right: 0;
    bottom: 9px;
    height: 22px;
    display: flex;
    align-items: center;
}

header .zmena_portalu {
    display: inline-block;
    width: 25px;
    height: 25px;
    border-radius: 4px;
    background: url(img/portal_icon.svg) center no-repeat;
    background-size: contain;
    margin-right: 6px;
    cursor: pointer;
}

header.hlavicka div.odhlaseni form button {
    width: 25px;
    height: 25px !important;
    font-size: 0px;
    color: transparent;
    border-radius: 0 !important;
    background: url(img/odhlasit_icon.svg) center no-repeat !important;
    background-size: contain !important;
    cursor: pointer;
}

header .zmena_portalu:hover,
header.hlavicka div.odhlaseni form button:hover {
    filter: brightness(10);
}

header div.prihlaseni div.error_msg {
    position: absolute;
    left: 0;
    bottom: 0;
    transform: translate(0, 130%);
    background: red;
    color: white;
    padding: 2px 25px;
    border-radius: 10px;
}

header.hlavicka div.odhlaseni span.uzivatel {
    margin-right: 15px;
    font-size: 15px;
}

header.hlavicka div.odhlaseni form {
    float: right;
}

header.hlavicka div.odhlaseni form button,
header.hlavicka div.prihlaseni form button {
    box-sizing: border-box;
    padding: 0px 15px;
    height: 25px;
    background: #bcd4f9;
    border: 0;
    font-weight: 700;
    border-radius: 4px;
}

header.hlavicka div.prihlaseni form {}

header.hlavicka div.prihlaseni form input {
    border-radius: 4px;
    border: 0;
    box-sizing: border-box;
    height: 22px;
    padding: 0 10px
}

header.hlavicka div.prihlaseni a.registrace {}

header.hlavicka .aplikace_obal {
    height: 33px;
    background: rgba(0, 0, 0, 0.1);
}

header.hlavicka .aplikace_obal .aplikace_obsah {
    box-sizing: border-box;
    height: 100%;
    padding-top: 0;
}

header.hlavicka .aplikace_obal .aplikace_obsah ul {
    display: flex;
    justify-content: center;
    height: 100%;
}

header.hlavicka .aplikace_obal .aplikace_obsah ul li {
    list-style-type: none;
    display: block;
    margin: 0;
}

header.hlavicka .aplikace_obal .aplikace_obsah ul li a.aplikace {
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    height: 100%;
    padding: 5px 11px;
    background: #c2ddf5;
    border-radius: 0;
    box-sizing: border-box;
    font-size: 13px;
    color: white;
    font-weight: 600;
    letter-spacing: 0.3;
    text-decoration: none;
    background: transparent;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

header.hlavicka .aplikace_obal .aplikace_obsah ul li a.aplikace:hover {
    background: rgb(56 157 249 / 30%);
}

header.hlavicka .aplikace_obal .aplikace_obsah ul li a.aplikace.aktivni {
    background: #389df9;
    border-left: 1px solid #389df9;
    border-right: 1px solid #389df9;
}

header .mobile_menu {
    display: none;
}


/* -----------------  -TITULKA APLIKACE  --------------------------*/

.aplikace_titulka {}

.aplikace_titulka .aplikace {
    max-width: 350px;
    border: 1px solid #062659;
    border-radius: 25px;
    box-sizing: border-box;
    padding: 20px;
}

.aplikace_titulka .aplikace h3.nadpis_apky {
    text-align: center;
    font-size: 22px;
    text-transform: uppercase;
}

.aplikace_titulka .aplikace div.vypis {}

.aplikace_titulka .aplikace .odkaz_apka {
    text-align: center;
}

.aplikace_titulka .aplikace .odkaz_apka a {
    display: inline-block;
    background: #1697b8;
    padding: 5px 20px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 14px;
    color: white;
}


/*------------------- -PRODUKTY ------------------------------------------*/

.products {}

#placefortable {
    position: relative;
}

#obal_tab_produktu {}

#obal_tab_produktu a.full_icon {
    position: absolute;
    display: block;
    top: 5px;
    right: 5px;
    width: 25px;
    height: 25px;
    background: red url(img/expand.svg)center center no-repeat;
    background-size: 50%;
    border-radius: 6px;
    z-index: 10;
    cursor: pointer;
}

.products div.vypis_produktu {}

.products div.overflow_table {
    height: calc(100vh - 218px);
    overflow: auto;
    box-sizing: border-box;
    background: white;
}

.products .full_table {
    position: fixed !important;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 11;
}

.products .full_table div.overflow_table {
    height: 100%;
}

.products div.vypis_produktu table.produkty_hlavicka input,
.products div.vypis_produktu table.produkty_vypis input {
    width: 100%;
}

.products div.vypis_produktu table.produkty_hlavicka {
    position: sticky;
    left: 0;
    top: 0;
    margin-left: 0;
    box-sizing: border-box;
    overflow: hidden;
    z-index: 2;
}

.products div.vypis_produktu table.produkty_hlavicka tr {}

.products div.vypis_produktu table.produkty_hlavicka tr th {
    border-left: 1px solid #606060;
    overflow: hidden;
}

.products div.vypis_produktu table.produkty_hlavicka tr th,
.products div.vypis_produktu table.produkty_vypis tr td {
    text-align: left;
    min-width: 70px;
    max-width: 70px;
    box-sizing: border-box;
}

.products div.vypis_produktu table.produkty_vypis {
    margin-top: 0;
    margin-left: 0;
    position: sticky;
    left: 0;
    top: 0;
}

.products div.vypis_produktu table.produkty_vypis tr {}

.products div.vypis_produktu table.produkty_vypis tr td {}

.products div.vypis_produktu table.produkty_vypis tr td span {
    display: block;
    min-width: 100%;
    min-height: 17px;
}

.products div.vypis_produktu table.produkty_vypis tr td.td_double {
    padding: 0;
}

.products div.vypis_produktu table.produkty_vypis tr td.td_double,
.products div.vypis_produktu table.produkty_hlavicka tr th.th_double {
    min-width: 120px;
    max-width: 120px;
}

.products div.vypis_produktu table.produkty_vypis tr td.td_edit,
.products div.vypis_produktu table.produkty_hlavicka tr th.td_edit {
    min-width: 300px;
    max-width: 300px;
}

.products div.vypis_produktu table.produkty_vypis table.inside_table {
    width: 100%
}

.products div.vypis_produktu table.produkty_vypis table.inside_table td {
    min-width: 60px;
    max-width: 60px;
}

.products div.vypis_produktu table.produkty_vypis table.inside_table td.hodnota_casu,
.products div.vypis_produktu table.produkty_vypis table.inside_table td.hodnota_casu input {
    background: #e2fdff;
}

.products div.vypis_produktu table.produkty_vypis td.tc_cislo {
    position: sticky;
    left: 0;
    background: #062659;
    color: white;
    font-weight: bold;
}

.products div.vypis_produktu table.produkty_vypis td.tc_typ {
    position: sticky;
    left: 70px;
    background: #363636;
    color: white;
}

.products div.vypis_produktu table.produkty_vypis td.tc_sklovina {
    position: sticky;
    left: 140px;
    background: #363636;
    color: white;
}

div.strankovani {
    box-sizing: border-box;
    padding: 2em 0 6em;
    display: flex;
}

div.strankovani ul {
    display: flex;
    justify-content: center;
    margin-left: 0;
}

div.strankovani ul li {
    list-style-type: none;
    margin: 5px;
}

div.strankovani ul li a {
    display: block;
    color: var(--text_color);
    background: white;
    box-sizing: border-box;
    padding: 5px 10px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
}

div.strankovani ul li a.active {
    background: #1697b8;
    color: #ffffff;
}

div.strankovani .buttony {
    margin-right: 0;
}

div.strankovani .buttony a {}

.prod_celkem {
    display: block;
    margin-top: 15px;
    font-size: 12px;
}

.vysledna_url {
    font-size: 14px;
}


/* -----------------  -WORKBOOK PRACOVNI KNIHA  --------------------------*/

.topmenu_aplikace {
    width: 100%;
    height: 35px;
    background: linear-gradient(135deg, #4059b9 0%, #10284c 100%);
    /* border-radius: 0 0 10px 10px; */
    padding: 0;
    box-sizing: border-box;
}

.topmenu_aplikace ul {
    display: flex;
    justify-content: center;
    height: 100%;
    text-align: center;
}

.topmenu_aplikace ul li {
    list-style-type: none;
    display: block;
    margin: 0;
}

.topmenu_aplikace ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 7px 13px;
    background: transparent;
    border-radius: 0;
    box-sizing: border-box;
    font-size: 12px;
    color: white;
    font-weight: 600;
    text-decoration: none;
    /* text-transform: uppercase; */
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.topmenu_aplikace ul li a:hover {
    background: rgba(255, 255, 255, 0.05);
}

.vyber_uzivatele {
    text-align: center;
    margin: 15px 0;
}

.vyber_uzivatele select {}

ul.blok_filtrovani {
    position: relative;
    width: 100%;
    text-align: center;
}

ul.blok_filtrovani li {
    list-style-type: none;
    display: inline-block;
    margin: 0 5px;
}

ul.blok_filtrovani li a {
    display: block;
    height: 24px;
    padding: 3px 14px;
    background: #062659;
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 12px;
    color: #ffffff;
    font-weight: 600;
}

ul.blok_filtrovani li a.print_icon {
    position: absolute;
    right: 0;
    top: 0;
    display: inline-block;
    width: 21px;
    height: 21px;
    border-radius: 6px;
    background: #062659 url(img/print.svg)center center no-repeat;
    background-size: 13px;
    cursor: pointer;
    vertical-align: middle;
    padding: 0;
}

div.infoblok {
    text-align: center;
    margin: 10px 0;
}

div.infoblok span.cas_celkem {
    font-size: 14px;
}

table tr td select {
    width: 100%;
    min-width: 100px;
}

tr#row_work_add {
    background: #062659;
}

tr#row_work_add td {
    border: 0;
}

tr#row_work_add td input {
    width: 100%;
}

tr#row_work_add a.pridat {}


/* --------------- -ADMINISTRACE ------------------------------*/

.wb_search {
    position: relative;
    text-align: center;
    margin: 15px 0;
}

.wb_search a.print_icon {
    position: absolute;
    right: 0;
    top: 0;
}

.wb_search label {
    margin-left: 7px;
    font-weight: 700;
    font-size: 15px;
}

tr.soucty {
    border-top: 2px solid #062659;
}


/* ----------- -UZIVATELE -------------------*/

table.add_user_table {}

table.add_user_table th,
table.add_user_table td {
    max-width: unset;
}

table.vypis_uzivatelu {
    min-width: 550px;
    text-align: center;
}

table.vypis_uzivatelu td.td_opravneni {
    text-align: left;
    padding: 10px;
}

table.vypis_uzivatelu td.td_opravneni ul {}

table.vypis_uzivatelu td.td_opravneni ul li {
    list-style-type: none;
    display: block;
    margin-bottom: 2px;
}

table.vypis_uzivatelu td.td_opravneni ul li input {
    margin-right: 5px;
}

table.vypis_uzivatelu td.td_opravneni ul li .tlacitko {
    margin-top: 3px;
    width: 100%;
    text-align: center;
    padding: 3px;
}


/* --------------- -KALENDAR ------------------------------*/

.overflow_table.center {
    text-align: center;
}

iframe.calendar {
    width: 800px !important;
    height: 600px !important;
}


/* --------------- -POZNAMKY ------------------------------*/

a.tlacitko.poznamka_pridat {
    padding: 5px 25px;
    box-sizing: border-box;
    background: #8d8d8d;
    color: white;
    font-weight: bold;
    font-size: 16px;
    border-radius: 15px;
    cursor: pointer;
}

.add_poznamka {
    display: none;
    text-align: center;
    max-width: 400px;
    background: #ececec;
    box-sizing: border-box;
    padding: 15px;
    border-radius: 25px;
    margin-bottom: 25px;
}

.add_poznamka div {
    margin: 15px 0;
}

div.poznamky_vypis {
    display: flex;
    justify-content: center;
    width: 100%;
}

.obal_poznamky {
    width: 250px;
    margin: 20px;
}

.obal_poznamky.splnena {
    opacity: 0.5;
}

.obal_poznamky .poznamka {
    background: #ececec;
    position: relative;
    border-radius: 15px;
}

.obal_poznamky .poznamka .nadpis_poznamky {
    background: #1697b8;
    color: #ffffff;
    padding: 15px;
    padding-top: 22px;
    box-sizing: border-box;
    border-radius: 0 15px 0 0;
}

.obal_poznamky.splnena .poznamka .nadpis_poznamky {
    background: #9b9b9b;
}

.obal_poznamky .poznamka .nadpis_poznamky a.zmena_stavu {
    display: block;
    position: absolute;
    top: 0;
    right: 0px;
    transform: translate(0, -50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 5px solid white;
    box-sizing: border-box;
}

.obal_poznamky.nesplnena .poznamka .nadpis_poznamky a.zmena_stavu {
    background: #f00000;
}

.obal_poznamky.splnena .poznamka .nadpis_poznamky a.zmena_stavu {
    background: #007f0c;
}

.obal_poznamky .poznamka .nadpis_poznamky .odesilatel {
    position: absolute;
    top: 0;
    left: 0;
    background: #0f718a;
    transform: translate(0, -50%);
    padding: 5px 15px;
    border-radius: 13px;
    color: white;
    border: 3px solid white;
}

.obal_poznamky .poznamka .nadpis_poznamky .odesilatel span {}

.obal_poznamky .poznamka .nadpis_poznamky h3 {
    color: #ffffff;
}

.obal_poznamky .poznamka .nadpis_poznamky span.datum {}

.obal_poznamky .poznamka .text_poznamky {
    box-sizing: border-box;
    padding: 15px;
}

.obal_poznamky .poznamka .text_poznamky ul {
    margin-left: 15px;
}

.obal_poznamky .poznamka .editace {
    text-align: center;
    padding: 5px;
    box-sizing: border-box;
    background: #1697b8;
    border-radius: 0 0 15px 15px;
}

.obal_poznamky.splnena .poznamka .editace {
    background: #9b9b9b;
}


/* --------------- WEBHELPER ------------------------------*/

a.tlacitko.web_pridat {
    padding: 5px 25px;
    box-sizing: border-box;
    background: #8d8d8d;
    color: white;
    font-weight: bold;
    font-size: 16px;
    border-radius: 15px;
    cursor: pointer;
}

.add_web {
    display: none;
    text-align: center;
    max-width: 400px;
    background: #ececec;
    box-sizing: border-box;
    padding: 15px;
    border-radius: 25px;
    margin-bottom: 25px;
}

.add_web .poznamka_pridat {
    margin-top: 15px;
}


/* --------------- PRISPEVKY ------------------------------*/

body.facebook_background {
    background: #f0f2f5;
}

.prispevky {}

.prispevky div.prispevky_vypis {
    display: grid;
    grid-gap: 25px;
}

.obal_prispevku {
    width: 100%;
    max-width: 500px;
    background: white;
    border-radius: 10px;
    border: 1px solid #e5e5e5;
}

.obal_prispevku div.prispevek {}

.obal_prispevku div.prispevek .nadpis_prispevku {
    position: relative;
    box-sizing: border-box;
    padding: 13px 17px;
}

.obal_prispevku div.prispevek .nadpis_prispevku figure.fb_ikona {
    position: relative;
    float: left;
    width: 50px;
    height: 50px;
    margin-right: 15px;
    background-size: cover !important;
    border-radius: 50%;
    border: 1px solid #e5e5e5;
}

.obal_prispevku div.prispevek .nadpis_prispevku div.info {
    margin-top: 5px;
}

.obal_prispevku div.prispevek .nadpis_prispevku div.info h3 {
    font-size: 15px;
    color: #393939;
}

.obal_prispevku div.prispevek .nadpis_prispevku div.info span {
    font-size: 13px;
    color: gray;
}

.obal_prispevku div.prispevek .text_prispevku,
.obal_prispevku div.prispevek .edit_prispevek_textarea {
    clear: both;
    box-sizing: border-box;
    padding: 5px 17px;
    font-size: 14px;
}

.obal_prispevku div.prispevek .text_prispevku p {
    margin-bottom: 10px;
}

.obal_prispevku .obrazky_vypis {
    width: 100%;
    height: 500px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    overflow: hidden;
}

.obal_prispevku .obrazky_vypis div.obrazek {
    display: block;
    width: 50%;
    height: 50%;
}

.obal_prispevku .obrazky_vypis div.obrazek img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.obal_prispevku .data_prispevku {
    padding: 17px;
    background: #fcfcfc;
    border-radius: 0 0 10px 10px;
}


/* ---- jeden obr -----*/

.obrazky_vypis.typ_1 div.obrazek {
    width: 100%;
    height: 100%;
}


/* ---------- dva obrazky --------------*/

.obrazky_vypis.typ_2 div.obrazek {
    width: 50%;
    height: 100%;
}


/* ---------- tri obrazky --------------*/

.obrazky_vypis.typ_3 {
    display: block;
    justify-content: none;
    flex-wrap: none;
}

.obrazky_vypis.typ_3 div.obrazek:first-of-type {
    width: 60%;
    height: 100%;
    float: left;
}

.obrazky_vypis.typ_3 div.obrazek {
    width: 40%;
    height: 50%;
    float: left;
}


/* ---------- ctyri obrazky --------------*/

.obrazky_vypis.typ_velky {
    display: block;
    justify-content: none;
    flex-wrap: none;
}

.obrazky_vypis.typ_velky div.obrazek:first-of-type {
    width: 100%;
    height: 70%;
    float: left;
}

.obrazky_vypis.typ_velky div.obrazek {
    width: 33.333%;
    height: 30%;
    float: left;
}


/* --------------- GALERIE APLIKACE ------------------------------*/

a.ikona_galerie {
    width: 32px;
    height: 32px;
    background: url(img/logo_galerie.svg) center no-repeat;
    background-size: contain;
    color: transparent;
    display: inline-block;
    vertical-align: middle;
    border-radius: 7px;
    overflow: hidden;
}

/* vzhled formulare pro nahravani obrazku resi spolecna pravidla dialogu
   v sekci -DIALOGY (jQuery UI) na konci souboru */

.vyber_z_galerie {
    display: flex;
    align-items: center;
}

.vyber_z_galerie * {
    margin: 0 !important;
    margin-right: 5px !important;
}

.galerie_obal {}

.vypis_gal {
    display: flex;
    align-items: flex-start;
    /* grid-gap: 18px; */
    flex-wrap: wrap;
    justify-content: flex-start;
    /* background: #ececec; */
    box-sizing: border-box;
    padding: 18px;
    width: 100%;
    grid-gap: 15px;
}

.galerie_obal.iframe_okno .vypis_gal {
    /* grid-template-columns: repeat(6, 1fr); */
    grid-template-columns: repeat(auto-fill, minmax(169px, 1fr));
}

.vypis_gal .slozka,
.vypis_gal .obrazek {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 170px;
    height: auto;
    min-height: 185px;
    box-sizing: border-box;
    float: left;
    margin: 0;
    background: white;
    padding-bottom: 10px;
    border-radius: 10px;
    overflow: hidden;
    transition: 0s;
}

.vypis_gal .slozka {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    overflow: hidden;
    box-sizing: border-box;
    padding: 10px;
    text-align: center;
    text-decoration: none;
}

.vypis_gal .slozka img {
    width: 86%;
    filter: grayscale(0.3);
}

.vypis_gal .slozka.back img {
    filter: grayscale(0.9);
}

.vypis_gal .slozka:hover img,
.vypis_gal .slozka.back:hover img {
    filter: grayscale(0);
}

.vypis_gal .slozka span {
    font-weight: bold;
    font-size: 15px;
    color: #03183a;
}

.vypis_gal .obrazek {}

.vypis_gal .obrazek a {
    text-align: center;
}

.vypis_gal .obrazek a.obr_nahled {
    display: block;
    width: 100%;
    aspect-ratio: 1/1;
}

.vypis_gal .obrazek img {
    margin-bottom: 10px;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.vypis_gal .obrazek .handle {
    display: block;
    width: 40px;
    height: 40px;
    background: #46a6fc url(img/drag_icon.svg) center no-repeat;
    background-size: 60%;
    position: absolute;
    left: 10px;
    top: 10px;
    border-radius: 7px;
    opacity: 0.2;
    cursor: move;
}

.vypis_gal .obrazek:hover .handle {
    opacity: 0.7;
}

.vypis_gal .obrazek .handle:hover {
    opacity: 1;
}

.vypis_gal .obrazek div.info {
    display: block;
    width: 100%;
    text-align: center;
}

.vypis_gal .obrazek div.info span.obr_id {
    display: block;
    width: 100%;
    font-size: 13px;
}

.vypis_gal .obrazek div.editace {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 10px;
}

.editace a {
    display: inline-block;
    color: transparent !important;
    width: 16px;
    height: 16px;
    background-size: contain !important;
    margin: 0 2px;
    filter: grayscale(1);
    opacity: 0.3;
}

.editace a.vybrat {
    color: white !important;
    height: auto;
    width: auto;
    filter: grayscale(0);
    opacity: 1;
}

.editace a:hover {
    filter: grayscale(0);
    opacity: 1;
}

.editace a.print {
    background: url(img/gal_print.svg)center center no-repeat;
}

.editace a.editace {
    background: url(img/gal_edit.svg)center center no-repeat;
}

.editace a.skryt {
    background: url(img/hide_icon.svg)center center no-repeat;
    width: 20px;
}

.editace a.odkryt {
    background: url(img/show_icon.svg)center center no-repeat;
    width: 20px;
}

.editace a.smazat {
    background: url(img/gal_delete.svg)center center no-repeat;
}

/* presun slozky - ikona se bere ze stejne sady jako ikony v menu */
.editace a.presun {
    background: url(img/ikony/presun.svg)center center no-repeat;
}

.editace a.download {
    background: url(img/gal_download.svg)center center no-repeat;
}

.editace a.obnovit {
    background: url(img/gal_reload.svg)center center no-repeat;
}

.dialog .vypis_gal {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(5, 1fr);
}

.dialog .vypis_gal .obrazek img {
    height: 100px;
}

.fotogalerie section.fotogalerie {
    height: 600px;
}

iframe#gallery_iframe,
#gallery_wrapper {
    width: 100%;
    height: calc(100% - 48px);
    box-sizing: border-box;
    padding: 0 !important;
    border: 0 !important;
}


/* ------ GALERIE - PANEL, SLOZKY, VYBER, HROMADNE AKCE ------ */
/* Pridano spolu s hledanim, strankovanim a hromadnymi akcemi.
   Galerie je stara aplikace (nema tridu new_style), takze si prvky
   stylujeme tady a ne pres spolecne tridy noveho vzhledu. */

.galerie_obal .nadpis_slozky {
    text-align: center;
}

/* nazev otevrene slozky se prepisuje rovnou v nadpisu */
.galerie_obal h2.nazev_slozky.prejmenovatelna {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 8px;
    border-bottom: 1px dashed transparent;
    cursor: text;
}

.galerie_obal h2.nazev_slozky.prejmenovatelna:hover {
    border-bottom-color: #a9b6c5;
    background: rgba(255, 255, 255, 0.6);
}

.galerie_obal h2.nazev_slozky input.uprava_nazvu {
    box-sizing: border-box;
    min-width: 260px;
    padding: 0 6px;
    border: 1px solid #389df9;
    border-radius: 6px;
    background: white;
    /* pole ma vypadat jako nadpis, ktery nahrazuje */
    color: inherit;
    font: inherit;
    text-align: center;
    text-transform: inherit;
}

.galerie_obal h2.nazev_slozky input.uprava_nazvu:focus {
    outline: 0;
}

.galerie_obal .drobecky {
    margin: 4px 0 0;
    color: #90a0b2;
    font-size: 13px;
}

.galerie_obal .drobecky a {
    color: #5b6b80;
    text-decoration: none;
}

.galerie_obal .drobecky a:hover {
    color: #1d7fd8;
    text-decoration: underline;
}

.galerie_obal .drobecky .oddelovac {
    padding: 0 4px;
    color: #c3cedb;
}

/* panel s hledanim a filtry */
.galerie_panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    margin: 15px 18px 0;
    padding: 12px 14px;
    border-radius: 10px;
    background: white;
}

/* globalni "* { margin: 0 auto }" z hlavicky souboru by polozky flexu
   rozhodil na stred, proto se u kazdeho noveho flexu margin vynuluje */
.galerie_panel>* {
    margin: 0;
}

.galerie_panel .pole {
    position: relative;
    margin: 0;
}

.galerie_panel .pole.hledani {
    flex: 1 1 220px;
}

.galerie_panel input[type="text"],
.galerie_panel select {
    box-sizing: border-box;
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #dce4ee;
    border-radius: 7px;
    background: white;
    color: #33465e;
    font-family: inherit;
    font-size: 13px;
}

.galerie_panel input[type="text"]:focus,
.galerie_panel select:focus {
    border-color: #389df9;
    outline: 0;
}

.galerie_panel .zrusit_hledani {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #a9b6c5;
    font-size: 18px;
    line-height: 1;
    text-decoration: none;
}

.galerie_panel .zrusit_hledani:hover {
    color: #e2574c;
}

.galerie_panel .prepinac_podslozky {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #5b6b80;
    font-size: 13px;
    cursor: pointer;
}

.galerie_panel .prepinac_podslozky input {
    margin: 0;
}

.galerie_panel .btn {
    padding: 8px 22px;
}

.galerie_panel .pocet_vysledku {
    margin-left: auto;
    color: #90a0b2;
    font-size: 13px;
    white-space: nowrap;
}

/* tlacitka galerie, ktera nejsou v dialogu (tam uz .btn.gray existuje) */
main.galerie .btn.gray {
    background: #c9c9c9;
}

main.galerie .btn.cervene {
    background: #e2574c;
}

main.galerie .btn.cervene:hover {
    background: #ea6d63;
}

/* --- vypis slozek --- */
.vypis_slozek {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 15px;
    box-sizing: border-box;
    width: 100%;
    padding: 18px 18px 0;
}

.vypis_slozek .slozka_obal {
    position: relative;
    margin: 0;
    width: 170px;
}

.vypis_slozek .slozka {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    min-height: 150px;
    padding: 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.5);
    text-align: center;
    text-decoration: none;
}

.vypis_slozek .slozka:hover {
    background: white;
}

/* misto obecne ikonky slozky ctyri prvni obrazky - hned je videt,
   co ve slozce je */
.vypis_slozek .slozka .mozaika {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 3px;
    box-sizing: border-box;
    width: 100%;
    /* min-width kvuli tomu, ze jde o polozku flexu - siroke SVG by
       jinak dlazdici slozky roztahlo */
    min-width: 0;
    /* pevna vyska, aby dlazdice s mozaikou a dlazdice s ikonou slozky
       byly stejne vysoke a radka se nevlnila */
    height: 130px;
    margin-bottom: 8px;
    border-radius: 7px;
    overflow: hidden;
}

.vypis_slozek .slozka .mozaika img {
    width: 100%;
    height: 100%;
    min-width: 0;
    object-fit: cover;
    background: #eef2f6;
}

/* aby mozaika nemela prazdna mista, kdyz je ve slozce min nez ctyri obrazky */
.vypis_slozek .slozka .mozaika img:only-child {
    grid-column: span 2;
    grid-row: span 2;
}

.vypis_slozek .slozka .mozaika img:nth-child(1):nth-last-child(2),
.vypis_slozek .slozka .mozaika img:nth-child(2):nth-last-child(1),
.vypis_slozek .slozka .mozaika img:nth-child(1):nth-last-child(3) {
    grid-row: span 2;
}

.vypis_slozek .slozka .ikona_slozky {
    width: 100%;
    height: 130px;
    margin-bottom: 8px;
    object-fit: contain;
    filter: grayscale(0.3);
}

.vypis_slozek .slozka:hover .ikona_slozky {
    filter: grayscale(0);
}

.vypis_slozek .slozka.back img {
    width: 100%;
    height: 130px;
    object-fit: contain;
    filter: grayscale(0.9);
}

.vypis_slozek .slozka .text {
    width: 100%;
    color: #03183a;
    font-size: 14px;
    font-weight: bold;
    word-break: break-word;
}

.vypis_slozek .slozka .pocet {
    width: 100%;
    margin-top: 2px;
    color: #90a0b2;
    font-size: 12px;
}

/* Ikony u slozky byly 16px vedle sebe se ctyrmi pixely mezery - prejmenovani
   a kos se snadno spletly. Ted maji vetsi plochu, sedi na svetlem podkladu
   (aby byly videt i pres mozaiku) a kos je jeste odsazeny a oddeleny carou.
   Pozor na "div.editace": odkaz na prejmenovani ma tridu "editace" taky,
   a bez upresneni na div by na nej sedla pravidla obalu (skoncil by
   absolutne umisteny v rohu dlazdice pres ostatni ikony). */
.vypis_slozek .slozka_obal>div.editace {
    display: flex;
    align-items: center;
    gap: 12px;
    /* nahore vedle uchytu pro pretazeni - dole prekryvalo nazev slozky
       a pocet obrazku */
    position: absolute;
    right: 6px;
    top: 6px;
    padding: 6px 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 2px 8px rgba(15, 35, 65, 0.15);
    opacity: 0;
    transition: opacity 0.15s;
}

.vypis_slozek .slozka_obal:hover>div.editace {
    opacity: 1;
}

.vypis_slozek .slozka_obal>div.editace a {
    width: 18px;
    height: 18px;
    margin: 0;
    opacity: 0.55;
}

.vypis_slozek .slozka_obal>div.editace a.smazat,
.vypis_slozek .slozka_obal>div.editace a.obnovit {
    margin-left: 6px;
    padding-left: 12px;
    border-left: 1px solid #e0e7ef;
    background-position: right center !important;
}

.vypis_slozek .handle_slozka {
    display: block;
    position: absolute;
    left: 6px;
    top: 6px;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background: #46a6fc url(img/drag_icon.svg) center no-repeat;
    background-size: 60%;
    opacity: 0;
    cursor: move;
    transition: opacity 0.15s;
}

.vypis_slozek .slozka_obal:hover .handle_slozka {
    opacity: 0.7;
}

.vypis_slozek .handle_slozka:hover {
    opacity: 1;
}

/* --- vyber obrazku --- */
.vypis_gal .obrazek .vyber {
    display: block;
    position: absolute;
    right: 8px;
    top: 8px;
    z-index: 2;
    padding: 4px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.85);
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.15s;
}

.vypis_gal .obrazek:hover .vyber,
.vypis_gal .obrazek.vybrany .vyber {
    opacity: 1;
}

.vypis_gal .obrazek .vyber input {
    display: block;
    width: 17px;
    height: 17px;
    margin: 0;
    cursor: pointer;
}

.vypis_gal .obrazek.vybrany {
    box-shadow: 0 0 0 3px #389df9;
}

.vypis_gal .obrazek .info .bez_altu {
    margin-left: 4px;
    padding: 1px 5px;
    border-radius: 10px;
    background: #ffeccc;
    color: #a86a10;
    font-size: 11px;
}

.vypis_gal .obrazek .info h6 {
    width: 100%;
    margin: 2px 0 0;
    padding: 0 6px;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vypis_gal .prazdny_vypis {
    width: 100%;
    padding: 30px 0;
    color: #90a0b2;
    font-style: italic;
    text-align: center;
}

/* pri pretazeni souboru z pocitace je videt, ze je kam pustit */
.galerie_obal.pretahovani {
    outline: 3px dashed #389df9;
    outline-offset: -6px;
}

/* --- strankovani --- */
.galerie_obal .strankovani {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 10px 18px 30px;
}

.galerie_obal .strankovani>* {
    margin: 0;
}

.galerie_obal .strankovani .info {
    color: #5b6b80;
    font-size: 13px;
}

/* --- listka hromadnych akci --- */
.hromadne_akce {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    position: fixed;
    left: 50%;
    bottom: 20px;
    z-index: 900;
    transform: translateX(-50%);
    padding: 10px 16px;
    border-radius: 12px;
    background: #03183a;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.hromadne_akce>* {
    margin: 0;
}

.hromadne_akce .pocet_vybranych {
    margin-right: 6px;
    color: white;
    font-size: 13px;
    font-weight: 600;
}

.hromadne_akce .btn {
    padding: 6px 18px;
    font-size: 13px;
}

/* --- hlaska misto alertu --- */
.galerie_hlaska {
    position: fixed;
    right: 20px;
    top: 90px;
    z-index: 1000;
    max-width: 320px;
    padding: 12px 18px;
    border-radius: 10px;
    background: #2f9e44;
    color: white;
    font-size: 13.5px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.galerie_hlaska.chyba {
    background: #e2574c;
}

@media (max-width: 700px) {

    .galerie_panel .pocet_vysledku {
        margin-left: 0;
    }

    .hromadne_akce {
        left: 10px;
        right: 10px;
        bottom: 10px;
        justify-content: center;
        transform: none;
    }
}


/* ------ EDITACE OBRAZKU ---------*/

.editace_obrazku {}

.editace_obrazku h4 {
    margin: 20px 0 10px;
}

.editace_obrazku table {
    width: 100%;
    margin-bottom: 20px;
}

.editace_obrazku table th {
    border: 1px solid #46a6fc;
    white-space: nowrap;
    background: #389df9;
    color: white;
    padding: 7px;
    font-weight: 500;
    text-align: left;
    box-sizing: border-box;
}

.editace_obrazku tr th:first-of-type {
    width: 170px;
    text-align: right;
}


/* --------------- WEBHELPER ------------------------------*/

.webhelper {}

.webhelper .wh_filtr {}

.webhelper .wh_filtr label {
    font-weight: bold;
    margin: 0 5px 0 15px;
}

.weby_vypis {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.weby_vypis .obal_webu {
    width: 250px;
    height: auto;
    margin: 10px;
    background: #dbdbdb;
    min-height: 200px;
}

.weby_vypis .obal_webu a.web {
    text-align: left;
    position: relative;
    display: block;
    text-decoration: none;
}

.weby_vypis .obal_webu a.web div.obrazek_webu {
    width: 100%;
    height: 130px;
    background: #686868;
    margin-bottom: 8px;
}

.weby_vypis .obal_webu a.web div.obrazek_webu img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.weby_vypis .obal_webu a.web h3 {
    box-sizing: border-box;
    padding: 10px;
    text-decoration: none;
}

.detail_webu {
    position: relative;
}

.detail_webu .obrazek_webu {
    position: absolute;
    left: 0;
    top: 0;
    width: 400px;
    height: auto;
}

.detail_webu .obrazek_webu img {
    width: 100%;
    height: auto;
}

span.faze {
    display: inline-block;
    padding: 3px 14px;
    border-radius: 5px;
    background: #ff9200;
    position: absolute;
    top: 115px;
    right: 8px;
    font-weight: 600;
    color: black;
    font-size: 14px;
}


/* navrh */

span.faze.faze_1 {
    background: #3dd4fa;
}


/* kodovani */

span.faze.faze_2 {
    background: #ff9200;
}


/* kontrola */

span.faze.faze_3 {
    background: #ff6666;
}


/* hotovo */

span.faze.faze_4 {
    background: #00c713;
}

a.tlacitko.web_pridat {
    padding: 5px 25px;
    box-sizing: border-box;
    background: #8d8d8d;
    color: white;
    font-weight: bold;
    font-size: 16px;
    border-radius: 15px;
    cursor: pointer;
}

.add_web {
    display: none;
    text-align: center;
    max-width: 400px;
    background: #ececec;
    box-sizing: border-box;
    padding: 15px;
    border-radius: 25px;
    margin-bottom: 25px;
}

.webhelper {}

.webhelper table {}

.webhelper table tr {}

.webhelper table tr.spleny_row {
    opacity: 0.5;
}

.webhelper table tr th {
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 600;
}

.webhelper table tr td {
    padding: 7px 16px;
    font-size: 13px;
    max-width: 250px;
}

.webhelper table input {
    font-size: 13px;
    max-width: 250px;
}

td.tlacitko_splneno a {
    display: block;
    width: 50px;
    height: 20px;
    border-radius: 10px;
}

td.tlacitko_splneno.splnena a {
    background: #007f0c;
}

td.tlacitko_splneno.nesplnena a {
    background: #f00000;
}


/* --------------- ESHOP AMDIN ------------------------------*/

main.nastaveni .topmenu_aplikace,
main.workbook .topmenu_aplikace,
main.jondu .topmenu_aplikace,
main.clanky .topmenu_aplikace,
main.eshop .topmenu_aplikace {
    border-radius: 0;
    background: linear-gradient(135deg, #4059b9 0%, #10284c 100%);
    position: relative;
}

/* Nadpis listy byl driv position:absolute a lista mela pevnych 35px.
   Jakmile responzivni pravidlo nastavilo liste height:auto, zustala
   vysoka jen podle paddingu a nadpis z ni vylezl ven. Proto je lista
   flex radek a nadpis v nem normalne tece. */

main.nastaveni .topmenu_aplikace,
main.workbook .topmenu_aplikace,
main.jondu .topmenu_aplikace,
main.clanky .topmenu_aplikace,
main.eshop .topmenu_aplikace {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    height: auto;
    min-height: 35px;
    box-sizing: border-box;
    padding: 4px 15px;
}

main.nastaveni .topmenu_aplikace h2.nadpis_apky,
main.workbook .topmenu_aplikace h2.nadpis_apky,
main.jondu .topmenu_aplikace h2.nadpis_apky,
main.clanky .topmenu_aplikace h2.nadpis_apky,
main.eshop .topmenu_aplikace h2.nadpis_apky {
    position: static;
    transform: none;
    left: auto;
    top: auto;
    margin: 0;
    color: white;
    font-size: 20px;
}

main.nastaveni .topmenu_aplikace ul,
main.workbook .topmenu_aplikace ul,
main.jondu .topmenu_aplikace ul,
main.clanky .topmenu_aplikace ul,
main.eshop .topmenu_aplikace ul {
    margin-left: auto;
    margin-right: auto;
}

main.eshop .topmenu_aplikace ul li {}

main.eshop .topmenu_aplikace ul li a {}

main.nastaveni div.eshop_obal,
main.workbook div.eshop_obal,
main.jondu div.eshop_obal,
main.eshop div.eshop_obal,
main.clanky div.eshop_obal {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    background: #394456;
}


/* Zruseni globalniho "* { margin: 0 auto }" pro sloupce layoutu.
   Stranka se streamuje a leve menu se vykresli driv, nez dorazi
   article s obsahem. Dokud je v flexu samo, auto margin ho vycentruje
   a po dojiti clanku skoci doleva - viditelne to probliklo. */

main.nastaveni div.eshop_obal>*,
main.workbook div.eshop_obal>*,
main.jondu div.eshop_obal>*,
main.eshop div.eshop_obal>*,
main.clanky div.eshop_obal>* {
    margin: 0;
}


/* Main je sloupec: horni lista aplikace (pokud je) si vezme svou vysku
   a zbytek dostane obal se sloupci. Diky tomu nezalezi na tom, jak je
   lista vysoka - na uzkych displejich se zalamuje do vice radku a nic
   se neprekryva. Sloupce se roztahnou samy (align-items: stretch),
   proto maji vysku auto. */

main.nastaveni.new_style,
main.workbook.new_style,
main.jondu.new_style,
main.eshop.new_style,
main.clanky.new_style {
    display: flex;
    flex-direction: column;
}


/* i tady plati, ze auto margin z "* { margin: 0 auto }" by polozky
   sloupce vycentroval a zaroven jim vypnul roztazeni na plnou sirku */

main.nastaveni.new_style>*,
main.workbook.new_style>*,
main.jondu.new_style>*,
main.eshop.new_style>*,
main.clanky.new_style>* {
    margin: 0;
    width: 100%;
}

main.nastaveni div.eshop_obal,
main.workbook div.eshop_obal,
main.jondu div.eshop_obal,
main.eshop div.eshop_obal,
main.clanky div.eshop_obal {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    overflow: hidden;
    /* Se zalamovanim by se radek roztahl podle obsahu sloupcu misto
       podle obalu a dlouhy vypis by pretekl mimo main (ten ma
       overflow: hidden), takze by se nedal odscrollovat. Bez
       zalamovani se sloupce roztahnou na vysku obalu a scrolluji samy. */
    flex-wrap: nowrap;
}

main.nastaveni div.eshop_obal>aside.leve_menu,
main.workbook div.eshop_obal>aside.leve_menu,
main.jondu div.eshop_obal>aside.leve_menu,
main.eshop div.eshop_obal>aside.leve_menu,
main.clanky div.eshop_obal>aside.leve_menu,
main.nastaveni div.eshop_obal>article.clanek,
main.workbook div.eshop_obal>article.clanek,
main.jondu div.eshop_obal>article.clanek,
main.eshop div.eshop_obal>article.clanek,
main.clanky div.eshop_obal>article.clanek {
    height: auto;
    min-height: 0;
}

main.eshop aside.leve_menu {
    position: relative;
    width: 220px;
    background: linear-gradient(135deg, #525e72 0%, #1f3151 100%);
    color: white;
    height: calc(100vh - 73px);
    overflow: auto;
    box-sizing: border-box;
    padding: 0;
}

main.nastaveni aside.leve_menu *,
main.workbook aside.leve_menu *,
main.jondu aside.leve_menu *,
main.eshop aside.leve_menu *,
main.clanky aside.leve_menu * {
    color: white;
}

main.eshop aside.leve_menu .vyhledavani {
    display: flex;
    position: relative;
    width: 100%;
    height: 30px;
    background: transparent;
    overflow: hidden;
}

main.eshop aside.leve_menu .vyhledavani input {
    display: flex;
    width: calc(100% - 40px);
    border-radius: 0;
    height: 30px;
    color: black;
}

main.eshop aside.leve_menu .vyhledavani a.search_icon {
    display: block;
    width: 40px;
    height: 30px;
    background: #389df9 url(img/search_icon.svg) center no-repeat;
    background-size: 60% 60%;
    border-radius: 0;
    color: transparent;
    font-size: 0;
    padding: 0;
}

aside.leve_menu ul.navigace {}

aside.leve_menu ul.navigace li {
    list-style-type: none;
}

aside.leve_menu ul.navigace li.karta {}

aside.leve_menu ul.navigace li.karta h4 {
    text-transform: uppercase;
    box-sizing: border-box;
    padding: 22px 15px 4px;
    border-bottom: 1px solid #3a75ab;
    color: white;
    font-size: 15px;
    letter-spacing: 0.2;
    font-weight: 600;
}

aside.leve_menu ul.navigace li.karta ul.submenu {}

aside.leve_menu ul.navigace li.karta ul.submenu li {}

aside.leve_menu ul.navigace li.karta ul.submenu li a {
    display: block;
    box-sizing: border-box;
    padding: 3px 15px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

aside.leve_menu ul.navigace li.karta ul.submenu li a.aktivni {
    background: #389df9;
}

aside.leve_menu ul.navigace li.karta ul.submenu li a:hover {
    background: #3a75ab;
    color: white;
}

main.eshop article.clanek {
    width: calc(100% - 220px);
    height: 100%;
    overflow: auto;
    box-sizing: border-box;
    padding: 20px;
    background: #f9f9f9;
}

main.eshop h2.nadpis_apky {
    text-align: left;
    box-sizing: border-box;
}

main.eshop aside.leve_menu h2.nadpis_apky {
    text-align: left;
    box-sizing: border-box;
    padding: 8px 12px;
    margin: 0;
    background: rgba(0, 0, 0, 0.2);
}

main.eshop section,
main.nastaveni section,
main.workbook section,
main.jondu section,
main.clanky section {
    box-sizing: border-box;
    padding: 10px;
    background: white;
    border-radius: 10px;
    border: 1px solid #eeeeee;
    margin: 0;
    margin-bottom: 20px;
}

main.eshop section .podsekce {
    margin-top: 30px;
}

main.eshop table {
    margin-left: 0;
}

main.eshop table tr {}

main.eshop table tr:nth-of-type(even) {
    background: transparent;
}

main.eshop table tr th,
main.eshop table tr td {
    padding: 10px 20px;
    max-width: unset;
}

main.eshop table tr th {
    background: transparent;
    color: #494f59;
    font-weight: 700;
    text-align: left;
    border-bottom: 2px solid #676d77;
}

main.eshop table tr td {
    background: white;
    border: 1px solid #f1f1f1;
}

.btn {}


/* --------------- ESHOP TITULKA ------------------------------*/

main.eshop article.clanek.titulka {
    display: grid;
    grid-gap: 25px;
    grid-template-columns: repeat(3, 1fr);
    padding: 25px;
    background: linear-gradient(90deg, #4059b9 0%, rgb(93 28 102) 100%);
    border-top-left-radius: 25px;
    box-shadow: 4px 4px 18px rgba(0, 0, 0, 0.5);
}

main.eshop article.clanek.titulka section {
    width: 100%;
    background: rgba(0, 0, 0, 0.2);
    border: 0;
    margin-bottom: 0;
}

main.eshop article.clanek.titulka section .nadpis_sekce {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

main.eshop article.clanek.titulka section .nadpis_sekce h3 {
    margin: 0;
    color: white;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1.05;
}

main.eshop article.clanek.titulka section .nadpis_sekce .odkazy {
    margin: 0;
}

main.eshop article.clanek.titulka section .nadpis_sekce .odkazy .btn {}

main.eshop article.clanek.titulka section .vypis {
    max-height: 350px;
    overflow: auto;
}


/* aktuality*/

main.eshop article.clanek.titulka section.aktuality {
    background: rgba(0, 185, 255, 0.1);
}

main.eshop article.clanek.titulka section.aktuality article.clanek_novinky {
    background: rgba(0, 185, 255, 0.3);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 5px;
    color: white;
    box-sizing: border-box;
    padding: 10px;
}

main.eshop article.clanek.titulka section.aktuality article.clanek_novinky h4 {
    color: white;
}

main.eshop article.clanek.titulka section.aktuality article.clanek_novinky span.datum {
    font-weight: 600;
    display: block;
    margin-bottom: 5px;
}

main.eshop article.clanek.titulka section.aktuality article.clanek_novinky .text {
    margin-bottom: 6px;
}

main.eshop article.clanek.titulka section.aktuality article.clanek_novinky .text * {
    color: white;
}


/* produkty*/

main.eshop article.clanek.titulka section.produkty *,
main.eshop article.clanek.titulka section.bl_nejprodavanejsi * {
    color: white;
}

main.eshop article.clanek.titulka section.produkty {
    grid-column: 2/4;
}

main.eshop article.clanek.titulka section.produkty .vypis {
    display: grid;
    grid-gap: 13px;
    grid-template-columns: repeat(6, 1fr);
}

main.eshop article.clanek.titulka section.produkty .vypis article.produkt_nov,
main.eshop article.clanek.titulka section.bl_nejprodavanejsi .vypis article.produkt_nov {
    display: block;
    width: 100%;
    height: auto;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

main.eshop article.clanek.titulka section.produkty .vypis article.produkt_nov>a,
main.eshop article.clanek.titulka section.bl_nejprodavanejsi .vypis article.produkt_nov>a {
    display: block;
    width: 100%;
    height: auto;
    text-decoration: none;
}

main.eshop article.clanek.titulka section.produkty .vypis article.produkt_nov figure.obrazek,
main.eshop article.clanek.titulka section.bl_nejprodavanejsi .vypis article.produkt_nov figure.obrazek {
    position: relative;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding-top: 100%;
    border-radius: 7px;
    overflow: hidden;
    margin-bottom: 15px;
}

main.eshop article.clanek.titulka section.produkty .vypis article.produkt_nov figure.obrazek img,
main.eshop article.clanek.titulka section.bl_nejprodavanejsi .vypis article.produkt_nov figure.obrazek img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

main.eshop article.clanek.titulka section.produkty .vypis article.produkt_nov .info,
main.eshop article.clanek.titulka section.bl_nejprodavanejsi .vypis article.produkt_nov .info {
    box-sizing: border-box;
    padding: 0 13px;
}

main.eshop article.clanek.titulka section.produkty .vypis article.produkt_nov .info h4,
main.eshop article.clanek.titulka section.bl_nejprodavanejsi .vypis article.produkt_nov .info h4 {
    display: block;
    margin-bottom: 10px;
    text-decoration: none;
    word-break: break-word;
}


/* nejprodavanejsi prod */

main.eshop article.clanek.titulka section.bl_nejprodavanejsi .vypis {
    display: grid;
    grid-gap: 13px;
    grid-template-columns: repeat(3, 1fr);
}

main.eshop article.clanek.titulka section.bl_nejprodavanejsi .vypis span.cislo {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 15px;
    left: 10px;
    top: 10px;
    width: 30px;
    height: 30px;
    background: #389df9;
    z-index: 1;
    border-radius: 50%;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.4));
}


/* objednavky */

main.eshop article.clanek.titulka section.blok.bl_objednavky .vypis {}

main.eshop article.clanek.titulka section.blok.bl_objednavky .vypis article.objednavka {
    width: 100%;
}

main.eshop article.clanek.titulka section.blok.bl_objednavky .vypis article.objednavka a {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 5px;
    text-decoration: none;
}

main.eshop article.clanek.titulka section.blok.bl_objednavky .vypis article.objednavka * {
    color: white;
    margin: 0;
}

main.eshop article.clanek.titulka section.blok.bl_objednavky .vypis article.objednavka .datum {
    background: rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    padding: 12px 17px;
    margin-right: 14px;
    min-width: 113px;
}

main.eshop article.clanek.titulka section.blok.bl_objednavky .vypis article.objednavka .datum span {}

main.eshop article.clanek.titulka section.blok.bl_objednavky .vypis article.objednavka h3 {
    font-size: 14px;
}

main.eshop article.clanek.titulka section.blok.bl_objednavky .vypis article.objednavka .cena {
    margin-left: auto;
    box-sizing: border-box;
    padding: 12px 25px;
    font-weight: bold;
}

main.eshop article.clanek.titulka section.blok.bl_objednavky .vypis article.objednavka .cena span {}

main.eshop article.clanek.titulka section * {
    font-size: 14px;
}


/* --------------- EDITACE PRODUKTU ------------------------------*/

.pridat_produkt {
    background: #389df9 !important;
    color: #ffffff !important;
}

main.eshop .editace_prod_obal {
    display: flex;
    padding-bottom: 180px;
}

main.eshop .editace_prod_obal .hlavni_blok {
    width: calc(100% - 400px);
    box-sizing: border-box;
    padding-right: 40px;
}

main.eshop .editace_prod_obal .pravy_blok {
    width: 400px;
    box-sizing: border-box;
    padding-top: 53px;
}

main.eshop .editace_prod_obal .pravy_blok .obsah {
    position: sticky;
    top: 0;
}

main.eshop .hlavicka_ed_produktu {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 20px;
}

main.eshop .hlavicka_ed_produktu .img_ed_produkt {
    width: 60px;
    height: auto;
    border-radius: 14px;
    margin: 0;
    margin-right: 15px;
}

main.eshop .hlavicka_ed_produktu h2 {
    margin: 0;
}

main.eshop .hlavicka_ed_produktu a.na_webu {
    flex: 0 0 auto;
    margin: 0 0 0 auto;
    padding-left: 12px;
    padding-right: 12px;
}

main.eshop .editace_prod_obal .pravy_blok h3 {
    margin-bottom: 20px;
}

main.eshop ul.rozcesti,
main.clanky ul.rozcesti {
    background: white;
    margin-bottom: 10px;
    display: inline-flex;
    border-radius: 8px;
    overflow: hidden;
}

main.eshop ul.rozcesti li,
main.clanky ul.rozcesti li {
    display: inline-block;
    list-style-type: none;
}

main.eshop ul.rozcesti li:nth-child(even) a,
main.clanky ul.rozcesti li:nth-child(even) a {
    border-left: 1px solid rgb(226, 226, 226);
    border-right: 1px solid rgb(226, 226, 226);
}

main.eshop ul.rozcesti li a,
main.clanky ul.rozcesti li a {
    display: inline-block;
    box-sizing: border-box;
    font-weight: 600;
    background: transparent;
    color: #626262;
    padding: 7px 35px;
    font-size: 14px;
    text-decoration: none;
    text-transform: uppercase;
}

main.eshop ul.rozcesti li a.active,
main.clanky ul.rozcesti li a.active {
    background: #389df9;
    color: #ffffff;
}

main.eshop td figure.obrazek img {
    width: 45px;
    height: 45px;
    object-fit: cover;
    object-position: center;
}

main.nastaveni h3.nadpis_sekce,
main.workbook h3.nadpis_sekce,
main.jondu h3.nadpis_sekce,
main.eshop h3.nadpis_sekce {
    margin-bottom: 20px;
}

.new_style div.edit_row {
    display: flex;
    flex-wrap: nowrap;
    margin-bottom: 30px;
}

.new_style div.edit_row .info_col {
    width: 20%;
    text-align: right;
    box-sizing: border-box;
    padding-right: 20px;
    min-width: 200px;
}

.new_style div.edit_row .edit_col {
    width: 80%;
}

.new_style div.edit_row label,
section.filtrovani_faktur label {
    font-weight: 600;
    background: #eaf5ff;
    color: #626262;
    padding: 2px 13px;
    border-radius: 5px;
    font-size: 14px;
}

.new_style input,
.new_style textarea,
.new_style select {
    box-sizing: border-box;
    padding: 5px 10px;
    border: 1px solid #dbdbdb;
    margin: 0;
    border-radius: 5px;
}

main.eshop .editace_prod_obal #name,
main.eshop .editace_prod_obal #seo_name {
    width: 100%;
    max-width: 400px;
    font-weight: bold;
    padding: 10px 12px;
}

ul.kategorie_vypis,
ul.kategorie_vypis ul {
    padding: revert;
}

main.eshop ul.kategorie_vypis {}

ul.kategorie_vypis li {
    display: block;
    list-style-type: none;
    margin-bottom: 12px;
}

main.eshop ul.kategorie_vypis li input {
    margin-right: 8px;
}

main.eshop .obal_odkazu_save {
    text-align: left;
    margin-bottom: 60px;
    display: flex;
    align-items: center;
}

.btn.ikona {
    color: transparent;
    font-size: 0;
    width: 31px;
    height: 31px;
    background-color: white !important;
    padding: 0;
}

.btn.ikona {
    color: transparent;
    font-size: 0;
    width: 31px;
    height: 31px;
    background-color: white !important;
    padding: 0;
    filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.1)) grayscale(10) !important;
}

.btn.ikona:hover {
    filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.1)) grayscale(0) !important;
}

.btn.nahled {
    background: white url(img/nahled_icon.svg) center no-repeat !important;
    background-size: 65% 50% !important;
}

.btn.kopirovat {
    background: url(img/copy_icon.svg) center no-repeat !important;
    background-size: 50% 50% !important;
    background-color: white !important;
}

main.eshop .obal_odkazu_save a {
    margin: 0;
    margin-right: 8px;
}

main.eshop .obal_odkazu_save a.btn {
    filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.1));
}

.btn {
    background: #389df9;
    color: #ffffff !important;
    display: inline-block;
    box-sizing: border-box;
    font-weight: 600;
    padding: 6px 35px;
    font-size: 14px;
    text-decoration: none;
    text-transform: uppercase;
    border-radius: 8px;
    filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.1));
}

.btn:hover {
    background: #4fa8f8;
}

main.eshop .btn.gray {
    background: #c9c9c9 !important;
    color: white;
}

main.eshop .btn.sm {
    padding: 4px 14px;
    font-size: 13px;
}

.karta_nad_produkt {
    display: flex;
    max-width: 500px;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    margin-left: 0;
    border: 1px solid #389df9;
    margin-bottom: 10px;
}

a.pridat_variantu {
    background: #c9c9c9 !important;
    width: 100% !important;
    margin-bottom: 10px !important;
    text-align: center !important;
}

.karta_nad_produkt img {
    width: 130px;
    height: 130px;
    object-fit: cover;
    object-position: center;
    /* margin-right: 20px; */
}

.karta_nad_produkt .info {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    box-sizing: border-box;
    padding: 20px;
}

.karta_nad_produkt .info .aktivni {
    display: block;
    position: absolute;
    right: 10px;
    top: 10px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #363636;
    cursor: pointer;
}

.aktivni.ano {
    background: greenyellow !important;
}

.aktivni.ne {
    background: red !important;
}

.karta_nad_produkt .info h3 {
    display: block;
    width: 100%;
    margin-bottom: 0 !important;
}

.karta_nad_produkt .info div.hodnoty {
    margin-left: 0;
    font-size: 12px;
    font-weight: 500;
}

.karta_nad_produkt .info div.hodnoty span {}

.karta_nad_produkt .info a {
    margin-left: 0;
    margin-top: 8px;
}

input[name="v_id_prod"] {
    width: 40px;
}

.dodatek_jednotka,
.dodatek {
    font-size: 14px;
    color: gray;
}

section.vypis_produktu {
    overflow: auto;
}

section.vypis_produktu table {
    width: 100%;
}

section.vypis_produktu .max_width {
    max-width: 68px;
    min-width: unset;
}

section.vypis_produktu td.td_obrazek {
    padding: 0;
}

section.vypis_produktu th.th_obrazek {
    padding: 10px;
}

main.eshop td a.aktivni {
    display: block;
    width: 40px;
    height: 20px;
    border-radius: 20px;
    background: gray;
}

main.eshop .exclusive_toggle {
    cursor: pointer;
}

main.eshop .exclusive_toggle img {
    width: 30px;
    height: auto;
}

main.eshop .exclusive_toggle.ne img {
    opacity: 0.5;
    filter: grayscale(2);
}

.karta_nad_produkt .obal_odkazu {
    display: flex;
    align-items: center;
    margin-left: 0;
}

.karta_nad_produkt .obal_odkazu .editace {
    margin-left: 10px;
}

.story_td {
    max-width: 650px !important;
}


/* -------- -VYBIRANI PRODUKTU -------------*/

.vyhl_produktu_inputy {
    display: flex;
    align-items: center;
    justify-content: center;
}

.vyhl_produktu_inputy * {
    margin: 0;
}

.vyhl_produktu_inputy input[type="text"] {
    margin-right: 10px;
    height: 30px;
    box-sizing: border-box;
    padding: 5px;
    border-radius: 7px;
}

.vyhl_produktu_inputy input[type="submit"] {
    height: 30px;
    box-sizing: border-box;
    padding: 3px 15px;
    /* display: flex; */
    /* align-items: center; */
    /* border-radius: 5px; */
    /* border: 0; */
    /* background: #389df9; */
    /* color: white; */
    /* cursor: pointer; */
    text-decoration: none;
    text-transform: none;
    font-weight: 400;
    border: 0;
    cursor: pointer;
}

.vypis_vyberu_prod {
    height: auto;
    max-height: 300px;
    overflow: auto;
    margin-top: 20px;
    box-sizing: border-box;
    padding-right: 20px;
}

.vypis_vyberu_prod article.produkt,
#vypis_produktu_prislusenstvi article.produkt,
#vypis_produktu_souvisejici article.produkt {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 7px;
    border: 1px solid #eeeeee;
    box-sizing: border-box;
    padding: 9px;
    border-radius: 8px;
    background: white;
}

.vypis_vyberu_prod article.produkt.pridany {
    border: 1px solid #389df9;
}

.vypis_vyberu_prod article.produkt .col,
#vypis_produktu_prislusenstvi article.produkt .col,
#vypis_produktu_souvisejici article.produkt .col {
    margin: 0;
    margin-right: 10px;
}

.vypis_vyberu_prod article.produkt .col.obrazek,
#vypis_produktu_prislusenstvi article.produkt .col.obrazek,
#vypis_produktu_souvisejici article.produkt .col.obrazek {}

.vypis_vyberu_prod article.produkt .col.obrazek img,
#vypis_produktu_prislusenstvi article.produkt .col.obrazek img,
#vypis_produktu_souvisejici article.produkt .col.obrazek img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    object-position: center;
}

.vypis_vyberu_prod article.produkt .col.nazev,
#vypis_produktu_prislusenstvi article.produkt .col.nazev,
#vypis_produktu_souvisejici article.produkt .col.nazev {}

.vypis_vyberu_prod article.produkt .col.nazev h4,
#vypis_produktu_prislusenstvi article.produkt .col.nazev h4,
#vypis_produktu_souvisejici article.produkt .col.nazev h4 {}

.vypis_vyberu_prod article.produkt .col.akce,
#vypis_produktu_prislusenstvi article.produkt .col.akce,
#vypis_produktu_souvisejici article.produkt .col.akce {
    margin-left: auto;
    margin-right: 0;
}

.vypis_vyberu_prod article.produkt .col.akce a,
#vypis_produktu_prislusenstvi article.produkt .col.akce a,
#vypis_produktu_souvisejici article.produkt .col.akce a {}

.vypis_vyberu_prod article.produkt .col.akce a.odebrat {
    display: none;
}

.vypis_vyberu_prod article.produkt.pridany .col.akce a.pridat {
    display: none;
}

.vypis_vyberu_prod article.produkt.pridany .col.akce a.odebrat {
    display: inline-block;
}


/* -------- -STITKY PRODUKTU -------------*/

.stitek_1 {
    background: #fdbdbd !important;
}

.stitek_2 {
    background: #ffeac4 !important;
}

.stitek_3 {
    background: #baffba !important;
}

.stitek_4 {
    background: #bad8ff !important;
}


/* ---------- editace produktu - stitek -------------*/

.edit_col.editace_stitku span {
    display: inline-block;
    box-sizing: border-box;
    padding: 5px;
    border-radius: 7px;
}

.edit_col.editace_stitku span select {
    background: rgba(255, 255, 255, 0.4);
}


/* --------------- editace kategorii ------------------------------*/

ul.kategorie_vypis.hlavni {}

ul.kategorie_vypis.hlavni li.kategorie {
    display: inline-flex;
    list-style-type: none;
    align-items: center;
    box-sizing: border-box;
    padding: 5px 10px;
    background: #eaf5ff;
    border-radius: 5px;
}

ul.kategorie_vypis.hlavni li.kategorie span {
    display: block;
    margin: 0;
    margin-right: 15px;
}

ul.kategorie_vypis.hlavni li.kategorie span a.nazev {
    text-decoration: none;
    font-weight: 600;
    color: #727272;
    font-size: 14px;
}

ul.kategorie_vypis.hlavni li.kategorie span a.nazev:hover {
    text-decoration: underline;
}

ul.kategorie_vypis.hlavni li.kategorie .editace {
    display: flex;
    margin: 0;
}

ul.kategorie_vypis.hlavni li.kategorie .editace a {
    margin-right: 4px;
}

ul.kategorie_vypis.hlavni li.kategorie span.aktivni {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    overflow: hidden;
    background: red;
}

ul.kategorie_vypis.hlavni li.kategorie span.aktivni.ano {
    background: green;
}


/* globalni styly editaci */

.obal_sekci {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
}

.obal_sekci section {
    width: 100%;
    margin: 0;
    margin-bottom: inherit;
}

.obal_sekci section.box_50,
.box_50 {
    width: calc(50% - 10px);
}

.obal_sekci section.box_70,
.box_70 {
    width: calc(70% - 10px);
}

.obal_sekci section.box_30,
.box_30 {
    width: calc(30% - 10px);
}

.obal_sekci section.box_33,
.box_33 {
    width: calc(33% - 10px);
}


/* --------------- vypis OBJEDNAVKY ------------------------------*/

.obal_odkazu_hl {
    margin-bottom: 7px;
}

.vypis_objednavek {}

.vypis_objednavek td.cena {
    text-align: center;
}

.vypis_objednavek td.platba {
    padding: 7px;
}

.vypis_objednavek td.platba span {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 4px 12px;
    background: whitesmoke;
    text-align: center;
    font-weight: 600;
    border-radius: 3px;
}

.vypis_objednavek td.stav {
    padding: 7px;
    background: whitesmoke;
}

.vypis_objednavek td.stav span {
    font-weight: 600;
    background: rgba(255, 255, 255, 0.7);
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 4px 12px;
    border-radius: 3px;
    text-align: center;
}


/* odeslano */

.vypis_objednavek td.stav.stav_4,
.info_objednavka .obj_stav_4 {
    background: #d0ffd0;
}


/* vyzvednuto, dodano */

.vypis_objednavek td.stav.stav_16,
.vypis_objednavek td.stav.stav_5,
.info_objednavka .obj_stav_16,
.info_objednavka .obj_stav_5 {
    background: #69f169;
}


/* zruseno */

.vypis_objednavek td.stav.stav_6,
.info_objednavka .obj_stav_6 {
    background: #ff5d5d;
}


/* prijata */

.vypis_objednavek td.stav.stav_0,
.info_objednavka .obj_stav_0 {
    background: #6ce6eb;
}


/* --------------- editace OBJEDNAVKY ------------------------------*/

.editace_objednavky_obal .bloky {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.editace_objednavky_obal .bloky .levy_blok,
.editace_objednavky_obal .bloky .pravy_blok {
    width: calc(50% - 10px);
    margin: 0;
}

.editace_objednavky_obal .bloky .pravy_blok {}

.editace_objednavky_obal section.zasilkovna {
    background: #cb0000;
    color: white;
}

.editace_objednavky_obal section.zasilkovna h3 {
    color: white;
}

.editace_objednavky_obal section.zasilkovna tr {}

.editace_objednavky_obal section.zasilkovna th {
    color: white;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 2px solid white;
}

.editace_objednavky_obal section.zasilkovna td {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
}

.editace_objednavky_obal section.zasilkovna .btn {
    background: rgba(255, 255, 255, 0.95);
    color: #cb0000 !important;
}

.editace_objednavky_obal section.zasilkovna .btn:hover {
    background: rgba(255, 255, 255, 1);
    color: #cb0000 !important;
}

.editace_objednavky_obal section.zasilkovna .row {
    margin: 10px 0 15px;
}

.editace_objednavky_obal section.zasilkovna .vypis_zasilek {
    margin: 20px 0;
}


/* --------------- karta ZAKAZNIKA - uprava adresy ------------------------------*/
/* Karta pouziva rozlozeni detailu objednavky (editace_objednavky_obal),
   formular ma stejne radky jako nova objednavka. */

.editace_zakaznici_obal .obal_odkazu,
.editace_objednavky_obal section.info .obal_odkazu {
    margin-top: 14px;
}

.editace_zakaznici_obal .obal_odkazu .btn,
.editace_objednavky_obal section.info .obal_odkazu .btn {
    margin-right: 8px;
}

.editace_zakaznici_obal .editace_adresy h4 {
    margin: 4px 0 10px;
    color: #5b6b80;
    font-size: 13.5px;
}

.editace_zakaznici_obal .editace_adresy .row {
    margin-bottom: 12px;
}

.editace_zakaznici_obal .editace_adresy .row label {
    display: block;
    margin: 0 0 4px;
    color: #5b6b80;
    font-size: 12.5px;
    font-weight: 600;
}

.editace_zakaznici_obal .editace_adresy .row input,
.editace_zakaznici_obal .editace_adresy .row select {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
}

/* PSC a mesto vedle sebe, PSC uzsi */
.editace_zakaznici_obal .editace_adresy .row.dvojice {
    display: flex;
    gap: 10px;
}

.editace_zakaznici_obal .editace_adresy .row.dvojice>div:first-child {
    flex: 0 0 110px;
}

.editace_zakaznici_obal .editace_adresy .row.dvojice>div:last-child {
    flex: 1 1 auto;
    min-width: 0;
}

/* jmeno a prijmeni, e-mail a telefon - pul na pul */
.editace_zakaznici_obal .editace_adresy .row.dvojice.pul>div {
    flex: 1 1 0;
    min-width: 0;
}

.editace_zakaznici_obal .editace_adresy .adresni_cast {
    margin-top: 18px;
    padding-top: 6px;
    border-top: 1px solid #edf1f6;
}

.editace_zakaznici_obal .editace_adresy .row.zaskrtavatko {
    display: flex;
    align-items: center;
    gap: 8px;
}

.editace_zakaznici_obal .editace_adresy .row.zaskrtavatko input {
    width: auto;
}

.editace_zakaznici_obal .editace_adresy .row.zaskrtavatko label {
    margin: 0;
    font-weight: normal;
}

.editace_zakaznici_obal .editace_adresy .fakturacni {
    display: none;
    padding-top: 6px;
    border-top: 1px solid #edf1f6;
}

.editace_zakaznici_obal .editace_adresy.zobraz_fakturacni .fakturacni {
    display: block;
}

.editace_zakaznici_obal .editace_adresy .napoveda {
    margin: 4px 0 0;
    color: #90a0b2;
    font-size: 12.5px;
    line-height: 1.5;
}


/*------------- -REKAPITULACE  -----------------------------*/

main.eshop section.rekapitulace_table_obal {}

main.eshop section.rekapitulace_table_obal table {
    width: 100%;
    border-collapse: collapse;
}

main.eshop .rekapitulace_table td:last-of-type {
    text-align: right;
}

main.eshop .rekapitulace_table td.td_obrazek {
    max-width: 90px;
    width: 90px;
    ;
}


/* --------------- NOVA OBJEDNAVKA ------------------------------*/
/* Modul ma dva kroky - v prvnim se vybira zakaznik, ve druhem se sklada
   obsah uz zalozene objednavky. Sekce jsou stejne karty jako v detailu
   objednavky, polozky jsou radky s editovatelnymi inputy. */

.nova_objednavka section {
    width: 100%;
}

.nova_objednavka .napoveda {
    margin: 10px 0 0;
    color: #90a0b2;
    font-size: 12.5px;
    line-height: 1.5;
}

/* vyrobci - vysvetlivka k hlavnimu vyrobci a logo ve vypisu */
.vypis_vyrobcu .napoveda,
.editace_vyrobce .napoveda,
.kategorie .napoveda {
    margin: 10px 0 0;
    color: #90a0b2;
    font-size: 12.5px;
    line-height: 1.5;
}

.vypis_vyrobcu td img {
    max-height: 32px;
    width: auto;
}

.nova_objednavka .row {
    margin-bottom: 12px;
}

.nova_objednavka .row:last-of-type {
    margin-bottom: 0;
}

.nova_objednavka .row label {
    display: block;
    margin: 0 0 4px;
    color: #5b6b80;
    font-size: 12.5px;
    font-weight: 600;
}

.nova_objednavka .row input,
.nova_objednavka .row textarea,
.nova_objednavka select {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
}


/*  polozky objednavky */

.nova_objednavka section.polozky_objednavky .vypis {
    margin-bottom: 10px;
}

.nova_objednavka article.produkt {
    display: flex;
    border: 1px solid #eeeeee;
    align-items: center;
    box-sizing: border-box;
    padding: 9px;
    border-radius: 8px;
    background: white;
    margin-top: 10px;
}

.nova_objednavka article.produkt .col,
.nova_objednavka .novy_produkt .col {
    margin: 0;
    margin-right: 9px !important;
    min-width: 35px;
}

.nova_objednavka article.produkt .col input,
.nova_objednavka .novy_produkt .col input {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
}

.nova_objednavka article.produkt .col.id_prod {
    flex: 0 0 60px;
    color: #90a0b2;
    font-size: 12px;
}

.nova_objednavka article.produkt .col.obrazek {
    flex: 0 0 40px;
    min-width: 40px;
    text-align: center;
}

.nova_objednavka article.produkt .col.obrazek img {
    width: 30px;
}

.nova_objednavka article.produkt .col.nazev,
.nova_objednavka .novy_produkt .col.nazev {
    flex: 1 1 auto;
    min-width: 120px;
}

.nova_objednavka article.produkt .col.pocet,
.nova_objednavka article.produkt .col.cena {
    flex: 0 0 90px;
}

.nova_objednavka article.produkt .col.mezisoucet {
    flex: 0 0 110px;
    color: #33465e;
    font-weight: 600;
    text-align: right;
}

.nova_objednavka article.produkt .col.akce {
    flex: 0 0 30px;
    margin-right: 0 !important;
    min-width: 30px;
}


/*  rucne pridavana polozka */

.nova_objednavka .novy_produkt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px 0;
    margin: 16px 0 12px;
    padding-top: 14px;
    border-top: 1px dashed #dfe6ee;
}

.nova_objednavka .novy_produkt .col {
    flex: 0 0 120px;
}

.nova_objednavka .novy_produkt .col.akce {
    flex: 0 0 auto;
    margin-right: 0 !important;
}


/*  rekapitulace a akce */

.nova_objednavka .souhrn_objednavky {
    width: 100%;
    border-collapse: collapse;
}

.nova_objednavka .souhrn_objednavky tr.celkem td {
    border-bottom: 0;
    font-size: 15px;
}

.nova_objednavka section.akce_objednavky {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.nova_objednavka section.akce_objednavky>* {
    margin: 0;
}

.nova_objednavka .btn.smazat_objednavku {
    margin-left: auto !important;
    background: #f3e3e3;
    color: #a83232 !important;
}

.nova_objednavka .btn.smazat_objednavku:hover {
    background: #cb0000;
    color: white !important;
}


/*  tlacitko, ktere jeste nema smysl mackat */

.nova_objednavka .btn.nepristupny {
    opacity: 0.45;
    pointer-events: none;
}


/*  hlaska misto alertu - vyskoci vpravo dole a sama zmizi */

.eshop_hlaska {
    display: none;
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1000;
    box-sizing: border-box;
    max-width: 320px;
    padding: 12px 18px;
    border-radius: 9px;
    background: #33465e;
    box-shadow: 0 10px 30px rgba(15, 35, 65, 0.25);
    color: white;
    font-family: 'Open Sans', Roboto, sans-serif;
    font-size: 13px;
    line-height: 1.45;
}

.eshop_hlaska.chyba {
    background: #cb0000;
}


/*  novy uzivatel */

/* Formular noveho zakaznika bezi v dialogu, kde neplati vzhled administrace -
   proto ma vlastni tabulkovy layout. Bez nej to byla hola tabulka
   s uzkymi systemovymi inputy. */

main.pridani_uzivatele {
    max-height: 60vh;
    padding: 0;
    overflow: auto;
}

main.pridani_uzivatele section.adresa {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

main.pridani_uzivatele #data_adresy {
    width: 100%;
    border-collapse: collapse;
}

main.pridani_uzivatele #data_adresy td {
    box-sizing: border-box;
    padding: 5px 8px 5px 0;
    border: 0;
    background: transparent;
    color: #5b6b80;
    font-size: 13px;
    vertical-align: middle;
}

main.pridani_uzivatele #data_adresy td:first-of-type {
    width: 38%;
}

main.pridani_uzivatele #data_adresy h3 {
    margin: 14px 0 6px;
    color: #33465e;
    font-size: 13.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

main.pridani_uzivatele #data_adresy tr:first-of-type h3 {
    margin-top: 0;
}

main.pridani_uzivatele #data_adresy input[type="text"],
main.pridani_uzivatele #data_adresy input[type="email"],
main.pridani_uzivatele #data_adresy input[type="tel"],
main.pridani_uzivatele #data_adresy input[type="number"],
main.pridani_uzivatele #data_adresy input[type="month"],
main.pridani_uzivatele #data_adresy select {
    box-sizing: border-box;
    width: 100%;
    min-height: 34px;
    margin: 0;
    padding: 6px 10px;
    border: 1px solid #d7e0ea;
    border-radius: 7px;
    background: white;
    color: #33465e;
    font-family: 'Open Sans', Roboto, sans-serif;
    font-size: 13px;
}

main.pridani_uzivatele #data_adresy input.zvyrazni {
    border-color: #cb0000;
    background: #fdf3f3;
}

main.pridani_uzivatele .jina_fakturacni_obal {
    padding-top: 12px !important;
}

main.pridani_uzivatele .jina_fakturacni_obal input {
    width: auto;
    margin: 0 8px 0 0;
    vertical-align: middle;
}

main.pridani_uzivatele .jina_fakturacni_obal label {
    vertical-align: middle;
    cursor: pointer;
}

/* fakturacni adresa se ukazuje az po zaskrtnuti - jinak to vypadalo,
   ze je povinna (pole maji hvezdicku) */
main.pridani_uzivatele tr.hide_fakturacni {
    display: none;
}

main.pridani_uzivatele.zobraz_fakturacni tr.hide_fakturacni {
    display: table-row;
}

main.pridani_uzivatele .obal_odkazu {
    margin-top: 16px;
}


/* --------------- FAKTURY ------------------------------*/

section.filtrovani_faktur {
    display: flex;
    flex-wrap: wrap;
}

section.filtrovani_faktur label {
    padding: 7px 13px;
}

section.filtrovani_faktur input {
    margin: 0 5px 0 4px;
}

section.filtrovani_faktur a.btn {
    margin-right: 6px;
}

section.filtrovani_faktur h3.nadpis_sekce {
    width: 100%;
}

section.filtrovani_faktur .row {
    display: flex;
    margin: 0;
    margin-right: 25px;
    align-items: center;
    margin-bottom: 8px;
}

section.filtrovani_faktur .row .col {}

section.info_row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: linear-gradient(90deg, #4059b9 0%, rgb(93 28 102) 100%) !important;
}

section.info_row article.info {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: flex-start;
    box-sizing: border-box;
    padding: 12px 25px;
    border-radius: 20px;
    color: white;
    margin: 0;
    margin-right: 11px;
}

section.info_row article.info span.nadpis {
    color: white;
    font-weight: 500;
    font-size: 17px;
    margin-right: 12px;
}

section.info_row article.info span.vysledek {
    color: white;
    font-weight: 700;
    font-size: 25px;
}

section.vypis_faktur .vypis {
    width: 100%;
}


/* --------------- -VYHLEDAVANI ------------------------------*/

.info_objednavka span {
    background: #eaf5ff;
    box-sizing: border-box;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 13px;
}


/* --------------- VYBER PPORTALU ------------------------------*/

#dialog_vyber_portalu {
    padding: 15px 10px;
}

#dialog_vyber_portalu li {
    display: block;
    list-style-type: none;
    margin-bottom: 6px;
}

#dialog_vyber_portalu li a {
    text-decoration: none;
    display: block;
    width: 100%;
    font-weight: 600;
    background: url(img/portal_icon.svg) left 10px center no-repeat, linear-gradient(90deg, #4059BA 0%, rgba(93, 28, 102, 0.7) 100%);
    background-size: 20px, 100%;
    color: white;
    box-sizing: border-box;
    padding: 7px 25px;
    padding-left: 43px;
    border-radius: 8px;
}

#dialog_vyber_portalu li a:hover {
    background-color: #4059BA;
}


/* --------------- -NASTAVENI ------------------------------*/

main.nastaveni aside.leve_menu,
main.workbook aside.leve_menu,
main.jondu aside.leve_menu {
    position: relative;
    width: 300px;
    background: linear-gradient(135deg, #525e72 0%, #1f3151 100%);
    color: white;
    height: 100%;
    overflow: auto;
    box-sizing: border-box;
}

main.nastaveni article.clanek,
main.workbook article.clanek,
main.jondu article.clanek {
    width: calc(100% - 300px);
    height: 100%;
    overflow: auto;
    box-sizing: border-box;
    padding: 20px;
    background: #f9f9f9;
}


/* --------------- -CLANKY ------------------------------*/

main.clanky h3 {
    margin-bottom: 15px;
}

main.clanky aside.leve_menu {
    position: relative;
    width: 300px;
    background: linear-gradient(135deg, #525e72 0%, #1f3151 100%);
    color: white;
    height: calc(100vh - 106px);
    overflow: auto;
    box-sizing: border-box;
    padding: 20px 15px 15px;
}

main.clanky aside.leve_menu ul.clanky_vypis {
    border-left: 1px solid rgb(111 126 154);
    border-radius: 5px;
}

main.clanky aside.leve_menu ul.clanky_vypis ul {
    padding-left: 10px;
}

main.clanky aside.leve_menu ul.clanky_vypis li {
    list-style-type: none;
    display: flex;
    margin: 0 0 3px;
    align-items: center;
    position: relative;
    box-sizing: border-box;
}


/* reseni subkategorii */

main.clanky aside.leve_menu ul.clanky_vypis li.typ_2 span.aktivni {
    right: 36px;
}

main.clanky aside.leve_menu ul.clanky_vypis li.typ_2 a.otevri_sekci {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: #3c87cb;
    position: absolute;
    right: 2px;
    top: 2px;
    padding: 0;
}

main.clanky aside.leve_menu ul.clanky_vypis ul.subkategorie {
    display: none;
}

main.clanky aside.leve_menu ul.clanky_vypis ul.subkategorie.open {
    display: block;
    position: relative;
}

main.clanky aside.leve_menu ul.clanky_vypis ul.subkategorie.open::before {
    content: "";
    position: absolute;
    display: block;
    left: -1px;
    top: 0;
    width: 1px;
    height: 101%;
    background: #389df9;
}

main.clanky aside.leve_menu ul.clanky_vypis li.aktivni a.hl_acko {
    background: #389df9 !important;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}

main.clanky aside.leve_menu ul.clanky_vypis li.aktivni a.hl_acko {
    color: white;
}

main.clanky aside.leve_menu ul.clanky_vypis li a {
    position: relative;
    margin: 0;
    text-decoration: none;
    font-weight: 500;
    display: block;
    width: 100%;
    padding: 5px 3px 5px 11px;
    box-sizing: border-box;
    border-radius: 5px;
    font-size: 14px;
    border: 1px solid transparent;
    border-left: 0;
}

main.clanky aside.leve_menu ul.clanky_vypis li a:hover {
    background: #4977a1;
    border: 1px solid rgb(111 126 154);
    border-left: 0;
}

main.clanky aside.leve_menu ul.clanky_vypis li.typ_2 a.hl_acko {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 0;
    padding-right: 43px;
}

main.clanky aside.leve_menu ul.clanky_vypis li.typ_2.open_nadpis a.hl_acko {
    border: 1px solid #389df9;
    background: rgba(56, 157, 249, 0.16);
    border-left: 0;
}

main.clanky aside.leve_menu ul.clanky_vypis li.typ_2.open_nadpis a.hl_acko span.sipka {
    border-left: 1px solid #389df9;
    border-bottom: 1px solid #389df9;
}

main.clanky aside.leve_menu ul.clanky_vypis li span.sipka {
    position: absolute;
    left: 0;
    top: 0;
    width: 10px;
    height: 100%;
    border-left: 1px solid rgb(111 126 154);
    border-bottom: 1px solid rgb(111 126 154);
    border-bottom-left-radius: 5px;
    transform: translate(-1px, 0);
}

main.clanky aside.leve_menu ul.subkategorie.open li span.sipka {
    border-left: 1px solid #389df9;
    border-bottom: 1px solid #389df9;
    border-bottom-left-radius: 0px;
}

main.clanky aside.leve_menu ul.clanky_vypis li span.aktivni {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translate(0, -50%);
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 10px;
    margin: 0;
}

main.clanky aside.leve_menu ul.clanky_vypis li span.aktivni.ano {}

main.clanky article.clanek {
    width: calc(100% - 300px);
    height: 100%;
    overflow: auto;
    box-sizing: border-box;
    padding: 20px;
    background: #f9f9f9;
}

main.clanky article.clanek>h1 {
    margin-bottom: 20px;
}

main.clanky .informace h4 {
    display: inline-block;
    margin: 0 5px;
    font-size: 13px;
}

main.clanky .informace #prim_obr,
main.clanky .informace #sec_obr,
main.clanky .informace #adr_gal {
    width: 73px;
}

main.clanky .informace #nazev,
main.clanky .informace #alt_nazev {
    width: 100%;
}

ul.adresare_vypis {
    margin-top: 13px;
    max-height: 60vh;
}

ul.adresare_vypis ul {
    padding: revert;
}

ul.adresare_vypis li {
    display: inline-flex;
    list-style-type: none;
    align-items: center;
    box-sizing: border-box;
    padding: 3px 9px;
    background: #eaf5ff;
    border-radius: 5px;
    margin-bottom: 7px;
}

ul.adresare_vypis a {
    text-decoration: none;
    font-weight: 600;
    color: #727272;
    font-size: 14px;
}

ul.adresare_vypis li.aktivni {
    background: #1697b8;
    color: white;
}

ul.adresare_vypis li.aktivni a {
    color: white;
}

/* Vyber typu clanku (dialog Změnit typ a Přidat podčlánek) - karty
   s ikonou a popiskem misto sedych tlacitek, ze kterych nebylo poznat,
   cim se typy lisi. Soucasny typ je oznaceny a neda se znovu vybrat. */

.typy_uvod {
    margin: 0 0 14px;
    color: #7b8a9c;
    font-size: 13px;
    line-height: 1.5;
}

ul.vyber_typu_clanku {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
}

ul.vyber_typu_clanku li {
    margin: 0;
    list-style-type: none;
}

ul.vyber_typu_clanku .volba {
    display: flex;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid #e4ebf3;
    border-radius: 10px;
    background: white;
    color: #33465e;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

ul.vyber_typu_clanku .volba>* {
    margin: 0;
}

ul.vyber_typu_clanku .volba:hover {
    border-color: #389df9;
    background: #f5faff;
    box-shadow: 0 2px 8px rgba(56, 157, 249, 0.15);
}

/* jQuery UI po otevreni dialogu zameri prvni kartu - misto cerneho
   ramecku prohlizece modry obrys */

ul.vyber_typu_clanku .volba:focus-visible {
    outline: 2px solid #389df9;
    outline-offset: 2px;
}

ul.vyber_typu_clanku .volba .ikona {
    display: flex;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    height: 36px;
    border-radius: 9px;
    background: #eef6ff;
    color: #1a72c4;
}

ul.vyber_typu_clanku .volba .ikona::before {
    width: 18px;
    height: 18px;
    margin: 0;
    vertical-align: 0;
    opacity: 1;
}

ul.vyber_typu_clanku .volba .text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

ul.vyber_typu_clanku .volba .text>* {
    margin: 0;
}

ul.vyber_typu_clanku .volba .nazev {
    color: #1a2f4f;
    font-size: 14px;
    font-weight: 700;
}

ul.vyber_typu_clanku .volba .popis {
    color: #7b8a9c;
    font-size: 12.5px;
    line-height: 1.4;
}

ul.vyber_typu_clanku .volba.aktivni {
    border-color: #389df9;
    background: #f5faff;
    box-shadow: none;
    cursor: default;
}

ul.vyber_typu_clanku .volba.aktivni .ikona {
    background: #389df9;
    color: white;
}

ul.vyber_typu_clanku .volba .soucasny {
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: 999px;
    background: #389df9;
    color: white;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* po klepnuti se uklada - dalsi typ uz vybrat nejde */

ul.vyber_typu_clanku.uklada {
    opacity: 0.6;
    pointer-events: none;
}

/* nahled clanku (clanek_zobrazeni.inc.php) - viz sekce
   CLANKY - NAHLED CLANKU na konci souboru */


/* --------------- -PAGE BUILDER ------------------------------*/

.page_builder_editor {
    width: 100%;
    height: calc(100vh - 220px);
}

.page_builder_editor.full_screen {
    width: 100%;
    height: calc(100vh - 73px);
    position: fixed;
    top: 73px;
    left: 0;
}

.page_builder_editor iframe {
    width: 100%;
    height: 100%;
    border: 0;
    box-sizing: border-box;
}

.page_builder_editor a.full_scr_ico {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    font-weight: 600;
    font-size: 16px;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    background: #389df9;
    border-radius: 5px;
    z-index: 5;
    color: white;
    text-decoration: none;
}




/* ---------------- -IKONY ------------------ */


/* Zakladni pravidlo pro ikonky (tridy ik_neco) a jejich masky je
   v generovanem souboru ikony.css - vznika z SVG v img/ikony/
   skriptem img/ikony/generuj_ikony.php.
   Tady jsou uz jen velikosti a barvy pro jednotliva mista v adminu. */


/* ---------------- -IKONY V HORNIM MENU APLIKACI ------------------ */

header.hlavicka .aplikace_obal .aplikace_obsah ul li a.aplikace {
    gap: 0;
    transition: background .15s ease;
}

header.hlavicka .aplikace_obal .aplikace_obsah ul li a.aplikace::before {
    width: 14px;
    height: 14px;
    margin-right: 6px;
    vertical-align: 0;
    background-color: #7ec2ff;
    opacity: 1;
}

header.hlavicka .aplikace_obal .aplikace_obsah ul li a.aplikace:hover::before {
    background-color: #bfe3ff;
}


/* na aktivni (modre) zalozce by modra ikona zanikla, proto bila */

header.hlavicka .aplikace_obal .aplikace_obsah ul li a.aplikace.aktivni::before {
    background-color: white;
}


/* ---------------- -LEVE MENU - IKONY A VZHLED ------------------ */


/* nadpis sekce (Katalog, Objednavky, Ceny a doprava ...) */

aside.leve_menu ul.navigace li.karta h4 {
    display: flex;
    align-items: center;
    padding: 20px 15px 6px;
    border-bottom: 1px solid rgba(122, 191, 255, 0.35);
    font-size: 13px;
    letter-spacing: 0.6px;
    opacity: 0.9;
}

aside.leve_menu ul.navigace li.karta h4::before {
    width: 16px;
    height: 16px;
    margin-right: 9px;
    vertical-align: 0;
    background-color: #7ec2ff;
    opacity: 1;
}


/* polozky sekce */

aside.leve_menu ul.navigace li.karta ul.submenu li a {
    display: flex;
    align-items: center;
    padding: 5px 15px;
    border-left: 3px solid transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: background .15s ease, border-color .15s ease;
}

aside.leve_menu ul.navigace li.karta ul.submenu li a::before {
    width: 15px;
    height: 15px;
    margin-right: 9px;
    vertical-align: 0;
    opacity: 0.5;
}

aside.leve_menu ul.navigace li.karta ul.submenu li a:hover {
    background: rgba(255, 255, 255, 0.09);
    border-left-color: rgba(255, 255, 255, 0.35);
}

aside.leve_menu ul.navigace li.karta ul.submenu li a.aktivni {
    background: linear-gradient(90deg, #389df9 0%, rgba(56, 157, 249, 0.45) 100%);
    border-left-color: #cbe8ff;
}

aside.leve_menu ul.navigace li.karta ul.submenu li a:hover::before,
aside.leve_menu ul.navigace li.karta ul.submenu li a.aktivni::before {
    opacity: 1;
}


/* nadpis aplikace v levem menu */

main.eshop aside.leve_menu h2.nadpis_apky {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* nadpis panelu ma stejny prouzek jako v eshopu, proto sedi na okraj
   panelu a odsazeni obsahu si resi az vnitrni div.vypis */

main.clanky aside.leve_menu {
    padding: 0;
    height: calc(100vh - 73px);
}

main.clanky aside.leve_menu h2.nadpis_apky {
    display: flex;
    align-items: center;
    text-align: left;
    padding: 10px 14px;
    margin: 0;
    letter-spacing: 1px;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

main.clanky aside.leve_menu div.vypis {
    box-sizing: border-box;
    padding: 15px 15px 20px;
}


/* odkaz na hlavni stranku je prvni polozka menu, ne holy nadpis */

main.clanky aside.leve_menu h4.hl_stranka {
    margin: 0 0 10px;
    font-size: 14px;
}

main.clanky aside.leve_menu h4.hl_stranka a {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 6px 10px;
    border: 1px solid rgb(111 126 154);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.06);
    font-weight: 600;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease;
}

main.clanky aside.leve_menu h4.hl_stranka a::before {
    width: 15px;
    height: 15px;
    margin-right: 8px;
    vertical-align: 0;
    opacity: 0.75;
}

main.clanky aside.leve_menu h4.hl_stranka a:hover {
    background: #4977a1;
}

main.clanky aside.leve_menu h4.hl_stranka.aktivni a {
    background: #389df9;
    border-color: #389df9;
}

main.clanky aside.leve_menu h4.hl_stranka a:hover::before,
main.clanky aside.leve_menu h4.hl_stranka.aktivni a::before {
    opacity: 1;
}

.topmenu_aplikace h2.nadpis_apky {
    display: flex;
    align-items: center;
}

main.eshop aside.leve_menu h2.nadpis_apky::before,
main.clanky aside.leve_menu h2.nadpis_apky::before,
.topmenu_aplikace h2.nadpis_apky::before {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    vertical-align: 0;
    opacity: 0.7;
}


/* vyhledavani */

main.eshop aside.leve_menu .vyhledavani {
    width: auto;
    height: 32px;
    margin: 12px;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

main.eshop aside.leve_menu .vyhledavani input {
    width: calc(100% - 38px);
    height: 32px;
    border: 0;
    box-sizing: border-box;
    padding: 0 10px;
    font-size: 13px;
}

main.eshop aside.leve_menu .vyhledavani a.search_icon {
    width: 38px;
    height: 32px;
    background-size: 50% 50%;
    transition: background-color .15s ease;
}

main.eshop aside.leve_menu .vyhledavani a.search_icon:hover {
    background-color: #1b86e6;
}


/* ---------------- -CLANKY - IKONY V LEVEM MENU ------------------ */

main.clanky aside.leve_menu ul.clanky_vypis li a.hl_acko::before {
    content: "";
    display: inline-block;
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    margin-right: 7px;
    background-color: currentColor;
    -webkit-mask: url(img/ikony/clanky.svg) center / contain no-repeat;
    mask: url(img/ikony/clanky.svg) center / contain no-repeat;
    opacity: 0.45;
    transition: opacity .15s ease;
}

main.clanky aside.leve_menu ul.clanky_vypis li.typ_2 a.hl_acko::before {
    -webkit-mask-image: url(img/ikony/slozka.svg);
    mask-image: url(img/ikony/slozka.svg);
    opacity: 0.7;
}

main.clanky aside.leve_menu ul.clanky_vypis li a.hl_acko:hover::before,
main.clanky aside.leve_menu ul.clanky_vypis li.aktivni a.hl_acko::before {
    opacity: 1;
}


/* ---------------- -TOPMENU APLIKACE - IKONY ------------------ */

.topmenu_aplikace ul li a {
    transition: background .15s ease;
}

.topmenu_aplikace ul li a::before {
    width: 15px;
    height: 15px;
    margin-right: 7px;
    vertical-align: 0;
    opacity: 0.75;
}

.topmenu_aplikace ul li a:hover::before {
    opacity: 1;
}


/* v galerii jsou polozky topmenu tlacitka, ikonu chceme i tam */

.topmenu_aplikace ul li a.tlacitko {
    background: transparent;
    color: white;
    margin-bottom: 0;
    border-radius: 0;
}

/* --------------- -RESPONZIVITA ------------------------------*/

@media screen and (max-width: 1700px) {
    .vysledky_vyhledavani_obal .obal_sekci section.box_33,
    .box_33 {
        width: calc(50% - 10px);
    }
}

@media screen and (max-width: 1600px) {
    main.eshop article.clanek.titulka {
        grid-gap: 15px;
        grid-template-columns: repeat(2, 1fr);
    }
    main.eshop article.clanek.titulka section.produkty {
        grid-column: unset;
    }
    main.eshop article.clanek.titulka section.produkty .vypis {
        grid-template-columns: repeat(4, 1fr);
    }
    .vysledky_vyhledavani_obal .obal_sekci section.box_50,
    .vysledky_vyhledavani_obal .box_50 {
        width: 100%;
    }
}

@media screen and (max-width: 1380px) {
    header.hlavicka .aplikace_obal .aplikace_obsah ul {
        justify-content: flex-end;
    }
    .vypis_gal .slozka,
    .vypis_gal .obrazek {
        width: 130px;
        min-height: 200px;
    }
}

@media screen and (max-width: 1200px) {
    main.eshop .editace_prod_obal {
        flex-wrap: wrap;
    }
    main.eshop .editace_prod_obal .hlavni_blok,
    main.eshop .editace_prod_obal .pravy_blok {
        width: 100%;
        padding-right: 0;
    }
}

@media screen and (max-width: 980px) {
    header.hlavicka {
        height: 73px;
    }
    header.hlavicka a.logo img {
        width: 150px;
    }
    header.hlavicka .portal_info {
        margin-left: 10px;
    }
    header.hlavicka .portal_info span.podnadpis {
        font-size: 10px;
    }
    header.hlavicka .portal_info span.portal {
        font-size: 14px;
        white-space: nowrap;
    }
    main.eshop aside.leve_menu {
        position: fixed;
        display: none;
        width: 80vw;
        right: 0;
        height: calc(100vh - 73px);
        z-index: 9;
    }
    main.eshop article.clanek {
        width: 100%;
        padding: 20px;
    }
    main.eshop article.clanek.titulka {
        box-shadow: none;
        border-top-left-radius: 0;
    }
    header.hlavicka .aplikace_obal {
        display: none;
    }
    div.mobile_menu {
        position: relative;
        display: flex;
        height: 30px;
        width: 30px;
        margin: 0;
        cursor: pointer;
        background: #389df9;
        border-radius: 3px;
    }
    div.mobile_menu:hover {
        background: red;
    }
    header div.mobile_menu span {
        position: absolute;
        display: block;
        width: 80%;
        height: 3px;
        border-radius: 10px;
        left: 50%;
        transform: translate(-50%, 0);
        background: white;
        transition: 0s;
    }
    div.mobile_menu span.top {
        top: 20%;
    }
    div.mobile_menu span.mid {
        top: 50%;
        transform: translate(-50%, -50%);
    }
    div.mobile_menu span.bot {
        bottom: 20%;
    }
    div.mobile_menu.close span.top {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(45deg);
    }
    div.mobile_menu.close span.mid {
        width: 0;
    }
    div.mobile_menu.close span.bot {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(-45deg);
    }
    header.hlavicka a.logo {
        width: 140px;
        flex-wrap: wrap;
        padding-left: 10px;
        justify-content: flex-start;
        align-items: center;
        align-content: center;
        padding-right: 10px;
    }
    header.hlavicka a.logo img {
        width: auto;
        height: 20px;
        margin-left: 0;
    }
    header.hlavicka .portal_info {
        margin-left: 0;
        border-left: none;
        padding-left: 0;
        margin-top: 4px;
    }
    header.hlavicka .portal_info span.podnadpis {
        display: none;
    }
    header.hlavicka .portal_info span.portal {
        display: flex;
        font-size: 14px;
        white-space: nowrap;
        box-sizing: border-box;
        padding: 2px 7px;
        background: #4a409a;
        border-radius: 5px;
    }
    main.eshop article.clanek.titulka {
        padding: 10px 2%;
    }
}

@media screen and (max-width: 900px) {
    header.hlavicka .aplikace_obal {
        height: auto;
    }
    header.hlavicka .aplikace_obal .aplikace_obsah {
        height: auto;
    }
    header.hlavicka .aplikace_obal .aplikace_obsah ul {
        height: auto;
    }
    header.hlavicka .aplikace_obal .aplikace_obsah ul li {
        margin: 4px;
    }
    .topmenu_aplikace {
        height: auto;
        padding: 5px;
    }
    .topmenu_aplikace ul {
        height: auto;
    }
    .topmenu_aplikace ul li {
        margin: 4px;
    }
    header.hlavicka a.logo {
        width: 140px;
    }
    header.hlavicka div.odhlaseni,
    header.hlavicka div.prihlaseni {
        bottom: 9px;
        height: auto;
        text-align: right;
    }
    header.hlavicka div.prihlaseni form {
        text-align: right;
    }
    header.hlavicka div.prihlaseni form input {
        display: block;
        margin-bottom: 5px;
    }
    .info_table {
        text-align: center;
        top: 225px;
        box-sizing: border-box;
        width: 90%;
    }
    table tr td {
        border-collapse: collapse;
        border: 0;
        white-space: nowrap;
        padding: 5px 5px;
        max-width: unset;
    }
    iframe.calendar {
        width: 400px !important;
        height: 600px !important;
    }
    ul.blok_filtrovani li a {
        margin-bottom: 7px;
    }
    ul.blok_filtrovani li a.print_icon {
        display: none;
    }
    main.eshop article.clanek.titulka section.blok.bl_objednavky .vypis article.objednavka .cena {
        margin-left: auto;
        box-sizing: border-box;
        padding: 12px 25px;
        font-weight: bold;
        white-space: nowrap;
    }
}

@media screen and (max-width: 860px) {
    main.eshop article.clanek.titulka {
        width: 100%;
        display: flex;
        grid-gap: 15px;
        grid-template-columns: unset;
        flex-wrap: wrap;
    }
    main.eshop article.clanek.titulka section.produkty .vypis,
    main.eshop article.clanek.titulka section.bl_nejprodavanejsi .vypis {
        display: flex;
        overflow: auto;
        max-width: 100%;
    }
    main.eshop article.clanek.titulka section.produkty .vypis article.produkt_nov,
    main.eshop article.clanek.titulka section.bl_nejprodavanejsi .vypis article.produkt_nov {
        min-width: 200px;
    }
    main.eshop article.clanek.titulka section.blok.bl_objednavky .vypis {
        max-height: 300px;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
    }
    main.eshop article.clanek.titulka section.blok.bl_objednavky .vypis article.objednavka {
        width: 100%;
        min-width: 400px;
        margin-right: 7px;
    }
    main.eshop article.clanek.titulka section.produkty .vypis,
    main.eshop article.clanek.titulka section.bl_nejprodavanejsi .vypis,
    main.eshop article.clanek.titulka section.blok.bl_objednavky .vypis {
        box-sizing: border-box;
        padding-bottom: 20px;
    }
    main.eshop .hlavicka_ed_produktu .img_ed_produkt {
        width: 40px;
        border-radius: 10px;
    }
    h2.nadpis_apky {
        font-size: 20px;
    }
    main.eshop article.clanek {
        width: 100%;
        height: 100%;
        overflow: auto;
        overflow-x: hidden;
        padding: 15px;
    }
    main.eshop ul.rozcesti {
        width: 100%;
    }
    main.eshop ul.rozcesti li {
        width: 100%;
        margin: 0;
    }
    main.eshop ul.rozcesti li a {
        padding: 15px 10px;
        text-align: center;
        width: 100%;
    }
    main.eshop ul.rozcesti li>a.pridat_produkt {
        width: 100%;
    }
    main.nastaveni div.edit_row,
    main.workbook div.edit_row,
    main.jondu div.edit_row,
    main.eshop div.edit_row,
    main.clanky div.edit_row {
        display: flex;
        flex-wrap: wrap;
    }
    main.nastaveni div.edit_row .info_col,
    main.workbook div.edit_row .info_col,
    main.jondu div.edit_row .info_col,
    main.eshop div.edit_row .info_col,
    main.clanky div.edit_row .info_col {
        width: 100%;
        text-align: left;
        box-sizing: border-box;
        padding-right: 0;
        min-width: unset;
        margin-bottom: 15px;
    }
    main.nastaveni div.edit_row .info_col label,
    main.workbook div.edit_row .info_col label,
    main.jondu div.edit_row .info_col label,
    main.eshop div.edit_row .info_col label,
    main.clanky div.edit_row .info_col label {
        display: flex;
        width: 100%;
        font-weight: 600;
        background: #eaf5ff;
        color: #626262;
        padding: 17px 13px 10px;
        font-size: 15px;
        box-sizing: border-box;
    }
    main.nastaveni div.edit_row .edit_col,
    main.workbook div.edit_row .edit_col,
    main.jondu div.edit_row .edit_col,
    main.eshop div.edit_row .edit_col,
    main.clanky div.edit_row .edit_col {
        width: 100%;
    }
    main.eshop .editace_prod_obal input[type="text"],
    main.eshop .editace_prod_obal select {
        width: 100%;
        box-sizing: border-box;
        padding: 10px 15px;
    }
    main.eshop .obal_odkazu_save {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        margin-bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        padding: 8px 15px;
        background: linear-gradient(90deg, #4059b9 0%, rgb(93 28 102) 100%);
    }
    .fotogalerie section.fotogalerie .nadpis_sekce {
        box-sizing: border-box;
        padding: 20px 20px 0;
    }
    .fotogalerie section.fotogalerie {
        position: relative;
        width: 100vw;
        height: 80vh;
        left: 50%;
        transform: translate(-50%, 0);
        padding: 0;
    }
    .vypis_gal .obrazek .handle {
        opacity: 0.9 !important;
    }
}

@media screen and (max-width: 450px) {
    .vypis_gal {
        grid-gap: 5px;
    }
    .vypis_gal .slozka,
    .vypis_gal .obrazek {
        width: calc(33.3333% - 5px);
        min-height: 170px;
    }
}

/* --------------- -RESPONZIVITA - DOPLNENI ------------------------------*/


/* Na mobilech se 100vh pocita vcetne adresniho radku, ktery se pri
   scrollovani skryva - obsah pak pretece. dvh meri skutecne viditelnou
   cast okna. */

@supports (height: 100dvh) {
    main {
        height: calc(100dvh - 73px);
    }
    main.clanky aside.leve_menu {
        height: calc(100dvh - 73px);
    }
}


/* tabulky jdou posunout prstem, ale liste se ukaze jen kdyz je potreba */

.overflow_table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media screen and (max-width: 980px) {
    /* Leve menu jako vysouvaci panel. Doted to umel jen eshop, clanky
       a nastaveni mely porad 300px siroky sloupec, ktery na telefonu
       nenechal na obsah skoro nic. */
    main.eshop aside.leve_menu,
    main.clanky aside.leve_menu,
    main.nastaveni aside.leve_menu,
    main.workbook aside.leve_menu,
    main.jondu aside.leve_menu {
        position: fixed;
        display: none;
        top: 73px;
        right: 0;
        bottom: 0;
        left: auto;
        width: 80vw;
        max-width: 340px;
        height: auto;
        z-index: 9;
        box-shadow: -8px 0 24px rgba(0, 0, 0, 0.45);
    }
    main.eshop article.clanek,
    main.clanky article.clanek,
    main.nastaveni article.clanek,
    main.workbook article.clanek,
    main.jondu article.clanek {
        width: 100%;
    }
    /* ztmaveni obsahu za vysunutym menu, klepnutim se menu zavre */
    body.menu_otevrene::after {
        content: "";
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 8;
    }
    /* hlavicka musi zustat nad ztmavenim, aby slo menu zavrit krizkem */
    header.hlavicka {
        position: relative;
        z-index: 11;
    }
    /* Prepinac aplikaci se pri otevreni presune na zacatek vysunuteho
       panelu (dela to prepni_mobilni_menu v int.js), aby byl panel
       jeden celek a nic se neprekryvalo. */
    aside.leve_menu .aplikace_obal {
        height: auto;
        background: rgba(0, 0, 0, 0.25);
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }
    aside.leve_menu .aplikace_obal .aplikace_obsah {
        width: 100%;
        padding: 0;
    }
    aside.leve_menu .aplikace_obal .aplikace_obsah ul {
        display: block;
        height: auto;
    }
    /* puvodni vzhled zalozek je vazany na header.hlavicka, takze
       po presunu do panelu je potreba ho nastavit znovu */
    aside.leve_menu .aplikace_obal .aplikace_obsah ul li a.aplikace {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        height: auto;
        padding: 12px 16px;
        border-left: 0;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        background: transparent;
        color: white;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.3px;
        text-transform: uppercase;
        text-decoration: none;
    }
    aside.leve_menu .aplikace_obal .aplikace_obsah ul li a.aplikace::before {
        width: 16px;
        height: 16px;
        margin-right: 10px;
        vertical-align: 0;
        background-color: #7ec2ff;
        opacity: 1;
    }
    aside.leve_menu .aplikace_obal .aplikace_obsah ul li a.aplikace.aktivni {
        background: #389df9;
    }
    aside.leve_menu .aplikace_obal .aplikace_obsah ul li a.aplikace.aktivni::before {
        background-color: white;
    }
    /* sloupcove bloky pres celou sirku */
    .obal_sekci section.box_30,
    .obal_sekci section.box_33,
    .obal_sekci section.box_50,
    .obal_sekci section.box_70,
    .box_30,
    .box_33,
    .box_50,
    .box_70 {
        width: 100%;
    }
    /* vetsi plochy na dotyk */
    aside.leve_menu ul.navigace li.karta ul.submenu li a {
        padding: 10px 15px;
    }
    main.clanky aside.leve_menu ul.clanky_vypis li a {
        padding: 7px 3px 7px 11px;
    }
    main.clanky aside.leve_menu h4.hl_stranka a {
        padding: 10px;
    }
}


/* --------------- -TABULKY V NOVEM VZHLEDU ------------------------------*/


/* Vse je schvalne omezene na main.new_style (eshop, clanky, nastaveni),
   aby se to nedotklo starsich aplikaci, ktere sdileji zakladni pravidla
   pro table v hornich radcich souboru. */

main.new_style table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12.5px;
    color: #33465e;
}


/* hlavicka - misto holeho textu prouzek, ktery drzi pri scrollovani */

main.new_style table tr th {
    position: sticky;
    top: 0;
    z-index: 2;
    box-sizing: border-box;
    padding: 11px 12px;
    border: 0;
    border-bottom: 1px solid #d7e0ea;
    background: #eef3f9;
    color: #5b6b80;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    line-height: 1.3;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

main.new_style table tr th:first-child {
    border-top-left-radius: 7px;
}

main.new_style table tr th:last-child {
    border-top-right-radius: 7px;
}


/* Bunky bez mrizky - staci linka pod radkem. Plna mrizka delala
   z vypisu excelovy list a hure se v ni cetlo. */

main.new_style table tr td {
    box-sizing: border-box;
    padding: 9px 12px;
    border: 0;
    border-bottom: 1px solid #edf1f6;
    vertical-align: middle;
}


/* zebra pryc, misto ni zvyrazneni radku pod mysi */

main.new_style table tr:nth-of-type(even) {
    background: transparent;
}

main.new_style table.vypis tr:hover td {
    background: #f4f9ff;
}


/* radek s filtrem */

main.new_style table tr#filtr_prod td,
main.new_style table tr#filtr_obj td,
main.new_style table tr#filtr_zak td,
main.new_style table tr#filtr_fak td {
    padding: 8px 10px;
    background: #f8fafc;
    border-bottom: 1px solid #e3e9f0;
}

main.new_style table tr#filtr_prod:hover td,
main.new_style table tr#filtr_obj:hover td,
main.new_style table tr#filtr_zak:hover td,
main.new_style table tr#filtr_fak:hover td {
    background: #f8fafc;
}


/* formularove prvky v tabulce maji jednu vysku i jeden tvar */

main.new_style table input[type="text"],
main.new_style table input[type="number"],
main.new_style table input[type="search"],
main.new_style table input[type="date"],
main.new_style table select {
    width: 100%;
    height: 30px;
    box-sizing: border-box;
    padding: 0 8px;
    border: 1px solid #d5dde7;
    border-radius: 6px;
    background: white;
    color: #33465e;
    font-size: 12.5px;
}

main.new_style table input:focus,
main.new_style table select:focus,
main.new_style table textarea:focus {
    outline: 0;
    border-color: #389df9;
    box-shadow: 0 0 0 3px rgba(56, 157, 249, 0.18);
}


/* nahled produktu */

main.new_style table td.td_obrazek {
    width: 64px;
    padding: 6px 12px;
}

main.new_style table td.td_obrazek figure.obrazek {
    width: 40px;
    height: 40px;
    margin: 0;
    overflow: hidden;
    border: 1px solid #e3e9f0;
    border-radius: 8px;
    background: #f0f3f7;
}

main.new_style table td.td_obrazek figure.obrazek a {
    display: block;
    height: 100%;
}

main.eshop table td.td_obrazek figure.obrazek img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}


/* nazev polozky */

main.new_style table td h4 {
    margin: 0;
    font-size: 13px;
}

main.new_style table td h4 a {
    color: #1c3d6b;
    font-weight: 600;
    text-decoration: none;
}

main.new_style table td h4 a:hover {
    color: #389df9;
    text-decoration: underline;
}


/* bunky, ktere se daji prepnout na editaci klepnutim */

main.new_style table td.switch {
    cursor: pointer;
    white-space: nowrap;
}

main.new_style table td.switch:hover span {
    color: #1b7fd4;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}


/* prepinac aktivni / neaktivni */

main.new_style td a.aktivni {
    position: relative;
    width: 38px;
    height: 20px;
    border-radius: 20px;
    background: #c6ced9;
    transition: background .15s ease;
}

main.new_style td a.aktivni::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    transition: left .15s ease;
}

main.new_style td a.aktivni.ano {
    background: #3ecf6d !important;
}

main.new_style td a.aktivni.ano::after {
    left: 20px;
}

main.new_style td a.aktivni.ne {
    background: #e8596b !important;
}


/* Stitek. Barvu drzela cela bunka a protoze uz mezi radky nejsou
   linky, slevaly se obarvene bunky do jednoho velkeho bloku.
   Barva proto sedi na samotnem selectu. */

main.new_style table td[class^="stitek_"],
main.new_style table td[class*=" stitek_"] {
    background: transparent !important;
}

main.new_style table td.stitek_1 select {
    background: #fdbdbd;
}

main.new_style table td.stitek_2 select {
    background: #ffeac4;
}

main.new_style table td.stitek_3 select {
    background: #baffba;
}

main.new_style table td.stitek_4 select {
    background: #bad8ff;
}

main.new_style table td[class^="stitek_"] select,
main.new_style table td[class*=" stitek_"] select {
    border-color: rgba(0, 0, 0, 0.12);
    font-weight: 600;
}


/* Sloupec s id a nahledem si bere jen tolik, kolik potrebuje -
   jinak jim prohlizec rozdeli volne misto stejne jako nazvu. */

main.new_style table.vypis th:first-child,
main.new_style table.vypis td:first-child {
    width: 1%;
    white-space: nowrap;
}


/* mezera mezi cenou a menou */

main.new_style table td.switch span+span {
    margin-left: 3px;
}


/* stav objednavky jako stitek, ne jako obarvena bunka pres celou vysku */

main.new_style .vypis_objednavek td.stav {
    padding: 6px 10px;
    background: transparent;
}

main.new_style .vypis_objednavek td.stav span {
    display: inline-block;
    width: auto;
    min-width: 110px;
    padding: 4px 12px;
    border-radius: 20px;
    background: #eceff3;
    font-size: 11.5px;
    white-space: nowrap;
}

main.new_style .vypis_objednavek td.stav.stav_4 span {
    background: #d0ffd0;
}

main.new_style .vypis_objednavek td.stav.stav_16 span,
main.new_style .vypis_objednavek td.stav.stav_5 span {
    background: #69f169;
}

main.new_style .vypis_objednavek td.stav.stav_6 span {
    background: #ff5d5d;
}

main.new_style .vypis_objednavek td.stav.stav_0 span {
    background: #6ce6eb;
}


/* ikony akci - byly skoro neviditelne (opacity 0.3) */

main.new_style table td.editace {
    white-space: nowrap;
}

main.new_style .editace a {
    width: 26px;
    height: 26px;
    margin: 0 1px;
    border-radius: 6px;
    background-size: 15px 15px !important;
    opacity: 0.55;
    transition: background-color .15s ease, opacity .15s ease;
}

main.new_style .editace a:hover {
    background-color: #e1eefc !important;
    opacity: 1;
}


/* Obal vypisu je karta a tabulka v ni sedi na doraz.
   Scrolluje primo sekce (ne cely article), aby se lepila hlavicka
   tabulky - position: sticky se vztahuje k nejblizsimu scrollujicimu
   rodici, a tim je diky overflow: auto prave sekce. Vysku ji da flex
   sloupec v article, takze tu neni zadne natvrdo napsane cislo. */

main.new_style article.clanek:has(>section.vypis_produktu),
main.new_style article.clanek:has(>section.vypis_objednavek),
main.new_style article.clanek:has(>section.vypis_zakazniku),
main.new_style article.clanek:has(>section.vypis_faktur) {
    display: flex;
    flex-direction: column;
}

main.new_style section.vypis_produktu,
main.new_style section.vypis_objednavek,
main.new_style section.vypis_zakazniku,
main.new_style section.vypis_faktur {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
    overflow: auto;
}


/* Tlacitka nad vypisem zustavaji vlevo - jinak by je ve flex sloupci
   vycentroval globalni "* { margin: 0 auto }". */

main.new_style article.clanek:has(>section.vypis_produktu)>*,
main.new_style article.clanek:has(>section.vypis_objednavek)>*,
main.new_style article.clanek:has(>section.vypis_zakazniku)>*,
main.new_style article.clanek:has(>section.vypis_faktur)>* {
    margin-left: 0;
    margin-right: 0;
}

main.new_style article.clanek>ul.rozcesti,
main.new_style article.clanek>a.btn,
main.new_style article.clanek>a.tlacitko,
main.new_style article.clanek>div.obal_odkazu_hl {
    align-self: flex-start;
}


/* Bez tohoto by se lista s tlacitky ve flex sloupci smrskla.
   ul.rozcesti ma overflow: hidden (kvuli zaoblenym rohum) a takovy
   prvek ma automatickou minimalni velikost 0, takze ho flex klidne
   stlaci pod vysku obsahu. Rust ma jen sekce s vypisem. */

main.new_style article.clanek>h2,
main.new_style article.clanek>h3,
main.new_style article.clanek>ul.rozcesti,
main.new_style article.clanek>a.btn,
main.new_style article.clanek>a.tlacitko,
main.new_style article.clanek>div.obal_odkazu_hl {
    flex: 0 0 auto;
}


/* na uzkem displeji jsou tlacitka pres celou sirku */

@media screen and (max-width: 860px) {
    main.new_style article.clanek>ul.rozcesti {
        align-self: stretch;
    }
}


/* zpusob platby jako stitek, stejne jako stav objednavky */

main.new_style .vypis_objednavek td.platba {
    padding: 6px 10px;
}

main.new_style .vypis_objednavek td.platba span {
    display: inline-block;
    width: auto;
    padding: 4px 12px;
    border-radius: 20px;
    background: #eef1f5;
    color: #55677f;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}


/* strankovani */

main.new_style div.strankovani {
    padding: 18px 0 40px;
}

main.new_style div.strankovani ul li a {
    min-width: 32px;
    padding: 6px 11px;
    border: 1px solid #dfe6ee;
    border-radius: 7px;
    color: #45597a;
    font-size: 12.5px;
    text-align: center;
    transition: background .15s ease, border-color .15s ease;
}

main.new_style div.strankovani ul li a:hover {
    border-color: #389df9;
    background: #eef6ff;
    color: #1b7fd4;
}

main.new_style div.strankovani ul li a.active {
    border-color: #389df9;
    background: #389df9;
    color: white;
}

main.new_style .prod_celkem {
    display: block;
    margin-top: 12px;
    color: #7c8ca2;
    font-size: 12px;
}


/* Na uzkem displeji se tabulka nesmi smackat - radeji se posouva
   do stran. Zakladni pravidlo to resi pro table tr td, ale to je
   min konkretni nez pravidla vyse, takze se musi zopakovat. */

@media screen and (max-width: 900px) {
    main.new_style table tr td {
        white-space: nowrap;
        padding: 8px 10px;
    }
    main.new_style table tr td.stav span {
        min-width: 0;
    }
}


/* --------------- -FORMULARE V NOVEM VZHLEDU ------------------------------*/


/* Jedna vyska, jeden tvar a viditelne zamereni pro vsechny vstupy.
   Zaskrtavatka a prepinace se schvalne nevyjmenovavaji. */

.new_style div.edit_row input[type="text"],
.new_style div.edit_row input[type="number"],
.new_style div.edit_row input[type="date"],
.new_style div.edit_row input[type="email"],
.new_style div.edit_row input[type="password"],
.new_style div.edit_row input[type="search"],
.new_style div.edit_row select,
.new_style div.edit_row textarea,
.new_style section.filtrovani_faktur input[type="text"],
.new_style section.filtrovani_faktur input[type="date"] {
    min-height: 36px;
    box-sizing: border-box;
    padding: 7px 11px;
    border: 1px solid #d5dde7;
    border-radius: 7px;
    background: white;
    color: #33465e;
    font-size: 13.5px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.new_style div.edit_row input:focus,
.new_style div.edit_row select:focus,
.new_style div.edit_row textarea:focus,
.new_style section.filtrovani_faktur input:focus {
    outline: 0;
    border-color: #389df9;
    box-shadow: 0 0 0 3px rgba(56, 157, 249, 0.18);
}


/* popisek jako stitek, zarovnany na prvni radek pole */

.new_style div.edit_row {
    align-items: flex-start;
    margin-bottom: 20px;
}

.new_style div.edit_row .info_col {
    padding-top: 4px;
}

.new_style div.edit_row label,
section.filtrovani_faktur label {
    display: inline-block;
    padding: 7px 14px;
    border-radius: 7px;
    background: #eaf5ff;
    color: #4a6280;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
}


/* tlacitko vedle pole ma stejnou vysku jako pole */

.new_style div.edit_row .edit_col .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
}


/* zalozky editace */

main.eshop ul.rozcesti,
main.clanky ul.rozcesti {
    border: 1px solid #e0e7ef;
    box-shadow: 0 1px 2px rgba(20, 40, 80, 0.05);
}

main.eshop ul.rozcesti li a,
main.clanky ul.rozcesti li a {
    padding: 9px 28px;
    font-size: 13px;
    transition: background .15s ease, color .15s ease;
}

main.eshop ul.rozcesti li a:hover:not(.active),
main.clanky ul.rozcesti li a:hover:not(.active) {
    background: #f1f6fc;
    color: #1b7fd4;
}

/* na mobilu se s odsazenim 28 px treti zalozka (Kombinace) nevesla
   a overflow: hidden listy ji usekl - zalozky si sirku rozdeli */

@media screen and (max-width: 860px) {
    main.eshop ul.rozcesti li,
    main.clanky ul.rozcesti li {
        flex: 1 1 0;
        min-width: 0;
    }

    main.eshop ul.rozcesti li a,
    main.clanky ul.rozcesti li a {
        padding: 11px 4px;
        text-align: center;
        width: 100%;
    }
}

@media screen and (max-width: 400px) {
    main.eshop ul.rozcesti li a,
    main.clanky ul.rozcesti li a {
        font-size: 12px;
    }
}


/* Pridat variantu byla seda a pusobila jako zakazane tlacitko.
   Jako druhoradou akci ji lip vystihuje obrys nez sediva vypln. */

main.eshop a.btn.gray,
main.eshop a.pridat_variantu {
    background: white !important;
    border: 1px solid #bcd8f5;
    color: #1b7fd4 !important;
    filter: none;
    transition: background .15s ease, border-color .15s ease;
}

main.eshop a.btn.gray:hover,
main.eshop a.pridat_variantu:hover {
    background: #eef6ff !important;
    border-color: #389df9;
}


/* panel s ulozenim - na uzkem displeji se z nej dela lista dole,
   proto jen od 861 px vys */

@media screen and (min-width: 861px) {
    main.eshop .editace_prod_obal .obal_odkazu_save {
        display: flex;
        align-items: center;
        box-sizing: border-box;
        margin-top: 14px;
        padding: 12px;
        border: 1px solid #e0e7ef;
        border-radius: 10px;
        background: white;
        box-shadow: 0 1px 3px rgba(20, 40, 80, 0.05);
    }
    main.eshop .editace_prod_obal .obal_odkazu_save a.btn.ulozit {
        flex: 1 1 auto;
        margin-right: 0;
        text-align: center;
    }
}


/* --------------- -DETAIL OBJEDNAVKY V NOVEM VZHLEDU -----------------*/
/* Hlavicka detailu: odkaz zpet na vypis, cislo objednavky, stitek stavu,
   datum a celkova cena na jednom radku. Drive tu byl jen holy nadpis a
   z detailu objednavky nevedla zadna cesta zpet. */

main.new_style .hlavicka_objednavky {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

/* globalni * { margin: 0 auto } by prvky hlavicky rozhodilo po celem radku */
main.new_style .hlavicka_objednavky>* {
    margin: 0;
}

main.new_style .hlavicka_objednavky h2.nadpis_apky {
    padding: 0;
}

main.new_style .hlavicka_objednavky .zpet_odkaz {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 30px;
    padding: 0 13px 0 10px;
    border: 1px solid #d7e0ea;
    border-radius: 7px;
    background: white;
    color: #5b6b80;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

main.new_style .hlavicka_objednavky .zpet_odkaz::before {
    width: 15px;
    height: 15px;
    margin-right: 6px;
    opacity: 0.7;
}

main.new_style .hlavicka_objednavky .zpet_odkaz:hover {
    border-color: #389df9;
    background: #f4f9ff;
    color: #1d7fd8;
}

main.new_style .hlavicka_objednavky .obj_stav {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 20px;
    background: #eceff3;
    color: #33465e;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
}

/* stejne barvy stavu jako ve vypisu objednavek */
main.new_style .hlavicka_objednavky .obj_stav.stav_4 {
    background: #d0ffd0;
}

main.new_style .hlavicka_objednavky .obj_stav.stav_16,
main.new_style .hlavicka_objednavky .obj_stav.stav_5 {
    background: #69f169;
}

main.new_style .hlavicka_objednavky .obj_stav.stav_6 {
    background: #ff5d5d;
}

main.new_style .hlavicka_objednavky .obj_stav.stav_0 {
    background: #6ce6eb;
}

main.new_style .hlavicka_objednavky .obj_meta {
    color: #7b8a9c;
    font-size: 13px;
}

main.new_style .hlavicka_objednavky .obj_cena {
    margin-left: auto;
    color: #33465e;
    font-size: 18px;
    font-weight: 700;
}

/* karty detailu - trochu vic vzduchu nez zakladnich 10px */
main.new_style .editace_objednavky_obal section {
    padding: 16px 18px;
}

main.new_style .editace_objednavky_obal .bloky {
    gap: 20px;
}

main.new_style .editace_objednavky_obal .bloky .levy_blok,
main.new_style .editace_objednavky_obal .bloky .pravy_blok {
    width: calc(50% - 10px);
}

main.new_style .editace_objednavky_obal h3.nadpis_sekce {
    display: flex;
    align-items: center;
    margin-bottom: 14px;
    color: #33465e;
    font-size: 15px;
}

main.new_style .editace_objednavky_obal h3.nadpis_sekce::before {
    width: 17px;
    height: 17px;
    opacity: 0.45;
}

main.new_style .editace_objednavky_obal section.stav .vypis {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

main.new_style .editace_objednavky_obal section.stav .vypis>* {
    margin: 0;
}

main.new_style .editace_objednavky_obal section.stav select {
    flex: 1 1 180px;
    min-width: 0;
}

main.new_style .editace_objednavky_obal section.faktura .btn {
    margin-right: 8px;
}

main.new_style .editace_objednavky_obal .vypis.adresa p {
    margin: 0 0 2px;
    line-height: 1.55;
}


/* zakaznik a doprava s platbou - jmeno s inicialami, udaje po radcich
   s ikonou; e-mail, telefon a adresu jde zkopirovat jednim klepnutim */

main.new_style .editace_objednavky_obal .zakaznik_hlavicka {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
}

main.new_style .editace_objednavky_obal .zakaznik_hlavicka .avatar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #4059b9 0%, #10284c 100%);
    color: white;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

main.new_style .editace_objednavky_obal .zakaznik_hlavicka .jmeno_obal {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
}

main.new_style .editace_objednavky_obal .zakaznik_hlavicka .jmeno {
    color: #10284c;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
}

main.new_style .editace_objednavky_obal .zakaznik_hlavicka a.jmeno:hover {
    color: #1b7fd4;
    text-decoration: underline;
}

main.new_style .editace_objednavky_obal .zakaznik_hlavicka .firma {
    color: #6b7c93;
    font-size: 13px;
}

main.new_style .editace_objednavky_obal ul.udaje_radky {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

main.new_style .editace_objednavky_obal ul.udaje_radky li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 8px 10px;
    border-radius: 10px;
    background: #f6f9fc;
}

main.new_style .editace_objednavky_obal ul.udaje_radky .ikona {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 0;
    border-radius: 9px;
    background: #e8f2fe;
    color: #1b7fd4;
}

main.new_style .editace_objednavky_obal ul.udaje_radky .ikona::before {
    width: 17px;
    height: 17px;
    margin: 0;
    opacity: 1;
}

main.new_style .editace_objednavky_obal ul.udaje_radky .udaj {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    color: #33465e;
    font-size: 14px;
    line-height: 1.4;
    overflow-wrap: break-word;
}

main.new_style .editace_objednavky_obal .zakaznik_hlavicka .jmeno_obal>*,
main.new_style .editace_objednavky_obal ul.udaje_radky .udaj>* {
    margin: 0;
}

main.new_style .editace_objednavky_obal ul.udaje_radky .popisek {
    color: #90a0b2;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

main.new_style .editace_objednavky_obal ul.udaje_radky .udaj a {
    color: #1b7fd4;
    font-weight: 600;
    text-decoration: none;
}

main.new_style .editace_objednavky_obal ul.udaje_radky .udaj a:hover {
    text-decoration: underline;
}

main.new_style .editace_objednavky_obal ul.udaje_radky .udaj b {
    color: #10284c;
    font-weight: 600;
}

main.new_style .editace_objednavky_obal ul.udaje_radky li.nevyplneno .udaj span:last-child {
    color: #90a0b2;
    font-style: italic;
}

main.new_style .editace_objednavky_obal ul.udaje_radky li.nevyplneno .ikona {
    background: #eef1f5;
    color: #90a0b2;
}

/* kopirovani se ukaze az na najeti mysi, na dotykovem displeji porad */

main.new_style .editace_objednavky_obal ul.udaje_radky .kopirovat {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #90a0b2;
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s ease, background .15s ease, color .15s ease;
}

main.new_style .editace_objednavky_obal ul.udaje_radky li:hover .kopirovat,
main.new_style .editace_objednavky_obal ul.udaje_radky .kopirovat:focus-visible {
    opacity: 1;
}

main.new_style .editace_objednavky_obal ul.udaje_radky .kopirovat:hover {
    background: #e8f2fe;
    color: #1b7fd4;
}

main.new_style .editace_objednavky_obal ul.udaje_radky .kopirovat::before {
    width: 15px;
    height: 15px;
    margin: 0;
}

main.new_style .editace_objednavky_obal ul.udaje_radky .kopirovat.zkopirovano {
    opacity: 1;
    background: #e6f6ec;
    color: #1f9d55;
}

main.new_style .editace_objednavky_obal ul.udaje_radky .kopirovat.zkopirovano::after {
    content: "Zkopírováno";
    position: absolute;
    top: 50%;
    right: calc(100% + 6px);
    transform: translateY(-50%);
    padding: 3px 8px;
    border-radius: 6px;
    background: #10284c;
    color: white;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

@media (hover: none) {
    main.new_style .editace_objednavky_obal ul.udaje_radky .kopirovat {
        opacity: 1;
    }
}

main.new_style .editace_objednavky_obal ul.udaje_radky .cena {
    flex: 0 0 auto;
    margin: 0;
    color: #10284c;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

main.new_style .editace_objednavky_obal ul.udaje_radky .cena.zdarma {
    padding: 2px 9px;
    border-radius: 999px;
    background: #e6f6ec;
    color: #1f9d55;
    font-size: 12px;
}

/* vedle sebe maji zakaznik a doprava smysl az na sirokem monitoru -
   na notebooku by kazdy dostal kolem 250 px a adresa by se lamala */

@media (max-width: 1600px) {
    main.new_style .editace_objednavky_obal .levy_blok .bloky>.box_50 {
        width: 100%;
    }
}

/* hlaska u prazdne tabulky - driv se vypsala jen hlavicka bez radku */
main.new_style .prazdny_vypis {
    margin: 0;
    padding: 14px 0 4px;
    color: #90a0b2;
    font-size: 13px;
    font-style: italic;
}

/* Zasilkovna: karta byla cela sytove cervena a prehlusila zbytek detailu.
   Znacka zustava poznat pres cerveny pruh a nadpis, obsah je citelny. */
main.new_style .editace_objednavky_obal section.zasilkovna {
    border: 1px solid #f0d2d2;
    border-left: 4px solid #cb0000;
    background: white;
    color: #33465e;
}

main.new_style .editace_objednavky_obal section.zasilkovna h3.nadpis_sekce {
    color: #cb0000;
}

main.new_style .editace_objednavky_obal section.zasilkovna h3.nadpis_sekce::before {
    opacity: 0.8;
}

main.new_style .editace_objednavky_obal section.zasilkovna th {
    border: 0;
    border-bottom: 1px solid #d7e0ea;
    background: #fdf3f3;
    color: #9a5555;
}

main.new_style .editace_objednavky_obal section.zasilkovna td {
    border: 0;
    border-bottom: 1px solid #edf1f6;
    background: transparent;
    color: #33465e;
}

main.new_style .editace_objednavky_obal section.zasilkovna .btn {
    background: #cb0000;
    color: white !important;
}

main.new_style .editace_objednavky_obal section.zasilkovna .btn:hover {
    background: #a80000;
    color: white !important;
}

main.new_style .editace_objednavky_obal section.zasilkovna .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
}

main.new_style .editace_objednavky_obal section.zasilkovna .row>* {
    margin: 0;
}

main.new_style .editace_objednavky_obal section.zasilkovna .row input {
    flex: 0 1 140px;
    min-width: 0;
}

/* rekapitulace - obrazek produktu a zvyrazneny soucet */
main.new_style .rekapitulace_table td {
    padding: 9px 8px;
}

main.new_style .rekapitulace_table td h3 {
    margin: 0;
    font-size: 13.5px;
}

main.new_style .rekapitulace_table tr:last-of-type td {
    border-bottom: 0;
    padding-top: 12px;
    font-size: 14px;
}

@media (max-width: 900px) {

    main.new_style .editace_objednavky_obal .bloky .levy_blok,
    main.new_style .editace_objednavky_obal .bloky .pravy_blok {
        width: 100%;
    }

    main.new_style .hlavicka_objednavky .obj_cena {
        margin-left: 0;
    }
}


/* --------------- -DIALOGY (jQuery UI) -------------------------------*/
/* Dialogy jely na zakladnim vzhledu jQuery UI - drobny prouzkovany
   titulek, systemove inputy a kriz z ikonoveho fontu. Tady dostavaji
   stejnou kartu jako zbytek administrace. Plati globalne, protoze
   dialogy jsou i v aplikacich bez tridy new_style (galerie). */

.ui-dialog {
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: #fbfcfd;
    box-shadow: 0 18px 50px rgba(15, 35, 65, 0.28);
    overflow: hidden;
    font-family: 'Open Sans', Roboto, sans-serif;
}

.ui-dialog .ui-dialog-titlebar {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 14px 18px;
    border: 0;
    border-bottom: 1px solid #e4ebf3;
    border-radius: 0;
    background: white;
    color: #33465e;
}

.ui-dialog .ui-dialog-title {
    float: none;
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

/* krizek - puvodne ikona z jquery-ui fontu, ktera se casto vubec nenacetla */
/* titulek je flex radek, takze krizek staci odstrcit doprava -
   absolutni pozicovani z jquery-ui by ho vysunulo mimo dialog */
.ui-dialog .ui-dialog-titlebar-close {
    position: static;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    margin: 0 0 0 auto;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: #8a9aad;
    cursor: pointer;
    /* v markupu tlacitka je i textovy uzel "Close", ktery nejde schovat
       selektorem - proto nulova velikost pisma a krizek az v ::before.
       text-indent nuluje jquery-ui pravidlo .ui-button-icon-only,
       ktere obsah tlacitka odsouva o 9999px mimo obrazovku. */
    font-size: 0;
    text-indent: 0;
    overflow: hidden;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.ui-dialog .ui-dialog-titlebar-close .ui-icon,
.ui-dialog .ui-dialog-titlebar-close .ui-button-icon-space {
    display: none;
}

.ui-dialog .ui-dialog-titlebar-close::before {
    content: "\00d7";
    display: block;
    font-size: 20px;
    line-height: 26px;
    text-align: center;
}

.ui-dialog .ui-dialog-titlebar-close:hover {
    border-color: #f2c2c8;
    background: #fdf2f3;
    color: #d34a5c;
}

.ui-dialog .ui-dialog-content {
    box-sizing: border-box;
    padding: 20px 18px;
    background: #fbfcfd;
    color: #33465e;
    font-size: 13.5px;
    /* delsi dialogy (editace obrazku) jinak prerostou obrazovku a jejich
       spodek vcetne tlacitka Ulozit neni videt. !important je nutne -
       jQuery UI si na obsah dialogu vypisuje inline max-height: none */
    max-height: calc(100vh - 150px) !important;
    overflow: auto;
}

.ui-widget-overlay {
    background: rgba(12, 26, 48, 0.45);
    opacity: 1;
}

/* --- formularova pole uvnitr dialogu --- */

/* formulare jsou v administraci globalne flex radky - v dialogu chceme
   pole pod sebou pres celou sirku, jinak se obsah smrskne a vycentruje */
.ui-dialog form {
    display: block;
    width: 100%;
    margin: 0;
}

.ui-dialog .pole {
    display: flex;
    flex-direction: column;
    margin-bottom: 18px;
}

.ui-dialog .pole label {
    margin: 0 0 6px;
    color: #5b6b80;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.ui-dialog .pole input[type="text"],
.ui-dialog .pole input[type="file"],
.ui-dialog .pole textarea,
.ui-dialog .pole select {
    box-sizing: border-box;
    width: 100%;
    min-height: 38px;
    margin: 0;
    padding: 8px 12px;
    border: 1px solid #d7e0ea;
    border-radius: 8px;
    background: white;
    color: #33465e;
    font-family: inherit;
    font-size: 13.5px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.ui-dialog .pole input:focus,
.ui-dialog .pole textarea:focus,
.ui-dialog .pole select:focus {
    outline: 0;
    border-color: #389df9;
    box-shadow: 0 0 0 3px rgba(56, 157, 249, 0.16);
}

/* vyber souboru jako plocha pro pretazeni - do galerie se da nahravat
   i tim, ze uzivatel obrazky pusti na okno */
.ui-dialog .pole input[type="file"] {
    height: auto;
    padding: 26px 16px;
    border: 1.5px dashed #c3d3e5;
    background: #f5f9fd;
    cursor: pointer;
}

.ui-dialog .pole input[type="file"]:hover {
    border-color: #389df9;
    background: #f0f7ff;
}

.ui-dialog .pole input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 7px 14px;
    border: 1px solid #d7e0ea;
    border-radius: 7px;
    background: white;
    color: #33465e;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.ui-dialog .pole input[type="file"]:hover::file-selector-button {
    border-color: #389df9;
    color: #1d7fd8;
}

.ui-dialog .pole .napoveda {
    margin: 6px 0 0;
    color: #90a0b2;
    font-size: 12px;
}

/* druhotne tlacitko v dialogu - aby v jednom okne nesoutezila dve stejne
   vyrazna modra tlacitka (napr. Pregenerovat nahledy vs. Ulozit) */
.ui-dialog .btn.gray {
    border: 1px solid #d7e0ea;
    background: white;
    color: #5b6b80 !important;
}

.ui-dialog .btn.gray:hover {
    border-color: #389df9;
    background: #f4f9ff;
    color: #1d7fd8 !important;
}

.ui-dialog .dialog_akce {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin: 0;
    padding-top: 4px;
}

.ui-dialog .dialog_akce>* {
    margin: 0;
}

.ui-dialog .prazdny_vypis {
    margin: 0 0 12px;
    color: #90a0b2;
    font-size: 13px;
    font-style: italic;
}

/* loader pri nahravani obrazku */
.ui-dialog .loader_obal {
    margin: 0;
    padding: 10px 0;
    text-align: center;
}

.ui-dialog .loader_obal figcaption {
    margin-top: 12px;
    color: #7b8a9c;
    font-size: 13px;
}


/* --------------- -DIALOG EDITACE OBRAZKU ----------------------------*/
/* Dvousloupcovy layout: nalevo nahled, napravo nazev a ctena metadata.
   Drive to byly tri tabulky pod sebou s modrymi hlavickami. */

.editace_obrazku .editace_obrazku_obal {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 20px;
}

.editace_obrazku .editace_obrazku_obal>* {
    margin: 0;
}

.editace_obrazku .nahled_obrazku {
    flex: 0 0 180px;
    max-width: 180px;
    margin: 0;
    padding: 8px;
    border: 1px solid #e4ebf3;
    border-radius: 10px;
    background: white;
}

.editace_obrazku .nahled_obrazku img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 220px;
    margin: 0;
    border-radius: 6px;
    object-fit: contain;
}

.editace_obrazku .udaje_obrazku {
    flex: 1 1 240px;
    min-width: 0;
}

.editace_obrazku .obr_data {
    margin: 0;
    padding: 12px 14px;
    border: 1px solid #e4ebf3;
    border-radius: 10px;
    background: white;
}

.editace_obrazku .obr_data .radek {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid #f1f5f9;
}

.editace_obrazku .obr_data .radek:last-of-type {
    border-bottom: 0;
}

.editace_obrazku .obr_data dt {
    margin: 0;
    color: #7b8a9c;
    font-size: 12.5px;
}

.editace_obrazku .obr_data dd {
    margin: 0;
    color: #33465e;
    font-size: 12.5px;
    font-weight: 600;
    text-align: right;
    word-break: break-word;
}

.editace_obrazku .miniatury {
    margin-bottom: 20px;
    padding-top: 16px;
    border-top: 1px solid #e4ebf3;
}

.editace_obrazku .miniatury h4 {
    display: flex;
    align-items: center;
    margin: 0 0 12px;
    color: #33465e;
    font-size: 13px;
}

.editace_obrazku .miniatury h4::before {
    width: 16px;
    height: 16px;
    opacity: 0.45;
}

.editace_obrazku .miniatury .soubory {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

.editace_obrazku .miniatury .soubor {
    display: inline-block;
    padding: 4px 10px;
    border: 1px solid #e0e7ef;
    border-radius: 20px;
    background: white;
    color: #5b6b80;
    font-size: 11.5px;
}

/* sekce pridane k editaci obrazku - uprava, vymena souboru a prehled,
   kde se obrazek na webu pouziva */
.editace_obrazku .uprava_obrazku,
.editace_obrazku .nahrazeni_souboru,
.editace_obrazku .pouziti_obrazku {
    margin-bottom: 20px;
    padding-top: 16px;
    border-top: 1px solid #e4ebf3;
}

.editace_obrazku .uprava_obrazku h4,
.editace_obrazku .nahrazeni_souboru h4,
.editace_obrazku .pouziti_obrazku h4 {
    display: flex;
    align-items: center;
    margin: 0 0 8px;
    color: #33465e;
    font-size: 13px;
}

.editace_obrazku .uprava_obrazku h4::before,
.editace_obrazku .nahrazeni_souboru h4::before,
.editace_obrazku .pouziti_obrazku h4::before {
    width: 16px;
    height: 16px;
    opacity: 0.45;
}

.editace_obrazku .uprava_obrazku .dialog_akce,
.editace_obrazku .nahrazeni_souboru {
    justify-content: flex-start;
}

.editace_obrazku .nahrazeni_souboru input[type="file"] {
    margin-bottom: 10px;
}

.editace_obrazku .vypis_pouziti {
    margin: 0;
    padding-left: 18px;
}

.editace_obrazku .vypis_pouziti li {
    margin-bottom: 4px;
    font-size: 13px;
}

.editace_obrazku .vypis_pouziti a {
    color: #1d7fd8;
}

.editace_obrazku .napoveda_inline {
    color: #90a0b2;
    font-size: 11.5px;
    font-weight: 400;
}

/* orez - vyber se kresli pres nahled */
.editace_obrazku .nahled_obrazku {
    position: relative;
}

.editace_obrazku .nahled_obrazku.rezim_orezu {
    cursor: crosshair;
    border-color: #389df9;
}

.editace_obrazku .nahled_obrazku.rezim_orezu img {
    user-select: none;
}

.editace_obrazku .orez_vyber {
    position: absolute;
    border: 2px dashed #389df9;
    background: rgba(56, 157, 249, 0.2);
    pointer-events: none;
}

@media (max-width: 560px) {

    .editace_obrazku .nahled_obrazku {
        flex: 1 1 100%;
        max-width: 100%;
    }

    /* na uzkem displeji by nahled zabral cely prvni pohled */
    .editace_obrazku .nahled_obrazku img {
        max-height: 150px;
    }

    .ui-dialog .dialog_akce {
        justify-content: stretch;
    }

    .ui-dialog .dialog_akce>* {
        flex: 1 1 auto;
        text-align: center;
    }
}


/* --------------- -NASTAVENI V NOVEM VZHLEDU -------------------------*/
/* Aplikace Nastaveni mela vlastni layout (vlastni topmenu, nadpis na
   stred, formular bez hodnot). Ted sdili strukturu s eshopem a clanky:
   nadpis aplikace v levem panelu, obsah jako karty. */

main.nastaveni h2.nadpis_apky,
main.workbook h2.nadpis_apky,
main.jondu h2.nadpis_apky {
    box-sizing: border-box;
    margin: 0 0 18px;
    text-align: left;
}

main.nastaveni aside.leve_menu,
main.workbook aside.leve_menu,
main.jondu aside.leve_menu {
    padding: 0;
    height: calc(100vh - 73px);
}

main.nastaveni aside.leve_menu h2.nadpis_apky,
main.workbook aside.leve_menu h2.nadpis_apky,
main.jondu aside.leve_menu h2.nadpis_apky {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    margin: 0;
    letter-spacing: 1px;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

main.nastaveni aside.leve_menu ul.navigace,
main.workbook aside.leve_menu ul.navigace,
main.jondu aside.leve_menu ul.navigace {
    padding: 12px 0;
}

main.nastaveni article.clanek,
main.workbook article.clanek,
main.jondu article.clanek {
    box-sizing: border-box;
    padding: 20px;
    overflow: auto;
}

main.nastaveni article.clanek>*,
main.workbook article.clanek>*,
main.jondu article.clanek>* {
    margin-left: 0;
    margin-right: 0;
}

main.nastaveni section,
main.workbook section,
main.jondu section {
    padding: 18px 20px;
    margin-bottom: 20px;
}

main.nastaveni h3.nadpis_sekce,
main.workbook h3.nadpis_sekce,
main.jondu h3.nadpis_sekce {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    color: #33465e;
    font-size: 15px;
}

main.nastaveni h3.nadpis_sekce::before,
main.workbook h3.nadpis_sekce::before,
main.jondu h3.nadpis_sekce::before {
    width: 17px;
    height: 17px;
    opacity: 0.45;
}

/* pole nemaji byt pres celou sirku obrazovky - na sirokem monitoru
   se to spatne cte */
main.nastaveni div.edit_row .edit_col input[type="text"],
main.workbook div.edit_row .edit_col input[type="text"],
main.jondu div.edit_row .edit_col input[type="text"],
main.nastaveni div.edit_row .edit_col select,
main.workbook div.edit_row .edit_col select,
main.jondu div.edit_row .edit_col select,
main.nastaveni div.edit_row .edit_col textarea,
main.workbook div.edit_row .edit_col textarea,
main.jondu div.edit_row .edit_col textarea {
    width: 100%;
    max-width: 460px;
}

main.nastaveni div.edit_row .edit_col textarea,
main.workbook div.edit_row .edit_col textarea,
main.jondu div.edit_row .edit_col textarea {
    min-height: 90px;
    resize: vertical;
}

main.nastaveni .napoveda_pole,
main.workbook .napoveda_pole,
main.jondu .napoveda_pole {
    display: block;
    max-width: 460px;
    margin-top: 6px;
    /* bez toho by globalni "* { margin: 0 auto }" nechal levy/pravy okraj
       na auto a napovedu by v 460px sirce vycentroval */
    margin-left: 0;
    text-align: left;
    color: #90a0b2;
    font-size: 12px;
}

main.nastaveni .hodnota_info,
main.workbook .hodnota_info,
main.jondu .hodnota_info {
    margin: 0;
    text-align: left;
    color: #5b6b80;
    font-size: 13px;
}

main.nastaveni .hodnota_info code,
main.workbook .hodnota_info code,
main.jondu .hodnota_info code {
    padding: 2px 6px;
    border-radius: 5px;
    background: #eef3f9;
    font-size: 12px;
}

/* stitky - jazyky portalu, opravneni uzivatele */
.stitky {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.stitky>* {
    margin: 0;
}

/* jeden stitek se pouziva i samostatne v bunce tabulky (napr. priznak
   aktivni u vlastnosti), proto neni vazany na obal .stitky */
.stitek {
    display: inline-block;
    padding: 3px 11px;
    border: 1px solid #dbe4ee;
    border-radius: 20px;
    background: #f4f8fc;
    color: #5b6b80;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.stitek.ano {
    border-color: #bfe8cd;
    background: #eafaf0;
    color: #2f9e5a;
}

.stitek.ne {
    border-color: #f0d4d8;
    background: #fdf2f3;
    color: #c2566a;
}

/* lista s ulozenim - stejna jako v eshopu, plus misto pro hlaseni */
main.nastaveni .obal_odkazu_save,
main.workbook .obal_odkazu_save,
main.jondu .obal_odkazu_save {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 40px;
}

main.nastaveni .obal_odkazu_save>*,
main.workbook .obal_odkazu_save>*,
main.jondu .obal_odkazu_save>* {
    margin: 0;
}

main.nastaveni .obal_odkazu_save .btn,
main.workbook .obal_odkazu_save .btn,
main.jondu .obal_odkazu_save .btn {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
}

main.nastaveni .stav_ulozeni,
main.workbook .stav_ulozeni,
main.jondu .stav_ulozeni {
    display: none;
    font-size: 13px;
    font-weight: 600;
}

main.nastaveni .stav_ulozeni.ok,
main.workbook .stav_ulozeni.ok,
main.jondu .stav_ulozeni.ok {
    color: #2f9e5a;
}

main.nastaveni .stav_ulozeni.chyba,
main.workbook .stav_ulozeni.chyba,
main.jondu .stav_ulozeni.chyba {
    color: #d34a5c;
}

main.nastaveni .prazdny_vypis,
main.workbook .prazdny_vypis,
main.jondu .prazdny_vypis {
    margin: 0;
    color: #90a0b2;
    font-size: 13px;
    font-style: italic;
}

@media (max-width: 980px) {

    /* vysku vysuvaciho panelu resi spolecne pravidlo pro vsechny tri
       aplikace vyse (position: fixed, top: 73px, bottom: 0) */

    main.nastaveni div.edit_row .edit_col input[type="text"],
    main.workbook div.edit_row .edit_col input[type="text"],
    main.jondu div.edit_row .edit_col input[type="text"],
    main.nastaveni div.edit_row .edit_col select,
    main.workbook div.edit_row .edit_col select,
    main.jondu div.edit_row .edit_col select,
    main.nastaveni div.edit_row .edit_col textarea,
    main.workbook div.edit_row .edit_col textarea,
    main.jondu div.edit_row .edit_col textarea {
        max-width: 100%;
    }
}

/* hlaska u sekci eshopu, ktere zatim nemaji obsah */
main.new_style section.nedokoncene {
    padding: 22px;
}

main.new_style .prazdny_vypis {
    margin: 0;
    color: #90a0b2;
    font-size: 13px;
    font-style: italic;
}


/* --------------- -STROMY (kategorie, adresare galerie) ---------------*/
/* Drive to byl jen seznam modrych pilulek pod sebou, bez naznaku toho,
   co je pod cim, a u velkeho eshopu se v nem neslo vyznat. Ted je to
   opravdovy strom: podstrom je vnoreny v <li>, vetev jde sbalit a
   spojovaci linka ukazuje zanoreni. Chovani resi inc/global_js.js. */

ul.strom,
ul.strom ul.podstrom {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.strom {
    margin-top: 4px;
}

ul.strom li.vetev {
    display: block;
    margin: 0;
    list-style: none;
}

/* odsazeni potomku plus linka, ktera je vizualne vaze k rodici */
ul.strom ul.podstrom {
    margin-left: 13px;
    padding-left: 16px;
    border-left: 1px solid #e2e9f1;
}

ul.strom li.vetev.zavreno>ul.podstrom {
    display: none;
}

ul.strom .radek {
    display: flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    min-height: 32px;
    padding: 2px 8px 2px 0;
    border-radius: 8px;
    transition: background .15s ease;
}

ul.strom .radek>* {
    margin: 0;
}

ul.strom .radek:hover {
    background: #f1f7ff;
}

/* sipka se ukazuje jen u vetvi, ktere maji potomky - misto si drzi vzdy,
   aby nazvy na stejne urovni zacinaly pod sebou */
ul.strom .prepinac {
    display: flex;
    flex: 0 0 18px;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    visibility: hidden;
    text-decoration: none;
}

ul.strom li.vetev.ma_potomky>.radek>.prepinac {
    visibility: visible;
}

ul.strom .prepinac:hover {
    background: #dceafd;
}

ul.strom .prepinac::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 5px solid #7b8a9c;
    transform: rotate(90deg);
    transition: transform .15s ease;
}

ul.strom li.vetev.zavreno>.radek>.prepinac::before {
    transform: rotate(0deg);
}

/* priznak aktivni / neaktivni kategorie */
ul.strom .radek span.aktivni {
    display: block;
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e8596b;
}

ul.strom .radek span.aktivni.ano {
    background: #3ecf6d;
}

ul.strom .radek a.nazev {
    display: flex;
    align-items: center;
    min-width: 0;
    color: #33465e;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

ul.strom .radek a.nazev::before {
    width: 15px;
    height: 15px;
    margin-right: 7px;
    opacity: 0.45;
}

ul.strom .radek a.nazev:hover {
    color: #1d7fd8;
}

ul.strom .radek .id_kategorie {
    color: #aab6c4;
    font-size: 11px;
}

/* ikony akci se ukazuji az nad radkem, jinak strom vypada zahlcene */
ul.strom .radek .editace {
    display: flex;
    margin-left: auto;
    opacity: 0;
    transition: opacity .15s ease;
}

ul.strom .radek:hover .editace,
ul.strom .radek:focus-within .editace {
    opacity: 1;
}

/* Vybrana vetev (soucasny adresar galerie, soucasna kategorie). Ma byt
   videt na prvni pohled - obnov_stromy() v inc/global_js.js k ni navic
   rozbali cestu a odscrolluje na ni. */

ul.strom li.vetev.vybrano>.radek {
    background: #e1eefc;
}

ul.strom li.vetev.vybrano>.radek a.nazev {
    color: #1a72c4;
    font-weight: 700;
}


/* V dialogu vyberu je vybrana vzdy jen jedna vetev, takze si muze dovolit
   i popisek. U produktu ve .vyber_kategorii jich je vybranych vic a maji
   vlastni stitky nad stromem, tam by to jen prekazelo. */

#dialog_okno ul.strom li.vetev.vybrano>.radek {
    box-shadow: inset 0 0 0 1px #9ecbf7;
}

#dialog_okno ul.strom li.vetev.vybrano>.radek::after {
    content: "vybráno";
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 999px;
    background: #389df9;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* hlavicka sekce s ovladanim stromu */
.hlavicka_sekce {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}

.hlavicka_sekce>* {
    margin: 0;
}

.hlavicka_sekce h3.nadpis_sekce {
    margin: 0;
}

.strom_ovladani {
    display: flex;
    gap: 10px;
    margin-left: auto;
}

.strom_ovladani a {
    color: #7b8a9c;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-decoration: none;
    text-transform: uppercase;
}

.strom_ovladani a:hover {
    color: #1d7fd8;
    text-decoration: underline;
}

@media (max-width: 560px) {

    /* na telefonu neni hover, takze ikony akci musi byt videt rovnou */
    ul.strom .radek .editace {
        opacity: 1;
    }

    ul.strom ul.podstrom {
        margin-left: 8px;
        padding-left: 10px;
    }
}

/* strom v dialogu muze byt dlouhy - at neroztahne okno pres cely displej */
.strom_obal {
    position: relative;
    max-height: 55vh;
    margin: 0;
    overflow: auto;
}


/* --------------- -PREPINAC ANO / NE ---------------------------------*/
/* Priznak "Aktivní" byl dvojice systemovych radio buttonu. Ted je to
   segmentovy prepinac - radia zustavaji v markupu (cte je JS pres
   #aktivni_ano) a jen se schovaji, takze funguje i klavesnice. */

.prepinac_ano_ne {
    display: inline-flex;
    box-sizing: border-box;
    padding: 3px;
    border: 1px solid #d7e0ea;
    border-radius: 10px;
    background: #eef3f9;
    /* Radia jsou position:absolute (skryta, ale dosazitelna tabem). Bez
       position:relative na obalu se pozicuji vuci vzdalenemu predku a
       fokus po kliknuti na popisek odscrolluje stranku pryc - prepinac
       pak vypada, ze nejde prepnout. Relative je drzi uvnitr prepinace. */
    position: relative;
}

.prepinac_ano_ne>* {
    margin: 0;
}

/* radio se neschovava pres display:none, aby zustalo dosazitelne tabem */
.prepinac_ano_ne input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

/* Druhy selektor je tu kvuli specificite - .new_style div.edit_row label
   nastavuje popiskum formulare modrou "pilulku" a bez nej by prebil
   vzhled prepinace. */
.prepinac_ano_ne label,
.new_style div.edit_row .prepinac_ano_ne label {
    display: inline-flex;
    background: transparent;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 84px;
    padding: 6px 16px;
    border: 1px solid transparent;
    border-radius: 7px;
    color: #7b8a9c;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2px;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

/* tecka pred popiskem drzi barvu stavu */
.prepinac_ano_ne label::before {
    content: "";
    display: block;
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    border-radius: 50%;
    background: #c6d0dc;
    transition: background .15s ease;
}

.prepinac_ano_ne label:hover,
.new_style div.edit_row .prepinac_ano_ne label:hover {
    color: #33465e;
}

.prepinac_ano_ne input[type="radio"]:checked+label,
.new_style div.edit_row .prepinac_ano_ne input[type="radio"]:checked+label {
    background: white;
    box-shadow: 0 1px 3px rgba(24, 48, 84, 0.14);
    color: #33465e;
}

.prepinac_ano_ne input#aktivni_ano:checked+label,
.new_style div.edit_row .prepinac_ano_ne input#aktivni_ano:checked+label {
    color: #2f9e5a;
}

.prepinac_ano_ne input#aktivni_ano:checked+label::before {
    background: #3ecf6d;
}

.prepinac_ano_ne input#aktivni_ne:checked+label,
.new_style div.edit_row .prepinac_ano_ne input#aktivni_ne:checked+label {
    color: #c2566a;
}

.prepinac_ano_ne input#aktivni_ne:checked+label::before {
    background: #e8596b;
}

.prepinac_ano_ne input[type="radio"]:focus-visible+label {
    border-color: #389df9;
    box-shadow: 0 0 0 3px rgba(56, 157, 249, 0.18);
}

@media (max-width: 560px) {

    .prepinac_ano_ne {
        width: 100%;
    }

    .prepinac_ano_ne label {
        flex: 1 1 50%;
        min-width: 0;
    }
}


/* --------------- -ZARAZENI PRODUKTU DO KATEGORII --------------------*/
/* Puvodne jeden dlouhy sloupec zaskrtavatek pres nekolik obrazovek.
   Ted je to strom ve scrollovacim boxu s filtrem a prehledem vyberu. */

.vyber_kategorii {
    box-sizing: border-box;
    width: 100%;
    max-width: 520px;
    border: 1px solid #d7e0ea;
    border-radius: 10px;
    background: white;
    overflow: hidden;
}

.vyber_kategorii>* {
    margin: 0;
}

.vyber_kategorii .vyber_hlavicka {
    display: flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    padding: 10px 12px;
    border-bottom: 1px solid #e4ebf3;
    background: #f7fafd;
}

.vyber_kategorii .vyber_hlavicka>* {
    margin: 0;
}

.vyber_kategorii #filtr_kategorii {
    flex: 1 1 auto;
    box-sizing: border-box;
    min-width: 0;
    min-height: 32px;
    padding: 5px 12px;
    border: 1px solid #d7e0ea;
    border-radius: 7px;
    background: white;
    font-size: 13px;
}

.vyber_kategorii #filtr_kategorii:focus {
    outline: 0;
    border-color: #389df9;
    box-shadow: 0 0 0 3px rgba(56, 157, 249, 0.16);
}

.vyber_kategorii .pocet_vybranych {
    flex: 0 0 auto;
    color: #7b8a9c;
    font-size: 12px;
    white-space: nowrap;
}

.vyber_kategorii .pocet_vybranych b {
    color: #33465e;
}

.vyber_kategorii .zrusit_vyber {
    flex: 0 0 auto;
    color: #7b8a9c;
    font-size: 11.5px;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}

.vyber_kategorii .zrusit_vyber:hover {
    color: #c2566a;
    text-decoration: underline;
}

/* prehled zaskrtnutych kategorii - at je zarazeni videt bez scrollovani */
.vyber_kategorii .vybrane_stitky {
    display: none;
    flex-wrap: wrap;
    gap: 6px;
    box-sizing: border-box;
    padding: 10px 12px;
    border-bottom: 1px solid #e4ebf3;
    background: #fbfdff;
}

.vyber_kategorii .vybrane_stitky .stitek_kategorie {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 4px 6px 4px 11px;
    border: 1px solid #bcdcfd;
    border-radius: 20px;
    background: #e8f3ff;
    color: #1d6fc0;
    font-size: 12px;
    font-weight: 600;
}

.vyber_kategorii .vybrane_stitky .stitek_kategorie a.odebrat {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin: 0;
    border-radius: 50%;
    background: rgba(29, 111, 192, 0.14);
    color: #1d6fc0;
    font-size: 13px;
    line-height: 1;
    text-decoration: none;
}

.vyber_kategorii .vybrane_stitky .stitek_kategorie a.odebrat:hover {
    background: #d34a5c;
    color: white;
}

.vyber_kategorii #vypis_kategorii_check {
    box-sizing: border-box;
    max-height: 320px;
    padding: 8px 12px 12px;
}

/* radek se zaskrtavatkem */
.vyber_kategorii ul.strom .radek input[type="checkbox"] {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: #389df9;
    cursor: pointer;
}

.vyber_kategorii ul.strom .radek label,
.new_style div.edit_row .vyber_kategorii ul.strom .radek label {
    display: block;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: #33465e;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.3;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vyber_kategorii ul.strom li.vetev.vybrano>.radek {
    background: #eaf4ff;
}

.vyber_kategorii ul.strom li.vetev.vybrano>.radek label,
.new_style div.edit_row .vyber_kategorii ul.strom li.vetev.vybrano>.radek label {
    color: #1d6fc0;
    font-weight: 700;
}

/* tecka u sbalene vetve, ve ktere je neco zaskrtnuteho */
.vyber_kategorii ul.strom .radek .vnorene_vybrane {
    display: none;
    flex: 0 0 6px;
    width: 6px;
    height: 6px;
    margin-left: 4px;
    border-radius: 50%;
    background: #389df9;
}

.vyber_kategorii ul.strom li.vetev.ma_vybrane_potomky.zavreno>.radek .vnorene_vybrane {
    display: block;
}

/* filtrovani */
.vyber_kategorii ul.strom li.vetev.skryto {
    display: none;
}

.vyber_kategorii ul.strom li.vetev.nalezeno>.radek label {
    color: #1d6fc0;
}

@media (max-width: 860px) {

    .vyber_kategorii {
        max-width: 100%;
    }

    .vyber_kategorii .vyber_hlavicka {
        flex-wrap: wrap;
    }

    .vyber_kategorii #filtr_kategorii {
        flex: 1 1 100%;
    }
}


/* --------------- -ESHOP: EMAILY, STATISTIKY, KOSIKY ------------------*/
/* Dlazdice, sloupcovy graf a radek s filtry. Stejne komponenty ma
   aplikace Jondu CMS ve svem jondu.css, ta ale bezi napric portaly a
   sve styly si nese s sebou - eshop zadny vlastni css soubor nema a
   vsechno ma tady, proto je maji obe aplikace zvlast. */


/* Globalni "* { margin: 0 auto }" z hlavicky souboru by obsah flexovych
   obalu vycentroval - uvnitr techto komponent se margin vraci na nulu. */

main.eshop .dlazdice_obal>*,
main.eshop .dlazdice>*,
main.eshop .filtr_radek>*,
main.eshop .graf>*,
main.eshop .graf .sloupec>* {
    margin-left: 0;
    margin-right: 0;
}


/* ---------- dlazdice s cisly (statistiky) ---------- */

main.eshop .dlazdice_obal {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

main.eshop .dlazdice {
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    flex: 1 1 150px;
    min-width: 150px;
    padding: 14px 16px;
    background: #f6f9fd;
    border: 1px solid #e3ecf6;
    border-radius: 9px;
    text-decoration: none;
}

main.eshop a.dlazdice:hover {
    background: #eaf3fd;
    border-color: #bcd8f3;
}

main.eshop .dlazdice .cislo {
    display: block;
    color: #1f3151;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    /* dlouhe castky se nesmi rozlezt mimo dlazdici */
    word-break: break-word;
}

main.eshop .dlazdice .nazev {
    display: block;
    margin-top: 4px;
    color: #4d6180;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

main.eshop .dlazdice .popis {
    display: block;
    margin-top: 2px;
    color: #90a2bb;
    font-size: 11px;
}


/* ---------- sloupcovy graf ---------- */
/* Vysku sloupce nastavuje PHP inline v procentech, tady je jen ramec. */

main.eshop .graf {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 200px;
    padding-top: 18px;
    overflow-x: auto;
}

main.eshop .graf .sloupec {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    flex: 1 1 0;
    min-width: 26px;
    /* u par sloupcu (kratke obdobi) by se jinak kazdy roztahl pres pul
       obrazovky a graf by vypadal jako dva barevne obdelniky */
    max-width: 90px;
    height: 100%;
}

main.eshop .graf .pruh {
    display: block;
    width: 100%;
    min-height: 2px;
    background: linear-gradient(180deg, #58a9f3 0%, #3a75ab 100%);
    border-radius: 4px 4px 0 0;
    transition: background .15s ease;
}

main.eshop .graf .sloupec:hover .pruh {
    background: #1f3151;
}

/* Hodnota nad sloupcem se ukaze az pri najeti - u 30 dnu by se cisla
   prekryvala a graf by byl necitelny. */
main.eshop .graf .hodnota {
    display: block;
    margin-bottom: 3px;
    color: #4d6180;
    font-size: 10px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity .15s ease;
}

main.eshop .graf .sloupec:hover .hodnota {
    opacity: 1;
}

main.eshop .graf .popisek {
    display: block;
    margin-top: 4px;
    color: #90a2bb;
    font-size: 10px;
    white-space: nowrap;
}


/* ---------- radek s filtry nad vypisem ---------- */

main.eshop .filtr_radek {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

main.eshop .filtr_radek input,
main.eshop .filtr_radek select {
    width: auto;
    min-width: 140px;
    margin: 0;
}

main.eshop .filtr_radek .oddelovac {
    color: #90a2bb;
    font-size: 12px;
}

main.eshop .filtr_radek .btn {
    margin: 0;
}

/* prepinac obdobi sedi nad kartou sekce, ne uvnitr ni */
main.eshop article.clanek>.filtr_radek {
    margin-left: 0;
    margin-right: 0;
}


/* ---------- vypisy s vlastnim strankovanim ---------- */
/* Strankovani ma padding pocitany na vypis pres celou stranku, tady je
   hned pod kartou sekce a tolik mista pod sebou nepotrebuje. */

main.eshop section .strankovani {
    padding: 1.5em 0 0.5em;
}

main.eshop .strankovani ul li span.mezera {
    display: block;
    box-sizing: border-box;
    padding: 5px 4px;
    color: #90a2bb;
}


/* ---------- nahled odeslaneho e-mailu v dialogu ---------- */
/* Dialog jQuery UI se presouva do body, takze se nedaji vazat na
   main.eshop - selektory jsou proto bez neho, vcetne resetu marginu. */

.nahled_mailu .hlavicka_mailu {
    margin-bottom: 14px;
    padding: 12px 14px;
    background: #f6f9fd;
    border: 1px solid #e3ecf6;
    border-radius: 8px;
}

.nahled_mailu .hlavicka_mailu .radek {
    display: flex;
    gap: 10px;
    padding: 2px 0;
    font-size: 13px;
}

.nahled_mailu .hlavicka_mailu .popisek {
    flex: 0 0 90px;
    color: #90a2bb;
}

.nahled_mailu .hlavicka_mailu .hodnota {
    color: #33465e;
    word-break: break-word;
}

.nahled_mailu>*,
.nahled_mailu .hlavicka_mailu>*,
.nahled_mailu .hlavicka_mailu .radek>* {
    margin-left: 0;
    margin-right: 0;
}

/* Telo mailu bezi v sandboxovanem iframu, aby jeho styly nesahaly
   na admin - vlastni vysku si tedy nenastavi a musi ji dostat tady. */
.nahled_mailu .telo_mailu {
    width: 100%;
    height: 60vh;
    background: white;
    border: 1px solid #e3ecf6;
    border-radius: 8px;
}


/* ---------- mobil ---------- */

@media screen and (max-width: 860px) {
    main.eshop .dlazdice {
        flex: 1 1 120px;
        min-width: 120px;
        padding: 10px 12px;
    }

    main.eshop .dlazdice .cislo {
        font-size: 19px;
    }

    main.eshop .filtr_radek input,
    main.eshop .filtr_radek select {
        flex: 1 1 100%;
        min-width: 0;
    }
}


/* --------------- -NOVA OBJEDNAVKA V NOVEM VZHLEDU -------------------*/
/* Modul zalozeni objednavky pouziva stejne karty jako detail objednavky
   (viz .editace_objednavky_obal vyse), tady se doladuji jen veci, ktere
   ma navic - radky polozek, formular rucni polozky a spodni lista akci. */

main.new_style .nova_objednavka article.produkt {
    border: 1px solid #e4eaf1;
    margin-top: 8px;
    padding: 8px 10px;
}

main.new_style .nova_objednavka article.produkt:first-of-type {
    margin-top: 0;
}

main.new_style .nova_objednavka article.produkt input,
main.new_style .nova_objednavka .novy_produkt input {
    min-height: 32px;
    font-size: 13px;
}

main.new_style .nova_objednavka .row input,
main.new_style .nova_objednavka .row textarea,
main.new_style .nova_objednavka select {
    font-size: 13px;
}

main.new_style .nova_objednavka .row textarea {
    padding: 8px 10px;
    border: 1px solid #d7e0ea;
    border-radius: 7px;
    font-family: 'Open Sans', Roboto, sans-serif;
    resize: vertical;
}

main.new_style .nova_objednavka .souhrn_objednavky td {
    border-bottom: 1px solid #edf1f6;
}

main.new_style .nova_objednavka .souhrn_objednavky td:nth-of-type(2) {
    color: #90a0b2;
    font-size: 12.5px;
    text-align: right;
}

main.new_style .nova_objednavka section.akce_objednavky {
    position: sticky;
    bottom: 0;
    z-index: 5;
    border-color: #d7e0ea;
    box-shadow: 0 -6px 18px rgba(15, 35, 65, 0.06);
}

@media (max-width: 900px) {

    main.new_style .nova_objednavka article.produkt,
    main.new_style .nova_objednavka .novy_produkt {
        flex-wrap: wrap;
    }

    main.new_style .nova_objednavka article.produkt .col.nazev {
        flex: 1 1 100%;
        margin-right: 0 !important;
    }

    main.new_style .nova_objednavka .btn.smazat_objednavku {
        margin-left: 0 !important;
    }
}

/* ---------------- MAPY (leaflet nad dlazdicemi mapy.com) ---------------- */

main.new_style .section.mapa_objednavek .obal_odkazu {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

main.new_style .section.mapa_objednavek .prod_celkem {
    margin: 0;
}

main.new_style #mapa_objednavek,
main.new_style #mapa {
    border: 1px solid #d7e0ea;
    border-radius: 4px;
}

main.new_style ul.legenda_mapy {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin: 10px 0 0 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    color: #55637a;
}

main.new_style ul.legenda_mapy li {
    display: flex;
    align-items: center;
    gap: 5px;
}

main.new_style ul.legenda_mapy img {
    width: 11px;
    height: auto;
}

.karta_objednavky h4 {
    margin: 0 0 6px 0;
    font-size: 14px;
}

.karta_objednavky p {
    margin: 0 0 3px 0;
}

.karta_objednavky .btn {
    display: inline-block;
    margin-top: 8px;
}

/* leaflet si sam nastavuje z-index, at nepreskakuje sticky listy adminu */
.leaflet-pane,
.leaflet-top,
.leaflet-bottom {
    z-index: 2;
}


/* --------------- -MOBILNI HLAVICKA A VYSOUVACI MENU ------------------------------*/


/* Prazdny panel pro aplikace bez leveho menu (galerie, kalendar ...).
   Vytvari ho prepni_mobilni_menu v int.js - bez nej se prepinac
   aplikaci vysypal primo do hlavicky pres logo. */

aside.leve_menu.mobilni_panel {
    display: none;
}

@keyframes vysun_menu {
    from {
        transform: translateX(100%);
    }
    to {
        transform: none;
    }
}

@keyframes ztmav_pozadi {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

    /* Tlacitka v hlavicce - misto plnych svetle modrych ikon (25 a 30 px)
       jemne pruhledne ctverecky s tenkou bilou ikonou uprostred. */

    header.hlavicka .header_obsah {
        height: 73px;
    }

    header.hlavicka div.odhlaseni {
        top: 0;
        right: 12px;
        bottom: 0;
        height: auto;
        gap: 6px;
    }

    header.hlavicka div.odhlaseni>* {
        margin: 0;
    }

    header.hlavicka div.odhlaseni span.uzivatel {
        max-width: 110px;
        margin-right: 4px;
        overflow: hidden;
        font-size: 13px;
        font-weight: 600;
        text-overflow: ellipsis;
        white-space: nowrap;
        opacity: 0.85;
    }

    header.hlavicka .zmena_jazyka {
        width: auto;
        height: 32px;
        margin: 0;
        padding: 0 6px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.14);
        color: white;
        font-size: 13px;
    }

    header.hlavicka .zmena_jazyka option {
        color: #33465e;
    }

    header .zmena_portalu,
    header.hlavicka div.odhlaseni form button,
    div.mobile_menu {
        position: relative;
        display: block;
        width: 32px;
        height: 32px !important;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 8px !important;
        box-sizing: border-box;
        transition: background-color .15s ease;
    }

    header .zmena_portalu,
    header.hlavicka div.odhlaseni form button {
        background: rgba(255, 255, 255, 0.12) !important;
    }

    header .zmena_portalu:hover,
    header.hlavicka div.odhlaseni form button:hover {
        filter: none;
        background: rgba(255, 255, 255, 0.24) !important;
    }

    header .zmena_portalu::before,
    header.hlavicka div.odhlaseni form button::before {
        content: "";
        position: absolute;
        top: 8px;
        left: 8px;
        width: 16px;
        height: 16px;
        background-color: white;
        -webkit-mask: center / contain no-repeat;
        mask: center / contain no-repeat;
    }

    header .zmena_portalu::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='7' height='7' rx='1.8'/%3E%3Crect x='13.5' y='3.5' width='7' height='7' rx='1.8'/%3E%3Crect x='3.5' y='13.5' width='7' height='7' rx='1.8'/%3E%3Crect x='13.5' y='13.5' width='7' height='7' rx='1.8'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='7' height='7' rx='1.8'/%3E%3Crect x='13.5' y='3.5' width='7' height='7' rx='1.8'/%3E%3Crect x='3.5' y='13.5' width='7' height='7' rx='1.8'/%3E%3Crect x='13.5' y='13.5' width='7' height='7' rx='1.8'/%3E%3C/svg%3E");
    }

    header.hlavicka div.odhlaseni form button::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 20.5H6A2.5 2.5 0 0 1 3.5 18V6A2.5 2.5 0 0 1 6 3.5h3.5'/%3E%3Cpath d='m16 16.5 4.5-4.5L16 7.5'/%3E%3Cpath d='M20.5 12H9.5'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 20.5H6A2.5 2.5 0 0 1 3.5 18V6A2.5 2.5 0 0 1 6 3.5h3.5'/%3E%3Cpath d='m16 16.5 4.5-4.5L16 7.5'/%3E%3Cpath d='M20.5 12H9.5'/%3E%3C/svg%3E");
    }

    /* hamburger - tenci carky, pri otevreni se animovane slozi do krizku */

    div.mobile_menu {
        background: #389df9;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    }

    /* na dotykovem displeji zustava :hover viset i po klepnuti, proto
       uz ne cervena, jen o odstin tmavsi modra */

    div.mobile_menu:hover {
        background: #1b86e6;
    }

    div.mobile_menu.close {
        background: rgba(255, 255, 255, 0.2);
        box-shadow: none;
    }

    header div.mobile_menu span {
        width: 16px;
        height: 2px;
        border-radius: 2px;
        transform: translateX(-50%);
        transition: top .2s ease, transform .2s ease, opacity .15s ease;
    }

    div.mobile_menu span.top {
        top: 10px;
    }

    div.mobile_menu span.mid {
        top: 15px;
        transform: translateX(-50%);
    }

    div.mobile_menu span.bot {
        top: 20px;
        bottom: auto;
    }

    div.mobile_menu.close span.top {
        top: 15px;
        transform: translateX(-50%) rotate(45deg);
    }

    div.mobile_menu.close span.mid {
        width: 16px;
        opacity: 0;
    }

    div.mobile_menu.close span.bot {
        top: 15px;
        transform: translateX(-50%) rotate(-45deg);
    }

    /* Vysouvaci panel - jeden vzhled pro vsechny aplikace. Pravidla jsou
       vazana na .active, kterou panel dostane az po otevreni hamburgerem,
       takze se nedotknou leveho menu na sirokem displeji. */

    body aside.leve_menu.active {
        position: fixed;
        top: 73px;
        right: 0;
        bottom: 0;
        left: auto;
        width: min(86vw, 340px);
        max-width: none;
        height: auto;
        padding: 0;
        z-index: 9;
        overflow-y: auto;
        overscroll-behavior: contain;
        color: white;
        background: linear-gradient(180deg, #34425b 0%, #1f2c45 100%);
        border-top-left-radius: 14px;
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.35);
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
        animation: vysun_menu .22s cubic-bezier(.2, .8, .2, 1);
    }

    /* v aplikacich bez leveho menu jsou v panelu jen dlazdice aplikaci,
       takze je jen tak vysoky, jak je potreba */

    body aside.leve_menu.mobilni_panel.active {
        bottom: auto;
        max-height: calc(100% - 73px);
        border-bottom-left-radius: 14px;
    }

    body.menu_otevrene::after {
        background: rgba(12, 22, 40, 0.55);
        animation: ztmav_pozadi .2s ease;
    }

    /* prepinac aplikaci - misto dlouheho seznamu velkymi pismeny mrizka
       dlazdic ve dvou sloupcich, zabere zhruba polovinu vysky */

    body aside.leve_menu.active .aplikace_obal {
        height: auto;
        padding: 14px 12px;
        background: rgba(0, 0, 0, 0.18);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    body aside.leve_menu.active .aplikace_obal .aplikace_obsah {
        width: 100%;
        padding: 0;
    }

    body aside.leve_menu.active .aplikace_obal .aplikace_obsah::before {
        content: "Aplikace";
        display: block;
        margin: 0 2px 8px;
        color: rgba(255, 255, 255, 0.55);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    body aside.leve_menu.active .aplikace_obal .aplikace_obsah ul {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        height: auto;
    }

    body aside.leve_menu.active .aplikace_obal .aplikace_obsah ul li {
        min-width: 0;
        margin: 0;
        list-style: none;
    }

    body aside.leve_menu.active .aplikace_obal .aplikace_obsah ul li a.aplikace {
        height: 100%;
        min-height: 40px;
        padding: 8px 10px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 8px;
        box-sizing: border-box;
        background: rgba(255, 255, 255, 0.06);
        font-size: 13px;
        letter-spacing: 0;
        line-height: 1.2;
        text-transform: none;
    }

    body aside.leve_menu.active .aplikace_obal .aplikace_obsah ul li a.aplikace::before {
        width: 16px;
        height: 16px;
        margin-right: 8px;
    }

    body aside.leve_menu.active .aplikace_obal .aplikace_obsah ul li a.aplikace:hover {
        background: rgba(255, 255, 255, 0.12);
    }

    body aside.leve_menu.active .aplikace_obal .aplikace_obsah ul li a.aplikace.aktivni {
        background: #389df9;
        border-color: #389df9;
        box-shadow: 0 2px 8px rgba(56, 157, 249, 0.35);
    }

    /* nazev aplikace - aktivni dlazdice uz ho ukazuje, takze staci
       obycejny nadpis bez tmaveho pruhu */

    body aside.leve_menu.active h2.nadpis_apky {
        padding: 18px 18px 4px;
        margin: 0;
        border: 0;
        background: transparent;
        color: white;
        font-size: 17px;
        letter-spacing: 0;
        text-transform: none;
    }

    body aside.leve_menu.active h2.nadpis_apky::before {
        width: 18px;
        height: 18px;
        margin-right: 9px;
        background-color: #7ec2ff;
        opacity: 1;
    }

    /* vyhledavani v eshopu - 16px pismo, jinak iOS po klepnuti priblizi
       celou stranku */

    body aside.leve_menu.active .vyhledavani {
        height: 38px;
        margin: 10px 12px 4px;
        border-radius: 8px;
    }

    body aside.leve_menu.active .vyhledavani input {
        width: calc(100% - 42px);
        height: 38px;
        font-size: 16px;
    }

    body aside.leve_menu.active .vyhledavani a.search_icon {
        width: 42px;
        height: 38px;
    }

    /* sekce a polozky (eshop, nastaveni, jondu cms, pracovni kniha) -
       misto linek pod kazdym radkem zaoblene polozky, nadpisy sekci
       jako tlumene popisky */

    body aside.leve_menu.active ul.navigace {
        padding: 0 0 20px;
    }

    body aside.leve_menu.active ul.navigace li.karta h4 {
        padding: 18px 20px 6px;
        border-bottom: 0;
        color: rgba(255, 255, 255, 0.55);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 1px;
        opacity: 1;
    }

    body aside.leve_menu.active ul.navigace li.karta h4::before {
        width: 14px;
        height: 14px;
        margin-right: 8px;
        background-color: currentColor;
    }

    body aside.leve_menu.active ul.navigace li.karta ul.submenu li a {
        margin: 1px 10px;
        padding: 9px 10px;
        border: 0;
        border-radius: 8px;
        font-size: 14px;
    }

    body aside.leve_menu.active ul.navigace li.karta ul.submenu li a::before {
        width: 16px;
        height: 16px;
        margin-right: 10px;
    }

    body aside.leve_menu.active ul.navigace li.karta ul.submenu li a:hover {
        background: rgba(255, 255, 255, 0.08);
    }

    body aside.leve_menu.active ul.navigace li.karta ul.submenu li a.aktivni {
        background: #389df9;
        box-shadow: 0 2px 8px rgba(56, 157, 249, 0.35);
    }

    /* strom clanku - vetsi radky na dotyk */

    body aside.leve_menu.active div.vypis {
        padding: 10px 12px 20px;
    }

    body aside.leve_menu.active h4.hl_stranka a {
        border-color: rgba(255, 255, 255, 0.12);
        border-radius: 8px;
    }

    body aside.leve_menu.active h4.hl_stranka.aktivni a {
        border-color: #389df9;
        box-shadow: 0 2px 8px rgba(56, 157, 249, 0.35);
    }

    body aside.leve_menu.active ul.clanky_vypis {
        border-left-color: rgba(255, 255, 255, 0.15);
    }

    body aside.leve_menu.active ul.clanky_vypis li {
        margin: 0 0 4px;
    }

    body aside.leve_menu.active ul.clanky_vypis li a.hl_acko {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    body aside.leve_menu.active ul.clanky_vypis li.typ_2 a.otevri_sekci {
        top: 50%;
        right: 4px;
        width: 28px;
        height: 28px;
        border-radius: 6px;
        transform: translateY(-50%);
    }

    body aside.leve_menu.active ul.clanky_vypis li.typ_2 span.aktivni {
        right: 40px;
    }
}

@media (max-width: 980px) and (prefers-reduced-motion: reduce) {
    body aside.leve_menu.active,
    body.menu_otevrene::after {
        animation: none;
    }
}


/* --------------- -CLANKY - NAHLED CLANKU ------------------------------*/
/* Stranka clanku (clanek_zobrazeni.inc.php): hlavicka se stitky a akcemi,
   text clanku, vypis podclanku a postranni sloupec s informacemi
   a fotogalerii. Hlavni strana (clanek=0) postranni sloupec nema. */


/* hlavicka - typ a stav clanku nad nadpisem */

main.clanky .hlavicka_clanku {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 16px;
}

main.clanky .hlavicka_clanku>* {
    margin: 0;
}

main.clanky article.clanek .hlavicka_clanku h1 {
    margin: 0;
    font-size: 28px;
    line-height: 1.25;
}

main.clanky .hlavicka_clanku .stitky {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

main.clanky .hlavicka_clanku .stitky>* {
    margin: 0;
}

main.clanky .nahled_clanku .stitek,
main.clanky .hlavicka_clanku .stitek {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    background: #e8f2fe;
    color: #1a72c4;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1.4;
    text-transform: uppercase;
}

/* stav - tecka v barve stavu, stejne jako v levem menu */

main.clanky .hlavicka_clanku .stav::before,
main.clanky .vypis_podclanku .data .stav::before {
    content: "";
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    margin-right: 6px;
    border-radius: 50%;
    background: currentColor;
}

main.clanky .hlavicka_clanku .stitek.stav.ano {
    background: #e3f5ea;
    color: #1e8a4c;
}

main.clanky .hlavicka_clanku .stitek.stav.ne {
    background: #eef1f5;
    color: #7b8a9c;
}

main.clanky .bez_opravneni {
    max-width: 640px;
    margin: 0;
    padding: 16px 18px;
    border: 1px solid #f3d9a4;
    border-radius: 10px;
    background: #fff8e8;
    color: #8a5a00;
    font-weight: 600;
}


/* akce - hlavni tlacitko plne, ostatni jen obrysem */

main.clanky .akce_clanku {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 20px;
}

main.clanky .akce_clanku>* {
    margin: 0;
}

main.clanky .akce_clanku a.btn {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border: 1px solid #389df9;
    font-size: 13.5px;
    letter-spacing: 0;
    text-transform: none;
    filter: none;
    box-shadow: 0 2px 6px rgba(56, 157, 249, 0.25);
    transition: background .15s ease, border-color .15s ease;
}

main.clanky .akce_clanku a.btn::before {
    width: 16px;
    height: 16px;
    margin-right: 7px;
    vertical-align: 0;
    opacity: 1;
}

main.clanky .akce_clanku a.btn:hover {
    background: #1b86e6;
    border-color: #1b86e6;
}

main.clanky .akce_clanku a.btn.vedlejsi {
    background: white;
    border-color: #bcd8f5;
    color: #1b7fd4 !important;
    box-shadow: none;
}

main.clanky .akce_clanku a.btn.vedlejsi:hover {
    background: #eef6ff;
    border-color: #389df9;
}


/* rozlozeni - text a podclanky vlevo, informace a galerie vpravo */

/* margin 0 - jinak by "* { margin: 0 auto }" vystredilo uzsi vypis
   na hlavni strane (max-width 980px) doprostred */

main.clanky .nahled_clanku {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 20px;
    align-items: start;
    margin: 0;
    padding-bottom: 30px;
}

main.clanky .nahled_clanku>* {
    min-width: 0;
    margin: 0;
}

main.clanky .nahled_clanku.bez_postranniho {
    grid-template-columns: minmax(0, 1fr);
    max-width: 980px;
}

main.clanky .nahled_clanku section {
    margin: 0 0 20px;
    padding: 20px 22px;
    border: 1px solid #e4ebf3;
    border-radius: 12px;
    background: white;
    box-shadow: 0 1px 3px rgba(15, 35, 65, 0.04);
}

main.clanky .nahled_clanku section:last-child {
    margin-bottom: 0;
}

main.clanky .nahled_clanku h3.nadpis_sekce {
    display: flex;
    align-items: center;
    margin: 0;
    color: #33465e;
    font-size: 15px;
}

main.clanky .nahled_clanku h3.nadpis_sekce::before {
    width: 17px;
    height: 17px;
    vertical-align: 0;
    opacity: 0.45;
}

main.clanky .nahled_clanku .pocet {
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 999px;
    background: #eef3f9;
    color: #5b6b80;
    font-size: 12px;
    font-weight: 700;
}


/* text clanku - dlouhy text se zkrati, rozbali ho tlacitko (clanky.js) */

main.clanky .text_clanku .perex {
    margin: 0 0 16px;
    color: #1f3350;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.6;
}

main.clanky .text_clanku .perex:last-child {
    margin-bottom: 0;
}

main.clanky .text_clanku .perex * {
    margin: 0;
    font-weight: 600;
}

main.clanky .text_clanku .telo {
    position: relative;
    max-width: 760px;
    margin: 0;
    color: #33465e;
    font-size: 15px;
    line-height: 1.7;
}

/* "* { margin: 0 auto }" v zakladu by odstavce slepil dohromady */

main.clanky .text_clanku .telo>* {
    margin-top: 0;
    margin-bottom: 12px;
}

main.clanky .text_clanku .telo>*:last-child {
    margin-bottom: 0;
}

main.clanky .text_clanku .telo>p.prazdny_odstavec {
    display: none;
}

main.clanky .text_clanku .telo h2,
main.clanky .text_clanku .telo h3,
main.clanky .text_clanku .telo h4 {
    color: #062659;
    line-height: 1.35;
    text-align: left;
    text-transform: none;
}

main.clanky .text_clanku .telo h2 {
    font-size: 20px;
}

main.clanky .text_clanku .telo h3 {
    font-size: 17px;
}

main.clanky .text_clanku .telo ul,
main.clanky .text_clanku .telo ol {
    padding-left: 22px;
}

main.clanky .text_clanku .telo img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

main.clanky .text_clanku .telo a {
    color: #1a72c4;
}

main.clanky .text_clanku .telo.zkraceny {
    max-height: 360px;
    overflow: hidden;
}

main.clanky .text_clanku .telo.zkraceny::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 90px;
    background: linear-gradient(rgba(255, 255, 255, 0), white);
    pointer-events: none;
}

main.clanky .text_clanku .rozbalit_text {
    display: none;
    align-items: center;
    margin: 12px 0 0;
    padding: 6px 14px;
    border-radius: 8px;
    background: #eef6ff;
    color: #1b7fd4;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s ease;
}

main.clanky .text_clanku .rozbalit_text:hover {
    background: #dcecfd;
}


/* vypis podclanku */

main.clanky .zahlavi_podclanku {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 12px;
    margin: 0 0 14px;
}

main.clanky .zahlavi_podclanku>* {
    margin: 0;
}

main.clanky .zahlavi_podclanku .napoveda {
    display: inline-flex;
    align-items: center;
    color: #90a0b2;
    font-size: 12px;
}

main.clanky .zahlavi_podclanku .napoveda::before {
    width: 14px;
    height: 14px;
    margin-right: 4px;
    vertical-align: 0;
    opacity: 0.7;
}

main.clanky .vypis_podclanku .vypis {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

main.clanky .vypis_podclanku .vypis>* {
    margin: 0;
}

main.clanky .vypis_podclanku article.podclanek {
    display: flex;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    padding: 10px 12px 10px 6px;
    border: 1px solid #e4ebf3;
    border-radius: 10px;
    background: white;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

main.clanky .vypis_podclanku article.podclanek>* {
    margin: 0;
}

main.clanky .vypis_podclanku article.podclanek:hover {
    border-color: #bcd8f5;
    background: #fbfdff;
    box-shadow: 0 2px 8px rgba(15, 35, 65, 0.06);
}

/* karta, kterou uzivatel prave pretahuje, a misto, kam spadne */

main.clanky .vypis_podclanku article.podclanek.ui-sortable-helper {
    border-color: #389df9;
    box-shadow: 0 10px 24px rgba(15, 35, 65, 0.18);
}

main.clanky .vypis_podclanku .podclanek_misto {
    visibility: visible !important;
    box-sizing: border-box;
    border: 2px dashed #bcd8f5;
    border-radius: 10px;
    background: #f5faff;
}

main.clanky .vypis_podclanku .podclanek .uchop {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 32px;
    color: #c3cdd9;
    cursor: grab;
    transition: color .15s ease;
}

main.clanky .vypis_podclanku .podclanek .uchop::before {
    width: 16px;
    height: 16px;
    margin: 0;
    vertical-align: 0;
    opacity: 1;
}

main.clanky .vypis_podclanku .podclanek:hover .uchop {
    color: #7b8a9c;
}

/* na dotykovem displeji se tahne jen za uchyt (viz int.js), takze musi byt
   dost velky pro prst; touch-action: none - prohlizec tam nezacne scrollovat */

html.dotyk main.clanky .vypis_podclanku .podclanek .uchop {
    width: 30px;
    height: 44px;
    border-radius: 8px;
    background: #f1f5fa;
    color: #7b8a9c;
    touch-action: none;
}

main.clanky .vypis_podclanku .podclanek a.obrazek {
    display: block;
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    overflow: hidden;
    border-radius: 8px;
    background: #f1f5f9;
}

main.clanky .vypis_podclanku .podclanek a.obrazek img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
    object-position: center;
}

main.clanky .vypis_podclanku .podclanek .bez_obrazku {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #b6c2d0;
}

main.clanky .vypis_podclanku .podclanek .bez_obrazku::before {
    width: 22px;
    height: 22px;
    margin: 0;
    vertical-align: 0;
}

main.clanky .vypis_podclanku .podclanek .info {
    flex: 1 1 auto;
    min-width: 0;
}

main.clanky .vypis_podclanku .podclanek .info h4.nazev {
    margin: 0 0 4px;
    font-size: 15px;
    line-height: 1.35;
}

main.clanky .vypis_podclanku .podclanek .info h4.nazev a {
    color: #1a2f4f;
    text-decoration: none;
}

main.clanky .vypis_podclanku .podclanek .info h4.nazev a:hover {
    color: #1a72c4;
}

main.clanky .vypis_podclanku .podclanek .data {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    color: #7b8a9c;
    font-size: 12.5px;
}

main.clanky .vypis_podclanku .podclanek .data>* {
    margin: 0;
}

main.clanky .vypis_podclanku .podclanek .data .stitek {
    padding: 1px 7px;
    font-size: 10px;
}

main.clanky .vypis_podclanku .podclanek .data .stav {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
}

main.clanky .vypis_podclanku .podclanek .data .stav.ano {
    color: #1e8a4c;
}

main.clanky .vypis_podclanku .podclanek .data .stav.ne {
    color: #98a4b3;
}

main.clanky .vypis_podclanku .akce_podclanku {
    display: flex;
    flex: 0 0 auto;
    gap: 4px;
}

main.clanky .vypis_podclanku .akce_podclanku a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 0;
    border-radius: 8px;
    color: #7b8a9c;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}

main.clanky .vypis_podclanku .akce_podclanku a::before {
    width: 17px;
    height: 17px;
    margin: 0;
    vertical-align: 0;
    opacity: 1;
}

main.clanky .vypis_podclanku .akce_podclanku a:hover {
    background: #eef6ff;
    color: #1a72c4;
}

main.clanky .vypis_podclanku .akce_podclanku a.smazat:hover {
    background: #fdecec;
    color: #d64545;
}


/* prazdny clanek nebo sekce bez podclanku */

main.clanky .nahled_clanku section.prazdny_nahled {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 36px 20px;
    border-style: dashed;
    color: #7b8a9c;
    text-align: center;
}

main.clanky .prazdny_nahled>* {
    margin: 0;
}

main.clanky .prazdny_nahled a {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border-radius: 8px;
    background: #eef6ff;
    color: #1b7fd4;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

main.clanky .prazdny_nahled a::before {
    width: 16px;
    height: 16px;
    margin-right: 6px;
    vertical-align: 0;
}


/* postranni sloupec - informace o clanku */

main.clanky .informace_clanku .titulni_obrazek {
    margin: 0 0 16px;
    overflow: hidden;
    border-radius: 10px;
    background: #f1f5f9;
    aspect-ratio: 16 / 10;
}

main.clanky .informace_clanku .titulni_obrazek img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

main.clanky .informace_clanku .titulni_obrazek.bez_obrazku {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 56px;
    border: 1px dashed #d5dfea;
    background: #f8fafc;
    color: #90a0b2;
    font-size: 12.5px;
    aspect-ratio: auto;
}

main.clanky .informace_clanku .titulni_obrazek.bez_obrazku::before {
    width: 20px;
    height: 20px;
    margin: 0;
    vertical-align: 0;
    opacity: 0.6;
}

main.clanky .informace_clanku h3.nadpis_sekce {
    margin-bottom: 6px;
}

main.clanky .informace_clanku dl.udaje {
    margin: 0;
}

main.clanky .informace_clanku dl.udaje>div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid #f1f5f9;
}

main.clanky .informace_clanku dl.udaje>div:last-child {
    border-bottom: 0;
}

main.clanky .informace_clanku dl.udaje dt,
main.clanky .informace_clanku dl.udaje dd {
    margin: 0;
    font-size: 12.5px;
}

main.clanky .informace_clanku dl.udaje dt {
    color: #7b8a9c;
}

main.clanky .informace_clanku dl.udaje dd {
    color: #33465e;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}


/* postranni sloupec - fotogalerie */

main.clanky .galerie_clanku .zahlavi_galerie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 12px;
}

main.clanky .galerie_clanku .zahlavi_galerie>* {
    margin: 0;
}

main.clanky .galerie_clanku a.otevrit {
    color: #1b7fd4;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
}

main.clanky .galerie_clanku a.otevrit:hover {
    text-decoration: underline;
}

main.clanky .galerie_clanku .mrizka {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

main.clanky .galerie_clanku .mrizka>* {
    margin: 0;
}

main.clanky .galerie_clanku figure.obrazek {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background: #f1f5f9;
    aspect-ratio: 1;
}

main.clanky .galerie_clanku figure.obrazek img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

main.clanky .galerie_clanku figure.obrazek a.dalsi {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 35, 65, 0.55);
    color: white;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
}

main.clanky .galerie_clanku .prazdna_galerie {
    margin: 0;
    color: #90a0b2;
    font-size: 13px;
    font-style: italic;
}


/* uzsi displej - postranni sloupec pod text, jeho karty vedle sebe */

@media (max-width: 1280px) {

    main.clanky .nahled_clanku {
        grid-template-columns: minmax(0, 1fr);
    }

    main.clanky .postranni_sloupec {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 20px;
        align-items: start;
    }

    main.clanky .postranni_sloupec>section {
        margin: 0;
    }
}

@media (max-width: 700px) {

    main.clanky article.clanek .hlavicka_clanku h1 {
        font-size: 23px;
    }

    main.clanky .akce_clanku a.btn {
        flex: 1 1 auto;
        justify-content: center;
    }

    main.clanky .nahled_clanku section {
        padding: 16px;
    }

    main.clanky .text_clanku .perex {
        font-size: 15px;
    }

    /* napoveda se na uzky displej nevejde, uchyt zustava - tahne se za nej */

    main.clanky .zahlavi_podclanku .napoveda {
        display: none;
    }

    main.clanky .vypis_podclanku article.podclanek {
        gap: 10px;
        padding: 10px;
    }

    main.clanky .vypis_podclanku .podclanek a.obrazek {
        width: 48px;
        height: 48px;
    }

    main.clanky .vypis_podclanku .akce_podclanku {
        flex-direction: column;
        gap: 2px;
    }

    main.clanky .vypis_podclanku .akce_podclanku a {
        width: 32px;
        height: 32px;
    }
}


/* ---------------- -GALERIE - HORNI LISTA NA MOBILU ------------------ */

/* Polozky listy se nezalamovaly - lista pretekala, prvni tlacitko bylo
   useknute a cela galerie (i ve fotogalerii produktu) dostala vodorovny
   posuvnik. Na mobilu jsou proto tlacitka v mrizce po dvou. */

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

    .galerie_obal .topmenu_aplikace {
        padding: 8px;
    }

    .galerie_obal .topmenu_aplikace ul {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .galerie_obal .topmenu_aplikace ul li {
        margin: 0;
    }

    /* licha posledni polozka (napr. v kosi) se roztahne pres celou sirku */

    .galerie_obal .topmenu_aplikace ul li:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .galerie_obal .topmenu_aplikace ul li a.tlacitko {
        height: 36px;
        padding: 0 10px;
        border: 0;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.1);
        white-space: nowrap;
    }

    .galerie_obal .topmenu_aplikace ul li a.tlacitko:hover {
        background: rgba(255, 255, 255, 0.18);
        filter: none;
    }
}


/* ---------------- -ESHOP - UCHYT PRO RAZENI ------------------ */

/* Podkategorie, prislusenstvi a souvisejici produkty. Na pocitaci jde
   tahnout cely radek a uchyt jen napovida, na dotykovem displeji se tahne
   jen za nej (viz int.js) - proto je tam vetsi a prohlizec na nem
   nezacne posouvat strankou (touch-action). */

main.eshop .uchop_bunka {
    width: 16px;
}

main.eshop th.uchop_bunka,
main.eshop td.uchop_bunka {
    padding-right: 0;
}

main.eshop .uchop {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 32px;
    margin: 0;
    color: #c3cdd9;
    cursor: grab;
    transition: color .15s ease;
}

main.eshop .uchop::before {
    width: 16px;
    height: 16px;
    margin: 0;
    vertical-align: 0;
    opacity: 1;
}

main.eshop tr.podkategorie:hover .uchop,
main.eshop article.produkt:hover .uchop {
    color: #7b8a9c;
}

html.dotyk main.eshop .uchop_bunka {
    width: 30px;
}

html.dotyk main.eshop .uchop {
    width: 30px;
    height: 40px;
    border-radius: 8px;
    background: #f1f5fa;
    color: #7b8a9c;
    touch-action: none;
}

/* tazeny radek at je poznat */

main.eshop tr.podkategorie.ui-sortable-helper,
main.eshop article.produkt.ui-sortable-helper {
    background: white;
    box-shadow: 0 10px 24px rgba(15, 35, 65, 0.18);
}


/* ---------------- -ESHOP - REKAPITULACE OBJEDNAVKY ------------------ */

/* Polozky s nahledem, poctem a jednotkovou cenou, pod nimi souhrn
   (produkty, sleva, doprava, platba) a zvyraznena celkova castka. */

main.new_style .editace_objednavky_obal .zahlavi_rekapitulace {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 12px;
}

main.new_style .editace_objednavky_obal .zahlavi_rekapitulace>*,
main.new_style .editace_objednavky_obal .zahlavi_rekapitulace h3.nadpis_sekce {
    margin: 0;
}

/* starsi objednavky nemaji nazev dopravy / platby vyplneny */

main.new_style .editace_objednavky_obal .nevybrano {
    color: #90a0b2;
    font-style: italic;
    font-weight: 400;
}

main.new_style .editace_objednavky_obal .zahlavi_rekapitulace .pocet {
    padding: 2px 10px;
    border-radius: 999px;
    background: #eef4fb;
    color: #5b6b80;
    font-size: 12px;
    font-weight: 600;
}

main.new_style .editace_objednavky_obal ul.polozky_objednavky {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

main.new_style .editace_objednavky_obal ul.polozky_objednavky li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 8px 10px 8px 8px;
    border: 1px solid #e4ebf3;
    border-radius: 10px;
    background: white;
}

main.new_style .editace_objednavky_obal ul.polozky_objednavky li>* {
    margin: 0;
}

main.new_style .editace_objednavky_obal ul.polozky_objednavky .obrazek {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    overflow: hidden;
    border-radius: 8px;
    background: #f1f5fa;
    color: #b3c0cf;
}

main.new_style .editace_objednavky_obal ul.polozky_objednavky .obrazek img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

main.new_style .editace_objednavky_obal ul.polozky_objednavky .bez_obrazku::before {
    width: 20px;
    height: 20px;
    margin: 0;
}

main.new_style .editace_objednavky_obal ul.polozky_objednavky .info {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    line-height: 1.35;
}

main.new_style .editace_objednavky_obal ul.polozky_objednavky .info>* {
    margin: 0;
}

main.new_style .editace_objednavky_obal ul.polozky_objednavky .nazev {
    color: #10284c;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    overflow-wrap: break-word;
}

main.new_style .editace_objednavky_obal ul.polozky_objednavky a.nazev:hover {
    color: #1b7fd4;
    text-decoration: underline;
}

main.new_style .editace_objednavky_obal ul.polozky_objednavky .meta {
    color: #90a0b2;
    font-size: 12px;
}

main.new_style .editace_objednavky_obal ul.polozky_objednavky .cena {
    flex: 0 0 auto;
    color: #10284c;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

main.new_style .editace_objednavky_obal ul.polozky_objednavky .na_webu {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    color: #90a0b2;
    text-decoration: none;
}

main.new_style .editace_objednavky_obal ul.polozky_objednavky .na_webu::before {
    width: 15px;
    height: 15px;
    margin: 0;
}

main.new_style .editace_objednavky_obal ul.polozky_objednavky .na_webu:hover {
    background: #e8f2fe;
    color: #1b7fd4;
}

main.new_style .editace_objednavky_obal dl.souhrn {
    margin: 14px 0 0;
    padding: 0;
}

main.new_style .editace_objednavky_obal dl.souhrn>div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 9px 2px;
    border-bottom: 1px solid #eef2f7;
    color: #33465e;
    font-size: 14px;
}

main.new_style .editace_objednavky_obal dl.souhrn dt,
main.new_style .editace_objednavky_obal dl.souhrn dd {
    margin: 0;
}

main.new_style .editace_objednavky_obal dl.souhrn dt {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

main.new_style .editace_objednavky_obal dl.souhrn dt>* {
    margin: 0;
}

main.new_style .editace_objednavky_obal dl.souhrn dd {
    color: #10284c;
    font-weight: 600;
    white-space: nowrap;
}

main.new_style .editace_objednavky_obal dl.souhrn .ikona {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: #e8f2fe;
    color: #1b7fd4;
}

main.new_style .editace_objednavky_obal dl.souhrn .ikona::before {
    width: 14px;
    height: 14px;
    margin: 0;
    opacity: 1;
}

main.new_style .editace_objednavky_obal dl.souhrn dd.zdarma {
    padding: 2px 9px;
    border-radius: 999px;
    background: #e6f6ec;
    color: #1f9d55;
    font-size: 12px;
}

main.new_style .editace_objednavky_obal dl.souhrn .sleva dd {
    color: #1f9d55;
}

main.new_style .editace_objednavky_obal dl.souhrn .sleva small {
    color: #90a0b2;
}

main.new_style .editace_objednavky_obal dl.souhrn>div.celkem {
    margin-top: 10px;
    padding: 12px 14px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, #4059b9 0%, #10284c 100%);
    color: white;
}

main.new_style .editace_objednavky_obal dl.souhrn .celkem dt {
    font-size: 15px;
    font-weight: 700;
}

main.new_style .editace_objednavky_obal dl.souhrn .celkem dd {
    color: white;
    font-size: 20px;
    font-weight: 800;
}