:root {
    --brand-primary: #9ab13f;
    --brand-primary-hover: #83981f;
    --brand-primary-focus: 0 0 0 0.2rem rgb(119 138 25 / 30%);
    --brand-secondary: #F5AB22;
    --brand-secondary-hover: #EC971F;
    --highlight: #09afdf; /* highlight button background color */
    --highlight-hover: #0c9ec7; /* highlight button hover/focus/active background color */
    --brand-tertiary: #808285; /* should be a shade of grey */
    --brand-alt-active: #09afdf; /* just in case we want a color to indicate special active buttons */
    --brand-alt01: #666; /* just in case there are more colors but shouldn't be */
    --brand-alt02: #c8af81; /* just in case there are more colors but shouldn't be */
    --brand-logo: url(/images/logo_kall8.png); /* small logo for app header */
    --brand-logo-login: url(/images/logo_kall8.png); /* larger logo for login */
    --brand-login-container-image: url(/images/logo-watermark.png); /* background image for login credentials */
    --brand-logo-height: 37px; /* adjust size of logo */
    --brand-logo-width: 144px; /* if needed */
    --brand-headerbar-topmargin: 2px; /* vertical logo adjustment on top headerbar if needed */
    --gradient-dark: #E9563A; /* change if different from primary and secondary colors */
    --gradient-light: #F5AB22; /* change if different from primary and secondary colors */
    --brand-grid-pills-bg: #f4f8e1; /* set pills in table grid background color */
    --brand-grid-pills-text: #333; /* set pills in table grid text color */
    --brand-sidebar-menu-header-bg: #f4f8e1; /* set sidebar menu header background color */
    /*--brand-grid-pills-text: #555;*/ /* set pills in table grid text color */
    /*menu button adjustments for white label with their own button names */
    --cv-displayicon: inline-block; /* show/hide callview icon with display: none or inline-block */
    --ar-displayicon: inline-block; /* show/hide accuroute icon with display: none or inline-block */
    --rr-displayicon: inline-block; /* show/hide rapidrecall icon with display: none or inline-block */
    --cv-btnbottompad: 13px; /* adjusts callview button bottom positioning active line - 15px no icon or 13px with icon */
    --ar-btnbottompad: 13px; /* adjusts accuroute button bottom positioning active line - 15px no icon or 13px with icon */
    --rr-btnbottompad: 13px; /* adjusts rapidrecall button bottom positioning active line - 15px no icon or 13px with icon */
    --cv-displaybtnsubtext: inline-block; /* show/hide callview btn subtext with display: none; or inline-block */
    --ar-displaybtnsubtext: inline-block; /* show/hide accuroute btn subtext with display: none; or inline-block */
    --rr-displaybtnsubtext: inline-block; /* show/hide rapidrecall btn subtext with display: none; or inline-block */
    --cv-displaybtntext: inline-block; /* show/hide callview button main text */
    --ar-displaybtntext: inline-block; /* show/hide accuroute button main text */
    --rr-displaybtntext: inline-block; /* show/hide rapidrecall button main text */
    --cv-btntext: ""; /* the new brand button one text */
    --ar-btntext: ""; /* the new brand button two text */
    --rr-btntext: ""; /* the new brand button three text */
}

.ringsquared {
    --brand-primary: #00B4D8;
    --brand-primary-hover: #009FBF;
    --brand-primary-focus: 0 0 0 0.2rem rgb(0 180 216 / 30%);
    --brand-secondary: #150044;
    --brand-secondary-hover: #2E0091;
    --highlight: #09afdf; /* highlight button background color */
    --highlight-hover: #0c9ec7; /* highlight button hover/focus/active background color */
    --brand-tertiary: #808285; /* should be a shade of grey */
    --brand-alt-active: #09afdf; /* just in case we want a color to indicate special active buttons */
    --brand-alt01: black; /* just in case there are more colors but shouldn't be */
    --brand-alt02: skyblue; /* just in case there are more colors but shouldn't be */
    --brand-logo: url(/images/brands/RS-Logo-Blue-Dark.png);
    --brand-logo-login: url(../images/brands/RS-Logo-Blue-Dark.png);
    --brand-login-container-image: none; /* background image for login credentials */
    --brand-logo-height: 2.6rem; /* adjust size of logo */
    --brand-logo-width: 190px; /* if needed */
    --brand-headerbar-topmargin: 1px; /* vertical logo adjustment on top headerbar if needed */
    --gradient-dark: #00B4D8; /* change if different from primary and secondary colors */
    --gradient-light: skyblue; /* change if different from primary and secondary colors */
    --brand-grid-pills-bg: skyblue; /* set pills in table grid background color */
    --brand-grid-pills-text: #333; /* set pills in table grid text color */
    --brand-sidebar-menu-header-bg: skyblue; /* set sidebar menu header background color */
    /* hiding login messaging elements specific to us */
    --hide: none; /* hide login elements with display none removing vertical space */
    /*menu button adjustments for white label with their own button names */
    --cv-displayicon: inline-block; /* show/hide callview icon with display: none or inline-block */
    --ar-displayicon: inline-block; /* show/hide accuroute icon with display: none or inline-block */
    --rr-displayicon: inline-block; /* show/hide rapidrecall icon with display: none or inline-block */
    --cv-btnbottompad: 13px; /* adjusts callview button bottom positioning active line - 15px no icon or 13px with icon */
    --ar-btnbottompad: 13px; /* adjusts accuroute button bottom positioning active line - 15px no icon or 13px with icon */
    --rr-btnbottompad: 13px; /* adjusts rapidrecall button bottom positioning active line - 15px no icon or 13px with icon */
    --cv-displaybtnsubtext: inline-block; /* show/hide callview btn subtext with display: none; or inline-block */
    --ar-displaybtnsubtext: inline-block; /* show/hide accuroute btn subtext with display: none; or inline-block */
    --rr-displaybtnsubtext: inline-block; /* show/hide rapidrecall btn subtext with display: none; or inline-block */
    --cv-displaybtntext: inline-block; /* show/hide callview button main text */
    --ar-displaybtntext: inline-block; /* show/hide accuroute button main text */
    --rr-displaybtntext: inline-block; /* show/hide rapidrecall button main text */
    --cv-btntext: ""; /* the new brand button one text */
    --ar-btntext: ""; /* the new brand button two text */
    --rr-btntext: ""; /* the new brand button three text */
}

.ringboost {
    --brand-primary: #466da4;
    --brand-primary-hover: #2687c8;
    --brand-primary-focus: 0 0 0 0.2rem rgb(0 180 216 / 30%);
    --brand-secondary: #F5AB22;
    --brand-secondary-hover: #EC971F;
    --highlight: #09afdf; /* highlight button background color */
    --highlight-hover: #0c9ec7; /* highlight button hover/focus/active background color */
    --brand-tertiary: #808285; /* should be a shade of grey */
    --brand-alt-active: #09afdf; /* just in case we want a color to indicate special active buttons */
    --brand-alt01: black; /* just in case there are more colors but shouldn't be */
    --brand-alt02: skyblue; /* just in case there are more colors but shouldn't be */
    --brand-logo: url(/images/brands/RingBoost.png);
    --brand-logo-login: url(../images/brands/RingBoost.png);
    --brand-login-container-image: none; /* background image for login credentials */
    --brand-logo-height: 2.6rem; /* adjust size of logo */
    --brand-logo-width: 190px; /* if needed */
    --brand-headerbar-topmargin: 1px; /* vertical logo adjustment on top headerbar if needed */
    --gradient-dark: #00B4D8; /* change if different from primary and secondary colors */
    --gradient-light: skyblue; /* change if different from primary and secondary colors */
    --brand-grid-pills-bg: #c2e2f3; /* set pills in table grid background color */
    --brand-grid-pills-text: #333; /* set pills in table grid text color */
    --brand-sidebar-menu-header-bg: #c8d3e4; /* set sidebar menu header background color */
    /* hiding login messaging elements specific to us */
    --hide: none; /* hide login elements with display none removing vertical space */
    /*menu button adjustments for white label with their own button names */
    --cv-displayicon: inline-block; /* show/hide callview icon with display: none or inline-block */
    --ar-displayicon: inline-block; /* show/hide accuroute icon with display: none or inline-block */
    --rr-displayicon: inline-block; /* show/hide rapidrecall icon with display: none or inline-block */
    --cv-btnbottompad: 13px; /* adjusts callview button bottom positioning active line - 15px no icon or 13px with icon */
    --ar-btnbottompad: 13px; /* adjusts accuroute button bottom positioning active line - 15px no icon or 13px with icon */
    --rr-btnbottompad: 13px; /* adjusts rapidrecall button bottom positioning active line - 15px no icon or 13px with icon */
    --cv-displaybtnsubtext: inline-block; /* show/hide callview btn subtext with display: none; or inline-block */
    --ar-displaybtnsubtext: inline-block; /* show/hide accuroute btn subtext with display: none; or inline-block */
    --rr-displaybtnsubtext: inline-block; /* show/hide rapidrecall btn subtext with display: none; or inline-block */
    --cv-displaybtntext: inline-block; /* show/hide callview button main text */
    --ar-displaybtntext: inline-block; /* show/hide accuroute button main text */
    --rr-displaybtntext: inline-block; /* show/hide rapidrecall button main text */
    --cv-btntext: ""; /* the new brand button one text */
    --ar-btntext: ""; /* the new brand button two text */
    --rr-btntext: ""; /* the new brand button three text */
    --home-banner-display: none; /* hide the kall8 banner card */
    --layout-footer-display: none; /* hide the footer div */
    --nav-option-display: none; /* hide the menu item */
    --contact-us-display: none; /* hide the ui options to contact support/sales */
}

.cambermarketing {
    --brand-primary: #547695;
    --brand-primary-hover: #7ca4c4;
    --brand-primary-focus: 0 0 0 0.2rem rgb(0 180 216 / 30%);
    --brand-secondary: #F5AB22;
    --brand-secondary-hover: #EC971F;
    --highlight: #09afdf; /* highlight button background color */
    --highlight-hover: #0c9ec7; /* highlight button hover/focus/active background color */
    --brand-tertiary: #808285; /* should be a shade of grey */
    --brand-alt-active: #09afdf; /* just in case we want a color to indicate special active buttons */
    --brand-alt01: black; /* just in case there are more colors but shouldn't be */
    --brand-alt02: skyblue; /* just in case there are more colors but shouldn't be */
    --brand-logo: url(/images/brands/cambermarketing.png);
    --brand-logo-login: url(../images/brands/cambermarketing.png);
    --brand-login-container-image: none; /* background image for login credentials */
    --brand-logo-height: 3rem; /* adjust size of logo */
    --brand-logo-width: 62px; /* if needed */
    --brand-headerbar-topmargin: 1px; /* vertical logo adjustment on top headerbar if needed */
    --gradient-dark: #00B4D8; /* change if different from primary and secondary colors */
    --gradient-light: skyblue; /* change if different from primary and secondary colors */
    --brand-grid-pills-bg: #d8e4ed; /* set pills in table grid background color */
    --brand-grid-pills-text: #333; /* set pills in table grid text color */
    --brand-sidebar-menu-header-bg: #d8e4ed; /* set sidebar menu header background color */
    /* hiding login messaging elements specific to us */
    --hide: none; /* hide login elements with display none removing vertical space */
    /*menu button adjustments for white label with their own button names */
    --cv-displayicon: inline-block; /* show/hide callview icon with display: none or inline-block */
    --ar-displayicon: inline-block; /* show/hide accuroute icon with display: none or inline-block */
    --rr-displayicon: inline-block; /* show/hide rapidrecall icon with display: none or inline-block */
    --cv-btnbottompad: 13px; /* adjusts callview button bottom positioning active line - 15px no icon or 13px with icon */
    --ar-btnbottompad: 13px; /* adjusts accuroute button bottom positioning active line - 15px no icon or 13px with icon */
    --rr-btnbottompad: 13px; /* adjusts rapidrecall button bottom positioning active line - 15px no icon or 13px with icon */
    --cv-displaybtnsubtext: inline-block; /* show/hide callview btn subtext with display: none; or inline-block */
    --ar-displaybtnsubtext: inline-block; /* show/hide accuroute btn subtext with display: none; or inline-block */
    --rr-displaybtnsubtext: inline-block; /* show/hide rapidrecall btn subtext with display: none; or inline-block */
    --cv-displaybtntext: inline-block; /* show/hide callview button main text */
    --ar-displaybtntext: inline-block; /* show/hide accuroute button main text */
    --rr-displaybtntext: inline-block; /* show/hide rapidrecall button main text */
    --cv-btntext: ""; /* the new brand button one text */
    --ar-btntext: ""; /* the new brand button two text */
    --rr-btntext: ""; /* the new brand button three text */
    --home-banner-display: none; /* hide the kall8 banner card */
    --layout-footer-display: none; /* hide the footer div */
    --nav-option-display: none; /* hide the menu item */
    --contact-us-display: none; /* hide the ui options to contact support/sales */
}

.nmc {
    --brand-primary: #b00408;
    --brand-primary-hover: #de5558;
    --brand-primary-focus: 0 0 0 0.2rem rgb(0 180 216 / 30%);
    --brand-secondary: #F5AB22;
    --brand-secondary-hover: #EC971F;
    --highlight: #de5558; /* highlight button background color */
    --highlight-hover: #b00408; /* highlight button hover/focus/active background color */
    --brand-tertiary: #808285; /* should be a shade of grey */
    --brand-alt-active: #09afdf; /* just in case we want a color to indicate special active buttons */
    --brand-alt01: black; /* just in case there are more colors but shouldn't be */
    --brand-alt02: skyblue; /* just in case there are more colors but shouldn't be */
    --brand-logo: url(/images/brands/nmc-logo.png);
    --brand-logo-login: url(../images/brands/nmc-logo.png);
    --brand-login-container-image: none; /* background image for login credentials */
    --brand-logo-height: 2.6rem; /* adjust size of logo */
    --brand-logo-width: 175px; /* if needed */
    --brand-headerbar-topmargin: 1px; /* vertical logo adjustment on top headerbar if needed */
    --gradient-dark: #00B4D8; /* change if different from primary and secondary colors */
    --gradient-light: skyblue; /* change if different from primary and secondary colors */
    --brand-grid-pills-bg: #e0aaab; /* set pills in table grid background color */
    --brand-grid-pills-text: #333; /* set pills in table grid text color */
    --brand-sidebar-menu-header-bg: #e0aaab; /* set sidebar menu header background color */
    /* hiding login messaging elements specific to us */
    --hide: none; /* hide login elements with display none removing vertical space */
    /*menu button adjustments for white label with their own button names */
    --cv-displayicon: inline-block; /* show/hide callview icon with display: none or inline-block */
    --ar-displayicon: inline-block; /* show/hide accuroute icon with display: none or inline-block */
    --rr-displayicon: inline-block; /* show/hide rapidrecall icon with display: none or inline-block */
    --cv-btnbottompad: 13px; /* adjusts callview button bottom positioning active line - 15px no icon or 13px with icon */
    --ar-btnbottompad: 13px; /* adjusts accuroute button bottom positioning active line - 15px no icon or 13px with icon */
    --rr-btnbottompad: 13px; /* adjusts rapidrecall button bottom positioning active line - 15px no icon or 13px with icon */
    --cv-displaybtnsubtext: inline-block; /* show/hide callview btn subtext with display: none; or inline-block */
    --ar-displaybtnsubtext: inline-block; /* show/hide accuroute btn subtext with display: none; or inline-block */
    --rr-displaybtnsubtext: inline-block; /* show/hide rapidrecall btn subtext with display: none; or inline-block */
    --cv-displaybtntext: inline-block; /* show/hide callview button main text */
    --ar-displaybtntext: inline-block; /* show/hide accuroute button main text */
    --rr-displaybtntext: inline-block; /* show/hide rapidrecall button main text */
    --cv-btntext: ""; /* the new brand button one text */
    --ar-btntext: ""; /* the new brand button two text */
    --rr-btntext: ""; /* the new brand button three text */
    --home-banner-display: none; /* hide the kall8 banner card */
    --layout-footer-display: none; /* hide the footer div */
    --nav-option-display: none; /* hide the menu item */
    --contact-us-display: none; /* hide the ui options to contact support/sales */
}

.eighthundredcars {
    --brand-primary: #466da4;
    --brand-primary-hover: #2687c8;
    --brand-primary-focus: 0 0 0 0.2rem rgb(0 180 216 / 30%);
    --brand-secondary: #F5AB22;
    --brand-secondary-hover: #EC971F;
    --highlight: #09afdf; /* highlight button background color */
    --highlight-hover: #2687c8; /* highlight button hover/focus/active background color */
    --brand-tertiary: #808285; /* should be a shade of grey */
    --brand-alt-active: #09afdf; /* just in case we want a color to indicate special active buttons */
    --brand-alt01: black; /* just in case there are more colors but shouldn't be */
    --brand-alt02: skyblue; /* just in case there are more colors but shouldn't be */
    --brand-logo: url(/images/brands/800cars.png);
    --brand-logo-login: url(../images/brands/800cars.png);
    --brand-login-container-image: none; /* background image for login credentials */
    --brand-logo-height: 2.6rem; /* adjust size of logo */
    --brand-logo-width: 194px; /* if needed */
    --brand-headerbar-topmargin: 1px; /* vertical logo adjustment on top headerbar if needed */
    --gradient-dark: #00B4D8; /* change if different from primary and secondary colors */
    --gradient-light: skyblue; /* change if different from primary and secondary colors */
    --brand-grid-pills-bg: #c2e2f3; /* set pills in table grid background color */
    --brand-grid-pills-text: #333; /* set pills in table grid text color */
    --brand-sidebar-menu-header-bg: #c8d3e4; /* set sidebar menu header background color */
    /* hiding login messaging elements specific to us */
    --hide: none; /* hide login elements with display none removing vertical space */
    /*menu button adjustments for white label with their own button names */
    --cv-displayicon: inline-block; /* show/hide callview icon with display: none or inline-block */
    --ar-displayicon: inline-block; /* show/hide accuroute icon with display: none or inline-block */
    --rr-displayicon: inline-block; /* show/hide rapidrecall icon with display: none or inline-block */
    --cv-btnbottompad: 13px; /* adjusts callview button bottom positioning active line - 15px no icon or 13px with icon */
    --ar-btnbottompad: 13px; /* adjusts accuroute button bottom positioning active line - 15px no icon or 13px with icon */
    --rr-btnbottompad: 13px; /* adjusts rapidrecall button bottom positioning active line - 15px no icon or 13px with icon */
    --cv-displaybtnsubtext: inline-block; /* show/hide callview btn subtext with display: none; or inline-block */
    --ar-displaybtnsubtext: inline-block; /* show/hide accuroute btn subtext with display: none; or inline-block */
    --rr-displaybtnsubtext: inline-block; /* show/hide rapidrecall btn subtext with display: none; or inline-block */
    --cv-displaybtntext: inline-block; /* show/hide callview button main text */
    --ar-displaybtntext: inline-block; /* show/hide accuroute button main text */
    --rr-displaybtntext: inline-block; /* show/hide rapidrecall button main text */
    --cv-btntext: ""; /* the new brand button one text */
    --ar-btntext: ""; /* the new brand button two text */
    --rr-btntext: ""; /* the new brand button three text */
    --home-banner-display: none; /* hide the kall8 banner card */
    --layout-footer-display: none; /* hide the footer div */
    --nav-option-display: none; /* hide the menu item */
    --contact-us-display: none; /* hide the ui options to contact support/sales */
}

.eighthundredsuccess {
    --brand-primary: #9ab13f;
    --brand-primary-hover: #83981f;
    --brand-primary-focus: 0 0 0 0.2rem rgb(0 180 216 / 30%);
    --brand-secondary: #F5AB22;
    --brand-secondary-hover: #EC971F;
    --highlight: #e6c52b; /* highlight button background color */
    --highlight-hover: #b89e22; /* highlight button hover/focus/active background color */
    --brand-tertiary: #808285; /* should be a shade of grey */
    --brand-alt-active: #09afdf; /* just in case we want a color to indicate special active buttons */
    --brand-alt01: black; /* just in case there are more colors but shouldn't be */
    --brand-alt02: skyblue; /* just in case there are more colors but shouldn't be */
    --brand-logo: url(/images/brands/800success_edit.png);
    --brand-logo-login: url(../images/brands/800success_edit.png);
    --brand-login-container-image: none; /* background image for login credentials */
    --brand-logo-height: 2.8rem; /* adjust size of logo */
    --brand-logo-width: 220px; /* if needed */
    --brand-headerbar-topmargin: 1px; /* vertical logo adjustment on top headerbar if needed */
    --gradient-dark: #00B4D8; /* change if different from primary and secondary colors */
    --gradient-light: skyblue; /* change if different from primary and secondary colors */
    --brand-grid-pills-bg: #f4f8e1; /* set pills in table grid background color */
    --brand-grid-pills-text: #333; /* set pills in table grid text color */
    --brand-sidebar-menu-header-bg: #f4f8e1; /* set sidebar menu header background color */
    /* hiding login messaging elements specific to us */
    --hide: none; /* hide login elements with display none removing vertical space */
    /*menu button adjustments for white label with their own button names */
    --cv-displayicon: inline-block; /* show/hide callview icon with display: none or inline-block */
    --ar-displayicon: inline-block; /* show/hide accuroute icon with display: none or inline-block */
    --rr-displayicon: inline-block; /* show/hide rapidrecall icon with display: none or inline-block */
    --cv-btnbottompad: 13px; /* adjusts callview button bottom positioning active line - 15px no icon or 13px with icon */
    --ar-btnbottompad: 13px; /* adjusts accuroute button bottom positioning active line - 15px no icon or 13px with icon */
    --rr-btnbottompad: 13px; /* adjusts rapidrecall button bottom positioning active line - 15px no icon or 13px with icon */
    --cv-displaybtnsubtext: inline-block; /* show/hide callview btn subtext with display: none; or inline-block */
    --ar-displaybtnsubtext: inline-block; /* show/hide accuroute btn subtext with display: none; or inline-block */
    --rr-displaybtnsubtext: inline-block; /* show/hide rapidrecall btn subtext with display: none; or inline-block */
    --cv-displaybtntext: inline-block; /* show/hide callview button main text */
    --ar-displaybtntext: inline-block; /* show/hide accuroute button main text */
    --rr-displaybtntext: inline-block; /* show/hide rapidrecall button main text */
    --cv-btntext: ""; /* the new brand button one text */
    --ar-btntext: ""; /* the new brand button two text */
    --rr-btntext: ""; /* the new brand button three text */
    --home-banner-display: none; /* hide the kall8 banner card */
    --layout-footer-display: none; /* hide the footer div */
    --nav-option-display: none; /* hide the menu item */
    --contact-us-display: none; /* hide the ui options to contact support/sales */
}

.thecalldata {
    --brand-primary: #466da4;
    --brand-primary-hover: #2687c8;
    --brand-primary-focus: 0 0 0 0.2rem rgb(0 180 216 / 30%);
    --brand-secondary: #F5AB22;
    --brand-secondary-hover: #EC971F;
    --highlight: #09afdf; /* highlight button background color */
    --highlight-hover: #2687c8; /* highlight button hover/focus/active background color */
    --brand-tertiary: #808285; /* should be a shade of grey */
    --brand-alt-active: #09afdf; /* just in case we want a color to indicate special active buttons */
    --brand-alt01: black; /* just in case there are more colors but shouldn't be */
    --brand-alt02: skyblue; /* just in case there are more colors but shouldn't be */
    --brand-logo: url(/images/brands/thecalldata.png);
    --brand-logo-login: url(../images/brands/thecalldata.png);
    --brand-login-container-image: none; /* background image for login credentials */
    --brand-logo-height: 2.6rem; /* adjust size of logo */
    --brand-logo-width: 216px; /* if needed */
    --brand-headerbar-topmargin: 1px; /* vertical logo adjustment on top headerbar if needed */
    --gradient-dark: #00B4D8; /* change if different from primary and secondary colors */
    --gradient-light: skyblue; /* change if different from primary and secondary colors */
    --brand-grid-pills-bg: #c2e2f3; /* set pills in table grid background color */
    --brand-grid-pills-text: #333; /* set pills in table grid text color */
    --brand-sidebar-menu-header-bg: #c8d3e4; /* set sidebar menu header background color */
    /* hiding login messaging elements specific to us */
    --hide: none; /* hide login elements with display none removing vertical space */
    /*menu button adjustments for white label with their own button names */
    --cv-displayicon: inline-block; /* show/hide callview icon with display: none or inline-block */
    --ar-displayicon: inline-block; /* show/hide accuroute icon with display: none or inline-block */
    --rr-displayicon: inline-block; /* show/hide rapidrecall icon with display: none or inline-block */
    --cv-btnbottompad: 13px; /* adjusts callview button bottom positioning active line - 15px no icon or 13px with icon */
    --ar-btnbottompad: 13px; /* adjusts accuroute button bottom positioning active line - 15px no icon or 13px with icon */
    --rr-btnbottompad: 13px; /* adjusts rapidrecall button bottom positioning active line - 15px no icon or 13px with icon */
    --cv-displaybtnsubtext: inline-block; /* show/hide callview btn subtext with display: none; or inline-block */
    --ar-displaybtnsubtext: inline-block; /* show/hide accuroute btn subtext with display: none; or inline-block */
    --rr-displaybtnsubtext: inline-block; /* show/hide rapidrecall btn subtext with display: none; or inline-block */
    --cv-displaybtntext: inline-block; /* show/hide callview button main text */
    --ar-displaybtntext: inline-block; /* show/hide accuroute button main text */
    --rr-displaybtntext: inline-block; /* show/hide rapidrecall button main text */
    --cv-btntext: ""; /* the new brand button one text */
    --ar-btntext: ""; /* the new brand button two text */
    --rr-btntext: ""; /* the new brand button three text */
    --home-banner-display: none; /* hide the kall8 banner card */
    --layout-footer-display: none; /* hide the footer div */
    --nav-option-display: none; /* hide the menu item */
    --contact-us-display: none; /* hide the ui options to contact support/sales */
}


/* element styles that use these variables */

/* global styles */
/* brand link color default */
a { color: var(--brand-primary); }
a:hover { color: var(--brand-primary-hover); text-decoration: none; }
a.highlight { color: var(--highlight); }
a.highlight:hover { color: var(--highlight-hover); text-decoration: none; }
.text-brand { color: var(--brand-primary); }
.text-highlight { color: var(--highlight)!important; }
.text-highlight:hover { color: var(--brand-alt01)!important;}
.text-highlight:hover { color: var(--highlight-hover)!important;}

/* login page branding */
.login-logo {
    background-image: var(--brand-logo-login);
    background-repeat: no-repeat;
    /*background-size: 24rem;
    height: 11rem;
    margin: 0 auto;*/
    /* above items to be determined */
}
.login-container {
    background-image: var(--brand-login-container-image);
}

/* header branding */
.navbar-logo {
    background-image: var(--brand-logo);
    background-size: contain;
    margin-top: var(--brand-headerbar-topmargin);
    width: var(--brand-logo-width); /* only use if needed */
    height: var(--brand-logo-height);
}

.banner-hide {
    display: var(--home-banner-display);
    border: none;
}

.nav-option-hide {
    display: var(--nav-option-display);
}

.footer-hide {
    display: var(--layout-footer-display);
}

.contact-us-hide {
    display: var(--contact-us-display);
}

/* button branding */
.btn-brand {
    color: #fff !important;
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

    .btn-brand:hover, .btn-brand.active {
        background-color: var(--brand-primary-hover);
        border-color: var(--brand-primary-hover);
        color: white;
    }

    .btn-brand:active, .btn-brand.active, .open > .dropdown-toggle.btn-brand {
        color: #fff;
        background-color: var(--brand-primary-hover);
        border-color: var(--brand-primary-hover);
        outline: none;
    }

    .btn-brand:focus, .btn-brand.focus {
        background-color: var(--brand-primary-hover);
        border-color: var(--brand-primary-hover);
        box-shadow: none;
    }

.btn-brand-secondary {
    color: #fff;
    background-color: var(--brand-secondary);
    border-color: var(--brand-secondary-hover);
}

    .btn-brand-secondary:hover, .btn-brand-secondary:focus, .btn-brand-secondary.focus, .btn-brand-secondary:active, .btn-brand-secondary.active, .open > .dropdown-toggle.btn-brand-secondary {
        color: #fff;
        background-color: var(--brand-secondary-hover);
        border-color: var(--brand-secondary-hover);
    }
.btn-highlight {
    color: #fff;
    background-color: #09afdf;
    border-color: #0c9ec7;
}

    .btn-highlight:hover, .btn-highlight:focus, .btn-highlight.focus, .btn-highlight:active, .btn-highlight.active, .open > .dropdown-toggle.btn-highlight {
        color: #fff;
        background-color: #0c9ec7;
        border-color: #0c9ec7;
    }

.btn-brand-light {
    color: #fff;
    background-color: var(--brand-secondary);
    border-color: var(--brand-secondary);
}

    .btn-brand-light:hover, .btn-brand-light.active {
        color: #fff;
        background-color: var(--brand-secondary-hover);
        border-color: var(--brand-secondary-hover);
        box-shadow: none !important;
    }
    .btn-brand-light:active, .btn-brand-light.active, .open > .dropdown-toggle.btn-brand-light {
        color: #fff;
        background-color: var(--brand-secondary-hover);
        border-color: var(--brand-secondary-hover);
        outline: none;
    }

    .btn-brand-light:focus, .btn-brand-light.focus {
        background-color: var(--brand-secondary-hover);
        border-color: var(--brand-secondary-hover);
        box-shadow: none;
    }
    /* special css for engaged note button in Call Recording and Vmail/Fax message grids */
        .btn-brand-light:focus.buttonEngaged {
            background-color: var(--brand-alt-active);
            outline: var(--brand-alt-active);
            border-color: var(--brand-alt-active);
            box-shadow: none !important;
        }

.btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus {
    /*outline: 5px auto -webkit-focus-ring-color;*/
    /*outline-offset: -2px;*/
    outline: none;
    outline-offset: 0;
    /*background-color: #c64c35!important;*/
}

.btn.btn-link {
    color: var(--brand-primary);
    text-decoration: none;
    background-color: transparent;
}

    .btn.btn-link:hover, .btn.btn-link:focus, .btn.btn-link:active {
        color: #333; /* or #666; or #b7442e; */
        text-decoration: none;
    }

.btn.btn-link-logout {
    color: var(--brand-primary);
    text-decoration: none;
    background-color: transparent;
}

    .btn.btn-link-logout:hover, .btn.btn-link-logout:focus, .btn.btn-link-logout:active {
        color: var(--brand-primary-hover); /* #333; or #666; or #b7442e; */
        text-decoration: none;
    }


/*.btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus {*/
    /*outline: 5px auto -webkit-focus-ring-color;*/
    /*outline-offset: -2px;*/
    /*outline: none;
    outline-offset: 0;*/
    /*background-color: #c64c35!important;*/
/*}*/

.btn.btn-link.accordion {
    color: var(--brand-primary);
    text-decoration: none;
    background-color: transparent;
}

    .btn.btn-link.accordion:hover, .btn.btn-link.accordion:focus, .btn.btn-link.accordion:active {
        color: var(--brand-primary); /* or #666; or #b7442e; */
        text-decoration: none;
    }

.nav-tabs > li.active > a.btn-link, .nav-tabs > li.active > a.btn-link:hover, .nav-tabs > li.active > a.btn-link:focus {
    color: var(--brand-primary);
}
.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
    border-color: none;
}
button:focus {
     outline: none; 
     /*outline: 5px auto -webkit-focus-ring-color;*/ 
}

.bg-brand {
    background-color: var(--brand-primary);
    color: white;
}

.bg-ringsquared {
    background-color: var(--highlight);
    color: white;
}

.bg-brand-grey {
    background-color: var(--brand-tertiary);
    color: white;
}

/* pagers */
.pager-sr.purple, pager-sr.callview, a.pager-sr.callview {
    color: var(--brand-primary);
}

.pageActive.purple, .pageActive.callview {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: white;
}

#MainContent_rptPaging > tbody > tr > td > a:hover {
    color: var(--brand-primary);
}
/* pagination > may need to be done properly instead of this hack */
.page-item.active .page-link {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}
.page-link { color: var(--brand-primary); }
/* text styles */
.text-primary, .text-primary-i, .text-accuroute, .text-purple, .text-blue {
    color: var(--brand-primary);
}

    .text-purple:hover, .text-purple:active, .text-purple:focus {
        color: var(--brand-primary);
        text-decoration: none !important;
    }

.navbar-light .navbar-nav a.nav-link.link-brand {
    color: var(--brand-primary-hover);
}
.navbar-light .navbar-nav a.nav-link.link-brand:focus, .navbar-light .navbar-nav a.nav-link.link-brand:hover {
    color: var(--brand-primary);
}

.text-brand-light {
    color: var(--brand-secondary);
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff !important;
    background-color: var(--brand-primary);
}

.custom-control-input:checked ~ .custom-control-label::before {
    color: #fff !important;
    border-color: var(--brand-primary);
    background-color: var(--brand-primary);
}

.form-control:focus, .select-selected:focus {
    border-color: var(--brand-primary);
    box-shadow: var(--brand-primary-focus);
}

/* checkbox and radio button styles */
input[type=checkbox]:focus, input[type=radio]:focus {
    outline-color: var(--brand-primary);
    outline: -webkit-focus-ring-color var(--brand-primary) 1px !important;
    outline: var(--brand-primary) auto 1px !important;
}
input[type=checkbox]:focus {
    border: 1px solid var(--brand-primary);
}

input[type=checkbox]:checked:after {
    background-color: var(--brand-primary);
}
/* replace custom checkbox color for brand */
input[type="checkbox"]:checked + .label-text:before, input[type="radio"]:checked + .label-text:before {
    color: var(--brand-primary);
}
input[type='checkbox']:checked:after {
    background-color: var(--brand-primary);
}
input[type='radio']:checked:after {
    background-color: var(--brand-primary);
}
.custom-control-input-k8:checked ~ .custom-control-label::before {
    border-color: var(--brand-primary)!important;
    background-color: var(--brand-primary)!important;
}
.custom-control-input-k8:focus:not(:checked) ~ .custom-control-label::before {
    border-color: var(--brand-primary) !important;
}

.custom-control-input-k8:focus ~ .custom-control-label::before {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 0.2rem var(--brand-primary-focus) !important;
}

/* general areas */

/* tables */
.table-colored > thead > tr > th {
    border-color: var(--brand-primary);
    background-color: var(--brand-primary);
    color: #ffffff;
}

a.sortable-column {
    color: var(--brand-primary);
}

.table > thead > tr > td.success, .table > tbody > tr > td.success, .table > tfoot > tr > td.success, .table > thead > tr > th.success, .table > tbody > tr > th.success, .table > tfoot > tr > th.success, .table > thead > tr.success > td, .table > tbody > tr.success > td, .table > tfoot > tr.success > td, .table > thead > tr.success > th, .table > tbody > tr.success > th, .table > tfoot > tr.success > th {
    /*background-color: rgba(247, 202, 70, 0.4) !important;*/
    background-color: #eee !important;
}
/* checkboxes */
input [type="checkbox"]:checked + .label-text:before {
    color: var(--brand-primary);
}
/* labels */
.label-brand-light {
    background-color: #F5AB22;
}

.label-brand-dark {
    background-color: var(--brand-primary);
}

.label-brand-lightgrey {
    background-color: #999;
}

.label-brand-darkgrey {
    background-color: #808285;
}

.grid-pills {
    background-color: var(--brand-grid-pills-bg);
    color: var(--brand-grid-pills-text);
}
.alert-brand {
    background-color: var(--brand-grid-pills-bg);
    color: var(--brand-grid-pills-text);
}
.alert-highlight {
    background-color: var(--highlight);
    color: white;
}

/* menus */
.dropdown-header {
    color: var(--brand-primary);
}
.sidebar-card-header {
    background-color: var(--brand-sidebar-menu-header-bg);
}
.navbar-btn a {
    color: #333;
}
.dropdown-item.active, .dropdown-item:active {
    color: #fff;
    text-decoration: none;
    background-color: var(--brand-primary);
}
a:not([href]):not([tabindex]) {
    color: var(--brand-primary);
    cursor: pointer;
}
a:not([href]):not([tabindex]):hover {
    color: var(--brand-primary-hover);
    cursor: pointer;
}
/* select2 bootstrap4 overrides */
.select2-container--bootstrap4 .select2-results__option--highlighted,
.select2-container--bootstrap4 .select2-results__option--highlighted.select2-results__option[aria-selected="true"] {
    color: #fff;
    background-color: var(--brand-primary);
}

.select2-container--bootstrap4.select2-container--focus .select2-selection {
    border-color: var(--brand-primary);
    -webkit-box-shadow: var(--brand-primary-focus);
    box-shadow: var(--brand-primary-focus);
}

/*
.select2-container--bootstrap.select2-container--focus .select2-selection, .select2-container--bootstrap.select2-container--open .select2-selection {
    border-color: var(--brand-primary);
}

.select2-search__field {
    padding-left: 0.25rem;
}

.select2-container--bootstrap4 .select2-results__option--highlighted, .select2-container--bootstrap4 .select2-results__option--highlighted.select2-results__option[aria-selected=true] {
    background-color: rgba(233, 86, 58, 0.75);
    color: white;
}

.select2-container--bootstrap4.select2-container--focus .select2-selection {
    border-color: var(--brand-primary);
    -webkit-box-shadow: 0 0 0 0.2rem rgba(233, 86, 58, 0.25);
    box-shadow: 0 0 0 0.2rem rgba(233, 86, 58, 0.25);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--brand-primary);
    color: white;
}

.select2-container--bootstrap .select2-results__option--highlighted[aria-selected] {
    background-color: var(--brand-primary);
    color: #fff;
}

.select2-container--bootstrap.select2-container--focus .select2-selection, .select2-container--bootstrap.select2-container--open .select2-selection {
    border-color: var(--brand-primary);
}

.select2-container--bootstrap .select2-dropdown {
    -webkit-box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
    box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
    border-color: var(--brand-primary);
}*/