@charset "UTF-8";

.konfig-oci{
    margin-top:-10px;padding:10px 0;
}
.konfig-oci:not(.otevreny) .oci-inner:before{
    content:"To view the options, you must select the previous product parameters.";
}
.konfig-oci:not(.otevreny) .oci-inner>div{
    display:none!important;
}
.konfig-oci:not(.open-row) .oci-inner{
    display:none;
}
.konfig-oci.open-row h2:after{
    transform:rotate(180deg);
}
.konfig-oci .oci-inner .popis-textu p{
    margin-bottom:5px;
}
.konfig-oci>h2{
    align-items:center;
    color:#000;
    cursor:pointer;
    display:flex;
    font-size:20px;
    font-weight:600;
    margin:0;
    padding:10px;
    position:relative;
}

.konfig-oci>h2:after{
    content:"\e90e";
    display:inline-block;
    font-family:Shoptet;
    font-size:10px;
    position:absolute;
    right:10px;
    top:50%;
    transition:transform .3s ease-out;
}

.konfig-oci>h2 span.number-step{
    align-items:center;
    background-color:#c4cad5;
    border-radius:30px;
    display:flex;
    font-size:16px;
    height:30px;
    justify-content:center;
    margin-right:10px;
    width:30px;
}

.konfig-oci>div{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    padding:10px;
    width:100%;
}


.konfig-oci>div h2{
    color:#000;
    font-weight:600;
    margin-top:0;
    width:100%;
}

.konfig-oci>div .boxik{
    margin-bottom:10px;
}
.konfig-oci>div .boxik h2{
    color:#000;
    font-size:16px;
    font-weight:600;
    margin:0 0 10px;
}

.konfig-oci>div .boxik select{
    width:100%;
}
.konfig-oci>div>div{
    width:48%;
}

@media (max-width:479px){
    .konfig-oci>div>div{
        width:100%;
    }
}
.konfigurator{
    margin:10px 0;
}
.konfigurator .boxik{
    border-bottom:1px solid #c4cad5;
    padding:10px 0;
}
.konfigurator .boxik:not(.otevreny):not(:first-of-type) .config-box:before{
    content:"To view the options, you must select the previous product parameters.";
}
.konfigurator .boxik:not(.otevreny):not(:first-of-type) .config-box>div{
    display:none!important;
}

.konfigurator .boxik[data-display="0"] .barvaskla:before{
    content:"Unfortunately, it is not possible to choose the color of the glass in this combination. For colored glass, you must choose a different combination.";
}
.konfigurator .boxik:not(.open-row) .config-box,.konfigurator .boxik:not(.open-row) .popis-textu,.konfigurator .boxik[data-display="0"] .barvaskla>div{
    display:none;
}

.konfigurator .boxik.open-row h2:after{
    transform:rotate(180deg);
}
.konfigurator .boxik.open-row .config-box{
    display:flex!important;
}
.konfigurator .boxik.open-row .popis-textu{
    display:block;
}
.konfigurator .boxik h2{
    align-items:center;
    color:#000;
    cursor:pointer;
    display:flex;
    font-weight:600;
    margin:0;
    padding:10px;
    position:relative;
}

@media (max-width:648px){
    .konfigurator .boxik h2{
        flex-wrap:wrap;
    }
}
@media (max-width:479px){
    .konfigurator .boxik h2{
        font-size:17px;
        padding-left:40px;
        padding-right:30px;
    }
}

.konfigurator .boxik h2:after{
    content:"\e90e";
    display:inline-block;
    font-family:Shoptet;
    font-size:10px;
    position:absolute;
    right:10px;
    top:20px;
    transition:transform .3s ease-out;
}
.konfigurator .boxik h2 span.number-step{
    align-items:center;
    background-color:#c4cad5;
    border-radius:30px;
    display:flex;
    font-size:16px;
    height:30px;
    justify-content:center;
    margin-right:10px;
    width:30px;
}

@media (max-width:479px){
    .konfigurator .boxik h2 span.number-step{
        left:0;position:absolute;
    }
}
.konfigurator .boxik h2 span.popisek{
    align-items:center;
    border:1px solid #c4cad5;
    border-radius:5px;
    display:flex;
    font-size:16px;
    font-weight:400;
    margin-left:10px;
    padding:5px;
    position:absolute;
    right:25px;
    top:50%;
    transform:translateY(-50%);
}

@media (max-width:648px){
    .konfigurator .boxik h2 span.popisek{
        display:block;
        margin:15px 0 0;
        position:static;
        top:auto;
        transform:none;
        width:100%;
    }
}

.konfigurator .boxik h2 span.popisek .name{
    font-weight:600;
}
.konfigurator .boxik h2 span.popisek .second-name:not(:empty):before{
    content:" - ";
    margin-left:3px;
}
.konfigurator .boxik h2 span.popisek img{
    margin-right:10px;
    max-height:25px;
    max-width:25px;
}
.konfigurator .boxik .popis-textu{
    margin:0;
    padding:0 10px;
}

.konfigurator .boxik .config-box{
    display:flex;
    flex-wrap:wrap;
    margin:0 -5px;
    padding:0 10px;
}

.konfigurator .boxik .config-box .check{
    background-color:#fff;
    border:1px solid #c4cad5;
    border-radius:5px;
    box-shadow:0 6px 12px rgba(0,0,0,.08);
    cursor:pointer;
    display:flex;
    flex-wrap:wrap;
    margin:5px;
    width:calc(20% - 10px);
}

@media (max-width:767px){
    .konfigurator .boxik .config-box .check{
        width:calc(33.33333% - 10px);
    }
}

@media (max-width:500px){
    .konfigurator .boxik .config-box .check{
        width:calc(50% - 10px);
    }
}

.konfigurator .boxik .config-box .check.active{
    border:1px solid #66bf3a;
    position:relative;
}

.konfigurator .boxik .config-box .check.active.missing-image:before{
    top:50%;
    transform:translate(-50%,-50%);
}

.konfigurator .boxik .config-box .check.active:before{
    align-items:center;
    background-color:#66bf3a;
    border-radius:26px;
    color:#fff;
    content:"\e913";
    display:flex;
    font-family:Shoptet;
    font-size:12px;
    font-weight:400;
    height:22px;
    justify-content:center;
    left:50%;
    position:absolute;
    text-align:center;
    top:44px;
    transform:translateX(-50%);
    width:22px;
}

.konfigurator .boxik .config-box .check .image{
    max-height:104px;
    padding:5px;
    text-align:center;
    width:100%;
}

.konfigurator .boxik .config-box .check .image.missing{
    padding:0;
}

.konfigurator .boxik .config-box .check img{
    height:100%;
    max-height:104px;
}

.konfigurator .boxik .config-box .check .boxtext{
    width:100%;
}

.konfigurator .boxik .config-box .check .boxtext .name{
    color:#0f0f0f;
    display:block;
    font-size:14px;
    font-weight:600;
    padding:5px;
    text-align:center;
}

.konfigurator .boxik .config-box .check .boxtext .second-name{
    display:block;
    font-size:12px;
    font-weight:400;
    padding:0 5px;
    text-align:center;
}

.konfigurator .boxik .config-box .check .admin-name{
    display:block;
    padding:5px;
    text-align:center;
    width:100%;
}

.konfigurator .typskel .boxtext .price{
    color:#000;
    display:block!important;
    font-size:12px;
    font-weight:600;
    text-align:center;
}

body:not(.open-config) .konfig-wrap{
    display:none;
}

body.open-config #cboxOverlay{
    background-color:rgba(0,0,0,.75);
    display:block!important;
    opacity:.65;
    visibility:visible;
}

.konfig-wrap{
    background-color:#fff;
    border-radius:10px;
    height:650px;
    left:50%;
    max-height:90%;
    max-width:90%;
    overflow:hidden;
    padding:20px 20px 0;
    position:fixed;
    top:50%;
    transform:translate(-50%,-50%);
    width:900px;
    z-index:999999;
}

@media (max-width:400px){
    .konfig-wrap{
        padding:10px 10px 0;
    }
}

.konfig-wrap .close{
    color:#000;
    cursor:pointer;
    font-size:15px;
    position:absolute;
    right:10px;
    top:10px;

}
.konfig-wrap .close:hover{
    color:#f1533a
}
.konfig-wrap .close:before{
    content:"\e912";
    font-family:Shoptet;
}

.konfig-wrap .top{
    height:calc(100% - 95px);
    overflow-x:hidden;
    overflow-y:auto;
}
.konfig-wrap .top .rady-pruvodce{
    margin:0;
}
.konfig-wrap .top .title{
    align-items:center;
    display:flex;
    flex-wrap:wrap;
}

.konfig-wrap .top .title h2{
    color:#000;
    font-weight:600;
    margin:0;
    order:-100;
    width:30%;
}


@media (max-width:560px){
    .konfig-wrap .top .title h2{
        margin-bottom:10px;width:100%;
    }
}

.konfig-wrap .top .title .rady-pruvodce{
    width:70%;
}

@media (max-width:560px){
    .konfig-wrap .top .title .rady-pruvodce{
        width:100%;
    }
}
.konfig-wrap .bottom{
    align-items:center;
    background-color:#f7f7f7;
    display:flex;
    height:95px;
    justify-content:flex-end;
    margin:0 -20px;
    padding:0 20px;
    position:relative;
    width:calc(100% + 40px);
}
@media (max-width:479px){
    .konfig-wrap .bottom{
        justify-content:space-between;
    }
}

@media (max-width:414px){
    .konfig-wrap .bottom{
        padding:0 5px;
    }
}
.konfig-wrap .bottom.not-buy .add-to-cart{
    cursor:not-allowed;
    opacity:.5;
    pointer-events:none!important;
}

.konfig-wrap .bottom .add-to-cart{
    margin:0 0 0 20px;
    order:20;
}

@media (max-width:900px){
    .konfig-wrap .bottom .add-to-cart .quantity{
        display:none;
    }
}
.konfig-wrap .bottom .add-to-cart button{
    min-width:192px;
}

@media (max-width:479px){
    .konfig-wrap .bottom .add-to-cart button{
        min-width:unset;
    }
}
.konfig-wrap .bottom .p-final-price-wrapper{
    display:flex;
    flex-direction:column;
    margin:0;
    text-align:right;
}

.konfig-wrap .bottom .p-final-price-wrapper:before{
    content:"Total price (frame + glass according to selected specifications)";
    display:block;
    max-width:100%;
    text-align:left;
}
@media (max-width:920px){
    .konfig-wrap .bottom .p-final-price-wrapper:before{
        max-width:30%;
        text-align:left;
    }
}
@media (min-width:768px){
    .konfig-wrap .bottom .p-final-price-wrapper:before{
        left:25px;
        margin-bottom:0;
        position:absolute;
        top:50%;
        transform:translateY(-50%);
    }
}
@media (max-width:767px){
    .konfig-wrap .bottom .p-final-price-wrapper:before{
        margin-bottom:5px;
        max-width:100%;
        position:static;
        text-align:right;
        width:100%;
    }
}
@media (max-width:600px){
    .konfig-wrap .bottom .p-final-price-wrapper:before{
        font-size:11px;
    }
}

.konfig-wrap .bottom .p-final-price-wrapper .price-measure,.konfig-wrap .bottom .p-final-price-wrapper .price-save,.konfig-wrap .bottom .p-final-price-wrapper .price-standard{
    font-size:18px;
    margin-right:0;
}

.konfig-wrap .bottom .p-final-price-wrapper .price-measure,.konfig-wrap .bottom .p-final-price-wrapper .price-standard{
    display:none;
}
@media (max-width:550px){
    .konfig-wrap .bottom .p-final-price-wrapper .price-final{
        font-size:20px;
    }
}
.konfigurovat{
    padding-left:180px;
}
@media (max-width:479px){
    .konfigurovat{
        padding-left:120px;
    }
}

@media (max-width:360px){
    .konfigurovat{
        padding-left:112px;
    }
}

@media (max-width:312px){
    .konfigurovat{
        padding-left:0;
    }
}
.konfigurovat .configurovat_open{
    align-items:center;
    background-color:#e6b480;
    border-radius:76px;
    box-shadow:0 3px 6px rgba(0,0,0,.12);
    color:#fff;
    cursor:pointer;
    display:inline-flex;
    font-size:20px;
    height:60px;
    justify-content:space-between;
    margin-bottom:20px;
    padding:0 20px;
    width:230px;
}

@media (max-width:1199px){
    .konfigurovat .configurovat_open{
        font-size:16px;
    }
}

@media (max-width:767px){
    .konfigurovat .configurovat_open{
        font-size:13.5px;
    }
}

@media (max-width:479px){
    .konfigurovat .configurovat_open{
        height:50px;
        width:200px;
    }
}

@media (max-width:360px){
    .konfigurovat .configurovat_open{
        height:50px;
        padding:0 12px;
        width:163px;
    }
}

.konfigurovat .configurovat_open:after{
    content:url(/user/documents/upload/ico-cocka.png);
    display:inline-flex;
    margin-left:5px;
    position:relative;
    top:3px;
}

.p-info-wrapper{
    display:flex;
    flex-direction:column;
}

.rady-pruvodce{
    color:#000;
    font-weight:600;
    margin:20px 0;
    order:-50;
    padding:15px;
    text-align:right;
}

.rady-pruvodce span{
    color:#f1533a;
    cursor:pointer;
    text-decoration:underline;
}

.rady-pruvodce span:hover{
    text-decoration:none;
}

.main-link-surcharges ul{
    margin:0;
    padding:0;
    text-align:left;
}

@media (min-width:479px){
    .main-link-surcharges ul{
        -moz-columns:2;
        column-count:2;
        -moz-column-gap:5px;
        column-gap:5px;
    }
}

.main-link-surcharges ul li{
    color:#333;
    list-style:none;
}

body:not(.open-rady) .rada{
    display:none;
}

body.open-rady #cboxOverlay{
    background-color:rgba(0,0,0,.75);
    display:block!important;
    opacity:.65;
    visibility:visible;
}

.rada{
    background-color:#fff;
    border-radius:10px;
    height:650px;
    left:50%;
    max-height:90%;
    max-width:90%;
    overflow:auto;
    padding:20px 20px 0;
    position:fixed;
    top:50%;
    transform:translate(-50%,-50%);
    width:900px;z-index:999999;
}
    
@media (max-width:400px){
    .rada{
        padding:10px 10px 0;
    }
}

.rada .close{
    color:#000;
    cursor:pointer;
    font-size:15px;
    position:absolute;
    right:10px;
    top:10px;
}

.rada .close:hover{
    color:#f1533a;
}
.rada .close:before{
    content:"\e912";
    font-family:Shoptet;
}