@import "variables";
#modal-quickOrderForm {
	.modal-dialog {
		@media (min-width: 992px){
			width: 760px;
		}
	}
}

.modalBox {
	display: none;
	&.active {
		display: block;
	}
}
.quickOrderForm-balloon {
	background: #00A6BB;
	position: fixed; bottom: 16px; right: 16px;
	z-index: 999;
	width: 450px;
	font-size: 18px;
	font-weight: bold;
	color: $white;
	@include border-radius(4px);
	@include box-shadow(0 2px 4px 0 rgba(0,0,0,0.5));
	.closer {
		top: 12px;
		right: 12px;
		width: 20px;
		height: 20px;
		opacity: .75;
		&:before, &:after {
			background: $white;
		}
		&:hover {
			opacity: 1;
		}
	}
	.balloon__link {
		border: 0;
		display: block;
		padding: 16px 72px 16px 100px;
		color: inherit;
	}
	.userpic {
		position: absolute; top: -20px; left: 24px;
		//overflow: hidden;
		width: 60px;
		img {
			background: $white;
			border: 2px solid #00A6BB;
			display: block;
			width: 100%;
			@include border-radius(50%);
		}
		.status {
			background: $color_gray_20;
			border: 1px solid $white;
			position: absolute; right: 0; bottom: 1px;
			z-index: 5;
			display: block;
			width: 20px;
			height: 20px;
			@include border-radius(50%);
			&.success {
				background: $green;
			}
		}
	}
	@media (max-width: 575px){
		right: 0; bottom: 0; left: 0;
		width: auto;
		@include border-radius(0);
		.balloon__link {
			padding: 20px 40px 20px 88px;
		}
		.userpic {
			left: 12px;
		}
	}
}

.quickOrderForm-action {
	.media {
		.media-left {
			padding-right: 8px;
		}
		.userpic {
			position: relative;
			width: 120px;
			padding: 0 0 8px 8px;
			img {
				display: block;
				width: 100%;
			}
			.status {
				background: $gray;
				border: 2px solid $white;
				position: absolute; bottom: 0; left: 0;
				display: block;
				width: 24px;
				height: 24px;
				@include border-radius(50%);
				&.success {
					background: $green;
				}
			}
		}
		.phrase {
			padding-bottom: 20px;
			span {
				background: #D5E6F6;
				position: relative;
				display: inline-block;
				padding: 12px 16px;
				font-size: 22px;
				font-weight: bold;
				color: #0D61AB;
				&:before {
					content: '';
					position: absolute; top: 100%; left: 0;
					width: 0;
					height: 0;
					border-top: 20px solid #D5E6F6;
					border-right: 20px solid transparent;
				}
			}
		}
		@media (max-width: 575px){
			.media-left {
				padding-right: 2px;
			}
			.userpic {
				width: 60px;
			}
			.phrase {
				padding-bottom: 40px;
				padding-right: 8px;
				span {
					padding: 8px 12px;
					font-size: 16px;
					&:before {
						border-top: 12px solid #D5E6F6;
						border-right: 12px solid transparent;
					}
				}
			}
		}
	}
	.buttons {
		margin: -40px 0 0 144px;
		padding: 0;
		list-style: none;
		& > li {
			display: inline-block;
		}
		@media (max-width: 575px){
			margin: 24px 0 0 0;
			text-align: center;
			& > li {
				display: block;
				&:not(:first-child) {
					margin-top: 8px;
				}
			}
			.btn {
				padding-left: 24px;
				padding-right: 24px;
			}
		}
		.btn-link {
			span {
				display: inline-block;
				border-bottom: 1px dashed $gray;
				color: $gray;
			}
			&:hover {
				span {
					border-bottom-color: transparent;
				}
			}
		}
	}
}

.quickOrderForm-form {
	.media {
		.media-left {
			padding-right: 20px;
		}
		.userpic {
			position: relative;
			width: 120px;
			padding: 0 0 8px 8px;
			img {
				display: block;
				width: 100%;
			}
			.status {
				background: $gray;
				border: 2px solid $white;
				position: absolute; bottom: 0; left: 0;
				display: block;
				width: 24px;
				height: 24px;
				@include border-radius(50%);
				&.success {
					background: $green;
				}
			}
		}
		.userpic-text {
			padding: 0 0 8px 8px;
			font-size: 13px;
			line-height: 1.25;
			text-align: center;
		}
		@media (max-width: 575px){
			overflow: visible;
			.media-left {
				display: none;
			}
			.media-body {
				overflow: visible;
			}
		}
	}

	.number-group {
		padding-left: 40px;
		@media (max-width: 575px){
			padding-left: 0;
		}
		& + .number-group {
			margin-top: 24px;
		}
		.number-group__title {
			position: relative;
			margin-bottom: 8px;
			font-size: 24px;
			font-weight: bold;
			color: $black;
			i {
				position: absolute; top: -13px; right: 100%;
				margin-right: 8px;
				font-size: 52px;
				font-style: normal;
				color: #D5E6F6;
				@media (max-width: 575px){
					display: none;
				}
			}
			&.active {
				color: $blue;
				i {
					color: $blue;
				}
			}
		}
		.number-group__error {
			display: none;
		}
		.btn:not(.dropdown-toggle) {
			min-width: 200px;
		}

		.color-gray {
			color: #9b9b9b !important;
		}

		&.ng-has-error {
			.number-group__title {
				color: $red;
				i {
					color: $red;
				}
			}
			.number-group__error {
				display: block;
				margin-top: -12px;
				margin-bottom: 4px;
				font-weight: bold;
				color: $red;
			}
			.list-unstyled.ng-has-error {
				//background: lighten($red, 40%);
				background: #fbb2b2;
				margin-left: -8px;
				padding: 8px 12px 8px 8px;
				@include border-radius(3px);

				animation: ngHasError 1.25s linear .75s 1;
				animation-fill-mode: forwards;
				@keyframes ngHasError {
					from {
						background: #fbb2b2;
					}
					to {
						background: transparent;
					}
				}
			}
		}
	}

	.form-group {
		&.form-check.stylize {
			.arr {
				&.arr-check {
					&:before, &:after {
						//display: none !important;
					}
				}
			}
			&.active {
				label {
					font-weight: bold;
				}
			}
		}
		&.active {
			& + .hidden {
				display: block !important;
			}
		}
	}

	.quickOrderForm-form-other {
		display: inline-block;
		padding-left: 24px;
		&:hover {
			cursor: pointer;
		}
		&.active {
			display: none;
			& + .hidden {
				display: block !important;
			}
		}
	}

	dl {
		margin: 0;
		padding: 0;
		& + dl {
			margin-top: 20px;
		}
		dt {
			margin: 0;
			padding: 0;
			font-size: 24px;
			font-weight: bold;
			color: $gray;
		}
		dd {
			margin: 0;
			padding: 0;
			color: $black;
			table {
				td {
					&:not(:first-child){
						padding-left: 8px;
					}
				}
			}
		}
	}

	.inputSubCategory {
		padding: 8px 0 0 24px;
		max-width: 500px;
		display: none;
		.spinner {
			margin: 0;
		}
		&.in {
			display: block;
		}
	}

	.qof-or {
		&.v2--qof-or {
			background: $color_gray_05;
			display: block;
			width: 48px;
			height: 48px;
			margin: 12px auto;
			font-size: 16px;
			line-height: 44px;
			text-align: center;
			@include border-radius(50%);
		}
	}
}

.quickOrderForm_result {
	padding: 24px 48px;
	h2 {
		margin-bottom: 16px;
		font-size: 24px;
		font-weight: bold;
		color: #0D61AB;
	}
	.result__messenger {
		display: flex;
		margin: 0 -8px;
		padding: 0;
		list-style: none;
		& > li {
			padding: 8px;
		}
		.messenger {
			border: 1px solid #bed4e8;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 100px;
			height: 100px;
			text-align: center;
			@include border-radius(4px);
			.icon {
				position: relative;
				width: 36px;
				height: 36px;
				img {
					position: absolute; top: 50%; left: 50%;
					display: block;
					max-width: 100%;
					max-height: 100%;
					@include transform(translateX(-50%) translateY(-50%));
				}
			}
			.text {
				margin-top: 4px;
				font-size: 13px;
				font-weight: bold;
				color: #333;
			}
			&.emphasis {
				animation: emphasisPrimary 3s linear .75s infinite alternate;
				@keyframes emphasisPrimary {
					0%   { @include box-shadow(unquote("0 0 12px rgba(0,43,129,.5)")); }
					50%  { @include box-shadow(unquote("0 0 24px rgba(0,43,129,.8)")); }
					100% { @include box-shadow(unquote("0 0 4px rgba(0,43,129,.5)")); }
				}
			}
		}
	}
	.result__data {
		margin: 48px 0 0 0;
		padding: 0;
		list-style: none;
		color: #9b9b9b;
		& > li {
			&:not(:first-child){
				margin-top: 16px;
			}
		}
	}
}

.w-carNumber {
	position: relative;
	display: block;
	width: 140px;
	& > img {
		position: absolute; top: 0; left: 0;
		display: block; height: 100%;
		@include border-radius(3px 0 0 3px);
	}
	.form-control {
		border-color: $color_blue;
		display: block;
		padding-left: 36px;
		padding-right: 6px;
		font-size: 20px;
		text-transform: uppercase;
		&:focus {
			@include box-shadow(unquote("inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6)"));
			animation: fan-animate 3s linear 0s infinite alternate;
		}
		@keyframes fan-animate {
			0%   { @include box-shadow(unquote("inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6)")); }
			50%  { @include box-shadow(unquote("inset 0 1px 1px rgba(0,0,0,.075), 0 0 16px rgba(13,97,171,.9)")); }
			100% { @include box-shadow(unquote("inset 0 1px 1px rgba(0,0,0,.075), 0 0 4px rgba(102,175,233,.6)")); }
		}
	}
}

//admin
.quickOrderForm-admin {
	background: #F5F7FA;
	position: absolute; top: 0; left: 100%;
	width: 340px;
	@include box-shadow(0 2px 4px 0 rgba(0,0,0,0.2));

	.wrapper > .container > & {
		top: 44px;
		margin-left: -15px;
	}

	a {
		border-bottom-color: transparent;
		&:hover {
			border-bottom-color: $blue;
		}
	}

	.spinner {
		div {
			background-color: $color_light_green !important;
		}
	}

	.quickOrderForm-admin__head {
		background: #F2E5F5;
		padding: 8px 12px;
		font-size: 14px;
		font-style: italic;
		color: #762196;
		.title {
			font-size: 32px;
			font-style: normal;
			font-weight: bold;
		}
	}
	.quickOrderForm-admin__body {
		padding: 8px 12px;
	}

	.quick-group {
		& + .quick-group {
			margin-top: 16px;
		}
		.quick-group__head {
			margin-bottom: 8px;
			font-size: 24px;
			font-weight: bold;
		}
		.quick-group__body {}
	}
	.quick-panel {
		background: $white;
		position: relative;
		margin-left: -12px;
		margin-right: -12px;
		padding: 8px 12px;
		.quick-panel-mark {
			position: relative;
			top: auto; right: auto;
			display: inline-block;
			border: none;
			color: #9b9b9b;
			text-decoration: none;
			&:hover {
				color: #333;
			}
		}
		.media {
			margin: 0;
			.media-left {
				padding-right: 12px;
			}
			.media-right {
				padding-left: 8px;
			}
		}
	}
}

//
.quickOrderForm-panel {
	background: #D5E6F6;
	position: relative;
	margin-bottom: 20px;
	padding: 24px;
	font-size: 24px;
	text-align: center;
	@include border-radius(3px);
	@media (max-width: 767px){
		padding: 20px 12px;
		font-size: 18px;
		text-align: left;
	}
	.closer {
		top: 12px;
		right: 12px;
		width: 20px;
		height: 20px;
		@media (max-width: 767px){
			top: 4px;
			right: 4px;
		}
	}
	.overlink {
		@media (min-width: 768px){
			display: none;
		}
	}
	.qofp__container {
		position: relative;
		display: inline-block;
		margin: 0 auto;
		padding-left: 120px;
		@media (max-width: 767px){
			padding-left: 64px;
		}
		.qofp__left {
			position: absolute; top: 50%; left: 0;
			margin-top: -50px;
			img {
				display: block;
				width: 100px;
				@include border-radius(50%);
			}
			@media (max-width: 767px){
				top: 0;
				margin-top: 0;
				img {
					width: 48px;
				}
			}
		}
		.qofp__body {}
		.qofp__button {
			padding-top: 16px;
			.btn {
				padding: 12px 24px;
				font-size: 18px;
				font-weight: bold;
				@media (min-width: 768px){
					letter-spacing: 0.5px;
				}
				.fa {
					margin-left: 8px;
				}
			}
			@media (max-width: 767px){
				padding-top: 8px;
				.btn {
					padding: 8px 16px 10px;
					font-size: 16px;
					font-weight: normal;
				}
			}
		}
	}
}