/* Globals */

@font-face {
    font-family: 'Droid Arabic Kufi';
    font-style: normal;
    font-weight: 400;
    src: url("https://cdn.konn.tech/configurator/static/ttf/droid-kufi-regular.ttf");
}

@font-face {
    font-family: 'Droid Arabic Kufi';
    font-style: normal;
    font-weight: 700;
    src: url("https://cdn.konn.tech/configurator/static/ttf/droid-kufi-bold.ttf");
}

* {
	font-family: 'Roboto', 'Droid Arabic Kufi';
}

body:lang(en) {
	direction: ltr;
}

body:lang(ar) {
	direction: rtl;
}

body.debug div {
	outline: dashed 1pt rgba(0, 0, 0, 0.1);
}

button {
	cursor: pointer;
	border: none;
	margin: 4pt;
	padding: 12pt;
	min-width: 118pt;
	background: #eee;
	transition-duration: 0.1s;
	background: white;
	font-size: 18px;
}

@media (max-width: 1200px) {
	button {
		font-size: 16px;
	}
}

button.secondary {
	color: black;
	height: 44pt;
	display: flex;
	background: #f4f4f4;
	align-items: center;
	justify-content: center;
}


button.primary {
	color: white;
	height: 44pt;
	display: flex;
	background: #0093cd;
	align-items: center;
	justify-content: center;
}

button.flat {
	background: none !important;
}

button.primary:hover {
	background: #0093cd99;
}

button.secondary:hover {
	background: #d6d6d6;
}

button.compact {
	height: auto;
	padding: 12pt;
	font-size: 1rem;
	font-family: 'Roboto', 'Droid Arabic Kufi';
}

button.selected {
	color: white;
	background: #455a64;
}


/* Small-screen Overlay */

.small-screen-overlay {
	top: 0;
	left: 0;
	color: white;
	width: 100%;
	height: 100vh;
	z-index: 100;
	display: flex;
	position: absolute;
	background: #37474f;
	align-items: center;
	justify-content: center;
	visibility: hidden;
}

.small-screen-overlay a {
	color: white !important;
}


/* General Layout */

/* Home, Floor Plan, Exterior and Interior Tabs */

.tab-bar {
	width: auto;
	flex-wrap: wrap;
}

.content {
	width: 65%;
}

.sidebar {
	width: 35%;
}

.header {
	height: 64pt;
	box-shadow: 0 4pt 8pt rgba(0, 0, 0, 0.1);
}

.header img.logo {
	height: 40px;
}

@media (max-width: 1199px) {

	.tab-bar {
		width: 100%;
		order: 1;
	}

	.content {
		width: 100%;
	}

	.sidebar {
		width: 100%;
		order: 2;
		padding-top: 20pt;
		max-height: calc(100vh - 100vw / 517 * 327 - 110px);
		min-height: 240pt;
	}

	.footer {
		display: none;
	}


	.header {
		height: 50px;
		box-shadow: none;
	}

	.header img.logo {
		height: 30px;
	}


}

/* Summary Tab */

.order-form {
	width: 65.75%;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

@media (min-width: 1200px) {

	.order-form {
		padding-left: 48pt;
		padding-right: 48pt;
	}

}

.quotation {
	width: calc(100% - 65.75%);
}


@media (max-width: 1199px) {

	.order-form {
		width: 100%;
		order: 2;
	}

	.quotation {
		width: 100%;
	}

	.summary {
		padding-top: 20pt;
		max-height: calc(100vh - 110px);
		min-height: 240pt;
	}

}


 /* Home Render */

.home-container {
	height: 100%;
	position: relative;
}

@media (max-width: 1199px) {
	.home-container {
		height: calc(100vw * 0.62);
		max-height: 50vh;
	}
}

.home-container .home {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	position: absolute;
	cursor: pointer;
}


/* Topbar */

.navbar-link {
	cursor: pointer;
	padding: 6pt 12pt;
	border-radius: 32pt;
	transition-duration: 0.2s;
	transition-property: *;
}

.navbar-link .text:lang(en) {
	bottom: 1.5pt;
	position: relative;
}

.navbar-link:lang(en) {
	line-height: 1.5;
}

@media (hover: hover) {
	.navbar-link:hover {
		background: #eceff1;
	}
}


/* Selectors */

.title {
	font-size: 18px;
	/*color: #aaa;*/
	font-weight: 500;
	border-bottom: solid 1pt #eee;
	/*text-align: center;*/
}

.selector .option {
	cursor: pointer;
	border: solid 2pt white;
	/*min-width: 84pt;*/
	/*min-height: 100pt;*/
	border-radius: 4pt;
	margin-right: 8pt;
	min-width: 48pt;

}




.selector .option .circle {
	width: 46pt;
	height: 46pt;
	border-radius: 50%;
	transition-duration: 0.1s;
	transition-property: *;
}



.selector .option .circle.has-icon {
	border: solid 2pt #eceff1;
}

.selector .option .circle.has-icon:hover {
	border: solid 2pt #0093cd77;
}

.selector .option.selected .circle.has-icon {
	border: solid 2pt #0093cd99;
}

.selector .option .label .money {
	color: #90a4ae;
}

.selector .option.selected .label {
	color: #0093cd;
}

.selector .option .circle:not(.has-icon) {
	background: #eceff1;
}

.selector .option:hover .circle:not(.has-icon) {
	background: #2962ff55;
}

.selector .option.selected .circle:not(.has-icon) {
	background: #2962ff;
}


/* Tabs */

.tabs .tab {
	cursor: pointer;
	margin-right: 6pt;
	margin-left: 6pt;
	text-align: center;
	border-bottom: solid 2pt #fff;
	transition-duration: 0.15s;
	transition-property: background, border, color;
	padding: 8pt 12pt;
	white-space: nowrap;
	height: 42pt;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	color: #828181;
}


@media (max-width: 1199px) {
	.tab-bar {
		max-width: 100vw;
	}
	.tabs {
		overflow-x: auto;
	}
}

@media (min-width: 1200px) {
	.tabs .tab {
		margin: 24pt 8pt !important;
		min-width: 100pt;
		border-bottom: solid 2pt #eceff1 !important;
	}
}


@media (max-width: 1199px) {

	.tab-bar {
		position: relative;
		box-shadow: 0 2pt 4pt rgba(0, 0, 0, 0.125);
	}

}

.tabs .tab:lang(en) {
	font-size: 16px;
}

@media (hover: hover) {
	.tabs .tab:hover {
		border-bottom: solid 2pt #0093cd !important;
	}
}

.tabs .tab.selected {
/* 	border-color: #0093cd; */
	border-bottom: solid 2pt #0093cd !important;
/* 	border: solid 2pt #0093cd !important; */
	color: #0093cd !important;
/* 	color: white; */

}

.tab-bar {
	box-sizing: border-box !important;
}

.tab-bar .btn-next-tab {

	width: 48pt;
	height: 100%;
	display: flex;
	position: absolute;
	align-items: center;
	justify-content: center;

	padding-bottom: 2pt;  /* to align with tab text */

	background: rgb(255,255,255);
	background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);

}

.tab-bar .btn-next-tab:lang(en) {
	right: 0;
}

.tab-bar .btn-next-tab:lang(ar) {
	left: 0;
	transform: scaleX(-1);
}

.btn-next-tab img {
	height: 1rem;
	opacity: 0.5;
}

/* Transitions */

.fade-enter-active, .fade-leave-active {
	transition: opacity 0.25s;
}

.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
	opacity: 0;
}

/* Footer */

.footer {
	left: 0;
	width: 100%;
	bottom: 0;
	position: absolute;
	background: white;
	box-shadow: 0 0 4pt rgba(0, 0, 0, 0.1);
}

.slim-footer {
	color: #90a4ae;
	margin: auto;
	font-size: 14px;
	max-width: 320pt;
	text-align: center;
	padding-bottom: 16px;
}

.slim-footer .value.emphasize {
	color: black;
}

.slim-footer .separator {
	width: 1px;
	height: 100%;
	background: #eee;
}

.slim-footer .name:lang(ar) {
	margin-bottom: 4pt;
}


/* Fullscreen Overlay */

.fullscreen {
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100;
	position: absolute;
	transition-duration: 0.15s;
	transition-property: opacity;
	cursor: pointer;
	background-position: center center !important;
}

.fullscreen.visible {
	opacity: 1;
	pointer-events: all;
}

.fullscreen:not(.visible) {
	opacity: 0;
	pointer-events: none;
}


/* Utilities */

.ltr, .ltr * {
	direction: ltr !important;
}

.pointer {
	cursor: pointer;
}

@media (min-width: 1200px) {
	.only-mobile {
		display: none !important;
	}
}

@media (max-width: 1199px) {
	.only-desktop {
		display: none !important;
	}
}

.showable {
	opacity: 0;
	pointer-events: none;
	transition-duration: 0.25s;
	transition-property: opacity;
}

.showable.show {
	opacity: 1;
	pointer-events: all;
}


/* Order Form */

.order-form {
	background: none;
	transition-property: *;
	transition-duration: 0.25s;
}

.order-form.visible {
}

.order-form .field {
	margin-bottom: 16pt;
}

.order-form .field .label {
	margin-bottom: 4pt;
}

.order-form .field.required .label::after {
	/*color: red;*/
	/*content: '*';*/
}

.order-form .field:not(.required) .label::after {
	color: #78909c;
}

.order-form .field:not(.required) .label:lang(en)::after {
	content: '(optional)';
}

.order-form .field:not(.required) .label:lang(ar)::after {
	content: '(اختياري)';
}

.order-form .field input {
	width: 100%;
	outline: solid 2pt #cfd8dc;
	border: none;
	padding: 8pt;
	transition-duration: 0.2s;
	transition-property: *;
}

.order-form .field input:hover {
	outline: solid 2pt #b0bec5;
	border: none;
}

.order-form .fancy-upload {
	position: relative;
}

.order-form .fancy-upload > * {
	width: 100%;
	border: dashed 2pt #cfd8dc;
	position: absolute;
	height: 128pt;
}

.order-form .fancy-upload .front {
	display: flex;
	z-index: 0 !important;
	padding: 24pt;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	transition-duration: 0.15s;
	transition-property: *;
}

.order-form .fancy-upload .front {
	pointer-events: none;
}

.order-form .fancy-upload:hover .front {
	background: rgba(0, 0, 0, 0.025);
}

.order-form .fancy-upload input {
	cursor: pointer;
	opacity: 0;
	z-index: 10 !important;
}

.order-form .fancy-upload .front img {
	width: 32pt;
	bottom: 0;
	position: relative;
	margin-bottom: 4pt;
	transition-duration: 0.25s;
	transition-property: *;
	transition-timing-function: ease-out;
}


.order-form .fancy-upload:not(.hasFile):hover .front img {
	bottom: 8pt;
}

.order-form .sub-text {
	color: #9e9e9e;
	font-weight: normal;
}

/* Cart */

.cart .previews {
	display: flex;
	margin-bottom: 24pt;
	justify-content: space-between;
}

.cart .previews .image {
	width: 100%;
	cursor: pointer;
	min-height: 64pt;
}

.cart .cart-line {
	display: flex;
	justify-content: space-between;
	min-height: 28pt;
}

.cart .cart-line.total {
	font-weight: bold;
}

.cart .separator {
	height: 2px;
	margin-bottom: 12pt;
	border-bottom: dashed 1pt #ddd;
}

.cart .quotation-note {
	color: #90a4ae;
	font-size: 14px;
}

/* Dialog */

.dialog {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, -50%);
	padding: 32pt;
	display: flex;
	max-width: 100%;
	box-shadow: 4pt 4pt 16pt rgba(0, 0, 0, 0.1);
	min-height: 120pt;
	align-items: center;
	flex-direction: column;
}

/* Unsorted */

[v-cloak] {
	display: none
}

.box {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(100px, 1fr));
}


.render {
	background-size: contain;
	background-color: white;
	background-repeat: no-repeat;
	background-position: center top;
}

.estimate .estimate-value {
	color: #90a4ae;
}

.estimate .estimate-value.emphasize {
	color: black;
}

.estimate-name {
	color: #90a4ae;
}

.estimate-value {
	font-size: 22px;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 400;
}

.effect1{
  -webkit-box-shadow: 0 10px 6px -6px rgba(0, 0, 0, 0.1);
     -moz-box-shadow: 0 10px 6px -6px rgba(0, 0, 0, 0.1);
          box-shadow: 0 10px 6px -6px rgba(0, 0, 0, 0.1);
}

.render-placeholder {
	width: 100%;
	visibility: hidden;
}

@media (min-width: 1200px) {
	.render-placeholder {
		display: none;
	}
}

.mainx {
	overflow-y: auto;
}


@media (min-width: 1200px) {
	.mainx {
		height: calc(100vh - 280pt);
	}
}

.download-previews-link {
	color: #0093cd;
	cursor: pointer;
	display: flex;
	align-items: center;
}

.home.social-media {
	display: flex;
	padding: 4pt;
	justify-content: flex-end;
}

@media (max-width: 1199px) {
	.home.social-media {
		display: none;
	}
}


.home.social-media .icon {
	width: 32pt;
	height: 32pt;
	user-select: none;
	cursor: pointer;
	margin: 4pt;
	padding: 7pt;
	border-radius: 100%;
	background-color: white;
	display: flex;
	transition-property: all;
	transition-duration: 0.25s;
	border: solid 2pt#fff;
	box-shadow: 1pt 1pt 4pt rgba(0, 0, 0, 0.15);
	position: relative;
	top: 0;
}

.home.social-media .icon:hover {
	box-shadow: 2pt 2pt 4pt rgba(0, 0, 0, 0.25);
}

.home.social-media .icon:active {
	top: 2pt;
}

.home.social-media .icon.copy {
	background-color: ##eceff1;
}

.home.social-media .icon img {
	width: 100%;
	height: 100%;
}

.scroll-down-arrow {
	width: 100%;
	bottom: 0;
	height: 48pt;
	padding: 8pt;
	z-index: 90;
	display: flex;
	position: fixed;
	background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
	align-items: flex-end;
	pointer-events: none;
	justify-content: center;
}

.scroll-down-arrow .icon {
	width: 20pt;
	height: 20pt;
	border: solid 2pt black;
	opacity: 0.35;
	display: flex;
	background: white;
	align-items: center;
	border-radius: 50%;
	margin-bottom: 4pt;
	justify-content: center;
}

.scroll-down-arrow .icon img {
	height: 14pt;
	width: 14pt;
}

/* Hide home-container on summary tab (mobile only) */

@media (max-width: 1199px) {

	.tab-4 .home-container {
		display: none;
	}

}