/* override table width restrictions */
@media screen and (min-width: 767px) {

   .wy-table-responsive table td {
      /* !important prevents the common CSS stylesheets from overriding
         this as on RTD they are loaded after this stylesheet */
      white-space: normal !important;
   }

   .wy-table-responsive {
      overflow: visible !important;
   }
}

.embed-container {
   position: relative;
   padding-bottom: 56.25%;
   height: 0;
   overflow: hidden;
   max-width: 100%;
}

.embed-container iframe, .embed-container object, .embed-container embed {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

.wy-side-nav-search {
   background: #D3D3D3;
   color: #333;
}

.wy-nav-top {
   background: #D3D3D3;
   color: #333;
}

.wy-nav-top a {
   color: #333;
}

.wy-side-nav-search .wy-dropdown > a img.logo, .wy-side-nav-search > a img.logo {
    width: 275px;
}

.wy-nav-content {
   max-width: 100% ;
   min-height: 100vh;
   position: relative;
}

.rst-content {
   max-width: 1200px;
   margin: 0 auto
}

.rst-content div.figure.align-center, .rst-content figure.align-center {
text-align: center;
}

.rst-content img, .myst-content img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

img:not(.logo,.has-border) {
  max-width: 70%;
  width: auto;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
img.has-border {
   max-width: 90%;
   width: auto;
   height: auto;
}

@media only screen and (max-width: 600px) {
  img:not(.logo,.has-border) {
    max-width: 80%;
    width: auto;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }
  img.has-border {
   max-width: 100%;
   width: auto;
   height: auto;
   }
}

iframe {
  width: 100% !important;
  aspect-ratio: 32 / 17;
  padding-left: 5%;
  padding-right: 5%;
  padding-bottom: 2%;
}

figure {
  padding-top: 30px;
}

figcaption {
  padding-top: 10px;
  padding-bottom: 30px;
}

table {
  margin-left:auto; 
  margin-right:auto;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

tr:hover {
  opacity:0.8;
}