@import url('https://fonts.googleapis.com/css2?family=Cabin&display=swap');

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Cabin', sans-serif;
    image-rendering: auto;
    text-decoration: none;
}

:root {
    --black: #000;
    --white: #fff;
    --green: #439f55;
    --darksilver: #ccc;
    --lightsiver: #eaeaea;
}

.nevybrat {
    user-select: none;
    -moz-user-select: none;
    -webkit-text-select: none;
    -webkit-user-select: none;
}

body {
    background: var(--darksilver);
    padding-top: 20px;
    padding-bottom: 20px;
}

#main_box {
    margin: 0 auto;
    max-width: 1366px;
    display: flex;
    flex-direction: column;
}

a {
    color: var(--black);
}

p {
    text-align: left;
}

/*
    HEADER
*/
#main_box .header {
    width: 100%;
    height: 100px;
    height: auto;
    padding: 20px;
    background: var(--green);
    border-radius: 20px 20px 0 0;
    display: flex;
    flex-direction: row;
}

/*
    HEADER - logo
*/
#main_box .header .logo img {
    max-width: 300px;
    height: auto;
    padding: 5px;
    background: var(--white);
    border-radius: 20px;
}

#main_box .header .logo {
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#main_box .header .logo h2 {
    text-wrap: nowrap;
    padding: 10px;
    color: var(--white);
    font-size: 50px;
    text-transform: uppercase;
}

/*
    HEADER - menu
*/
#main_box .header .menu {
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    align-items: center
}

#main_box .header .menu ul {
    list-style: none;
    display: flex;
    flex-direction: row;
}

#main_box .header .menu ul li {
    text-transform: uppercase;
    padding: 5px;
    margin: 5px 0;
}

#main_box .header .menu ul li a {
    color: var(--black);
    background: var(--white);
    padding: 10px;
    border-radius: 5px;
    border: 1px solid var(--white);
}

#main_box .header .menu ul li a:hover {
    background: var(--black);
    color: var(--white);
    border: 1px solid var(--darksilver);
    cursor: pointer;
}

/*
    CONTENT
*/
#main_box #content {
    width: 100%;
    height: auto;
    background: var(--lightsiver);
    padding: 20px;
    display: flex;
    flex-direction: column;
}

#main_box #content .radek {
    display: flex;
    flex-direction: row;
}

#main_box #content .radek .blok_100,
#main_box #content .radek .blok_50,
#main_box #content .radek .blok_33 {
    padding: 10px;
    background: var(--white);
    margin-bottom: 10px;
    width: 100%;
}

#main_box #content .radek .blok_50:first-child {
    margin-right: 5px;
}
#main_box #content .radek .blok_50:last-child{
    margin-left: 5px;
}

#main_box #content .radek .blok_33:first-child {
    margin-right: 5px;
}

#main_box #content .radek .blok_33:nth-child(3n+2) {
    margin-left: 5px;
    margin-right: 5px;
}

#main_box #content .radek .blok_33:last-child {
    margin-left: 5px;
}

#main_box #content .radek h2 {
    width: 100%;
    background: var(--darksilver);
    padding: 5px 10px 5px;
    margin-bottom: 10px;
    color: var(--black);
    text-transform: uppercase;
}

/*
    TABLE
*/
table {
    width: 100%;
    height: auto;
    border-collapse: collapse;
    text-align: center;
}

table tbody tr td a {
    color: var(--black);
}

table tbody tr:hover td a,
table tbody tr:hover td a:hover {
    color:var(--white);
}

table tbody tr.celkem {
    border-top: 1px solid var(--black);
    color: var(--white);
    background: var(--green);
    font-weight: bold;
}

table tr th {
    text-transform: uppercase;
    border-bottom: 1px solid var(--darksilver);
    padding-bottom: 2px;
}

table tr th:first-child,
table tr td:first-child {
    text-align: left;
}

table tbody tr:nth-child(even) {
    background: var(--lightsiver);
}

table tbody tr td {
    padding: 5px;
}

table tbody tr:hover {
    background: var(--green);
    color: var(--white);
    cursor: pointer;
}

/*
    LIST
*/

#main_box #content .radek p.zadnadata {
    text-align: center;
}

#list {
    width: 100%;
    height: auto;
}

#list .polozka {
    display: flex;
    flex-direction: row;
    padding: 5px;
}

#list a,
#list a:hover {
    color: var(--black);
}

#list a .polozka:nth-child(even),
#list a:nth-child(even) .polozka {
    background: var(--lightsiver);
}

#list a .polozka:hover {
    background: var(--green);
    color: var(--white);
    cursor: pointer;
}

#list .polozka .datum {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex: 150px 0;
}

#list .polozka .data .titulek {
    font-size: 16px;
    font-weight: bold;
}

#list .tlacitko {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    margin: 20px;
}

#list .tlacitko a {
    background: var(--green);
    color: var(--white);
    padding: 20px;
    border-radius: 20px;
}

#list .tlacitko a:hover {
    background: var(--black);
    color: var(--white);
    cursor: pointer;
}

#list .polozka .data .firma,
#list .polozka .data .popis {
    font-size: 12px;
}

/*
    Kontakty
*/
#main_box #content .radek .kontakty {
    display: flex;
    flex-direction: row;
}

#main_box #content .radek .kontakty div {
    width: 100%;
}


/*
    FOOTER
*/
#main_box .footer {
    width: 100%;
    height: auto;
    background: var(--green);
    color: var(--white);
    text-align: center;
    padding: 20px;
    border-radius: 0 0 20px 20px;
}

/*
    FA-ICONS
*/
#main_box .header .menu ul li a i,
#main_box #content .radek h2 i {
    padding-right: 5px;
}

/*
    MAIN-BTN
*/
#main_box #content .radek #main_btn {
    display: flex;
    flex-direction: row;
}

#main_box #content .radek #main_btn .blok {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#main_box #content .radek #main_btn .blok .tlacitko {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background: var(--green);
    color: var(--white);
    border-radius: 20px;
    border: 5px solid var(--green);
}

#main_box #content .radek #main_btn .blok .tlacitko:hover {
    background: var(--black);
    color: var(--white);
    border: 5px solid var(--lightsiver);
    cursor: pointer;
}

#main_box #content .radek #main_btn i.fa-plus {
    font-size: 50px;
}

#main_box #content .radek #pagelist ul {
    list-style-type: none;
    display: flex;
    flex-direction: row;
}

#main_box #content .radek #pagelist ul li {
    padding-left: 5px;
    padding-right: 5px;
}

#main_box #content .radek #pagelist ul li a {
    color: var(--black);
    padding: 5px;
    border-radius: 5px;
}

#main_box #content .radek #pagelist ul li a:hover {
    color: var(--white);
    background: var(--green);
}


/*
    FORM
*/
#main_box #content form .radek .polozka {
    display: flex;
    flex-direction: row;
}

#main_box #content form {
    padding: 20px;
    text-align: center;
}

#main_box #content form p {
    padding-top: 20px;
    padding-bottom: 20px;
}

#main_box #content form fieldset,
#main_box #content .radek div fieldset {
    background: var(--lightsiver);
    padding: 10px;
    border: 1px solid var(--green);
    margin-bottom: 30px;
    text-align: left;

}

#main_box #content form fieldset legend,
#main_box #content .radek div fieldset legend {
    background: var(--green);
    color: var(--white);
    padding: 5px 10px;
}

#main_box #content form fieldset .radek,
#main_box #content .radek div fieldset .radek {
    display: flex;
    flex-direction: row;
    align-items: center;
}

#main_box #content form fieldset .radek div.radek2,
#main_box #content .radek div fieldset .radek div.radek2 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
}

#main_box #content form fieldset .radek label,
#main_box #content .radek div fieldset .radek label {
    padding-right: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    width: 30%;
}

#main_box #content form fieldset .radek input,
#main_box #content form fieldset .radek select,
#main_box #content form fieldset .radek textarea,
#main_box #content .radek div fieldset .radek .txtbox {
    width: 100%;
    padding: 5px;
    outline: none;
    border: 1px solid var(--darksilver);
    background: var(--white);
}

#main_box #content .radek div fieldset .radek .txtbox p {
    padding-bottom: 10px;
    padding-top: 0px;
}

#main_box #content form fieldset .radek textarea {
    resize: none;
}

#main_box #content form fieldset .radek:hover > label,
#main_box #content form fieldset .radek:hover {
    background: var(--darksilver);
}

#main_box #content form fieldset h4 {
    padding: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
    font-style: italic;
    border-bottom: 1px solid var(--black);
}

#main_box #content form input[type="submit"],
#main_box #content input[type="button"]{
    background: var(--green);
    color: var(--white);
    padding: 20px;
    border-radius: 20px;
    border: 0;
}

/*
    DIALOG
*/
#dialog {
    width: 100%;
    height: 100%;
    margin-bottom: 10px;
}

#dialog .ok {
    background: green;
    color: white;
}

#dialog .chyba {
    background: red;
    color: white;
}

#dialog .ok,
#dialog .chyba {
    padding: 20px;
    line-height: 40px;
}

/*
    POLOZKA-ZAZNAM
*/
#polozka-zaznam {
    display: flex;
    flex-direction: column;
}

#polozka-zaznam .radek {
    display: flex;
    flex-direction: row;
}

#polozka-zaznam .radek:nth-child(even){
    margin-bottom: 20px;
}

#polozka-zaznam .radek .blok {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 5px;
}

#polozka-zaznam .radek .blok h2 {
    background: var(--white) !important;
    color: var(--green) !important;
    padding: 0 !important;
}

#polozka-zaznam .radek .blok a {
    color: var(--green);
    font-weight: bold;
    text-transform: uppercase;
}

#polozka-zaznam .radek .blok.doprava {
    justify-content: right;
    flex-direction: row;
}

#polozka-zaznam .radek .blok span.mzda {
    font-size: 30px;
    font-weight: bold;
}

/*
    FILTR
*/

#filtr {
    background: var(--green);
    margin-bottom: 20px;
    padding: 10px;
    color: var(--white);
}

#filtr ul {
    list-style: none;
    display: flex;
    flex-direction: row;
}

#filtr li a {
    color: var(--white);
    padding: 5px;
}

/*
    DETAIL
*/

#main_box #content .radek #detail h1 {
    padding-bottom: 20px;
    text-transform: uppercase;
    color: var(--green);
}

#main_box #content .radek #detail {
    padding: 20px;
}
#main_box #content .radek #detail p.obor {
    padding: 5px;
}

#main_box #content .radek #detail p.obor:nth-child(even) {
    border-top: 1px solid var(--lightsiver);
    border-bottom: 1px solid var(--lightsiver);
}

#priloha {
    padding: 5px;
    float: left;
}

#priloha:hover {
    background: var(--green);
    color: var(--white);
}

#priloha:hover a {
    color: var(--white);
}

#priloha a i {
    display: none;
    color: var(--black);
    margin-left: 5px;
}

#priloha:hover a i {
    display: inline-block;
}

/*
    ADMIN
*/
#main_box #content .radek .admin {
    background: red;
    padding: 5px;
    color: var(--white);
}

#main_box #content .radek #pagelist.admin ul li a {
    color: var(--white);
}

#main_box #content .radek table a.ano,
#main_box #content .radek table a.ne,
#main_box #content .radek table a.nic {
    padding: 5px 10px 5px 10px;
}

#main_box #content .radek table a.ano {
    color: green;
}

#main_box #content .radek table a.ne {
    color: red;
}

#main_box #content .radek div.tlacitko2 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    margin: 20px;
}
/*
    MOBILE
*/

@media only screen and (max-width: 600px) {
    body {
        padding: 0;
    }

    #main_box {
        margin: 0;
        width: 100%;
    }

    #main_box .header {
        flex-direction: column;
        border-radius: 0;
    }

    #main_box .header .logo {
        margin: 0;
    }

    #main_box .header .logo img {
        max-width: 100%;
        border-radius: 5px;
    }

    #main_box .header .menu ul {
        flex-direction: column;
        width: 100%;
    }

    #main_box .header .menu ul li {
        padding: 0px;
        margin: 1px 0;
    }

    #main_box .header .menu ul li a {
        margin: 0;
        width: 100%;
        display: block;
    }

    #main_box #content .radek {
        display: flex;
        flex-direction: column;
    }

    #main_box #content .radek .blok_100,
    #main_box #content .radek .blok_50:first-child,
    #main_box #content .radek .blok_50:last-child,
    #main_box #content .radek .blok_33:first-child,
    #main_box #content .radek .blok_33:nth-child(3n+2),
    #main_box #content .radek .blok_33:last-child {
        margin-right: 0;
        margin-left: 0;
    }

    #main_box .footer {
        border-radius: 0;
    }

    #main_box #content form fieldset .radek {
        flex-direction: column;
        padding: 5px;
    }

    #main_box #content form fieldset .radek label {
        width: 100%;
    }

    #main_box #content .radek div #detail fieldset .radek,
    #main_box #content .radek div form fieldset .radek {
        display: flex;
        flex-direction: column;
    }
    
    #main_box #content form fieldset .radek label, #main_box #content .radek div fieldset .radek label {
        padding: 10px 0px 0px 0px;
        width: 100%;
        text-align: center;
    }

    #main_box #content .radek #detail,
    #main_box #content form {
        padding: 0;
    }

    #main_box #content .radek #pagelist.admin ul {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    #main_box #content .radek #pagelist.admin ul li {
        padding-bottom: 5px;
    }

    #main_box #content .radek .kontakty {
        display: flex;
        flex-direction: column;
    }
}