body {
  font-family: 'Noto Sans', sans-serif;
}


.margin-fix { 
  margin-top: 65px; //margin fix for conainter as there is fixed navbar
}

/* Background */
.code-bg {
  background-image: url(/files/~34336/247958-original.png);  
  background-position: 0px;
}

.fancy-bg-gradient {
  background-color: rgba(249, 248, 252, 0.97);
  // background-color: rgba(37, 37, 37, 0.62);
  // background-image: linear-gradient(to right, rgba(67, 67, 67, 0.7803921568627451) 0%, rgba(0, 0, 0, 0.8) 100%);
}
    
/* Nav bar */
header .nav-logo svg {
    max-height: 50px;
    max-width: 50px;
}

.account-info #logging {
    display: flex;
}

/* 
  LOGO
  note: class names for cards starts with svg-card-1 (to 4), 
  use this class to apply different colours instead of all odd cards.

*/

[id^='svg-card-'] { // animals
    fill: $primary;
}

[id^='svg-card-'] use{ // all cards
    fill: $primary;
}

[id^='svg-card-']:nth-child(even) use { // even cards
    fill: $blue;
}

/* 
  svg in other sections
  note: remove the colour selectors if we want to use the same colour as main

*/

.homepage-main-content svg {
  max-height: 150px;
  max-width: 150px;
  
  [id^='svg-card-'] { // animals
    fill: $blue;
  }
  
  [id^='svg-card-'] use{ // all cards
    fill: $blue;
  }
  
  [id^='svg-card-']:nth-child(even) use { // even cards
    fill: $white;
  }
}

// to apply color in indiviudal cards
[data-card-id='34309'] {
    
}
[data-card-id='34312'] {
    
}
[data-card-id='33990'] {
    
}
[data-card-id='33993'] {
    
}
[data-card-id='34316'] {
    
}


/* Image shadows */

.drop-image-shadow-lg img { 
  box-shadow: $box-shadow-lg !important; 
}


//floatingCards

@keyframes floatLikeCloud {
        0% {
                // box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
                transform: translatey(0px);
        }
        50% {
                // box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);
                transform: translatey(-10px);
        }
        100% {
                // box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
                transform: translatey(0px);
        }
}

.floatingCard {
        width: 150px;
        height: 150px;
        box-sizing: border-box;
        overflow: hidden;
        transform: translatey(0px);
        animation: floatLikeCloud 15s ease-in-out infinite;
        animation-delay: 4s;
        img { width: 100%; height: auto; }
}

.decko-logo-animated {
  padding: 66px 6rem 0;
  width: 400px;
  text-align: center;
  height: 280px;
  margin: -30px 0;
  overflow: visible !important;
}


// sidebar 
.decko-sidebar {
  order: 0;
  // background-color: #f5f2f9;
  // border-bottom: 1px solid $border-color;

  @include media-breakpoint-up(md) {
    @supports (position: fixed) {
      position: fixed;
      z-index: 1000;
      height: calc(100vh - 4rem);
    }
    // border-right: 1px solid $border-color;
  }

  .sidebar-links {
    padding-top: 1rem;
    padding-bottom: 1rem;
    margin-right: -15px;
    @include media-breakpoint-up(md) {
      @supports (position: sticky) {
        max-height: calc(100vh - 4rem);
        overflow-y: auto;
      }
    }
  
    // Override collapse behaviors
    @include media-breakpoint-up(md) {
      display: block !important;
    }
  }
}

.sidebar-menu-button {
    margin-left: -15px;
}

//TODO: Fix on decko framework
a.external-link {
  color: $link-color !important;
  background: none !important;
  padding-right: 2px !important;
  position: relative;
}

.card-header{
  background-color: $light;
  border-bottom-color: $border-color;
  border-right: 1px solid $border-color;
  margin-right: -1px; //adujustment for border right
}