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

{{ color_palette.button_font_color }}
{{ color_palette.button_color }}
{{ color_palette.button_hover_color }}
{{ color_palette.header_font_color }}
{{ color_palette.header_font_hover_color }}
{{ color_palette.header_color }}
*/

body, html {
  font-family: 'Lato', 'Roboto', sans-serif;
  background: #fff;
  color: #0d0d0d;
}

.np-footer,
.np-footer+.np-powered-by,
.np-powered-by {
  background-color:#dee0e3;
}

.np-footer-logo-image {
    height: 30px;
    filter: none;
    opacity: 100;
}


.np-dashboard,
.np-learning-paths {
  background: #fff;
}

.np-card-container {
  box-shadow: 0 0 4px 0 #b6bbc2;
  border-radius:3px;
}

.np-button {
  font-size: 15px;
  line-height: 24px;
  border-radius:3px;
  transition:all 0.2s;
}

.np-button:hover {
  background-color: rgba(12, 169, 65, 0.8);
}

.np-card-ribbon {
  background: #126666;
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 11px;
  line-height: 16px;
}

.slick-track {
  margin-left:0!important;
  display:flex!important;
}

.slick-list {
  margin: 0 -12px!important;
}

.slick-slide {
  height: inherit !important;
  margin: 0 12px;
}

.slick-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 32px;
  cursor:pointer;
}

.slick-arrow.slick-disabled {
  opacity:0.3;
  cursor:text;
}

.slick-arrow.fa-chevron-left {
  left:-24px;
}

.slick-arrow.fa-chevron-right {
  right:-24px;
}

@media (min-width:768px) {

  .slick-slide,
  .slick-list {
    margin: 0!important;
  }
}