@import url('../theme/css/font-awesome.css');

@media print {
	body.page-configurator {
		width: 230mm;
	}

	body.page-configurator * {
		display: none;
	}

	body.page-configurator .page-wrapper {
		display: block;
	}

	body.page-configurator #app {
		display: flex;
	}

	body.page-configurator #app #printImage {
		display: block;
		width: 230mm;
		height: auto;
	}

	body #app .menu {
		display: none;
	}

	body #app .export-buttons {
		display: none;
	}

	body header {
		display: none;
	}

	body footer {
		display: none;
	}
}

#app {
	position: relative;
	display: flex;
	color: #808080;
	font-size: 1.4rem;
}

#configurator {
	order: 1;
	flex-grow: 1;
	position: sticky;
	top: 0;
	height: 56vh;
	overflow: hidden;
}

#app .menu {
	order: 0;
	flex-shrink: 0;
	width: 360px;
	background-color: #fbfbfb;
	padding-left: 0.75rem;
	padding-right: 0.75rem;
}

#app #printImage {
	display: none;
}

@media (max-width: 991.98px) {
	#app {
		flex-direction: column;
	}

	#app .menu {
		width: 100%;
	}
}


#app .export-buttons {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 4;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 16px;
	background-color: #fbfbfb;
}

#app .export-buttons .fa {
	margin-right: 6px;
}

.form-group input[type="number"] {
	display: block;
	width: 100%;
	line-height: 24px;
	padding: 14px 15px;
	border: 1px solid #e0e0e0;
	height: 54px;
	font-size: 13px;
	background: #ffffff;
	-webkit-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	transition: all 500ms ease;
}

.form-group input[type="number"]:focus {
	border-color: #1e9e6e;
	color: #1e9e6e;
}

.input-size-controls {
	display: flex;
}

.input-size-controls .form-control {
	border-radius: 0;
	box-shadow: none;
}

.btn-style-two[disabled], .btn-style-two.disabled {
	background-color: #b9b9b9;
	cursor: not-allowed;
}

.input-size-controls .btn-style-two {
	padding: 15px 20px;
}

.input-size-controls input::-webkit-outer-spin-button,
.input-size-controls input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.input-size-controls input[type=number] {
	-moz-appearance: textfield;
}

.color-input .color-preview {
	width: 44px;
}

.mb-1 {
	margin-bottom: 0.25rem;
}

.mb-2 {
	margin-bottom: 0.5rem;
}

.btn-grid .btn-style-two {
	font-weight: normal;
	font-size: 14px;
	line-height: 20px;
}

#app .btn-style-two {
	padding: 7px 14px;
}

.btn-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
}

.btn-grid .btn:not(:first-child) {
	border-top-left-radius: 0;
}

.btn-grid .btn:not(:nth-child(7)) {
	border-top-right-radius: 0;
}

.btn-grid .btn:not(:nth-child(8)) {
	border-bottom-left-radius: 0;
}

.btn-grid .btn:not(:last-child) {
	border-bottom-right-radius: 0;
}

#app .accordion-button {
	width: 100%;
	padding: 10px 16px;
	font-size: 18px;
	text-align: left;
	color: #fff;
	background-color: #1e9e6e;
	font-weight: 700;
	outline: 2px solid #ffffff;
	outline-offset: -6px;
	border: none;
}

#app .accordion-subtitle {
	font-size: 0.85em;
	margin-left: 12px;
}

#app .accordion-body {
	padding: 16px;
}

#app input[type="text"], #app input[type="email"], #app select, #app textarea, #app input[type=number] {
	height: 38px;
	padding: 2px 15px;
	line-height: 1;
}

#app select option {
	color: initial;
}

#app .step-description {
	font-style: italic;
	margin-bottom: 2rem;
}


#app .btn-style-two {
	position: relative;
	line-height: 24px;
	text-transform: uppercase;
	background: #1e9e6e;
	color: #ffffff !important;
	font-size: 16px;
	font-weight: 700;
	outline: 2px solid #ffffff;
	outline-offset: -6px;
	border: none;
}

#app .btn-style-two:hover {
	border-color: #ffffff !important;
	background: #202e31;
	outline: 2px solid #ffffff;
	outline-offset: -6px;
}

#app .btn-grid .btn {
	padding: 6px 12px;
}

#app .btn-grid .btn-secondary {
	border: none;
	background: #e9e9ed;
	color: #ababab;
}

#app .btn-grid .btn-secondary:disabled {
	background: #f5f5f6;
}

#app label {
	font-weight: 700;
	padding-bottom: 5px;
}

#app .form-select {
	background: #FFF;
	border: 1px solid #1e9e6e;
}

#offerForm {
	color: #FFF;
	font-size: 1.4rem;
}

#offerForm input, #offerForm textarea {
	color: #000;
}

#offerForm .form-group {
	padding-bottom: 0.5rem;
}

#offerForm label {
	padding-bottom: 0.3rem;
}

#offerForm #submit_btn {
	border: none;
}

.hidden {
	display: none !important
}

.alert {
	padding: 15px;
	margin-bottom: 20px;
	border: 1px solid transparent;
	border-radius: 4px
}

.alert-success {
	color: #3c763d;
	background-color: #dff0d8;
	border-color: #d6e9c6
}

.alert-danger {
	color: #a94442;
	background-color: #f2dede;
	border-color: #ebccd1
}