.checkout {
	background: $white;
	
	@include border-radius(6px);
	
	& .checkout-header {
		padding: rem(25px) rem(30px);
		background: $gray-800;
		
		@include border-radius(6px 6px 0 0)
		@include media-breakpoint-down(md) {
			white-space: nowrap;
			overflow: scroll;
			padding: rem(15px);
		}
		
		& .row {
			@include media-breakpoint-down(md) {
				display: block;
			}
			
			& > div {
				@include media-breakpoint-down(md) {
					display: inline-block;
					width: auto;
				}
				
				& + div {
					border-left: 1px solid $gray-700;
					
					@include media-breakpoint-down(md) {
						
					}
				}
			}
		}
	}
	& .checkout-body {
		padding: rem(25px) rem(30px);
		
		@include media-breakpoint-down(md) {
			padding: rem(15px);
			font-size: rem(12px);
		}
	}
	& .checkout-footer {
		padding: rem(25px) rem(30px);
		text-align: right;
		background: $gray-300;
		
		@include border-radius(0 0 6px 6px);
		@include media-breakpoint-down(md) {
			padding: rem(15px);
		}
		@include media-breakpoint-down(xs) {
			text-align: center;
		}
		
		& .btn {
			@include media-breakpoint-down(md) {
				padding: rem(8px) rem(15px) !important;
				font-size: rem(12px) !important;
				width: auto !important;
			}
			@include media-breakpoint-down(xs) {
				float: none !important;
				margin: rem(5px);
			}
		}
		& .btn-white {
			border-color: transparent;
		}
	}
	& .checkout-title {
		font-weight: 600;
		margin: 0 0 rem(30px);
		
		@include media-breakpoint-down(md) {
			font-size: rem(16px);
			margin-bottom: rem(15px);
		}
		
		& small {
			display: block;
			font-size: rem(14px);
		}
	}
	& .checkout-message {
		padding: rem(20px) rem(40px);
		
		@include media-breakpoint-down(md) {
			padding: 0;		
		}
	
		& h1 {
			margin: 0 0 rem(30px);
			font-size: rem(36px);
			text-align: center;
			
			@include media-breakpoint-down(md) {
				font-size: rem(28px);
				margin-bottom: rem(15px);
			}
		
			& small {
				display: block;
				font-size: rem(16px);
				margin-top: rem(15px);
				color: lighten($dark, 15%);
				
				@include media-breakpoint-down(md) {
					font-size: rem(14px);
					margin-top: rem(5px);
				}
			}
		}
	}
	& .table.table-cart {
		& th {
			border: none;
			padding: rem(10px) rem(20px) rem(5px);
			
			@include media-breakpoint-down(md) {
				padding: rem(10px) rem(15px) rem(5px);
			}
		}
		& td {
			padding: rem(15px) rem(20px);
			
			@include media-breakpoint-down(md) {
				padding: rem(15px);
			}
		}
		& .cart-product {
			& .product-img {
				float: left;
				width: rem(120px);
				
				@include media-breakpoint-down(md) {
					width: rem(80px);
				}
				
				& + .product-info {
					margin-left: rem(135px);
					
					@include media-breakpoint-down(md) {
						margin-left: rem(95px);
						white-space: nowrap;
					}
				}
				& img {
					max-width: 100%;
				}
			}
			& .product-info {
				& .title {
					font-size: rem(16px);
					font-weight: 600;
					
					@include media-breakpoint-down(md) {
						font-size: rem(14px);
					}
				}
				& .desc {
					font-weight: 600;
					font-size: rem(12px);
					color: lighten($black, 50%);
				}
			}
		}
	}
	& .cart-qty {
		width: rem(160px);

		& .qty-desc {
			font-size: rem(12px);
			color: lighten($black, 50%);
			margin-top: rem(5px);
		}
		& .cart-qty-input {
			@include display-flex();
			@include flex-align(center);
	
			& .qty-control,
			& .form-control  {
				float: none;
				width: auto;
			}
			& .form-control {
				width: rem(36px);
				margin: 0 rem(2px);
				padding-left: rem(5px);
				padding-right: rem(5px);
				text-align: center;
			}
			& .qty-control {
				color: $dark;
				width: rem(36px);
		
				@include border-radius(36px);
		
				&:hover,
				&:focus {
					background: $gray-200;
				}
			}
		}
	}
	& .cart-total,
	& .cart-control {
		width: rem(100px);
	}
	& .table.table-payment-summary {
			border-bottom: 1px solid $gray-300;
			margin-bottom: rem(30px);
	
			& th,
			& td {
				padding: rem(10px) rem(15px);
				
				@include media-breakpoint-down(md) {
					display: block;
					
					@include clearfix();
				}
			}
			& .field {
				font-weight: 600;
				text-align: right;
				width: 50%;
				
				@include media-breakpoint-down(md) {
					width: auto;
					text-align: left;
				}
				
				& + .value {
					@include media-breakpoint-down(md) {
						border-top: none;
						padding-top: 0;	
					}
				}
			}
			& .product-summary {
				& .product-summary-img {
					float: left;
					width: rem(120px);
					margin-right: rem(10px);
					
					@include media-breakpoint-down(md) {
						width: rem(80px);
					}
			
					& img {
						max-width: 100%;
					}
				}
				& .product-summary-info {
					& .title {
						font-weight: 600;
						font-size: rem(16px);
						
						@include media-breakpoint-down(md) {
							font-size: rem(14px);
							line-height: rem(18px);
							margin-bottom: rem(5px);
						}
					}
					& .desc {
						font-size: rem(12px);
						font-weight: 600;
						color: lighten($black, 60%);
					}
				}
			}
		}
}