body {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   width: 100%;
}

* {
   --gray-50: #fafafa;
   --gray-100: #f5f5f5;
   --gray-200: #e5e5e5;
   --gray-300: #d4d4d4;
   --gray-400: #a3a3a3;
   --gray-500: #737373;
   --gray-600: #525252;
   --gray-700: #404040;
   --gray-800: #262626;
   --gray-900: #171717;
   --gray-950: #0a0a0a;
}

.support-container {
   display: flex;
   flex-direction: row;
   justify-content: center;
   background-color: rgb(238, 238, 240);
   width: auto !important;
   gap: 24px;
}
.support-article {
   width: 850px;
   padding-bottom: 32px;
}

.support-sidebar {
   width: 300px;
   padding: 16px 16px;
   background-color: #fafafa;
   font-size: 14px;
   display: flex;
   flex-direction: column;
   align-items: center;
}

.support-breadcrumbs {
   color: #555555;
   display: flex;
   align-items: end;
}

.support-article-top {
   padding: 0px 64px;
   padding-top: 0px;

   display: flex;
   flex-direction: column;
}

.quote.wrapper.banner {
   background-image: url("/sv4/images/quote-banner.jpg");
   padding: 16px 0 32px 0;
   background-size: cover;
   background-position: bottom center;
}

.fullpage-container {
   width: 100%;
}

.collapsible {
   cursor: pointer;
   position: relative;
   list-style-type: none;
}

.collapsible::before {
   content: '\25B6';
   position: absolute;
   left: -14px;
   font-size: 12px;
   transition: transform 0.2s ease;
}

.collapsible.active::before {
   transform: rotate(90deg);
}

.collapsible + ul {
   display: none;
   margin-left: 20px;
}

.collapsible.active + ul {
   display: block;
}

.active-page {
   color: #612774;
   font-weight: bold;
}

.popup-modal-bg {
   position: fixed;
   z-index: 100000;
   padding: 8px;
   width: 100vw;
   height: 101vh;
   background: #0a0a0a80;
   margin-top: -256px;

   transform: translate(0, 29%);
}

.popup-modal-bg.show {
   opacity: 1;
}

.popup-modal {
   width: min(500px, calc(100vw - 16px));
   background: var(--gray-100);
   border-radius: 4px;
   padding: 12px 16px 16px 16px;
   max-height: 90vh;
   overflow: scroll;

   position: absolute;
   z-index: 100;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

.popup-modal p {
   padding-top: 4px;
   padding-bottom: 12px;
   font-size: 14px;
}

.popup-modal-top {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 8px;
}

.icon-button {
   padding: 4px;
   border: none;
   background: none;
   border-radius: 4px;
   cursor: pointer;
   height: 28px;
   width: 28px;
}

.icon-button:hover {
   background: var(--gray-300);
}

.modal-open-button {
   align-self: center; 
   margin-bottom: 16px; 
   margin-top: 32px; 
   min-width: 240px;
   display: none;
}

@media screen and (max-width: 980px) {
   .support-sidebar {
      display: none;
   }

   .support-article-top {
      padding: 0px 12px;
   }

   .support-article {
      margin-left: -6px;
   }

   .modal-open-button {
      display: block;
   }

   .fullpage-container {
      zoom: 50%;
   }
}