html, body{
  font-family: 'Montserrat', sans-serif;
}


// Animation to fade in the dropdown menus
@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

// Assigning the above animation to all dropdown menus
.dropdown-menu{
    &.show{
        -webkit-animation: fadeIn 0.3s alternate; /* Safari 4.0 - 8.0 */
         animation: fadeIn 0.3s alternate;
    }
}

// Mega Menu adjustments
.nav-item.dropdown.dropdown-mega{
    position: static;
    .dropdown-menu{
        width: 90%;
        top: auto;
        left: 5%;
    }
}

// Complete styles for main navbar toggler and hamburger menu
.navbar-toggler{
    border: none;
    padding: 0;
    outline: none;
    &:focus{
        box-shadow: none;
    }
    .hamburger-toggle{
        position: relative;
        display: inline-block;
        width: 50px;
        height: 50px;
        z-index: 11;
        float: right;
        .hamburger {
            position: absolute;
            transform: translate(-50%, -50%) rotate(0deg);
            left: 50%;
            top: 50%;
            width: 50%;
            height: 50%;
            pointer-events: none;
            span {
                width: 100%;
                height: 4px;
                position: absolute;
                background: #333;
                border-radius: 2px;
                z-index: 1;
                transition: transform 0.2s cubic-bezier(0.77,0.2,0.05,1.0), background 0.2s cubic-bezier(0.77,0.2,0.05,1.0), all 0.2s ease-in-out;
                left: 0px;
                &:first-child{
                    top: 10%;
                    transform-origin: 50% 50%;
                    transform: translate(0% -50%) !important;
                }
                &:nth-child(2){
                    top: 50%;
                    transform: translate(0,-50%);
                }
                &:last-child{
                    left: 0px;
                    top: auto;
                    bottom: 10%;
                    transform-origin: 50% 50%;
                }
            }
            &.active{
                span {
                    position: absolute;
                    margin: 0;
                    &:first-child{
                        top: 45%;
                        transform: rotate(45deg);
                    }
                    &:nth-child(2){
                        left: 50%;
                        width: 0px;
                    }
                    &:last-child{
                        top: 45%;
                        transform: rotate(-45deg);
                    }
                }
            }
        }
    }
}


.icons{
  display: inline-flex;
  margin-left: auto;
  a{
    transition: all 0.2s ease-in-out;
    padding: 0.2rem 0.4rem;
    color: #ccc !important;
    text-decoration: none;
    &:hover{
      color: white;
      text-shadow: 0 0 30px white;
    }
  }
}

.userImg{
  width:40px;
  height:40px;
}
.profile-menu {
  .dropdown-menu{
    right: 0;
    left: unset;
  }
  .fa-fw{
    margin-right: 10px;
  }
}
.toggle-change{
    &::after {
    border-top: 0;
    border-bottom: .3em solid;
    }
}

.historyMonthSelect{
  max-width:260px;
}

@media only screen and (min-width: 1090px) {

  .monthHeader{
    position: absolute;
      width: 240px;
      text-align: center;
      left: 50%;
      margin-left: -120px;
  }

}

@media only screen and (max-width: 1090px) {
  .personScheduleContainer, .dateContainer{
    width: fit-content !important;
    margin-right: 20px !important;
  }
    #table{
        overflow: scroll!important;
    }
}

.personScheduleContainer{
  width:100%;
  height:85px;
  border:1px solid #3d3d3d;
  grid-template-columns: repeat(28, 1fr);
  grid-template-rows: 1fr;
  display:grid;
}
.dateContainer{
  width:100%;
  height:18px;
  border:1px solid #3d3d3d;
  grid-template-columns: repeat(28, 1fr);
  grid-template-rows: 1fr;
  display:grid;
  border-bottom:none;
}
.dayTitle{
  text-align:center;
  line-height:16px;
  font-size:14px;
  border-right:1px solid #3d3d3d;
  min-width:38px;
}
.dayScheduleContainer{
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows: 20px 50px 13px;
  border-right:1px solid #3d3d3d;
}
.overtime, .shift{
  border-bottom:1px solid #3d3d3d;
  text-align:center;
}
.overtime.active{
  font-size:14px;
  background:#038710;
}
.shiftButton a{
  width:100%;
  height: 100%;
  background-color:#0d6efd;
  color:white;
  text-align:center;
  line-height:13px;
  font-size:11px;
  display:block;
}
.shift{
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:37px;
}
.shiftTitle{
  font-weight:bold;
  font-size:18px;
    margin-top: auto;
    cursor:help;
}
.shiftSpecial{
  font-weight:lighter;
  font-size:14px;
  cursor:help;
}
.weekend{
  background-color:#94f086;
}
.holiday{
  background-color:#f0cf81;
}
.sickleave{
  width: 100%;
    height: 100%;
    position: absolute;
    background: rgba(112, 125, 212,.85);
    display: flex;
    align-content: center;
    justify-content: center;
    font-size: 28px;
    z-index: 10;
}
.fdp{
  margin-left:30px;
}
.hourDiffOvertime{
  font-weight:bold;
  color: #038710;
  line-height:38px;
}
.checkStatus{
  font-size:18px;
}