/*#region GENERAL*/
:root {
    /*PALETTE — DonnaCare primary #3B6E8F */
    --primary: #3B6E8F;
    --bs-primary: #3B6E8F;
    --bs-primary-rgb: 59 110 143;
    --bs-primary-rgb-com: 59,110,143;
    --bs-active-rgb-com: 57,94,117;
    --secondary: var(--blacksmoky);
    --active: #395E75;
    --hover: rgba(var(--bs-primary-rgb-com), 0.6);
    --hoverColor: var(--white);
    --disabled: var(--grey);
    --menuPanel: #ffffff;
    --sidePanel: #ffffff;
    --sidePanelButtons: var(--white);
    --backgroundPanel: #ffffff;
    --sidebarVersion: var(--primary);
    --sidebarVersionAccent: var(--white);
    --dropdownAccent: rgba(var(--bs-primary-rgb-com), 0.08);
    --primarySoft: color-mix(in srgb, var(--primary) 14%, white);
    --menuItemHoverBg: var(--primarySoft);
    --shadowMain: var(--primary);
    --shadowMainRGB: var(--bs-primary-rgb-com);
    --shadowSecondaryRGB: 199, 217, 227;
    --menuIcon: var(--primary);
    --menuText: var(--secondary);
    --headerTitle: var(--primary);
    --button: var(--primary);
    --buttonContrast: var(--white);
    --hudButton: var(--primary);
    --hudContrast: var(--white);
    /****Borders***/
    --pageBorder: var(--primary);
    --sidebarBorder: var(--primary);
    --cardBorder: #d2d2d2;
    --formControlBorder: var(--primary);
    --tooltipBorder: var(--primary);
    --tooltipText: var(--primary);
    --tooltipShadow: var(--active);
    --tooltipBackground: var(--white);
    --link: var(--primary);
    /*COLOURS*/
    /*--greygreen: #f4f7ed;*/
    --greygreen: #f5f7f0;
    --greenmunsell: #00A878;
    --greencrayola: #D8F1A0;
    --blacksmoky: #0B0500;
    --orangecrayola: #f3c178;
    --lightPink: #FFF2F9;
    --white: #ffffff;
    --ShadowGrey: #afafaf;
    --shadowGreyRGB: 175, 175, 175;
    --shadowGreyRGB-com: rgb(175, 175, 175);
    --purpleGrey: rgba(90,23,132, 0.1);
    --pinkWhite: rgba(244,0,127, 0.01);
    --greenWhite: rgba(125,195,128,0.01);
    --blueWhite: rgba(49,52,128,0.01);
    --purple: rgb(90,23,132);
    --blue: rgb(49,52,128);
    --blue-rgb: 49,52,128;
    --blueHex: #313480;
    --blueDark: #353A8C;
    --blueMid: #37448c;
    --blueLight: #2aa2b7;
    --blueVeryLight: #d1e3df;
    --orange: rgb(233,75,39);
    --pink: rgb(244,0,127);
    --green: rgb(125,195,130);
    --greenHex: #7dc382;
    --greenShadow: #019d48;
    --greenShadowRGB: 1,157,72;
    --greenDark: #0b9e40;
    --greenDarkRGB: 11,158,65;
    --greenMid: #7ABF7F;
    --greenMidRGB: 122, 191, 127;
    --greenGrey: 80, 142, 123;
    --greenLight: 209,227,223;
    --greenLightRGB: 209,227,223;
    --greenLightHex: #D1E3DF;
    --red: rgb(201,79,79);
    --redHex: c94f4f;
    --redMid: #bf4b54;
    --black: #1b1232;
    --grey: #f2f2f2;
    /*REASONS PALETTE*/
    --rp1: #37448c;
    --rp2: #903048;
    --rp3: #9a3f33;
    --rp4: #e2b46c;
    --rp5: #d9c85b;
    --rp6: #48b39a;
    --rp7: #3694bf;
    --rp8: #f46190;
    /*DEVEXPRESS*/
    --dx-calendar-header-hover-color: var(--active);
    --dx-calendar-table-selection-color: var(--purpleGrey);
    --dx-calendar-table-active-color: var(--white);
    --dx-calendar-table-hover-color: var(--white);
    --dx-grid-header-color: var(--Grey);
    --dx-grid-selection-color: var(--active);
    --currentcolor: #ffffff;
    /*BOOTSTRAP*/
    --bs-body-font-size: 0.875rem;
    --bs-body-color: var(--secondary);
    --bs-table-bg: transparent;
    --bs-table-accent-bg: transparent;
    --bs-table-striped-color: var(--white);
    --bs-table-striped-bg: rgba(var(--bs-active-rgb-com), 0.05);
    --bs-table-active-color: var(--white);
    --bs-table-active-bg: rgba(var(--bs-active-rgb-com), 0.1);
    --bs-table-hover-color: var(--white);
    --bs-table-hover-bg: rgba(var(--bs-active-rgb-com), 0.075);
    --bs-gutter-y: 1.5rem;
    --bs-table-accent-bg: var(--active) !important;
    --table-grid-lines: var(--menuPanel);
    --table-header-text: var(--primary);
    --table-header-background: rgb(var(--shadowGreyRGB), 0.2);
    /*--loading-start: hsla(277, 70%, 30%, 0.1);*/
    /*--loading-start: hsl(329,153%,80%);
    --loading-end: hsl(329,103%,90%);*/
    --loading-start: hsl(329,4%,79%);
    --loading-end: hsl(329,4%,97%);
    --sidebar-max-width: 265px;
}


html, body {
    font-family: 'Noto Sans';
    background-color: var(--backgroundPanel);
   
}

/*#endregion*/



/*#region SIDEBAR*/

#sidebar .menu-item:hover,
#sidebar .menu-item:active,
#sidebar .menu-item:focus {
    background: var(--primarySoft);
}

.navmenu-group-hover-row:hover {
    background-color: var(--primarySoft);
}

/*#region SIDEBAR FOOTER*/

/*#endregion*/

/*#region Nav Menu Hover*/


/*#endregion*/
/*#endregion */


/*#region HEADER*/
.logo-full {
    height: 2.8rem;
}
/*#endregion*/

/*#region DESKTOP LAYOUT*/

/*#endregion*/


/*#region DEVEXPRESS*/

.dxbl-btn-primary {
    --dxbl-btn-hover-border-color: var(--active);
    --dxbl-btn-hover-background: var(--active);
    --dxbl-btn-hover-bg: var(--active);
}


/*#region SCHEDULER*/

/*#endregion*/

/*#endregion*/

/*#region RIGHT DRAWER*/

/*#endregion*/

/*#region HUD*/

/*#endregion*/


/*#region POPUPS*/

/*#endregion*/

/*#region TOOLTIPS*/

/*#endregion*/


/*#region SKELETON LOADER*/


/*#endregion*/


/*#region PAGER*/

/*#endregion*/


/*#region SPINNER*/
.loading-container {
    background: linear-gradient(135deg, var(--menuPanel) 0%, var(--lightGrey) 5%,var(--primary) 50%,var(--primary) 150%);
    will-change: background-position;
    backface-visibility: hidden
}

    .loading-container .spinner-content,
    .loading-container .spinner-container h5,
    .loading-container .spinner-message-container * {
        color: white !important;
    }

/*#endregion*/

/*#region FILE UPLOAD*/

/*#endregion*/

/*#region ClockTransactions*/



/*#endregion*/


/*#region EVALUATION SUBMISSION*/


/*#endregion*/

/*#region CALENDAR*/

/*#endregion*/

/*#region RESPONSIVENESS*/
@media (max-width: 1200px) {
}

@media (max-width: 1024px) {
}

@media (max-width: 768px) {
}



/*#endregion*/

/*#region ANIMATIONS*/


/*#endregion*/