/* Custom styles to override OneTrust's default styling */

.policyContainer,
.cookiesContainer {
  width: 100%;
  margin: 0 auto;
  /* Increased top padding to prevent the top navigation bar from covering the content */
  padding: 5rem 1rem 2rem 1rem; 
  display: flex;
  flex-direction: row;
  min-height: 100vh;
  padding-bottom: 10rem;
}

/* This is the main container that holds the menu and content */
.otnotice {
  width: 100%;
  font-family: "Roboto" !important;
  padding: 0;
  background-color: #f8f8f8 !important;
  color: #333 !important;
}

.otnotice-menu {
    position: absolute !important;
}

.otnotice-content {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding-top: 2rem !important;
}

/* New CSS to fix the tables on all devices */
.otnotice-content table {
  width: 100% !important;
  table-layout: fixed;
  word-wrap: break-word;
  word-break: break-all;
}

.otnotice-content table th,
.otnotice-content table td {
  width: auto !important;
  box-sizing: border-box;
  word-break: break-all;
}

/* Correct styles for the vertical desktop menu on privacy and cookie pages */
@media (min-width: 769px) {
  .otnotice .otnotice-content .otnotice-menu {
    flex: 0 0 25% !important;
    max-width: 25% !important;
    position: sticky !important;
    top: 2rem !important;
    height: 100% !important;
    padding-right: 2rem !important;
    background-color: #f8f8f8 !important;
    margin-left: 0 !important;
    display: block !important;
    align-self: flex-start !important;
    width: auto !important;
  }

  .otnotice .otnotice-content .otnotice-menu li {
    display: block !important;
    white-space: normal !important;
  }

  .otnotice .otnotice-content .otnotice-menu li a {
    font-size: 0.8rem;
    word-wrap: break-word;
    display: block;
    padding: 0.5rem 0;
  }
}

.otnotice .otnotice-sections {
  flex: 1 1 75%;
  max-width: 75%;
  padding-left: 2rem;
}

/* Mobile-specific styles for the notice pages and banner */
@media (max-width: 768px) {
  .otnotice table {
    display: block;
    overflow-x: auto;
  }

  .otnotice table th,
  .otnotice table td {
    width: auto !important;
    box-sizing: border-box;
    word-break: break-all;
  }
  
  .otnotice-sections {
    flex: 1 1 100%;
    max-width: 100%;
    padding: 0;
  }

  .otnotice .otnotice-content .otnotice-menu {
    display: none !important;
  }

  .otnotice .otnotice-menu-mobile {
    display: block !important;
    padding: 1rem;
    background-color: #f8f8f8 !important;
  }
}

.otnotice h2 {
  margin-top: 4rem !important;
  font-size: var(--font-size-sm) !important;
}

.otnotice a {
  color: var(--color-primary-red) !important;
  text-decoration: underline !important;
}