#pekPopup div {box-sizing: border-box;}
#pekPopup label {width:100% !important}
#pekPopup { position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 9999; background: rgba(0, 0, 0, 0.5); color: #222; overflow: auto; display: none; box-sizing: border-box;}
#pekPopup ::-webkit-scrollbar-track { opacity: 0}
#pekPopup ::-webkit-scrollbar { width: 1px; opacity: 0;}
#pekPopup ::-webkit-scrollbar-thumb {opacity: 0}
#pekPopup .form { width: 100%; max-width: 750px !important; background: #fff; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); border-radius: 15px; 
padding-left: 30px; padding-right: 30px; padding-top: 15px; padding-bottom: 15px; position: relative; margin: 30px auto;
 }

#pekPopup .form .close {cursor:pointer; position: absolute; right: 8px; top: 8px; color: #000; width: 30px; line-height: 30px; text-align: center; font-size: 20px; font-family: Arial;}
#pekPopup .form .form_title {font-size: 24px; line-height: 22px; margin-bottom: 30px;}
#pekPopup .form .fieldset { border-bottom: 2px solid #c1e7f5; margin-bottom: 20px;}
#pekPopup .form .fieldset.no_border { border-bottom: none;}
#pekPopup .form .fieldset .lbl { font-size: 18px; line-height: 22px; margin-bottom: 20px; font-weight: 700;}
#pekPopup .form .fieldset .titles { font-size: 12px; line-height: 22px; font-weight: 700;}
#pekPopup .form .fieldset .titles > div { display: inline-block; vertical-align: top; margin: 0 -2px;}
#pekPopup .form .fieldset .titles > div.name { width: 175px;}
#pekPopup .form .fieldset .titles > div.count { width: 115px; visibility: visible; font-size: 100%;}
#pekPopup .form .fieldset .titles > div.gabarit { width: 150px;}
#pekPopup .form .fieldset .titles > div.volume { width: 92px;}
#pekPopup .form .fieldset .items { margin-bottom: 20px;}
#pekPopup .form .fieldset .items.error:after {content: attr(data-error); color: #d02d42; font-size: 13px; display: block; padding: 5px 0; font-weight: 300;}
#pekPopup .form .fieldset .items .item { position: relative; margin-bottom: 20px;}
#pekPopup .form .fieldset .items .item.template { display: none;}
#pekPopup .form .fieldset .items .item:before,
#pekPopup .form .fieldset .items .item:after { content: ''; display: block; clear: both;}
#pekPopup .form .fieldset .items .item > div { display: inline-block; vertical-align: top; margin: 0 -2px;}
#pekPopup .form .fieldset .items .item .name {width: 175px; padding-right: 20px;}
#pekPopup .form .fieldset .items .item .item_name {position: relative; box-sizing: border-box}
#pekPopup .form .fieldset .items .item .item_name .s_res {position: absolute; top: 100%; left: 0; z-index: 200;}
#pekPopup .form .fieldset .items .item .item_name .s_res > div { cursor: pointer; border: 1px solid #ccc; background: #fff;
  font-size: 12px; padding: 5px 10px; white-space: nowrap;}
#pekPopup .form .fieldset .items .item .item_name .s_res > div:hover { color: #fff; background: #2f99cc;}
#pekPopup .form .fieldset .items .item .count {width: 115px; padding-right: 20px;}
#pekPopup .form .fieldset .items .item .gabarit {width: 150px; border: 1px solid #c1e7f5;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); border-radius: 3px 0 0 3px; text-align: center; padding: 0 10px;}
#pekPopup .form .fieldset .items .item .volume {width: 92px; padding-right: 20px;}
#pekPopup .form .fieldset .items .item .weight {width: 95px; padding-right: 20px; font:14px MuseoSansCyrl, Sans-Serif}
#pekPopup .form .fieldset .items .item input { display: inline-block; height: 40px; width: 100%; padding: 0 10px; border: 1px solid #c1e7f5;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); border-radius: 3px 3px 3px 3px; outline: none;}
#pekPopup .form .fieldset .items .item input.error { border: 1px solid #d02d42;}
#pekPopup .form .fieldset .items .item .gabarit input { border: 0; border-radius: 0; width: 30px; text-align: center; background: transparent; vertical-align: middle; height: 38px;
  padding: 0; box-shadow: none;}
#pekPopup .form .fieldset .items .item select { width: 100%; height: 40px; margin-top: 5px; padding: 10px; border: 1px solid #c1e7f5;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); border-radius: 3px 3px 3px 3px;}
#pekPopup .form .fieldset .items .item select.error{ border: 1px solid #d02d42;}
#pekPopup .form .fieldset .items .item .volume input {border-radius: 0 3px 3px 0;}
#pekPopup .form .fieldset .items .item .act { float: right; font-size: 12px; padding-top: 5px;}
#pekPopup .form .fieldset .items .item .del { color: #d02d42;}
#pekPopup .form .fieldset .items .item .add { color: #4cae4c;}
#pekPopup .form .fieldset .items .item .act a { color: inherit; text-decoration: none;}
#pekPopup .form .fieldset .items .item .act a span { font-size: 18px;}
#pekPopup .form .fieldset .control { clear: both; text-align: right;}
#pekPopup .control2 { display:flex;  flex-flow: row;}
#pekPopup .total2 {display:flex; width:370px}
#pekPopup .form .fieldset .control .addItem { display: inline-block; vertical-align: top; font-size: 14px; line-height: 22px; color: #444;
  text-decoration: none;box-sizing: border-box;}
#pekPopup .form .fieldset .control .addItem .plus { display: inline-block; position: relative; width: 16px; height: 16px; margin-right: 10px;
  vertical-align: middle; top: -2px;}
#pekPopup .form .fieldset .control .addItem .plus:before,
#pekPopup .form .fieldset .control .addItem .plus:after { content: ''; display: block; background: #4cae4c; position: absolute;}
#pekPopup .form .fieldset .control .addItem .plus:before { width: 2px; height: 100%; top: 0; left: 50%; margin-left: -1px;}
#pekPopup .form .fieldset .control .addItem .plus:after { width: 100%; height: 2px; top: 50%; left: 0; margin-top: -1px; }
#pekPopup .form .fieldset .control .addItem .dottedd{ border-bottom: 1px dotted #222;}
#pekPopup .form .fieldset .control .total { display: inline-block; margin-left: 40px; vertical-align: top; font-size: 14px;
  line-height: 22px; color: #444; padding-top: 2px; padding-bottom: 15px; box-sizing: border-box;}

#pekPopup .form .fieldset .control .total > div { display: inline-block; vertical-align: top;}
#pekPopup .form .fieldset .direction { position: relative; margin-bottom: 20px;}
#pekPopup .form .fieldset .direction:before,
#pekPopup .form .fieldset .direction:after { content: ''; display: block; clear: both;}
#pekPopup .form .fieldset .direction .changeDirection { position: absolute; left: 185px; top: -25px; width: 30px; height: 30px;
  background-image: url(/design/tpl/kps/img/arrowchange.svg); background-position: center; background-size: 100%; cursor: pointer;}
#pekPopup .form .fieldset .direction .ttl { width: 175px; text-align: center; font-size: 14px; line-height: 22px; font-weight: 700; color: #222; float: left;}
#pekPopup .form .fieldset .direction .city_block { padding: 10px 20px 20px; background: #e0f3fa; float: right;
  width: 525px;
  width: -webkit-calc(50% - 175px);
  width: expression(100% - 175px);
  width: -moz-calc(100% - 175px);
  width: -o-calc(100% - 175px);
  width: calc(100% - 175px);
}
#pekPopup .form .fieldset .direction .city_block .find_city { position: relative;}
#pekPopup .form .fieldset .direction .city_block .find_city .clear_str { position: absolute; cursor: pointer; color: #ccc; width: 30px; height: 100%;
  top: 0; right: 0; line-height: 40px; font-size: 25px; text-align: center; display: none;}
#pekPopup .form .fieldset .direction .city_block .find_city > input { height: 40px; width: 100%;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); border-radius: 3px; padding: 0 30px 0 10px; border: 0;}
#pekPopup .form .fieldset .direction .city_block .find_city.error input[type="text"] { border: 1px solid #d02d42;}
#pekPopup .form .fieldset .direction .city_block .find_city .results { position: absolute; top: 100%; left: 0; width: 100%; z-index: 200;
  max-height: 150px; overflow: auto; }
#pekPopup .form .fieldset .direction .city_block .find_city .results > div { position: relative; background: #fff; padding: 5px 10px; cursor: pointer;
  border: 1px solid #999; border-top: 0;}
#pekPopup .form .fieldset .direction .city_block .find_city .results > div:hover { color: #fff; background: #2f99cc;}
#pekPopup .form .fieldset .direction .city_block .radio {position: relative !important; margin-bottom: 15px !important;
font-size: 14px !important; font-weight: 300 !important; line-height: 22px !important;
  padding-left: 25px !important; display: block; margin-top:10px}
  
#pekPopup .checkbox+.checkbox, .radio+.radio {
    margin-top: -5px !important;
}

#pekPopup .calc_link {text-decoration: none; color: #2F99CC; font:14px MuseoSansCyrl, sans-serif}
  
#pekPopup .form .fieldset .direction .city_block .radio [type="radio"] { display: none;}
#pekPopup .form .fieldset .direction .city_block .radio .mask { width: 16px; height: 16px; background: #fff; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);     
  border-radius: 50%; position: absolute; left: 0; top: 2px; cursor: pointer; box-sizing: border-box;}
#pekPopup .form .fieldset .direction .city_block .radio.checked .mask { padding: 5px;}
#pekPopup .form .fieldset .direction .city_block .radio.checked .mask:before { content: ''; display: block; width: 100%; height: 100%; background: #d02d42;
  border-radius: 50%; box-sizing: border-box;}

#pekPopup .form .fieldset .checkbox {position: relative; margin-bottom: 15px;font-size: 14px; font-weight: 300; line-height: 22px; padding-left: 25px;}
#pekPopup .form .fieldset .checkbox [type="checkbox"] { display: none;}
#pekPopup .form .fieldset .checkbox .mask { width: 16px; height: 16px; background: #fff; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
  border-radius: 3px; position: absolute; left: 0; top: 2px; cursor: pointer; border: 1px solid #c1e7f5;}
#pekPopup .form .fieldset .checkbox.checked .mask { padding: 2px;}
#pekPopup .form .fieldset .checkbox.checked .mask:before { content: ''; display: block; width: 100%; height: 100%;
  background-image: url(/design/tpl/kps/img/check.svg); background-position: center center; background-size: 100%;}
#pekPopup .form .getInfo { height: 40px; outline: none; cursor: pointer; text-align: center; color: #fff; font-size: 16px; background: #4cae4c; border-radius: 3px;
  border: 0; display: block; width: 100%; margin-top: 10px;}
#pekPopup .form .getInfo:hover { background: #57ba7d;}
#pekPopup .form .getInfo:active { background: #4cae4c; box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.13);}
#pekPopup .form .pekResult { border-top: 2px solid #c1e7f5; padding-top: 20px; margin-top: 20px; display: none;}
#pekPopup .form .pekResult .wr { border: 1px solid #c1e7f5; border-radius: 3px; padding: 10px;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
}
#pekPopup .form .pekResult .wr .logo { width: 100%; max-width: 150px; margin-right: 35px; padding-top: 12px;}
#pekPopup .form .pekResult .wr .logo img { width: 100%; }
#pekPopup .form .pekResult .wr .pre_total {font-size: 14px; line-height: 20px; color: #444;}
#pekPopup .form .pekResult .wr .pre_total .ttl {}
#pekPopup .form .pekResult .wr .pre_total .price { font-weight: 700;}
#pekPopup .form .pekResult .wr .btn {margin: 0 0 auto auto; width: 182px;}
#pekPopup .form .pekResult .wr .btn:active {box-shadow: none;}
#pekPopup .form .pekResult .wr .btn a {text-decoration: none !important;}
#pekPopup .form .pekResult .wr .btn button { height: 40px; width: 100%; color: #fff; background: #4cae4c; font-size: 14px; border-radius: 3px;
  outline: none; cursor: pointer; border: 0; display: block; text-decoration: none;}
#pekPopup .form .pekResult .wr .btn button:hover { background: #57ba7d;}
#pekPopup .form .pekResult .wr .btn button:active { background: #4cae4c; box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.13);}

@media (max-width: 768px) {
  #pekPopup .form{padding: 20px;}
  #pekPopup .form .fieldset .lbl{margin-bottom: 18px;}
  #pekPopup .form .fieldset .titles{display: none;}
  #pekPopup .form .fieldset .items .item .name{ width: 100%; margin-bottom: 10px;}
  #pekPopup .form .fieldset .items .item .name [name="item_name"]{ max-width: 250px;}
  #pekPopup .form .fieldset .items .item .name [name="calcDrum"]{ max-width: 250px;}
  #pekPopup .form .fieldset .items .item .count{ width: 100%; margin-bottom: 34px;}
  #pekPopup .form .fieldset .items .item .count:before{ content: attr(data-ttl); display: block;font-size: 12px;  line-height: 22px; color: #222;
  font-weight: 700; margin-bottom: 2px;}
  #pekPopup .form .fieldset .items .item .count input{ max-width: 90px;}
  #pekPopup .form .fieldset .items .item .gabarit{position: relative;}
  #pekPopup .form .fieldset .items .item .gabarit:before{content: attr(data-ttl); display: block;font-size: 12px;  line-height: 22px; color: #222;
  position: absolute; bottom: 100%; left: 0; font-weight: 700;}
  #pekPopup .form .fieldset .items .item .volume{ position: relative;}
  #pekPopup .form .fieldset .items .item .volume:before{content: attr(data-ttl); display: block;font-size: 12px;  line-height: 22px; color: #222;
    position: absolute; bottom: 100%; left: 0; font-weight: 700;}
  #pekPopup .form .fieldset .items .item .weight{ width: 100%; margin: 10px 0;}
  #pekPopup .form .fieldset .items .item .weight:before{ content: attr(data-ttl); display: block;font-size: 12px;  line-height: 22px; color: #222;
    font-weight: 700; margin-bottom: 2px;}
  #pekPopup .form .fieldset .items .item .weight input{ max-width: 90px;}
  #pekPopup .form .fieldset .items .item .act{ position: absolute; top: 0; right: 0; padding-top: 0;}
  #pekPopup .form .fieldset .control{ text-align: left;}
  #pekPopup .form .fieldset .control .total{ margin: 15px 0 0; display: block; padding-top: 0;}
  #pekPopup .form .fieldset .control .total > div{ display: block;}
  #pekPopup .form .fieldset .direction.from{ margin-bottom: 45px;}
  #pekPopup .form .fieldset .direction .ttl{ float: none; margin-bottom: 10px; width: 100%; text-align: left;}
  #pekPopup .form .fieldset .direction .city_block{ float: none; width: 100%;}
  #pekPopup .form .fieldset .direction .changeDirection{ left: 25px; top: -50px;}
  #pekPopup .form .pekResult .wr .logo{ margin-bottom: 25px; margin-left: 5px;}
  #pekPopup .form .pekResult .wr .pre_total{ margin-left: 5px; margin-bottom: 15px;}
  #pekPopup .form .pekResult .wr .btn{ width: 100%; padding: 5px;}
}

#pekPopup .comment input {
	display: inline-block;
	height: 40px;
	width: 100%;
	font-size: 13px;
	padding: 0 10px;
	border: 1px solid #c1e7f5;
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
	border-radius: 3px 3px 3px 3px;
	outline: none;
}