/**  Import Compass and Theme Variables */
/******************************************************************************
Sprite Mixin
******************************************************************************/
/******************************************************************************
Extendible Sprite Class
******************************************************************************/
/* ========================================================================== Theme Configuration File ========================================================================== */
/** Base Colors Description: Provides a base for the UI. Usage: General UI Background, Region Headers, Buttons */
/** Highlight Colors Description: Used for providing emphasis or importance to UI components. Usage: Region Headers, Primary / Hot Buttons */
/** Accent and Status Colors Description: Used for indicating state-based UI components, status, or accents. Usage: Warnings, Errors, Danger Text, Success, Focus */
/* ========================================================================== Tree Component ========================================================================== */
.a-TreeView { position: relative; /* so that it works well in a scrolling container */ }

.a-TreeView.is-disabled { background-color: #F0F0F0; }

/* ========================================================================== Tree Parent List ========================================================================== */
/* ========================================================================== Toggle Control ========================================================================== */
.a-TreeView-toggle { color: #A0A0A0; color: rgba(0, 0, 0, 0.2); }

/* Active Tree Node Toggle */
.a-TreeView-row.is-selected + .a-TreeView-toggle { color: #FFF; color: rgba(255, 255, 255, 0.5); }

/* Row Active when Dragging */
.a-TreeView-row.is-active { background-color: #FFFFA3; }

.a-TreeView-content.is-selected.is-active { background-color: #FFFFA3; }

.a-TreeView-content.is-selected.is-active .a-TreeView-label { color: #404040; }

/* ========================================================================== Tree Row --- Empty Element that is used to provide highlighting of tree ========================================================================== */
.a-TreeView-row.is-selected, .a-TreeView-row.is-selected.is-hover { background-color: #2D7BBB; }

.a-TreeView-row.is-focused { outline: none; box-shadow: 0 0 0 2px rgba(57, 155, 234, 0.5); }

.a-TreeView-row.is-focused, .a-TreeView-row.is-selected.is-focused { background-color: #399BEA; }

.a-TreeView-row.is-hover { background-color: #F8F8F8; }

/* ========================================================================== Tree Node Content ========================================================================== */
.a-TreeView-content.is-selected .a-TreeView-label, .a-TreeView-content.is-selected .a-Icon { color: #FFF; }

/* ========================================================================== Tree Node Label ========================================================================== */
.a-TreeView-label, .a-TreeView-label input { color: #404040; }

/* ========================================================================== Tree Placeholder --- Used when dragging / dropping ========================================================================== */
.a-TreeView-placeholder > .a-TreeView-row { background-color: #FFFFA3; }

.a-TreeView-dragHelper { border-color: #9EA9B7; background-color: #E5EEFB; }