.info-paragraph {
  font-size: 16px;
  font-weight: 200;
  font-family: Verdana, sans-serif;
}
/* Table styling */
.resource-content {
  & table {
    border-collapse: collapse;
    width: 100%;

    &:is(.table, .hapiPropertyTable) {
      & th {
        border: 1px solid lightgray;
        padding: 0 7px;
        text-align: center;

        /* Sticky table header */
        background: #0c63e4;
        color: white;
        position: sticky;
        top: -17px;
      }

      & td {
        margin-left: 2em;
      }

      & td:first-child {
        font-weight: bold;
      }

      & thead {
        background-color: #0c63e4;
        color: white;
      }

      & tbody tr:nth-child(odd) {
        background-color: #fff;
        border: 1px solid lightgray;
      }

      & tbody tr:nth-child(even) {
        background-color: #e7f1ff;
        border: 1px solid lightgray;
      }
    }
  }
}

.accordion-item.resource-content > .accordion-collapse > .accordion-body {
  overflow: auto;
  max-height: 52rem;
}

.code {
    overflow:auto;
    margin: 0;
    padding: 10px;
}
.code-container {
    background-color: #f5f5f5;
    border-radius: 10px;
    border: 1px solid rgb(200, 200, 200);
    overflow: hidden;
}
div.offcanvas-body {
    overflow-y: hidden !important;
}

.loader {
  width: 100%;
  height: 150px;
  margin: 40px;
  display: block;
  position: relative;
  background: #FFF;
  box-sizing: border-box;
}
.loader::after {
  content: '';  
  width: calc(100% - 30px);
  height: calc(100% - 30px);
  top: 15px;
  left: 15px;
  position: absolute;
  background-image: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5) 50%, transparent 80%),
  linear-gradient(#DDD 56px, transparent 0), /* box 1 */
  linear-gradient(#DDD 24px, transparent 0), /* box 2 */
  linear-gradient(#DDD 18px, transparent 0), /* box 3 */
  linear-gradient(#DDD 66px, transparent 0); /* box 4 */
  background-repeat: no-repeat;
  background-size: 75px 130px, /* wave */
          55px 56px, /* box 1 */
          160px 30px, /* box 2 */
          220px 20px, /* box 3 */
          290px 56px; /* box 4 */
  background-position: 0% 0, /* box 1 */
            0px 0px, /* box 1 */
            70px 5px, /* box 1 */
            70px 38px, /* box 1 */
            0px 66px; /* box 1 */
  box-sizing: border-box;
  animation: animloader 1s linear infinite;
}
@keyframes -global-animloader {
  0% {
    background-position: 0% 0, 0 0, 70px 5px, 70px 38px, 0px 66px;
  }
  100% {
    background-position: 150% 0, 0 0, 70px 5px, 70px 38px, 0px 66px;
  }
}