@font-face {
    font-family:"Indie Flower";
    src:url("../imgs/myfont.otf") format("opentype");
}

body { padding:0; margin:0; font-family:"Indie Flower", Verdana, Arial; font-size:16px; letter-spacing:0.1em; text-align:center; background:#e7e7e7; }
#hlavicka { background:linear-gradient(rgba(20, 20, 31, .7), rgba(20, 20, 31, .7)), url("../imgs/sici-stroj.jpg"); background-position:center center; background-repeat:no-repeat; background-size:cover; height:80px; position:relative; }
    #hlavicka img { display:none; position:absolute; top:10px; left:5px; height:60px; }
    #hlavicka h1 { color:#FFFFFF; margin:0; line-height:80px; vertical-align:middle; font-size:-webkit-xxx-large; }
    #hlavicka h2 { display:none; color:#000; margin:0; line-height:60px; vertical-align:middle; font-size:xx-large;  }
#topMenu { width:calc(100% - 5px); padding-top:5px; padding-bottom:5px; text-align:center; }
    #topMenu * { margin-bottom:0; }
    #topMenu #kosikPocet { background-color:#FF0000; color:#FFFFFF; padding:0 8px 0 8px; font-size:larger; border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px; }
#content { max-width:1370px; margin:0 auto; }
#footer { margin-top:100px; margin-bottom:20px; }

dialog { border-width:1px; font-weight:bold; z-index:999; }
dialog.error { background-image:linear-gradient(#FF0000, #FFFFFF); }
    dialog.error button { background:#E63F32; color:#000000; border-width:1px; }
dialog.success { background-image:linear-gradient(green, #FFFFFF); }
    dialog.success button { background:#44bd64ff; color:#FFFFFF; border-width:1px; }

hr { border:0; height:1px; width:40%; margin-top:30px; margin-bottom:30px; background-image:linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); }
h1,h2,h3 { color:#3B73B9; }
a, a:hover, a:active, a:visited, .odkaz { color:#3B73B9; cursor:pointer; }
.r { text-align:right !important; }
.l { text-align:left !important; }
.c { text-align:center !important; }
.m0 { margin:0; }
.fr { float:right; }
.fl { float:left; }
.warn { color:#FF0000; font-weight:bold; }
.kulate {   border-radius:10px;              -webkit-border-radius:10px;                -moz-border-radius:10px; }
.kulateTR { border-top-right-radius:10px;    -webkit-border-top-right-radius:10px;      -moz-border-radius-topright:10px; }
.kulateTL { border-top-left-radius:10px;     -webkit-border-top-left-radius:10px;       -moz-border-radius-topleft:10px; }
.kulateBR { border-bottom-right-radius:10px; -webkit-border-bottom-right-radius:10px;   -moz-border-radius-bottomright:10px; }
.kulateBL { border-bottom-left-radius:10px;  -webkit-border-bottom-left-radius:10px;    -moz-border-radius-bottomleft:10px; }

#lblPouceni { width:fit-content; margin:0 auto; font-weight:normal; padding-bottom:15px; cursor:pointer; color:#FF0000; }
#pouceni { width:calc(90% - 10px); max-width:430px; margin:0 auto 10px auto; border:1px solid #000000; padding:0 5px 10px 5px; position:relative; background:#FFFFFF; }
    #pouceni img { position:absolute; top:10px; right:10px; cursor:pointer; }
#filtr { width:calc(90% - 2px); max-width:440px; margin:0 auto 10px auto; border:1px solid #000000; padding:0 0 10px 0; position:relative; background:#FFFFFF; }
    #filtr .nadpis { height:calc(25px - 1px); line-height:calc(25px - 1px); margin-bottom:10px; border-bottom:1px solid #000000; font-weight:bold; padding-left:5px; background-color:#3B73B9; color:#FFFFFF; }
    #filtr .detail { margin-bottom:32px; }
    #filtr .detail h3 { margin-top:10px; margin-bottom:5px; }
    #filtr .detail h3:first-of-type { margin-top:0; }

.odstavec { width:95%; max-width:450px; margin:10px auto 0 auto; }

.registrace { width:calc(90% - 2px); max-width:450px; border-collapse:collapse; margin:0 auto; }
.registrace .zadani { width:calc(100% - 12px); border:1px solid #000000; border-radius:8px; background:#FFFFFF; padding:5px; margin-bottom:10px; }
.registrace .zadani input:not(.butt)  {
    height:30px;
    font-size:18px;
    color:rgb(116, 116, 116);
    background:#FFFFFF;
    border-radius:0 !important;
    border:none;
    border-bottom:1px solid #44514580;
    margin-bottom:0;
}
.registrace textarea { height:calc(150px - 4px); font-size:20px; }
.registrace .zadani #autoCompleteAddress { width:340px; padding-left:0; }
.registrace .butt { width:auto; min-width:100px; height:50px; font-weight:bold; background:#44bc64; color:#FFFFFF; }
.registrace .reset { background:#f7be00; color:#000000; }

/* OAuth Login */
.login-btn { display:inline-flex; justify-content:space-between; width:260px; align-items:center; padding:10px 16px; text-decoration:none; color:white !important; transition:background-color 0.3s; box-shadow:0 2px 4px rgba(0,0,0,0.2); }
.login-btn img { width:20px; height:20px; margin-right:10px; }
.google-btn { background-color:#4285F4; }
.google-btn:hover { background-color:#3367D6; }
.facebook-btn { background-color:#3b5998; }
.facebook-btn:hover { background-color:#2d4373; }
.seznam-btn { background-color:#CC0000; }
.seznam-btn:hover { background-color:#a1080d; }

/* Tabulka */
.TwoCols { width:95%; max-width:450px; border-collapse:collapse; margin:0 auto; }
    .TwoCols .firstRow th, .TwoCols .firstRow td { border-top:none; }
    .TwoCols .lastRow th, .TwoCols .lastRow td { border-bottom:none; }
    .TwoCols .warn { color:#FF0000; font-weight:bold; }
    .TwoCols th { position:relative; vertical-align:top; text-align:left; border-top:1px solid #c9c9c9; border-bottom:1px solid #c9c9c9; padding-top:5px; padding-bottom:5px; }
    .TwoCols th small { font-weight:normal; }
    .TwoCols td { position:relative; vertical-align:top; text-align:right; border-top:1px solid #c9c9c9; border-bottom:1px solid #c9c9c9; padding-top:5px; padding-bottom:5px; }

.polozka { display:inline-block; width:calc(90% - 2px); max-width:440px; margin:0 auto 10px auto; border:1px solid #000000; text-align:left; position:relative; background:#FFFFFF; }
.polozka.objednavky { display:inline-grid; }
.polozka.objednavky.nezaplacena { background:#ffa4a433; }
.polozka.komunikace { width:90%; max-width:none; }
    .polozka.komunikace.smerP { margin-left:20px; }
    .polozka.komunikace.smerO { margin-right:20px; }

    /* Nadpis */
    .polozka .nadpis { height:calc(25px - 1px); line-height:calc(25px - 1px); border-bottom:1px solid #000000; font-weight:bold; padding-left:5px; }
    .polozka .nadpis .info { float:right; margin-right:3px; }
    .polozka .nadpis img { float:right; margin-right:3px; margin-top:4px; }
    
    /* Administrace */
    .polozka .akce { margin:0; padding-top:5px; text-align:center; }
    .polozka .akce input { width:80px; height:25px; padding:0; margin-bottom:5px; cursor:pointer; }
    
    /* Seznam objednávek */
    .polozka .detail { padding:5px; margin-bottom:15px; }
    .polozka .detail.mb0 { margin-bottom:0; }
    .polozka .detail .TwoCols { font-size:small; width:100%;  }
    
    /* Seznam klientů - adresa */
    .polozka .adresa { height:85px; text-align:left; padding:5px; position:relative; }
    
    /* Fotogalerie */
    .polozka .gallery-container { display:flex; align-items:center; position:relative; width:calc(100% - 10px); margin:0 5px 0 5px; }
    .polozka .gallery-container .gallery-wrapper { width:calc(100% - 0px); overflow:hidden;    }
    .polozka .gallery-container .gallery-wrapper .gallery { display:flex; transition:transform 0.3s ease-in-out; }
    .polozka .gallery-container .gallery-wrapper .gallery img { height:120px; border:3px solid #c9c9c9ff; margin-right:10px; }
    .polozka .gallery-container button.prev, .polozka .gallery-container button.next { width:auto; height:70px; padding:10px; background-color:rgba(0, 0, 0, 0.3); color:#FFFFFF; border:none; cursor:pointer; z-index:1;}
    .polozka .gallery-container button.prev { margin-right:5px; }
    .polozka .gallery-container button.next { margin-left:5px; }

    /* Aukce */
    .polozka .infoAukce { text-align:left; font-size:14px; padding:5px; position:relative; }
    
    /* Cena + tlačítka */
    .polozka .nakup { clear:both; width:calc(100% - 5px); margin-top:10px; margin-bottom:5px; position:relative; }
        .polozka .nakup .cena { width:40%; font-weight:bold; font-size:18px; margin-left:10px; padding-bottom:5px; }
            .puvodni_cena { margin-left:5px; font-size:small; color:#FF0000; display:inline-block; position:relative; top:-10px; }
            .puvodni_cena::before, .puvodni_cena::after { content:''; position:absolute; top:50%; left:0; width:100%; height:1px; background-color:#FF00004a; transform-origin:center; }
            .puvodni_cena::before { transform:rotate(-15deg); }
            .puvodni_cena::after  { transform:rotate( 15deg); }
        .polozka .nakup .kup_ted { width:235px; height:30px; margin-bottom:0; position:absolute; bottom:0; right:0; }
        .polozka .nakup .filtr { width:160px; height:30px; margin-bottom:0; position:absolute; bottom:0; right:0; }
        .polozka .nakup .filtr.reset { width:160px; right:165px; }
        .polozka .nakup .odstranitZKosiku { width:235px; height:30px; margin-bottom:0; position:absolute; bottom:0; right:0; }
        .polozka .nakup .nabidka { width:60px; height:24px; margin-bottom:0; position:absolute; bottom:0; right:164px; font-weight:bold; padding-left:5px; font-size:18px; text-align:center; }
        .polozka .nakup .aukce.disabled { width:235px; height:30px; margin-bottom:0; position:absolute; bottom:0; right:0; }
        .polozka .nakup .aukce:not(.disabled) { width:165px; height:30px; margin-bottom:0; position:absolute; bottom:0; right:0; }
        .polozka .nakup p { width:auto/*calc(100% - 5px)*/; height:30px; font-weight:bold; font-size:18px; text-align:right; line-height:30px; vertical-align:middle; margin-bottom:0; position:absolute; bottom:0; right:0; }
        .polozka .nakup .butt { float:left; margin:-35px 0 0 5px; }
    .polozka .zaplacena p { color:#44bc64; }
    .polozka .nezaplacena p { color:#e63f32; }    

    /* Informace v košíku */
    .polozka small { font-weight:normal; text-align:center; padding-left:5px;  }
    
    /* Zabarvení nadpisu podle stavu */
    .prodano, .skryto, .vydrazeno { filter:opacity(60%); }
    .koncept .nadpis { background-color:#f7be00; }
    .nahled .nadpis, .prodej .nadpis { background-color:#e1fdd1; }
    .prodano .nadpis, .vydrazeno .nadpis, .skryto .nadpis { background-color:#e63f32; }

    /* Klíčová slova */
    .keyword { display:inline-block; padding:5px; margin:5px 0 5px 5px; background-color:#3B73B9; color:#FFFFFF; font-size:small; font-weight:bold; border-radius:10px; }

/*************/
/* FORMULARE */
/*************/
label, small { display:block; width:100%; font-weight:bold; margin-bottom:5px; }
input, button, select, option, textarea { font-family:inherit; letter-spacing:0.1em; width:calc(100% - 4px); height:calc(25px - 4px); line-height:25px; margin-bottom:20px; padding-top:3px; background-color:#eeeeee; border:1px solid #000000; }
select, input[type="file"] { height:25px; }
input[type="checkbox"] { width:15px; height:15px; margin:3px 3px 3px 4px; }

.formular { width:90%; max-width:500px; margin:0 auto; }
    .formular input:not(.butt), .formular select, .formular option, output { height:calc(35px - 4px); line-height:35px; font-size:20px; }
    .formular textarea { height:calc(300px - 4px); font-size:20px; }
    .formular a, .formular a:hover, .formular a:active, .formular a:visited { color:#000000; text-decoration:none;  }
    .formular a:hover { text-decoration:underline; }
    .formular input[type="checkbox"] { width:15px; height:15px; margin:3px 3px 3px 4px; }
    .formular input[type="range"] { width:80%; height:15px; }
    .formular output { font-size:25px; font-weight:bold; }
    .formular .checkbox_rozmery { width:205px; display:inline-block; text-align:left; }

fieldset { max-width:450px; background-color:#eeeeee; padding:0; margin:10px auto 10px auto; border:1px solid #000000; text-align:center; }
    fieldset legend { background-color:gray; color:#FFFFFF; padding:5px 10px; font-weight:bold; }
    fieldset input { width:calc(100% - 20px); }

.range-slider-container { margin-left:15px; margin-bottom:5px; display:flex; align-items:center; gap:25px; }
#slider { flex:1; }
#selectedRange { font-weight:bold; text-align:center; margin-right:10px; }
.noUi-connect { background:#44bd64ff/*#3B73B9*/; }

.auto  { width:auto !important; display:inline-block; }
.butt, button { width:100px; height:35px; font-weight:bold; background:#44bc64; color:#FFFFFF; cursor:pointer; }
.butt:not(.reset):not(.exit):not(.back):not(.disabled):hover, button:hover { background-color:#44bc6496; color:#000; }

.reset { background:#f7be00; color:#000000; }
.reset:hover { background-color:#f7be0096; color:#000; }

.exit { background:#e63f32; color:#FFFFFF; }
.exit:hover { background-color:#e63f3296; color:#000; }

.back { background:#ebebeb; color:#000000; }
.back:hover { background-color:#000; color:#FFFFFF; }

.disabled { background:#c9c9c9; color:#000000; cursor:not-allowed; }

.catLabel { margin-right:15px; position:relative; }
.catLabel input { margin:0 5px 0 0; position:relative; top:2px; }

small.error, p.error { border:none; font-weight:bold; color:#FF0000; }
small.normal { font-weight:normal; }

/*****************/
/*  FOTOGALERIE  */
/*****************/
.divFoto { position:relative; display:inline-block; }
    .divFoto .nahled { height:calc(120px - 4px); border:3px solid #c9c9c9ff; margin-left:10px; margin-bottom:10px; }
    .divFoto .nahled_kosik { height:calc(60px - 4px); border:2px solid #c9c9c9ff; margin-left:5px; margin-bottom:5px; }
    .divFoto .del { position:absolute; bottom:15px; right:3px; padding:3px; /*background:#FFFFFF;*/ }

/*************/
/*  Tablety  */
/*************/
@media screen and (min-width:600px) {
    #hlavicka .logoWhite { display:block; }
}

/**************/
/*  Monitory  */
/**************/
@media screen and (min-width:906px) {
    #hlavicka { height:200px; }
    #hlavicka::before { content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient(to bottom, transparent, #e7e7e7); }
        #hlavicka .logoWhite { display:none; }
        #hlavicka .logoBlack { display:block; top:50px; left:50px; height:120px; }
        #hlavicka h1 { position:relative; top:30px; }
        #hlavicka h2 { position:relative; top:20px; left:110px; display:inline-block; }
    #pouceni { width:880px; max-width:none; }
    #filtr { width:880px; max-width:none; }
    .polozka .akce { height:30px; }
    .polozka .gallery-container { height:130px; }
    .polozka .infoAukce { height:15px; }
    .TwoCols { max-width:800px; }
}
@media screen and (min-width:1000px) {
    #hlavicka h1 { left:-50px; }
    .TwoCols { max-width:900px; }
}
@media screen and (min-width:1200px) {
    #hlavicka h1 { left:-100px; }
    .TwoCols { max-width:1100px; }
}
@media screen and (min-width:1357px) {
    #hlavicka h1 { left:-150px; }
    #pouceni { width:1330px; }
    #filtr { width:1330px; }
    .TwoCols { max-width:1200px; }
}