/*-- -------------------------- -->
<---           Table            -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  a {
    text-decoration: none;
  }
  .table-2 {
    margin-top: 2rem;
  }
  .table-2 tr:first-child th {
    border-top-right-radius: 0.5rem;
    border-top-left-radius: 0.5rem;
  }
  .table-2 tr:last-child th {
    border-bottom-right-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
  }
  #table-1855 {
    padding: var(--sectionPadding);
    background-color: #222222;
    position: relative;
  }
  #table-1855 .cs-thead tr:first-child th:first-child {
    border-top-left-radius: 0.5rem;
  }
  #table-1855 .cs-thead tr:first-child th:last-child {
    border-top-right-radius: 0.5rem;
  }
  #table-1855 .cs-tbody tr:last-child td:first-child {
    border-bottom-left-radius: 0.5rem;
  }
  #table-1855 .cs-tbody tr:last-child td:last-child {
    border-bottom-right-radius: 0.5rem;
  }
  #table-1855 .cs-container {
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
    position: relative;
  }
  #table-1855 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }
  #table-1855 .cs-title {
    margin: 0 0 0;
    color: var(--bodyTextColorWhite);
    display: flex;
    align-items: start;
    flex-shrink: 0;
  }
  #table-1855 .cs-button-group {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  #table-1855 .cs-button {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2em;
    /* 8px - 16px vertical */
    /* 24px - 32px horizontal */
    padding: clamp(0.5rem, 3vw, 1rem) clamp(1.5rem, 5vw, 2rem);
    background-color: #222;
    color: var(--bodyTextColorWhite);
    border: 1px solid #767676;
    transition: background-color 0.3s, color 0.3s;
  }
  #table-1855 .cs-button:hover {
    background-color: var(--primary);
    cursor: pointer;
    color: #f7f7f7;
  }
  #table-1855 .cs-button.cs-active {
    background-color: var(--primary);
    color: #f7f7f7;
  }
  #table-1855 .cs-table-wrapper {
    width: 100%;
    overflow-x: auto;
    transition: transform 0.7s, opacity 0.3s, visibility 0.5s, top 0.3s, left 0.3s;
    /* makes the transform scaling origin the top left corner, dictates the direction by which the scale transforms animate towards */
    transform-origin: left top;
    transform: scaleY(1);
  }
  #table-1855 .cs-table-wrapper.cs-hidden {
    /* prevents the mouse from interacting with it */
    pointer-events: none;
    /* hidden tables have a 0 opacity, and we animate the opacity to 1 when they become active */
    opacity: 0;
    /* by using visibility:hidden instead of display:none, we can see the animations from the opacity and transforms, display:none won't render animations. */
    visibility: hidden;
    position: absolute;
    /* this top and left value help control the animation, by setting it to position absolute and left 0, the table won't fly off screen to the left, it will stop its position to be at the left edge of the .cs-container (left: 0). Same for the bottom:0 value, the table won't go past that position when it animates */
    bottom: 0;
    left: 0;
    /* prevents the hidden tables from overflowing the section, and makes a nice animations to transition to and from */
    transform: scaleY(0);
  }
  #table-1855 .cs-table-wrapper.cs-hidden .cs-table {
    opacity: 0;
    /* when table is hidden, add these styles to the cs-image to animate from when cs-hidden is removed from the .cs-table */
    transform: translateY(2.1875rem);
  }
  #table-1855 .cs-table {
    width: 100%;
    /* removes the default space between table cells that normally exists */
    border-collapse: separate;
    border-spacing: 0;
  }
  #table-1855 .cs-thead,
  #table-1855 .cs-tbody {
    width: 100%;
  }
  #table-1855 .cs-th,
  #table-1855 .cs-td {
    font-size: 1rem;
    line-height: 1.2em;
    text-align: center;
    /* 80px - 120px */
    min-width: clamp(5rem, 16vw, 7.5rem);
    padding: 1rem 1.25rem;
    color: var(--bodyTextColorWhite);
    border: 1px solid #767676;
  }
  #table-1855 .cs-background {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
}