/*
  custom styles
*/
#__nuxt {
  height: 100%;
  width: 100%;
}

#__layout {
  height: 100%;
  width: 100%;
}

.w-button:hover {
    background-color: white !important;
    color: #414241 !important;
}

.navlinkblock.clients:hover {
    background-color: #A1B07F;
}

.navlinkblock.assignments:hover {
    background-color: #6FACAF;
}

.navlinkblock.stops:hover {
    background-color: #E6843F;
}

.navlinkblock.calculation:hover {
    background-color: #C53D4F;
}

.navlinkblock.data:hover {
    background-color: #2FA2CF;
}

.rotate {
  transition: transform .2s ease-in-out;
  transform: rotate(0deg);
}

.navlinkblock:hover .rotate {
  transition: transform .2s ease-in-out;
  transform: rotate(90deg);
}

.mx-datepicker {
  width: 100% !important;
  height: 38px;
}

  /*
     * tooltip stuff
     */
     .tooltip {
      display: block !important;
      z-index: 100000000;
    }
    
    .tooltip .tooltip-inner {
      background: black;
      color: white;
      border-radius: 16px;
      padding: 5px 10px 4px;
    }
    
    .tooltip .tooltip-arrow {
      width: 0;
      height: 0;
      border-style: solid;
      position: absolute;
      margin: 5px;
      border-color: black;
      z-index: 1;
    }
    
    .tooltip[x-placement^='top'] {
      margin-bottom: 5px;
    }
    
    .tooltip[x-placement^='top'] .tooltip-arrow {
      border-width: 5px 5px 0 5px;
      border-left-color: transparent !important;
      border-right-color: transparent !important;
      border-bottom-color: transparent !important;
      bottom: -5px;
      left: calc(50% - 5px);
      margin-top: 0;
      margin-bottom: 0;
    }
    
    .tooltip[x-placement^='bottom'] {
      margin-top: 5px;
    }
    
    .tooltip[x-placement^='bottom'] .tooltip-arrow {
      border-width: 0 5px 5px 5px;
      border-left-color: transparent !important;
      border-right-color: transparent !important;
      border-top-color: transparent !important;
      top: -5px;
      left: calc(50% - 5px);
      margin-top: 0;
      margin-bottom: 0;
    }
    
    .tooltip[x-placement^='right'] {
      margin-left: 5px;
    }
    
    .tooltip[x-placement^='right'] .tooltip-arrow {
      border-width: 5px 5px 5px 0;
      border-left-color: transparent !important;
      border-top-color: transparent !important;
      border-bottom-color: transparent !important;
      left: -5px;
      top: calc(50% - 5px);
      margin-left: 0;
      margin-right: 0;
    }
    
    .tooltip[x-placement^='left'] {
      margin-right: 5px;
    }
    
    .tooltip[x-placement^='left'] .tooltip-arrow {
      border-width: 5px 0 5px 5px;
      border-top-color: transparent !important;
      border-right-color: transparent !important;
      border-bottom-color: transparent !important;
      right: -5px;
      top: calc(50% - 5px);
      margin-left: 0;
      margin-right: 0;
    }
    
    .tooltip.popover .popover-inner {
      background: #f9f9f9;
      color: black;
      padding: 24px;
      border-radius: 5px;
      box-shadow: 0 5px 30px rgba(black, 0.1);
    }
    
    .tooltip.popover .popover-arrow {
      border-color: #f9f9f9;
    }
    
    .tooltip[aria-hidden='true'] {
      visibility: hidden;
      opacity: 0;
      transition: opacity 0.15s, visibility 0.15s;
    }
    
    .tooltip[aria-hidden='false'] {
      visibility: visible;
      opacity: 1;
      transition: opacity 0.15s;
    }