/* ==========================================================================
   05_NAVIGATION: INTERNAL
   --------------------------------------------------------------------------
   * README

   * BREADCRUMBS
   * TABS
   * PAGINATION
   * SORT
   ========================================================================== */

/* README
   ========================================================================== */

/*!
 * Styles on this stylesheet are the Internal Navigation default styles.
 * That means they apply to different HTML components you can use to browse
 * the site internally, and therefore, they apply only to the pages that display
 * one or more of these components.

 * At the moment we have not had to deal with any exception to these Internal
 * Navigation default styles, but if it becomes necessary, let's talk about it
 * and find a way to incorporate the given exception to these Internal Navigation
 * default styles, as they should be able to cover any possible use without
 * exceptions.
 */

/* BREADCRUMBS
   ========================================================================== */

/* HTML Snippet
   --------------------------------------------------------------------------
   To be used as the first element in the content of a given page, before any
   .cols, .section or .aside elements.
   --------------------------------------------------------------------------

    {% block section %}
        <div class="breadcrumbs">
            <a class="breadcrumbs__item" href="X">X</a>

            &gt; <a class="breadcrumbs__item" href="X">X</a>

            &gt; <span>X</span>
        </div>

        ...

    {% endblock %}

   -------------------------------------------------------------------------- */

/* Structure
   -------------------------------------------------------------------------- */
.breadcrumbs {
    margin-bottom: 10px;
}

/* Appearance
   -------------------------------------------------------------------------- */
.breadcrumbs {
    font-size: 15px;
}

.breadcrumbs__item {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: transparent;
    color: #007481; /* var(--color--site) in an IE free world - use this comment as a handler for smart find & replace! */
}

.breadcrumbs__item:hover {
    border-color: inherit;
}

@media all and (max-width:768px) {
    .breadcrumbs {
        margin-bottom: 0px;
    }
}

/* TABS
   ========================================================================== */

/* HTML Snippet
   --------------------------------------------------------------------------
   To be used as an alternate content for the .section__header element
   in a given page, as semantically the .tabs__item--active works as a
   .section__header__text__title element.
   --------------------------------------------------------------------------

    <div class="section__header">
        <div class="tabs clearfix">
            <h2 class="tabs__item tabs__item--active">X</h2>
            <a class="tabs__item" href="X">X</a>
            <a class="tabs__item" href="X">X</a>
            <span class="tabs__extra">
                <a class="link" href="X">X</a>
                <a class="link" href="X">X</a>
            </span>
        </div>
    </div>

   -------------------------------------------------------------------------- */

/* Structure
   -------------------------------------------------------------------------- */
.tabs__item {
    float: left;
    margin-bottom: -1px;
    padding: 18px 20px;
}

.tabs__item+.tabs__item {
    margin-left: 8px;
}

.tabs__extra {
    float: right;
    margin-bottom: -1px;
    padding: 18px 20px;
}

/* Behaviour
   -------------------------------------------------------------------------- */
.tabs {
    display: block !important;
}

/* Appearance
   -------------------------------------------------------------------------- */
.tabs {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #dbdbdb; /* var(--color--borders) in an IE free world - use this comment as a handler for smart find & replace! */
}

.tabs__item {
    border-radius: 4px 4px 0 0;
    border-width: 1px;
    border-style: solid;
    border-left-color: #dbdbdb; /* var(--color--borders) in an IE free world - use this comment as a handler for smart find & replace! */
    border-top-color: #dbdbdb; /* var(--color--borders) in an IE free world - use this comment as a handler for smart find & replace! */
    border-right-color: #dbdbdb; /* var(--color--borders) in an IE free world - use this comment as a handler for smart find & replace! */
    font-size: 16px;
    line-height: 16px;
}

.tabs__item:not(.tabs__item--active) {
    border-bottom-color: #dbdbdb; /* var(--color--borders) in an IE free world - use this comment as a handler for smart find & replace! */
    background-color: #FAFAFA;
    color: #007481; /* var(--color--site) in an IE free world - use this comment as a handler for smart find & replace! */
    cursor: pointer;
}

.tabs__item--active {
    border-bottom-color: #FFFFFF;
    background-color: #FFFFFF;
    cursor: default;
}

.tabs__extra {
    font-size: 14px;
    color: #565656;
}

@media all and (max-width:768px) {

    /* Structure
       -------------------------------------------------------------------------- */
    .tabs__item {
        display: block;
        float: none;
        margin-bottom: 0;
        width: 100%;
        padding: 16px 0;
    }

    /* Behaviour
       -------------------------------------------------------------------------- */
    .tabs__item:not(.tabs__item--active) {
        display: none;
    }

    .tabs__extra {
        display: none;
    }

    /* Appearance
       -------------------------------------------------------------------------- */
    .tabs__item {
        border: none;
        font-size: 20px;
    }

}

/* PAGINATION
   ========================================================================== */

/* HTML Snippet
   --------------------------------------------------------------------------
   To be used on top or bottom of a table/list of results. The original
   code in paginationX.tpt includes conditionals and variables, the following is
   an example of the final rendered output.
   --------------------------------------------------------------------------

    <div class="section__content">
        <div class="pagination pagination--top clearfix">
            <span class="pagination__legend">X-X of X results</span>
            <a class="pagination__item paginationLink currentPageLink" href="X">X</a>
            <a class="pagination__item paginationLink" href="X">X</a>
        </div>

        ...

        <div class="pagination pagination--bottom clearfix">
            <span class="pagination__legend">X-X of X results</span>
            <a class="pagination__item paginationLink currentPageLink" href="X">X</a>
            <a class="pagination__item paginationLink" href="X">X</a>
        </div>
    </div>

   -------------------------------------------------------------------------- */

/* Structure
   -------------------------------------------------------------------------- */
.pagination--top {
    margin-bottom: 10px;
}

.pagination--bottom {
    margin-top: 30px;
}

.pagination__legend,
.pagination__item {
    margin-bottom: 6px;
}

.pagination__legend {
    float: left;
}

.pagination__item {
    display: inline-block;
    margin-left: 0px;
    padding: 3px 8px;
}

.pagination__filterby{
    margin-left: 10px;
}

/* Behaviour
   -------------------------------------------------------------------------- */

.pagination--bottom{
  text-align: right;
}

.pagination--top{
    text-align: left;
}

.pagination__legend,
.pagination__item {
    vertical-align: middle;
    white-space: nowrap;
}

.pagination__filterby{
    float: left;
}

.pagination--top .listControls{
  float: right;
}

/* Appearance
   -------------------------------------------------------------------------- */
.pagination {
    font-size: 14px;
}

.pagination__item {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: transparent;
    text-decoration: none;
    color: #565656;
}

.pagination__item:hover,
.pagination__item:active,
.pagination__item:visited {
    border-bottom-color: inherit;
    text-decoration: none;
    color: #565656;
}

.pagination__filterby{
    font-weight: 500;
}

.currentPageLink,
.currentPageLink:hover,
.currentPageLink:active,
.currentPageLink:visited {
    border-bottom-color: #007481;
    text-decoration: none;
    color: #fff;
    background-color: #007481;
    font-weight: 600;
}

/* SORT
   ========================================================================== */

/* Structure
   -------------------------------------------------------------------------- */
.sort {
    margin-bottom: 20px;
}

.sort__legend {
    margin-right: 20px;
}

a.sort__item + a.sort__item {
    margin-left: 20px;
}

.sort__item__icon {
    max-width: 10px;
}

th .sort__item__icon {
    margin-left: -5px;
}

/* Behaviour
   -------------------------------------------------------------------------- */
.sort__legend,
.sort__item {
    vertical-align: middle;
    white-space: nowrap;
}

/* Appearance
   -------------------------------------------------------------------------- */
.sort {
    font-size: 14px;
}

.sort__item {
    outline: 0;
    cursor: pointer;
}

.sort__item .fa-sort {
    color: #999999;
}

.sort__item .fa-sort-asc,
.sort__item .fa-sort-desc {
    color: transparent;
}

.sort__item--active {
    border-bottom-color: #007481; /* var(--color--site) in an IE free world - use this comment as a handler for smart find & replace! */
}

.sort__item:hover .fa-sort-asc,
.sort__item:focus .fa-sort-asc,
.sort__item:active .fa-sort-asc,
.sort__item--ASC .fa-sort-asc {
    color: #007481; /* var(--color--site) in an IE free world - use this comment as a handler for smart find & replace! */
}

.sort__item--ASC:hover .fa-sort-desc,
.sort__item--ASC:focus .fa-sort-desc,
.sort__item--ASC:active .fa-sort-desc,
.sort__item--DESC .fa-sort-desc {
    color: #007481; /* var(--color--site) in an IE free world - use this comment as a handler for smart find & replace! */
}

/* Reduce filter size at smallest viewports */
@media (max-width: 768px) {
    .sort .sort__legend {
        display: none;
    }
    .sort .sort__item {
        float: left;
        margin-right: 20px;
    }
}

@media (min-width: 769px) {
    a.sort__item + a.sort__item {
        margin-left: 20px;
    }
}

/* sidebar */
.grid .grid__item--aside-left {
    max-width: 250px !important;
    width: 100%;
    margin-right: 40px
}
.sidebar__menu {
    border-top: 2px solid #333;
    text-align: right;
    padding: 8px 0
}
.sidebar__menu__item--link {
    display: block;
    padding: 8px 20px;
    color: #666;
    font-size: 18px;
}
.sidebar__menu__item--link:hover {
    color: #000;
    background-color: rgba(0,0,0,.025)
}
.sidebar__menu__item--link:hover:after {
    content: '»';
    display: inline-block;
    margin-right: -13px;
    padding-left: 5px;
}
.sidebar__menu__item--link.active {
    font-weight: bold;
    color: #333;
}
.sidebar__menu__item--link.active:after {
    content: '»';
    display: inline-block;
    margin-right: -13px;
    padding-left: 5px;
}

.stay__connected--boxed {
    border-radius: 4px !important;
    text-align: center;
    padding: 20px;
    margin: 20px 0
}
.stay__connected p {
    font-weight: 600;
    padding-bottom: 10px
}
.stay__connected a.button {
    font-weight: 600;
    min-width: 150px;
}
.share__links {
    display: flex;
    align-items: center;
    justify-content: center;
}

.share__links--sidebar {
    text-align: center;
}
.share__links__item {
    display: inline-block;
    margin-right: 6px;
}

.share__links__item--link.icon--circle {
    color: #fff;
    background-color: #000;
    font-size: 18px;
    display: block;
    border-radius: 50%;
    padding: 7px 5px;
    width: 32px;
    height: 32px;
    text-align: center;
}

.share__links__item--link.icon--circle svg {
    margin: 0px;
    max-height:15px;
    vertical-align: top;
    margin-top: 2px;
}

.share__links__item--link.icon--circle:hover {
    background-color: #007481
}

.share__links__item--link.icon--circle .fa-linkedin{
    font-size:16px;
    vertical-align: top;
}

@media (max-width: 768px) {
    .grid .grid__item--aside-left {
        max-width: 100% !important;
        margin-right: 0 !important
    }

    .sidebar {
        display: flex;
    }
    .sidebar__menu {
        width: 50%;
        text-align: left;
    }
    .sidebar__extras {
        width: calc(50% - 40px);
        margin-left: 40px;
        text-align: center;
    }
}

@media (max-width: 600px) {
    .sidebar {
        display: flex;
        flex-direction: column;
    }
    .sidebar__menu,
    .sidebar__extras {
        width: 100%;
        margin: 0;
    }
    .stay__connected {
        width: auto;
        max-width: 250px;
        margin: auto;
    }
}