body{max-width:1110px;margin:0 auto;}
body, .bootstrap-iso h1, .bootstrap-iso{
    font-family: Roboto,Helvetica,Arial,sans-serif;
    color: #646464;
    background-color: #FFF;
}
  .normal,h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6{font-weight: 300;}
  .bold{font-weight: 500;}
  path {
    fill: #fff;
    stroke-linejoin: round;
  }
  .btn-group-4{
    width: 100%;
  }
  .btn-group-4 .btn{
    width: 20%;
    border-radius : 0;
  }
  .dateString {
    margin-left: -15px;
  }
  
  .land {
    fill: #e9e9e9;
  }
  .boundary {
    fill: #e9e9e9;
    stroke: #FFF;
    stroke-width: 1px;
  }
  
  .mb10{
    margin-bottom: 10px;
  }
  
  .mb20{
    margin-bottom: 20px;
  }
  .date {
    margin-top:20px;
    margin-right:50px;
  }
  
  .pagetitle {
    margin-top:28px;
    margin-left:250px;
    color: #888888;
  }
  
  .panel-heading {
      font-size: 18px;
      height: 75px !important;
  }
  
  .hexagons  {
    opacity: 0.7;
    filter: alpha(opacity=70); /* For IE8 and earlier */
  }
  .heatmap {
    width:100%;
    height:0px;
    text-align:center;
    margin-bottom: 10px;
  }
  
  .slider-track {
      background: -webkit-linear-gradient(left, yellow , red); /* For Safari 5.1 to 6.0 */
      background: -o-linear-gradient(right, yellow, red); /* For Opera 11.1 to 12.0 */
      background: -moz-linear-gradient(right, yellow, red); /* For Firefox 3.6 to 15 */
      background: linear-gradient(to right, yellow , red) !important; /* Standard syntax (must be last) */
  }
  .slider-selection {
    background: #888888 !important;
  }
  .slider {
    margin: 10px;
    margin-top: 10px;
  }
  .customHeader {
    padding: 10px;
    font-weight: normal;
  }
  .specialTable {
    table-layout: fixed !important;
  }
  
  .ellipsis {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  
  #tooltip {
    position: absolute;
    width: 140px;
    padding: 10px;
    background-color: #2a9fd6;
    border-color: #2a9fd6;
    pointer-events: none;
    z-index: 99;
  }

  @media screen and (min-width: 360px) {
    #tooltip {
      width: 160px;
    }
  }

  @media screen and (min-width: 380px) {
    #tooltip {
      width: 180px;
    }
  }

  @media screen and (min-width: 400px) {
    #tooltip {
      width: 200px;
    }
  }

  @media screen and (min-width: 768px) {
    #tooltip {
      width: 250px;
    }
  }
  
  #tooltip.hidden {
    display: none;
  }
  
  .asntip {
    display:none;
    position:absolute;
    border:1px solid #333;
    background-color:#161616;
    border-radius:5px;
    padding:10px;
    color:#fff;
    font-size:12px;
  }
  
  #tooltip p {
    margin-top: 10px;
    font-size: 14px;
    line-height: 15px;
  }	
  
  #tooltip p strong{
    margin-bottom: 10px;
    display: inline-block;
  
  }
  .table-fixed thead {
    width: 97%;
  }
  .table-fixed tbody {
    height: 367px;
    overflow-y: auto;
    width: 100%;
  }
  .table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th {
    display: block;
  }
  .table-fixed tbody td, .table-fixed thead > tr> th {
    float: left;
    border-bottom-width: 0;
  }
  .help-tooltip{
    position: relative;
    top: 3px;
    cursor: pointer;
    color: #6F6C6C;
    font-size: 16px;
  }
  .popover{
    min-width: 400px;
  }
  .popover-content, .popover{
    background-color: #2a9fd6;
    border-radius: 0;
  }
  .popover.top>.arrow{
    bottom: -10px;
  }
  .popover.right>.arrow{
    left: -10px;
  }
  .popover.top>.arrow:after{
    border-top-color: #2a9fd6;
  }
  .popover.right>.arrow:after{
    border-right-color : #2a9fd6;
  }
  .slider-tick{
    display: none;
  }
  
  .slider-handle.custom {
    position: absolute;
    width: 10px;
    height: 20px;
    background-color: #FBFBFB;
    background-image: none; 
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);
    border: 1px solid #FBFBFB;
    border-radius: 4px;
  }
  
  .slider.slider-horizontal .slider-tick, .slider.slider-horizontal .slider-handle{
    margin-left: -5px;
  }
  #media-delivery{position: relative;}
  hr.divider{margin: 0; padding: 0;}
  a.logo{background: url(../images/akamai-client_rep-header.png) no-repeat scroll 0 0; width: 88px; height: 40px; float: left;}
  header.row{color: #444; font-size: 16px; background-color: #FFF; margin: 0 !important;}
  header.row .seperator{margin: 0 15px; width: 2px; background-color: #AAA; float: left; height: 40px;}
  header.row .header_col1{float: left; width: auto; margin-right: 20px;}
  header.row h1.title{float: left; width: auto; font-size: 16px; font-weight: normal; margin: 18px 0 0; color: #FFF;}
  header.row h1.title a{color: #646464;}
  header h6{margin: 0;}
  .options-col{padding-top: 50px;}
  .select-container{margin-bottom: 30px;}
  .select-container > label{font-size: 12px; font-weight: normal; display: block; color: #09c; text-transform: uppercase; cursor: default;}
  .select-container .btn.dropdown-toggle.btn-default{font-size: 14px; display: block;}
  .select-container ul.dropdown-menu > li > a > span.text{font-size: 14px;}
  #continents{margin-top: 20px;}
  .vcenter {
      display: inline-block;
      vertical-align: middle;
      float: none;
  }
  #tooltip ul {
      padding: 0px;
      margin: 0 0 20px;
  }
  #tooltip ul li{
      list-style-type: none; color: #FFF;
  }
  #tooltip ul li:before{color: transparent;}
  label.checks{padding-left: 5px;margin-top: -5px;}
  .map-container{position: relative; background-color: #FFF; height: auto !important;}
  #comp-legends{display: none;}
  .legends-container{display: block; overflow: hidden;}
  .legend-name{display: none; margin-bottom: 10px; float: left; margin-right: 20px; overflow: hidden;}
  .legend-name > span.text{font-size: 14px; float: left; margin-top: -2px; margin-left: 5px;}
  .legend-name > .server-count{font-size: 14px; float: left;margin-top: -2px; margin-left: 3px;}
  .legend-name .color{
    /*width: 14px; height: 14px;*/ 
    /*display:inline-block; */
    margin-right: 5px; 
    /*border-radius: 7px;*/
    position: relative;
    width: 15px; 
    height: 8.66px;
    background-color: #64C7CC;
    margin: 4.33px 0;
    float: left;
  }
  .legend-name .color:before, .legend-name .color:after{
    content: "";
    position: absolute;
    width: 0;
    border-left: 7.5px solid transparent;
    border-right: 7.5px solid transparent;
  }
  .legend-name .color:before{
    bottom: 100%;
    border-bottom: 4.33px solid #64C7CC;
  }
  
  .legend-name .color:after{
    top: 100%;
    width: 0;
    border-top: 4.33px solid #64C7CC; 
  }
  
  .legend-name .color-circle{float: left; width: 10px; height: 10px; border-radius: 6px; border: 1px solid #FFF; margin-left: 5px; margin-top: 3px;}
  
  .legend-name.media-server .color{background-color: #017ac6;}
  .legend-name.media-server .color:before{border-bottom: 4.33px solid #017ac6;} 
  .legend-name.media-server .color:after{border-top: 4.33px solid #017ac6;}
  
  .legend-name.storage-server .color{background-color: #ff9933;}
  .legend-name.storage-server .color:before{border-bottom: 4.33px solid #ff9933;}
  .legend-name.storage-server .color:after{border-top: 4.33px solid #ff9933;}
  
  .legend-name.intersection-akamai .color{background-color: #ff9933;}
  .legend-name.intersection-akamai .color:before{border-bottom: 4.33px solid #ff9933;}
  .legend-name.intersection-akamai .color:after{border-top: 4.33px solid #ff9933;}
  
  .legend-name.intersection-competitors .color{background-color: #3C00FF;}
  .legend-name.intersection-competitors .color:before{border-bottom: 4.33px solid #3C00FF;}
  .legend-name.intersection-competitors .color:after{border-top: 4.33px solid #3C00FF;}
  
  .legend-name.intersection-multiple .color{background-color: #594B50;}
  .legend-name.intersection-multiple .color:before{border-bottom: 4.33px solid #594B50;}
  .legend-name.intersection-multiple .color:after{border-top: 4.33px solid #594B50;}
  
  .legend-name.competitor1-legend .color{background-color: #81bc00;}
  .legend-name.competitor1-legend .color:before{border-bottom: 4.33px solid #81bc00;}
  .legend-name.competitor1-legend .color:after{border-top: 4.33px solid #81bc00;}
  .legend-name.competitor1-legend .color-circle{background-color: #81bc00}
  
  .legend-name.competitorNS-legend .color{background-color: #d0343a;}
  .legend-name.competitorNS-legend .color:before{border-bottom: 4.33px solid #d0343a;}
  .legend-name.competitorNS-legend .color:after{border-top: 4.33px solid #d0343a;}
  .legend-name.competitorNS-legend .color-circle{background-color: #d0343a}
  
  .legend-name.competitor2-legend .color{background-color: #5b3594;}
  .legend-name.competitor2-legend .color:before{border-bottom: 4.33px solid #5b3594;}
  .legend-name.competitor2-legend .color:after{border-top: 4.33px solid #5b3594;}
  .legend-name.competitor2-legend .color-circle{background-color: #5b3594}
  
  .legend-name.competitor3-legend .color{background-color: #002856;}
  .legend-name.competitor3-legend .color:before{border-bottom: 4.33px solid #002856;}
  .legend-name.competitor3-legend .color:after{border-top: 4.33px solid #002856;}
  .legend-name.competitor3-legend .color-circle{background-color: #002856}
  
  .cities {font-size: 12px; margin-bottom: 10px;}
  #tooltip hr.divider{border-top: 1px solid #fff;margin-bottom: 2px;}
  
  .main-criteria{margin-right: 10px; margin-top: 8px; color: #999;}
  .select-options{float: left; min-width: 630px;}
  .select-container{margin-bottom: 20px; padding: 0 5px; float: left;}
  
  
  /* New Styles */
  .select-container .btn.dropdown-toggle.btn-info{background-color: #005F7E; border: 1px solid #005F7E; border-radius: 0; background-image: none;}
  .select-container .btn.dropdown-toggle.btn-info:hover, .select-container .btn.dropdown-toggle.btn-info:focus{background-position: 0 0;}
  .bootstrap-iso .btn-info:active:hover, .bootstrap-iso .btn-info.active:hover, .bootstrap-iso .open > .dropdown-toggle.btn-info:hover, .bootstrap-iso .btn-info:active:focus, .bootstrap-iso .btn-info.active:focus, .bootstrap-iso .open > .dropdown-toggle.btn-info:focus, .bootstrap-iso .btn-info:active.focus, .bootstrap-iso .btn-info.active.focus, .bootstrap-iso .open > .dropdown-toggle.btn-info.focus{background-color: #005F7E;}
  .select-container .bootstrap-select .dropdown-toggle:focus{outline: none !important;}
  .select-container .bootstrap-select.btn-group .dropdown-menu{background-color: #007FA9; margin-top: -1px; border-radius: 0;}
  .select-container .dropdown-menu>li>a{color: #FFF;}
  .select-container .dropdown-menu>li>a:focus, .select-container .dropdown-menu>li>a:hover{background-color: #0099CC; outline: none;}
  h1.heading--underline{position: relative; padding-bottom: 32px; font-size: 24px; font-weight: 400; line-height: 30px; margin-bottom: 15px; margin-top: 0px; color: #333;}
  h1.heading--underline:before{position: absolute; left: 0; right: 0; display: block; width: 50%; max-width: 75px; height: 1px; bottom: 16px; border-bottom: 4px solid #09c; content: ""}
  #tooltip h5.locations-header{overflow: hidden;}
  #tooltip h5.locations-header > span{float: left; margin-left: 5px; margin-top: 2px;}
  
  #tooltip h5.locations-header > div.akamai-hexagon, #tooltip h5.locations-header > div.comp-hexagon{position: relative; width: 15px; height: 8.66px; margin: 4.33px 0; float: left;}
  #tooltip h5.locations-header > div.akamai-hexagon:before, #tooltip h5.locations-header > div.akamai-hexagon:after, #tooltip h5.locations-header > div.comp-hexagon:before, #tooltip h5.locations-header > div.comp-hexagon:after{content: ""; position: absolute; width: 0; border-left: 7.5px solid transparent; border-right: 7.5px solid transparent;}
  #tooltip h5.locations-header > div.akamai-hexagon:before, #tooltip h5.locations-header > div.comp-hexagon:before{bottom: 100%;}
  #tooltip h5.locations-header > div.akamai-hexagon:after, #tooltip h5.locations-header > div.comp-hexagon:after{top: 100%; width: 0;}
  
  #tooltip h5.locations-header > div.akamai-hexagon.orange{background-color: #ff9730}
  #tooltip h5.locations-header > div.akamai-hexagon.orange:before{border-bottom: 4.33px solid #ff9730;}
  #tooltip h5.locations-header > div.akamai-hexagon.orange:after{border-top: 4.33px solid #ff9730;}
  
  #tooltip h5.locations-header > div.akamai-hexagon.blue{background-color: #2fc8f3}
  #tooltip h5.locations-header > div.akamai-hexagon.blue:before{border-bottom: 4.33px solid #2fc8f3;}
  #tooltip h5.locations-header > div.akamai-hexagon.blue:after{border-top: 4.33px solid #2fc8f3;}
  
  #tooltip h5.locations-header > div.akamai-hexagon.purple{background-color: #fe5bff}
  #tooltip h5.locations-header > div.akamai-hexagon.purple:before{border-bottom: 4.33px solid #fe5bff;}
  #tooltip h5.locations-header > div.akamai-hexagon.purple:after{border-top: 4.33px solid #fe5bff;}
  
  #tooltip h5.locations-header > div.comp-hexagon.competitor1hex{background-color: #8e72ff}
  #tooltip h5.locations-header > div.comp-hexagon.competitor1hex:before{border-bottom: 4.33px solid #8e72ff;}
  #tooltip h5.locations-header > div.comp-hexagon.competitor1hex:after{border-top: 4.33px solid #8e72ff;}
  
  #tooltip h5.locations-header > div.comp-hexagon.competitor2hex{background-color: #1e9c58}
  #tooltip h5.locations-header > div.comp-hexagon.competitor2hex:before{border-bottom: 4.33px solid #1e9c58;}
  #tooltip h5.locations-header > div.comp-hexagon.competitor2hex:after{border-top: 4.33px solid #1e9c58;}
  
  #tooltip h5.locations-header > div.comp-hexagon.competitor3hex{background-color: #fe364e}
  #tooltip h5.locations-header > div.comp-hexagon.competitor3hex:before{border-bottom: 4.33px solid #fe364e;}
  #tooltip h5.locations-header > div.comp-hexagon.competitor3hex:after{border-top: 4.33px solid #fe364e;}
  
  #tooltip h5.locations-header > div.comp-hexagon.competitorNShex{background-color: #ef8173}
  #tooltip h5.locations-header > div.comp-hexagon.competitorNShex:before{border-bottom: 4.33px solid #ef8173;}
  #tooltip h5.locations-header > div.comp-hexagon.competitorNShex:after{border-top: 4.33px solid #ef8173;}
  
  body.dark-theme #media-delivery{background-color: #003040 !important; color: #FFF}
  body.dark-theme #media-delivery header.row{background-color: #003040; color: #FFF;}
  body.dark-theme #media-delivery h1.heading--underline{color: #FFF}
  body.dark-theme #media-delivery .map-container{background-color: #003040;}
  body.dark-theme #media-delivery .select-container > label{color: #2FC8F3;}
  body.dark-theme #media-delivery .land {fill: #005F7E;}
  body.dark-theme #media-delivery .boundary{stroke: #222; fill: #005F7E;}
  body.dark-theme #media-delivery .dark-mode-label{color: #FFF;}
  body.dark-theme #media-delivery .legends-container{background-color: #003040; color: #FFF}
  .dark-mode-label{margin-right: 5px; font-size: 12px; margin-top: 3px;}
  body.map-maximized #media-delivery header.hero-intro-region.hero-intro.tabbed--intro > div.inner-wrapper > div.region__inner{padding: 0 !important}
  body.map-maximized #media-delivery main div.outer-wrapper > div.inner-wrapper > section.span_12.main-region{position: fixed; width: 100%; left: 0; background-color: #FFF; height: 100%;}
  body.map-maximized .select-options{margin-right: 30px;}
  @media(max-width: 1200px){
    .bootstrap-iso .header_col1{float: none !important; width: 100%; display: block;}
    .bootstrap-iso .select-options{display: block; float: none !important; width: 100%; margin-bottom: 10px;}
    h1.heading--underline{margin-bottom: 0 !important}
  
  }
  
  @media(max-width: 900px){
    .legend-name{float: none !important; width: 100%;}
  }
  
  @media(max-width: 800px){
  .floating-btn-container{top: 50%; display: none}
  }
  
  @media(max-width: 650px){
    .select-options{min-width: 10px}
    .select-container{float: none !important; width: 100%; margin-bottom: 15px;}
    .select-container .btn-group.bootstrap-select{width: 100% !important}
    h1.heading--underline{padding-bottom: 20px; font-size: 24px;}
    .legends-container, .switch-container{float: none !important;}
  }
  
  @media(max-width: 500px){
    h1.heading--underline{font-size: 16px;}
  }