/********* General Styles *********/
#pharos-content {
   padding: 5px;
}

/* -- Content overflow fix for IE -- */
#content {
   -ms-overflow-style: none;
}


/********* Back Button *********/
#pharos-back-button {
   padding: 5px;
   width: 215px;
   text-align: center;
   font-size: 1.1em;
   color: #fff;
   border-radius: 5px;
   box-shadow: 0 0 1px #888888;
   cursor: pointer;
   margin-bottom: 10px;
   display: none;
   background-color: #c10037;
   border: 1px solid #c10037;
   border-radius: 99em;
   font-weight: bold;
}

#pharos-back-button:hover {
   color: #c10037;
   background-color: #fff;
}


/********* Subtitle *********/
#pharos-subtitle {
   margin: 30px 0;
}


/********* Content Header *********/
#pharos-content-header {
   border-bottom: 1px solid #e4e3e3;
   display: flex;
   align-items: flex-end;
   justify-content: space-around;
   font-weight: normal;
   padding: 10px 0;
}

#pharos-content-header .branch-name {
   display: inline-block;
   font-size: 18px;
   width: 45%;
}

#pharos-content .mac-tot {
   width: 23%;
   display: inline-block;
   text-align: center;
}

#pharos-content .win-tot {
   width: 23%;
   display: inline-block;
   text-align: center;
}


/********* Accordion *********/
#pharos-content .panel.active {
   margin-bottom: 20px;
}

#pharos-content .platform-img {
   height: 20px;
   display: block;
   margin: 5px auto;
}

#pharos-content .accordion:last-of-type {
   margin-top: 20px;
}


/********* Accordion Buttons *********
 * Buttons that are used to open and close the accordion panel
 */
#pharos-content button.accordion {
   background-color: #eee;
   color: #444;
   cursor: pointer;
   padding: 18px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   text-align: left;
   border: none;
   outline: none;
   transition: 0.4s;
   height: auto;
   margin-bottom: 1px;
   box-shadow: none;
   text-shadow: none;
}

#pharos-content button.accordion.active,
#pharos-content button.accordion:hover,
#pharos-content button.accordion:focus {
   background-color: #ddd;
}


#pharos-accordion .branch-name {
   font-size: 18px;
   font-weight: bold;
   width: 45%;
}


/********* Accordion Panels *********
 * Expandable accordion panels. 
 * Note: hidden by default
 */
#pharos-content div.panel {
   background-color: white;
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.2s ease-out;
}

#pharos-content .branch-floor {
   padding: 5px 8px;
   border-bottom: 1px dotted black;
   display: flex;
   align-items: center;
   justify-content: space-around;
}

#pharos-content .branch-floor-name {
   display: inline-block;
   width: 45%;
   font-size: 16px;
   padding: 10px 0;
}

#pharos-content .branch-floor-mac {
   display: inline-block;
   width: 23%;
   text-align: center;
   margin-left: -3px;
}

#pharos-content .branch-floor-win {
   display: inline-block;
   width: 23%;
   text-align: center;
}

#pharos-content .branch-link {
   cursor: pointer;
   text-decoration: underline;
   color: #c10037;
}

/********* Map Key *********/
#floor-map-key {
   margin-top: 40px;
   max-width: 920px;
}

#pharos-content .key-img {
   width: 25px;
   vertical-align: baseline;
}

#pharos-content .key-span {
   padding-right: 20px;
   display: inline-block;
}


/********* Map View *********/
#floor-map {
   max-width: 100%;
   overflow: scroll;
}


/********* Last Updated Information *********/
#pharos-content #last-update-container {
   margin: 20px 10px;
}

#pharos-content #last-update-time {
   font-style: italic;
}


/********* Computer Location Administration *********/
#branch-map {
   margin-top: 20px;
}

#add-comp {
   margin: 10px 10px 10px 0;
}

#remove-comp {
   display: block;
   margin: 10px 0 10px 0;
}

#type-radio {
   display: block;
}

.computer-icon {
   position: absolute !important;
}

.computer-icon.active {
   padding: 0 3px 3px 0;
   border-bottom: 2px red solid;
   border-right: 2px red solid;
}


/* Small devices (tablets, up to 920px) */
@media screen and (max-width: 920px) {
   #floor-map::before {
      color: #4c4b4b;
      font-style: italic;
      content: "scroll map with finger ~";
      margin-top: 18px;
      display: block;
   }
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {

   /* #pharos-content div.panel { padding: 0 18px; }
   #pharos-content .branch-name.p-header { padding-left: 18px; }
   #pharos-content .p-header { font-size: 20px; font-weight: normal; text-decoration: underline; margin-bottom: 10px; } */
   #floor-map-key {
      text-align: right;
   }

   #floor-map {
      overflow: hidden;
   }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {}