/*******************************************************************************
pro konfigurátor
********************************************************************************/
.konf-prop-table td,
.konf-prop-table td * { font-size:18px !important;  }

#konfigurator-wrap { font-size:16px !important; }

/*** new konfigurator
--------------------------------------------------------------------------------*/
.sticky-top { height:0; }
.preference-box {
    position:-webkit-sticky; position:sticky; top:0;
    margin-top:30px;
    width:100%; font-size:16px !important;
    z-index:8000;
    background:#FFFFFF;
}
.preference-box.is-sticky {
    padding:20px 20px 0 20px;
    -webkit-box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.47);
    box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.47);
}

/*** option banner
------------------------------------------------------------------------------------------------------------*/
.preference-box.with-banner.form-not-sent.with-banner { margin-bottom:24px; /*background: beige;*/ }
.preference-box.with-banner .banner-option { display:block; position: absolute; top:-5px; right:0; z-index:99999; }

/*.preference-box.with-banner.is-sticky .banner-option { display:none; }*/
.preference-box.with-banner.form-not-sent.is-sticky { padding:45px 20px 25px 20px;}
.preference-box.with-banner.form-not-sent.is-sticky .banner-option { display:block; position: absolute; top:12px; right:20px; }

.preference-box.with-banner.form-sent .banner-option { display:block; position: absolute; top:15px; right:20px; }

@media only screen and (max-width: 1350px) {
    .preference-box.with-banner.form-not-sent.is-sticky { padding:20px 20px 0 20px; }
    .preference-box.with-banner.form-not-sent.is-sticky .banner-option { display:none; }
}

@media only screen and (max-width: 1280px) {
    /*.preference-box.with-banner.form-not-sent { min-height: 80px; background: aqua; }*/
    .preference-box.with-banner.form-not-sent .banner-option {  display:none; }
}
@media only screen and (max-width: 1080px) {
    .preference-box.with-banner.form-sent .banner-option { display:none; }
}
@media only screen and (max-width: 680px) {
    .preference-box.with-banner.form-sent .banner-option { display:none; }
}
.preference-box.with-banner .banner-option.hide { display:none !important; }
/*------------------------------------------------------------------------------------------------------------*/

.preference-box .silver-btn {
    -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none;
    display:inline-block;
    padding:0 15px; margin-bottom: 20px;
    height:26px; line-height:26px; text-align:left;
    font-size:12px; font-weight:400; color: #ffffff; text-transform:uppercase;
    border:none; border-radius:10px;
    -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none;
    background-color:#A9ADB0;
}
.preference-box .silver-btn--send {
    padding:0 40px 0 15px;
    background-image: url(../css/imgs/konfigurator/obalka-32.png);
    background-repeat: no-repeat;
    background-size: 18px;
    background-position: 94% center;
}
.preference-box .silver-btn--reset {
    padding:0 40px 0 15px;
    background-image: url(../css/imgs/konfigurator/x-reset.png);
    background-repeat: no-repeat;
    background-position: 94% center;
}

@media only screen and (max-width: 680px) {
    .preference-box { position:static;}
    .preference-box.is-sticky {
        padding:0;
        -webkit-box-shadow:none;
        box-shadow:none;
    }
}

.slider                  { margin:0; font-size:20px !important; background-color:#FFFFFF; z-index:9999999; }
#devices.slider          { /*margin-top:20px;*/ }
#product-filters.slider  { margin:20px 0; }

.slide__switch  { padding:10px 10px; font-size:16px;  text-align:left; color:#29A4A9; cursor:pointer;  border-bottom:2px solid #29A4A9; }
.slide__switch .arrow  { display:inline-block;  writing-mode: vertical-rl; font-size:32px; color:#29A4A9;   }

#product-filters .slide__content { padding:0; border-bottom:2px solid #29A4A9; }
.slide__wrap {margin:30px auto 0 auto; padding:0; max-width:90%; }
#product-filters .slide__wrap { margin-bottom:40px; }

#konfigurator-wrap .buttons-wrap {
    padding-bottom:0;
}
#konfigurator-wrap a.img-button {
    display:block; float:left;
    width:15.25%;
    margin-right:1.69%;
}
#konfigurator-wrap a.img-button:last-child { margin-right:0; }

#konfigurator-wrap a.img-button,
#konfigurator-wrap a.img-button:hover { text-decoration:none !important; }

#konfigurator-wrap a.img-button .ilu {
    display:block;
    -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;
    width:100%; height:100%;

    background-position:center center;
    background-repeat:no-repeat;

    border-style:solid;
    border-color:#C7C7C7;
    border-width:1px 1px 0 1px;
}
#konfigurator-wrap a.img-button .ilu img {/*float:left;*/}

#konfigurator-wrap a.img-button .title {
    display:block;
    -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;
    width:100%; height:50px; line-height:50px;
    color:#FFFFFF; text-align:center;
    background:#50B0B9;
}
#konfigurator-wrap a.img-button:hover .title { background:#1D878B; }
#konfigurator-wrap a.img-button.selected .title {
    color:#010101;
    background:#D5E0EA;
    border:1px solid #C7C7C7;
}
#konfigurator-wrap a.img-button .title > span { margin-top:7px; color:#FFFFFF !important; display:inline-block !important; line-height:18px !important; }
#konfigurator-wrap a.img-button.selected .title > span { color:#010101 !important;  }

#konfigurator-wrap .form-box {
    padding-top:10px;
}

@media (max-width:930px) {
    #konfigurator-wrap a.img-button { width:32.0%; margin-right:2%; margin-bottom:15px; }
    #konfigurator-wrap a.img-button.hubs,
    #konfigurator-wrap a.img-button.chargers {margin-right:0%; }

    #konfigurator-wrap .form-box { padding-top:10px; }
}
@media (max-width:470px) {
    #konfigurator-wrap a.img-button .title { height:50px; line-height:50px; padding:3px 5px 0 5px; }
}

/*** řádky konfigurátoru
---------------------------------------------------------------------------*/
#konfigurator-wrap .left-caption { position:relative; }
#konfigurator-wrap .left-caption.comp { /*border-bottom:2px solid #29A4A9;*/ }

#konfigurator-wrap .item { display:table; /*width:100%;*/ padding-left:10px; border-bottom:1px solid #29A4A9; }
#konfigurator-wrap .item--dashed-border { border-bottom:1px dashed #C0C0C0; }
#konfigurator-wrap .item--bott-margin { margin-bottom:20px; }

#konfigurator-wrap .item:first-child { /*border-top:1px solid #29A4A9;*/ }
#konfigurator-wrap .item:last-child { border-bottom:none; }

#konfigurator-wrap .kon-os-wrap { margin-top:20px; padding:20px 0 0 0; border-top:2px solid #E5EDEF; }
#konfigurator-wrap .kon-os-wrap__title { margin-bottom:20px; color: #29A4A9;}

#konfigurator-wrap .item.kon-os.last {border-bottom-width:2px; }
#konfigurator-wrap .item.hide { background:#F2F3F4; /*display:none;*/ }

#konfigurator-wrap .left-caption .item.kon-os.first { /*border-top:1px solid #29A4A9; */  border:none !important; /* pro> --konf2 */ }
#konfigurator-wrap .left-caption .item { /*width:97%; margin-left:3%;*/ width:100%; }
#konfigurator-wrap .left-caption .item.kon-os.last { /*border-bottom:1px solid #29A4A9;*/ border:none !important; /* pro> --konf2 */ }


/* pro> --konf2
---------------------------------------------
#konfigurator-wrap .left-caption .rotate {
    font-size:22px; color:#D7D9D9;
    -webkit-transform-origin:0 0;
    -moz-transform-origin:   0 0;
    -ms-transform-origin:    0 0;
    -o-transform-origin:     0 0;

    -webkit-transform:rotate(-90deg);  Safari
    -moz-transform:rotate(-90deg);     Firefox
    -ms-transform:rotate(-90deg);      IE
    -o-transform:rotate(-90deg);       Opera
    filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);  Internet Explorer
}
*/

/* pro> --konf2
-------------------------------------------
#konfigurator-wrap .left-caption .rotate.top {  position:absolute; left:0; bottom:-8px;   display:none;  }
#konfigurator-wrap .left-caption .rotate.bott { position:absolute; left:0; top:132px;     display:none; } */


#konfigurator-wrap .item .title {
    display:table-cell; position:relative;
    padding:16px 0;
    width:24%; padding-right:10px;
    color:#29A4A9;
}
#konfigurator-wrap .kon-os-wrap .item .title {
    width:unset; min-width:220px;
}

#konfigurator-wrap .left-caption .item.kon-os .title { display:none; } /* pro> --konf2*/

#konfigurator-wrap .item .title * { color:#29A4A9; }
#konfigurator-wrap .item.kon-os .title * { color:#727A7F; }

#konfigurator-wrap .item .list {
    display:table-cell; padding:6px 0 16px 0; vertical-align:top;
    width:100%;
}
#konfigurator-wrap .item.kon-os .list{ width:100%; /* pro> --konf2*/ }

#konfigurator-wrap .item .list .line-wrap { display:inline-block; margin-right:30px; }
#konfigurator-wrap .item .list .line-wrap:last-child { margin-right:0; }

#konfigurator-wrap .item .subtitle { color:#29A4A9; font-weight:600; margin:0 10px 0 14px; margin-top:10px !important; }
#konfigurator-wrap .item .subtitle:first-child { margin-left:0; }

/*** collapse box
--------------------------------------------------------------------*/
#konfigurator-wrap .item .collapse { /*background:rgba(245, 245, 220, 0.5); margin:5px 0;*/}
#konfigurator-wrap .item .collapse .subtitle { margin-left:0; text-decoration: underline; cursor:pointer;	 }

#konfigurator-wrap .item .toggler-arrow { 
    display:inline-block; height: 21px; line-height: 21px; width:20px;
    background-repeat: no-repeat;
    background-position: left bottom;
    cursor:pointer;	
}
#konfigurator-wrap .item .toggler-arrow.off { background-image: url(../css/imgs/collapse-off.png); }
#konfigurator-wrap .item .toggler-arrow.on { background-image: url(../css/imgs/collapse-on.png); }

#konfigurator-wrap .item .collapse .title { padding:0; }
#konfigurator-wrap .item .collapse span.ttip { position: static; margin-right:6px; }
#konfigurator-wrap .item .collapse .ttext { width:400px; }

#konfigurator-wrap .item .collapse .ttext img { display:block; float:left; margin-right:15px; }


#konfigurator-wrap .item .collapse.disabled .subtitle { color:#989EA3; text-decoration: none; cursor:default;	 }
#konfigurator-wrap .item .collapse.disabled .toggler-arrow { -webkit-filter: grayscale(100%); filter: grayscale(100%); opacity: 0.4; cursor:default; }

#konfigurator-wrap .item .sub-line-wrap {padding-left:46px;}

/*** tooltip
--------------------------------------------------------------------*/
/*.servis-form-table .td-title .ttip,  PRO :: servis-form-v01.php  */    
.title span.ttip {
    position:absolute; top:16px; left:0;
    -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;
    display:inline-block; /*position:relative; top:1px;*/
    width:20px; height:20px; line-height:20px; margin-right:10px; padding-left:1px;
    text-align:center; color:#FFFFFF !important;
    background:#DBDDDF;
    border-radius:50%;
    cursor:help;
}

/*.servis-form-table .td-title .ttext, PRO :: servis-form-v01.php */   
.title .ttext {
    visibility:hidden;
    position:absolute; top:20px; left:30px; /*top:150%; left:20%;*/
    width:200px;
    margin-left:-20%; padding:10px 15px;
    font-size:13px; color:#000000 !important; text-align:left;
    background-color:#FFFFE1;
    border-radius:3px;
    border:1px solid silver;
    -webkit-box-shadow:0 0 18px 0 rgba(0,49,98,0.2);
    -moz-box-shadow:   0 0 18px 0 rgba(0,49,98,0.2);
    box-shadow:        0 0 18px 0 rgba(0,49,98,0.2);
    z-index:1;
}
.title .ttext--large { width:40vw; }
.title .ttext > b { color:#1E222F !important; font-weight: 700; }

/*#konfigurator-wrap .item .title .ttext::after {
content:"";
position:absolute;
bottom:100%;
left:10%;
margin-left:-5px;
border-width:5px;
border-style:solid;
border-color:transparent transparent #50B0B9 transparent;
}*/

.ttip:hover > .ttext {
    visibility:visible;
}

#konfigurator-wrap .item .title .title-text { display:block; margin-left:30px; }

@media (max-width:1250px) {
    #konfigurator-wrap .left-caption .item { width:96%; /*margin-left:4%;*/ }

    #konfigurator-wrap .item .title { width:25%; }
    #konfigurator-wrap .item .list  { width:75%; }
}
@media (max-width:1024px) {
    #konfigurator-wrap .item .title { width:30%; }
    #konfigurator-wrap .item .list  { width:70%; }
}
@media (max-width:980px) {
    #konfigurator-wrap .left-caption .item { width:95%; /*margin-left:5%; */}
    #konfigurator-wrap .left-caption .rotate { letter-spacing:9px; }
    #konfigurator-wrap .left-caption .rotate.top { bottom:-2px; }
    #konfigurator-wrap .left-caption .rotate.bott { top:245px; }

    #konfigurator-wrap .left-caption .rotate.lan { letter-spacing:4px; }
    #konfigurator-wrap .left-caption .rotate.lan.bott { top:185px; }


    #konfigurator-wrap .item,
    #konfigurator-wrap .item .title,
    #konfigurator-wrap .item .list { display:block; }

    #konfigurator-wrap .item .title { float:none; width:100%; padding-bottom:0; }
    #konfigurator-wrap .item .list  { float:none; width:100%; }
}
@media (max-width:690px) {
    #konfigurator-wrap .left-caption .item.kon-os.first { padding-top:29px; }
    #konfigurator-wrap .left-caption.products { padding-top:29px; }

    #konfigurator-wrap .left-caption .item { width:100%; margin-left:0; }
    #konfigurator-wrap .left-caption .rotate { letter-spacing:unset;
        font-size:22px; color:#3EA9B1;
        -webkit-transform-origin:unset;
        -moz-transform-origin:   unset;
        -ms-transform-origin:    unset;
        -o-transform-origin:     unset;

        -webkit-transform:unset;
        -moz-transform:unset;
        -ms-transform:unset;
        -o-transform:unset;
        filter:unset;
    }
    #konfigurator-wrap .left-caption .rotate.top { top:10px; }
    #konfigurator-wrap .left-caption .rotate.bott { top:10px; }
}

/*** result count + reset button
---------------------------------------------------------------------------*/
#konfigurator-wrap .result-line { padding-bottom:20px; }
#konfigurator-wrap .result-line h2 {  font-size:24px; margin:0; }
#konfigurator-wrap .result-line h2 a { text-decoration:underline; }
#konfigurator-wrap .result-line h2 a:hover { text-decoration:none; }

#konfigurator-wrap .btn-line {
    margin-top:20px;
}
#konfigurator-wrap .btn-line h2 { float:left; font-size:40px; margin:10px 0 0 0; }
#konfigurator-wrap .btn-line .button-dark.reset { float:right; }


/* RADIOBUTTONY
********************************************************************************/
.radio-wrap {                                                                   margin-top:10px !important;
    display:inline-block !important;                                            width:auto !important;
    position:relative;
    margin-right:14px; padding-right:3px;
    color:#29A4A9;
    cursor:pointer;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}
.radio-wrap--error,
.radio-wrap--error * { color:#DF1A00 !important; }


.radio-wrap.disable { color:#989EA3; /*display:none;*/ }
.radio-wrap.hide { display:none !important; }

/* Hide the browser's default radio button */
.radio-wrap input {
    position:relative; width:20px !important;
    opacity:0;
    cursor:pointer;
}

/* Create a custom radio button */
.radio-wrap .checkmark {
    -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;
    position:absolute; top:2px; right:0;
    height:18px !important;
    width:18px !important;
    background-color:#FFFFFF;
    border:1px solid #29A4A9; border-radius:50%;
}

/* On mouse-over, add a grey background color */
.radio-wrap:hover input ~ .checkmark {
    background-color:#C6EFF0;
}

/* When the radio button is checked, add a blue background */
.radio-wrap input:checked ~ .checkmark {
    background-color:#FFFFFF; border:1px solid #29A4A9;
}
.radio-wrap  input.disable ~ .checkmark {
    background-color:#DBDDDF;
    border:1px solid #D4DFE9;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.radio-wrap .checkmark:after {
    content:"";
    position:absolute;
    display:none;
}

/* Show the indicator (dot/circle) when checked */
.radio-wrap input:checked ~ .checkmark:after {
    display:block;
}

/* Style the indicator (dot/circle) */
.radio-wrap .checkmark:after {
    top:4px;
    left:4px;
    width:8px !important;
    height:8px !important;
    border-radius:50%;
    background:#29A4A9;
}


/*** --konf2
----------------------------------------*/
.radio-wrap--konf2  {
    margin-right:20px; margin-top:unset !important;
    padding-right:0; padding-left:55px;
    height:30px; line-height:30px;
    background-repeat: no-repeat;
    background-position:27px center;
}
.radio-wrap--konf2.windows  { background-image: url(../css/imgs/os-ico-win-green.png); }
.radio-wrap--konf2.macos    { background-image: url(../css/imgs/os-ico-macos-green.png); background-position:27px 0; }
.radio-wrap--konf2.linux    { background-image: url(../css/imgs/os-ico-linux-green.png); }
.radio-wrap--konf2.android  { background-image: url(../css/imgs/os-ico-android-green.png); background-position:27px 2px; }
.radio-wrap--konf2.chromeos { background-image: url(../css/imgs/chrome-OS-icon-green.png); }
.radio-wrap--konf2.ipados   { background-image: url(../css/imgs/os-ico-macos-green.png); background-position:27px 0; }

.radio-wrap--konf2.disable.windows  { background-image: url(../css/imgs/os-ico-win-silver.png); }
.radio-wrap--konf2.disable.macos    { background-image: url(../css/imgs/os-ico-macos-silver.png); background-position:27px 0; }
.radio-wrap--konf2.disable.linux    { background-image: url(../css/imgs/os-ico-linux-silver.png); }
.radio-wrap--konf2.disable.android  { background-image: url(../css/imgs/os-ico-android-silver.png); background-position:27px 2px; }
.radio-wrap--konf2.disable.chromeos { background-image: url(../css/imgs/chrome-OS-icon-grey.png); }
.radio-wrap--konf2.disable.ipados   { background-image: url(../css/imgs/os-ico-macos-silver.png); background-position:27px 0; }

.radio-wrap--konf2  input { position: absolute; left:1px; top:6px; width:0px !important; }
.radio-wrap--konf2 .checkmark  {  right:unset; left:0; top:5px; height:18px !important; width:18px !important; }


/*** jen pro testy
---------------------------------------------*/
.radio-wrap.disable-test .checkmark:after {
    top:4px;
    left:4px;
    width:8px !important;
    height:8px !important;
    border-radius:50%;
    background:#804040;
}

.radio-wrap.disable-test { color:#804040;  }
.radio-wrap  input.disable-test ~ .checkmark {
    background-color:#D6ADAD;
    border:1px solid #804040;
}


/* CHECKBOXY
********************************************************************************/
.chbox-wrap  {
    display:inline-block;
    position:relative;
    margin-top:10px !important; margin-right:14px;  padding-right:5px;
    color:#29A4A9;
    cursor:pointer;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}

.chbox-wrap.disable {  color:#989EA3; /*display:none;*/ cursor: default; }
.chbox-wrap.hide { display:none; }

/* Hide the browser's default checkbox */
.chbox-wrap  input { position:relative; opacity:0; cursor:pointer;  width:20px !important; }

/* Create a custom checkbox */
.chbox-wrap .checkmark {
    -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;
    position:absolute; top:1px; right:0;
    height:20px; width:20px;
    background-color:#FFFFFF;
    border:1px solid #29A4A9;
}

/* On mouse-over, add a grey background color */
.chbox-wrap:hover input ~ .checkmark {
    background-color:#C6EFF0;
}

/* When the checkbox is checked, add a blue background */
.chbox-wrap  input:checked ~ .checkmark {
    background-color:white;
    border:1px solid #29A4A9;
}

.chbox-wrap  input.disable ~ .checkmark {
    background-color:#DBDDDF;
    border:1px solid #D4DFE9;
}

/* Create the checkmark/indicator (hidden when not checked) */
.chbox-wrap .checkmark:after {
    content:"";
    position:absolute;
    display:none;
}

/* Show the checkmark when checked */
.chbox-wrap  input:checked ~ .checkmark:after {
    display:block;
}

/* Style the checkmark/indicator */
.chbox-wrap  .checkmark:after {
    left:6px;
    top:-1px;
    width:4px;
    height:16px;
    border:solid #29A4A9;
    border-width:0 2px 2px 0;
    -webkit-transform:rotate(40deg);
    -ms-transform:rotate(40deg);
    transform:rotate(40deg);
}

.radio-wrap .ttip-text,
.chbox-wrap .ttip-text {
    visibility:hidden;
    position:absolute; top:24px; left:16px;
    width:250px;
    margin-left:-20%; padding:10px 15px;
    font-size:13px; color:#000000 !important; text-align:left;
    background-color:#FFFFE1;
    border-radius:3px;
    border:1px solid silver;
    -webkit-box-shadow:0 0 18px 0 rgba(0,49,98,0.2);
    -moz-box-shadow:   0 0 18px 0 rgba(0,49,98,0.2);
    box-shadow:        0 0 18px 0 rgba(0,49,98,0.2);
    z-index:1;
}
.radio-wrap.tooltip:hover > .ttip-text,
.chbox-wrap.tooltip:hover > .ttip-text {
    visibility:visible;
}
.radio-wrap.tooltip,
.chbox-wrap.tooltip {
    text-decoration: underline;
}

/*** --konf2
----------------------------------------*/
.chbox-wrap--konf2  {
    margin-top:5px !important; /*margin-right:20px;*/ margin-right:10px;
    padding-right:0; padding-left:55px;
    height:30px; line-height:30px;
    background-repeat: no-repeat;
    background-position:27px center;
}
.chbox-wrap--konf2.ios      {padding-left:25px;}
.chbox-wrap--konf2.windows  { background-image: url(../css/imgs/os-ico-win-green.png); }
.chbox-wrap--konf2.macos    { background-image: url(../css/imgs/os-ico-macos-green.png); background-position:27px 0; }
.chbox-wrap--konf2.linux    { background-image: url(../css/imgs/os-ico-linux-green.png); }
.chbox-wrap--konf2.android  { background-image: url(../css/imgs/os-ico-android-green.png); background-position:27px 2px; }
.chbox-wrap--konf2.chromeos { background-image: url(../css/imgs/chrome-OS-icon-green.png); }
.chbox-wrap--konf2.ipados   { background-image: url(../css/imgs/os-ico-macos-green.png); background-position:27px 0; }

.chbox-wrap--konf2.disable.windows  { background-image: url(../css/imgs/os-ico-win-silver.png); }
.chbox-wrap--konf2.disable.macos    { background-image: url(../css/imgs/os-ico-macos-silver.png); background-position:27px 0; }
.chbox-wrap--konf2.disable.linux    { background-image: url(../css/imgs/os-ico-linux-silver.png); }
.chbox-wrap--konf2.disable.android  { background-image: url(../css/imgs/os-ico-android-silver.png); background-position:27px 2px; }
.chbox-wrap--konf2.disable.chromeos { background-image: url(../css/imgs/chrome-OS-icon-grey.png); }
.chbox-wrap--konf2.disable.ipados   { background-image: url(../css/imgs/os-ico-macos-silver.png); background-position:27px 0; }

.chbox-wrap--konf2  input { position: absolute; left:0; top:5px; width:0px !important; }
.chbox-wrap--konf2 .checkmark  {  right:unset; left:0; top:4px; height:20px; width:20px; }


/*** výběr podle notebooku
------------------------------------------------------------------------------*/
#devices {}
.devices__cell { display:block; float:left; margin:10px 30px 10px 0; }

.X-devices__container { /*** <= je to .flexbox **/
    -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between;    justify-content:flex-start;
    -webkit-box-align:start; -ms-flex-align:start; align-items:flex-start;               /*-webkit-box-align:center; -ms-flex-align:center; align-items:center;*/
    -ms-flex-wrap:wrap; flex-wrap:wrap;
}

.X-devices__cell {
    display:block;
    /*-webkit-box-flex:1; -ms-flex-positive:1; flex-grow:1;*/                       /* roztáhne buňku do zbývajícího prostoru např první řádek má 3 boxy a druhý jen 2 == ty 2 rostáhne tak aby zabraly celou šířku mateřského boxu */
    -webkit-box-flex:0; -ms-flex-positive:0; flex-grow:0;                     /* nebude roztahovat buňku nad rozměr obsahu */
    -ms-flex-preferred-size:auto; flex-basis:auto; flex-basis:auto;
    text-align: center;
}

@media only screen and (max-width: 1200px) {
    .X-devices__wrap {  max-width:unset; }
    .X-devices__container { -ms-flex-pack:distribute; justify-content:space-around; }
    .X-devices__cell { -ms-flex-preferred-size:20%; flex-basis:20%; margin-bottom: 20px; }
}
@media only screen and (max-width: 860px) {
    .X-devices__cell { display:block; float:left; margin:10px 20px 10px 0; }
    .X-devices__cell { -ms-flex-preferred-size:25%; flex-basis:25%; margin-bottom: 20px; }
}
@media only screen and (max-width: 500px) {
    .devices__cell { display:block; float:left; margin:10px 10px 10px 0; }
    .X-devices__cell { -ms-flex-preferred-size:33%; flex-basis:33%; }
}


#noteboox-radios { margin:0; }

.note-params .show { display:block; }
.note-params .hide { display:none; }

#noteboox-radios #nadpis {
    float:left; position:relative;
    margin-bottom:15px; padding:0 20px 2px 0;
    cursor:help;
}

#noteboox-radios #nadpis > span { border-bottom:1px dotted #1E222F; }
.ocasnik {
    display:block; position:absolute; top:0; right:0;
    width:15px; padding-left:1px;
    height:15px; line-height:15px;
    font-size:10px; color:#FFFFFF; text-align:center;
    border-radius:50%;
    background:#9099A2;
    cursor:help;
}
#noteboox-radios #nadpis:hover,
#noteboox-radios #nadpis:hover * { color:#29A4A9;  }
#noteboox-radios #nadpis:hover > .ocasnik  { background:#75BCC4; }
#noteboox-radios #nadpis .ocasnik:hover  { background:#75BCC4; }

#noteboox-radios .help-wrap {
    float:left; position:relative;
}
#noteboox-radios .help-wrap #help-text {
    position:absolute; top:-20px; left:20px; z-index:99999;
    width:300px; padding:10px 6px 10px 10px;
    line-height:15px;
    font-size:13px; color:#29A4A9;
    background:#E6F5F9;
    -webkit-box-shadow:0 0 8px 0 rgba(0,49,98,0.2);
    -moz-box-shadow:   0 0 8px 0 rgba(0,49,98,0.2);
    box-shadow:        0 0 8px 0 rgba(0,49,98,0.2);

}

/*-*-*-*-*-*-*-*-*-*--*/

.help {}
.help--devides { margin-bottom:20px;}
.help__otaznik {
    display:block; position:absolute; top:-2px; right:-20px;
    width:15px; padding-left:1px;
    height:15px; line-height:15px;
    font-size:10px; color:#FFFFFF; text-align:center;
    border-radius:50%;
    background:#9099A2;
    cursor:help;
}
.help__title {
    display:inline-block; position:relative; cursor:help; border-bottom: 1px dotted #1E222F;
}
.help__text {
    display:none; position:absolute; top:-20px; right:-360px; z-index:99999;
    width:300px; padding:10px 6px 10px 10px;
    line-height:15px;
    font-size:13px; color:#29A4A9;
    background:#E6F5F9;
    -webkit-box-shadow:0 0 8px 0 rgba(0,49,98,0.2);
    -moz-box-shadow:   0 0 8px 0 rgba(0,49,98,0.2);
    box-shadow:        0 0 8px 0 rgba(0,49,98,0.2);
}
.help__title:hover > .help__text { display: block; }
.help__title:hover > .help__otaznik  { background:#75BCC4; }
.help__title:hover { color:#29A4A9; }

/*-*-*-*-*-*-*-*-*-*--*/


#noteboox-radios .input-hidden {
    position:absolute;
    left:-9999px; visibility:hidden;
}

#noteboox-radios .any-devices-link,
#noteboox-radios input[type=radio] + label {       /*margin-right:50px; margin-bottom: 30px;*/
    display:inline-block; position:relative;
    /*width:32px; height:32px;*/  width:96px; height:60px;
    background-position:center center !important;
    background-repeat:no-repeat !important;
    cursor:pointer;
    background-size:100%;
}

#noteboox-radios input[type=radio]:hover + label,
#noteboox-radios input[type=radio]:checked + label {

}

@media (max-width:560px) {
    #noteboox-radios .any-devices-off,
    #noteboox-radios input[type=radio] + label { /*margin-right:16px; margin-bottom:10px;*/ }
}
#noteboox-radios .any-devices-link.off {
    background:transparent url(../css/imgs/konfigurator/notebooks/any-off.png);
}
#noteboox-radios .any-devices-link.on {
    background:transparent url(../css/imgs/konfigurator/notebooks/any-on.png);
}

#noteboox-radios input[type=radio] + label.apple {
    background:transparent url(../css/imgs/konfigurator/notebooks/apple-off.png);
}
#noteboox-radios input[type=radio]:hover + label.apple,
#noteboox-radios input[type=radio]:checked + label.apple {
    background:transparent url(../css/imgs/konfigurator/notebooks/apple-on.png);
}

#noteboox-radios input[type=radio] + label.dell {
    background:transparent url(../css/imgs/konfigurator/notebooks/dell-off.png);
}
#noteboox-radios input[type=radio]:hover + label.dell,
#noteboox-radios input[type=radio]:checked + label.dell {
    background:transparent url(../css/imgs/konfigurator/notebooks/dell-on.png);
}

#noteboox-radios input[type=radio] + label.hp {
    background:transparent url(../css/imgs/konfigurator/notebooks/hp-off.png);
}
#noteboox-radios input[type=radio]:hover + label.hp,
#noteboox-radios input[type=radio]:checked + label.hp {
    background:transparent url(../css/imgs/konfigurator/notebooks/hp-on.png);
}

#noteboox-radios input[type=radio] + label.lenovo {
    background:transparent url(../css/imgs/konfigurator/notebooks/lenovo-off.png);
}
#noteboox-radios input[type=radio]:hover + label.lenovo,
#noteboox-radios input[type=radio]:checked + label.lenovo {
    background:transparent url(../css/imgs/konfigurator/notebooks/lenovo-on.png);
}

#noteboox-radios input[type=radio] + label.dynabook {
    background:transparent url(../css/imgs/konfigurator/notebooks/dynabook-off.png);
}
#noteboox-radios input[type=radio]:hover + label.dynabook,
#noteboox-radios input[type=radio]:checked + label.dynabook {
    background:transparent url(../css/imgs/konfigurator/notebooks/dynabook-on.png);
}

#noteboox-radios input[type=radio] + label.microsoft {
    background:transparent url(../css/imgs/konfigurator/notebooks/msoft-off.png);
}
#noteboox-radios input[type=radio]:hover + label.microsoft,
#noteboox-radios input[type=radio]:checked + label.microsoft {
    background:transparent url(../css/imgs/konfigurator/notebooks/msoft-on.png);
}

#noteboox-selects { width:90%; }
#noteboox-selects .select-list.show { margin-top:20px; }

#konfigurator-wrap .select-wrapper {
    font-size:13px;
}
.left-side { float:left; width:50%; margin-right:2%; /*padding-top:20px;*/ }

#notebooksWrap #note-specific-port .popis { float:left; width:65%;  padding-top:10px; color:#29A4A9; line-height:18px; }
#notebooksWrap #note-specific-port .popis * { color:#29A4A9;  }
#notebooksWrap #note-specific-port .popis sup { vertical-align:super; font-size:10px;  }

#notebooksWrap #note-specific-port .spec-radios {float:right; width:35%; text-align:right; }

#configsWrap .select-wrapper { margin-bottom:10px; }

.right-side { float:left; width:45%; /*padding-top:20px;*/ }

#ajaxIndicator { margin-bottom:8px; padding:2px 10px 8px 10px; border-bottom:1px solid #F1F2F5; }
#ajaxIndicator img { display:inline-block;}

#noteboox-selects .ntb-notice,
#noteboox-selects .ntb-notice * {
    font-size:15px; color:#50B0B9; font-weight:600;
}
#noteboox-selects .ntb-notice.pwd {
    padding-top:6px; color:#29A4A9;
}
#noteboox-selects .ntb-notice.note {
    padding-top:0;
}

@media (max-width:560px) {
    .left-side  { padding-top:10px; }
    .right-side { padding-top:10px; }
}


/*** pro přenost linků na vytvořenou konfiguraci
********************************************************************************/
.page.configurator input[type="text"],
.page.configurator input[type="email"],
.page.configurator input[type="url"] {
    width:100%;
    height:30px;
    line-height:30px;
    margin:0;
    padding:0 10px;
    border:1px solid #77BBBB;
}

.page.configurator input[type="text"]#urlToCopy  { background:#F0F9FF;  }

.url-grid {
    display:-ms-grid; display:grid; margin:10px 0 0 0;
    grid-column-gap:0; grid-row-gap:0;
}
/*.url-grid.v-show {-ms-grid-columns:2fr 3fr 3fr 1fr; grid-template-columns:2fr 3fr 3fr 1fr; padding:16px 16px; background:#F0F9FF; border:1px solid #E1F3FF; }*/
.url-grid.v-show {-ms-grid-columns:3fr 3fr 1fr; grid-template-columns:3fr 3fr 1fr; padding:16px 16px; background:#F0F9FF; border:1px solid #E1F3FF; }
.url-grid.v-hide {-ms-grid-columns:1fr; grid-template-columns:100%; padding:0; }

.url-grid__item { align-items:center; padding:0; /*border:1px dashed red;*/ }

.url-grid.v-show .url-grid__item { display:block; padding:0 5px; }

.url-grid.v-show .url-grid__item--th { display:block; color:#727A7F; }
.url-grid.v-show .url-grid__item--th div,
.url-grid.v-show .url-grid__item--th span { color:#727A7F; }

.url-grid.v-hide .url-grid__item--th { display:none; }
.url-grid.v-hide .url-grid__item--th:first-child { display:block;}

.url-grid__item--btn { text-align:right;}

.url-grid__item .small-btn { height:30px !important; line-height:30px !important; white-space:nowrap; }
.url-grid__item--th .small-btn { margin:0; }

.url-grid .v-show { display:block; }
.url-grid .v-show { display:inline-block; }
.url-grid .v-hide { display:none;}

@media only screen and (max-width:960px) {
    .url-grid.v-show {-ms-grid-columns:1fr 2fr; grid-template-columns:1fr 2fr; }
    .url-grid.v-show .url-grid__item {  }
    .url-grid.v-show .url-grid__item:nth-child(1n) { grid-row:1; grid-column:1; padding-left:0; padding-bottom:10px; white-space:nowrap; }
    .url-grid.v-show .url-grid__item:nth-child(1n) * { white-space:nowrap; }

    .url-grid.v-show .url-grid__item:nth-child(2n) { grid-row:2; grid-column:1; padding-left:0; padding-bottom:10px; }
    .url-grid.v-show .url-grid__item:nth-child(2n) * { white-space:nowrap; }

    .url-grid.v-show .url-grid__item:nth-child(3n) { grid-row:3; grid-column:1; padding-left:0; padding-bottom:0; }
    .url-grid.v-show .url-grid__item:nth-child(4n) { grid-row:1; grid-column:2; padding-right:0; padding-bottom:10px; }
    .url-grid.v-show .url-grid__item:nth-child(5n) { grid-row:2; grid-column:2; padding-right:0; padding-bottom:10px; }
    .url-grid.v-show .url-grid__item:nth-child(6n) { grid-row:3; grid-column:2; padding-right:0; padding-bottom:0; }
}

@media only screen and (max-width:600px) {
    .url-grid.v-show {-ms-grid-columns:1fr; grid-template-columns:1fr; }
    .url-grid.v-show .url-grid__item {  }
    .url-grid.v-show .url-grid__item:nth-child(1n) { grid-row:1; grid-column:1; padding-left:0; padding-bottom:10px; }
    .url-grid.v-show .url-grid__item:nth-child(2n) { grid-row:3; grid-column:1; padding-left:0; padding-bottom:10px; }
    .url-grid.v-show .url-grid__item:nth-child(3n) { grid-row:5; grid-column:1; padding:0;  }
    .url-grid.v-show .url-grid__item:nth-child(4n) { grid-row:2; grid-column:1; padding-right:0; padding-bottom:10px; }
    .url-grid.v-show .url-grid__item:nth-child(5n) { grid-row:4; grid-column:1; padding-right:0; padding-bottom:10px; }
    .url-grid.v-show .url-grid__item:nth-child(6n) { grid-row:5; grid-column:1; padding-right:0; padding-bottom:0; }
}




#tttt {
    position:-webkit-sticky; position:sticky;  top:100px; left:-100px; background: lightyellow; padding:20px; width:200px;
}