* {
    box-sizing: border-box;
}

/* Style the body */
body {
  font-family: Arial;
  margin: 0;
  padding-bottom: 20%;

}

.btn {
    display: inline-block; 
  
}

  
.hidden-filter-icon {
    display: none;
}
/* Header/logo Title */
.header {
    color:whitesmoke;
}



/* Column container */
.row {  
    display: flex;
    flex-wrap: wrap;
}

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
    flex: 25%;
    font-size: small;
    color: #859F41;
   font-weight: bolder;
   padding-left: 20px;
   padding-right: 10px;
   margin-bottom: 40px;
}



div.tty {
   
    top: 50px;
    border: 2px solid #859F41;
    border-radius: 10px;

}

/* Main column */
.main {
    flex: 75%;
    background-color: white;
    padding-right: 10px;

}
.blank {
    display: none;
}

.all-forms {
    border: 5px solid #859F41;
    border-radius: 10px;
    margin-left: 10px;
    margin-right: 10px;
    padding-left: 15px;
}

/* Footer */
.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
    text-align: center;
    background: #859F41;
    color: whitesmoke;
}

/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 500px) {
.navbar {   
  flex-direction: column;
}

.hide-on-mobile {
    display: none;
   
}
.main {
    margin: 8px;
    padding-right: 3px;
}

.side {
    margin: 8px;
    padding-right: 20px;
    padding-left: 10px;
    margin-bottom: 50px;
}


.portc-section {
    margin-left: 10px;
    padding-right: 10px;
}

.hidden-filter-icon {
    display: block;
    color: whitesmoke;
    float:right;
    position: relative;
    z-index: 10;
    padding-right: 10px;
    font-size: smaller;
}

.dropdown {
    display: block;
    float:right;
    position: relative;
    z-index: 10;
    font-size: smaller;
}
.tty {
    display: none;
}

.blank {
    display: block;
}


table.switch-table td:nth-of-type(4),
table.switch-table td:nth-of-type(5),
table.switch-table td:nth-of-type(6),
table.switch-table td:nth-of-type(7),
table.switch-table th:nth-of-type(4),
table.switch-table th:nth-of-type(5),
table.switch-table th:nth-of-type(6),
table.switch-table th:nth-of-type(7),
table.switchport-table th:nth-of-type(1),
table.switchport-table th:nth-of-type(5),
table.switchport-table th:nth-of-type(6),
table.switchport-table td:nth-of-type(1),
table.switchport-table td:nth-of-type(5),
table.switchport-table td:nth-of-type(6),
table.pop-table td:nth-of-type(1),
table.pop-table th:nth-of-type(1),
table.pop-table td:nth-of-type(3),
table.pop-table th:nth-of-type(3) {

    display: none;
}

.table-responsive {
    padding-right: 10px;
}



}

table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;

} 

td, th {
border-bottom: 1px solid #859F41;
text-align: left;
padding: 5px;
font-size: small;
}





caption {
  background-color: #859F41;
  color: whitesmoke;
  caption-side: top;
  text-align: center;
  font-weight: 900;
  font-size: x-large;
}

thead {
  background: rgb(39, 248, 7);
  color: black;
  position: sticky;
  top: 50px; /* Don't forget this, required for the stickiness */
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}

tfoot {
    background: white;
    position: sticky;
    bottom: 50px; /* Don't forget this, required for the stickiness */
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
  }


  .navbar {
      position: fixed;
      width: 100%;
      top: 0;
      z-index: 11;
  }

  /* a.link-button:link, a.link-button:visited {
    background-color: #859F41;
    color: whitesmoke;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border-radius: 10em;
  } */
  
  a.dropdown-item:hover {
    background-color: #859F41;
    color: whitesmoke;
  }
  

  .table-responsive {
    min-height: .01%;
    overflow-x: auto;
    padding-right: 10px;
}


.submit-button {
    background-color:  #859F41;
    color: whitesmoke;
    border-color: whitesmoke;
    border-radius: 15px;
}

.messages {
    margin-top: 5%;
}

.heading1 {
    color:#859F41;
    margin-top: 1em;
    margin-bottom: 1em;
}

.heading2 {
   font-weight: 800;
   font-style: italic;
}

label{
    font-weight: bolder;
    padding-left: 5px;
}

select {

 
    box-shadow: 0 0 5px #859F41;
}

input {
    

    box-shadow: 0 0 5px #859F41;
}
#submitFilter {
    display: none;
}


.filter-icon {
    color: whitesmoke;
    /* color: #859F41; */

}

button.filter-icon {
    color: whitesmoke;
    outline: none;
}

/* button:active
{
       color: whitesmoke; 
       outline: none;
       border-color: whitesmoke;
}

button:focus {
    color: whitesmoke; 
    outline: none;
    border-color: whitesmoke;
} */

.dropdown-menu label {
    display: block;
    font-size: small;
  }

  #id_switch_port option[disabled] {
    display: none;
}

.green {
    color:  #859F41;
}

.amber {
    color: orangered;
}

tr.total {
    background-color:#859F41;
    color: whitesmoke;
    font-size:larger;
    font-weight: 600;
}

div.pager {
    text-align: center; 
    margin-top: 15px;
}

div.pager span {
    display: inline-block;
    width: 1.8em;
    height: 1.8em;
    line-height: 1.8;
    text-align: center;
    cursor: pointer;
    background: #191919;
    color: #ccc;
    margin-right: 0.5em;
}

div.pager span.active {
    background: #fff;
    color:#191919;
    font-weight:bold;
    text-align:center;
}


.dropdown {
    display: block;
    float:right;
    position: relative;
    z-index: 10;
    padding-right: 10px;
    
}

.dashboard-text {
    font-weight: bolder;
    font-size: xx-large;
}

.note {
    font-size: small;
    font-style: italic;
}

h3, h1{
    text-align: center;
    font-weight: bolder;
}

.whois {
    white-space: pre;
}

#whois-output {
    background-color: lavender;
}

.list-asns {
    text-align: center;
}

.asn-table {
    font-weight: 900; 
    font-size: larger;
}

.alternative-dashboard {
    text-align: center;
}

.dashboard-border {
    border: 5px solid #859F41;
    border-radius: 30px;
    padding: 10px;
    

}

.dashboard-icon {
    height: 80px;
    width: 80px;
}

.ixpn-dashboard {
    padding-left: 100px;
}

.result {
    border-radius: 35px;
    border: 10px solid #2B5928;
    padding: 20px;
    padding-left: 20px;
    margin-bottom: 50px;
    color: black;
    font-size:large;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.centered-headding {
    text-align: center;
}

#get-l3-status-ipv4, #get-bgp-status-ipv4, #get-prefixes-ipv4, #fetch-logs, #get-l3-status-ipv6, #get-bgp-status-ipv6, #get-prefixes-ipv6 {
    display: none;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
    width: 50%;
}

.failed {
    color: red;
}

.passed {
    color: blue;

}

.converlay{
    float:none;
    margin:auto;
    text-align:center
  }
  
  .modalbox {
      min-width: 100%;
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: rgba(81, 51, 51, 0.5);
      z-index: 99999;
      pointer-events: auto;
      display:none;
      overflow-y:auto;
      -webkit-overflow-scrolling: touch;
  }
  .modalbox >.dialog {
      max-width: 100%;
      position: relative;
      top: 10px;
      margin: 5% 10%;
      padding: 5px 20px 13px 20px;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      border-radius: 10px;
      background: #ffffff;
      box-shadow: 0 0 10px #000000;
      -moz-box-shadow: 0 0 10px #000000;
      -webkit-box-shadow: 0 0 10px #000000;
      display: block;
      pointer-events: auto;
  }
  
  .closebutton {
      float: right;
      font-size: 21px;
      font-weight: 700;
      line-height: 1;
      color: #000;
      text-shadow: 0 1px 0 #fff;
      filter: alpha(opacity=20);
      opacity: .6;
      z-index: 9999;
    cursor:pointer
  }

.tooltip-icon {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.tooltip-icon .tooltip-text {
    visibility: hidden;
    width: 250px;
    background-color: rgba(0, 0, 0, 0.75);
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 125%; /* Position above the icon */
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip-icon:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

.chart-links {
    display: flex;
    justify-content: center; /* Centers buttons horizontally */
    gap: 20px; /* Adds space between buttons */
    margin-top: 20px; /* Adds space above the buttons */
}

.chart-links a {
    display: inline-block;
    padding: 10px 15px;
    background: #859F41;
    color: white;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: 0.3s;
}

.chart-links a:hover {
    background: #6F872F;
}


.chart-grid {
    display: flex;
    justify-content: center;
    gap: 60px; /* Increased space between charts */
    margin-bottom: 50px; /* More space between rows */
}

.chart-container {
    width: 400px;
    height: 300px;
}