// Order
.order_area{
	@extend .section_padding;
	.order_title{ 
		margin-bottom: 80px;
		h2{ 
			font-size: 60px;
			@include firasans(500);
			color: $brand_2;
		}

		p{
			text-transform: uppercase;
			font-size: 18px;
			margin-top: 5px;
			color: #fff;
			@include firasans(400);
		}
	}
	h3.selected_plan{ 
		color: $brand_2;
		display: inline-block; 
		@include firasans(500); 
		font-size: 36px;
		margin-bottom: 20px;
	}
	.vps_plan,	.summary{ 
		background: #00000059;
		border-radius: 5px;
		padding: 40px;
		position: relative;
		height: 380px;
		z-index: 1;
		margin-bottom: 80px;
		h3{ 
			display: inline-block; 
			@include firasans(500); 
			font-size: 24px;
			color: #fff;
			margin-bottom: 10px;
		}
		table {
	        margin-bottom: 0;
	        td, th{ 
	            padding: 10px;
	            border: none;
	            font-size: 18px;
	            color: #fff;
	        }
	        td.price{ color: $brand_2; }
	        td .form-check{ display: inline-block; }
	        tr.b_border{ border-bottom: 2px solid #ccc; margin-top: 20px;  }
	        tr{ height: 15px; }
	    }
	}
	.vps_plan {
		clear: both;
		padding-left: 100px;
		a{ 
			display: inline-block; 
			float: right; 
			font-size: 18px;
			margin-top: 5px;
			text-decoration: underline;
		}
		i{
		    position: absolute;
		    left: 30px;
		    top: 45px;
		    font-size: 50px;
		    color: $green;
		}
		table {
	        td, th{  padding: 7px;  }
	    }
	 }
	label.custom-control-label{
		&:before, &:after { top: 0; }
	}	
}
.account_details_form{
	color: $text;
	.form-group{ margin-bottom: 35px; }
	.required:after {
	    position: absolute;
	    z-index: -1;
	    left: auto;
	    right: -25px;
	    height: 20px;
	    width: 20px;
	    content: '*';
	    font-size: 20px;
	    top: -3px;
	    color: red;
	}
	label{ 
		font-size: 18px; 
		margin-bottom: 15px;
		color: #fff;
		position: relative; 
		z-index: 1;
	}
	input[type="text"], input[type="email"], select{
		background: #00000059;
		padding: 10px;
		height: 65px;
		border-radius: 8px;
		border: 1px solid #fff;
		color: #fff;
	}

	/** Custom Select **/
	.custom_select_wrapper {
		position: relative;
		select {
			display: none;
			padding: 0 !important;
			position: relative;
		}
		.custom_select{
			&.form-control{
				background: #00000059;
				padding: 10px;
				height: 65px;
				border-radius: 8px;
				border: 1px solid #fff;
				text-transform: uppercase;
			}
			.custom_select_trigger {
				position: relative;
				display: block;
				width: 100%;
				height: 100%;
				padding: 10px;;
				font-size: 18px;
				color: #fff;
				cursor: pointer;
				@include transition(all, .5s, ease-in-out);
				&:after {
					position: absolute;
					display: block;
					content: '';
					width: 10px; 
					height: 10px;
					top: 50%; 
					right: 25px;
					margin-top: -3px;
					border-bottom: 1px solid $brand_2;
					border-right: 1px solid $brand_2;
					transform: rotate(45deg) translateY(-50%);
					@include transition(all, .5s, ease-in-out);
					transform-origin: 50% 0;
				}
			}
			&.opened{ 
				@include boxshadow( 0px, 0px, 38px, 2px, rgba(0, 0, 0, 0.0), false);
			}
			&.opened .custom_select_trigger:after {
				margin-top: 3px;
				transform: rotate(-135deg) translateY(-50%);
			}
			.custom_options {
				position: absolute;
				z-index: 99;
				display: block;
				top: 100%; left: 0; right: 0;
				min-width: 100%;
				border: 2px solid #dce3e9;
				box-sizing: border-box;
				@include boxshadow( 0, 2px, 1px, 0px, rgba(0,0,0,.07), false);
				background: #f6faff;
				@include transition(all, .5s, ease-in-out);
				opacity: 0;
				visibility: hidden;
				pointer-events: none;
				transform: translateY(-15px);
				.custom_option {
					font-size: 18px;
					padding: 5px 15px 5px 22px;
					cursor: pointer;
					margin: 0;
					text-align: left;
					line-height: 30px;
					display: block;
					color: $brand_2;
					transition: all .4s ease-in-out;
					&:last-of-type {
						border-bottom: 0;
					}
					&:hover {
						background: $brand_2;
						color: #fff;
					}
				}
			}
			&.opened .custom_options {
				opacity: 1;
				visibility: visible;
				pointer-events: all;
				transform: translateY(0px);
			}
		}
	}
	hr{
	    background: #dce3e9;
	    height: 2px;
	}
	h3{
		font-size: 36px;
		color: $brand_2;
		margin-bottom: 20px;
		@include firasans(400);
	}
	p{
		font-size: 18px;
		color: #fff;
		line-height: 1.5;
		@include firasans(400);
	}
	.boxed_btn{ 
	    width: 100%;
	    border-radius: 10px;
	    padding: 16px;
	    background: $brand_2;
	    display: block;
	    margin-top: 40px;
	    color: #fff;
	    font-size: 18px;
	    text-transform: uppercase;
	    outline: none;
	    border: none;
	    cursor: pointer;
	    @include transition(all, .3s, ease-in-out);
	    &:hover{
	    	background: #fff;
	    	color: $brand_2;
	    }
	}
}


	// Responsive
@media #{$medium_device}{
	.order_area{
		.order_title h2{
			font-size: 48px;
		}
		.summary, .vps_plan{ 
			table {
		        td, th{  font-size: 16px; }
		    }
		}
		.vps_plan,	.summary{ padding: 30px 20px; }
		.vps_plan { padding-left: 80px; }
	}
}
@media #{$tab_device_below}{
	.order_area{ 
		.order_title {
			margin-bottom: 50px;
			h2{ font-size: 36px; }
			p{ font-size: 16px; }

		}
		h3.selected_plan{ font-size: 28px; margin-bottom: 15px; }
		.summary, .vps_plan{ 
			table {
		        td, th{   font-size: 14px; }
		    }
		}
		.vps_plan,	.summary{ 
			padding: 20px;
			height: 340px;
			margin-bottom: 50px;
			h3{ font-size: 18px; }
		}
		.vps_plan {
			padding-left: 60px;
			i {
			    left: 14px;
			    top: 20px;
			    font-size: 36px;
			}
			a{ font-size: 14px; }
		}
	}
	.account_details_form{
		h3{ 
			font-size: 28px;
			margin-bottom: 15px;
		}
		p{ font-size: 14px; }
		.form-group{ margin-bottom: 20px; }
		input[type="text"], input[type="email"], select{ 
			font-size: 14px;
			height: 40px; 
		}
		label {
		    font-size: 14px;
		    margin-bottom: 10px;
		}
		.boxed_btn{
			margin-top: 30px;
			font-size: 14px;
			padding: 12px;
		}
		.custom_select_wrapper .custom_select.form-control {
			height: 40px; padding: 0;
			.custom_select_trigger{ font-size: 14px; padding: 10px; }
		}
	}
}
@media #{$small_mobile}{
	.order_area {
		.order_title h2{
			font-size: 28px;
		}
		.vps_plan,	.summary{ 
		    height: 284px;
	    	margin-bottom: 40px;
			table {
		        td, th{  padding: 5px; }
		    }
		}
		.vps_plan {
			padding-left: 20px;
			i{ display: none; }
		}
	}
	
	.account_details_form h3, .order_area h3.selected_plan{
		font-size: 24px;
	}
}
@media #{$large_mobile}{
	
}