Content Comparison

<div class="topnav" style="height: 30px">
  <a href="#">Cloud Status</a>
  <a href="#past-incidents">Incident</a>
  <a href="#contact" onclick="cloudKPIClick()">Cloud KPI's</a>
</div>
<br>

<div class="subtabs" style="height: 30px">
  &nbsp;&nbsp;<span>Product:</span>&nbsp;
  <a href="#">WSC</a>
  <a href="#">CASB</a>
  <a href="#">DEP</a>
  <a href="#">DUP</a>
  <a href="#">DDP</a>
  <a href="#"><u>What Data Center am I using?</u></a>
</div>

<div class="section1">
  <h6>Americas</h6>
</div>

<div class="section2">
  <h6>EMEA</h6>
</div>

<br><div class="link">
  <a href="#past-incidents">Incidents</a>
</div>

<div class="modal" style="display:none;">
  <div class="header">
    <div class="title">
    	   Incident Details
      <span id='close'>x</span>
    </div>
  </div>
  <div class="content"></div>
</div>

<script>
$('.subtabs').show();  
  //$('.section1').hide();
  //$('.section2').hide();
  //$('.container').hide();
  
function cloudKPIClick() {
    $('.subtabs').hide();
    location.hide();
}
  

//$('.components-section').hide();
$('.components-uptime-link').hide();
$('.legend').hide();
$('.section1').insertBefore('.components-section');
$('.section2').insertAfter('.components-section');
$('.whatDC').insertAfter('.page-status');
$('.link').insertAfter('.no-related-msg');
  //$('.incidents-list').hide();
$('#uptime-component-08mr7c8f4tln').hide();
$('#uptime-component-8b9098rxjnfl').hide();
$('.incident-container').insertAfter('.close')

$('div.incidents-list').find('div.status-day > div.date').each(function(index,element){
    var t = $(element).html();
    $(element).html("<a href='#'>"+t+"</a>");
  $(element).siblings().each(function(index,element){
  	    $(element).css('display','none');
  })
});
  
  $('div.incidents-list').on('click','div.status-day > div.date > a',function(e){
    e.preventDefault();
     var child = $(e.target).parents('div.status-day').children().eq(1);
    var html = $(child).html();
    $('.modal>div.header>div.title').html('Incident Details');
    $('.modal>div.content').html('<div class="incident-container">'+html+'</div>');
  	   $('.modal').css('display','block');
  });
 
</script>

.topnav {
  overflow: hidden;
  height: 50px;
}

.topnav a {
  float: left;
  color: black;
  text-align: center;
  padding: 5px 7px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ADD8E6;
  color: black;
}

.topnav a:active {
  background-color: #4caf50;
  color: grey;
}

.layout-content.status.status-index .page-status.status-none {
    background-color: #2fcc66;
  			  width: 200px;
  	  height: 50px;
  		  text-align: center;
}

.layout-content.status.status-index .page-status.status-major {
    background-color: #e67e22;
  			  width: 200px;
  	  height: 50px;
  		  text-align: center;
    display: none;
}

.layout-content.status.status-index .page-status.status-minor {
    background-color: #f1c40f;
  			  width: 210px;
  	  height: 50px;
  		  text-align: center; 
    display: none;
}

.layout-content.status.status-index .page-status.status-maintenance {
    background-color: #3498DB;
  			  width: 220px;
  	  height: 50px;
  		  text-align: center; 
  	  display: none;
}

.layout-content.status.status-index .page-status {
    font-weight: 50;
    border-radius: 2px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -o-border-radius: 4px;
    -ms-border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.1);
    text-shadow: 0 1px 0 rgba(0,0,0,0.1);
    margin-bottom: 70px;
    padding: 0.75rem 1.25rem;
    
}

.layout-content.status.status-index .page-status .status {
    color: rgb(255, 255, 255);
    position: relative;
    top: 2px;
     
}
.font-large {
    /*font-weight: 500;*/
    font-size: 14px;
    line-height: 7px;
    
    /*font-size: 1.25rem;
    line-height: 1.8125rem;*/
}

/* Header/Logo Title */
.section1 {
  padding: 7px;
  text-align: left;
  background: #D3D3D3;
  color: black;
  font-size: 5px;
}
/* Header/Logo Title */
.section2 {
  padding: 7px;
  text-align: left;
  background: #D3D3D3;
  color: black;
  font-size: 5px;
}

.whatDC { 
	  text-align: right;
}

.subtabs {
  overflow: hidden;
  height: 50px;
}

.subtabs a {
  color: black;
  text-align: center;
  padding: 5px 7px;
  text-decoration: none;
  font-size: 17px;
}

.subtabs a:hover {
  background-color: white;
  color: black;
}

.subtabs u {
  color: blue;
  text-align: center;
  padding: 5px 7px;
  text-decoration: none;
  font-size: 17px;
  float: right;
  text-decoration: underline;
}

.subtabs u:hover {
  background-color: white;
  color: blue;
}


#uptime-tooltip {
    margin-left: 150px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 500;
}

.link {
 text-align: center; 
}


hide-component {
 display: none; 
}

.modal {
  position: fixed;
  z-index: 500;
  background-color: white;
  width: 70%;
  border: 1px solid #ccc;
  box-shadow: 1px 1px 1px black;
  padding: 16px;
  left: 50%;
  top: 50%;
  box-sizing: border-box;
  transition: all 0.3s ease-out;
}

div.modal > div > header > div.title {
 overflow:auto; 
}

#close {
  float:right;
  display:inline-block;
  padding:2px 5px;
  background:#ccc;
  margin: 0 10px 10px 0;
}

/*.layout-content.status.status-index .components-section .components-container.one-column .component-container .component-status {
    display: inline-block;
}
.layout-content.status.status-index .components-section .component-container .component-status {
    font-size: 0.875rem;
    float: right;
    background-color: #cfc;
    padding: 7px;
    line-height: 10px;
}


.updates-dropdown-container {
  margin-bottom:0;
  margin-top:0;
}*/