@import "variables";
.cp-awaiting-products {
	font-size: 12px;
	line-height: 16px;
	.panel {
		&.panel-tabs {
			.panel-body {
				padding: 16px;
				& + .panel-body {
					border-top: none;
				}
			}
		}
	}

	.cpap-filter {
		background: #F5F7FA !important;
		padding-top: 8px !important;
		@include box-shadow(inset 0 -1px 3px 0 #E9E9E9);
		.form-group {
			margin-top: 8px;
			.form-label {
				font-weight: bold;
			}
		}
		.form-control:not(.bootstrap-select), .btn {
			padding: 4px 8px;
			font-size: 12px;
			line-height: 16px;
			height: 26px;
		}
	}
	.cpap-order {
		background: #F5F7FA !important;
		position: relative;
		@include box-shadow(inset 0 -1px 3px 0 #E9E9E9);
		.cpap-order__info {
			.title {
				margin-bottom: 8px;
				color: $blue;
				.number {
					border-bottom-color: transparent;
					margin-right: 12px;
					font-size: 16px;
					font-weight: bold;
					&:hover {
						border-bottom-color: $blue;
					}
				}
			}
		}
		.cpap-order__infoTable {
			tr {
				td {
					padding: 4px 0 0 12px;
					vertical-align: top;
					&:first-child {
						padding-left: 0;
					}
				}
				&:first-child {
					td {
						padding-top: 0;
					}
				}
			}
		}
		.cpap-order__controls {
			margin: 0;
			padding: 0;
			list-style: none;
			@media(max-width: 991px){
				margin-top: 16px;
			}
			& > li {
				@media(max-width: 991px){
					&:not(:first-child){
						margin-top: 4px;
					}
				}
				.discard {
					@media(min-width: 992px){
						position: absolute; top: 16px; right: 16px;
					}
					color: $black;
					&:hover {
						color: $red;
					}
				}
				.apply {
					@media(min-width: 992px){
						position: absolute; bottom: 16px; right: 16px;
					}
					color: $green;
					&:hover {
						color: darken($green, 10%);
					}
				}
			}
		}
	}
	.cpap-success {

	}
	.cpap-table {
		position: relative;
		overflow: hidden;
		width: 100%;
		border-collapse: separate;
		border-spacing: 0;
		border: 0;
		font-family: Tahoma;
		a {
			border-bottom-color: transparent;
			&:hover {
				border-bottom-color: $blue;
			}
		}
		thead {
			tr {
				th, td {
					background: $color_gray_10;
					padding: 4px 8px;
				}
			}
		}
		tbody {
			tr {
				td {
					border-top: 1px solid $color_gray_10;
					padding: 4px 8px;
					vertical-align: top;
					&.td-active {
						background: #FFE180;
					}
					&.td-success {
						background: $green_light;
					}
					&.td-link {
						width: 16px;
						padding: 4px;
						font-size: 14px;
						white-space: nowrap;
						.fa {
							font-size: 16px;
						}
						a {
							border: none;
							text-decoration: none;
							color: $color_dark;
						}
					}
				}
			}
		}
		.cpap-table__product-name {
			position: relative;
			overflow: hidden;
			display: block;
			max-height: 32px;
			line-height: 16px;
		}
		.td-status {
			width: 6px;
			padding: 0;
			&.warning {
				background: $color_warning;
			}
			&.danger {
				background: $color_danger;
			}
		}
	}
	.cpap-table-date-changer {
		position: relative;
		padding: 8px;
		.cls {
			border: 0;
			position: absolute; top: 8px; right: 8px;
			z-index: 5;
			color: $black;
			&:hover {
				color: $blue;
			}
		}
		.panel-uniq {
			border: 0;
			max-width: 500px;
			margin-bottom: 8px;
			@include box-shadow();
			.panel-uniq-shorter {
				border: 0;
				position: absolute; top: 4px; right: 8px;
				display: block; height: 20px;
				font-size: 16px;
				line-height: 16px;
				color: $black;
				&:hover {
					color: $blue;
				}
			}
			.panel-body {
				background: #FFFFCA;
				border: 0;
				margin: 0;
				padding: 16px;
			}

			&.short {
				.panel-uniq-shorter {
					@include transform(rotate(180deg));
				}
				.panel-uniq-hide {
					display: none;
				}
			}
		}

		.collapser {
			.collapser-caret {
				//background: red;
				position: absolute; top: 8px; right: 8px;
				z-index: 5;
				display: block;
				width: 24px;
				height: 24px;
				font-size: 20px;
				line-height: 24px;
				text-align: center;
				&:hover {
					color: $blue;
					cursor: pointer;
				}
			}
		}
	}

	.b-flag {
		position: relative;
		padding-left: 22px;
		.b-flag__icon {
			position: absolute; top: 50%; left: 0;
			width: 16px;
			@include transform(translateY(-50%));
			img {
				display: block;
				width: 100%;
				@include box-shadow(0px 0px 3px $color_gray_30);
			}
		}
	}
}