/* 
#floorplanner is / must be the id of the host container.
prefixing floorplanner rules with the id should help localise the rules 
TODO namespace each class e.g.  .controlPanel as well
*/

#floorplanner *
{
    box-sizing: border-box;
/*    font-family: arial, helvetica, sans-serif;*/
}



#floorplanner .floorplannerInnerContainer
{
    width: 100%;
    height: 100%; 
    box-sizing: border-box;
    font-family: arial, helvetica, sans-serif;
    background-color: lightGrey;
}

#floorplanner .floorplannerInnerContainer .controlPanel
{
    position: absolute;
    width: 100%; 
    background-color: silver;
}

#floorplanner .floorplannerInnerContainer .toolPalette
{
    position: absolute;
    /* border: 1px solid #000000; */
    background-color: white;
}

#floorplanner #toolPalette ul.options-group li {
    padding: 10px 0 10px 0;
}
#floorplanner .floorplannerInnerContainer #toolPalette h3.ui-button {
    font-size: 14px;
}
#floorplanner .floorplannerInnerContainer #toolPalette h3.ui-button span.icon {
    position: absolute;
    right: 5px;
    top: 50%;
    margin-top: -14px;
    width: 20px;
    height: 20px;
}
#floorplanner .floorplannerInnerContainer #toolPalette h3.embiggen.ui-button span.icon {
    display: none;
}
#floorplanner .floorplannerInnerContainer .toolPalette h3 {
	margin: 0;
}
#floorplanner .toolPalette h3 {
	background-color: gray;
	color: white;
	border-bottom: 1px solid black;
	cursor: pointer;
}
#floorplanner .toolPalette h3.active {
	background-color: white;
	color: gray;
	cursor: default;
}

#floorplanner .toolPalette li.floorplanner-item {
    font-size: 11px;
    margin: 0;
    clear: both;
}
#floorplanner .toolPalette li.floorplanner-item.none-remaining {
    text-decoration: line-through;
    color: gray;
    cursor: not-allowed;
}
#floorplanner .toolPalette li.floorplanner-item img.icon {
    vertical-align: top;
    margin-right: 5px;
    float: left;
}
#floorplanner .toolPalette li.floorplanner-item span.price {
    float: right;
    margin-right: 5px;
}


#floorplanner .floorplannerInnerContainer .surfaceNavigator
{
    position: absolute;
    border: 1px solid #000000;
}

#floorplanner .floorplannerInnerContainer .buildingContainer
{
    position: absolute;
    background-color: white;
}
              
#floorplanner .floorPlannerControlButton
{
    color: #000000;
    cursor: pointer;
    margin-right: 5px;
    display: inline-block;
}


#floorplanner #floorplannerScaleContainer, #floorplanner #floorplannerButtonContainer
{
	display: inline-block;
	float: left;
}

#floorplanner .surfaceNavigatorIcon
{
    cursor: pointer;
}

#floorplanner .infoBox
{
    position: absolute;
    border: 1px solid #000000;
   
}

#floorplanner .infoBox .floorplannerRotateButton,
#floorplanner .infoBox .floorplannerRemoveButton,
#floorplanner .infoBox .floorplannerEditButton
{
    position: absolute;
    left: 0;
    border: 1px solid green;
    text-align: center;
    width: 50%;
}

#floorplanner .infoBox .floorplannerRotateButton button,
#floorplanner .infoBox .floorplannerRemoveButton button,
#floorplanner .infoBox .floorplannerEditButton button{
    height: 20px;
    font-size: 12px;
    
}
#floorplanner .infoBox .floorplannerRotateButton {
	left: auto;
	right: 0;
}


#floorplanner .infoBox .floorplannerRemoveButton button
{
    cursor: pointer;
} 

#floorplanner .infoBox .floorplannerInfoBoxContent
{
    position: absolute;
    background-color: #444743;
    color: white;
    width: 100%;
    padding: 5px;
} 

#floorplanner .infoBox .floorplannerInfoBoxContent table
{
    width: 100%;
}

#floorplanner .infoBox .floorplannerInfoBoxContent table td
{
    width: 50%;
    color: white;
} 

#floorplanner .infoBox .floorplannerInfoBoxContent div
{
    text-align: center;
}  

#floorplanner .infoBox .floorplannerInfoBoxContent .floorplanner-content-box-header {
    margin-bottom: 10px;
}
#floorplanner .infoBox .floorplannerInfoBoxContent .floorplanner-content-box-header h1 {
	font-size: 15px;
}
#floorplanner .infoBox .floorplannerInfoBoxContent .floorplanner-content-box-header h2 {
	font-size: 13px;
}

#floorplanner #floorplanner-subsurfaceName
{
    font-weight: bold;
}

#floorplanner .form-row
{
    float: left;
    width: 100%;
    margin-bottom: 10px;
}
#floorplanner .room-label:hover
{
    cursor: pointer;
}
#floorplanner #room-name-options
{
    background-color: #dddddd;
    padding-left: 5px;
}
#floorplanner .room-name-suggestion
{
    color: #000000;
    padding-bottom: 5px;
    font-size: 0.9em;
}
#floorplanner .floorplanner-form-label
{
    float:left;
    width: 40%;
}
#floorplanner .floorplanner-form-input
{
    float:left;
    width: 60%;
}
#floorplanner .form-row input,
#floorplanner .form-row select
{
    margin-left: 0 !important;
}
.electric-planner-form button.electric-planner-form-button {
    margin-left: 10px;
    margin-top: 20px;
    float: right;
    font-weight: normal;
    color: white;
    background-color: transparent;
    border: 1px solid white;
}
.electric-planner-form .electric-planner-form-row {
    width: 100%;
    margin-bottom: 5px;
    float: left;
    padding: 5px
}
.electric-planner-form .electric-planner-form-row label {
    width: 40%;
    display: inline-block;
    float: left;
}
.electric-planner-form .electric-planner-form-row .form-control {
    width: 55%;
    display: inline-block;
    margin-left: 5%;
}
.electric-planner-form .electric-planner-form-row-description {
    color: #aaa !important;
    display: inline-block;
}
.electric-planner-form .electric-planner-form-row input {
    width: auto;
}
.electric-planner-form .electric-planner-form-row input:not([type="checkbox"]),
.electric-planner-form .electric-planner-form-row select {
    width: 100%;
}
.electric-planner-form .electric-planner-form-row textarea {
    width: calc(100% - 6px);
}
.electric-planner-form .electricPlannerFieldError {
    background-color: rgba(255,0,0,0.5);
}
#floorplanner #electricPlannerWarning {
    background-color: rgba(200,0,0,0.8);
    padding: 10px 20px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    border:1px solid #697f6a;
    margin: 0 5px;
}

#configurator.o-electric-pack-none #floorplanner li.floorplanner-item.o-consumer-unit,
#configurator.o-electric-pack-none #floorplanner li.floorplanner-item.o-e-cu,
#configurator.o-electric-pack-none #floorplanner #toolPalette h3.heatingAircon,
#configurator.o-electric-pack-none #floorplanner #toolPalette h3.internalLighting,
#configurator.o-electric-pack-none #floorplanner #toolPalette h3.mainsSockets,
#configurator.o-electric-pack-none #floorplanner #toolPalette h3.communications,
#configurator.o-electric-pack-none #floorplanner #toolPalette h3.legend,
#configurator.o-electric-pack-none #floorplanner #toolPalette h3.embiggen {
    display: none;
}