/*
 Put your custom overlay styles in here
 You can use your northpass color palette in this file

#ffffff
#ae29c7
#22aeee
#ffffff
#22aeee
#0a0d27
*/

/* ============================================
   BATCH 1: SUB NAVIGATION + TRAINING SESSION DATE
   Safe files with no conflicts
   ============================================ */

/* Sidebar wrapper - make sidebar grow with page */
.sidebar-wrapper-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: visible !important;
}

/* ============================================
   NAVIGATION - SUB NAVIGATION
   ============================================ */
.np-sub-navigation {
  margin-bottom: 0;
  padding: 0;
  background: transparent;
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}

.np-sub-navigation .np-sub-navigation-content {
  overflow: visible !important;
  max-height: none !important;
}

.np-collapse-button {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  position: relative;
}

.np-collapse-button-icon {
  width: 30px;
  height: 30px;
  position: relative;
  cursor: pointer;
}

.np-collapse-button-icon i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  color: #42B6F4;
}

.np-collapse-button-icon i.fa-arrow-down-to-line {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

.np-collapse-button-icon i.fa-arrow-down-from-line {
  transform: translate(-50%, -50%) rotate(-90deg);
}

.body-section-sidebar.sidebar-active .np-collapse-button-icon i.fa-arrow-down-to-line {
  opacity: 1;
}

.body-section-sidebar.sidebar-active .np-collapse-button-icon i.fa-arrow-down-from-line {
  opacity: 0;
}

.np-sub-navigation-content {
  flex-direction: column;
}

.np-sub-navigation-content-item {
  position: relative;
  background-color: transparent;
  border-radius: 4px;
  color: white;
  opacity: .6;
  transition: background-color ease .25s, opacity ease .25s;
  font-family: 'Montserrat', sans-serif;
  margin: 0;
}

.np-sub-navigation-content-item:not(:last-child) {
  margin-bottom: 14px;
}

.np-sub-navigation-content-item.np-sub-navigation-content-item-active,
.np-sub-navigation-content-item:hover {
  background-color: #262D6C;
  opacity: 1;
}

.np-sub-navigation-content-item-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 19px 17px;
  height: auto;
  position: relative;
  color: inherit !important;
  font-size: 16px;
  font-weight: 500 !important;
  min-height: 39px;
  text-align: left;
  transition: font-size ease .25s;
}

.np-sub-navigation-content-item-link i {
  padding-bottom: 0;
  display: block;
  color: #42B6F4 !important;
  width: 17px;
  font-size: 15px;
  margin-right: 16px;
}

.np-sub-navigation-content-item-bar {
  margin: 0;
  display: none !important;
}

/* ============================================
   TRAINING SESSION DATE LABEL
   ============================================ */
.np-card-training-session-date-label {
  border-radius: 6px;
  background: #0C1BD0;
  color: #FFF;
  padding: 15px;
  height: 100%;
  align-item: center;
}

.np-card-training-session-date-day {
  color: #FFF;
}

.np-card-training-session-date-month {
  color: #FFF;
}

.np-card-training-session-date-year {
  color: #FFF;
  line-height: 1.5;
}

/* ============================================
   MEDIA QUERIES - MEDIUM MOBILE/TABLET (max 989px)
   ============================================ */
@media only screen and (max-width: 989px) {
  .body-section-sidebar:not(.sidebar-active) .np-sub-navigation-content-item .np-sub-navigation-content-item-link {
    font-size: 0;
  }
  
  .body-section-sidebar:not(.sidebar-active) .np-sub-navigation-content-item .np-sub-navigation-content-item-link i {
    margin-right: 0;
  }
  
  .body-section-sidebar .body-section-sidebar-inner {
    padding: 5px;
  }
  
  .body-section-sidebar .np-sub-navigation-content-item .np-sub-navigation-content-item-link {
    padding: 10px;
  }
}