.vertical-tabs {
   display: flex;
}

.vertical-tabs .titles {
   width: 300px;
   font-weight: 600;
   text-align: right;
   padding: 10px 0;
   position: relative;
   /* align-self: flex-start; */
}

.vertical-tabs .titles .title {
   padding: 12px 50px 12px 20px;
}

.vertical-tabs .titles .title.active {
   color: var(--nav-color-hover);
}

.vertical-tabs .active-arrow {
   width: 26px;
   height: 26px;
   background: var(--icon-bgk-color);
   border-radius: 50%;
   position: absolute;
   right: -14px;
   top: 23px;
   color: #fff;
   text-align: center;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 12px;
   transition: top 0.25s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

.vertical-tabs .active-arrow:before {
   content: "\e903";
   font-family: 'serviceos' !important;
   transform: rotate(270deg);
   transform-origin: center;
   line-height: 1;
}


.vertical-tabs .titles .title:hover {
   cursor: pointer;
}

.vertical-tabs .contents {
   width: calc(100% - 300px);
   padding: 30px 30px 50px;
   background: #fff;
   border-radius: 3px;
}

.vertical-tabs .contents .content p,
.vertical-tabs .contents .content ul {
   margin-bottom: 30px;
}

.vertical-tabs .contents .content > *:last-child {
   margin-bottom: 0;
}

.vertical-tabs .contents .content {
   display: none;
}

.vertical-tabs .contents .content.active {
   display: block;
}

.section--dark-blue .vertical-tabs .titles {
   background-color: var(--dark-blue--section-background);
}

.section--main-blue .vertical-tabs .titles {
   background-color: var(--main-blue--section-background);
}

.section--white .vertical-tabs .titles {
   background-color: #fff;
}

.section--dark-blue .vertical-tabs .contents h2,
.section--dark-blue .vertical-tabs .contents h3,
.section--dark-blue .vertical-tabs .contents h4,
.section--dark-blue .vertical-tabs .contents h5,
.section--main-blue .vertical-tabs .contents h2,
.section--main-blue .vertical-tabs .contents h3,
.section--main-blue .vertical-tabs .contents h4,
.section--main-blue .vertical-tabs .contents h5,
.section--dark-blue .vertical-tabs .contents,
.section--main-blue .vertical-tabs .contents  {
   color: var( --title-color)
}

.section--dark-blue .vertical-tabs .titles .title.active {
   color: #6089FF
}
.section--dark-blue .vertical-tabs .active-arrow  {
   background: #6089FF
}

.section--main-blue .vertical-tabs .titles .title.active {
   color: var(--btn-primary-bkg-color-hover)
}

.section--main-blue .vertical-tabs .active-arrow  {
   background: var(--btn-primary-bkg-color-hover)
}

.section--white .vertical-tabs .contents  {
   background: var(--light-grey--section-background);
}


@media screen and (max-width: 991px) {
   .vertical-tabs {
      flex-wrap: wrap;
      position: relative;
   }

   .vertical-tabs .active-arrow {
      display: none;
   }

   .vertical-tabs:before,
   .vertical-tabs:after {
      position: absolute;
      content: " ";
      width: 50px;
      height: 52px;
      z-index: 1;
      pointer-events: none;
      top: 0px;
   }

   .vertical-tabs:before {
      background: linear-gradient(to right, rgb(246, 248, 250), rgba(246, 248, 250, 0));
      left: -2px;
   }

   .vertical-tabs:after {
      background: linear-gradient(to left, rgb(246, 248, 250), rgba(246, 248, 250, 0));
      right: -1px;
   }

   .vertical-tabs .contents,
   .vertical-tabs .titles {
      width: 100%;
   }

   .vertical-tabs .titles {
      display: flex;
      gap: 0;
      overflow-x: scroll;
      overflow-y: hidden;
      white-space: nowrap;
      transition: all 0.2s;
      /*transform: scale(0.98);*/
      will-change: transform;
      user-select: none;
      cursor: pointer;
      padding: 0;
   }

   .vertical-tabs .titles::-webkit-scrollbar {
      height: 0;
   }
   .vertical-tabs .titles::-webkit-scrollbar-track {
      background: #fff;
   }
   .vertical-tabs .titles::-webkit-scrollbar-thumb {
      background: #fff;
   }

   .vertical-tabs .titles.active {
      background: rgba(255, 255, 255, 0.3);
      cursor: grabbing;
      cursor: -webkit-grabbing;
      /*transform: scale(0.99);*/
    }

   .vertical-tabs .titles .title {
      flex-shrink: 0;
      -webkit-transition: 0.2s ease-in-out 0s;
      -moz-transition   : 0.2s ease-in-out 0s;
      -o-transition     : 0.2s ease-in-out 0s;
      padding: 12px 20px 12px 20px;
    }
     
}