:root{

	/* Relative scales */

	--ratio: 1.15;

	/* Margin and padding scale */
	--s0: 0;
    --s-9: calc(var(--s-8) / var(--ratio));
	--s-8: calc(var(--s-7) / var(--ratio));
	--s-7: calc(var(--s-6) / var(--ratio));
	--s-6: calc(var(--s-5) / var(--ratio));
	--s-5: calc(var(--s-4) / var(--ratio));
    --s-4: calc(var(--s-3) / var(--ratio));
    --s-3: calc(var(--s-2) / var(--ratio));
    --s-2: calc(var(--s-1) / var(--ratio));
    --s-1: calc(var(--s)  / var(--ratio));
    --s: 0.5rem;
    --s1: calc(var(--s) * var(--ratio));
    --s2: calc(var(--s1) * var(--ratio));
    --s3: calc(var(--s2) * var(--ratio));
    --s4: calc(var(--s3) * var(--ratio));
    --s5: calc(var(--s4) * var(--ratio));
	--s6: calc(var(--s5) * var(--ratio));
	--s7: calc(var(--s6) * var(--ratio));
	--s8: calc(var(--s7) * var(--ratio));
	--s9: calc(var(--s8) * var(--ratio));

	/* Font size relative scale */

	/*Default*/
	--fs-base:0.875rem;

	/*Current size (set by font-size modifiers classes)*/
	--fs:var(--fs-base);

	/*font size scale*/
	--fs-9: calc(var(--fs-8) / var(--ratio));
	--fs-8 : calc(var(--fs-7) / var(--ratio));
	--fs-7 : calc(var(--fs-6) / var(--ratio));
	--fs-6 : calc(var(--fs-5) / var(--ratio));
	--fs-5 : calc(var(--fs-4) / var(--ratio));
    --fs-4 : calc(var(--fs-3) / var(--ratio));
    --fs-3 : calc(var(--fs-2) / var(--ratio));
    --fs-2 : calc(var(--fs-1) / var(--ratio));
    --fs-1 : calc(var(--fs0)  / var(--ratio));
    --fs0  : var(--fs-base, 0.875rem);
    --fs1  : calc(var(--fs0) * var(--ratio));
	--fs2  : calc(var(--fs1) * var(--ratio));
	--fs3  : calc(var(--fs2) * var(--ratio));
	--fs4  : calc(var(--fs3) * var(--ratio));
	--fs5  : calc(var(--fs4) * var(--ratio));
	--fs6  : calc(var(--fs5) * var(--ratio));
	--fs7  : calc(var(--fs6) * var(--ratio));
	--fs8  : calc(var(--fs7) * var(--ratio));
	--fs9  : calc(var(--fs8) * var(--ratio));

	--border-thin: 1px;
	--white:#fff;
	--light:#f6f6f6;
	--light-gray:#efefef;
	--mid-gray:#ddd;
	--gray:#999;
	--cntr-gray: #767676;
	--dark-gray:#666;
	--black-gray:#333;
	--black:#000;

	--main-bg-color: #223441;
	--main-nav-bg-color: #37729a;
	--main-nav-color: #fff;
	--sec-nav-color: #6c7293;

	--sidebar-width:15rem;
	--main-padding:15rem;
	--bg-zoom-level: 1;
}


@media (max-width: 980px) {
	:root {
		--top-navbar-display: flex;
		--navbar-top-pos:3rem;
		--navbar-left-pos:-100%;
		--navbar-right-pos:unset;
		--sidebar-bottom-pos:-110%;
		--sidebar-left-pos:unset;
		--sidebar-right-pos:unset;
		--logo-display:none;
		--main-padding:0;
		--sidebar-mob-width:100%;
		--mobile-display: initial;
		--mobile-display-flex: flex;
		--title-top-margin:65%;
		--title2-top-margin:5rem;
		--title-font-size:var(--fs4);
		--trasnform-origin: 0 3rem;
		--design-base-height: calc(100vh - 5rem);
		--design-base-topmg:3.1rem;
		--toolbar-bg-col: var(--main-bg-color);
		--toolbar-allign: flex-end;
		--toolbar-pin-display: flex;		
	}

}

/* @media (max-width: 920px) {
	:root {
		--top-navbar-display: flex;
		--navbar-top-pos:3rem;
		--navbar-left-pos:-100%;
		--navbar-right-pos:unset;
		--sidebar-bottom-pos:-100%;
		--sidebar-left-pos:unset;
		--sidebar-right-pos:0;
		--logo-display:none;
		--main-padding:0;
		--sidebar-mob-width:100%;
	}

} */

/* resets link styles */
a {
	text-decoration: none;
	color:inherit;
}

/* Removes all of the default margins from elements headings and paragraphs */
h1,h2,h3,h4,h5,h6,
p
{
	margin: 0;
}

/* All heading elements are completely unstyled by default */
h1,h2,h3,h4,h5,h6{
	font-size: inherit;
	font-weight: inherit;
}

/* For images to not be able to exceed their container */
img {
    max-width: 100%;
}

/* removes spacing between cells in tables */
table {
    border-collapse: collapse;
}

/* revert the 'white-space' property for textarea elements on Safari */
textarea {
    white-space: revert;
}

/* fix the feature of 'hidden' attribute.
   display:revert; revert to element instead of attribute */
:where([hidden]){
    display:none !important;
}

/* revert for bug in Chromium browsers
   - fix for the content editable attribute will work properly. */
:where([contenteditable]){
    -moz-user-modify: read-write;
    -webkit-user-modify: read-write;
    overflow-wrap: break-word;
    -webkit-line-break: after-white-space;
}

/* apply back the draggable feature - exist only in Chromium and Safari */
:where([draggable="true"]) {
    -webkit-user-drag: element;
}

/*
	Places all child elements onto a stack
	and applies default top margin to all children
	except first child.
*/
stack-lc,
.stack-lc {
    --space: var(--s, 0.5rem);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

stack-lc > *,
.stack-lc > * {
    margin-top: 0;
    margin-bottom: 0;
}

stack-lc > * + *,
.stack-lc > * + * {
    margin-top: var(--space);
}

stack-lc.--s0 > * + *,
.stack-lc.--s0 > * + * {
    border-width: 0;
	border-top-width: var(--border-thin);
	border-color: inherit;
}

/* stack-lc.--s0 > * {
    border-bottom: var(--border-thin) solid;
} */


/*
	Holds one children element,
	applies default padding and background color.
	A flex box-lc can have more children in horizontal layout,
	children don't wrap.
*/
.box-lc,
box-lc {
	--space: var(--s, 0.5rem);
	display: block;
    padding: var(--space);
    outline: var(--border-thin) transparent;
    outline-offset: calc(var(--border-thin) * -1);
}

.box-lc,
box-lc * {
    color: inherit;
}

.bg-box{
    color:var(--black);
    background-color: var(--white);
    border-width: var(--border-thin);
}

.glass-box{
    border:none;
    background: none;
    background-color: transparent;
    color: inherit;
}

.ctr-box,
.flex-box,
.flex-column,
.flex-around,
.flex-between,
.flex-evenly,
.flex-center,
.flex-start,
.flex-end,
.flex-auto,
.flex-equal{
    display: flex;
}

.inline-box{
	display:inline-block;
}

.shadow-box{
    box-shadow: 0 0 10px 2px var(--mid-gray);
    border-color: var(--light-gray);
}

.flex-box:not(:is(.flex-between,.flex-evenly,.flex-around)) > * + *{
	margin-left:var(--s);
}

/*
	Holds a group of children elements
	and wraps them accordingly to accomodate them
	inside parent width limits.
*/
.group-lc,
group-lc {
    --space: var(--s, 0.5rem);
}

.group-lc > *,
group-lc > * {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin: calc(var(--space) / 2 * -1);
}

.group-lc > * > *,
group-lc > * > * {
    margin: calc(var(--space) / 2);
}

/*
	Will make two child containers behave like
	sidebar (fixed width) and main content (width responsive to screen width)
	in horizontal layout.
	Will change the layout to vertical at a given brekapoint (--sidebar-bp)
*/
sidebar-lc,
.sidebar-lc {
	overflow: hidden;
}

sidebar-lc > *,
.sidebar-lc > * {
	--space: var(--s, 0.5rem);
	display: flex;
	flex-wrap: wrap;
	margin: calc(var(--space) / 2 * -1);
}

sidebar-lc > * > :first-child,
.sidebar-lc > * > :first-child {
	margin: calc(var(--space) / 2);
	flex-grow: 1;
}

sidebar-lc > * > *,
.sidebar-lc > * > * {
	flex-basis: 0;
	flex-grow: 999;
	min-width: calc(var(--sidebar-bp, 50%) - var(--space));
}

/*
	Will switch the flexbox context from horizontal to vertical layout
 	at a given breakpoing (--switch-bp) or when switcher
	has more then 3 child elements
*/
switcher-lc > * {
	--space: var(--s, 0.5rem);
	display: flex;
	flex-wrap: wrap;
	margin: calc((var(--space) / 2) * -1);
}

switcher-lc > * > * {
	flex-grow: 1;
	flex-basis: calc((var(--switch-bp, 30rem) - (100% - var(--space))) * 999);
	margin: calc(var(--space) / 2);
}

switcher-lc > * > :nth-last-child(n+4),
switcher-lc > * > :nth-last-child(n+4) ~ * {
	flex-basis: 100%;
}

/* .--space-o{--space: 0rem;}
.--space-xxs{--space: 0.05rem;}
.--space-xs{--space: 0.15rem;}
.--space-s{--space: 0.25rem;}
.--space-sr{--space: 0.33rem;}
.--space-rs{--space: 0.5rem;}
.--space-l{--space: 0.75rem;}
.--space-lr{--space: 0.84rem;}
.--space-xl{--space: 1rem;}
.--space-xxl{--space: 1.5rem;} */

.--s0{--space: var(--s0);}
.--s-9{--space: var(--s-9);}
.--s-8{--space: var(--s-8);}
.--s-7{--space: var(--s-7);}
.--s-6{--space: var(--s-6);}
.--s-5{--space: var(--s-5);}
.--s-4{--space: var(--s-4);}
.--s-3{--space: var(--s-3);}
.--s-2{--space: var(--s-2);}
.--s-1{--space: var(--s-1);}
.--s{--space: var(--s);}
.--s1{--space: var(--s1);}
.--s2{--space: var(--s2);}
.--s3{--space: var(--s3);}
.--s4{--space: var(--s4);}
.--s5{--space: var(--s5);}
.--s6{--space: var(--s6);}
.--s7{--space: var(--s7);}
.--s8{--space: var(--s8);}
.--s9{--space: var(--s9);}


.--fs-9{font-size: var(--fs-9);--fs:var(--fs-9);}
.--fs-8{font-size: var(--fs-8);--fs:var(--fs-8);}
.--fs-7{font-size: var(--fs-7);--fs:var(--fs-7);}
.--fs-6{font-size: var(--fs-6);--fs:var(--fs-6);}
.--fs-5{font-size: var(--fs-5);--fs:var(--fs-5);}
.--fs-4{font-size: var(--fs-4);--fs:var(--fs-4);}
.--fs-3{font-size: var(--fs-3);--fs:var(--fs-3);}
.--fs-2{font-size: var(--fs-2);--fs:var(--fs-2);}
.--fs-1{font-size: var(--fs-1);--fs:var(--fs-1);}
.--fs0{font-size: var(--fs0);--fs:var(--fs0);}
.--fs1{font-size: var(--fs1);--fs:var(--fs1);}
.--fs2{font-size: var(--fs2);--fs:var(--fs2);}
.--fs3{font-size: var(--fs3);--fs:var(--fs3);}
.--fs4{font-size: var(--fs4);--fs:var(--fs4);}
.--fs5{font-size: var(--fs5);--fs:var(--fs5);}
.--fs6{font-size: var(--fs6);--fs:var(--fs6);}
.--fs7{font-size: var(--fs7);--fs:var(--fs7);}
.--fs8{font-size: var(--fs8);--fs:var(--fs8);}
.--fs9{font-size: var(--fs9);--fs:var(--fs9);}

.shrink-grow{flex:1 1;}
.flex-wrap {flex-wrap:wrap;}
.flex-reverse {flex-direction:row-reverse;}
.flex-auto > *{flex:1 1 auto;}
.flex-equal > *{flex:1 1;}
.align-center {align-items:center;}
.align-start{align-items: flex-start;}
.align-end{align-items: flex-end;}

.flex-column {flex-flow: column;}
.flex-around{justify-content: space-around;}
.flex-between{justify-content: space-between;}
.flex-evenly{justify-content: space-evenly;}
.flex-center{justify-content: center;}
.flex-start{justify-content: flex-start;}
.flex-end{justify-content: flex-end;}

/* LAYOUT COMPONENTS END */
.-p0    {padding: 0;}
.-pt0    {padding-top: 0;}
.-pb0    {padding-bottom: 0;}
.-pv0    {padding-top:0;padding-bottom:0}
.-ph0    {padding-left:0;padding-right:0}

.-p {padding:var(--space);}
.-pv{padding-top:var(--space); padding-bottom:var(--space);}
.-ph{padding-left:var(--space); padding-right:var(--space);}
.-pt{padding-top:var(--space);}
.-pb{padding-bottom:var(--space);}

.-m0     {margin: 0;}
.-mt0    {margin-top: 0;}
.-mb0    {margin-bottom: 0;}
.-mv0    {margin-top:0;margin-bottom:0}
.-mh0    {margin-left:0;margin-right:0}

.-m {margin:var(--space);}
.-mv{margin-top:var(--space); margin-bottom:var(--space);}
.-mh{margin-left:var(--space); margin-right:var(--space);}
.-mt{margin-top:var(--space);}
.-mb{margin-bottom:var(--space);}

.-b0 {border:none;}
.-b2 {border-width:2px;}
.-b{border-width:1px;}
.-bt{border-top-width:1px;}
.-bb{border-bottom-width:1px;}
.-bv{border-top-width:1px;border-bottom-width:1px;}
.-bh{border-left-width:1px;border-right-width:1px;}

.-w-full {width:100vw;}
.-w-100 {width: 100%;}
.-w-50 {width: 50%;}
.-w-33 {width: 33.33%;}
.-w-25 {width: 25%;}
.-w-50w {width: 50vw;}

.-fw1 {font-weight: 100;}
.-fw2 {font-weight: 200;}
.-fw3 {font-weight: 300;}
.-fw4 {font-weight: 400;}
.-fw5 {font-weight: 500;}
.-fw6 {font-weight: 600;}
.-fw7 {font-weight: 700;}
.-fw8 {font-weight: 800;}
.-fw9 {font-weight: 900;}
.-bold {font-weight: bold;}

.txt-red {color:#cc0000;}
.txt-center{text-align: center;}
.txt-right{text-align: right;}
.txt-upper{text-transform: var(--txt-upper, uppercase);}
.txt-note{font-style: italic;}
.txt-payment {color: {$FIELD_NEWVDP_BESTPRICE_TEXT_COLOR_PRICE} !important;}
.-posrel{position: relative;}

[hidden],
.hidden {
    display: none;
}

.invalid > :is(input,select,textarea),
:is(input,select,textarea).invalid{
	background-color: #ffa4b3;
}

.-bg-white{
    background-color: var(--white);
    /* color: var(--dark-gray); */
}
.-bg-gray{
    background-color: var(--gray);
    color: var(--white);
}

.-bg-dark-gray{
    background-color: var(--dark-gray);
    color: var(--white);
}

.-bg-black-gray{
    background-color: var(--black-gray);
    color: var(--white);
}

.-bg-black{
    background-color: var(--black);
    color: var(--white);
}


.-bg-light{
    background-color: var(--light);
    color: var(--black);
}

.-bg-light-gray{
    background-color: var(--light-gray);
    color: var(--black);
}

.-bg-none{background: transparent;}

.-round{
    border-radius:0.3rem;
}


.main-title{
	font-size:var(--title-font-size, var(--fs6));
	font-family: Sarpanch;
    text-transform: uppercase;
	color:#555;
}

.primary-cta-wrapper {
	padding-top: var(--title-top-margin, 25%);
}

#chooseBgTitle {
	padding-top: var(--title2-top-margin, 2rem);
}

.partsimagediv{
	background: #eee;
    overflow: hidden;
    /* position: relative; */
	height: 15rem;
}

.hr-profile-img{
	width: 6rem;
	margin-top: -50%;
}

#draggeddiv{
	z-index: 15;
}

#burger-btn{
	position: absolute;
	left:0.5rem;
}


.sidebar.tool-bar-active{
	bottom: 3rem;
    width: 100%;
    overflow: auto;
    z-index: 11;
    height: calc(100vh - 10rem);
}

.top-navbar{
	top:0;
}

.top-navbar .top-logo{
	height:2rem;
}

.sidebar,
.navbar {
	position:fixed;
	height: 100vh;
	/* max-height: calc(100vh - 70px); */
	overflow-y: auto;
	/* background: #191c24; */
	background-color: var(--main-bg-color);
	font-weight: normal;
	width: var(--sidebar-mob-width, var(--sidebar-width));
	z-index: 1;
	transition: left 300ms ease,bottom 300ms ease;
	-webkit-transition: left 300ms ease,bottom 300ms ease;
	-moz-transition: left 300ms ease,bottom 300ms ease;
	-ms-transition: left 300ms ease,bottom 300ms ease;
}

.sidebar{
	left:var(--sidebar-left-pos, 0);
	right:var(--sidebar-right-pos, unset);
	bottom:var(--sidebar-bottom-pos, 0);
	/* width: var(--sidebar-mob-width, var(--sidebar-width)); */
}

.navbar{
	max-width: 20rem;
	right:var(--navbar-right-pos, 0);
	left:var(--navbar-left-pos, unset);
	top:var(--navbar-top-pos, 0);
}

nav .toolbar{
	padding-top: 3rem;
}

.navbar.navbar-active{
	left:0;
}

.toolbar-logo, .sec-logo{
	display: var(--logo-display,initial);
}

.top-navbar,
.design-tool-bar-wraper{
	display: var(--top-navbar-display, none);
	position:fixed;
	height:3rem;
	width: 100%;
	background-color: var(--main-bg-color);
	z-index: 10;
}

.design-tool-bar-wraper{
	bottom:0;
	display: flex;
	justify-content: var(--toolbar-allign, center);
	align-items: center;
	background-color: var(--toolbar-bg-col, transparent);
	z-index: 20;
}

.tool-bar-close{
	position: absolute;
    right: 0.5rem;
    top: -2.5rem;
}

.toolbar-pin{
	background-color: var(--main-nav-bg-color);
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    position: absolute;
    right: 0;
    top: 0;
	display: var(--toolbar-pin-display, none);
}

.toolbar-pin[data-state="on"]{
	background-color: #fff;
    color: var(--main-nav-bg-color);
}

/* .design-tool-bar-wraper{
	height: 2.9rem;
    position: fixed;
    bottom: 0;
	width: 100vw;
	z-index: 100;
}
*/

#tool-bar-btn{
	display: var(--mobile-display-flex, none);
	background-color: var(--main-nav-bg-color);
    width: 3rem;
	height: 3rem;
    align-items: center;
    justify-content: center;
}

.design-tool-bar{
	background-color: var(--main-bg-color);
	width: min(100vw,30rem);
	/* display: var(--mobile-display-flex, none); */
} 


.design-tool-bar > * + *:is(.nav-item,.nav-link) {
    border: none;
	border-left: 1px solid var(--sec-nav-color);
}

.design-tool-bar > :is(.nav-item,.nav-link) {
    justify-content: center;
    display: flex;
    flex-grow: 1;
    height: 3rem;
    align-items: center;
    font-size: var(--fs4);
	cursor: pointer;
}

.design-tool-bar .menu-title{
	display: var(--mobile-display, none);
}

.navbar button{
	font-size:var(--fs0);
	align-items: center;
	width: 100%;
    padding: var(--s);
	background-color: var(--main-nav-bg-color);
    color: #fff;
	border: none;
}

/* .nav-item button:hover,
.navbar .nav-link:hover {
    background-color: #a2daff;
    color: #444;
} */

.navbar .nav-link, .toolbar > .nav-item > .nav-link{
	/* background-color: #373737; */
	background-color: var(--main-nav-bg-color);
	margin-bottom: 1px;
}

.dropdown-menu{
	background-color: var(--main-bg-color);
}

.nav-item button:hover,
.navbar .nav-link:hover,
.toolbar > .nav-item > .nav-link:hover,
.toolbar > .nav-item > .nav-link[aria-expanded="true"]{
	background-color: #ddd;
	color: #0056b3;
}

.sidebar .nav.sub-menu .nav-item .nav-link.active {
	color: #ffffff;
	background: transparent;
}

.sidebar .nav.sub-menu .nav-item .nav-link:hover {
	color: #ffffff;
}


.sidebar .nav .nav-item .nav-link.basiccolors{
	color: var(--sec-nav-color);
}

.navbar .dropdown-item:hover,
.design-tool-bar :is(.nav-item,.nav-link):hover,
.design-tool-bar .nav-link:hover,
.sidebar .nav.sub-menu .nav-item:hover,
.sidebar .nav .nav-item .nav-link.basiccolors:is(:hover,[aria-expanded="true"]){
	background-color: #344e61;
    color: #fff;
}

.preview-list .preview-item{
	border-bottom: 1px solid var(--main-bg-color);
	padding: var(--s);
	color: var(--sec-nav-color);
	text-decoration: none;
}

.sidebar .nav.sub-menu .nav-item .nav-link {
	color: var(--sec-nav-color);;
	padding: 0.5rem 0.35rem;
	position: relative;
	font-size: 0.855rem;
	line-height: 1;
	height: auto;
	border-top: 0;
}

.sidebar .nav.sub-menu .nav-item .nav-link.active {
	color: #ffffff;
	background: transparent;
}

.sidebar .nav.sub-menu .nav-item .nav-link:hover {
	color: #ffffff;
}


.design-tool-bar button{
	background-color: transparent;
	color: var(--sec-nav-color);
	border: none;
}

.design-tool-bar .nav-link,
.sidebar .nav .nav-item .nav-link.basiccolors{
	color: var(--sec-nav-color);
}

/* .nav-bar .dropdown-item:hover,
.design-tool-bar :is(.nav-item,.nav-link):hover,
.design-tool-bar .nav-link:hover,
.sidebar .nav.sub-menu .nav-item:hover,
.sidebar .nav .nav-item .nav-link.basiccolors:is(:hover,[aria-expanded="true"]){
	background-color: #344e61;
    color: #fff;
} */

main {
	padding:0 var(--main-padding);
}

.modal.show{
	display: flex !important;
    align-items: center;
    justify-content: center;
}

.gridpart#base {
	
	height: calc(100% - 1rem);
    position: absolute;
    width: calc(100% - 1rem);
    background-size: contain;
    background-repeat: no-repeat;
	print-color-adjust: exact !important;
	color-adjust: exact !important;
	-webkit-print-color-adjust: exact !important;
}

.quoteForm{
	background-color: var(--main-bg-color);
}