@media screen and (orientation:landscape) and (min-device-width: 300px) and (max-device-width: 1000px) {

	#maindiv,
	#maindiv svg {
		max-width: 261px !important;
		min-width: 261px !important;
		min-height: 276px !important;
		max-height: 276px !important;
		overflow: auto;
		float: left;
	}

	.testcolor {
		color: red !important;
	}
}

.testcolor {
	color: black;
}

#designbase {
	/* display: none;
	width: 1020px;
	padding: 0px; */
	/*overflow-y:scroll;
	max-height:64% !important;
	overflow-x: auto;
	white-space: nowrap;*/

}


.content-wrapper {
	/*  background: #fff;*/
	background: url('../images/auth/tool_bg_stairs.jpg') no-repeat center center fixed;
	background-size: cover;
	/* padding: 1px; */
	min-height: 100%;
}
.content-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
}
.maindiv {
	--size: calc(min(88vh, 90vw) * var(--bg-zoom-level, 1));
    width: var(--size);
    height: 0;
    background-color: var(--main-bg-color);
    position: relative;
    overflow: hidden;
    height: calc(var(--size)*1.06);
    padding: 0.5rem;
    box-sizing: border-box;
	transform-origin: var(--trasnform-origin, 15rem 0);
	cursor:grab;
	/* top:-1rem; */
}

.maindiv svg {
	width: calc(100% - 1rem);
	max-width: 100%;
	height: calc(100% - 1rem);
	/* max-height: 100vh; */
	position: absolute;
}

.loaddiv {
	background-color: rgba(0, 0, 0, 0.6);
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 999999;
}

.gifload {
	z-index: 9999999;
	/* background-color: black; */
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	/* height: 5em;
	width: 6em; */
}



.whenstairchoosed.bg-not-active{
	display: none;
}

::-webkit-scrollbar {
	width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
	box-shadow: inset 0 0 5px grey;
	border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
	background: #161616;
	border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	/* background: #df4759; */
	background: gray;
}

.colorcontainer {
	border: 1px solid var(--main-nav-bg-color);
	/* background: linear-gradient(to bottom, #C21E56, #f1f1f1); */
	background-color: #fff;
	display: flex;
	flex-wrap: wrap;
	margin: 0 auto;
	position: relative;
	border-radius: 2px;
	padding: 5px;
	margin: 1rem 0;
}

.box,.box2 {
	cursor: pointer;
	/*border: 1px solid #C21E56;  */
	/* align-items: center;
	box-sizing: border-box;
	display: flex;
	font-family: Arial; */
	margin: 2.6%;
	/*font-size: 10px;*/
	height: 1.5rem;
	width: 1.5rem;
	box-shadow: 0px 2px 4px 1px var(--dark-gray);
	border-color: var(--light-gray);
}

:is(.box, .box2):hover{
	transform: scale(1.2);
}


#designbase {
	/* max-width: 1020px;
	max-height: 500px; */
	/*overflow:scroll;*/
}

#partdetail{
	color: black;
    background:#eee;
    overflow: hidden;
    height: 200px;
}

.designbase {
	display: flex;
	justify-content: center;
	height: var(--design-base-height, 100vh);
	/* width: 100vw; */
	overflow: auto;
	margin-top: var(--design-base-topmg, 0);
}

.scrollsystem {
	/* display: inline-block;
	margin: 5px;
	overflow-y: scroll;
	white-space: nowrap; */
}

.highlight {
	border: 2px solid #00ff72 !important;
    background-color: rgba(0,0,255,0.3);
	/* border: 1px solid blue !important;
	background: blue;
	opacity: 0.3; */
}

.non_highlight {
	border: 1px solid transparent !important;
	background: transparent;
	opacity: 1;
}

.dropdiv:hover,
.ui-droppable-active{
	border: 1px solid #636363;
	background-color: rgba(100,100,100,0.3);
}

div.dropdiv.activepart_highlight {
	border: 1px solid blue;
	background-color: rgba(0,0,255,0.3);
	/* opacity: 0.3; */
}

.dropdiv {
	/* border: 1px solid yellow !important; */
}

.dropdiv:hover {
	/* border: 1px solid yellow !important; */
}

.tooltip {
	position: relative;
	display: inline-block;
	border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
	visibility: hidden;
	width: 200px;
	background-color: black;
	color: #fff;
	text-align: center;
	border-radius: 6px;
	padding: 5px 0;

	/* Position the tooltip */
	position: absolute;
	z-index: 1;
}

/* START TOOLTIP STYLES */
[tooltip] {
	position: relative;
	/* opinion 1 */
}

/* Applies to all tooltips */
[tooltip]::before,
[tooltip]::after {
	text-transform: none;
	/* opinion 2 */
	font-size: .9em;
	/* opinion 3 */
	line-height: 1;
	user-select: none;
	pointer-events: none;
	position: absolute;
	display: none;
	opacity: 0;
}

[tooltip]::before {
	content: '';
	border: 5px solid transparent;
	/* opinion 4 */
	z-index: 1001;
	/* absurdity 1 */
}

[tooltip]::after {
	content: attr(tooltip);
	/* magic! */

	/* most of the rest of this is opinion */
	font-family: Helvetica, sans-serif;
	text-align: center;

	/* 
Let the content set the size of the tooltips 
but this will also keep them from being obnoxious
*/
	min-width: 10em;
	max-width: 21em;
	white-space: initial;
	/* overflow: hidden;
text-overflow: ellipsis;*/
	padding: 1ch 1.5ch;
	border-radius: .3ch;
	box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
	background: #333;
	color: #fff;
	z-index: 1000;
	/* absurdity 2 */
}

.design-tool-bar [tooltip]::before,
.design-tool-bar [tooltip]::after {
	font-size: var(--fs1);
}

/* Make the tooltips respond to hover */
[tooltip]:hover::before,
[tooltip]:hover::after {
	display: block;
}

/* don't show empty tooltips */
[tooltip='']::before,
[tooltip='']::after {
	display: none !important;
}

/* FLOW: UP */
[tooltip]:not([flow])::before,
[tooltip][flow^="up"]::before {
	bottom: 100%;
	border-bottom-width: 0;
	border-top-color: #333;
}

[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::after {
	bottom: calc(100% + 5px);
}

[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::before,
[tooltip][flow^="up"]::after {
	left: 50%;
	transform: translate(-50%, -.5em);
}

/* FLOW: DOWN */
[tooltip][flow^="down"]::before {
	top: 100%;
	border-top-width: 0;
	border-bottom-color: #333;
}

[tooltip][flow^="down"]::after {
	top: calc(100% + 5px);
}

[tooltip][flow^="down"]::before,
[tooltip][flow^="down"]::after {
	left: 50%;
	transform: translate(-50%, .5em);
}

/* FLOW: LEFT */
[tooltip][flow^="left"]::before {
	top: 50%;
	border-right-width: 0;
	border-left-color: #333;
	left: calc(0em - 5px);
	transform: translate(-.5em, -50%);
}

[tooltip][flow^="left"]::after {
	top: 50%;
	right: calc(100% + 5px);
	transform: translate(-.5em, -50%);
}

/* FLOW: RIGHT */
[tooltip][flow^="right"]::before {
	top: 50%;
	border-left-width: 0;
	border-right-color: #333;
	right: calc(0em - 5px);
	transform: translate(.5em, -50%);
}

[tooltip][flow^="right"]::after {
	top: 50%;
	left: calc(100% + 5px);
	transform: translate(.5em, -50%);
}

/* KEYFRAMES */
@keyframes tooltips-vert {
	to {
		opacity: .9;
		transform: translate(-50%, 0);
	}
}

@keyframes tooltips-horz {
	to {
		opacity: .9;
		transform: translate(0, -50%);
	}
}

/* FX All The Things */
[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="up"]:hover::after,
[tooltip][flow^="down"]:hover::before,
[tooltip][flow^="down"]:hover::after {
	animation: tooltips-vert 300ms ease-out forwards;
}

[tooltip][flow^="left"]:hover::before,
[tooltip][flow^="left"]:hover::after,
[tooltip][flow^="right"]:hover::before,
[tooltip][flow^="right"]:hover::after {
	animation: tooltips-horz 300ms ease-out forwards;
}

.card-heading {
    background: url(../../images/bg.jpg) center center/cover no-repeat;
    padding-bottom: 100px;
    padding-top: 5px;
    padding-left: 5px;
}

.bg-card-list .card{
	flex-grow: unset;
	max-width: unset;
	min-width: unset;
	width: max(25%,19rem);
}

.group-row > *{
	flex-basis:50%;
	padding-top: var(--space);
	padding-bottom: var(--space);
	min-width:12rem;
}

#installDesignContent .sidebar-lc >:first-child{
	--sidebar-bp:20rem;
    width: clamp(20.5rem, max(90vw, 20.5rem), 60rem);
}

.primary-ctas > *.btn{
	width:20rem;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	padding: 0.5rem;
	height: 3.5rem;
	box-shadow: 0 6px 10px 2px var(--dark-gray);
    border-color: var(--light-gray);
}

.primary-ctas > *.btn .menu-icon{
	position: absolute;
	left: 0.5rem;
}

.bg-card{
	cursor: pointer;
}