.category-header {
    border-bottom: white 2px solid;
    margin-bottom: 7px;
}
.logo {
    margin:10px 10px 10px 15px;
}

.elevation-item {
    margin: 12px;
    border: #8c8c8c 3px solid;
    cursor: pointer;
}
.elevation-item img {
    width: 100%;
}
.elevation-selected {
    border-color: #0b8bcc;
    background-color: #353535;
}

.floor-tab {
    margin-left: -15px;
}
.floor-tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
}
.floor-tab button:hover {
    background-color: #5296d6;
    color: white;
}
.floor-tab button.floor-selected {
    background: #0073ae; 
}
.floor-tab button.floor-selected:hover {
    color: white; 
}
.floor-viewer-selected {
    display: block !important;
}

.modes h3, .ehome_svg_options h3 {
    margin-top: 0;
}

.option-parent { 
    padding: 0 8px; 
    cursor: pointer;
    min-height: 30px;
    margin-bottom: 11px;
} 
.option-parent:hover { 
    background: #5296d6; 
    color: #fff !important; 
} 
.option-parent.option-selected { 
    background: #0073ae; 
    color: #fff !important; 
} 
.option-parent.option-disabled { 
    background: #6d6d6d;
    opacity: 0.3; 
    cursor: default;
} 
.no-display { 
    display: none; 
}
.ehome_svg_img {
    height: 640px;
    overflow:auto;
    border: 1px solid #e3e3e3;
    padding: 12px;
}
.ehome_svg_img svg {
    width: 100%;
    height: 100%;
    cursor: all-scroll;
}
svg.drawing {
    cursor: none;
}
.ehome_svg_options, .modes {
    height: 100%;
}
.dark-background {
    background-color: #292929 !important;
    color: white;
}
.gray-background {
    background-color: #b3b3b3;
    color: white;
}
.save-btn {
    margin-top: 10px;
    font-size: 20px;
    height: auto;
}
.mode-header {
    min-height: 25px;
    margin-top: 14px;
    border: 1px solid white;
    padding: 6px;
    font-size: x-large;
    cursor: pointer;
}
.mode-header.mode-selected {
    background-color: #0073ae;
    color: white;
}
.elevation-mode-body {
    height: 66%;
}
.mode-body {
    height: 0;
}
.furniture-item img {
    width: 80px;
    height: auto;
    float: left;
    margin-right: 16px;
    margin-left: 12px;
}
.furniture-item {
    cursor: pointer;
}
.mode-body {
    overflow-y: auto;
    background-color: #424242;
}
#info {
    display: none;
    color: #cad5ff;
}
.bx-link-icon:hover {
    cursor: pointer !important;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 10px auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close-modal {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close-modal:hover,
.close-modal:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
.center {
    margin: auto;
    width: 50%;
    padding: 10px;
}

/* Absolute Center Spinner */
.loading {
    position: fixed;
    z-index: 999;
    height: 2em;
    width: 2em;
    overflow: show;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
  
  /* Transparent Overlay */
  .loading:before {
    content: '';
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.3);
  }
  
  /* :not(:required) hides these rules from IE9 and below */
  .loading:not(:required) {
    /* hide "loading..." text */
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
  }
  
  .loading:not(:required):after {
    content: '';
    display: block;
    font-size: 10px;
    width: 1em;
    height: 1em;
    margin-top: -0.5em;
    -webkit-animation: spinner 1500ms infinite linear;
    -moz-animation: spinner 1500ms infinite linear;
    -ms-animation: spinner 1500ms infinite linear;
    -o-animation: spinner 1500ms infinite linear;
    animation: spinner 1500ms infinite linear;
    border-radius: 0.5em;
    -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
    box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
  }
  
  /* Animation */
  
  @-webkit-keyframes spinner {
    0% {
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  @-moz-keyframes spinner {
    0% {
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  @-o-keyframes spinner {
    0% {
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  @keyframes spinner {
    0% {
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  } 

.pricing-total {
    font-size: 29px;
    padding-top: 17px;
}
span.kbd {
    color: #000;
    font-size:1em;
    padding:0 .25em 0 .25em;
    margin-right: 8px;
    border:solid 1px grey;
    border-radius:4px;
    background-color:#f0f0f0;
    box-shadow:2px 2px 2px 2px silver;
}
span.mouse-btn {
    width: 15px;
    display: inline-block;
    background-color: #e8e8e8;
    border: 1px grey solid;
    margin: 0 7px 0 3px;
    box-shadow: 1px 1px 1px 1px silver;
}
.left-click {
    border-radius: 14px 0 0 0;
}
.right-click {
    border-radius: 0 14px 0 0;
}
.draw-line {
    fill:none;
    stroke:red;
    stroke-width:3;
}
.callout-text {
    font-family: 'Walter Turncoat', cursive;
    fill: #005480;
}
.callout-line {
    stroke: #005480;
}
.callout-rect {
    fill: #ffffff;
    stroke: #0c0c0c;
    stroke-width: 1;
}

#summary-list {
    list-style-type: none;
    font-size: 17px;
}