﻿/* Styles for breadcrumbs on general full width template */

.global-breadcrumbs div {
  padding: 10px 12px;
}

a.breadcrumbs-link-style {
  color: #656A78;
  font-size: 14px;
  text-decoration: none;
}

.global-breadcrumbs span {
  font-size: 14px;
}

/* folders without homepage */

a.breadcrumbs-link-style[href="#"] {
  cursor: inherit;
}
a.breadcrumbs-link-style[href="#"]:hover,
a.breadcrumbs-link-style[href="#"]:focus {
  text-decoration: none;
  color: #656A78;
}


span.breadcrumbs-separator-style {
  color: #656A78;
  display: inline-block;
  padding: 0 4px;
}

a.breadcrumbs-link-style:hover,
a.breadcrumbs-link-style:focus,
a.breadcrumbs-link-style:active {
  text-decoration: underline;
  color: var(--globalBlue);
}

/* scrollbar on small devices (phones, 768px and less) */

.hor-scroll-wrap {
  border-top: 1px solid #CFD4D8;
}

@media (max-width: 768px) {

  .global-breadcrumbs {
    overflow-x: scroll;
  }

  .global-breadcrumbs div {
    white-space: nowrap;
  }

  /* scroll thumb styles */

  .hor-scroll-wrap ::-webkit-scrollbar {
    height: 4px;
  }

  .hor-scroll-wrap:hover ::-webkit-scrollbar-thumb {
    background:  #656A78;
  }

  .hor-scroll-wrap ::-webkit-scrollbar-thumb:hover {
    background: #10263B !important;
  }


  /* Shadows */

  .hor-scroll-wrap {
    position: relative;
  }

  .hor-scroll-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 2rem;
    background-image: linear-gradient(to left, white, rgba(255, 255, 255, 0));
    transition: all linear 0.3s;
  }

  .hor-scroll-wrap::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 2rem;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
    transition: all linear 0.3s;
  }

  .hor-scroll-wrap.scrolled-right::after {
    background-image: linear-gradient(to left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
  }

  .hor-scroll-wrap.scrolled-left::before {
    background-image: linear-gradient(to right, white, rgba(255, 255, 255, 0));
  }

}