/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */

/* Accuro: below 1200px Vuexy lays a transparent swipe strip (.drag-target: fixed, 40px wide,
   z-index 1036) down the left edge so the slide-out menu can be swiped open. Left at the top
   of the screen it sits over the header's menu button, so a tap on the button lands on the
   strip and nothing opens. Starting the strip below the header keeps the swipe and frees
   the button. */
.drag-target {
  top: 4rem;
}

/* Accuro: in that slide-out panel each menu link is a flex row, and a label longer than the
   panel ("When someone leaves", "Bookkeeping setup") squeezed its icon to zero width and ran
   past the edge. Icons keep their size; long labels wrap. Scoped to .main-menu, which only
   exists while the menu is the slide-out panel, so the desktop bar is untouched. */
.main-menu #main-menu-navigation li > a > svg {
  flex-shrink: 0;
}

.main-menu #main-menu-navigation li > a > span {
  white-space: normal;
}

/* Accuro: the portal's company switcher button. A long registered name is shortened with an
   ellipsis instead of pushing the account menu off a narrow screen. */
.company-switcher .company-switcher-name {
  display: inline-block;
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

@media (max-width: 575.98px) {
  .company-switcher .company-switcher-name {
    max-width: 7.5rem;
  }
}

/* Accuro: Vuexy's outline-primary button fills with the theme's original purple when it is
   open, hovered or pressed, behind Accuro's navy text. The company buttons use a navy tint.
   !important because Vuexy's :not(:disabled):not(.disabled):active rule outranks a class. */
.company-switcher.btn-outline-primary:hover,
.company-switcher.btn-outline-primary:focus,
.company-switcher.btn-outline-primary:active,
.show > .company-switcher.btn-outline-primary,
.company-choice.btn-outline-primary:hover,
.company-choice.btn-outline-primary:focus,
.company-choice.btn-outline-primary:active {
  background-color: rgba(7, 59, 94, 0.08) !important;
}