html body{
  font-size: 14px;
  line-height: 1.2;
  font-family: Arial;
  font-style: normal;
  font-weight: normal;
  background: #E5E5E5; 
  margin: 0;
  padding: 0;
  max-width: 100%;
  color: #292828;
}

.page{
  max-width: 600px;
  margin: 0 auto;
}

.main-header{
  background: #CB2128;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.main-header a{
  text-decoration: none;
}

.main-header .print-btn a{
  color: #fff;
  font-weight: bold;
  color: #fff;
  font-weight: bold;
  display: flex;
  height: 24px;
  align-items: center;
  justify-content: space-between;
}
.main-header .print-btn a img{
  margin-right: 5px; 
}

section{
  background: #fff;
  margin-bottom: 40px;
  padding: 17px 20px 15px 20px;
}

section .top{
  display: flex;
  justify-content: space-between;
}
section .title{
  font-weight: bold;
  font-size: 28px;
  flex: 0 0 auto;
  width: 80%;
  margin-bottom: 20px;
}

section .qr{
  font-weight: bold;
  font-size: 28px;
  flex: 0 0 auto;
  width: 20%;
}

section .title .payment_number{
  font-weight: normal;
  font-size: 20px;
  margin-top: 17px;
}

section .body{
   border:1px solid #f2f4f6;
}

section .lines .line_title{
  font-weight: bold;
  font-size: 18px;
  padding: 0 20px;
  height: 50px;
  display: flex;
  align-items: center;
  background-color: #f8f9fb;
}


section .lines .line_items{
  padding: 10px 20px 30px 20px;
}

section .lines .line_items td{
  vertical-align: top;
}

section .lines .line_items .item_info td{
  color: #908f8f;
}

section .lines .line_items .item_tax td{
  color: #908f8f; 
}

section .lines .line_items  td.tax_value{
  text-align: right;
  color: #292828;
}

section .lines .line_items .cart_position td{
  padding-top: 20px;
  padding-bottom: 10px;
}

section .lines .line_items td.sum{
  text-align: right;
}

section .lines .line_items td.name,
section .lines .line_items td.tax_name{
  width: 50%;
  font-size: 14px;
}
section .lines .line_items td.name{
  padding-right: 2em;
}

section .total_lines{
  margin:0 20px;
  border-top: 1px dashed #949393;
  padding:15px 0 26px 0;
}

section .total_lines .line{
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  color: #908f8f;
}

section .total_lines .line.line_main{
  font-weight: bold;
  font-size: 22px;
  color: #292828;
}

section .requisites-link-wrap{
  text-align: center;
  font-size: 14px;
  line-height: 24px;
  color: #908f8f;
  border-left:1px solid #f2f4f6;
  border-right:1px solid #f2f4f6;
  border-bottom:1px solid #f2f4f6;
  padding: 10px 0;
  cursor: pointer;
}
section .requisites-link-wrap .arrow{
  display: inline-block;
  width: 11px;
  height: 11px;
  
}

section .requisites-link-wrap .arrow.bottom{
  background: transparent url("/pic/receipt/arrow-bottom.png") center center no-repeat;
}

section .requisites-link-wrap .arrow.top{
  background: transparent url("/pic/receipt/arrow-top.png") center center no-repeat;
}

section .requisites{
  border-left:1px solid #f2f4f6;
  border-right:1px solid #f2f4f6;
  border-bottom:1px solid #f2f4f6;
  padding: 0 20px;
  overflow: hidden;
}

section .requisites .line{
  font-size: 14px;
  line-height: 24px;
    display: flex;
  justify-content: space-between;
}

section .requisites .line .line_title{
  color: #908f8f; 
}


section .ofd-link-wrap{
  text-align: center;
  font-size: 14px;
  line-height: 24px;
  padding: 10px 0;
}

section .ofd-link-wrap a{
  color: #2975A4;
  font-weight: bold;
  font-size: 16px;
  text-decoration: none;
}
.btn-show-agent{
  color:#2975A4;
}

section .agentinfo_wrap{
  display: none;
}

section .agentinfo_wrap .line{
  display: flex;
  justify-content: space-between;
}

section .agentinfo_wrap .line span,
section .agentinfo_wrap .line .line_title{
  font-weight: normal;
  font-size: 14px;
  background: transparent;
  padding: 0;
  height: auto;
  line-height: 24px;
  border: 0;
}

@media screen and (max-width : 600px) {
    body{
      font-size: 12px;
    }
    #print{
      font-size: 0;
    }
    section .title{
      font-size: 22px;
    }
    section .title .payment_number{
      font-size: 16px; 
      margin-top:7px;
    }
    section .qr img{
      max-width: 70px;
      height:auto;
    }
    .lines table,
    .lines tbody{
      display: block;
    }
    section .lines .line_items{
      padding: 10px 10px 30px 10px;
    }

    section .lines .line_items .cart_position td,
    section .lines .line_items .item_info td,
    section .lines .line_items .item_tax td{
      padding: 0;
      display: block;
      border-spacing: 0;
      margin-bottom: 5px;
    }

    .lines table .cart_position{
      display: flex;
      flex-wrap: wrap;
      width:100%;
      max-width: 100%;
      margin-top: 20px;
    }

    .lines table .cart_position td.row_id{
      width:20px;
      flex: 0 0 auto;
    }
    .lines table .cart_position td.name{
      width:calc(100% - 20px);
      flex: 0 0 auto;
    }
    .lines table .cart_position td.cart_qty_price{
      margin-left:20px;
      width:calc(50% - 20px);
      flex: 0 0 auto;
    }
    .lines table .cart_position td.sum{
      width:50%;
      flex: 0 0 auto;
    }

    .lines table .item_info,
    .lines table .item_tax{
      display: flex;
      flex-wrap: wrap;
      width:100%;
      max-width: 100%;
    }

    .lines table .item_info td:first-child,
    .lines table .item_tax td:first-child{
      display: none;
    }
    .lines table .item_info td.tax_name,
    .lines table .item_tax td.tax_name{
      margin-left:20px;
      width:calc(50% - 20px);
      flex: 0 0 auto;
    }
    .lines table .item_info td.tax_value,
    .lines table .item_tax td.tax_value{
      width:50%;
      flex: 0 0 auto;
    }

    .lines table .item_info td.payment_info{
      margin-left:20px;
      width:calc(100% - 20px);
      flex: 0 0 auto;
    }
    
    section .total_lines .line.line_main{
      font-size: 18px;
    }
}

body.print .main-header,
body.print .ofd-link-wrap,
body.print .requisites-link-wrap{
  display: none;
}

body.print section .body{
  border: 0;
  border-bottom: 1px dashed #949393
}

body.print{
  font-size: 12px;
}

body.print .requisites{
  height: auto !important;
  padding: 10px 0 !important;
  border: 0;
}

body.print section .title{
  font-size: 18px;
}
body.print section .title .payment_number{
  font-size: 16px; 
  margin-top:7px;
}

body.print section .qr img{
  max-width: 70px;
  height:auto;
}
body.print .page{
  max-width: 400px;  
}
body.print section .lines .line_title{
  font-size: 14px;
  height: auto;
  padding: 0 0 10px 0;
  background: transparent;
  border-bottom: 1px dashed #949393
}
body.print section .agentinfo_wrap .line span,
body.print section .agentinfo_wrap .line .line_title{
  font-weight: normal;
  font-size: 12px;
  background: transparent;
  padding: 0;
  height: auto;
  line-height: 20px;
  border:0;
}

body.print section .lines .line_items{
  padding: 0;
}
body.print section .lines .line_items .cart_position td{
  padding-top: 15px;
  padding-bottom: 0;
}

body.print section .total_lines{
  margin:0;
  margin-top: 20px;
  padding-bottom: 0;
}

body.print section .total_lines .line.line_main{
  font-size:14px;
}

body.print section .requisites .line{
  font-size: 11px;
  line-height:16px;
}

body.print section .requisites .line .value{
  text-align: right;
}
body.print .btn-show-agent{
  color:#908f8f;
  text-decoration: none;
}

@media print {
    .pagebreak {
        clear: both;
        page-break-after: always;
    }
}