:root {
  /* color coding for classes */
      --clr-cis070: #005F6A;
      --clr-cis101: #6F32C1;
      --clr-cis195: #D9822B;
      --clr-cis133: #198754;
      --clr-cis295: #B03060;
}

/* Collapsible section styling */
    .collapsible {
      background-color: var(--clr-cocc-dkgray);
      background-image: url(../img/more_vert.svg);
      background-repeat: no-repeat;
      background-position: right center;
      background-size: 32px;
      color: var(--clr-light1);
      cursor: pointer;
      padding: 18px;
      width: 100%;
      text-align: left;
      outline: none;
      font-size: 18px;
      margin: 12px 0 0 -28px;
    }

    .collapsible:hover {
      background-color: var(--clr-cocc-dkblue);
      color: var(--clr-accent1);
    }

    .content {
      padding: 20px;
      display: none;
      overflow: hidden;
      background-color: var(--clr-light1);
      
    }

/* Class Styling */
    .cisxxx, .cis70, .cis101, .cis133js, .cis195, .cis295 {
      width: calc(100% + 28px);
      border-width: 2px 2px 2px 32px;
      border-style: solid;
      border-radius: 24px 0 0 24px;
      
    }

    .cisxxx { 
      border-color: var(--clr-accent4);  
    }

      .cisxxx + .content {
        border-left: 4px solid var(--clr-accent4);
        border-bottom: 4px solid var(--clr-accent4);
      }

    .cis70 { 
      border-color: var(--clr-cis070);  
    }

      .cis70 + .content {
        border-left: 4px solid var(--clr-cis070);
        border-bottom: 4px solid var(--clr-cis070);
      }

    .cis101 { 
      border-color: var(--clr-cis101); 
    }

      .cis101 + .content {
        border-left: 4px solid var(--clr-cis101);
        border-bottom: 4px solid var(--clr-cis101);
      }

  .cis133js { 
      border-color: var(--clr-cis133); 
    }

    .cis133js + .content {
      border-left: 4px solid var(--clr-cis133);
      border-bottom: 4px solid var(--clr-cis133);
    }

    .cis195 { 
      border-color: var(--clr-cis195); 
    }

      .cis195 + .content {
        border-left: 4px solid var(--clr-cis195);
        border-bottom: 4px solid var(--clr-cis195);
      }

    .cis295 { 
      border-color: var(--clr-cis295); 
    }

      .cis295 + .content {
        border-left: 4px solid var(--clr-cis295);
        border-bottom: 4px solid var(--clr-cis295);
      }


/* Button active state */
.active {
  background-color: var(--clr-cocc-dkgray);
}