.svg-select {
    fill: yellow
    stroke: orange
    stroke-width: 2
}

.floor-plan-table {
    border-collapse: separate
    border-spacing:0 20px
}

.floor-plan-paper {
    background-color: #002082 /* Blueprint blue */
}

.floor-plan-line {
    stroke: #FFF
    stroke-width: 2px
    vector-effect: non-scaling-stroke
    shape-rendering: crispEdges
}

.editor-prompt {
    background-color: #3366FF  /* Light blue */
}

.editor-prompt-text {
    color: white;
}

.btn-editor {
    color: black;
    background-color: #3366FF  /* Light blue */
    border: none
}

.btn-editor:disabled {
    opacity: 0.5;
}

.properties-modal-form-bg {
     width: 400px;
     /*height: 100%;*/
     background-color: rgba(0,0,0,0); /* make it fully transparent */
     position: absolute;
     top: 0px;
     z-index: 1;
     display: none;  /* It will remain invisible until you open */
     justify-content: center; /*center horizontally*/
     align-items: center ; /* center vertically */
}

.properties-modal-form-content {
     width:400px;
     /*height:500px;*/
     background-color: white;
     border: 1px solid grey;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
     border-radius: 1px;
     padding: 5px;
     /*position: absolute;*/ /* relative to top of page */
 }

.zone-select-btn {
    white-space: normal !important;
    word-wrap: break-word;
}

.zone-selector, .connection-selector {
    display: none; /* Change this with JS */
    background-color: gray; /* Change this with JS */
    color: black; /* Change this with JS */
    margin: 0px;
    border-width: 1px;
    border-color: white;
    border-style: solid;
}

.zone-edit-form, .connection-edit-form {
    display: none; /* Change this with JS */
    background-color: white; /* Change this with JS */
    color: black; /* Change this with JS */
    margin: 0px;
    border-width: 1px;
    border-color: white;
    border-style: solid;
}

.zone-settings-form, .connection-settings-form {
    display: none; /* Change this with JS */
    background-color: white; /* Change this with JS */
    color: black; /* Change this with JS */
    margin: 0px;
    border-width: 1px;
    border-color: white;
    border-style: solid;
}

.zone-details-form, .connection-details-form {
    display: none; /* Change this with JS */
    background-color: white; /* Change this with JS */
    color: black; /* Change this with JS */
    margin: 0px;
    border-width: 1px;
    border-color: white;
    border-style: solid;
}

.svg-border {
	display: inline-block;
	position: absolute;
	left: 0;
	pointer-events: none; /* REALLY important otherwise the svg border does not pass on events to elements in the div it borders */
	/* SEE https://stackoverflow.com/questions/2296097/making-an-svg-image-object-clickable-with-onclick-avoiding-absolute-positioning */
}

.zone-default-scheme {
    background-color: white;
    color: black;
}

.zone-hvac-scheme {
    background-color: #8DB48E;
    color: white;
}

.zone-illumination-scheme {
    background-color: #4B9FE1;
    color: white;
}

.zone-security-scheme {
    background-color: #FA255E;
    color: white;
}

.zone-irrigation-scheme {
    background-color: #4AC6D2;
    color: black;
}

.zone-privacy-scheme {
    background-color: #7DA2A9;
    color: white;
}

.zone-accessibility-scheme {
    background-color: #F07E74;
    color: white;
}

.zone-entertainment-scheme {
    background-color: #A350A3;
    color: white;
}

.zone-life-safety-scheme {
    background-color: #FDEE30;
    color: black;
}

.zone-snow-melt-scheme {
    background-color: #F5F5F5;
    color: black;
}

.connection-default-scheme {
    background-color: white;
    color: black;
}

.connection-arclink-scheme {
    background-color: #99CCFF;
    color: black;
}