.atreid { font-family: 'Open Sans', "Roboto", 'Trebuchet MS', sans-serif; font-size: 110%; }
.atreid .page { width: 1150px; margin: auto; }

.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }
.atreid .odstavec, .atreid .odstavec_barva, .atreid .odstavec_info { margin: 10px; padding: 15px 15px; background: #eee; border-radius: 6px; overflow: auto; box-sizing: border-box; }
.atreid .odstavec, .atreid .odstavec_barva { background: #eee; border: 6px #888; border-bottom-style: solid; }
.atreid .odstavec_info { background: #666; border: 6px #ccc; border-bottom-style: solid; color: white; font-size: 140%; font-weight: bold;}

/* The container */
.atreid .container, .atreid .container2 { display: block; position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; color: #666; box-sizing: border-box; }
.atreid .container { text-align: center; }
.atreid .container2 { text-align: left; }

.atreid .popis, .atreid .popis2, .atreid .popis3 { padding: 0 30px 0 0; font-weight: bold; color: #026; box-sizing: border-box;  }
.atreid label { padding: 0 15px; border: 1px silver; border-left-style: solid; font:  }
.atreid .popis, .atreid .popis2, .atreid .popis3, .atreid label, .product { float: left; }
.atreid .popis, .atreid label { min-height: 120px; }
.atreid .popis2 { min-height: 80px; }
.atreid .popis3 { padding-top: 10px;}
.atreid .odstavec_barva label { padding: 0 4px;  font-size: 90%; box-sizing: border-box; }
.atreid .odstavec_barva .popis, .atreid .odstavec_barva label { min-height: 52px; }
.atreid .popis3 label { padding: 5px 15px; border: 0px; min-height: 20px;}

.atreid .container .text { display: block; position: relative; top: 35px; }
.atreid .container .about { padding: 2px 9px; position: absolute; top: 105px; left: 190px; color: white; font-size: 90%; font-weight: bold; background: #aaa; border-radius: 50%; float: right; z-index: 10; }

/* Hide the browser's default radio button */
.atreid .container input   { position: absolute; opacity: 0; cursor: pointer; }
.atreid .container2 input  { position: relative; opacity: 0; cursor: pointer; }

/* Create a custom radio button */
.atreid .checkmark { position: absolute; top: 0px; left: 44%; height: 28px; width: 28px; background-color: #999; border-radius: 50%; }
.atreid .odstavec_barva .checkmark { position: absolute; top: 0px; left: 38%; height: 28px; width: 28px; background-color: #999; border-radius: 50%; }
.atreid .checkmark2 { position: absolute; top: 0%; left: 25%; height: 48px; width: 48px; border-radius: 50%; }
.atreid .checkbox, .atreid .checkbox2 { height: 25px; width: 25px; background-color: #fff; border: 5px solid #999; border-radius: 15%; }
.atreid .checkbox  { position: absolute; top: 0px; left: 43%; }
.atreid .checkbox2 { position: absolute; top: 4px; left: 0%;  }

.atreid .b02 { background-color: #ffffff; border: 1px solid #ccc;} /* bílá */
.atreid .b03 { background-color: #ffff00; border: 1px solid #ccc;} /* žlutá */
.atreid .b04 { background-color: #ff5600; border: 1px solid #ccc;} /* oranžová */
.atreid .b05 { background-color: #ff0000; border: 1px solid #ccc;} /* červená */
.atreid .b08 { background-color: #003da5; border: 1px solid #ccc;} /* modrá */
.atreid .b10 { background-color: #009600; border: 1px solid #ccc;} /* zelená */
.atreid .b11 { background-color: #b79475; border: 1px solid #ccc;} /* hnědá */
.atreid .b13 { background-color: #ededed; border: 1px solid #fff; } /* transparent */
.atreid .b21 { background-color: #ffffff; border: 1px solid #ccc; } /* white/white */

.atreid .b18 { background-color: #7be35e; border: 1px solid #ccc;} /* sv. zelená */
.atreid .b14 { background-color: #0086d6; border: 1px solid #ccc;} /* sv. modrá */
.atreid .b15 { background-color: #002060; border: 1px solid #ccc;} /* tm. modrá */
.atreid .b16 { background-color: #FF6200; border: 1px solid #ccc; } /* fluo. oranžová */

.atreid .b20 { background-color: #ffff91; border: 1px solid #eee; } /* sv. žlutá */

.atreid .b19 { background-color: #caae7b; border: 1px solid #ccc; } /* hnědá (papír) */
.atreid .b22 { background-color: #ffffff; border: 1px solid #ccc; } /* bílá (papír) */

.atreid .about_on { position: absolute; top: -15px; left: 0; margin: 0px; padding: 5px 10px; background: #005; border: 5px #d04; border-bottom-style: solid; border-radius: 6px; color: #fff; font-size: 85%; display: none; }

/* On mouse-over */
.atreid .container:hover input ~ .checkmark { background-color: #d04; }
.atreid .container:hover input ~ .text { color: #222; }
.atreid .container:hover input ~ .checkmark2 { top: -3px; left: 22%; height: 54px; width: 54px; border: 4px solid #555; border-radius: 50%; }
.atreid .about:hover ~ .about_on { display: block; }
.atreid .container:hover input ~ .checkbox   { border: 5px solid #d04; border-radius: 15%; background-color: #eee; }
.atreid .container2:hover input ~ .checkbox2 { border: 5px solid #d04; border-radius: 15%; background-color: #eee; }


/* When the radio button is checked */
.atreid .container input:checked ~ .checkmark { background-color: #d04; }
.atreid .container input:checked ~ .text { color: #d04; }
.atreid .container input:checked ~ .checkmark2 { top: -3px; left: 22%; height: 54px; width: 54px; border: 4px solid #d04; }
.atreid .container input:checked ~ .checkbox   { border: 5px solid #d04; border-radius: 15%; background-color: #d04; }
.atreid .container2 input:checked ~ .checkbox2 { border: 5px solid #d04; border-radius: 15%; background-color: #d04; }

/* Create the indicator ( hidden when not checked) */
.atreid .checkmark:after { content: ""; position: absolute; display: none; }
.atreid .text:after { content: ""; position: absolute; display: none; }
.atreid .checkmark2:after { content: ""; position: absolute; display: block; }
.atreid .checkbox:after  { content: ""; position: absolute; display: none; }
.atreid .checkbox2:after { content: ""; position: absolute; display: none; }

/* Show the indicator (dot/circle) when checked */
.atreid .container input:checked ~ .checkmark:after { display: block; }
.atreid .container input:checked ~ .text:after { display: block; }
.atreid .container input:checked ~ .checkmark2:after { top: 9px; left: 9px; display: block; z-index: 1; background: #eee url(https://www.pasky.cz/temp/check-mark-kalkulator.png); background-repeat: no-repeat;
  background-size: 36px 34px; background-position: 45% 40%; }
.atreid .container input:checked ~ .checkbox:after   { display: block; }
.atreid .container2 input:checked ~ .checkbox2:after { display: block; }

/* Style the indicator (dot/circle) */
.atreid .container .checkmark:after { top: 6px; left: 6px; width: 16px; height: 16px; border: 2px solid white; border-radius: 50%; background: #d04; }
.atreid .container .checkmark2:after { top: 9px; left: 9px; width: 28px; height: 28px; border: 1px solid #ccc; border-radius: 50%; background: #eee; }
.atreid .container .checkbox:after   { top: -1px; left: 4px; width: 7px; height: 15px; border: 3px #fff; border-right-style: solid; border-bottom-style: solid; -ms-transform: rotate(40deg); /* IE 9 */ transform: rotate(40deg); }
.atreid .container2 .checkbox2:after { top: -1px; left: 4px; width: 7px; height: 15px; border: 3px #fff; border-right-style: solid; border-bottom-style: solid; -ms-transform: rotate(40deg); /* IE 9 */ transform: rotate(40deg); }

.atreid .check { width: 7px; height: 15px; border: 3px #fff; border-right-style: solid; border-bottom-style: solid; -ms-transform: rotate(40deg); /* IE 9 */
  transform: rotate(40deg); }

/*#pplep1, #pplep2, #pplep3,*/ #pvclep1, #paplep1, #paplep2, #ldpelep1  { display: none; }

/*#pp_b01, #pp_b02, #pp_b03, #pp_b04, #pp_b05, #pp_b06, #pp_b07, #pp_b08, #pp_b09,*/ #pvc_b10, #pap_b11, #pap_b12, #ldpe_b13, #pvc_b14 { display: none; }

/*#pprozmer_sire1, #pprozmer_navin1,*/#pprozmer_sire2, #pvcrozmer_sire1, #pvcrozmer_navin1, #pvcrozmer_navin2, #paprozmer_sire1, #paprozmer_navin1, #paprozmer_navin2, #ldperozmer_sire1, #ldperozmer_navin1, #ldperozmer_navin2 { display: none; }

/*#pocet_pp50x66,*/ #pocet_pp25x66, #pocet_pp37x66, #pocet_pp75x66, #pocet_pp38x66hs, #pocet_pp48x66hs, #pocet_pp75x66hs, #pocet_pvc12x100, #pocet_pvc25x66, #pocet_pvc37x66, #pocet_pvc50x66, #pocet_pvc75x66, #pocet_pap25x33, #pocet_pap37x33, #pocet_pap50x33, #pocet_pap75x33, #pocet_pap50x50, #pocet_ldpe75x220, #pocet_ldpe75x330, #pocet_ldpe150x330 { display: none; }

/*#pocerbarev1, #pocerbarev2, #pocerbarev3,*/ #pocerbarev4, #pocerbarev5, #pocerbarev6, #negativ2 { display: none; }

.atreid .font90 { font-size: 90%; font-weight: normal; }
.atreid .font80 { font-size: 80%; font-weight: normal; }

.atreid select, .atreid input[type=text], .atreid input[type=email], .atreid input[type=tel], .atreid textarea { margin: 10px 0 0 0; padding: 10px 15px; color: #d04; font-family: "Roboto", sans-serif; font-weight: bold; font-size: 90%; border: 1px solid #aaa; border-radius: 5px; background-color: #fff; }
.atreid input[type=text], .atreid input[type=email], .atreid input[type=tel], .atreid #state { width: 80%;}
.atreid #quantities select { width: 98%; }
.atreid select { width: 96%;}
.atreid textarea { width: 94%;}
.atreid input[type=submit] { margin: 20px 0; padding: 10px 25px; color: white; font-family: "Roboto", sans-serif; font-weight: bold; font-size: 130%; border-radius: 8px; background-color: #0a0; }

.atreid .nenasli { font-family: "Roboto", sans-serif; font-weight: normal; font-size: 100%; line-height: 250%; }
.atreid .product input { width: 45%; margin: 0; padding: 2px 4px; color: darkblue; border: 0px; background-color: #eee; }

@media only screen and (max-width: 766px) {
.atreid .page { width: 100%; margin: auto; }
.atreid { font-size: 100%; }
    /* For mobile: */
    .col-xs-0 {width: 0%;}
    .col-xs-1 {width: 8.33%;}
    .col-xs-2 {width: 16.66%;}
    .col-xs-20 {width: 20%; }
    .col-xs-3 {width: 25%; margin-bottom: 20px; }
    .col-xs-4 {width: 33.33%; margin-bottom: 20px; }
    .col-xs-5 {width: 41.66%;}
    .col-xs-6 {width: 50%; margin-bottom: 20px; }
    .col-xs-7 {width: 58.33%;}
    .col-xs-8 {width: 66.66%;}
    .col-xs-9 {width: 75%;}
    .col-xs-80 {width: 80%;}
    .col-xs-10 {width: 83.33%;}
    .col-xs-11 {width: 91.66%; margin-bottom: 20px; }
    .col-xs-115 {width: 96%;}
    .col-xs-12 {width: 100%;}
.atreid .popis { width: 100%; }
.atreid .popis { min-height: 40px; }
.atreid .popis2 { min-height: 40px; }
.atreid label { padding: 0 15px; border: 0px; min-height: 80px; }

.atreid .container { text-align: center; }
.atreid .checkmark { position: absolute; top: 0px; left: 1%; height: 28px; width: 28px; background-color: #999; border-radius: 50%; }
.atreid .container .text { display: block; position: relative; top: -6px; left: 8%; text-align: left; }
.atreid .container .about { padding: 2px 8px; position: absolute; top: -3px; left: 96%; color: white; font-size: 90%; font-weight: bold; background: #aaa; border-radius: 50%; float: right; z-index: 10; }
.atreid .nenasli { font-family: "Roboto", sans-serif; font-weight: normal; font-size: 95%; line-height: 150%; margin-bottom: 30px; }
.atreid .odstavec_barva .checkmark { position: absolute; top: -10px; left: 25%; height: 28px; width: 28px; background-color: #999; border-radius: 50%; }
.atreid .odstavec_barva .popis, .atreid .odstavec_barva label { min-height: 52px; }
.atreid .checkbox  { position: absolute; top: -9px; left: -1%; }
.atreid .product input { width: 65%; }
.atreid .container2 .text { font-size: 100%; }
.atreid select, .atreid input[type=text], .atreid input[type=email], .atreid input[type=tel], .atreid textarea { margin: 2px 0 10px 0; padding: 10px 15px; color: #d04; font-family: "Roboto", sans-serif; font-weight: bold; font-size: 90%; border: 1px solid #aaa; border-radius: 5px; background-color: #fff; }
.atreid .product input { width: 45%; margin: 0; padding: 2px 4px; color: darkblue; border: 0px; background-color: #eee; }

}

@media only screen and (min-width: 767px) {
.atreid .page { width: 100%; margin: auto; }
.atreid { font-size: 100%; }
    /* For tablets: */
    .col-sd-0 {width: 0%;}
    .col-sd-1 {width: 8.33%;}
    .col-sd-2 {width: 16.66%; margin-bottom: 15px;}
    .col-sd-20 {width: 20%; margin-bottom: 15px;}
    .col-sd-3 {width: 25%; margin-bottom: 15px; }
    .col-sd-4 {width: 33.33%;}
    .col-sd-5 {width: 41.66%;}
    .col-sd-6 {width: 50%; }
    .col-sd-7 {width: 58.33%;}
    .col-sd-8 {width: 66.66%;}
    .col-sd-9 {width: 75%;}
    .col-sd-80 {width: 80%;}
    .col-sd-10 {width: 83.33%;}
    .col-sd-11 {width: 91.66%;}
    .col-sd-115 {width: 96%;}
    .col-sd-12 {width: 100%;}
.atreid .popis { min-height: 40px; }
.atreid .container .about { padding: 2px 9px; position: absolute; top: 105px; left: 83%; color: white; font-size: 90%; font-weight: bold; background: #aaa; border-radius: 50%; float: right; z-index: 10; }
.atreid .nenasli { font-family: "Roboto", sans-serif; font-weight: normal; font-size: 95%; line-height: 150%; }

}

@media only screen and (min-width: 1200px) {
.atreid .page { width: 100%; margin: auto; }
.atreid { font-size: 110%; }
    /* For desktop: */
    .col-0 {width: 0%;}
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-20 {width: 20%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-80 {width: 80%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-115 {width: 96%;}
    .col-12 {width: 100%;}
.atreid .popis { min-height: 120px; }
}

.error {color: #d04 !important;}