* {
    font-family: sans-serif;
}


 /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
        
        #map {
            height: 75%;
            max-width: 75%;
            margin: auto;
            top: 30px;
        }
        /* Optional: Makes the sample page fill the window. */
        
        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        /* Add a black background color to the top navigation */
        
        .topnav {
            background-color: #730000;
            overflow: hidden;
            height: 6%;
        }
        /* Style the links inside the navigation bar */
        
        .topnav #home {
            float: left;
            color: #8f3232;
            text-align: center;
            padding: 14px 0 16px 0;
            text-decoration: none;
            font-size: 17px;
            vertical-align: middle;
            width: 200px;
        }
        /* Change the color of links on hover */
        
        .topnav #home:hover {
            background-color: #8f3232;
            color: black;
        }
        /* Add a color to the active/current link */
        .topnav a.active {
            background-color: #4CAF50;
            color: white;
        }
        
        .topnav ul {
	    list-style: none;
	    text-align: justify;
	    color: WHITE;
	}
        
        .topnav ul li span{
	    font-weight: bolder;
	}
       
        .topnav ul li a{
            font-weight: bolder;         
        }

	.activeAlarm, .activePanic {
	    background: lightgreen;
	}

        #content {
            background-color: white;
            width: 100%;
            height: 94%;
        }
        
        #sideMenu {
            overflow: hidden;
            float: left;
            background-color: white;
            width: 200px;
            max-width: 200px;
            height: 100%;
            border-right: 1px solid #555;
            -moz-box-shadow:    5px 0 5px -2px #888;
            -webkit-box-shadow: 5px 0 5px -2px #888;
            box-shadow:         5px 0 5px -2px #888;
           
        }
        
        .logo {
            height: 30px;
        }
        /*----- Accordion -----*/

 
.accordion {
    overflow:hidden;
    box-shadow:0px 1px 3px rgba(0,0,0,0.25);
   
    background:#f7f7f7;
}
 
/*----- Section Titles -----*/
.accordion-section-title {
    width:100%;
    padding:15px;
    display:inline-block;
    border-bottom:1px solid #1a1a1a;
    background:#333;
    transition:all linear 0.15s;
    /* Type */
    font-size:1.200em;
    text-shadow:0px 1px 0px #1a1a1a;
    color:#fff;
}
 
.accordion-section-title.active, .accordion-section-title:hover {
    background:#4c4c4c;
    /* Type */
    text-decoration:none;
}
 
.accordion-section:last-child .accordion-section-title {
    border-bottom:none;
}

 
/*----- Subsection Titles -----*/
.accordion-subsection-title {
    width:100%;
    padding:5px;
    display:inline-block;
    border-bottom:1px solid #1a1a1a;
    background:#777;
    transition:all linear 0.15s;
    /* Type */
    font-size:1.200em;
    text-shadow:0px 1px 0px #1a1a1a;
    color:#fff;
}
 
.accordion-subsection-title.active, .accordion-section-title:hover {
    background:#6c6c6c;
    /* Type */
    text-decoration:none;
}
 
.accordion-subsection:last-child .accordion-subsection-title {
    border-bottom:none;
}


/*----- Section Content -----*/
.accordion-section-content {
   
    display:none;
}

.sectionItem {
    overflow: hidden;
    padding: 5px 5px 5px 15px;
    cursor: pointer; cursor: hand;
}
#panics .sectionItem:hover, 
#alarms .sectionItem:hover,
.accordion-subsection-content .sectionItem:hover {
   background-color:#8f3232;
   color: white;
}
.selected{
    background-color:#8f3232;
    color: white;
}
span.sectionItemText {
    float: left;
}
button.sectionItemButton {
    float: right;
    position: relative;
    padding: 0;
}

/*----- Subsection Content -----*/
.accordion-subsection-content {
    display:none;
}

.subsectionItem {
    overflow: hidden;
    padding: 5px 5px 5px 15px;
    cursor: pointer; cursor: hand;
}
.subsectionItem:hover {
   background-color:#8f3232;
   color: white;
}
.selected{
    background-color:#8f3232;
    color: white;
}
span.subsectionItemText {
    float: left;
}
button.subsectionItemButton {
    float: right;
    position: relative;
    padding: 0;
}


#main{
    height: inherit;
}
#contentTitleBox{
    text-align: center;
    margin: auto;
    height: 10%;
    overflow: hidden;
}

.card {
    /* Add shadows to create the "card" effect */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    overflow: hidden;
    margin: auto;
    max-width: 42%;

}
#cardUsername{
    text-align: center;
}
/* On mouse-over, add a deeper shadow */
.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

/* Add some padding inside the card container */
.cardContainer {
    padding: 2px 16px;
}


/* Hidden completed */
.fullhidden {
  position: absolute;
  top: -10000px;
  left: -10000px;
  width: 0px;
  height: 0px;
  opacity: 0;
  visibility: hidden;
}