.c77-tab.active {
  --border-opacity: 1;
  border-color: #8ad74a;
  border-color: rgba(138, 215, 74, var(--border-opacity));
}

.c77-desktop-section {
  position: relative;
  display: block;
}

.c77-desktop-section input {
  position: absolute;
  height: 0;
  width: 0;
  opacity: 0;
}

.c77-tab.active > p,
.c77-desktop-section.active svg,
.c77-desktop-section.active {
  --text-opacity: 1;
  color: #0071ba;
  color: rgba(0, 113, 186, var(--text-opacity));
}

.c77-desktop-section.active .c77-section-arrow {
  display: none;
}

.c77-desktop-section::before {
  display: inline-block;
  --bg-opacity: 1;
  background-color: #8ad74a;
  background-color: rgba(138, 215, 74, var(--bg-opacity));
  margin-right: 0;
  width: 0;
  height: 0.25rem;
  margin-bottom: 0.25rem;
  content: '';
  transition: 0.2s ease-in-out all;
  -moz-transition: 0.2s ease-in-out all;
  -webkit-transition: 0.2s ease-in-out all;
}

.c77-desktop-section:not(.active):hover::before {
  --bg-opacity: 1;
  background-color: #cccccc;
  background-color: rgba(204, 204, 204, var(--bg-opacity));
  margin-right: 1rem;
  width: .5rem;
  transition: 0.2s ease-in-out all;
  -moz-transition: 0.2s ease-in-out all;
  -webkit-transition: 0.2s ease-in-out all;
}

.c77-desktop-section.active::before {
  --bg-opacity: 1;
  background-color: #8ad74a;
  background-color: rgba(138, 215, 74, var(--bg-opacity));
  width: 4rem;
  transition: 0.2s ease-in-out all;
  -moz-transition: 0.2s ease-in-out all;
  -webkit-transition: 0.2s ease-in-out all;
}

.c77-desktop-section.active .c77-category-arrow {
  display: none;
}

.c77-mobile-tab-container {
  white-space: nowrap;
  flex-wrap: nowrap;
  max-width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overflow: -moz-scrollbars-none;
  -ms-overflow-style: none;
}

.c77-mobile-tab-container::-webkit-scrollbar {
  width: 0 !important
}

.c77-mobile-tab {
  display: inline-block;
  border-bottom-width: 4px;
  --border-opacity: 1;
  border-color: #e7e7e7;
  border-color: rgba(231, 231, 231, var(--border-opacity));
  position: relative;
  min-width: 136px;
}

@media (min-width: 768px) {
  .c77-mobile-tab {
    width: 20%;
  }
}

.c77-mobile-tab:focus {
  outline: none;
}

.c77-mobile-tab:not(:last-child)::after {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 1px;
  background-color: #d8d8d8;
  content: ''
}

.c77-mobile-tab.active {
  --border-opacity: 1;
  border-color: #8ad74a;
  border-color: rgba(138, 215, 74, var(--border-opacity));
}

.c77-mobile-tab.active p {
  --text-opacity: 1;
  color: #0071ba;
  color: rgba(0, 113, 186, var(--text-opacity));
}

@media (min-width: 1026px) {
  .c77-article-preview:hover .c77-article-preview-body::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    --bg-opacity: 1;
    background-color: #ffcc5b;
    background-color: rgba(255, 204, 91, var(--bg-opacity));
    height: 4px;
    content: '';
  }

  .c77-article-preview:hover .c77-preview-arrow {
    --text-opacity: 1;
    color: #404040;
    color: rgba(64, 64, 64, var(--text-opacity));
    --bg-opacity: 1;
    background-color: #ffcc5b;
    background-color: rgba(255, 204, 91, var(--bg-opacity));
  }
}