/*********** HR EXCHANGE NETWORK TABLE OF CONTENTS
- Global
- Header
- Category
- Category Detail
- Content Hub
- Events
- All access
- Footer
- Slideout Sidebar
***********/
.hr-channel {
    font-family: Raleway, sans-serif;
    font-weight: 400;
    font-size:.875rem;
    line-height:1.6;
    color:#212529;
    background-color: #ffffff;
}

.hr-channel .channel-header {
  padding-top:5em;
}

.hr-channel .channel-header.no-padding {
    padding-top: 0;
}

.hr-channel h1.article-h1  {
    font-family: Raleway, sans-serif;
    font-weight:600;
    line-height:1.2;
    margin-top:0;
    letter-spacing:-1px;
}
.hr-channel h2.article-h1-subtitle {
    font-weight: 500 !important;
    color: #060000;
    line-height: 1.2;
}

.hr-channel .channel-nav-logo-container .channel-logo-subtitle {
    font-size:.65em;
    color:#6f6b6b;
    line-height: 1.5;
}

.hr-channel a:not(.btn):not(p a):not(ul li.nav-item a):not(ol li a):not(.user-journey a) {
    color: #37c0c9;
}

.hr-channel ul.dropdown-menu li a:hover, .user-journey a:not(:first-child):hover, .user-journey .dropdown-item:hover {
    background-color: #37c0c9;
    color: #ffffff;
}

.hr-channel p, .hr-channel li:not(#slideout_sidebar li a) {
    font-size: 1.1em;
    color:#000000;
}

.hr-channel .comments-title h2 {
    font-size:1.2rem;
}

/*** HR EXCHANGE NETWORK STYLING - Header ***/
.hr-channel .channel-navbar {
    background-color: #ebf9f9;
}

.hr-channel .channel-navbar a {
    color: #b4b7ba;
}

.hr-channel .channel-navbar span {
    color: #6f6b6b;
}

.hr-channel .channel-nav-links,
.hr-channel .all-access-cards h4 a {
    color: #37c0c9;
}

.hr-channel .channel-nav-links.active,
.hr-channel .channel-nav-links:hover {
    color: #9a9b9c;
}

.hr-channel .nav-primary-btn {
    background-color: #37c0c9;
    color: white !important;
    border-radius: .25rem;
    border-color: #37c0c9;
}
.hr-channel .nav-primary-btn:hover {
    background-color: #2d8e95;
    color: white;
    border-color: #2ea4ab;
}

.hr-channel .nav-secondary-btn {
    background-color: transparent;
    border-radius: .2rem;
    border-color: #f8f9fa;
}
.hr-channel .nav-secondary-btn:hover {
    background-color: white;
    color: #9a9b9c;
}

.hr-channel .sub-nav-categories a {
    color: #37c0c9;
}

.hr-channel .sub-nav-categories a:hover:not(.mobile-inner-sub-nav-categories-container a.btn.btn-primary:hover) {
    background-color: #37c0c9;
    color: white;
}

/***  Button style ***/
.hr-channel .btn {
  display: inline-block;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  border: 1px solid transparent;
  padding: .375rem .75rem;
  font-size: .875rem;
  line-height: 1.6;
  border-radius: .25rem;
  transition: color .15s ease-in-out,
              background-color .15s ease-in-out,
              border-color .15s ease-in-out,
              box-shadow .15s ease-in-out;
}
.hr-channel .sub-nav-inner-categories-link-container a {
    width: 100%;
    padding: 6px 12px;
    font-size: .875rem;
    border: 1px #37c0c9 solid;
    margin-top: 8px;
    text-align: center;
    font-weight:600;
} 
.hr-channel .sub-nav-inner-categories-link-container a:hover {
    background-color: #37c0c9;
    color: #ffffff;
}

.hr-channel .mobile-inner-sub-nav-categories-container a.btn.btn-primary:active {
    background-color: transparent;
}

/*** HR EXCHANGE NETWORK STYLING - Category ***/
.hr-channel .category-cards h4 {
    color: #37c0c9;
}

.hr-channel .category-cards {
    border-color: #37c0c9;
}

.hr-channel .two-column-container .time-author a {
    color: #37c0c9;
}

.hr-channel .category-cards-container .secondary-btn {
    border-color: #37c0c9;
    color: #37c0c9;
}
.hr-channel .category-cards-container .secondary-btn:hover {
    background-color: #2d8e95;
    color: white;
}


/*** HR EXCHANGE NETWORK STYLING - Category Detail ***/
.hr-channel .webinars-title-intro h1,
.hr-channel .speaker-name {
    color: #37c0c9;
}

.hr-channel .webinars-title-intro h2 {
    color: #37c0c9;
    font-weight: 500;
}

.hr-channel .webinars-container .primary-btn {
    background-color: #17a2b8;
}

.hr-channel .icon-text-container i, .hr-channel .icon-text-container p {
    color: #37c0c9;
}
.hr-channel blockquote {
    border-left: 5px solid #eeeeee;
    padding:10px 20px;
}


/*** HR EXCHANGE NETWORK STYLING - Events ***/
.hr-channel h1,
.hr-channel h4 a {
    color: #37c0c9;
}

.hr-channel .event-btn-container .btn-secondary {
    border: 1px #37c0c9 solid;
    color: #37c0c9;
}
.hr-channel .event-btn-container .btn-secondary:hover {
    border: 1px #37c0c9 solid;
    background-color: #37c0c9;
    color: white;
}


/*** HR EXCHANGE NETWORK STYLING - Content hub ***/
.hr-channel h1,
.hr-channel .content-cards .time-author a {
    color: #37c0c9;
}

.hr-channel .content-cards h4 {
    color: #37c0c9;
}

.hr-channel .content-cards .btn-primary {
    background-color: #37c0c9;
    border-color: #37c0c9;
}

.hr-channel .content-cards {
    border-bottom: 1px #37c0c9 solid;
}


/*** HR EXCHANGE NETWORK STYLING - All access ***/
.hr-channel .all-access-btn {
    background-color: #37c0c9;
}

.hr-channel .all-access-container .btn-secondary,
.hr-channel .secondary-btn {
    border: 1px #37c0c9 solid;
    color: #37c0c9;
}



/*** HR EXCHANGE NETWORK STYLING - Footer ***/
.hr-channel .footer-container .footer-column h3 {
    border-color: #37c0c9;
} 

.hr-channel .footer-container .footer-column .footer-brand-link {
    color: #37c0c9;
}

/*** HR EXCHANGE NETWORK STYLING - Inline ads ***/
.hr-channel .text-hr-primary {
    color: #37c0c9;
}
.hr-channel .media {
  display: flex;
  align-items: flex-start;
}

.hr-channel .card .media-body a {
    float: none;
    width:auto;
    background-color: #37c0c9;
    color: #212529;
    border-radius: .25rem;
    border-color: #37c0c9;
    &:hover {
        color: #ffffff;
        background-color: #2ea4ab;
        border-color: #2c9aa1;
    }
}

.hr-channel .card .media-body h4 {
    display: block;
    width: 100%;
    float: none;
    font-size: 1.2em;
    font-weight: 700;
}


.hr-channel .media img {
  flex-shrink: 0; 
  margin-right: 1rem; 
}

.hr-channel .media-body {
  flex: 1;
}

.hr-channel .shadow-effect {
    position: relative;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .1), 0 0 4px rgba(0, 0, 0, .1) inset;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .1), inset 0 0 4px rgba(0, 0, 0, .1);
}

.hr-channel .shadow-effect:after, .hr-channel .shadow-effect:before {
    content: "";
    position: absolute;
    z-index: -1;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .5);
    box-shadow: 0 0 10px rgba(0, 0, 0, .5);
    top: 50%;
    bottom: 0;
    left: 10px;
    right: 10px;
    border-radius: 100px / 10px;
}

.hr-channel .mobile-inner-sub-nav-categories-container a.btn-primary:first-child {
    color: #343a40;
}

.hr-channel .mobile-inner-sub-nav-categories-container a.btn-primary:not(first-child) {
    color: #343a40;
}

.hr-channel .carousel-item a {
    color: #37c0c9;
}

.hr-channel .list-group-item-action:focus, .hr-channel .list-group-item-action:hover {
    z-index: 1;
    color: #495057;
    text-decoration: none;
    background-color: #f8f9fa;
}

/*** HR Exchange Network Slideout Sidebar Styles  ***/

.hr-channel #slideout_sidebar {
  min-width: 300px;
  max-width: 300px;
  transition: all 0.3s;
  margin-left: -550px;
  top: 0;
  left: 0;
  z-index: 1050;
  overflow-y: scroll;
  height: 100vh;
  font-size: .812rem;  
  background-color: #ebf9f9;
    .collapse.show a {
      color: #222;
      font-weight: 300;
    }
  &.active {
    margin-left: 0;
    top: 0;
    height: 100vh;
  }
  a[data-toggle="collapse"] {
    background: #37c0c9;
    position:relative;
  }

  ul.components {
    padding: 0;
    border-bottom: 1px solid #fff;
  }

  ul li a {
    color: #fff;
    background-color: #f3f4f5;
    border-bottom: 1px solid #bcc1c6;
    padding: 10px;
    display: block;
    text-decoration: none;
    font-weight: 600;
  }

  .dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    content: "";
  }

  .list-unstyled li a {
    color: #fff;
    font-weight: 300;
    &:hover {
      
    background: #37c0c9;
    color: #f8f9fa;
    }
  }

  .collapse.show a {
    color: #222;
    font-weight: 600;
  }

  .list-unstyled .list-unstyled li a {
    color: #fff;
  }

  .account,
  .no-dd {
    font-weight: 600;
  }
}
.hr-channel #slideout_sidebar .list-unstyled.components .account a, 
.hr-channel #slideout_sidebar .list-unstyled.components .no-dd a, 
.hr-channel #slideout_sidebar .list-unstyled.components [data-toggle=collapse] {
    background: #37c0c9;
}

.hr-channel #slideout_sidebar .dropdown-toggle:after {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    content: ""
}

.hr-channel li.account {
  margin-bottom: .5em;
}

.hr-channel #sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(3px); 
  background-color: rgba(0,0,0,0.3); 
  z-index: 1040; /* less than sidebar */
  display: none;
}

.hr-channel #sidebar-overlay.active {
  display: block;
}

.hr-channel #slideout_sidebar .sidebar-header {
  border-bottom: 1px solid rgba(0,0,0,0.1);
}

/***  Slideout Sidebar Close Button ***/
.hr-channel #slideout_sidebar .sidebar-header img {
  max-height: 40px;
}

.hr-channel #sidebarClose {
  color:#37c0c9;
}

.hr-channel a:focus,
a:focus-visible {
  outline: none;
}

.dropdown-menu-left, .dropdown-menu-left.show {
    left:-110px;
    right: auto;
}