.save-as-li{
	display: none;
}

canvas:focus {
    outline:0;
} /*don't outline palette and diagram when they are focused*/

table {
	width: 100%;
}

input{
	padding: 0px;
	border: 1px solid gray;
}

.unitsBox{ /*A special input that displays units*/
    text-align: right;
    width: 20px;
    border: 1px solid gray;
    border-left: 0px;
}

#notesTextarea {
	resize: none;
	font-family: Arial;
}

label{ font-size: 9pt; color: #757575;}

.paletteLabel {
	text-align: center;
    font-weight: normal;
    color: var(--c-secondary-600);
	/* width: 100%; */
	margin: 0 0 .5rem 0;
    padding: .5rem 0;
    border-bottom: var(--border-main);
	cursor: pointer;
}

#furnitureSearchBar{ width: 100%; border: none; }
	#furnitureSearchBar::-webkit-input-placeholder { color: gray; }
	#furnitureSearchBar::-moz-placeholder { color: gray; }
	#furnitureSearchBar:-ms-input-placeholder { color: gray; }
#furniturePaletteDiv {width: inherit; height: 300px; background: #e2e2e2;}

#wallPartsPaletteDiv {
    width: 100%; 
    height: 95px; 
    background: transparent;
    /* background-color: pink; */
}
#myPaletteWindow{
	height: inherit;
	top:16.75%;
	left:4rem;
}

#myPaletteClose, .windowButtons.clickable{
    width: 1rem;
    height: 1rem;
    margin-right: .5rem;
    background-color: transparent;
}

#palettes {
	height: 100%;
	max-width: 400px;
    width: 100%;
    box-sizing: border-box;
	padding: 0 1rem 1rem;
}

#myFloorplanDiv, #myFloorplanDivStatic {
	width: 100%;
    background-color: white;
	height: 85vh;

    border-radius: 0 0 var(--br-main) var(--br-main);
    border: var(--border-main);
}

#myFloorplanDivStatic{
	/* pointer-events: none; */
	border: none;
}

#currentFile {
	background-color: #4b545f;
	color: white;
	text-align: center;
	padding: 5px;
}

#diagramHelpDiv {
	width: 100%;
	text-align: center;
	border: 1px solid gray;
	background-color: #4b545f;
	color: white;
    min-height: 100px;

    display: none;
}

/****************************************************************** GENERAL DRAGGABLE WINDOWS STYLING ********************************************************/

.draggable {
    border-radius: .75rem .75rem var(--br-main) var(--br-main);
	background-color: white;
	position: absolute;
	top: 40%;
	left: 50%;
	width: 300px;
	height: 200px;
	z-index: 10;
	text-align: center;
    /* overflow: hidden; */
    box-shadow: var(--shadow-main);
	border: var(--border-main);

}

#optionsWindow {
	height: auto;
}

.windowButtons{
	float: right;
	border: none;         
	font: bold 12px inherit;
}

.handle {
	box-shadow: 0 0 0 2px var(--c-primary-400);
	background-color: var(--c-primary-400);
    padding: 0.5rem 0 0.5rem 1.5rem;
	text-align: center;
	font: bold 12px inherit;
	color: white;
	cursor: move;
	width: 100%;
	border-radius: .45rem .45rem 0 0;
}

/* .draggable .ui-accordion, .draggable .ui-widget{
	border: var(--border-main);
	border-top: none;
} */

.mySavedFiles {width:75%;}

/*Selection Info Window specific styling*/

#selectionInfoTextDiv p {margin: 0; padding: 0;} /*used only when no node is selected*/
#selectionInfoTextDiv #name {margin: 3px;}
#selectionInfoTextDiv .nameNotesInput {
	width: 80%;
}
#selectionInfoTextDiv .dimensionsInput {width: 85%; border-right: 0px;}
.data {font-size: 10pt;}
.clickable {cursor: pointer;}
.selectedKey {color: dodgerblue;}

/*-- set border box on all elements inside the grid*/
.grid-container * {box-sizing: border-box;}

.row:before, .row::after {
	content: "";
	display: table;
	clear: both;
}

[class*='col-'] {
	float: left;
	min-height: 1px;
	width: 16.66%;
	padding: 0px;
}

.col-1 {width: 100%;}
.col-2 {width: 50%;}
.col-3 {width: 33.33%;}
.col-4 {width: 25%;}
.col-5 {width: 20%;}
.col-6 {width: 16.66%;}
/************************************************************* .hub__main NAV BAR STYLING *************************************************/

.hub__main nav {
	background: var(--c-primary-400);
	border-radius: var(--br-main) var(--br-main) 0 0;
	color:white;
	padding: 0 1rem;
}

.hub__main nav ul { /*file menus and tool menus*/
	list-style: none;
	position: relative;
	display: flex;
	align-items: stretch;
	margin: 0; 
	padding: 0;
}

.hub__main nav ul li { /*menu tabs*/
	float: left;
}

.hub__main nav ul li:hover {
	background: var(--c-primary-500);
}
	
.hub__main nav ul li a { /*menu tabs text*/
	display: block; 
	padding: .75rem 1.5rem;
	color: inherit; 
	text-decoration: none;
}

.hub__main nav ul ul { /*drop down menus, general*/
	display: block; 
	z-index: 20;
	visibility: hidden; 
	opacity: 0;   
	background: white; 
	border-radius: 0 0 var(--br-main) var(--br-main);
    border: var(--border-main);
	border-top: none;
	padding: 0;
	position: absolute; 
	top: 100%;
	overflow: hidden;
}
.hub__main nav ul li:hover > ul { /*drop down menus, visible*/
	visibility: visible; 
	opacity: 1;
}

.hub__main nav ul ul li { /*drop down menu items*/
	/* border-top: 1px solid #6b727c; */
	/* border-bottom: 1px solid #575f6a; */
	position: relative; 
	float: none;
}

.hub__main nav ul ul li:nth-child(1n + 2){
	border-top: var(--border-main);
}
	.hub__main nav ul ul li a { /*drown down menu items text*/
		padding: .65rem 1rem;
		color: var(--c-primary-400);
	}	
		.hub__main nav ul ul li a:hover {
			color: white;
			background: var(--c-primary-400);
		}

.hub__main nav ul li:nth-child(1n + 4){
	margin-left: auto;
}

.hub__main nav ul li:last-of-type{
	margin-left: 0;
}

.hub__main nav ul ul ul { /*drop down submenu (units menu)*/
	left: 100%; 
	top:0; 
	width: 100px;
}

.hub__main nav p { /* grid input area, wall width area, and 'Tools' all wrapped in <p> tag*/
	float: left;
	margin-bottom: 0px;
	margin-top: 3px;
	padding-left: 25px;
	padding-right: 25px;
	color: var(--c-primary-200);
}   
	.hub__main nav p.shortcut {
		font-size: .7rem;
		float: right;
		color: var(--c-primary-200);
		padding: 0;
		margin-left: 1rem;
	}
	
.hub__main nav ul ul li.scaleItem{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.hub__main nav ul ul li.scaleItem:hover a.scaleItems{ /*special styling for the 'Scale' item of the 'View' menu*/
	/* float: left;
	text-align: center;
	box-sizing: border-box;
	width: 10%; */
	color: inherit;
}
	
#scaleDisplay{
	width: 100%;
	text-align: center;
}

#wallThicknessInput, #gridSizeInput {
	width: 50px; 
	float: left;
	border-right: 0px;
}

#gridSizeInput { margin-left: 10%; }
	#wallThicknesshUnitsInput, #gridSizeUnitsInput{float: left;}

#wallThicknessInputLabel{ float: left; }
#setGridButton { padding: 0; }


/* Scaling for small screens, TODO*/
@media screen and (max-device-width: 480px) {
	.hub__main nav ul li ul li{ font-size: 9pt; }
}

 /*Icons*/
 .toolIcons{
	background-color: transparent;
	border: none;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 2.5rem;
	height: 100%;
	padding: .75rem;

	cursor: pointer;
 }

#wallBuildingButton {
	/* background: url(icons/wallBuildingTool.png); */
}
#draggingButton {
	/* background: url(icons/selectionTool.png); */
}

#wallWidthBox { 
	visibility: hidden; 
	display: none;
} /*box for setting wall width; invisible when Wall Tool not active*/

#wallThicknessBox{
	justify-content: flex-start;
    align-items: center;
}

#wallThicknessInputLabel{
	color: white;
	margin-right: .5rem;
}

#wallThicknessInput{
	padding: .25rem .5rem;
	border-radius: .2rem 0 0 .2rem;
	border: none;
}

#wallThicknessUnitsInput{
	padding: 0.25rem 0.5rem;
	width: auto;
    max-width: 35px;
	color: white;
	border: none;
	background-color: var(--c-primary-600);
	border-radius: 0 .2rem .2rem 0;
}

/* jQuery UI specific stylings */

/* .ui-accordion .ui-accordion-content, .ui-accordion .ui-accordion-icons { padding: 0px; }  */
.ui-widget * { outline: none; }
.ui-widget-content { border: none; }


/* -------------------- AQUI EMPIEZO YO ------------------ */
canvas{
}