/* Main block */
main {}
main .wrapper { width: 90%; max-width: 1170px; margin: 0 auto; display: block;}
main .user-name { font-size:20px; padding-left:30px; background-image:url("elementsOutput/user_icon.png"); background-repeat:no-repeat; background-position:center left; }
main article{ margin-top:10px; margin-bottom: 20px; font-size: 16px; position: relative; }
main article a{ text-decoration: underline; }
main article h3{ font-size: 20px !important; line-height: 1.2; padding: 30px 0 10px 0; }

/* Side Menu */
.sideMenu{ position: absolute; left: 0; top: 0; width: 250px; }
.sideMenu li{ width: 100%; font-size: 16px; background: #e6e6e6; margin-bottom: 5px; padding: 16px 0 13px 10px; text-transform: uppercase; }
.sideMenu li a{ text-decoration: none !important; }
.sideMenu .active{ background: #c4c4c4; }
.sideMenu .levelOne:hover{ background: #c4c4c4; }

.sideMenu .main-level{ background: #4982cf; color: #fff; margin-bottom: 10px; }

/* Main content */
.main-flex { display: flex; gap: 20px; }
.main-flex .main-left { width: 250px; flex-shrink: 0; }
.main-flex .main-right { flex: 1; min-width: 0; }
/*.main-left { float:left; width:20%; padding-right:1%; border-right:1px solid #3F86BA; }
.main-right { float:left; width:60%; padding-left:2%; }
.main-right hr { border-color:#3F86BA; }*/
.main-right .title { font-size:30px; text-transform:uppercase; padding-bottom:10px; }
.main-right .sub-title { font-size:15px; padding:10px 0; }
.main-left .title { font-size:30px; line-height: 31px; padding-bottom:10px; font-weight: 500; }
.main-left .description { font-size:14px; line-height: 21px; }
.main-left .company-name { font-size:22px; padding:15px 0; }
.main-left .side-label { font-size:18px; }
.main-left .side-text { font-size:15px; padding-bottom:15px; }


.main-right .order-list {
}
.main-right .order-title {
	font-size:16px;
	padding:8px 10px;
	margin-bottom:1px;
}
.main-right .order-item {
	font-size:16px;
	padding:0 10px;
	line-height: 71px;
	border-bottom: 2px solid #EBF4F5;
}
.main-right .order-date, .main-right .order-reference, .main-right .order-sum, .main-right .order-status, .main-right .order-details {
	float:left;
	width:20%;
}
.main-right .order-sum .arrow{ position: absolute; top: 20px; right: 0; height: 10px; width: auto; }
.main-right .order-sum .arrow-w{ position: absolute; top: 20px; right: 0; height: 10px; width: auto; display: none; }


.order-line-list {
}
.order-contents{ margin-bottom: 1px; display: none; }
.order-line-list .order-line-title {
	font-size:14px;
	padding:8px 10px;
	background: #c4c4c4;
}
.order-line-list .order-line-item {
	font-size:16px;
	padding:8px 10px;
	border-top:1px solid #E6E6E6;
}
.order-line-list .item-image { float:left; width:20%; line-height:1; }
.order-line-list .item-image img { width: 80%; position: relative; left: 10%; }
.order-line-list .item-info { float:left; width:40%; padding-left: 10px; }
.order-line-list .item-number { width:100%; word-wrap:break-word; }
.order-line-list .item-name { width:100%; word-wrap:break-word; font-weight: 700; }
.order-line-list .item-amount { float:left; width:10%; word-wrap:break-word; text-align: center; padding-left: 10px; }
.order-line-list .item-amount span{ display: none; }
.order-line-list .item-sum { float:left; width:15%; word-wrap:break-word; text-align:center; padding: 0 10px; }
.order-line-list .item-buy-again { float:left; width:15%; text-align:center; position:relative; }
.order-line-list .item-buy-again span.different-price { display:none; position:absolute; top:5px; right:10%; color:#F4211F; }
.order-row{ background: #e6e6e6; height: 60px; position: relative; }
.order-row .order-button{ position: absolute; width: 35%; height: 40px; right: 10px; top: 10px; line-height: 40px; color: #fff; font-weight: 700; text-transform:uppercase;
text-align:  center; background: #00aa49; cursor: pointer; border-radius: 5px; }

.main-right .opened{ color: #fff !important; background: #4982cf !important; }

.order-total-text { float:left; width:20%; font-size:16px; text-transform:uppercase; }
.order-total-sum { float:left; width:65%; text-align:right; font-size:16px; }


.button.b-close {
    font:bold 300% sans-serif;
    position:absolute;
    right:10px;
    top:5px;
	color:#FFFFFF;
	cursor:pointer;
}
.popup-title {
    font-size:15px;
    text-transform:uppercase;
	padding:10px 20px;
	color:#FFFFFF;
	background-color:#00579F;
	border-top-left-radius:3px;
	border-top-right-radius:3px;
}
.popup-text {
	font-size:14px;
	padding:0 20px;
}
.popup-message {
	padding:0 20px;
	font-size:16px;
}
.popup-message .info {
	color:#0071CE;
	text-align:center;
}
.popup-message .error {
	color:#EB0000;
}
.popup-message div img {
	height:14px;
	line-height:20px;
	vertical-align:baseline;
}
.popup-footer
{
	border-bottom-left-radius:3px;
	border-bottom-right-radius:3px;
	background-color:#E6E6E6;
	padding:10px 20px;
}
.popup-footer .popup-footer-text {
	display:none;
	float:left;
	width:65%;
	text-align:left;
	font-size:12px;
	color:#F4211F;
	text-transform:uppercase;
}
.popup-button {
	float:right;
	padding:5px 20px;
	text-align:center;
	background-color:#0071CE;
	border-radius:3px;
	font-size:18pxm;
	color:#FFFFFF;
	cursor:pointer;
}
#show-order-popup {
    display:none;
    background-color:#FFF;
    width:1024px;
	max-width:90%;
	border-radius:3px;
}




/* Checkbox */
.checkbox-exp {
  display: table;
  width: 100%;
  height: 100%;
}
.checkbox-exp .checkbox {
  display: table-cell;
  width: 100%;
  height: 100%;
  vertical-align: middle;
  text-align: center;
}
.checkbox-exp label {
  display: inline-block;
  color: #fff;
  cursor: pointer;
  position: relative;
}
.checkbox-exp label span {
  display: inline-block;
  position: relative;
  background-color: transparent;
  width: 25px;
  height: 25px;
  transform-origin: center;
  border: 2px solid #E6E6E6;
  border-radius: 50%;
  vertical-align: -6px;
  margin-right: 10px;
  transition: background-color 50ms 70ms, transform 100ms cubic-bezier(0.78, -1.22, 0.17, 1.89);
}
.checkbox-exp label span:before {
  content: "";
  width: 0px;
  height: 2px;
  border-radius: 2px;
  background: #00CE47;
  position: absolute;
  transform: rotate(45deg);
  top: 11px;
  left: 8px;
  transition: width 20ms ease 20ms;
  transform-origin: 0% 0%;
}
.checkbox-exp label span:after {
  content: "";
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: #00CE47;
  position: absolute;
  transform: rotate(305deg);
  top: 14px;
  left: 9px;
  transition: width 20ms ease;
  transform-origin: 0% 0%;
}
.checkbox-exp label:hover span:before {
  width: 5px;
  transition: width 25ms ease;
}
.checkbox-exp label:hover span:after {
  width: 10px;
  transition: width 50ms ease 25ms;
}

.checkbox-exp input[type="checkbox"] {
  display: none;
}
.checkbox-exp input[type="checkbox"]:checked + label span {
  background-color:#00CE47;
  /*transform: scale(1.25);*/
  border-color:#00CE47;
}
.checkbox-exp input[type="checkbox"]:checked + label span:after {
  width: 10px;
  background: #FFF;
  transition: width 50ms ease 25ms;
}
.checkbox-exp input[type="checkbox"]:checked + label span:before {
  width: 5px;
  background: #FFF;
  transition: width 50ms ease 25ms;
}
.checkbox-exp input[type="checkbox"]:checked + label:hover span {
  background-color: #fff;
  /*transform: scale(1.25);*/
}
.checkbox-exp input[type="checkbox"]:checked + label:hover span:after {
  width: 10px;
  background: #00CE47;
  transition: width 50ms ease 25ms;
}
.checkbox-exp input[type="checkbox"]:checked + label:hover span:before {
  width: 5px;
  background: #00CE47;
  transition: width 50ms ease 25ms;
}


@media screen and (max-width : 1340px){

.order-line-title .item-amount, .order-line-title .item-sum{ display: none; }
.order-line-title .item-info{ width: 65%; }

.order-line-list .order-line-item:not(:last-of-type){ position: relative; padding-bottom: 40px; }
.order-line-list .order-line-item:not(:last-of-type) .item-info{ width: 65%; }
.order-line-list .order-line-item:not(:last-of-type) .item-amount{ height: 40px; line-height: 40px; width: 40%; position: absolute; left: 20%; bottom: 0; text-align: left; }
.order-line-list .order-line-item:not(:last-of-type) .item-amount span{ display: inline-block; padding-right: 15px; }
.order-line-list .order-line-item:not(:last-of-type) .item-sum{ height: 40px; line-height: 40px; width: 30%; position: absolute; left: 60%; bottom: 0; }

}
@media screen and (max-width : 1020px){
.leftPadding{ padding-left: 0; }
.sideMenu{ position: relative; float: right; width: 100%; margin-top: 50px; }
}
@media screen and (max-width : 760px){
.main-right { float:none; width:100%; padding-right:0; border-right:none; }
.main-left { float:none; width:100%; padding:50px 0 0 0; border-top:1px solid #3F86BA; margin-top:50px; }
.order-line-list .item-number { float:none; width:100%; }
.order-line-list .item-name { float:none; width:100%; }
.order-total-sum { width:65%; }

.main-right .order-title, .main-right .order-item{ font-size: 13px; }
.main-right .order-title{ padding: 8px 0; }
.main-right .order-item{ padding: 0; }

.main-right .order-date, .main-right .order-reference, .main-right .order-sum{ padding-left: 5px; }
.main-right .order-reference{ width: 40%; }
.main-right .order-sum, .main-right .order-date{ width: 30%; }

.main-right .order-sum .arrow{ right: 5px; }
.main-right .order-sum .arrow-w{ right: 5px; }

.order-line-list .item-image{ width: 15%; }
.order-line-list .item-image img{ width: 90%; left: 5%; }

.order-line-list .item-buy-again{ width: 20%; }

.order-line-list .order-line-item{ font-size: 13px; }

.order-line-list .order-line-item:not(:last-of-type) .item-amount{ left: 15%; padding-left: 17px; }
.order-line-list .order-line-item:not(:last-of-type) .item-sum{ left: 55%; }

.order-line-list .order-line-item:last-of-type .item-image{ display: none; }
.order-line-list .order-line-item:last-of-type .item-info{ padding-left: 0; }
.order-line-list .order-line-item:last-of-type .item-amount{ padding-left: 5px; width: 22%; }
/*.order-line-list .order-line-item:last-of-type .item-amount span{ display: inline-block; padding-left: 10px; }*/
.order-line-list .order-line-item:last-of-type .item-sum{ padding: 0 5px; width: 23%; }

.order-row .order-button{ width: 50%; right: 25%; }

}