@import url(https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap);
/**
	* [Description]
	*
	* Static Variables
	* Can use SCSS variables = TRUE
	*
	* This file should not contain any styles.
	* NO COLOR VARIABLES - Those should be defined in the color_* variable files.
	*
	* [Table of Contents]
	*
	* CUSTOM-FONT
	* 	Fonts.......Import Google font
	* SITE-LEVEL
	* TYPOGRAPHY
	* SPACING
	* 	Margin
	* 	Padding
	* FIELDS
	* BUTTONS
	* MODAL
	* NOTIFICATION BLOCK
 */
/*------------------------------------*\
  #CUSTOM-FONT
  Define any Google font imports you wish to use here.
\*------------------------------------*/
/*------------------------------------*\
  #SITE-LEVEL
\*------------------------------------*/
/*------------------------------------*\
  #TYPOGRAPHY
\*------------------------------------*/
/*------------------------------------*\
  #SPACING (LAYOUT)
  Spacing variables for page layout or spacing between components.
  Any margin/padding used for specific objects (ie. buttons or
  inputs) should have a variable within the corresponding section.
\*------------------------------------*/
/******* Margins *******/
/******* Paddings *******/
/*------------------------------------*\
  #FIELDS
\*------------------------------------*/
/*------------------------------------*\
  #BUTTON
\*------------------------------------*/
/*------------------------------------*\
  #MODAL
\*------------------------------------*/
/*------------------------------------*\
  #NOTIFICATION BLOCK
\*------------------------------------*/
/*------------------------------------*\
  #TOAST
\*------------------------------------*/
/*------------------------------------*\
  #SCROLLBARS
\*------------------------------------*/
/*------------------------------------*\
  #TABLES
\*------------------------------------*/
/*------------------------------------*\
  #CARD
\*------------------------------------*/
/*------------------------------------*\
  #SECTION HEADER
\*------------------------------------*/
/*------------------------------------*\
  #ICONOGRAPHY
\*------------------------------------*/
/*------------------------------------*\
  #ULTIMATE SEARCH USE ONLY
\*------------------------------------*/
/******* Z-index Level *******/
/******* For use in Controls*******/
/******* Use inside Controls, like menus, after, before *******/
/******* Use in Page Title*******/
/******* Use in Side Menu *******/
/******* Use in Special Case *******/
/******* Use in Top Menu *******/
/******* Use in Overlays *******/
/******* Use in Modals, Flyout, Toast in portal *******/
/******* Navigation *******/
/**
    * [Description]
    * 
    * Color Functions
    * Use SCSS Variables = FALSE
    *
    * This file contains helper functions that can be used to change a color.  
    * This file should not output a single line of CSS when compiled on its own. 
    * 
    * [Table of Contents]
    *
    * COLORS
    * Function to get a slightly lighten a color
    * Function to get a slightly darken a color
    * Function to calculate color contrast and return a color value
    * Convert HEX to RGB
*/
/*------------------------------------*\
  #COLORS
\*------------------------------------*/
/******* Slightly lighten a color *******/
/******* Slightly darken a color *******/
/******* Calculate color contrast *******/
/******* Convert HEX to RGB *******/
/******* Convert HEX to RGBa *******/
/**
	* [Description]
	* 
  * Text Contrast Functions
  * Use SCSS Variables = FALSE
  *
  * This file contains helper functions that ensure that two colors have   
  * sufficient contrast and if not, a new color returns without modifying the HUE value.
  * 
  * [Table of Contents]
  *
  * PERMISSION 
  *
  * COLOR CONTRAST V1
  * Gloabl variables
  * Pow sass values
  * Function luminance 
  * Function color-contrast
  * Function to validate contrast
  * Function to get ratio
  * Function to verify if the color is light or dark
  * Function to calculate the text contrast and return a color value
  *
*/
/*------------------------------------*\
  #PERMISSION
\*------------------------------------*/
/******* Gloabl variables *******/
/******* Pow sass values *******/
/******* Luminance($color) function *******/
/******* Function color-contrast *******/
/******* Function to validate contrast *******/
/******* Function to get ratio *******/
/******* Function to verify if the color is light or dark *******/
/******* Function to verify if the color is light or dark *******/
/******* Function to calculate the text contrast and return a color value *******/
/**
	* [Description]
	* 
	* Utilities Function Index
	* Use SCSS Variables = FALSE
	*
	* This will be loaded automatically when you load the URL for the folder itself.
	* No styles are actually defined within this file, it is a config file for convenience.
	*
*/
/**
	* [Description]
	*
	* Colors
	* Can use SCSS variables = TRUE
	*
	* This file should not contain any styles. This file contains all colors
	* used across the project. It should not output a single line of CSS
	* when compiled on its own.
	*
	* [Table of Contents]
	*
	* COLOR-PALETTE
	* 	UI Colors
	* 	Secondary UI Colors
	*   Neutral Colors - Lightest to Darkest
	* 	Brand Colors
	* BACKGROUNDS-FOREGROUNDS COMBINATIONS
	* 	bg-0 (white) combinations
	* 	bg-1 (off-white) combinations
	* 	bg-2 (neutral-1) combinations
	* 	bg-brand-1 combinations
	* 	bg-brand-2 combinations
	* 	bg-brand-2-tint combinations
	* GLOBALS
	* 	Typography
	* 	Backdrop for flyouts and modals
	* 	Fields
	*   Tooltip
	*   Notification Block
	*   Shadow Color
	*   Draggable List Item
	*   Stepper
*/
/*------------------------------------*\
  #COLOR-PALETTE
\*------------------------------------*/
/******* UI Colors *******/
/******* Secondary UI Colors *******/
/******* UI Foreground Colors *******/
/******* UI Accessibility Colors *******/
/******* Brand Colors *******/
/*------------------------------------*\
  #BACKGROUNDS-FOREGROUNDS COMBINATIONS

	Use this section to set the background
	or foreground css var
\*------------------------------------*/
/*------------------------------------*\
  #BACKGROUNDS-FOREGROUNDS
\*------------------------------------*/
/******* bg-0 combinations *******/
/******* off-white combinations *******/
/******* neutral-1 combinations *******/
/******* brand-1 combinations *******/
/******* brand-2 combinations *******/
/******* brand-2-tint combinations *******/
/*------------------------------------*\
  #GLOBALS
\*------------------------------------*/
/******* Typography Colors *******/
/******* Backdrop for flyouts and modals *******/
/******* Fields *******/
/******* Tooltip *******/
/******* Notification Block *******/
/******* Shadow Color *******/
/******* Draggable List Item *******/
/******* Popover *******/
/******* Stepper *******/
/******* Overlay button *******/
/******* UI Indicator Border Colors *******/
/******* Radial Picker Colors *******/
/******* Navigation Menu Colors *******/
/******* Chat Colors *******/
/******* Page Title Color *******/
/******* Chat Colors *******/
/**
    * [Description]
    *
    * Screensize Breakpoints
    * Can use SCSS variables = FALSE
    *
    * This file should not contain any styles. The rule of thumb for files
    * in the utilities folder is that it should not output a single line
    * of CSS when compiled on its own. These are nothing but Sass helpers.
    *
    * It should contain globally defined variables used for media queries.
    *
    * [Table of Contents]
    *
    * EM
    * UNITLESS
 */
/**
  * [Description]
  *
  * Animation Mixins
  * Can use SCSS variables = TRUE
  *
  * All mixins to animate an attribute are included here.
  *
  * [Table of Contents]
  * ANIMATION
  *
  * SLIDE-FADE-TRANSITION
*/
/******* Spin *******/
/*------------------------------------*\
  #ANIMATION
\*------------------------------------*/
/*------------------------------------*\
  #SLIDE-FADE-TRANSITION
  Used with the built in vuejs transition components
\*------------------------------------*/
.slide-fade-enter-active[data-v-d9a97fa2] {
  transition: all 0.3s ease-out;
}
.slide-fade-leave-active[data-v-d9a97fa2] {
  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter-from[data-v-d9a97fa2],
.slide-fade-leave-to[data-v-d9a97fa2] {
  transform: translateX(20px);
  opacity: 0;
}

/**
  * [Description]
  * 
  * Aligment Mixins
  * Can use SCSS variables = TRUE
  *
  * All mixins to align elements are included here.
  *
  * [Table of Contents]
  *
  * Vertical and horizontal center using Flexbox
  * Vertical and horizontal center using Transform
  * Vertical center using Transform
*/
/******* Vertical and horizontal center using Flexbox *******/
/******* Vertical center using Flexbox *******/
/******* Vertical and horizontal center using Transform *******/
/******* Vertical center using Transform *******/
/**
	* [Description]
	*
	* Buttons Mixins
	* Use SCSS Variables = FALSE
	*
	* This file contains all the mixins helfull for use in the button component.
	*
	*
	* [Table of Contents]
	*
	* Button clear styles
	* Button Action Ribbon Trigger Styles
*/
/******* Button clear styles *******/
/**
	* !!!! DO NOT ADD/EDIT VARIABLES !!!!
	*
	* [Description]
	*
	* Default (Light) Mode Color CSS Variables aka Custom Properties
	* Can use SCSS variables = TRUE
	*
	* This file should not contain any styles. This file will only contain the
	* the Default mode variables. It should not output a single line of CSS
	* when compiled on its own.
	*
	* [Table of Contents]
	*
	* COLOR-PALETTE
	*  	UI Colors
	* 	Brand Colors
	* BACKGROUNDS-FOREGROUNDS COMBINATIONS
	* 	bg-0 (white) combinations
	* 	bg-1 (off-white) combinations
	* 	bg-2 (neutral-1) combinations
	* 	bg-brand-1 combinations
	* 	bg-brand-2 combinations
	* 	bg-brand-2-tint combinations
	* GLOBALS
	* 	Typography
	* 	Backdrop for flyouts and modals
	* 	Fields
	*   Tooltip
	*   Shadow
	*   Draggable List Item
	*   Popover
	*   Stepper
*/
:root [mode=light][data-v-d9a97fa2],
body.light[data-v-d9a97fa2] {
  /******* UI Colors *******/
  --ui-negative: #cf2f2d;
  --ui-negative-light: #fbefee;
  --ui-warning: #ef9855;
  --ui-warning-light: #fdf6ec;
  --ui-positive: #5cb85c;
  --ui-positive-light: #f1f9f1;
  --ui-neutral: #5bc0de;
  --ui-neutral-light: #eef8fc;
  /******* Secondary UI Colors *******/
  --ui-purple: #b367f5;
  --ui-purple-light: #f5ebfd;
  --ui-indigo: #3f33f5;
  --ui-indigo-light: #e7e5fd;
  --ui-yellow: #dbc20c;
  --ui-yellow-light: #fcf8dd;
  --ui-magenta: #db18ce;
  --ui-magenta-light: #faddf8;
  /******* UI Accessibility Colors *******/
  --ui-accessible-need: #f9f9f9;
  /******* Brand Colors *******/
  --brand-1: #ebebeb;
  --brand-2: #585554;
  --brand-2_rgb: 88, 85, 84;
  --brand-2-tint: #cbcbcb;
  /******* Neutral Colors *******/
  --neutral-0: #f9f9f9;
  --neutral-1: #ebebeb;
  --neutral-2: #cbcbcb;
  --neutral-3: #7e7e7e;
  --neutral-4: #585554;
  --neutral-5: #0d0d0d;
  /*------------------------------------*\
    #BACKGROUNDS-FOREGROUNDS
  \*------------------------------------*/
  /******* bg-0 combinations *******/
  --bg-0: #fff;
  --bg-0-fg-1: #cbcbcb;
  --bg-0-fg-2: #7e7e7e;
  --bg-0-fg-3: #585554;
  --bg-0-fg-4: #0d0d0d;
  /******* off-white combinations *******/
  --bg-1: #f9f9f9;
  --bg-1-fg-1: #cbcbcb;
  --bg-1-fg-2: #585554;
  --bg-1-fg-3: #0d0d0d;
  /******* neutral-1 combinations *******/
  --bg-2: #ebebeb;
  --bg-2-fg-1: #cbcbcb;
  --bg-2-fg-2: #585554;
  --bg-2-fg-3: #0d0d0d;
  /******* brand-1 combinations *******/
  --bg-brand-1: #ebebeb;
  --bg-brand-1-fg-1: #cbcbcb;
  --bg-brand-1-fg-2: #0d0d0d;
  /******* brand-2 combinations *******/
  --bg-brand-2: #585554;
  --bg-brand-2-fg-1: #cbcbcb;
  --bg-brand-2-fg-2: #f9f9f9;
  /******* brand-2-tint combinations *******/
  --bg-brand-2-tint: #cbcbcb;
  --bg-brand-2-tint-fg-1: #585554;
  --bg-brand-2-tint-fg-2: #0d0d0d;
  /*------------------------------------*\
    #GLOBALS
  \*------------------------------------*/
  /******* Typography Colors *******/
  --link: #0088cc;
  --link-hover: #005580;
  --link-bg-brand-1: #005580;
  --link-bg-brand-2: #f9f9f9;
  --link-bg-brand-2-tint: #005580;
  --placeholder: #7e7e7e;
  /******* Backdrop for flyouts and modals *******/
  --backdrop-bg: rgba(0, 0, 0, 0.3);
  /******* Fields *******/
  --field-bg: #fff;
  --field-fg: #0d0d0d;
  --field-fg-2: #585554;
  /******* Tooltip *******/
  --tooltip-bg: #585554;
  --tooltip-fg: #f9f9f9;
  /******* Notification Block *******/
  --notification-bg: #ebebeb;
  --notification-fg: #0d0d0d;
  --notification-border-color: #585554;
  /******* Shadow Color *******/
  --shadow-color: #0d0d0d;
  /******* Popover *******/
  --popover-bg: #fff;
  --popover-fg: #0d0d0d;
  --popover-border: #cbcbcb;
  /******* Draggable List Item *******/
  --draggable-icon-color: #009245;
  --draggable-border-color: #cbcbcb;
  /******* Stepper *******/
  --stepper-brand-color: #009245;
  --stepper-badge-color: #f9f9f9;
  /****** Overlay Button ******/
  --btn-progress-bg_rgb: 203, 203, 203;
  --btn-progress-bg: #cbcbcb;
  /******* UI Indicator Border Colors *******/
  --ui-indictor-bg-light: rgba(255, 255, 255, 0);
  /******* Radial Picker Colors *******/
  --hour-selector-bg: #136a3e;
  --border-hour-selector-hover: #136a3e;
  --minute-selector-bg: #009245;
  --border-minute-selector-hover: #009245;
  /******* Navigation Menu Colors *******/
  --menu-brand-1-selected-bg: #009245;
  --menu-brand-1-fg-3: #f9f9f9;
  --notification-brand-1-bell-fg: #f9f9f9;
  --menu-list-bg: #fff;
  --menu-list-bg-hover: #cbcbcb;
  --menu-list-bg-active: #ebebeb;
  --nav-brand-1-tint: #b3ccbf;
  --nav-brand-1-border-active: #136a3e;
  --nav-field-fg-extras: #7e7e7e;
  --nav-placeholder: #0d0d0d;
  --nav-page-title: #136a3e;
  --nav-button: #009245;
  --nav-button-hover: #136a3e;
  /******* Chat Colors *******/
  --chat-brand-1-header: #009245;
  --chat-button: #009245;
  --chat-user-msg: #B3CCBF;
  /******* Page Title Color *******/
  --page-title: #136a3e;
  /******* Chat Colors *******/
  --chat-button-hover: #136a3e;
  --chat-link: #009245;
}

/**
    * [Description]
    * 
    * Variables Index
    * Use SCSS Variables = FALSE
    *
    * This will be loaded automatically when you load the URL for the folder itself.
    * No styles are actually defined within this file, it is a config file for convenience.
    * 
*/
/**
    * [Description]
    *
    * Shapes Mixins
    * Can use SCSS variables = TRUE
    *
    * All mixins to add shapes styles are include here.
    *
    * [Table of Contents]
	  *
    * Circle
    * Small Shadow
    * Medium Shadow
    * Scroll Fade
    * Scrollbar
 */
/******* Circle *******/
/******* Small Shadow shape*******/
/* Made for custom toggle switch */
/******* Medium Shadow shape*******/
/******* Dark Light Shadow shape*******/
/******* Scroll Fade *******/
/******* Outside Border*******/
/******* Focus Styles *******/
/******* Reset Focus Styles *******/
/**
	* [Description]
	* 
	* Datepicker Mixins
	* Use SCSS Variables = FALSE
	*
	* This file contains all the mixins helfull for use in the button component.
	*
	* 
	* [Table of Contents]
	*
	* Datepicker Btn styles
	*
*/
/******* Datepicker Btn styles *******/
/******* Datepicker Next/Previews btns *******/
/**
	* [Description]
	* 
	* Badge Mixins
	* Use SCSS Variables = FALSE
	*
	* This file contains all the mixins helfull for use in the badge component.
	*
	* 
	* [Table of Contents]
	*
	* Badge Rectangle Variant Styles
	*
*/
/******* Badge Default(pill) Variant Styles *******/
/**
	* [Description]
	*
	* Typography Helpers Classes
	* Can use SCSS variables = TRUE
	*
	* This is the file contains helper classes.
	* If you need passing an argument please create a mixin.
	*
	* [Table of Contents]
	*
	* Ellipsis
	* Heading
	*
*/
/******* Ellipsis *******/
/******* Heading *******/
/******* Bulleted List *******/
/******* Display Count *******/
/**
  * [Description]
  *
  * Container Mixins
  * Use SCSS Variables = FALSE
  *
  * All mixins for containers elements are included here.
  *
  * [Table of Contents]
  *
  * Responsive container using grid
  * Page max-width container
  *
*/
/******* Responsive container using grid *******/
/******* Page max-width container *******/
/******* Errors and Msg *******/
/******* Page Content Padding *******/
/**
	* [Description]
	*
	* Globally Used Application Elements
	* Can use SCSS variables = TRUE
	*
	* This gets loaded at the app level so use care when
	* adding styles as to not bloat the CSS.
	*
	* [Table of Contents]
	*
	* Disabled
*/
/******* Disabled *******/
.is-disabled[data-v-d9a97fa2],
[disabled][data-v-d9a97fa2] {
  pointer-events: none;
}
.is-disabled > *[data-v-d9a97fa2],
[disabled] > *[data-v-d9a97fa2] {
  opacity: 0.38;
}
.is-disabled > *.label[data-v-d9a97fa2], .is-disabled > *.enabled[data-v-d9a97fa2],
[disabled] > *.label[data-v-d9a97fa2],
[disabled] > *.enabled[data-v-d9a97fa2] {
  opacity: 1;
}
.is-disabled > *.enabled[data-v-d9a97fa2],
[disabled] > *.enabled[data-v-d9a97fa2] {
  pointer-events: auto;
}
.is-disabled.is-loading[data-v-d9a97fa2], .is-disabled.has-loaded[data-v-d9a97fa2],
[disabled].is-loading[data-v-d9a97fa2],
[disabled].has-loaded[data-v-d9a97fa2] {
  opacity: 1;
}
.is-invisible[data-v-d9a97fa2] {
  visibility: hidden;
  pointer-events: none;
}
.horizontal-div[data-v-d9a97fa2] {
  display: block;
  position: fixed;
  width: 100%;
  top: 47px;
  left: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid #cbcbcb;
  z-index: 2100;
}
.icon-inline[data-v-d9a97fa2] {
  font-size: min(100%, 18px);
  position: relative;
  margin-left: 4px;
}
.icon-inline[data-v-d9a97fa2]:hover:after, .icon-inline[data-v-d9a97fa2]:focus:after, .icon-inline[data-v-d9a97fa2]:active:after {
  position: absolute;
  content: "";
  bottom: -4px;
  left: 0;
  right: 0;
  border-bottom: 1px solid var(--brand-2);
}
.is-positive[data-v-d9a97fa2] {
  color: var(--ui-positive);
}
.is-negative[data-v-d9a97fa2] {
  color: var(--ui-negative);
}
.nav[data-v-d9a97fa2] {
  font-family: "Lato", sans-serif;
}
[data-bg=negative][data-v-d9a97fa2] {
  background: var(--ui-negative);
}
[data-bg=negative-light][data-v-d9a97fa2] {
  background: var(--ui-negative-light);
}
[data-bg=warning][data-v-d9a97fa2] {
  background: var(--ui-warning);
}
[data-bg=warning-light][data-v-d9a97fa2] {
  background: var(--ui-warning-light);
}
[data-bg=positive][data-v-d9a97fa2] {
  background: var(--ui-positive);
}
[data-bg=positive-light][data-v-d9a97fa2] {
  background: var(--ui-positive-light);
}
[data-bg=neutral][data-v-d9a97fa2] {
  background: var(--ui-neutral);
}
[data-bg=neutral-light][data-v-d9a97fa2] {
  background: var(--ui-neutral-light);
}
[data-bg=purple][data-v-d9a97fa2] {
  background: var(--ui-purple);
}
[data-bg=purple-light][data-v-d9a97fa2] {
  background: var(--ui-purple-light);
}
[data-bg=indigo][data-v-d9a97fa2] {
  background: var(--ui-indigo);
}
[data-bg=indigo-light][data-v-d9a97fa2] {
  background: var(--ui-indigo-light);
}
[data-bg=yellow][data-v-d9a97fa2] {
  background: var(--ui-yellow);
}
[data-bg=yellow-light][data-v-d9a97fa2] {
  background: var(--ui-yellow-light);
}
[data-bg=magenta][data-v-d9a97fa2] {
  background: var(--ui-magenta);
}
[data-bg=magenta-light][data-v-d9a97fa2] {
  background: var(--ui-magenta-light);
}
[data-bg=accessible-need][data-v-d9a97fa2] {
  background: var(--ui-accessible-need);
}
[data-color=negative][data-v-d9a97fa2] {
  color: var(--ui-negative);
}
[data-color=negative-light][data-v-d9a97fa2] {
  color: var(--ui-negative-light);
}
[data-color=warning][data-v-d9a97fa2] {
  color: var(--ui-warning);
}
[data-color=warning-light][data-v-d9a97fa2] {
  color: var(--ui-warning-light);
}
[data-color=positive][data-v-d9a97fa2] {
  color: var(--ui-positive);
}
[data-color=positive-light][data-v-d9a97fa2] {
  color: var(--ui-positive-light);
}
[data-color=neutral][data-v-d9a97fa2] {
  color: var(--ui-neutral);
}
[data-color=neutral-light][data-v-d9a97fa2] {
  color: var(--ui-neutral-light);
}
[data-color=purple][data-v-d9a97fa2] {
  color: var(--ui-purple);
}
[data-color=purple-light][data-v-d9a97fa2] {
  color: var(--ui-purple-light);
}
[data-color=indigo][data-v-d9a97fa2] {
  color: var(--ui-indigo);
}
[data-color=indigo-light][data-v-d9a97fa2] {
  color: var(--ui-indigo-light);
}
[data-color=yellow][data-v-d9a97fa2] {
  color: var(--ui-yellow);
}
[data-color=yellow-light][data-v-d9a97fa2] {
  color: var(--ui-yellow-light);
}
[data-color=magenta][data-v-d9a97fa2] {
  color: var(--ui-magenta);
}
[data-color=magenta-light][data-v-d9a97fa2] {
  color: var(--ui-magenta-light);
}

/**
	* [Description]
	*
	* Global Search Page Template Layout
	* Can use SCSS variables = TRUE
	*
	* All detail page styles and mixins are included here.
	*
	* [Table of Contents]
	*
	* Card Subheader Style
	* Card Items Style
	*
*/
/* Override the layout styles from card.vue */
/**
	* [Description]
	* 
	* System Page Template Layout
	* Can use SCSS variables = TRUE
	*
	* All system page styles and mixins are included here.
	* Examples: 404 Page, Restricted Area
	* 
	* [Table of Contents]
	*
*/
/**
	* [Description]
	* 
	* Objects Index
	* Use SCSS Variables = FALSE
	*
	* This will be loaded automatically when you load the URL for the folder itself.
	* No styles are actually defined within this file, it is a config file for convenience.
	* 
*/
/**
    * [Description]
    *
    * Forms Mixins
    * Can use SCSS variables = TRUE
    *
    * All mixins for forms elements are included here.
    *
    * [Table of Contents]
    * Input Field Height Calc
    * BASE
		* Dropdown
		* List Menu
 */
/****** Input Field Height Calc ******/
/*******Read-Only-Text*******/
/*******Dropdown*******/
/*******List Menu*******/
/******* Left Label Variant *******/
/******* Left Label Per BreakPoint Variant *******/
/******* Top Label Per BreakPoint Variant *******/
/******* Header Menu Item *******/
/****** Clear Btn Styles ******/
/**
	* [Description]
	* 
	* Transition Mixins
	* Use SCSS Variables = FALSE
	*
	* This file contains all the transitions ready to use on the transition tag vuejs component.
	* 
	* [Table of Contents]
	*
	* Fade
	* Slide horizontal 
	* Transform transition
*/
/******* Fade *******/
/******* Slide horizontal *******/
/******* Transform transition *******/
/**
	* [Description]
	* 
	* Mixins Index
	* Use SCSS Variables = FALSE
	*
	* This will be loaded automatically when you load the URL for the folder itself.
	* No styles are actually defined within this file, it is a config file for convenience.
	* 
*/
[data-v-d9a97fa2]::-webkit-scrollbar {
  width: 14px;
  background-color: var(--bg-0);
}
[data-v-d9a97fa2]::-webkit-scrollbar-track {
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
  background-color: var(--bg-0);
}
[data-v-d9a97fa2]::-webkit-scrollbar-thumb {
  background-color: var(--bg-0-fg-1);
  border-radius: 14px;
  border: 3px solid transparent;
  background-clip: content-box;
  min-height: 16px;
}

/*CSS VARIANTS*/
[data-v-d9a97fa2]::-webkit-scrollbar {
  background-color: var(--bg-2);
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
[data-v-d9a97fa2]::-webkit-scrollbar-track {
  margin-top: calc(var(--header-height) - 1px);
  border-top: 1px solid var(--neutral-2);
  border-bottom-right-radius: 4px;
}
[data-v-d9a97fa2]::-webkit-scrollbar-thumb {
  border-left: 4px solid transparent;
}
.table-categorized[data-v-d9a97fa2] {
  font-size: 14px;
  overflow-y: auto;
  border: 1px solid var(--neutral-2);
  border-radius: 4px;
}
.table-categorized__container[data-v-d9a97fa2] {
  border-top: none;
  background: var(--bg-0);
}
.table-categorized__header[data-v-d9a97fa2] {
  background: var(--bg-2);
  color: var(--bg-2-fg-3);
  padding: 8px;
  top: 0;
  position: sticky;
  z-index: 2400;
}
.table-categorized__group-category[data-v-d9a97fa2] {
  display: flex;
  flex-direction: column;
}
.table-categorized__group-category[data-v-d9a97fa2]:not(:last-child) {
  border-bottom: 1px solid var(--neutral-2);
}
.table-categorized__category-header[data-v-d9a97fa2] {
  background: var(--bg-1);
  color: var(--bg-1-fg-3);
  padding: 8px;
  border-bottom: 1px solid var(--neutral-2);
  display: flex;
  align-items: center;
  gap: 8px;
}
.table-categorized__group-container[data-v-d9a97fa2] {
  padding: 8px;
}
.table-categorized__group-container[data-v-d9a97fa2]:not(:last-child) {
  border-bottom: 1px solid var(--neutral-2);
}
.table-categorized__icon[data-v-d9a97fa2] {
  font-size: 16px;
}
.table-categorized.hasNotHeader .table-categorized__group-category:first-child .table-categorized__category-header[data-v-d9a97fa2] {
  border-radius: 4px 4px 0 0;
}
.table-categorized.hasNotBorder .table-categorized__container[data-v-d9a97fa2],
.table-categorized.hasNotBorder .table-categorized__header[data-v-d9a97fa2],
.table-categorized.hasNotBorder .table-categorized__category-header[data-v-d9a97fa2],
.table-categorized.hasNotBorder .table-categorized__group-container[data-v-d9a97fa2],
.table-categorized.hasNotBorder .table-categorized__group-category[data-v-d9a97fa2]:not(:last-child),
.table-categorized.hasNotBorder .table-categorized__group-category[data-v-d9a97fa2]:first-child {
  border: none;
}
.table-categorized--single .table-categorized__header[data-v-d9a97fa2] {
  border-bottom: 1px solid var(--neutral-2);
}
.table-categorized--single .table-categorized__group-category[data-v-d9a97fa2] {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-between;
}
.table-categorized--single .table-categorized__group-container[data-v-d9a97fa2]:not(:last-child) {
  border-bottom: none;
}
.table-categorized--single .table-categorized__category-header[data-v-d9a97fa2] {
  background: transparent;
  border-top: none;
  border-bottom: none;
}
.table-categorized--single .table-categorized__group-category[data-v-d9a97fa2] {
  background: var(--bg-0);
  color: var(--bg-0-fg-4);
}
.table-categorized--single .table-categorized__group-category[data-v-d9a97fa2]:not(:last-child) {
  border-bottom: 1px solid var(--neutral-2);
}
.table-categorized--single .table-categorized__group-category[data-v-d9a97fa2]:first-child {
  border-radius: 4px 4px 0 0;
}
.table-categorized--single .table-categorized__group-category[data-v-d9a97fa2]:last-child {
  border-radius: 0 0 4px 4px;
}

/*# sourceMappingURL=dispatchSettings~technicianSkills.css.map?v=691ad27b7ac63e60b5e4*/