/*CSS for the Hags Costing Tool 2.0*/

/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: > 0.01%,last 100 versions,Firefox ESR,not dead
*/

@property --dark-green {
    syntax: "<color>";
    inherits: false;
    initial-value: hsl(131, 17.5%, 52.9%); /* #729C7A */
}

@property --dark-green-glass {
    syntax: "<color>";
    inherits: false;
    initial-value: hsla(131, 17.5%, 52.9%, 0.45);
}

@property --light-green {
    syntax: "<color>";
    inherits: false;
    initial-value: hsl(127, 36.5%, 75.3%); /* #a9d7ae rgb(169 215 174) */
}

@property --light-green-glass1 {
    syntax: "<color>";
    inherits: false;
    initial-value: hsla(127, 36.5%, 75.3%, 0.75); /* rgba(169, 215, 174, 0.75) */
}

@property --light-green-glass2 {
    syntax: "<color>";
    inherits: false;
    initial-value: hsla(127, 36.5%, 75.3%, 0.45); /* rgba(169, 215, 174, 0.45) */
}

@property --light-green-glass3 {
    syntax: "<color>";
    inherits: false;
    initial-value: hsla(127, 36.5%, 75.3%, 0.05); /* rgba(169, 215, 174, 0.02) */
}

@property --red {
    syntax: "<color>";
    inherits: false;
    initial-value: hsl(0, 100%, 50%); /* #ff0000 */
}

@property --red-glass {
    syntax: "<color>";
    inherits: false;
    initial-value: hsla(0, 100%, 50%, 0.45); /* #ff000073 (with alpha transparency) */
}

@property --red-shadow-glass {
    syntax: "<color>";
    inherits: false;
    initial-value: hsla(0, 100%, 50%, 0.8); /* #ff0000cc (with alpha transparency) */
}

@property --pink {
    syntax: "<color>";
    inherits: false;
    initial-value: hsl(359, 55%, 70%); /* #DD898A */
}

@property --amber {
    syntax: "<color>";
    inherits: false;
    initial-value: hsl(45, 100%, 50%); /* #FFC107 */
}

@property --amber-glass {
    syntax: "<color>";
    inherits: false;
    initial-value: hsla(45, 100%, 50%, 0.45); /* #FFC10773 (with alpha transparency) */
}

@property --amber-shadow-glass {
    syntax: "<color>";
    inherits: false;
    initial-value: hsla(45, 100%, 50%, 0.8); /* #FFC107cc (with alpha transparency) */
}

@property --black {
    syntax: "<color>";
    inherits: false;
    initial-value: hsl(0, 4%, 13%); /* #231f20 */
}

@property --black-glass {
    syntax: "<color>";
    inherits: false;
    initial-value: hsla(0, 4%, 13%, 0.45);
}

@property --white {
    syntax: "<color>";
    inherits: false;
    initial-value: hsl(0, 0%, 100%); /* #ffffff */
}

@property --white-glass {
    syntax: "<color>";
    inherits: false;
    initial-value: hsla(0, 0%, 100%, 0.05); /* rgba(255, 255, 255, 0.75) */
}

@property --dr-white {
    syntax: "<color>";
    inherits: false;
    initial-value: hsl(0, 0%, 98%); /* #fafafa */
}

@property --track-thumb {
    syntax: "<color>";
    inherits: false;
    initial-value: hsl(0, 0%, 97%); /* #f7f7f7 */
}

@property --transparent {
    syntax: "<color>";
    inherits: false;
    initial-value: hsla(0, 0%, 100%, 0); /* #ffffff00 (fully transparent white) */
}

@property --grey {
    syntax: "<color>";
    inherits: false;
    initial-value: hsl(225, 2%, 44%); /* #6D6E71  */
}

@property --grey-glass {
    syntax: "<color>";
    inherits: false;
    initial-value: hsla(225, 2%, 44%, 0.45);
}

@property --light-grey {
    syntax: "<color>";
    inherits: false;
    initial-value: hsl(200, 0%, 83%); /* #d3d3d3  */
}

@property --light-grey {
    syntax: "<color>";
    inherits: false;
    initial-value: hsla(200, 0%, 83%, 0.45);
}

@property --app-font-size {
    syntax: "<length>";
    inherits: false;
    initial-value: 13px;
}

@property --app-font-weight {
    syntax: "<number>";
    inherits: false;
    initial-value: 400;
}

@property --app-line-height {
    syntax: "<number>";
    inherits: false;
    initial-value: 1.15;
}

@font-face {
    font-family: GoldplayMedium;
    src: url("/fonts/Goldplay-Medium.ttf")
}

@font-face {
    font-family: GoldplayRegular;
    src: url("/fonts/Goldplay-Regular.ttf")
}

@font-face {
    font-family: GoldplayAlt;
    src: url("/fonts/GoldplayAlt-Bold.ttf");
    font-weight: 500;
}

:root {
    --app-font-size: 13px;
    --app-font-family: GoldplayRegular, "Rubik", sans-serif, system-ui;
    --app-font-family-medium: GoldplayMedium, "Rubik", sans-serif, system-ui;
    --app-font-family-title: GoldplayAlt, "Rubik", sans-serif, system-ui;
    --app-font-weight: 400;
    --app-line-height: 1.15;
    --primary-color: var(--dark-green);
    --primary-color-glass: var(--dark-green-glass);
    --primary-color-shadow: inset 0 0 0.45rem 0.15ch var(--dark-green);
    --primary-color-shadow-out: var(--dark-green) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
    --primary-color-border: 1px solid var(--dark-green);
    --primary-text-color: var(--white);
    --primary-accent-color: var(--light-green);
    --primary-accent-color-glass: var(--light-green-glass1);
    --primary-accent-color-shadow: inset 0 0 0.45rem 0.15ch var(--light-green);
    --primary-accent-color-shadow-out: var(--light-green) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
    --primary-accent-color-border: 1px solid var(--light-green);
    --primary-accent-text-color: var(--black);
    --secondary-color: var(--black);
    --secondary-color-glass: var(--black-glass);
    --secondary-color-shadow: inset 0 0 0.45rem 0.15ch var(--black);
    --secondary-color-shadow-out: var(--black) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
    --secondary-color-border: 1px solid var(--black);
    --secondary-text-color: var(--black);
    --secondary-accent-color: var(--white);
    --secondary-accent-color-glass: var(--white-glass);
    --secondary-accent-color-shadow: inset 0 0 0.45rem 0.15ch var(--white);
    --secondary-accent-color-border: 1px solid var(--white);
    --secondary-accent-text-color: var(--white);
    --ternary-color: var(--grey);
    --ternary-color-glass: var(--grey-glass);
    --ternary-color-shadow: inset 0 0 0.45rem 0.15ch var(--grey);
    --ternary-color-shadow-out: var(--grey) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
    --ternary-color-border: 1px solid var(--grey);
    --ternary-text-color: var(--light-grey);
    --ternary-accent-color: var(--light-grey);
    --ternary-accent-color-glass: var(--light-grey-glass);
    --ternary-accent-color-shadow: inset 0 0 0.45rem 0.15ch var(--light-grey);
    --ternary-accent-color-shadow-out: var(--light-grey) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
    --ternary-accent-color-border: 1px solid var(--light-grey);
    --ternary-acent-text-color: var(--grey);
    --pink-color: var(--pink);
    --error-color: var(--red);
    --error-color-glass: var(--red-glass);
    --error-border: 1px solid var(--red);
    --error-color-shadow-glass-out: var(--red-shadow-glass) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
    --warning-color: var(--amber);
    --warning-color-glass: var(--amber-glass);
    --warning-border: 1px solid var(--amber);
    --warning-color-shadow-glass-out: var(--amber-shadow-glass) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
    --transparent-color-border: 1px solid var(--transparent);
    --table-background: var(--secondary-accent-color);
    --general-background: var(--white);
    --widget-background: var(--white);
    --transparent-background: var(--transparent);
    --button-radius: var(--space-l);
    --general-radius: var(--space-xs);
    --border-radius-dropdown: var(--space-2xs);
    --border-radius-small: var(--general-radius, var(--space-s));
    --border-radius-large: var(--general-radius, var(--space-l)); /*not used*/
    --border-radius-button: var(--button-radius, var(--space-2xl));
    --box-backdrop-border-glass: 1px solid rgba(209, 213, 219, 0.3);
    --box-backdrop-filter-glass: blur(5rem) saturate(180%);
    --hover-backdrop-filter-glass: blur(1rem) saturate(180%);
    --popup-hover: scale(1.02);
    --browser-auto-fill-fix: 0 0 0px 1000px var(--white) inset;
    --general-transition: all 198ms ease-in-out;
    --textarea-transition: height 0ms ease, all 198ms ease-in-out;
    --body-transition: all 66ms ease-in-out;
    --loading-opacity: 0.875;
    --shadow-primary-color: 131deg 17.5% 52.9%;
    --shadow-primary-color-elevation-low: 0.4px 1px 1.2px hsl(var(--shadow-primary-color) / 0.34), 0.7px 1.7px 2.1px -1.2px hsl(var(--shadow-primary-color) / 0.34), 1.7px 4px 4.9px -2.5px hsl(var(--shadow-primary-color) / 0.34);
    --shadow-primary-color-elevation-medium: 0.4px 1px 1.2px hsl(var(--shadow-primary-color) / 0.36), 1.4px 3.3px 4px -0.8px hsl(var(--shadow-primary-color) / 0.36), 3.4px 8.2px 10px -1.7px hsl(var(--shadow-primary-color) / 0.36), 8.3px 20px 24.4px -2.5px hsl(var(--shadow-primary-color) / 0.36);
    --shadow-primary-color-elevation-high: 0.4px 1px 1.2px hsl(var(--shadow-primary-color) / 0.34), 2.4px 5.8px 7.1px -0.4px hsl(var(--shadow-primary-color) / 0.34), 4.5px 10.9px 13.3px -0.7px hsl(var(--shadow-primary-color) / 0.34), 7.4px 17.9px 21.8px -1.1px hsl(var(--shadow-primary-color) / 0.34), 11.8px 28.6px 34.8px -1.4px hsl(var(--shadow-primary-color) / 0.34), 18.5px 44.7px 54.4px -1.8px hsl(var(--shadow-primary-color) / 0.34), 28.2px 67.9px 82.7px -2.1px hsl(var(--shadow-primary-color) / 0.34), 41.5px 100px 121.8px -2.5px hsl(var(--shadow-primary-color) / 0.34);
    --shadow-primary-accent-color: 127deg 36.5% 75.3%;
    --shadow-primary-accent-color-elevation-low: 0.4px 1px 1.2px hsl(var(--shadow-primary-accent-color) / 0.34), 0.7px 1.7px 2.1px -1.2px hsl(var(--shadow-primary-accent-color) / 0.34), 1.7px 4px 4.9px -2.5px hsl(var(--shadow-primary-accent-color) / 0.34);
    --shadow-primary-accent-color-elevation-medium: 0.4px 1px 1.2px hsl(var(--shadow-primary-accent-color) / 0.36), 1.4px 3.3px 4px -0.8px hsl(var(--shadow-primary-accent-color) / 0.36), 3.4px 8.2px 10px -1.7px hsl(var(--shadow-primary-accent-color) / 0.36), 8.3px 20px 24.4px -2.5px hsl(var(--shadow-primary-accent-color) / 0.36);
    --shadow-primary-accent-color-elevation-high: 0.4px 1px 1.2px hsl(var(--shadow-primary-accent-color) / 0.34), 2.4px 5.8px 7.1px -0.4px hsl(var(--shadow-primary-accent-color) / 0.34), 4.5px 10.9px 13.3px -0.7px hsl(var(--shadow-primary-accent-color) / 0.34), 7.4px 17.9px 21.8px -1.1px hsl(var(--shadow-primary-accent-color) / 0.34), 11.8px 28.6px 34.8px -1.4px hsl(var(--shadow-primary-accent-color) / 0.34), 18.5px 44.7px 54.4px -1.8px hsl(var(--shadow-primary-accent-color) / 0.34), 28.2px 67.9px 82.7px -2.1px hsl(var(--shadow-primary-accent-color) / 0.34), 41.5px 100px 121.8px -2.5px hsl(var(--shadow-primary-accent-color) / 0.34);
    --shadow-secondary-color: 0deg 4% 13%;
    --shadow-secondary-color-elevation-low: 0.4px 1px 1.2px hsl(var(--shadow-secondary-color) / 0.34), 0.7px 1.7px 2.1px -1.2px hsl(var(--shadow-secondary-color) / 0.34), 1.7px 4px 4.9px -2.5px hsl(var(--shadow-secondary-color) / 0.34);
    --shadow-secondary-color-elevation-medium: 0.4px 1px 1.2px hsl(var(--shadow-secondary-color) / 0.36), 1.4px 3.3px 4px -0.8px hsl(var(--shadow-secondary-color) / 0.36), 3.4px 8.2px 10px -1.7px hsl(var(--shadow-secondary-color) / 0.36), 8.3px 20px 24.4px -2.5px hsl(var(--shadow-secondary-color) / 0.36);
    --shadow-secondary-color-elevation-high: 0.4px 1px 1.2px hsl(var(--shadow-secondary-color) / 0.34), 2.4px 5.8px 7.1px -0.4px hsl(var(--shadow-secondary-color) / 0.34), 4.5px 10.9px 13.3px -0.7px hsl(var(--shadow-secondary-color) / 0.34), 7.4px 17.9px 21.8px -1.1px hsl(var(--shadow-secondary-color) / 0.34), 11.8px 28.6px 34.8px -1.4px hsl(var(--shadow-secondary-color) / 0.34), 18.5px 44.7px 54.4px -1.8px hsl(var(--shadow-secondary-color) / 0.34), 28.2px 67.9px 82.7px -2.1px hsl(var(--shadow-secondary-color) / 0.34), 41.5px 100px 121.8px -2.5px hsl(var(--shadow-secondary-color) / 0.34);
    --shadow-secondary-accent-color: 0deg 0% 100%;
    --shadow-secondary-accent-color-elevation-low: 0.4px 1px 1.2px hsl(var(--shadow-secondary-accent-color) / 0.34), 0.7px 1.7px 2.1px -1.2px hsl(var(--shadow-secondary-accent-color) / 0.34), 1.7px 4px 4.9px -2.5px hsl(var(--shadow-secondary-accent-color) / 0.34);
    --shadow-secondary-accent-color-elevation-medium: 0.4px 1px 1.2px hsl(var(--shadow-secondary-accent-color) / 0.36), 1.4px 3.3px 4px -0.8px hsl(var(--shadow-secondary-accent-color) / 0.36), 3.4px 8.2px 10px -1.7px hsl(var(--shadow-secondary-accent-color) / 0.36), 8.3px 20px 24.4px -2.5px hsl(var(--shadow-secondary-accent-color) / 0.36);
    --shadow-secondary-accent-color-elevation-high: 0.4px 1px 1.2px hsl(var(--shadow-secondary-accent-color) / 0.34), 2.4px 5.8px 7.1px -0.4px hsl(var(--shadow-secondary-accent-color) / 0.34), 4.5px 10.9px 13.3px -0.7px hsl(var(--shadow-secondary-accent-color) / 0.34), 7.4px 17.9px 21.8px -1.1px hsl(var(--shadow-secondary-accent-color) / 0.34), 11.8px 28.6px 34.8px -1.4px hsl(var(--shadow-secondary-accent-color) / 0.34), 18.5px 44.7px 54.4px -1.8px hsl(var(--shadow-secondary-accent-color) / 0.34), 28.2px 67.9px 82.7px -2.1px hsl(var(--shadow-secondary-accent-color) / 0.34), 41.5px 100px 121.8px -2.5px hsl(var(--shadow-secondary-accent-color) / 0.34);
    --shadow-ternary-color: 225deg 2% 44%;
    --shadow-ternary-color-elevation-low: 0.4px 1px 1.2px hsl(var(--shadow-ternary-color) / 0.34), 0.7px 1.7px 2.1px -1.2px hsl(var(--shadow-ternary-color) / 0.34), 1.7px 4px 4.9px -2.5px hsl(var(--shadow-ternary-color) / 0.34);
    --shadow-ternary-color-elevation-medium: 0.4px 1px 1.2px hsl(var(--shadow-ternary-color) / 0.36), 1.4px 3.3px 4px -0.8px hsl(var(--shadow-ternary-color) / 0.36), 3.4px 8.2px 10px -1.7px hsl(var(--shadow-ternary-color) / 0.36), 8.3px 20px 24.4px -2.5px hsl(var(--shadow-ternary-color) / 0.36);
    --shadow-ternary-color-elevation-high: 0.4px 1px 1.2px hsl(var(--shadow-ternary-color) / 0.34), 2.4px 5.8px 7.1px -0.4px hsl(var(--shadow-ternary-color) / 0.34), 4.5px 10.9px 13.3px -0.7px hsl(var(--shadow-ternary-color) / 0.34), 7.4px 17.9px 21.8px -1.1px hsl(var(--shadow-ternary-color) / 0.34), 11.8px 28.6px 34.8px -1.4px hsl(var(--shadow-ternary-color) / 0.34), 18.5px 44.7px 54.4px -1.8px hsl(var(--shadow-ternary-color) / 0.34), 28.2px 67.9px 82.7px -2.1px hsl(var(--shadow-ternary-color) / 0.34), 41.5px 100px 121.8px -2.5px hsl(var(--shadow-ternary-color) / 0.34);
    --shadow-ternary-accent-color: 200deg 0% 83%;
    --shadow-ternary-accent-color-elevation-low: 0.4px 1px 1.2px hsl(var(--shadow-ternary-accent-color) / 0.34), 0.7px 1.7px 2.1px -1.2px hsl(var(--shadow-ternary-accent-color) / 0.34), 1.7px 4px 4.9px -2.5px hsl(var(--shadow-ternary-accent-color) / 0.34);
    --shadow-ternary-accent-color-elevation-medium: 0.4px 1px 1.2px hsl(var(--shadow-ternary-accent-color) / 0.36), 1.4px 3.3px 4px -0.8px hsl(var(--shadow-ternary-accent-color) / 0.36), 3.4px 8.2px 10px -1.7px hsl(var(--shadow-ternary-accent-color) / 0.36), 8.3px 20px 24.4px -2.5px hsl(var(--shadow-ternary-accent-color) / 0.36);
    --shadow-ternary-accent-color-elevation-high: 0.4px 1px 1.2px hsl(var(--shadow-ternary-accent-color) / 0.34), 2.4px 5.8px 7.1px -0.4px hsl(var(--shadow-ternary-accent-color) / 0.34), 4.5px 10.9px 13.3px -0.7px hsl(var(--shadow-ternary-accent-color) / 0.34), 7.4px 17.9px 21.8px -1.1px hsl(var(--shadow-ternary-accent-color) / 0.34), 11.8px 28.6px 34.8px -1.4px hsl(var(--shadow-ternary-accent-color) / 0.34), 18.5px 44.7px 54.4px -1.8px hsl(var(--shadow-ternary-accent-color) / 0.34), 28.2px 67.9px 82.7px -2.1px hsl(var(--shadow-ternary-accent-color) / 0.34), 41.5px 100px 121.8px -2.5px hsl(var(--shadow-ternary-accent-color) / 0.34);
    --shadow-error-color: 0deg 100% 50%;
    --shadow-error-elevation-low: 0.4px 1px 1.2px hsl(var(--shadow-error-color) / 0.34), 0.7px 1.7px 2.1px -1.2px hsl(var(--shadow-error-color) / 0.34), 1.7px 4px 4.9px -2.5px hsl(var(--shadow-error-color) / 0.34);
    --shadow-error-elevation-medium: 0.4px 1px 1.2px hsl(var(--shadow-error-color) / 0.36), 1.4px 3.3px 4px -0.8px hsl(var(--shadow-error-color) / 0.36), 3.4px 8.2px 10px -1.7px hsl(var(--shadow-error-color) / 0.36), 8.3px 20px 24.4px -2.5px hsl(var(--shadow-error-color) / 0.36);
    --shadow-error-elevation-high: 0.4px 1px 1.2px hsl(var(--shadow-error-color) / 0.34), 2.4px 5.8px 7.1px -0.4px hsl(var(--shadow-error-color) / 0.34), 4.5px 10.9px 13.3px -0.7px hsl(var(--shadow-error-color) / 0.34), 7.4px 17.9px 21.8px -1.1px hsl(var(--shadow-error-color) / 0.34), 11.8px 28.6px 34.8px -1.4px hsl(var(--shadow-error-color) / 0.34), 18.5px 44.7px 54.4px -1.8px hsl(var(--shadow-error-color) / 0.34), 28.2px 67.9px 82.7px -2.1px hsl(var(--shadow-error-color) / 0.34), 41.5px 100px 121.8px -2.5px hsl(var(--shadow-error-color) / 0.34);
    --shadow-warning-color: 45deg 100% 50%;
    --shadow-warning-color-elevation-low: 0.4px 1px 1.2px hsl(var(--shadow-warning-color) / 0.34), 0.7px 1.7px 2.1px -1.2px hsl(var(--shadow-warning-color) / 0.34), 1.7px 4px 4.9px -2.5px hsl(var(--shadow-warning-color) / 0.34);
    --shadow-warning-color-elevation-medium: 0.4px 1px 1.2px hsl(var(--shadow-warning-color) / 0.36), 1.4px 3.3px 4px -0.8px hsl(var(--shadow-warning-color) / 0.36), 3.4px 8.2px 10px -1.7px hsl(var(--shadow-warning-color) / 0.36), 8.3px 20px 24.4px -2.5px hsl(var(--shadow-warning-color) / 0.36);
    --shadow-warning-color-elevation-high: 0.4px 1px 1.2px hsl(var(--shadow-warning-color) / 0.34), 2.4px 5.8px 7.1px -0.4px hsl(var(--shadow-warning-color) / 0.34), 4.5px 10.9px 13.3px -0.7px hsl(var(--shadow-warning-color) / 0.34), 7.4px 17.9px 21.8px -1.1px hsl(var(--shadow-warning-color) / 0.34), 11.8px 28.6px 34.8px -1.4px hsl(var(--shadow-warning-color) / 0.34), 18.5px 44.7px 54.4px -1.8px hsl(var(--shadow-warning-color) / 0.34), 28.2px 67.9px 82.7px -2.1px hsl(var(--shadow-warning-color) / 0.34), 41.5px 100px 121.8px -2.5px hsl(var(--shadow-warning-color) / 0.34);
    --size-step-mega: clamp(4.0456rem, 1.8084rem + 11.1858vi, 10.4774rem);
    --space-3xs: clamp(0.25rem, 0.2410rem + 0.0420vw, 0.2312rem);
    --space-2xs: clamp(0.5rem, 0.4831rem + 0.0847vw, 0.5625rem);
    --space-xs: clamp(0.75rem, 0.7161rem + 0.1695vw, 0.875rem);
    --space-s: clamp(1rem, 0.9661rem + 0.1695vw, 1.125rem);
    --space-m: clamp(1.5rem, 1.4492rem + 0.2542vw, 1.6875rem);
    --space-l: clamp(2rem, 1.9322rem + 0.339vw, 2.25rem);
    --space-xl: clamp(3rem, 2.8983rem + 0.5085vw, 3.375rem);
    --space-m-xl: clamp(1.5rem, 0.9915rem + 2.5424vw, 3.375rem);
    --space-mega: clamp(6rem, 4.5763rem + 7.1186vw, 11.25rem);
}

html {
    background: var(--general-background);
    overflow-x: clip;
    line-height: var(--app-line-height);
    font-family: var(--app-font-family);
    font-size: var(--app-font-size);
}

body {
    font-family: var(--app-font-family);
    padding: 0px !important;
    margin: 0px !important;
    direction: ltr;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: var(--primary-color);
    min-width: 100vw;
    background-image: url("/images/Hags-Texture-Dark-Green.png");
    background-color: var(--primary-color);
    -webkit-transition: var(--body-transition);
    -o-transition: var(--body-transition);
    -moz-transition: var(--body-transition);
    transition: var(--body-transition);
}

*, ::after, ::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

input::-webkit-input-placeholder, select::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: var(--ternary-color);
    opacity: 1; /* Firefox */
}

input:-moz-placeholder, select:-moz-placeholder, textarea:-moz-placeholder {
    color: var(--ternary-color);
    opacity: 1; /* Firefox */
}

input::-moz-placeholder, select::-moz-placeholder, textarea::-moz-placeholder {
    color: var(--ternary-color);
    opacity: 1; /* Firefox */
}

input::-ms-input-placeholder, select::-ms-input-placeholder, textarea::-ms-input-placeholder {
    color: var(--ternary-color);
    opacity: 1; /* Firefox */
}

input::placeholder, select::placeholder, textarea::placeholder {
    color: var(--ternary-color);
    opacity: 1; /* Firefox */
}

.CSS-import-container, .JavaScript-import-container, .JavaScript-container, .CSS-container {
    display: none !important;
}

/*#app-canvas {
    display: flex;
    flex-flow: row nowrap;
    align-items: stretch;
}
*/
/*#context-menus-container {
    position: absolute;
}*/

.spinner {
    -webkit-border-radius: 50% !important;
    -moz-border-radius: 50% !important;
    border-radius: 50% !important;
}

.spinner-border.button-spinner {
    --bs-spinner-width: var(--space-s);
    --bs-spinner-height: var(--space-s);
    --bs-spinner-border-width: var(--space-3xs);
    color: var(--primary-text-color) !important;
}

div.main-spinner-container:has(> .spinner) {
    position: absolute;
    left: 47%;
    top: 50%;
    z-index: 9;
}

div:has(> .spinner.main-spinner.d-none) {
    display: none;
}

.loading-opacity {
    opacity: var(--loading-opacity);
}

.page-main-content-wrapper {
    min-height: 100vh;
    -webkit-border-radius: unset !important;
    -moz-border-radius: unset !important;
    border-radius: unset !important;
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 auto;
    -moz-box-flex: 1;
    flex: 1 0 auto;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    flex-direction: column;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -moz-box-align: stretch;
    align-items: stretch;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -moz-box-pack: start;
    justify-content: flex-start;
    -webkit-align-content: flex-start;
    align-content: flex-start;
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
    -moz-box-ordinal-group: 3;
    order: 2;
}

h1 small,
h2 small,
h3 small,
h4 small,
h5 small,
h6 small {
    color: var(--ternary-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--app-font-family-title) !important;
    color: var(--primary-text-color);
}

.btn, .page-link {
    font-size: unset !important;
}

a {
    font-size: var(--app-font-size);
    text-shadow: none !important;
    color: var(--primary-color) !important;
    text-decoration: unset !important;
    -webkit-border-radius: var(--border-radius-button) !important;
    -moz-border-radius: var(--border-radius-button) !important;
    border-radius: var(--border-radius-button) !important;
    font-family: var(--app-font-family-medium);
}

    a:hover,
    a:focus-visible {
        color: var(--primary-accent-text-color) !important;
    }

    a[data-is-active="False"] {
        opacity: 0.25;
    }

span, div, ul, img, li, table {
    border-radius: var(--border-radius-small) !important;
    -moz-border-radius: var(--border-radius-small) !important;
    -webkit-border-radius: var(--border-radius-small) !important;
}

table {
    line-height: -webkit-calc(var(--app-line-height) * 2);
    line-height: -moz-calc(var(--app-line-height) * 2);
    line-height: calc(var(--app-line-height) * 2);
}

.no-border {
    border: none !important;
}

.align-items-flex-start {
    align-items: flex-start !important;
}

.align-items-stretch {
    align-items: stretch !important;
}

img[alt="Hags-Logo-small"] {
    width: var(--space-m-xl);
}

.widget {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -moz-box-flex: 1;
    flex: 1 1 auto;
    padding: var(--space-s) var(--space-l);
    background-color: var(--widget-background) !important;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-flow: column wrap;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    flex-flow: column wrap;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -moz-box-pack: start;
    justify-content: flex-start;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -moz-box-align: stretch;
    align-items: stretch;
    gap: var(--space-m);
    -webkit-box-shadow: var(--shadow-primary-color-elevation-low);
    -moz-box-shadow: var(--shadow-primary-color-elevation-low);
    box-shadow: var(--shadow-primary-color-elevation-low);
    -webkit-transition: var(--general-transition);
    -o-transition: var(--general-transition);
    -moz-transition: var(--general-transition);
    transition: var(--general-transition);
    /*    backdrop-filter: var(--box-backdrop-filter-glass);
    -webkit-backdrop-filter: var(--hover-backdrop-filter-glass);*/
    border: var(--box-backdrop-border-glass);
}

    .widget:hover {
        -webkit-box-shadow: var(--shadow-primary-accent-color-elevation-low);
        -moz-box-shadow: var(--shadow-primary-accent-color-elevation-low);
        box-shadow: var(--shadow-primary-accent-color-elevation-low);
    }

.widget-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    gap: var(--space-l);
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -moz-box-flex: 1;
    flex: 1 1 auto;
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
    -moz-box-ordinal-group: 3;
    order: 2;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -moz-box-align: stretch;
    align-items: stretch;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -moz-box-pack: start;
    justify-content: flex-start;
    -webkit-align-content: center;
    align-content: center;
    width: 100%;
}

.widget-title {
    font-family: var(--app-font-family-title);
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-content: center;
    align-content: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center;
    min-height: var(--space-l);
    gap: var(--space-2xs);
}

    .widget-title h4,
    .widget-title h5 {
        margin-block-end: unset;
    }

    .widget-title .button-primary#edit_product_note {
        margin-inline-start: unset;
    }

.widget-body {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    flex: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-flow: column wrap;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    flex-flow: column wrap;
    gap: var(--space-l);
    padding-block-start: var(--space-m);
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -moz-box-pack: start;
    justify-content: flex-start;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -moz-box-align: stretch;
    align-items: stretch;
    border-top: var(--primary-accent-color-border);
    -webkit-border-radius: unset !important;
    -moz-border-radius: unset !important;
    border-radius: unset !important;
    -webkit-align-content: stretch;
    align-content: stretch;
    font-weight: 400;
}

    .widget-body .widget-title {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -webkit-flex-direction: row-reverse;
        -moz-box-orient: horizontal;
        -moz-box-direction: reverse;
        flex-direction: row-reverse;
    }

    .widget-body .system-parameter .widget-title {
        font-weight: 600;
    }

    .widget-body > span {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: flex;
    }

.widget-container:has(> .widget#discountsTemplateWidget:not(.d-none)) {
    inset-block-start: 1vh;
    position: -webkit-sticky;
    position: sticky;
    z-index: 2;
}

.widget-container:has(>.widget#productQuotesWidget) {
    inset-block-start: 27.5vh;
    position: -webkit-sticky;
    position: sticky;
}

.widget#discountsTemplateWidget > .widget-body {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    justify-content: space-between;
}

i.fa-search {
    padding-inline-end: var(--space-s);
}

.search-filter-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row wrap;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    flex-flow: row wrap;
    gap: var(--space-s);
    padding-block-end: var(--space-l);
    border-bottom: var(--primary-accent-color-border);
    -webkit-border-radius: unset !important;
    -moz-border-radius: unset !important;
    border-radius: unset !important;
    -webkit-box-flex: 0;
    -webkit-flex: 0 1 auto;
    -moz-box-flex: 0;
    flex: 0 1 auto;
    -webkit-align-content: flex-start;
    align-content: flex-start;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-start;
    -moz-box-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center;
}

.search-quotes-container {
    -webkit-box-flex: 6;
    -webkit-flex: 6 1 auto;
    -moz-box-flex: 6;
    flex: 6 1 auto;
}

.search-datatable-questions-container,
.search-datatable-users-container,
.search-datatable-products-container,
.search-products-container,
.search-quotes-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -moz-box-flex: 1;
    flex: 1 1 auto;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center;
    border: var(--ternary-accent-color-border);
    background-color: var(--general-background);
    -webkit-transition: var(--general-transition);
    -o-transition: var(--general-transition);
    -moz-transition: var(--general-transition);
    transition: var(--general-transition);
    -webkit-box-shadow: var(--shadow-ternary-color-elevation-low) !important;
    -moz-box-shadow: var(--shadow-ternary-color-elevation-low) !important;
    box-shadow: var(--shadow-ternary-color-elevation-low) !important;
}

    .search-datatable-products-container:hover,
    .search-datatable-users-container:hover,
    .search-products-container:hover,
    .search-quotes-container:hover {
        border: var(--primary-color-border) !important;
        -webkit-box-shadow: var(--shadow-primary-color-elevation-medium) !important;
        -moz-box-shadow: var(--shadow-primary-color-elevation-medium) !important;
        box-shadow: var(--shadow-primary-color-elevation-medium) !important;
        -webkit-transition: var(--general-transition) !important;
        -o-transition: var(--general-transition) !important;
        -moz-transition: var(--general-transition) !important;
        transition: var(--general-transition) !important;
    }

    .search-datatable-products-container:has( > .search-products:focus-visible),
    .search-datatable-users-container:has( > .search-users:focus-visible),
    .search-products-container:has( > .search-products:focus-visible),
    .search-quotes-container:has( > .search-quotes:focus-visible) {
        border: var(--primary-color-border) !important;
        -webkit-box-shadow: var(--shadow-primary-color-elevation-medium) !important;
        -moz-box-shadow: var(--shadow-primary-color-elevation-medium) !important;
        box-shadow: var(--shadow-primary-color-elevation-medium) !important;
        -webkit-transition: var(--general-transition) !important;
        -o-transition: var(--general-transition) !important;
        -moz-transition: var(--general-transition) !important;
        transition: var(--general-transition) !important;
    }

.search-products-dropdown,
.search-questions,
.search-users,
.search-products,
.search-quotes {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -moz-box-flex: 1;
    flex: 1 1 auto;
    background-color: var(--transparent-background) !important;
    border: unset !important;
    padding: var(--space-2xs) var(--space-s) !important;
}

    .search-questions:focus-visible,
    .search-users:focus-visible,
    .search-products:focus-visible,
    .search-quotes:focus-visible {
        outline: none !important;
    }

.filters-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    gap: var(--space-s);
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -moz-box-pack: start;
    justify-content: flex-start;
    -webkit-align-content: flex-start;
    align-content: flex-start;
}

.paste-to-quote-container,
.paste-to-quote-container > div {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
}

.widget-container#productQuotesWidget-container {
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -moz-box-align: start;
    align-items: flex-start;
}

.product-image-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    flex: 1;
}

ul.dropdown-menu {
    background-color: var(--secondary-color-glass);
    backdrop-filter: var(--box-backdrop-filter-glass);
}

    .button-secondary::before,
    .favourite-quote::before,
    .button-primary::before,
    ul.dropdown-menu::before {
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        /*backdrop-filter: var(--box-backdrop-filter-glass);*/
        /*background-color: var(--secondary-color-glass);*/
        background-color: var(--secondary-accent-color-glass);
    }

    ul.dropdown-menu::before,
    .app-header .button-primary::before {
        background-color: var(--secondary-color-glass) !important;
    }

.button-secondary:hover::before,
.ul.dropdown-menu:hover::before,
.button-primary:hover::before,
.favourite-quote:hover::before {
    background-color: var(--secondary-accent-color-glass) !important;
    /*backdrop-filter: var(--hover-backdrop-filter-glass);*/
}

.favourite-quote::before,
.button-secondary::before,
.button-primary::before {
    border-radius: var(--button-radius);
}

ul.dropdown-menu::before {
    border-radius: var(--border-radius-dropdown);
    backdrop-filter: var(--hover-backdrop-filter-glass);
}

.app-dropdown:has(> .dropdown-menu:focus) .dropdown-toggle,
.app-dropdown:has(> .dropdown-menu:hover) .dropdown-toggle {
    border-color: var(--primary-color);
}

button {
    border-radius: var(--border-radius-button) !important;
    -moz-border-radius: var(--border-radius-button) !important;
    -webkit-border-radius: var(--border-radius-button) !important;
    /*font-weight: 450 !important;*/
    font-family: var(--app-font-family-medium);
    font-size: inherit;
    padding: var(--space-2xs) var(--space-s);
}

input,
select,
textarea,
.dropdown-toggle {
    border: var(--ternary-accent-color-border);
    border-radius: var(--border-radius-small) !important;
    -moz-border-radius: var(--border-radius-small) !important;
    -webkit-border-radius: var(--border-radius-small) !important;
    background-clip: padding-box !important;
    color: var(--secondary-text-color) !important;
    /*background-color: var(--transparent-background);*/
    background-color: var(--general-background);
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -moz-box-flex: 1;
    flex: 1 1 auto;
    font-size: inherit;
    line-height: var(--app-line-height);
    font-family: var(--app-font-family-medium);
}

    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    textarea:-webkit-autofill,
    textarea:-webkit-autofill:hover,
    textarea:-webkit-autofill:focus,
    select:-webkit-autofill,
    select:-webkit-autofill:hover,
    select:-webkit-autofill:focus {
        -webkit-box-shadow: var(--browser-auto-fill-fix) !important;
    }

    input::-webkit-input-placeholder {
        color: var(--secondary-color) !important;
    }

    input::-webkit-input-placeholder,
    input:-moz-placeholder,
    input::placeholder {
        color: var(--secondary-color) !important;
    }

.country-flag {
    width: var(--space-s);
    aspect-ratio: 1 / 1;
}

i.fa-light.fa-eye:hover,
i.fa-light.fa-eye-slash:hover {
    cursor: pointer;
}

/***
Font Awesome Icons
***/
[class^="fa-"],
[class*=" fa-"] {
    display: inline-block;
    color: var(--primary-color);
}

button [class^="fa-"],
button [class*=" fa-"] {
    color: var(--primary-text-color) !important;
    -webkit-transition: var(--general-transition);
    -o-transition: var(--general-transition);
    -moz-transition: var(--general-transition);
    transition: var(--general-transition);
}

/***
Close icon used for modal dialog and other UI element close buttons
***/
.close {
    display: inline-block;
    margin-inline-end: unset;
    width: var(--space-s);
    aspect-ratio: 1 / 1;
    background-repeat: no-repeat !important;
    outline: none;
    -webkit-align-self: flex-end;
    align-self: flex-end;
}

.app-header {
    display: flex;
    flex-wrap: wrap;
    padding: unset !important;
    gap: var(--space-s);
    -webkit-align-content: center;
    align-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: flex-end;
    -moz-box-pack: end;
    justify-content: flex-end;
    width: 100%;
}

    .app-header > *:first-child {
        margin-inline-end: auto;
    }

    .app-header h4 {
        margin: unset !important;
        white-space: nowrap;
    }

.header {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

    .header.navbar {
        z-index: 9;
        padding: unset;
        -webkit-box-ordinal-group: 2;
        -webkit-order: 1;
        -moz-box-ordinal-group: 2;
        order: 1;
        -webkit-box-flex: 1;
        -webkit-flex: 1 0 auto;
        -moz-box-flex: 1;
        flex: 1 0 auto;
    }

.header-selections {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -moz-box-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center;
}

.section-end.header-selections:first-of-type {
    -webkit-box-flex: 0;
    -webkit-flex: 0;
    -moz-box-flex: 0;
    flex: 0;
}

.section-end.header-selections {
    -webkit-box-flex: 0;
    -webkit-flex: 0;
    -moz-box-flex: 0;
    flex: 0;
    -webkit-box-ordinal-group: 6;
    -webkit-order: 5;
    -moz-box-ordinal-group: 6;
    order: 5;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    justify-content: space-between;
}

    .section-end.header-selections > div {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-flow: column nowrap;
        -moz-box-orient: vertical;
        -moz-box-direction: normal;
        flex-flow: column nowrap;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -moz-box-align: center;
        align-items: center;
        gap: var(--space-xs);
        border-radius: var(--border-radius-button) !important;
        -moz-border-radius: var(--border-radius-button) !important;
        -webkit-border-radius: var(--border-radius-button) !important;
    }

        .section-end.header-selections > div:hover {
            cursor: pointer;
        }

            .section-end.header-selections > div:hover > i {
                color: var(--primary-color) !important;
            }

            .section-end.header-selections > div:hover > span {
                color: var(--primary-color) !important;
            }

.header-selections i {
    font-size: -webkit-calc(var(--app-font-size)*3);
    font-size: -moz-calc(var(--app-font-size)*3);
    font-size: calc(var(--app-font-size)*3);
}

    .header-selections i + span {
        width: -webkit-max-content;
        width: -moz-max-content;
        width: max-content;
    }

.hamburger .line {
    width: var(--space-l);
    height: var(--space-3xs);
    background-color: var(--secondary-color);
    display: block;
    z-index: 1;
    position: relative;
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease;
}

.hamburger:hover {
    cursor: pointer;
}

.hamburger .line:nth-child(1) {
    transform-origin: center;
}

.hamburger .line:nth-child(2) {
    transform-origin: var(--space-3xs);
}

.hamburger .line:nth-child(3) {
    transform-origin: center;
}

.hamburger.is-active .line:nth-child(1) {
    -webkit-transform: translateY(var(--space-2xs)) rotate(45deg);
    -o-transform: translateY(var(--space-2xs)) rotate(45deg);
    -moz-transform: translateY(var(--space-2xs)) rotate(45deg);
    transform: translateY(var(--space-2xs)) rotate(45deg);
    opacity: 1;
}

.hamburger.is-active .line:nth-child(2) {
    transform: rotate(0deg) scale(0.2, 0.2);
    opacity: 0;
}

.hamburger.is-active .line:nth-child(3) {
    -webkit-transform: translateY(calc(-1 * var(--space-2xs))) rotate(-45deg);
    -o-transform: translateY(calc(-1 * var(--space-2xs))) rotate(-45deg);
    -moz-transform: translateY(calc(-1 * var(--space-2xs))) rotate(-45deg);
    transform: translateY(calc(-1 * var(--space-2xs))) rotate(-45deg);
    opacity: 1;
}

.navbar-brand {
    margin-inline-end: unset !important;
    -webkit-align-self: center;
    -ms-grid-row-align: center;
    align-self: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    justify-content: center;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -moz-box-align: start;
    align-items: flex-start;
}

    .navbar-brand:focus-visible,
    .navbar-brand:hover {
        outline: unset;
    }

        .navbar-brand:focus-visible > img,
        .navbar-brand:hover > img {
            -webkit-transition: var(--general-transition);
            -o-transition: var(--general-transition);
            -moz-transition: var(--general-transition);
            transition: var(--general-transition);
            -webkit-box-shadow: var(--shadow-primary-accent-color-elevation-low);
            -moz-box-shadow: var(--shadow-primary-accent-color-elevation-low);
            box-shadow: var(--shadow-primary-accent-color-elevation-low);
        }

.logo img {
    width: calc(2* var(--space-mega));
    box-shadow: var(--shadow-primary-color-elevation-low);
    -webkit-transition: var(--general-transition);
    -o-transition: var(--general-transition);
    -moz-transition: var(--general-transition);
    transition: var(--general-transition);
}

    .logo img:hover,
    .logo img:focus-visible {
        box-shadow: var(--shadow-primary-color-elevation-medium);
    }

.navbar-brand img:first-of-type {
    width: 75vw;
    vertical-align: unset;
    -webkit-transition: var(--general-transition);
    -o-transition: var(--general-transition);
    -moz-transition: var(--general-transition);
    transition: var(--general-transition);
}

.header .navbar-toggler {
    margin: auto 0;
    padding: var(--space-xs);
    -webkit-filter: none;
    filter: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    color: var(--secondary-text-color);
    border: unset;
    line-height: var(--app-line-height);
    font-size: var(--app-font-size);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    gap: var(--space-3xs);
}

    .header .navbar-toggler:hover {
        text-decoration: none;
        background: none;
    }

    .header .navbar-toggler:focus,
    .header .navbar-toggler:focus-visible {
        outline: unset !important;
        box-shadow: unset !important;
    }

.page-container {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -moz-box-align: stretch;
    align-items: stretch;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -moz-box-pack: start;
    justify-content: flex-start;
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
    -moz-box-ordinal-group: 3;
    order: 2;
    margin: unset;
    padding: unset;
    position: relative;
}

    .page-container:before,
    .page-container:after {
        display: table;
        content: " ";
    }

    .page-container:after {
        clear: both;
    }

action-message {
    padding-inline-start: unset;
}

.page-content-wrapper {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-flow: column nowrap;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    flex-flow: column nowrap;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -moz-box-align: start;
    align-items: flex-start;
    -webkit-align-content: flex-start;
    align-content: flex-start;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -moz-box-pack: start;
    justify-content: flex-start;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    flex: 1;
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
    -moz-box-ordinal-group: 3;
    order: 2;
    padding: var(--space-s) var(--space-l);
}

.page-sidebar-menu {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -moz-box-align: stretch;
    align-items: stretch;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -moz-box-pack: start;
    justify-content: flex-start;
    gap: var(--space-s);
    padding: unset;
    margin-block-end: unset;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -moz-box-flex: 1;
    flex: 1 1 auto;
    padding-block-end: var(--space-s);
}

    .page-sidebar-menu > li {
        list-style: none;
        border: var(--space-3xs);
        cursor: pointer;
        -webkit-border-radius: var(--border-radius-button) !important;
        -moz-border-radius: var(--border-radius-button) !important;
        border-radius: var(--border-radius-button) !important;
    }

        .page-sidebar-menu > li.menuItems.nav-item.open#menuAdmin > a {
            /*background-color: var(--primary-color);*/
            background: url("/images/Hags-Texture-Dark-Green-Small.png");
            font-weight: unset !important;
            box-shadow: var(--shadow-primary-color-elevation-low);
        }

            .page-sidebar-menu > li.menuItems.nav-item.open#menuAdmin > a > .title {
                color: var(--primary-text-color) !important;
            }

            .page-sidebar-menu > li.menuItems.nav-item.open#menuAdmin > a > i {
                color: var(--primary-text-color) !important;
            }

        .page-sidebar-menu > li.start > a {
            border-top-color: var(--transparent-background) !important;
        }

        .page-sidebar-menu > li:last-child > a,
        .page-sidebar-menu > li.last > a {
            border-bottom-color: var(--transparent-background) !important;
            word-break: break-all;
        }

.page-sidebar.navbar.collapse:has( .page-sidebar-menu-collapse.menu-collapsed) .page-sidebar-menu > li > a {
    justify-content: center;
}

.page-sidebar-menu > li > a {
    color: var(--primary-text-color) !important;
    position: relative;
    border: var(--space-3xs);
    text-decoration: none;
    font-weight: 500;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row nowrap;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    flex-flow: row nowrap;
    -webkit-align-content: center;
    align-content: center;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -moz-box-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center;
    gap: var(--space-s);
    -webkit-box-shadow: unset;
    -moz-box-shadow: unset;
    box-shadow: unset;
    padding: var(--space-xs) var(--space-s);
}

    .page-sidebar-menu > li > a i {
        text-shadow: none;
        color: var(--primary-accent-text-color) !important;
    }

        .page-sidebar-menu > li > a i:first-of-type,
        .side-menu-bottom > button > i:first-of-type {
            font-size: -webkit-calc(var(--app-font-size)* 1.5);
            font-size: -moz-calc(var(--app-font-size)* 1.5);
            font-size: calc(var(--app-font-size)* 1.5);
        }

    .page-sidebar-menu > li > a span,
    .page-sidebar-menu > li > a h4 {
        color: var(--primary-accent-text-color) !important;
        margin-block-end: unset;
    }

.page-sidebar-menu > li.active > a {
    border: unset !important;
    border-color: unset !important;
    text-shadow: none;
    font-weight: unset;
    box-shadow: var(--shadow-primary-color-elevation-low);
}

.page-sidebar-menu > li.inactive > a i {
    color: var(--primary-color);
}

.page-sidebar-menu > li.active > a > .title {
    color: var(--primary-text-color) !important;
}

.page-sidebar-menu > li.active > a > i {
    color: var(--primary-text-color) !important;
}

.page-sidebar-menu > li > ul.sub-menu {
    display: none;
    list-style: circle;
    clear: both;
    margin: var(--space-s) 0 0 0;
    padding-inline-start: var(--space-l) !important;
    background-color: var(--transparent-background) !important;
}

.page-sidebar-menu > li.active > ul.sub-menu {
    display: block;
}

.page-sidebar-menu > li > ul.sub-menu > li {
    background: none;
    margin: unset;
    padding: unset;
    margin-block-start: 1px !important;
    list-style: none;
}

    .page-sidebar-menu > li > ul.sub-menu > li > a {
        display: block;
        margin: unset;
        padding: var(--space-2xs) 0;
        padding-inline-start: unset !important;
        text-decoration: none;
        font-weight: 450;
        background: none !important;
        color: var(--ternary-text-color) !important;
    }

    .page-sidebar-menu > li > ul.sub-menu > li:last-of-type > a {
        padding-block-end: unset;
    }

    .page-sidebar-menu > li > ul.sub-menu > li > a h5 {
        margin: unset;
    }

ul.page-sidebar-menu > li > ul.sub-menu > li > a.sub-menu-link:hover,
ul.page-sidebar-menu > li > ul.sub-menu > li > a.sub-menu-link.active {
    color: var(--primary-color) !important;
}

.nav-item.admin-nav-item.open {
    border-color: var(--primary-color) !important;
    -webkit-box-shadow: var(--shadow-primary-color-elevation-medium) !important;
    -moz-box-shadow: var(--shadow-primary-color-elevation-medium) !important;
    box-shadow: var(--shadow-primary-color-elevation-medium) !important;
    -webkit-transform: var(--popup-hover);
    -moz-transform: var(--popup-hover);
    -o-transform: var(--popup-hover);
    transform: var(--popup-hover);
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: subpixel-antialiased;
    font-smooth: subpixel-antialiased;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-origin: center;
    -moz-transform-origin: center;
    -o-transform-origin: center;
    transform-origin: center;
    z-index: 21;
    -webkit-transition: var(--general-transition) !important;
    -o-transition: var(--general-transition) !important;
    -moz-transition: var(--general-transition) !important;
    transition: var(--general-transition) !important;
}

/* 3rd level sub menu */
.page-sidebar-menu > li > ul.sub-menu > li ul.sub-menu {
    display: none;
    list-style: none;
    clear: both;
    margin: unset;
}

.page-sidebar-menu > li.active > ul.sub-menu > li.active ul.sub-menu {
    display: block;
}

.page-sidebar-menu > li > ul.sub-menu > li ul.sub-menu li {
    background: none;
    margin: unset;
    padding: unset;
    margin-block-start: 1px !important;
}

.page-sidebar-menu > li > ul.sub-menu li > ul.sub-menu > li > a {
    display: block;
    margin: unset;
    padding: 5px 0;
    text-decoration: none;
    font-size: -webkit-calc(var(--app-font-size) + 1px);
    font-size: -moz-calc(var(--app-font-size) + 1px);
    font-size: calc(var(--app-font-size) + 1px);
    font-weight: 300;
    background: none;
}

.page-sidebar-menu > li > ul.sub-menu > li > ul.sub-menu > li > a {
    padding-inline-start: 60px;
}

.page-sidebar-menu > li > ul.sub-menu > li > ul.sub-menu > li > ul.sub-menu > li > a {
    padding-inline-start: 80px;
}

.page-sidebar-menu > li.active > ul.sub-menu > li.active
ul.sub-menu > li.active
ul.sub-menu {
    display: block;
}

.page-sidebar-menu > li > ul.sub-menu li > ul.sub-menu > li > a > i {
    font-size: var(--app-font-size);
}

.page-sidebar-menu > li.active {
    /*background-color: var(--primary-color);*/
    background: url("/images/Hags-Texture-Dark-Green-Small.png");
}

.nav-item.admin-nav-item:hover > i.fa-gear {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

.nav-item.admin-nav-item .title {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -moz-box-flex: 1;
    flex: 1 1 auto;
}

/***
Sidebar toggler(show/hide)
***/
.sidebar-toggler {
    cursor: pointer;
    opacity: 0.5;
    width: 29px;
    height: 29px;
    background-repeat: no-repeat;
}

    .sidebar-toggler:hover {
        opacity: 1;
    }

.page-sidebar .sidebar-toggler {
    margin-block-start: 15px;
    margin-inline-start: 175px;
}

.header .sidebar-toggler {
    display: inline-block;
    margin-block-start: 6px;
    margin-inline-start: -42px;
}

.page-content {
    background-color: var(--transparent-background);
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    gap: var(--space-l);
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    flex-direction: column;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -moz-box-align: stretch;
    align-items: stretch;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -moz-box-pack: start;
    justify-content: flex-start;
    -webkit-align-content: flex-start;
    align-content: flex-start;
}

li::marker {
    margin-inline-start: -5px !important;
}

table > tbody > tr:focus-visible td,
table > tbody > tr:hover td {
    cursor: default;
    border-bottom-color: var(--primary-color) !important;
    /*    -webkit-transition: unset !important;
    -o-transition: unset !important;
    -moz-transition: unset !important;
    transition: unset !important;*/
    background-color: var(--primary-accent-color-glass) !important;
    outline: unset;
    backdrop-filter: var(--hover-backdrop-filter-glass);
    -webkit-backdrop-filter: var(--hover-backdrop-filter-glass);
}

table > tbody > tr {
    /*    -webkit-transition: unset !important;
    -o-transition: unset !important;
    -moz-transition: unset !important;
    transition: unset !important;*/
    transition: var(--general-transition);
    height: var(--space-xl);
}

table tbody td:first-of-type {
    -webkit-border-top-left-radius: var(--border-radius-small);
    -moz-border-radius-topleft: var(--border-radius-small);
    border-top-left-radius: var(--border-radius-small);
    -webkit-border-bottom-left-radius: var(--border-radius-small);
    -moz-border-radius-bottomleft: var(--border-radius-small);
    border-bottom-left-radius: var(--border-radius-small);
    padding-inline-start: var(--space-xs);
    padding-inline-end: var(--space-xs);
}

table tbody td:last-of-type {
    -webkit-border-top-right-radius: var(--border-radius-small);
    -moz-border-radius-topright: var(--border-radius-small);
    border-top-right-radius: var(--border-radius-small);
    -webkit-border-bottom-right-radius: var(--border-radius-small);
    -moz-border-radius-bottomright: var(--border-radius-small);
    border-bottom-right-radius: var(--border-radius-small);
}

table th {
    font-weight: 450;
    vertical-align: middle;
}

table.dataTable th {
    border: var(--ternary-color) !important;
    padding: var(--space-2xs) 0 !important;
    border-radius: var(--border-radius-small);
    /*    -webkit-border-radius: var(--border-radius-small) !important;
    -moz-border-radius: var(--border-radius-small) !important;
    border-radius: var(--border-radius-small) !important;*/
}

table.dataTable > tbody > .parent:hover + .child {
    cursor: default;
    -webkit-box-shadow: var(--shadow-primary-color-elevation-low);
    -moz-box-shadow: var(--shadow-primary-color-elevation-low);
    box-shadow: var(--shadow-primary-color-elevation-low);
    border-bottom-color: var(--primary-color);
    background-color: var(--secondary-color) !important;
}

table.dataTable:hover {
    -webkit-transition: unset !important;
    -o-transition: unset !important;
    -moz-transition: unset !important;
    transition: unset !important;
}

table.dataTable > tbody > .parent + .child:hover {
    cursor: default;
    -webkit-box-shadow: var(--shadow-primary-color-elevation-low);
    -moz-box-shadow: var(--shadow-primary-color-elevation-low);
    box-shadow: var(--shadow-primary-color-elevation-low);
    border-bottom-color: var(--primary-color);
    background-color: var(--secondary-color) !important;
}

table thead:first-of-type {
    inset-block-start: 1vh;
    position: -webkit-sticky;
    position: sticky;
    -webkit-border-radius: var(--border-radius-small);
    -moz-border-radius: var(--border-radius-small);
    border-radius: var(--border-radius-small);
    z-index: 1;
}

.table-header-float {
    -webkit-box-shadow: var(--shadow-ternary-color-elevation-high);
    -moz-box-shadow: var(--shadow-ternary-color-elevation-high);
    box-shadow: var(--shadow-ternary-color-elevation-high);
}

table thead > tr {
    height: var(--space-xl);
    line-height: var(--app-line-height);
    font-family: var(--app-font-family-title);
}

table thead:first-of-type > tr th {
    text-transform: uppercase;
}

table thead.table-header-float:first-of-type > tr th:last-of-type {
    -webkit-border-top-right-radius: var(--border-radius-small) !important;
    -moz-border-radius-topright: var(--border-radius-small) !important;
    border-top-right-radius: var(--border-radius-small) !important;
    -webkit-border-bottom-right-radius: var(--border-radius-small) !important;
    -moz-border-radius-bottomright: var(--border-radius-small) !important;
    border-bottom-right-radius: var(--border-radius-small) !important;
}

table thead.table-header-float:first-of-type > tr th:first-of-type {
    -webkit-border-top-left-radius: var(--border-radius-small) !important;
    -moz-border-radius-topleft: var(--border-radius-small) !important;
    border-top-left-radius: var(--border-radius-small) !important;
    -webkit-border-bottom-left-radius: var(--border-radius-small) !important;
    -moz-border-radius-bottomleft: var(--border-radius-small) !important;
    border-bottom-left-radius: var(--border-radius-small) !important;
    padding-inline-start: var(--space-s) !important;
}

table#ViewQuote thead:first-of-type > tr th:first-of-type {
    padding-inline-start: calc(2.5*var(--space-xl)) !important;
}

table thead.table-header-float:first-of-type > tr th {
    background: var(--ternary-color) !important;
    color: var(--primary-text-color) !important;
    border-radius: unset;
}

table td,
table th {
    vertical-align: middle;
}

table tbody {
    /*background-color: var(--table-background);*/
}

.content-wrapper {
    background-color: var(--ternary-color);
    padding: var(--space-l);
    border-radius: var(--border-radius-small) !important;
    -moz-border-radius: var(--border-radius-small) !important;
    -webkit-border-radius: var(--border-radius-small) !important;
}

span.navbar-text {
    margin: auto;
    color: var(--primary-text-color) !important;
    padding-inline-start: var(--space-l);
}

#DivLeftMenu {
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
    -moz-box-ordinal-group: 3;
    order: 2;
    height: -webkit-fit-content !important;
    height: -moz-fit-content !important;
    height: fit-content !important;
    margin-block-start: unset;
    padding: unset;
    -webkit-border-radius: var(--border-radius-small) !important;
    -moz-border-radius: var(--border-radius-small) !important;
    border-radius: var(--border-radius-small) !important;
    -webkit-box-shadow: var(--shadow-primary-color-elevation-low);
    -moz-box-shadow: var(--shadow-primary-color-elevation-low);
    box-shadow: var(--shadow-primary-color-elevation-low);
    border: var(--primary-accent-color-border);
    -webkit-box-flex: 0;
    -webkit-flex: 0 1 auto;
    -moz-box-flex: 0;
    flex: 0 1 auto;
}

.header-inner {
    width: 100%;
    padding: var(--space-s) var(--space-l);
}

[class*="button-"] {
    font-weight: 450 !important;
}

.button-primary {
    position: relative;
    background: var(--primary-color) !important;
    background: url("/images/Hags-Texture-Dark-Green-Small.png") !important;
    color: var(--primary-text-color) !important;
    border-radius: var(--border-radius-button) !important;
    -moz-border-radius: var(--border-radius-button) !important;
    -webkit-border-radius: var(--border-radius-button) !important;
    border-style: solid !important;
    border-width: 1px !important;
    height: -webkit-fit-content !important;
    height: -moz-fit-content !important;
    height: fit-content !important;
    border-color: var(--primary-color);
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: -moz-box !important;
    display: flex !important;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center;
    gap: var(--space-xs);
    width: -webkit-fit-content !important;
    width: -moz-fit-content !important;
    width: fit-content !important;
    padding: var(--space-2xs) var(--space-s);
    -webkit-transition: var(--general-transition);
    -o-transition: var(--general-transition);
    -moz-transition: var(--general-transition);
    transition: var(--general-transition);
    box-shadow: var(--shadow-primary-color-elevation-low);
    backdrop-filter: var(--hover-backdrop-filter-glass);
}

    .button-primary:focus-visible,
    .button-primary:hover {
        color: var(--primary-accent-text-color) !important;
        background-color: var(--primary-accent-color) !important;
        background: url("/images/Hags-Texture-Light-Green-Small.png") !important;
        border-color: var(--primary-accent-color);
        cursor: pointer;
        outline: unset;
        -webkit-box-shadow: var(--shadow-primary-accent-color-elevation-medium);
        -moz-box-shadow: var(--shadow-primary-accent-color-elevation-medium);
        box-shadow: var(--shadow-primary-accent-color-elevation-medium);
    }

        .button-primary:focus-visible i,
        .button-primary:hover i {
            color: var(--primary-accent-text-color) !important;
        }

        .button-primary:focus-visible span,
        .button-primary:hover span {
            color: var(--primary-accent-text-color) !important;
        }

.button-secondary {
    position: relative;
    border-color: var(--secondary-color) !important;
    border-radius: var(--border-radius-button) !important;
    -moz-border-radius: var(--border-radius-button) !important;
    -webkit-border-radius: var(--border-radius-button) !important;
    color: var(--secondary-text-color) !important;
    background: var(--secondary-accent-color) !important;
    border-style: solid !important;
    border-width: 1px !important;
    min-height: -webkit-fit-content !important;
    min-height: -moz-fit-content !important;
    min-height: fit-content !important;
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: -moz-box !important;
    display: flex !important;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center;
    gap: var(--space-xs);
    width: -webkit-fit-content !important;
    width: -moz-fit-content !important;
    width: fit-content !important;
    padding: var(--space-2xs) var(--space-s);
    -webkit-transition: var(--general-transition);
    -o-transition: var(--general-transition);
    -moz-transition: var(--general-transition);
    transition: var(--general-transition);
    box-shadow: var(--shadow-secondary-accent-color-elevation-low);
    backdrop-filter: var(--hover-backdrop-filter-glass);
}

    .button-secondary:focus-visible,
    .button-secondary:hover {
        color: var(--secondary-accent-text-color) !important;
        background-color: var(--secondary-color) !important;
        border-color: var(--secondary-color) !important;
        cursor: pointer;
        outline: unset;
        -webkit-box-shadow: var(--shadow-secondary-color-elevation-medium);
        -moz-box-shadow: var(--shadow-secondary-color-elevation-medium);
        box-shadow: var(--shadow-secondary-color-elevation-medium);
    }

        .button-secondary:focus-visible i,
        .button-secondary:hover i {
            color: var(--secondary-accent-text-color) !important;
        }

    .button-secondary > i {
        color: var(--secondary-text-color) !important;
    }

.pagination .active > a,
.pagination .active > a:hover {
    background: var(--transparent-background) !important;
    color: var(--primary-color) !important;
    border: solid 2px var(--primary-color) !important;
    border-radius: var(--border-radius-small) !important;
    -moz-border-radius: var(--border-radius-small) !important;
    -webkit-border-radius: var(--border-radius-small) !important;
    display: block;
    width: 2ch;
    text-align: center;
}

.pagination > li > a,
.pagination > li > span {
    background-color: var(--transparent-background) !important;
    border: none !important;
}

/*Scroll Bar*/
::-webkit-scrollbar {
    width: var(--space-2xs);
}

::-webkit-scrollbar-track {
    background-color: var(--track-thumb) !important;
    border-radius: var(--border-radius-small) !important;
    -moz-border-radius: var(--border-radius-small) !important;
    -webkit-border-radius: var(--border-radius-small) !important;
}

::-webkit-scrollbar-thumb {
    background-color: var(--primary-color) !important;
    background-clip: content-box !important;
    border-radius: var(--border-radius-small) !important;
    -moz-border-radius: var(--border-radius-small) !important;
    -webkit-border-radius: var(--border-radius-small) !important;
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--ternary-color) !important;
    }

select.form-control {
    border-radius: var(--border-radius-small) !important;
    -moz-border-radius: var(--border-radius-small) !important;
    -webkit-border-radius: var(--border-radius-small) !important;
}

div.controls > input {
    border: var(--ternary-color-border);
    border-radius: var(--border-radius-small) !important;
    -moz-border-radius: var(--border-radius-small) !important;
    -webkit-border-radius: var(--border-radius-small) !important;
}

input[type="checkbox"] {
    accent-color: var(--primary-color) !important;
    margin: unset !important;
}

    input[type="checkbox"]:focus-visible {
        cursor: pointer;
        outline-color: var(--primary-color);
        outline-style: solid;
        outline-offset: 2px;
        outline-width: 1px;
    }

.form-group.form-error {
    color: var(--primary-color);
    -moz-text-decoration-color: var(--primary-color);
    -webkit-text-decoration-color: var(--primary-color);
    text-decoration-color: var(--primary-color);
}

.checkbox > div > span > input {
    accent-color: var(--primary-color) !important;
    opacity: unset !important;
    width: var(--space-s) !important;
    aspect-ratio: 1 / 1 !important;
    border: var(--secondary-color-border);
    border-radius: var(--border-radius-small);
    -moz-border-radius: var(--border-radius-small);
    -webkit-border-radius: var(--border-radius-small);
    -webkit-appearance: auto !important;
}

div.checker {
    width: unset !important;
    height: unset !important;
}

    div.checker > span {
        -webkit-appearance: none !important;
        display: unset !important;
    }

.form-control {
    display: flex !important;
    flex-flow: row wrap;
    flex: 1;
    -webkit-box-shadow: var(--browser-auto-fill-fix) !important;
    /*width: unset !important;*/
    -webkit-transition: var(--general-transition) !important;
    -o-transition: var(--general-transition) !important;
    -moz-transition: var(--general-transition) !important;
    transition: var(--general-transition) !important;
    padding: var(--space-2xs) var(--space-s) !important;
}

    .form-control:hover,
    .form-control:focus-visible {
        border: var(--primary-color-border) !important;
        -webkit-box-shadow: var(--shadow-primary-accent-color-elevation-low) !important;
        -moz-box-shadow: var(--shadow-primary-accent-color-elevation-low) !important;
        box-shadow: var(--shadow-primary-accent-color-elevation-low) !important;
        background-color: var(--general-background);
        background-clip: border-box !important;
        -webkit-transition: var(--general-transition);
        -o-transition: var(--general-transition);
        -moz-transition: var(--general-transition);
        transition: var(--general-transition);
    }

    .login .content .input-icon.error,
    .form-control.error {
        border: var(--error-border) !important;
    }

        .login .content .input-icon.error:hover,
        .login .content .input-icon.error:focus-within,
        .form-control.error:hover,
        .form-control.error:focus {
            -webkit-box-shadow: var(--shadow-error-elevation-low) !important;
            -moz-box-shadow: var(--shadow-error-elevation-low) !important;
            box-shadow: var(--shadow-error-elevation-low) !important;
            -webkit-transition: var(--general-transition);
            -o-transition: var(--general-transition);
            -moz-transition: var(--general-transition);
            transition: var(--general-transition);
            border: var(--error-border) !important;
        }

input.form-control[type="checkbox"] {
    width: unset !important;
    appearance: auto !important;
    -webkit-appearance: auto !important;
    flex: 0 !important;
    -webkit-box-shadow: unset !important;
}

span.select2.select2-container.select2-container--default {
    margin-inline-start: auto;
    width: 100% !important;
}

.select2.select2-container.select2-container--default.select2-container--below.select2-container--open:has( span > span > span > .select2-selection__placeholder ) > span > span > span > .select2-selection__placeholder {
    color: var(--primary-color);
}

.breadcrumb-item.active {
    color: var(--secondary-text-color) !important;
}

    .breadcrumb-item.active:hover {
        cursor: default;
    }

.form-error {
    color: var(--error-color);
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row nowrap;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    flex-flow: row nowrap;
    padding: unset;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -moz-box-pack: start;
    justify-content: flex-start;
}

#form-errors-container > div {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-flow: column nowrap;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    flex-flow: column nowrap;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -moz-box-align: start;
    align-items: flex-start;
}

.flip-front, .flip-back {
    position: absolute;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-flow: column nowrap;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    flex-flow: column nowrap;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    justify-content: space-between;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}

.flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    -webkit-transition: var(--general-transition);
    -o-transition: var(--general-transition);
    -moz-transition: var(--general-transition);
    transition: var(--general-transition);
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.flip-back {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.app-dropdown {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -moz-box-pack: start;
    justify-content: flex-start;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -moz-box-align: stretch;
    align-items: stretch;
    gap: var(--space-2xs);
}

    .app-dropdown > a {
        background-color: unset;
        border: var(--ternary-accent-color-border);
    }

    .app-dropdown a.dropdown-toggle {
        /*font-weight: 450 !important;*/
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
        -moz-box-orient: horizontal;
        -moz-box-direction: normal;
        flex-direction: row;
        -webkit-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -moz-box-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -moz-box-pack: justify;
        justify-content: space-between;
        gap: var(--space-xs);
        padding: var(--space-2xs) var(--space-s);
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -moz-box-flex: 1;
        flex: 1;
        -webkit-box-flex: 0;
        -webkit-flex: 0;
        -moz-box-flex: 0;
        flex: 0;
        border-radius: var(--border-radius-button) !important;
        -moz-border-radius: var(--border-radius-button) !important;
        -webkit-border-radius: var(--border-radius-button) !important;
        transition: var(--general-transition);
    }

        .app-dropdown a.dropdown-toggle:focus,
        .app-dropdown a.dropdown-toggle:focus-visible,
        .app-dropdown a.dropdown-toggle:hover {
            border-color: var(--primary-color);
            background-color: var(--light-green-glass3);
        }

.select2-container-multi .select2-choices {
    border: none !important;
}

ul.select2-choices {
    background-color: var(--transparent-background) !important;
}

.select2-container-multi.select2-dropdown-open .select2-choices,
.select2-container-multi.select2-container-active .select2-choices {
    border: none !important;
}

li.select2-search-choice {
    background: var(--primary-color) !important;
    border: 1px solid var(--primary-color) !important;
    padding: 5px 10px !important;
    -webkit-border-radius: unset !important;
    -moz-border-radius: unset !important;
    border-radius: unset !important;
    margin-inline-end: var(--space-s) !important;
}

    li.select2-search-choice > div {
        color: var(--primary-text-color) !important;
        padding-inline-start: 8px;
    }

li.select2-search-field {
    width: 100%;
    margin-block-start: 3.5em !important;
}

.select2-container.select2-container-multi {
    width: 100%;
    border: none !important;
}

ul.select2-choices > li.select2-search-field > input {
    border: 1px solid var(--ternary-color) !important;
    -webkit-border-radius: unset !important;
    -moz-border-radius: unset !important;
    border-radius: unset !important;
    width: 100% !important;
    background-color: var(--primary-text-color) !important;
}

.select2-container-multi .select2-choices .select2-search-field input {
    background-color: var(--primary-text-color) !important;
}

a.breadcrumb-link {
    color: var(--secondary-text-color);
    font-family: var(--app-font-family);
    font-size: -webkit-calc(var(--app-font-size) + 7px);
    font-size: -moz-calc(var(--app-font-size) + 7px);
    font-size: calc(var(--app-font-size) + 7px);
    font-weight: 300 !important;
    text-decoration: none;
}

ul.pagination > li:not(.active) > a {
    margin-block-start: 2px;
}

#menuAdmin > ul.sub-menu > li.active {
    color: var(--secondary-color);
}

    #menuAdmin > ul.sub-menu > li.active > a {
        background: var(--transparent-background) !important;
        color: var(--primary-color) !important;
    }

i.icon,
a.icon {
    color: var(--ternary-color);
    margin-inline-end: 5px;
    font-weight: var(--app-font-weight);
    font-size: var(--app-font-size);
}

    a.icon:hover {
        text-decoration: none;
        opacity: 0.4;
    }

.dropdown-menu .dropdown-menu-list.scroller {
    padding-inline-end: 0 !important;
    padding-inline-start: 0;
    list-style: none;
}

.dropdown-menu.notification li > a .time {
    font-size: -webkit-calc((var(--app-font-size) * 1) - 1px);
    font-size: -moz-calc((var(--app-font-size) * 1) - 1px);
    font-size: calc((var(--app-font-size) * 1) - 1px);
    font-weight: 600;
    text-align: right;
    font-style: italic;
}

.header .nav > li > .dropdown-menu:before {
    position: absolute;
    top: -7px;
    right: 9px;
    display: inline-block !important;
    border-right: 7px solid var(--transparent-background);
    border-bottom: 7px solid var(--ternary-color);
    border-left: 7px solid var(--transparent-background);
    border-bottom-color: rgba(0, 0, 0, 0.2);
    content: "";
}

.header .nav > li > .dropdown-menu:after {
    position: absolute;
    top: -6px;
    right: 10px;
    display: inline-block !important;
    border-right: 6px solid var(--transparent-background);
    border-bottom: 6px solid var(--secondary-text-color);
    border-left: 6px solid var(--transparent-background);
    content: "";
}

input.placeholder,
textarea.placeholder {
    color: var(--ternary-color) !important;
}

.control-label {
    font-weight: 450 !important;
    font-family: var(--app-font-family-medium) !important;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -moz-box-flex: 1;
    flex: 1 1 auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-content: center;
    align-content: center;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -moz-box-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center;
    gap: var(--space-s);
}

    .control-label .required {
        color: var(--error-color);
        font-size: -webkit-calc((var(--app-font-size) * 1) - 1px);
        font-size: -moz-calc((var(--app-font-size) * 1) - 1px);
        font-size: calc((var(--app-font-size) * 1) - 1px);
        padding-inline-start: var(--space-3xs);
    }

    .control-label > span {
        width: var(--space-mega);
        font-family: var(--app-font-family-medium);
    }

    .control-label > .app-dropdown {
        -webkit-box-flex: 1;
        -webkit-flex: 1 0 auto;
        -moz-box-flex: 1;
        flex: 1 0 auto;
    }

        .control-label > .app-dropdown a.dropdown-toggle {
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            -moz-box-flex: 1;
            flex: 1;
            padding: var(--space-2xs) var(--space-s) !important;
            color: var(--primary-accent-text-color) !important;
            background-color: var(--primary-text-color);
            background-clip: border-box !important;
        }

    .control-label ul.dropdown-menu,
    .answer-body ul.dropdown-menu {
        inset: unset !important;
        -webkit-transform: unset !important;
        -moz-transform: unset !important;
        -o-transform: unset !important;
        transform: unset !important;
        margin-block-start: calc(var(--space-l) + var(--space-3xs)) !important;
    }

.answer-body ul.dropdown-menu {
}

.dropdown-toggle.show {
    -webkit-box-shadow: var(--shadow-primary-accent-color-elevation-low);
    -moz-box-shadow: var(--shadow-primary-accent-color-elevation-low);
    box-shadow: var(--shadow-primary-accent-color-elevation-low);
    -webkit-transition: var(--general-transition);
    -o-transition: var(--general-transition);
    -moz-transition: var(--general-transition);
    transition: var(--general-transition);
    border-color: var(--primary-color) !important;
}

.answer .dropdown-toggle.show {
    -webkit-box-shadow: unset !important;
    -moz-box-shadow: unset !important;
    box-shadow: unset !important;
}

.form {
    padding: 0 !important;
}

.form-group .checkbox {
    padding-inline-start: 0;
}

.modal-header {
    -webkit-box-orient: horizontal;
    /*-webkit-box-direction: reverse;*/
    /*-webkit-flex-direction: row-reverse;*/
    -moz-box-orient: horizontal;
    /*-moz-box-direction: reverse;*/
    /*flex-direction: row-reverse;*/
    color: var(--primary-color);
    border-bottom: var(--primary-accent-color-border) !important;
    -webkit-border-radius: unset !important;
    -moz-border-radius: unset !important;
    border-radius: unset !important;
    padding: var(--space-s) var(--space-l) !important;
}

.modal-title {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center;
    gap: var(--space-s);
}

.bootbox-body {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    flex-direction: column;
    width: 100%;
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 auto;
    -moz-box-flex: 1;
    flex: 1 0 auto;
    gap: var(--space-s);
    font-weight: 500;
    word-break: break-word;
}

    .bootbox-body:has(> .logout-countdown) {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
        -moz-box-orient: horizontal;
        -moz-box-direction: normal;
        flex-direction: row;
        gap: 0.75ch;
    }

.special-discount-container,
.smp-price-update,
.product-notes {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-flow: column nowrap;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    flex-flow: column nowrap;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -moz-box-flex: 1;
    flex: 1 1 auto;
    gap: var(--space-s);
}

    .special-discount-container > div,
    .smp-price-update > div,
    .product-notes > div {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-flow: column nowrap;
        -moz-box-orient: vertical;
        -moz-box-direction: normal;
        flex-flow: column nowrap;
        -webkit-box-flex: 1;
        -webkit-flex: 1 1 auto;
        -moz-box-flex: 1;
        flex: 1 1 auto;
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-align: stretch;
        -webkit-align-items: stretch;
        -moz-box-align: stretch;
        align-items: stretch;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -moz-box-pack: center;
        justify-content: center;
        -webkit-align-content: stretch;
        align-content: stretch;
        gap: var(--space-2xs);
    }

        .smp-price-update > div.auto-carriage {
            display: flex;
            flex-direction: row;
            padding: unset;
            align-content: center;
            align-items: center;
            justify-content: flex-start;
        }

            .smp-price-update > div.auto-carriage > span {
                flex: 0 0 fit-content;
            }

    .special-discount-container .quote-total {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

        .special-discount-container .quote-total > div {
            display: flex;
            flex-direction: row;
        }

    .special-discount-container span,
    .smp-price-update span,
    .product-notes span {
        font-family: var(--app-font-family-medium);
    }

    .special-discount-container span,
    .smp-price-update span,
    .smp-price-update textarea,
    .product-notes span,
    .product-notes textarea {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: flex;
        -webkit-box-flex: 1;
        -webkit-flex: 1 1 auto;
        -moz-box-flex: 1;
        flex: 1 1 auto;
    }

    .product-notes > .product-image {
        align-items: center;
    }

        .product-notes > .product-image img {
            width: var(--space-mega);
            box-shadow: var(--shadow-primary-color-elevation-low);
            -webkit-transition: var(--general-transition);
            -o-transition: var(--general-transition);
            -moz-transition: var(--general-transition);
            transition: var(--general-transition);
        }

            .product-notes > .product-image img:hover,
            .product-notes > .product-image img:focus-visible {
                box-shadow: var(--shadow-primary-color-elevation-medium);
            }

.widget#productDetailsWidget {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center;
}

.side-menu-bottom {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -moz-box-pack: end;
    justify-content: flex-end;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -moz-box-align: stretch;
    align-items: stretch;
    gap: var(--space-s);
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 auto;
    -moz-box-flex: 1;
    flex: 1 0 auto;
}

    .side-menu-bottom > button {
        width: 100% !important;
        gap: var(--space-s);
        padding: var(--space-xs) var(--space-s) !important;
        flex-wrap: wrap;
    }

        .side-menu-bottom > button h4 {
            margin-block-end: unset;
        }

.page-sidebar-menu-collapse {
    display: none !important;
}

    .page-sidebar-menu-collapse > span {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: flex;
        -webkit-box-pack: end;
        -webkit-justify-content: flex-end;
        -moz-box-pack: end;
        justify-content: flex-end
    }

form.admin-form {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    flex-direction: column;
    -webkit-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    justify-content: center;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -moz-box-align: stretch;
    align-items: stretch;
    gap: var(--space-l);
}

.no-space-between {
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -moz-box-pack: start;
    justify-content: flex-start;
}

.header-selections.section-end.button-primary {
    background: var(--secondary-color-glass) !important;
    padding: unset;
    -webkit-box-flex: 0;
    -webkit-flex: 0;
    -moz-box-flex: 0;
    flex: 0;
    backdrop-filter: var(--hover-backdrop-filter-glass) !important;
}

    .header-selections.section-end.button-primary:has(> h4) {
        padding: var(--space-2xs) var(--space-s);
        color: var(--secondary-accent-text-color) !important;
    }

        .header-selections.section-end.button-primary:has(> h4):hover {
            cursor: unset;
        }

    .header-selections.section-end.button-primary:has(> .dropdown-hover-button) {
        align-self: flex-end !important;
        font-size: calc(1.5 * var(--app-font-size));
        font-weight: calc(var(--app-font-weight) * 1.25) !important;
        font-family: var(--app-font-family-title) !important;
        position: relative;
    }

    .header-selections.section-end.button-primary .dropdown-hover-content a {
        font-size: calc(1.5 * var(--app-font-size));
        font-weight: calc(var(--app-font-weight) * 1.25) !important;
        font-family: var(--app-font-family-title) !important;
    }

.dropdown-hover-button {
    color: var(--secondary-accent-text-color) !important;
    padding: var(--space-2xs) var(--space-s);
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
    -webkit-flex-flow: row nowrap !important;
    -moz-box-orient: horizontal !important;
    -moz-box-direction: normal !important;
    flex-flow: row nowrap !important;
}

.dropdown-hover {
    position: relative;
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: -moz-box !important;
    display: flex !important;
}

/*.dropdown-hover-content {
    display: none !important;
    position: absolute;
    top: var(--space-xl);
    z-index: auto;
    border: var(--secondary-color-border);
    -webkit-border-radius: var(--border-radius-dropdown) !important;
    -moz-border-radius: var(--border-radius-dropdown) !important;
    border-radius: var(--border-radius-dropdown) !important;
}*/

.dropdown-hover-content {
    /* Remove the display: none !important; so element is rendered */
    position: absolute;
    top: var(--space-xl);
    z-index: auto;
    border: var(--secondary-color-border);
    border-radius: var(--border-radius-dropdown) !important;
    /* Initial hidden state */
    opacity: 0;
    transform: translateY(var(--space-l));
    pointer-events: none; /* Prevent interaction when hidden */
    transition: var(--general-transition);
}

    .dropdown-hover-content a {
        padding: var(--space-3xs) var(--space-xs);
        text-decoration: none;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        display: -webkit-box !important;
        display: -webkit-flex !important;
        display: -moz-box !important;
        display: flex !important;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -moz-box-align: center;
        align-items: center;
        gap: var(--space-xs);
    }

        .dropdown-hover-content a:hover {
            color: var(--secondary-text-color) !important;
            background-color: var(--secondary-accent-color) !important;
        }

    .dropdown-hover-content:hover,
    .dropdown-hover-content:focus-visible,
    .dropdown-hover:hover .dropdown-hover-content,
    .dropdown-hover:focus-visible .dropdown-hover-content {
        display: -webkit-box !important;
        display: -webkit-flex !important;
        display: -moz-box !important;
        display: flex !important;
        background-color: var(--secondary-color);
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        gap: var(--space-2xs) !important;
        padding: var(--space-2xs) 0;
        z-index: auto;
        border-radius: var(--border-radius-dropdown) !important;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto; /* Allow interaction now */
    }

.action-buttons {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    gap: var(--space-s);
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
    -moz-box-orient: horizontal;
    -moz-box-direction: reverse;
    flex-direction: row-reverse;
}

.no-access-message {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center;
}

    .no-access-message > span {
        color: var(--error-color);
    }

.tg-backdrop {
    pointer-events: none !important;
}

.hags-menu-container {
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: -moz-box !important;
    display: flex !important;
    -webkit-box-pack: center !important;
    -webkit-justify-content: center !important;
    -moz-box-pack: center !important;
    justify-content: center !important;
    padding: var(--space-s) var(--space-l) !important;
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -webkit-flex-flow: column nowrap !important;
    -moz-box-orient: vertical !important;
    -moz-box-direction: normal !important;
    flex-flow: column nowrap !important;
    -webkit-box-align: stretch !important;
    -webkit-align-items: stretch !important;
    -moz-box-align: stretch !important;
    align-items: stretch !important;
    background-color: var(--white) !important;
}

.searched-products-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-flow: column nowrap;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    flex-flow: column nowrap;
    border: var(--ternary-color-border) !important;
    background-color: var(--general-background);
    overflow-y: auto;
    max-height: -webkit-calc(var(--space-mega) * 2);
    max-height: -moz-calc(var(--space-mega) * 2);
    max-height: calc(var(--space-mega) * 2);
    position: absolute;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    flex: 1;
    z-index: 3;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -moz-box-align: stretch;
    align-items: stretch;
    -webkit-transition: var(--general-transition);
    -o-transition: var(--general-transition);
    -moz-transition: var(--general-transition);
    transition: var(--general-transition);
}

    .searched-products-container:hover {
        -webkit-box-shadow: unset;
        -moz-box-shadow: unset;
        box-shadow: unset;
    }

.searched-product {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row nowrap;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    flex-flow: row nowrap;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -moz-box-align: stretch;
    align-items: stretch;
    gap: var(--space-2xs);
    -webkit-box-flex: 0;
    -webkit-flex: 0;
    -moz-box-flex: 0;
    flex: 0;
    border-bottom: var(--ternary-color-border) !important;
    -webkit-border-radius: unset !important;
    -moz-border-radius: unset !important;
    border-radius: unset !important;
    padding: var(--space-2xs) var(--space-s);
    -webkit-transition: var(--general-transition);
    -o-transition: var(--general-transition);
    -moz-transition: var(--general-transition);
    transition: var(--general-transition);
    z-index: 4;
}

    .searched-product:last-of-type {
        border-bottom: unset !important;
    }

    .searched-product:hover {
        background-color: var(--primary-accent-color);
        background-clip: padding-box;
    }

.searched-product-icon {
    border: var(--primary-color-border);
    -webkit-border-radius: var(--border-radius-small) !important;
    -moz-border-radius: var(--border-radius-small) !important;
    border-radius: var(--border-radius-small) !important;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center;
    background-color: var(--primary-text-color);
}

    .searched-product-icon > img {
        width: calc(0.5 * var(--space-mega));
    }

.searched-product-details {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-flow: column nowrap;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    flex-flow: column nowrap;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -moz-box-flex: 1;
    flex: 1 1 auto;
    gap: var(--space-2xs);
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -moz-box-align: stretch;
    align-items: stretch;
}

.spd-section {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    justify-content: space-between;
    -webkit-align-content: stretch;
    align-content: stretch;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -moz-box-align: stretch;
    align-items: stretch;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    flex: 1;
    gap: var(--space-s);
}

.spd-cost {
    font-weight: 500;
    font-size: -webkit-calc(var(--app-font-size)* 1.4);
    font-size: -moz-calc(var(--app-font-size)* 1.4);
    font-size: calc(var(--app-font-size)* 1.4);
}

.searched-product-short {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-flow: column nowrap;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    flex-flow: column nowrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    justify-content: center;
    gap: var(--space-2xs);
    flex: 1;
    align-items: flex-start;
}

    .searched-product-short > span:first-of-type {
        display: flex;
        flex-direction: row;
        gap: var(--space-s);
        align-items: center;
        justify-content: flex-start;
        font-weight: 500;
        font-size: -webkit-calc(var(--app-font-size)* 1.25);
        font-size: -moz-calc(var(--app-font-size)* 1.25);
        font-size: calc(var(--app-font-size)* 1.25);
        flex: 1;
        width: 100%;
    }

        .searched-product-short > span:first-of-type > span:first-of-type {
            margin-inline-end: auto;
        }

.searched-product-buttons {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row nowrap;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    flex-flow: row nowrap;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -moz-box-align: stretch;
    align-items: stretch;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    justify-content: center;
    -webkit-align-content: center;
    align-content: center;
    gap: var(--space-xs);
    font-size: -webkit-calc(var(--app-font-size)* 0.85);
    font-size: -moz-calc(var(--app-font-size)* 0.85);
    font-size: calc(var(--app-font-size)* 0.85);
}

    .searched-product-buttons:hover {
        cursor: default;
    }

    .searched-product-buttons > div {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-flow: column nowrap;
        -moz-box-orient: vertical;
        -moz-box-direction: normal;
        flex-flow: column nowrap;
        -webkit-align-content: center;
        align-content: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -moz-box-pack: center;
        justify-content: center;
        -webkit-box-align: stretch;
        -webkit-align-items: stretch;
        -moz-box-align: stretch;
        align-items: stretch;
        border: var(--secondary-color-border);
        -webkit-border-radius: var(--border-radius-small) !important;
        -moz-border-radius: var(--border-radius-small) !important;
        border-radius: var(--border-radius-small) !important;
        padding: var(--space-3xs);
        gap: var(--space-3xs);
        background-color: var(--primary-text-color);
    }

        .searched-product-buttons > div > span {
            border-top: var(--secondary-color-border);
            -webkit-border-radius: unset !important;
            -moz-border-radius: unset !important;
            border-radius: unset !important;
            display: -webkit-box;
            display: -webkit-flex;
            display: -moz-box;
            display: flex;
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            -moz-box-flex: 1;
            flex: 1;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -moz-box-pack: center;
            justify-content: center;
            max-height: -webkit-min-content !important;
            max-height: -moz-min-content !important;
            max-height: min-content !important;
            padding-block-start: var(--space-3xs);
        }

    .searched-product-buttons i {
        font-size: -webkit-calc(var(--app-font-size) * 1.5);
        font-size: -moz-calc(var(--app-font-size) * 1.5);
        font-size: calc(var(--app-font-size) * 1.5);
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: flex;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -moz-box-pack: center;
        justify-content: center;
    }

.table-buttons button:hover,
.select-quote-td button:hover {
    /*color: var(--secondary-accent-text-color) !important;*/
    color: var(--primary-accent-text-color) !important;
    /*background-color: var(--secondary-color) !important;*/
    background: url("/images/Hags-Texture-Light-Green-Small.png") !important;
    /*border-color: var(--secondary-color) !important;*/
    border-color: var(--primary-accent-color) !important;
    box-shadow: var(--shadow-primary-accent-color-elevation-medium) !important;
}

    .table-buttons button:hover i,
    .select-quote-td button:hover i {
        color: var(--secondary-accent-text-color) !important;
    }

.table-product .spd-master-product,
.table-product .spd-group-anchor,
.searched-product .spd-group-anchor,
.searched-product .spd-master-product {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-flow: column nowrap;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    flex-flow: column nowrap;
    color: var(--primary-text-color);
    background-color: var(--ternary-color);
    border: var(--ternary-color-border);
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center;
    -webkit-transition: var(--general-transition);
    -o-transition: var(--general-transition);
    -moz-transition: var(--general-transition);
    transition: var(--general-transition);
    gap: var(--space-2xs);
    box-shadow: var(--shadow-ternary-color-elevation-low);
    padding: var(--space-3xs) var(--space-xs);
    border-radius: var(--border-radius-button) !important;
    font-size: var(--app-font-size) !important;
}

    .table-product .spd-master-product:focus-visible,
    .table-product .spd-master-product:hover,
    .table-product .spd-group-anchor:focus-visible,
    .table-product .spd-group-anchor:hover,
    .searched-product .spd-master-product:focus-visible,
    .searched-product .spd-master-product:hover,
    .searched-product .spd-group-anchor:focus-visible,
    .searched-product .spd-group-anchor:hover {
        cursor: pointer;
        box-shadow: var(--shadow-ternary-color-elevation-medium);
    }

.table-product .spd-master-product,
.table-product .spd-group-anchor {
    /*    display: inline-block !important;
    margin-inline-start: var(--space-3xs);*/
    /*margin-inline-start: auto;*/
    width: fit-content;
    margin-inline-end: var(--space-s);
}

.table-product td:has(> div > .spd-master-product),
.table-product td:has(> div > .spd-group-anchor) {
    /*    display: flex;
    flex-direction: row;
    gap: var(--space-s);
    align-items: center;
    justify-content: flex-start;*/
    line-height: var(--app-line-height) !important;
}

    .table-product td:has(> div > .spd-master-product) > div,
    .table-product td:has(> div > .spd-group-anchor) > div {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

        .table-product td:has(> div > .spd-master-product) > div > span:first-of-type,
        .table-product td:has(> div > .spd-group-anchor) > div > span:first-of-type {
            margin-inline-start: auto;
        }

.pulse {
    animation: pulse-animation 1.5s steps(5, jump-both);
    animation-iteration-count: 1;
}

@keyframes pulse-animation {
    0% {
        box-shadow: 0 0 0 0 hsl(130 17% 25%);
    }

    25% {
        box-shadow: 0 0 var(--space-xs) 0 hsl(130 17% 90%);
    }

    50% {
        box-shadow: 0 0 var(--space-3xs) 0 hsl(130 17% 25%);
    }

    75% {
        box-shadow: 0 0 var(--space-2xs) 0 hsl(130 17% 55%);
    }

    100% {
        box-shadow: 0 0 0 var(--space-xs) hsl(130 17% 100%);
    }
}

.button-bootbox-countdown {
    position: relative;
    overflow: hidden;
}

    .button-bootbox-countdown::after {
        content: "";
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: 0;
        width: 100%;
        height: 100%;
        border-radius: var(--border-radius-button);
        background: conic-gradient(hsl(131, 17.5%, 52.9%) 0deg, red 360deg);
        z-index: -2;
        animation: radialCountdown 5s linear forwards;
    }

@keyframes radialCountdown {
    0% {
        background: conic-gradient(hsl(131, 17.5%, 52.9%) 0deg, red 360deg);
    }

    25% {
        background: conic-gradient(hsl(131, 17.5%, 52.9%) 90deg, red 360deg);
    }

    50% {
        background: conic-gradient(hsl(131, 17.5%, 52.9%) 180deg, red 360deg);
    }

    75% {
        background: conic-gradient(hsl(131, 17.5%, 52.9%) 270deg, red 360deg);
    }

    100% {
        background: unset;
    }
}