:root {
    --client-primary: #000000;
    --client-primary-text: #ffffff;
    --client-secondary: #C3BFBF; 
    --client-secondary-text: #ffffff;

    /* Built in nav overrides */
    --icon-ds-font-family: 'NeueHaasDisplay', 'GothamSSM', sans-serif;
    --nav-ds-brand-max-width: 86px;
    --nav-ds-alignment-left-margin: 60px;
    --nav-ds-page-content-margin: 40px;
    --nav-ds-module-text-size: 19px;
    --nav-ds-module-dropdown-text-size: var(--nav-ds-module-text-size);
    --nav-ds-module-dropdown-text-weight: 500;
    --nav-ds-module-dropdown-default-text-colour: var(--client-primary);
    --nav-ds-module-dropdown-hover-text-colour: var(--jd-nav-dropdown-hover-colour);
    --nav-ds-module-dropdown-hover-background-colour: transparent;
    --nav-ds-module-dropdown-active-current-tab-indicator-colour: var(--jd-nav-dropdown-hover-colour);
    --nav-ds-module-singleline-hover-colour: #dddddd;

    /* Custom client variables - used in content areas */
    --jd-accent-colour: #ffed03; /* edff02 */
    --jd-accent-colour-text: #000000;
    --jd-nav-top-padding: 40px;
    --jd-nav-dropdown-hover-colour: #717171;
    --jd-emphasis-font-family: 'Bebas Neue', var(--icon-ds-font-family);
    --jd-emphasis-font-style: italic;  /* Chrome workaround - see @supports media query below */
    --jd-content-page-background-colour: var(--client-primary);
    --jd-content-page-text-colour: var(--client-primary-text);
    --jd-content-baseline-font-size: 18px;
    --jd-content-baseline-spacing: 20px;
    --jd-content-title-font-size: 9.4vw;  /* (184px @ 1920x1080) */
    --jd-content-grid-button-text-size: 4vw;
    --jd-content-grid-button-tile-size: 20.834vw;  /* (400px @ 1920x1080) */
    --jd-content-grid-button-tile-spacing: 2vw;
}

@supports (-moz-appearance:none) {
    :root {
        /* The Bebas Neue font doesn't support variable slant (oblique).
           Firefox is the only browser that correctly applies a synthetic slant in these circumstances, as
           per the CSSWG specification (https://drafts.csswg.org/css-fonts-4/#propdef-font-synthesis-style)
           using this we can oblique the font at the intended ~9.5deg, instead of italics' ~14deg...
        */
        --jd-emphasis-font-style: oblique 9.5deg;
    }
}

.client-primary {
    color: var(--client-primary-text);
    background-color: var(--client-primary);
}

.client-secondary {
    color: var(--client-secondary-text);
    background-color: var(--client-secondary);
}

/* #region JD Fonts */
@font-face {
    font-family: 'Bebas Neue'; /* This font only contains uppercase characters */
    src: url('/v4/content/fonts/BebasNeue-Regular.otf') format('opentype'),
        url('/v4/content/fonts/BebasNeue-Regular.ttf') format('truetype'),
        url('/v4/content/fonts/BebasNeue-Regular.woff') format('woff'),
        url('/v4/content/fonts/BebasNeue-Regular.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    ascent-override: 100%; /* with a line height of 0.7em, this guarantees the letters are tightly within their container's bounding box. */
}

@font-face {
    font-family: 'GothamSSM';
    src: url('/v4/content/fonts/gothamssm_bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'GothamSSM';
    src: url('/v4/content/fonts/gothamssm_medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'GothamSSM';
    src: url('/v4/content/fonts/gothamssm_light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'NeueHaasDisplay';
    src: url('/v4/content/fonts/NeueHaasDisplayBold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'NeueHaasDisplay';
    src: url('/v4/content/fonts/NeueHaasDisplayMedium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'NeueHaasDisplay';
    src: url('/v4/content/fonts/NeueHaasDisplayRoman.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

/* #endregion */

/* #region JD Custom Nav Layout */
.nav-ds {
    /* Declarations used in combination with the new --nav-ds-alignment-left-margin to achieve the client's specified padding */
    align-items: unset;
    border-top: 11px solid var(--jd-accent-colour);  /* Every page EXCEPT the homepage has a top border applied onto the navigation. The homepage has an inline CSS style removing the top border there! */
    padding-top: calc(var(--jd-nav-top-padding) - 11px);  /* 40px padding specified for all pages */
}

.nav-ds-brand {
    margin-top: unset;
}

.nav-ds.nav-ds-configuration-client-colour-nav-background > .nav-ds-profile-actions,
.nav-ds.nav-ds-configuration-client-colour-nav-background > .nav-ds-profile-actions > a:hover {
    /* Yellow "My Profiles" buttons */
    color: var(--jd-accent-colour);
}

.nav-ds > nav > ul:not(:has(li))::before {
    /* On the login page, if the navigation bar has no links, add whitespace so it doesn't collapse. This workaround is necessary to maintain the padding. */
    content: '\a0';
}

.nav-ds > nav > ul > li {
    letter-spacing: 0.38px;
}

.nav-ds > nav > ul > li > a {
    /* Capitalise links to modules */
    text-transform: uppercase;
    font-weight: 500;
}

.nav-ds > nav > ul > li > ul.dropdown-menu {
    /* Dropdown menu extended to fill display horizontally */
    border: none;
    margin: unset;
    box-shadow: none;
    border-radius: unset;

    position: absolute;
    left: 0px;
    right: 0px;

}

.nav-ds > nav > ul > li > ul.dropdown-menu,
.nav-ds > nav > ul > li > ul.dropdown-menu > li > div > ul,
.nav-ds > nav > ul > li > ul.dropdown-menu > li > div > ul > li > a {
    /* Remove padding from inner drop down list container & anchor links within: all necessary padding handled in parent. */
    padding: unset;
}

.nav-ds > nav > ul > li > ul.dropdown-menu > li > div {
    /* Dropdown list parent uses flex container to enforce aligned/consistent layout, regardless of screen width */
    display: flex;
    flex-wrap: wrap;

    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 30px;

    gap: 30px;
    flex-direction: row;
}

.nav-ds > nav > ul > li > ul.dropdown-menu > li > div > ul {
    /* Each "column"/inner drop down list container */
    flex-basis: 390px;
}

.nav-ds > nav > ul > li > ul.dropdown-menu > li > div > ul > li:not(:last-child) {
    /* Spacing between anchor links within the inner dropdown list container */
    margin-bottom: 7px;
}

.nav-ds > nav > ul > li > .dropdown-menu > li > div > ul > li > a.current-tab-indicator {
    /* Keep the current dropdown selection highlighted, instead of immediately fading away onmouseout */
    color: var(--jd-nav-dropdown-hover-colour); 
}

/* #endregion */

/* #region JD Login Page Alterations */
.login-container {
    color: var(--client-primary);
}

.login-container > div > section > form > h3 { /* Hide the "Registered User Login" text to bring the login screen closer to the middle */
    display: none;
    speak: always;
}

#login-form {
    height: auto;
}
/* #endregion */

/* #region JD Custom Homepage Layout */
.icon-ds-login-content-container-primary,
.icon-ds-homepage-content-container,
.jd-navigate-item-page {
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    padding: var(--nav-ds-alignment-left-margin);
    padding-top: 0;

    grid-template-columns: repeat(3, var(--jd-content-grid-button-tile-size)) auto;
    grid-auto-rows: auto;

    grid-row-gap: 60px;
    grid-column-gap: var(--jd-content-grid-button-tile-spacing);
}

.icon-ds-homepage-content-container > h1:first-of-type,
.icon-ds-homepage-content-container > ul:first-of-type,
.icon-ds-homepage-content-container > ul:first-of-type > li,
.icon-ds-homepage-content-container > ul:first-of-type > li > a,
.icon-ds-homepage-content-container > div:first-of-type h2,
.icon-ds-homepage-content-container > div:first-of-type h3,
.icon-ds-homepage-content-container > div:first-of-type p,
.jd-navigate-item-page > h1,
.jd-navigate-item-page > ul,
.jd-navigate-item-page > ul > li,
.jd-navigate-item-page > ul > li > a {
    margin: unset;
    padding: unset;
}

.icon-ds-login-content-container-primary > h1:first-of-type,
.icon-ds-homepage-content-container > h1:first-of-type,
.icon-ds-homepage-content-container > ul:first-of-type > li > a,
.jd-navigate-item-page > h1,
.jd-navigate-item-page > ul > li > a {
    /* To be applied to any text container using the italicised typeface */
    font-family: var(--jd-emphasis-font-family);
    text-transform: uppercase;
    letter-spacing: -0.03em;
    font-style: var(--jd-emphasis-font-style);
    font-synthesis-style: auto;
    font-weight: bold;
    user-select: none;
}

.icon-ds-login-content-container-primary > h1:first-of-type,
.icon-ds-homepage-content-container > h1:first-of-type,
.jd-navigate-item-page > h1 {  /* Top "Welcome to Specs And Standards" banner */
    grid-column: 1 / -1;

    font-size: var(--jd-content-title-font-size);
    line-height: 0.7em;
    margin: 0;
    margin-left: -0.12em; /* the shape of the italicised first letter 'W' means margin-left needs to be more negative than usual to align title with the page content. On item pages we override with a more sensible value */
}

.icon-ds-login-content-container-primary > h1:first-of-type,
.icon-ds-homepage-content-container > h1:first-of-type {
    display: grid;
    grid-template-rows: auto auto;
    grid-auto-flow: row;
}

.icon-ds-login-content-container-primary > h1:first-of-type > span:nth-of-type(1),
.icon-ds-homepage-content-container > h1:first-of-type > span:nth-of-type(1) {
    text-align: left;
}
.icon-ds-login-content-container-primary > h1:first-of-type > span:nth-of-type(2),
.icon-ds-homepage-content-container > h1:first-of-type > span:nth-of-type(2) {
    text-align: right;
}

.icon-ds-homepage-content-container > ul:first-of-type { /* Homepage Buttons' Subgrid */
    grid-column: 1 / -2;

    display: grid;
    grid-template-rows: var(--jd-content-grid-button-tile-size);
    grid-auto-rows: var(--jd-content-grid-button-tile-size);
    grid-row-gap: var(--jd-content-grid-button-tile-spacing);
    grid-template-columns: subgrid;
}

.icon-ds-homepage-content-container > ul:first-of-type > li,
.icon-ds-homepage-content-container > ul:first-of-type > li > a,
.jd-navigate-item-page > ul > li,
.jd-navigate-item-page > ul > li > a {
    display: block;
    text-emphasis: none;
    text-decoration: none;
}

.icon-ds-homepage-content-container > ul:first-of-type > li > a,
.jd-navigate-item-page > ul > li > a { /* Homepage Buttons & Item Navigation Buttons (automatically sized & positioned within subgrid) */
    font-size: var(--jd-content-grid-button-text-size);
    line-height: 0.8em;
    overflow-wrap: break-word;  /* Chrome-specific - words automatically wrapped correctly on FF */

    width: 100%;
    height: 100%;
    padding: 0.26em 0.39em 0.26em 0.39em; /* At 1080p, equivalent to 20px 30px 20px 30px, where the font-size is ~76.8px */
    align-content: end;

    border: 1px solid var(--jd-accent-colour);
    background-color: var(--jd-accent-colour);
    color: var(--jd-accent-colour-text);
    
    transition: background-color ease-out 0.3s, color ease-out 0.3s;
}

.icon-ds-homepage-content-container > ul:first-of-type > li > a:hover,
.jd-navigate-item-page > ul > li > a:hover {
    background-color: var(--jd-accent-colour-text);
    color: var(--jd-accent-colour);
}

.icon-ds-homepage-content-container > div:first-of-type {  /* Updates and Quick Links container */
    grid-row: 2;
    grid-column: -2;

    color: var(--jd-accent-colour);
    font-size: var(--jd-content-baseline-font-size);
}

.icon-ds-homepage-content-container > div:first-of-type h2,
.icon-ds-homepage-content-container > div:first-of-type h3,
.widgetcontent-changeupdates-magictag > ul > li > :not(.changeupdate-description) {
    line-height: 0.82em;
    font-family: inherit;
    text-transform: uppercase;
    font-weight: 600;
}

.icon-ds-homepage-content-container > div:first-of-type h2,
.icon-ds-homepage-content-container > div:first-of-type h3 {
    padding-bottom: var(--jd-content-baseline-spacing);
    margin-bottom: var(--jd-content-baseline-spacing);
}

.icon-ds-homepage-content-container > div:first-of-type h2 {
    font-size: 27px;
    border-bottom: 1px solid var(--jd-accent-colour);
}

.icon-ds-homepage-content-container > div:first-of-type h2:not(:first-child) { /* Each editable section in the sidebar is separated by a 40px margin */
    margin-top: 40px;
}

.icon-ds-homepage-content-container > div:first-of-type h3,
.widgetcontent-changeupdates-magictag > ul > li > a.changeupdate-title,
.widgetcontent-changeupdates-magictag > ul > li > .changeupdate-date {
    font-size: 22px;
    float: unset;
    padding-bottom: unset;
}

.icon-ds-homepage-content-container > div:first-of-type p,
.icon-ds-homepage-content-container > div:first-of-type a,
div#Welcome_Page_Footer_Nav a {
    font-size: var(--jd-content-baseline-font-size);
    color: inherit;
    text-decoration: none;
}

.icon-ds-homepage-content-container > div:first-of-type a:hover,
div#Welcome_Page_Footer_Nav a:hover {
    text-decoration: underline;
}

div#Welcome_Page_Footer_Nav a {
    font-family: var(--icon-ds-font-family);
    margin: 10px;
}

.widgetcontent-changeupdates-magictag,
.widgetcontent-changeupdates-magictag > ul,
.widgetcontent-changeupdates-magictag > ul > li {  /* Change updates widget - ensure any future non-title text conforms to default font size */
    font-size: inherit;
}

.widgetcontent-changeupdates-magictag > ul { /* Grid containing the list of recent change updates */
    padding: unset;
    display: grid;
    grid-auto-flow: row;
    grid-auto-rows: auto;
    grid-template-columns: 1fr min-content;
    grid-row-gap: var(--jd-content-baseline-spacing);
    margin-bottom: var(--jd-content-baseline-spacing);
}

.widgetcontent-changeupdates-magictag > ul > li { /* Grid for each individual change update */
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: min-content;
    grid-column: 1 / span 2;
    grid-column-gap: var(--jd-content-baseline-font-size);
    grid-row-gap: 10px;
    list-style-type: none;
}

.widgetcontent-changeupdates-magictag > ul > li > a.changeupdate-title,
.widgetcontent-changeupdates-magictag > ul > li > .changeupdate-description,
.widgetcontent-changeupdates-magictag > ul > li > .changeupdate-description > p:first-of-type { /* Allow change update title and description to be truncated by browser */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.widgetcontent-changeupdates-magictag > ul > li > .changeupdate-description,
.widgetcontent-changeupdates-magictag > ul > li > .changeupdate-description > p:first-of-type { /* No more than three lines of the change description should be shown */
    text-wrap: auto;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.widgetcontent-changeupdates-magictag > ul > li > .changeupdate-description { /* Ensure description is shown underneath change update title and date */
    grid-row: 2;
    grid-column: 1 / span 2;
    speak: none;
}

/*.widgetcontent-changeupdates-magictag > ul > li > .changeupdate-description,
.widgetcontent-changeupdates-magictag > ul > li > .changeupdate-description > p:first-of-type { /* Explicit height and width is necessary for CSS to handle ellipsis * /
    max-height: 200px;
    max-width: var(--jd-content-grid-button-tile-size);
}*/

.widgetcontent-changeupdates-magictag > ul > li > .changeupdate-description > :not(p:first-of-type) { /* Only the first change paragraph should be visible if there are multiple */
    display: none;
}

@media screen and (min-width: 1921px) { /* Responsive design adjustment at over 1920x1080 to prevent text and buttons from getting too large on a high res display */
    :root {
        --jd-content-title-font-size: 184px;
        --jd-content-grid-button-text-size: 80px;
        --jd-content-grid-button-tile-size: 400px;
        --jd-content-grid-button-tile-spacing: 40px;
    }
}

@media screen and (max-width: 1280px) { /* Responsive design adjustment at 1280x760 to fit on smaller displays */
    :root {
        --jd-content-grid-button-tile-size: 25vw;
        --jd-content-grid-button-tile-spacing: 3vw;
        --jd-content-grid-button-text-size: 5vw;
    }

    .icon-ds-homepage-content-container {
        grid-template-columns: repeat(2, var(--jd-content-grid-button-tile-size)) auto;
    }
}
/* #endregion */

/* #region Item (Navigation) Page Layout */
/*
    The initial Kendo Editor HTML template for an item navigation page must be the following:

    <style>body{background-color:black;color:white;}</style>
    <div class="jd-navigate-item-page">
        <h1>Page Name</h1>
        <ul>
            <li><a href="#">Example Link</a></li>
        </ul>
    </div>

    More links can be added as necessary as normal using the Rich Text view once this HTML has been applied to the Kendo Editor.
*/
.jd-navigate-item-page {
    --jd-content-grid-button-tile-size: 190px;
    --jd-content-grid-button-tile-spacing: 30px;
    --jd-content-grid-button-text-size: 36px;

    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto min-content;
    min-height: 70vh;
}

.jd-navigate-item-page > h1 {
    align-self: end;
    margin-left: -0.05em;
}

.jd-navigate-item-page > ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--jd-content-grid-button-tile-spacing);
}

.jd-navigate-item-page > ul > li {
    width: var(--jd-content-grid-button-tile-size);
    height: var(--jd-content-grid-button-tile-size);
}
/* #endregion */

/* #region Fusion Overrides */
td.tabs .tabon,
td.tabs .taboff,
.nav-tabs > .tab > a {
    border-radius: unset;
}

#contentTD,
#contentTD > .page-main-table {
    border-left: none;
    padding-left: 0;
}

.select2-dropdown li,
.menu-dropdowns > p:has(+ select) {
    color: var(--nav-ds-module-dropdown-hover-text-colour);
    font-size: var(--icon-ds-global-textsize-spec);
    font-family: var(--icon-ds-font-family);
}

.menu-dropdowns > p:has(+ select) { /* Title above dropdown selections in the navigation submenu (e.g. room datasheets dropdown) */
    font-size: var(--nav-ds-module-dropdown-text-size);
    font-weight: var(--nav-ds-module-dropdown-text-weight);
}

.select2-container--classic li.select2-results__option--highlighted[aria-selected] {
    background-color: var(--client-secondary); /* Use client secondary colours to highlight selected navigation submenu dropdown menu items */
    color: var(--client-secondary-text);
}

.row-fluid::before {
    display: none; /* rogue whitespace in the nav dropdown */
}

.nav_page_sub_on {
    color: var(--jd-accent-colour);  /* department tab sub selection */
}
/* #endregion */
/* #region Base CSS Overrides */
.table-generic-zebra-on { /* Remove blue banding from rds tables */
    background: unset;
}
/* #endregion */

/*
    #region KendoUI Overrides for .client-primary and .client-secondary buttons
*/
.k-button.client-primary:disabled,
.k-button.client-secondary:disabled {
    opacity: 0.5 !important;
    filter: brightness(1.0) !important;
}

.k-button.client-primary:disabled {
    color: var(--client-primary-text) !important;
    background-color: var(--client-primary) !important;
}

.k-button.client-secondary:disabled {
    color: var(--client-secondary-text) !important;
    background-color: var(--client-secondary) !important;
}

.k-button.client-primary,
.k-button.client-secondary {
    filter: brightness(1.0);
}

.k-button.client-primary {
    border: 1px solid var(--client-primary);
}

.k-button.client-primary:hover,
.k-button.client-secondary:hover {
    filter: brightness(1.1);
    background-image: unset;
}

.k-button.client-primary:active,
.k-button.client-secondary:active {
    filter: brightness(0.95);
    background-image: unset;
}

.k-button.client-primary:hover,
.k-button.client-primary:active {
    color: var(--client-primary-text);
    background-color: var(--client-primary);
}

.k-button.client-secondary:hover,
.k-button.client-secondary:active {
    color: var(--client-secondary-text);
    background-color: var(--client-secondary);
}

.k-button.client-primary,
.k-button.client-secondary {
    background-image: none;
}

.k-button.client-primary:focus,
.k-button.client-secondary:focus {
    box-shadow: none !important;
}
/*#endregion*/

.dark {
    background-color: #777;
    color: #fff;
    border: 1px solid #fff;
    border-collapse:collapse;
}

.darkHeader {
    background-color: #ddd !important;
    font-size:inherit !important;
    font-weight:bold !important;
    text-align: center !important;
}

.login-help {
    float: right !important;
    font-size: 20px;
    font-weight: 200;
    color: #ffffff;
    cursor: pointer;
    display: none;
}

.login-dropdown {
    right: 30px;
}

#login-btn {
    
}

.logocontainer {
    padding: 10px;
}

.title {
}

.logo {
    margin:5px 0 5px 0;
}

.uiBar {
    background-color: #eee; 
    border-bottom: 1px solid #ccc;
}


.medium {
    background-color: #ccc;
    border: 1px solid #fff;
    border-collapse:collapse;
}

.lightbottom {
    border-bottom: 2px solid #ddd;
}

.box {
    width:100px;
    border:1px solid #999;
}

.orange {
    background-color: #FF9900;
}

.red {
    background-color: #FF0000;
}

.green {
    background-color: #33CC00;
}

.yellow {
    background-color: #FFFF00;
}

.bgPanel {
    background-color: #f1f1f1;
    padding:7px;
}

.smallest {
    font-size: x-small;
}

.w-set {
    position:relative;
    width:90% !important;
}

.textBox {
    width: 95% !important;
    font-weight:bold;
    margin-top: 5px;
}

.panelBar {
    border-top: 4px solid var(--client-primary);
    border-bottom: 3px solid #d5d5d5;
}

.panelBar h5 {
    color:#777;
    font-weight:bold;
    display: inline-block;
}

.panelBar h4 {
    display: inline-block;
    padding-right:2px;
    font-weight:bold;
    color: #000;
}

.top {
    padding-top:10px;
    margin-top:10px;
}

.base {
    padding-bottom:10px;
    border-bottom: 3px solid #d5d5d5;
}

.k-grid td {
   overflow: visible;
   white-space: normal;
   vertical-align: top !important;
}

.g-dirty {
    background-color: #ff6a00;
}

.filename {
   word-wrap: break-word ;
   /*word-break: break-all ;*/
   word-break:normal;

}

.ui-resizable-handle, .ui-resizable-e {
    border-left: 1px solid #ccc;
}

.popText {
    line-height:1.5em;
    border-bottom: 1px dashed #999;
    padding-bottom:5px;
    margin-bottom:5px;
}

.btnSearch {
    background-color: #999 !important;
    color: #fff !important;
}

#header_bg
{
    position: relative;
    margin: 0px;
    color: #000;
    padding: 0px;
    background-color: #eee;
    border-bottom: 1px solid #606060;
    border-top: 1px solid #606060;
    /*height: 62px;*/
}

.k-alt
{
    background-color: #F5F5F6;
}

#recycleBinGrid  
{
    border: 1px solid #A0D6BE;
}

#recycleBinGrid .k-grid-header .k-header
{
    background-color: #D6E8E0;
}

#recycleHdr .k-header 
{
    background-color: #A0D6BE;
}

header h1, #header h1
{
    font-weight: bold;
    margin: 0;
    color: #000;
    border: none;
    line-height: 1em;
}

.middleAlign 
{
    vertical-align:text-bottom;
}

.empty-grid {
    color: #888;
    background: #eee;
    height: 100%;
    text-align: center;
    line-height: 100px;
}

.force-left {
    text-align: left !important;
}

.force-right {
    text-align: right !important;
}

.notifyUserList {
    overflow-y:auto;
    overflow-x:hidden;
}

.userGrid {
    height:550px;
    border:1px solid #dbdbde !important;
    line-height:2em;
    overflow-y:auto;
    overflow-x:hidden;
}

.gridRow {
    border-collapse:collapse !important;
}

.fullgrid {
    width:95%;
    margin:auto;
}

.textEdit {
    width: 100%; 
    border-collapse: collapse; 
    border: 1px solid #dbdbde !important;
    margin: 3px;
    line-height:1.5em;
}

.userInfo {
    height:380px;
    overflow:auto;
    border-collapse:collapse;
}

.userInput {
    line-height: 1.5em !important;
    width: 300px;
    margin-top:7px;
}

#distributionGroups {
    
}

#txtCount {
    font-weight:normal !important;
}

#treeview {
    min-height:100% !important;
    overflow-x: hidden;
}

.product {
    float: left;
    position: relative;
    width: 150px;
    height: 200px;
    margin: 0 5px;
    padding: 0;
}

.product .mainImg {
    height: 100px;
    width: 150px;
    cursor: pointer;
}

.product h3 {
    margin: 0;
    padding: 3px 5px 0 0;
    max-width: 150px;
    overflow: hidden;
    line-height: 1.2em;
    font-weight: normal;
    color: #999;
}

.product p {
    visibility: hidden;
}

.product:hover p {
    visibility: visible;
    position: absolute;
    height: 100px;
    width: 150px;
    top: 0;
    margin: 0;
    padding: 0;
    line-height: 110px;
    vertical-align: middle;
    text-align: center;
    color: #fff;
    background-color: rgba(0,0,0,0.75);
    transition: background .2s linear, color .2s linear;
    -moz-transition: background .2s linear, color .2s linear;
    -webkit-transition: background .2s linear, color .2s linear;
    -o-transition: background .2s linear, color .2s linear;
}

 .k-listview:after {
     content: ".";
     display: block;
     height: 0;
     clear: both;
     visibility: hidden;
 }

.formsToolbar {
    background-color: var(--client-primary);
    color: var(--client-primary-text);
    width: 100%;
    z-index:1 !important;
}