$black      : #000000;
$white      : #ffffff;
$red        : #d70a0a;
$red_light  : #ffb3b3;
$yellow     : #ffba0f;
$green      : #2db92d;
$green_dark : #006700;
$blue       : #0d61ab;
$body       : #fff4d5;
$gray_dark  : #333333;
$gray_light : #9b9b9b;
.page-request-refund {
	max-width: 1200px;
	color: $gray_dark;
	.color-blue {
		color: $blue;
	}
	.color-red {
		color: $red;
	}
	.color-yellow {
		color: $yellow;
	}
	.prr-data {
		margin-bottom: 32px;
		table {
			tr {
				td {
					vertical-align: top;
					&:not(:first-child){
						padding-left: 16px;
					}
				}
				&:not(:first-child){
					td {
						padding-top: 4px;
					}
				}
			}
			a {
				border-bottom: 1px solid transparent;
				text-decoration: none;
				color: $blue;
				&:hover {
					border-bottom-color: $blue;
				}
			}
		}
		.trash-link {
			border-bottom: 1px solid transparent;
			color: $red;
			&:hover {
				border-bottom-color: $red;
			}
		}
	}
	.prr-stages {
		margin-bottom: 20px;
		.prr-stages__tabs {
			position: relative;
			z-index: 2;
			overflow: hidden;
			overflow-x: auto;
			ul {
				display: flex;
				margin: 0;
				padding: 0;
				list-style: none;
				li {
				}
			}
			.tabs-item {
				border: 1px solid transparent;
				border-bottom: 0;
				position: relative;
				display: block;
				padding: 6px 12px 6px;
				font-size: 14px;
				color: $gray_light;
				white-space: nowrap;
				.icon {
					display: block;
					margin-bottom: 8px;
					svg, .fa {
						display: block;
						width: 16px;
						height: 16px;
						margin: 0 auto;
						font-size: 16px;
						line-height: 16px;
					}
				}
				.text {
					display: block;
				}
				&.active {
					background: $body;
					border-color: $yellow;
					/*border: 1px solid $yellow;
					border-bottom: 0;*/
					color: $gray_dark;
				}
				&.done {
					//color: $gray_dark;
					color: $blue;
					text-decoration: underline;
					.icon {
						svg {
							color: $green_dark;
						}
					}
					&:hover {
						text-decoration: none;
					}
				}
			}
		}
		.prr-stages__body {
			background: $body;
			border: 1px solid $yellow;
			position: relative;
			margin-top: -1px;
			padding: 16px;
			font-size: 14px;
		}
		.prr-stages__list {
			margin: 0;
			padding: 0;
			list-style: none;
			counter-reset: item;
			&:not(:last-child){
				margin-bottom: 12px;
			}
			& > li {
				position: relative;
				padding-left: 20px;
				&:not(:first-child){
					margin-top: 4px;
				}
				&:before {
					content: counters(item, ".") ".";
					counter-increment: item;
					position: absolute; top: 0; left: 0;
				}
				.prr-stages__description {
					//padding-top: 12px;
					margin-left: 0;
					margin-top: 8px;
				}
			}
		}
		.prr-stages__description {
			@media(min-width: 767px){
				border-left: 2px solid $yellow;
				margin-left: 20px;
				padding-left: 8px;
			}
			.description__head {
				margin-bottom: 2px;
				font-size: 16px;
				font-weight: bold;
			}
			.description__table {
				tr {
					td {
						vertical-align: top;
						&:not(:first-child){
							padding-left: 8px;
						}
					}
					&:not(:first-child){
						td {
							padding-top: 2px;
						}
					}
				}
			}
		}
	}
	.prr-products {
		a {
			border-bottom: 1px solid transparent;
			text-decoration: none;
			color: $blue;
			&:hover {
				border-bottom-color: $blue;
			}
		}
		.prr-products__row {
			position: relative;
			border-bottom: 1px solid #e1e1e1;
			display: flex;
			@media(max-width: 767px){
				flex-wrap: wrap;
			}
			.prr-products__col {
				padding: 10px;
				&.col-checkbox {
					position: relative;
					min-width: 24px;
					padding-left: 8px;
					padding-right: 0;
					input {
						position: absolute; top: 50%; left: 10px;
						margin: 0;
						padding: 0;
						@include transform(translateY(-50%));
					}
					@media(max-width: 767px){
						position: absolute; top: 11px; left: 56px;
					}
				}
				&.col-product {
					flex-grow: 1;
					@media(max-width: 767px){
						min-width: 100%;
						padding-bottom: 0;
						.prr-products__item {
							.image {
								margin-top: 24px;
							}
						}
					}
				}
				&.col-price {
					@media(max-width: 767px){
						display: none;
					}
					@media(min-width: 768px){
						min-width: 100px;
						text-align: right;
					}
				}
				&.col-discount {
					@media(max-width: 767px){
						display: flex;
						align-items: flex-start;
						margin-left: 80px;
						padding-top: 14px;
						font-size: 12px;
						s {
							background: #ccc;
							display: block;
							padding: 0 4px;
							color: $gray_dark;
						}
						i {
							background: $red;
							font-style: normal;
							display: block;
							padding: 0 4px;
							color: $white;
						}
					}
					@media(min-width: 768px){
						min-width: 100px;
						text-align: right;
						s {
							display: none;
						}
						i {
							font-style: normal;
							font-weight: bold;
							color: $green;
						}
					}
				}
				&.col-total {
					//color: $blue;
					@media(max-width: 767px){}
					@media(min-width: 768px){
						min-width: 100px;
						text-align: right;
					}
				}
				&.col-type {
					@media(max-width: 767px){
						min-width: 100%;
						padding-left: 90px;
						padding-top: 0;
					}
					@media(min-width: 768px){
						width: 160px;
						min-width: 160px;
					}
					.form-control {
						max-width: 100%;
					}
				}
				&.col-description {
					font-size: 12px;
					@media(max-width: 767px){
						min-width: 100%;
						padding-left: 90px;
						padding-top: 0;
					}
					@media(min-width: 768px){
						width: 60%;
						min-width: 60%;
					}
					table {
						tr {
							td {
								padding: 4px;
								vertical-align: top;
								&:first-child{
									width: 110px;
								}
								&:not(:first-child){
									padding-left: 12px;
								}
							}
							&:not(:first-child){
								td {
									border-top: 1px solid #e1e1e1;
								}
							}
						}
					}
				}
			}
			&.disabled {
				.prr-products__col {
					&.col-checkbox {
						visibility: hidden;
						opacity: 0;
					}
					&.col-product,
					&.col-price,
					&.col-discount,
					&.col-total {
						opacity: .3;
					}
				}
			}
		}
		.prr-products__head {
			background: #e9e9e9;
			@media(max-width: 767px){
				display: none;
			}
			.prr-products__row {
				.prr-products__col {
					padding: 4px 10px;
					font-size: 12px;
					//color: #909090;
				}
			}
			.heading {
				font-size: 16px;
				color: $color_dark;
			}
		}
		.prr-products__body {}
		.prr-products__item {
			display: flex;
			.image {
				width: 90px;
				min-width: 90px;
				padding-right: 10px;
				@media (max-width: 767px) {
					width: 80px;
					min-width: 80px;
				}
				img {
					display: block;
					max-width: 100%;
				}
			}
			.body {
				flex-grow: 1;
			}
			.title {
				font-weight: bold;
				line-height: 1.25;
			}
			.description {
				font-size: 12px;
			}
		}
	}
	.prr-data-table {
		max-width: 572px;
		margin-bottom: 24px;
		& + .prr-data-table {
			margin-top: 24px;
		}
		.prr-data-table__head {
			background: #ffefc1;
			display: flex;
			flex-wrap: wrap;
			margin-bottom: 8px;
			padding: 8px 12px;
			.title {
				flex-grow: 1;
				font-weight: bold;
			}
			.links {
				font-weight: bold;
				white-space: nowrap;
				.change {
					border-bottom-color: transparent;
					color: $blue;
					&:hover {
						border-bottom-color: $blue;
					}
				}
				.save {
					border-bottom-color: transparent;
					margin-left: 12px;
					color: $gray_light;
					cursor: not-allowed;
				}
			}
			@media(max-width: 767px){
				flex-direction: column;
				.links {
					font-size: 12px;
				}
			}
		}
		.prr-data-table__body {
			padding-left: 12px;
			.form-group {
				& + .form-group {
					margin-top: 8px;
					.form-label {
						font-size: 14px;
						line-height: 1.25;
					}
				}
				&.inline {
					display: flex;
					//padding-left: 12px;
					align-items: center;
					.form-label {
						width: 45%;
						padding-right: 8px;
					}
					.form-field {
						width: 55%;
					}
					@media(max-width: 575px){
						flex-direction: column;
						align-items: normal;
						.form-label {
							width: 100%;
							padding-left: 0;
							margin-bottom: 2px;
						}
						.form-field {
							width: 100%;
						}
					}
				}
			}
		}
		&.in {
			.prr-data-table__head {
				.links {
					font-weight: bold;
					white-space: nowrap;
					.change {
						border-bottom-color: transparent;
						margin-left: 12px;
						color: $gray_light;
						cursor: not-allowed;
					}
					.save {
						border-bottom-color: transparent;
						margin-left: 12px;
						color: $blue;
						&:hover {
							border-bottom-color: $blue;
							cursor: pointer;
						}
					}
				}
			}
		}
	}
	.prr-summary-error {
		margin: 8px 0 2px;
		padding: 0;
		list-style: none;
		//text-align: right;
		& > li {
			&:not(:first-child){
				margin-top: 4px;
			}
		}
		.label {
			display: inline-block;
			padding: 8px 12px;
			color: $black;
			text-align: left;
			border-radius: 2px;
			-ms-border-radius: 2px;
			-moz-border-radius: 2px;
			-webkit-border-radius: 2px;
			&.label-light-danger {
				background: #FFB3B3;
			}
		}
	}
	.prr-controls {
		position: relative;
		margin-left: -4px;
		margin-right: -4px;
		text-align: right;
		.btn {
			margin: 2px 4px;
			padding: 12px 20px;
			border-radius: 2px;
			-ms-border-radius: 2px;
			-moz-border-radius: 2px;
			-webkit-border-radius: 2px;
			@media(max-width: 575px){
				padding: 8px 16px;
				font-size: 14px;
			}
		}
	}
	.prr-collapse {
		.prr-collapse__head {
			background: #eef1f5;
			position: relative;
			display: flex;
			padding: 12px 16px;
			@media(max-width: 767px){
				flex-direction: column;
			}
			.toggle-mark {
				background: rgba(0,0,0,.5);
				position: absolute; top: 17px; left: 16px;
				display: block;
				width: 12px;
				height: 12px;
				@include border-radius(3px);
				&:before, &:after {
					content: '';
					background: #eef1f5;
					position: absolute; top: 50%; left: 50%;
					display: block;
					width: 8px;
					height: 2px;
					@include border-radius(3px);
					@include transform(translateX(-50%) translateY(-50%));
				}
				&:after {
					@include transform(translateX(-50%) translateY(-50%) rotate(90deg));
				}
			}
			.body {
				flex-grow: 1;
				padding-left: 20px;
			}
			.side {
				color: $blue;
				@media(max-width: 767px){
					font-size: 13px;
				}
				.a {display: none;}
				.b {display: block;}
			}
			&:hover {
				cursor: pointer;
			}
		}
		.prr-collapse__body {
			display: none;
			padding: 16px;
		}
		.prr-collapse__product {
			position: relative;
			margin-bottom: 20px;
			.remover {
				border: 0;
				font-size: 14px;
				font-weight: 500;
				color: $gray;
				@media(min-width: 992px){
					position: absolute; top: 0; right: 0;
				}
				&:hover {
					color: $red;
				}
			}
			.product__image {
				max-width: 100px;
				&:not(:first-child){
					@media(max-width: 991px){
						margin-top: 12px;
					}
				}
				img {
					display: block;
					max-width: 100%;
				}
			}
			.aimbox-link {
				display: inline-block;
				&.hover {
					cursor: pointer;
				}
			}
		}
		.prr-collapse__form {
			max-width: 400px;
			margin: 0;
			padding: 0;
			list-style: none;
			& + .prr-collapse__form {
				margin-top: 16px;
			}
			dt {
				margin-bottom: 4px;
				font-weight: bold;
				i {
					font-weight: normal;
				}
			}
			dd {
				& + dd {
					margin-top: 4px;
				}
			}
			.form-group {
				.d-flex {
					display: flex;
					align-items: center;
					.form-label {
						width: 45%;
						//padding-top: 4px;
						margin: 0;
						padding-right: 8px;
						font-size: 12px;
						line-height: 1.25;
					}
					.form-field {
						align-self: center;
						width: 55%;
					}
					@media(max-width: 575px){
						flex-direction: column;
						.form-label {
							width: 100%;
							padding-right: 0;
							margin-bottom: 2px;
						}
						.form-field {
							width: 100%;
						}
					}
				}
			}
			&.has-error {
				background: #fbe6e6;
				padding: 4px;
			}
		}

		&.saved {
			.prr-collapse__head {
				.side {
					.a {
						display: block;
					}
					.b {
						display: none;
					}
				}
			}
		}

		&.in {
			.prr-collapse__head {
				.toggle-mark {
					&:after {
						display: none;
					}
				}
				.side {}
			}
			.prr-collapse__body {
				display: block;
			}
		}
	}
	.prr-collapse-list {
		margin-bottom: 20px;
		.prr-collapse:not(:first-child) {
			margin-top: 12px;
		}
	}
	.prr-contacts {
		.prr-contacts-form {
			max-width: 440px;
			& + .prr-contacts-form {
				margin-top: 16px;
			}
			dt {
				margin-bottom: 4px;
				font-weight: bold;
			}
			dd {
				& + dd {
					margin-top: 4px;
				}
			}
			.form-group {
				.d-flex {
					display: flex;
					align-items: center;
					.form-label {
						min-width: 80px;
						padding-right: 8px;
					}
					.form-field {
						flex-grow: 1;
					}
					@media(max-width: 575px){
						flex-direction: column;
						align-items: normal;
						.form-label {
							padding-right: 0;
							margin-bottom: 2px;
						}
					}
				}
			}
		}
	}

	.prr-miniInfo {
		.box {
			position: relative;
			display: inline-block;
			padding: 12px 24px 12px 32px;
			.icon {
				position: absolute; top: 16px; left: 12px;
				display: block;
				width: 14px;
				height: 14px;
				color: $gray_dark;
			}
			&.info {
				background: #d5e6f6;
			}
		}
	}

	.prr-result {
		margin-bottom: 24px;
		table {
			font-size: 14px;
			line-height: 1.25;
			tr {
				td {
					vertical-align: top;
					padding: 4px;
					&:first-child {
						width: 160px;
					}
					&:not(:first-child) {
						font-weight: 600;
					}
				}
				&:nth-child(odd){
					td {
						background: #f6f6f6;
					}
				}
			}
		}
	}

	.prr-boxTable {
		.prr-boxTable__head {
			background: #e9e9e9;
			padding: 4px 10px;
			font-size: 12px;
			.heading {
				font-size: 16px;
			}
		}
		.prr-boxTable__body {
			padding: 8px 10px;
			table {
				margin-left: -4px;
				margin-right: -4px;
				tr {
					td {
						padding: 4px;
					}
					&:not(:first-child){
						td {
							border-top: 1px solid #e1e1e1;
						}
					}
				}
			}
		}
	}

	.form-check.stylize.active + .form-group.hidden {
		display: block !important;
		margin-top: 8px;
	}
}

.fileUploader {
	&.style-a {
		border: 1px dashed #b9b9b9;
		position: relative;
		overflow: hidden;
		display: flex;
		align-items: center;
		& > input[type=file] {
			position: absolute; top: -2px; left: -2px;
			z-index: 55;
			display: block;
			font-size: 120px;
			letter-spacing: 120px;
			opacity: 0;
			cursor: pointer;
		}
		.fileUploader__btn {
			position: relative;
			overflow: hidden;
			padding: 4px 0 4px 12px;
			white-space: nowrap;
		}
		.fileUploader__field {
			position: relative;
			overflow: hidden;
			flex-grow: 1;
			input {
				background: none;
				border: 0;
				display: block;
				width: 100%;
				height: 40px;
				padding: 4px 8px;
			}
		}
		&.disabled {
			background: #e5e5e5;
		}
	}
}
.fileUploader-list {
	margin: 0;
	padding: 0;
	list-style: none;
	& > li {
		background: #f5f7f9;
		position: relative;
		overflow: hidden;
		margin-top: 6px;
		padding: 6px 28px 6px 12px;
		font-size: 12px;
		color: $blue;
		text-overflow: ellipsis;
		white-space: nowrap;
		a {
			border-bottom-color: transparent;
			&:hover {
				border-bottom-color: $blue;
			}
		}
		a.remove {
			border: none;
			position: absolute; top: 50%; right: 12px;
			margin-top: -10px;
			font-size: 17px;
			color: rgba(0,0,0,.4);
			//color: $red;
			line-height: 20px;
			&:not(.disabled):hover {
				color: $red;
			}
			&.disabled {
				color: rgba(0,0,0,.15);
			}
		}
	}
}