:root[theme='dark'] {
    --page-margin-left: 2rem;
    --page-margin-right: 2rem;
    /* FONT */
    --base-font-size: 14px;
    --extra-large-font-size: 3rem;
    --large-font-size: 1.4rem;
    --default-font-size: 1rem;
    --small-font-size: 0.85rem;
    --large-icon-font-size: 2.5rem;
    --small-icon-font-size: 1rem;
    --input-block-spacer: 0.4rem;
    --preview-block-spacer: 1.2rem;
    --main-text-colour: #fff;
    --secondary-text-color: #706f6c;
    --main-menu-font-size: 1.1rem;
    /* SYSTEM COLOURS */
    --system-blue: #21809a; /*#3193ff*/
    --system-purple: #8d25d4;
    --system-black: #000000;
    --system-white: #fff;
    --styletech-green: #0d5042;
    --styletech-green-transparent: #1ba08496;
    --styletech-yellow: #fdb813;
    --styletech-red: #910d4d;
    --styletech-red-transparent: #910d4db0;
    --styletech-light-blue: #21809a;
    --styletech-light-blue-transparent: #56bdda47;
    --styletech-orange: #ac3f0a;
    --styletech-dark-blue: #2a6f83;
    /* Chart COLOURS */
    --chart-light-blue: #21809a;
    --chart-aqua: #117b7e;
    --chart-turquoise: #12705c;
    --chart-green: #6d9d3e;
    --chart-yellow: #bc8501;
    --chart-orange: #b76403;
    --chart-dark-orange: #b4420b;
    --chart-red: #bf0f23;
    --chart-purple: #6E2D6F;
    --chart-pink: #D91473;
    /*MAIN COLOURS*/
    --primary-color: #1D1F3A;
    --secondary-color: #272942;
    --tertiary-color: #242648;
    --header-color: #1D1E3B;
    --border-color: #5F6075;
    --hover-color: #3C8599;
    /* CONTACT TYPE COLOURS */
    --customer-colour: #3193ff;
    --supplier-colour: #2b319d;
    --partner-colour: #ff76c1;
    --competitor-colour: #dc2855;
    --prospect-colour: #ffc803;
    --company-colour: #00d9a6;
    --level-one-colour: #D91473;
    --level-two-colour: #F16522;
    --user-colour: #ff763f;
    --other-colour: #424242;
    --contact-header-colour: #272942;
    --contact-header-text-colour: var(--header-color);
    /* MOBILE */
    --mobile-floating-button-bottom-offset: 5rem;
    --mobile-floating-button-right-offset: 1rem;
    --mobile-footer-height: 3.75rem;
    /* BORDER RADIUS */
    --border-radius-small: 0.3rem;
    --border-radius-large: 2.2rem;
    --border-radius-desktop-only: 0;
    /* DROPDOWNS */
    --dropdown-width: 13.125rem;
    --dropdown-border-color: #d91472;
    --dropdown-text-color: #fff;
    --dropdown-text-hover-color: #d91472;
    --alt-dropdown-background-color: var(--primary-color);
    --dropdown-background-color: var(--secondary-color);
    --dropdown-tag-background-colour: var(--styletech-light-blue);
    --multipick-control-border-colour: #5F6075;
    /* BUTTONS */
    --btn-border-radius: 0.25rem;
    --btn-text-color: #fff;
    --btn-border-color: var(--styletech-light-blue);
    --btn-hover-text-colour: #fff;
    --floating-btn-background: #3193ff;
    --btn-background-colour: var(--styletech-light-blue);
    /* OVERLAYS */
    --overlay-dark-background-colour: rgba(0, 0, 0, 0.5);
    /* FORM INPUTS */
    --form-date-input-width: 100%;
    /* TABS */
    --minimum-tab-width: 11rem;
    /* NEW VARIBLES (NEED SORTING AND APPLYING)*/
    --warning-background-color: #37374D;
    --red-warning-background-color: #910D4D40;
    --red-warning-text-color: var(--red-text-color);
    --warning-text-color: var(--styletech-yellow);
    --address-card-color: var(--styletech-light-blue);
    --wizard-steps-progress-bar-background-colour: var(--primary-color);
    --popup-box-shadow-color: #fff;
    --current-theme: dark;
    --textbox-hover: var(--secondary-color);
    --table-hover-box-shadow: var(--generic-box-shadow);
    --generic-box-shadow: inset 0 0 3px 1.25px var(--tabstrip-tab-selected-border-colour);
    --card-color: var(--secondary-color);
    --alt-card-color: var(--primary-color);
    --alt-timeline-card-color: var(--primary-color);
    --login-windows-logo: var(--system-white);
    --popup-background-color: #272942;
    --popup-widget-background-color: var(--primary-color);
    --widget-background-color: #272942;
    --red-text-color: #ff84bf;
    --red-text-hover-color: #ff5daa;
    --green-text-color: #22ceaa;
    --placeholder-text-color: #cccccc;
    --quote-tab-arrow-color: var(--secondary-color);
    --quote-tab-internal-color: var(--primary-color);
    --quote-tab-active-color: var(--primary-color);
    --col-hover: transparent;
    --popup-header-color: #181930;
    --quote-icon-color: #353759;
    --faded-text-color: #fff; /*#b2b2b2*/
    --table-hover-color: var(--header-color);
    --box-shadow-color: #1d1e32;
    --site-footer-text: #999ca3;
    --filter-icon-color: #FAFAFA;
    --body-background: var(--primary-color);
    --header-text-color: #fff;
    --table-background-color: var(--secondary-color);
    --empty-table-background-color: var(--secondary-color);
    --table-hover-background-color: var(--table-row-background-color);
    --alt-table-hover-background-color: var(--alt-table-background-color);
    --table-row-background-color: #1b1c38;
    --alt-table-background-color: #25263e;
    --main-header-height: 3rem;
    --header-padding-bottom: 0.1rem;
    --header-padding-top: 0.1rem;
    --page-content-height: calc(100% - var(--mobile-footer-height));
    --main-background-color: var(--primary-color);
    --panel-background-colour: var(--primary-color);
    --header-background: var(--header-color);
    --tab-background-colour: var(--primary-color);
    --tab-hover-background-colour: var(--header-color);
    --tab-selected-background-color: var(--header-color);
    --tab-font-colour: #fff;
    --tab-hover-font-colour: #fff;
    --tab-selected-font-color: #fff;
    --btn-hover-background-colour: #fff;
    --cal-event-background-colour: #fff;
    --cal-event-font-colour: #fff;
    --header-border-bottom: 1px solid #5F6075;
    --address-secondary-text-color: #ccc;
    --kendo-button-hover-color: var(--link-menu-hover-colour);
    --tertiary-text-color: #c1c1c1;
    --selected-grid-item: rgba(33, 128, 154, 0.25);
    /* MAIN MENU */
    --menu-background-color: var(--primary-color);
    --menu-text-color: white;
    --menu-width: 100%;
    /* POPUPS */
    --auto-popup-height: 100%;
    --auto-popup-max-height: 100%;
    --small-popup-height: 100%;
    --medium-popup-height: 100%;
    --extra-large-popup-height: 100%;
    --collection-control-border: none;
    --popup-content-background-colour: var(--primary-color);
    /* PINELINE */
    --kanban-stage-height: 11rem;
    /* RELATIONSHIP GRID */
    --inactive-row-hover-background-colour: #ffdede;
    --inactive-row-hover-text-colour: var(--header-color);
    --inactive-row-background-colour: #ffdede;
    --inactive-row-text-colour: var(--header-color);
    --inactive-row-icon-colour: #f0005b;
    /* TAB STRIP */
    --tabstrip-background-colour: var(--secondary-color);
    --tabstrip-tab-background-colour: var(--header-color);
    --tabstrip-border-colour: #5F6075;
    --tabstrip-tab-border-radius: 0px;
    --tabstrip-tab-link-colour: #fff;
    --tabstrip-tab-link-selected-colour: #fff;
    --tabstrip-tab-selected-background-colour: var(--styletech-light-blue);
    --tabstrip-tab-selected-border-colour: var(--styletech-light-blue);
    --tabstrip-content-background-colour: #f9f9f9;
    --dashboard-progressbar-background-color: rgba(217, 20, 115, 0.25);
    --dashboard-progressbar-bar-color: var(--styletech-red);
    --dashboard-progressbar-complete-bar-color: var(--styletech-green);
    /* GRIDS */
    --grid-header-background-color: var(--primary-color);
    /* SPLITTER */
    --vertical-splitter-bar-background-colour: #f3f3f4;
    --vertical-splitter-bar-handle-color: #515967;
    /* GOOGLE MAPS STYLE*/
    --gm_geometry_color: #1d2c4d;
    --gm_labels_text_fill_color: #8ec3b9;
    --gm_labels_text_stroke_color: #1a3646;
    --gm_administrative_geometry_stroke_color: #F5F5F5;
    --gm_administrative_geometry_stroke_weight: 2;
    --gm_administrative_country_stroke_color: #4b6878;
    --gm_administrative_country_stroke_weight: 2;
    --gm_administrative_land_pracel_labels_text_fill_color: #64779e;
    --gm_poi_geometry_color: #283d6a;
    --gm_poi_text_fill_color: #6f9ba5;
    --gm_poi_park_geometry_color: #023e58;
    --gm_poi_park_labels_text_fill_color: #3C7680;
    --gm_road_geometry_color: #304a7d;
    --gm_road_arterial_label_text_fill_color: #98a5be;
    --gm_road_highway_color: #2c6675;
    --gm_road_highway_label_text_fill_color: #b0d5ce;
    --gm_road_local_label_text_fill_color: #9E9E9E;
    --gm_tranisit_line_geometry_color: #283d6a;
    --gm_tranisit_station_geometry_color: #3a4762;
    --gm_water_geometry_color: #0e1626;
    --gm_water_geometry_label_text_color: #4e6d70;
    /* GOOGLE MAPS POLYGON STYLES */
    --gm_polygon_stroke_color: #DC0F7E;
    --gm_polygon_stroke_opacity: 1.0;
    --gm_polygon_stroke_weight: 3;
    --gm_polygon_fill_color: #DC0F7E;
    --gm_polygon_fill_opacity: 0.15;
    /* GOOGLE MAPS CIRCLE STYLES */
    --gm_circle_fill_color: #3BAA85;
    --gm_circle_fill_opacity: 0.15;
    --gm_circle_stroke_color: #3BAA85;
    --gm_circle_stroke_opacity: 1.0;
    --gm_circle_stroke_weight: 3;
    /* MENU OVERRIDE */
    --link-menu-text-colour: var(--styletech-light-blue);
    --link-menu-hover-colour: #00c0ff;
    /* FORM INPUTS */
    --form-input-spacer: 1.25rem;
    --scrollbar-colour: #ccc;
    --scrollbar-hover-colour: var(--styletech-light-blue);
    --hover-scale-factor: 1.020;
    --popup-base-z-index: 10500;
    --full-screen-z-index: calc(var(--popup-base-z-index) - 1);
    /*Logos*/
    --customer-logo: url("/images/companyLogos/SLS_dark_theme.png");
    --viewpoint-logo: url("/images/viewpoint-logo_dark_theme.png");
    /*Light Peview Variables*/
    --preview-light-primary-color: #fff;
    --preview-light-styletech-orange: #f16521;
    --preview-light-styletech-red: #d91473;
    --preview-light-border-color: #ccc;
    --preview-light-styletech-blue: #56bdda;
    --preview-light-table-row: #EAEAEA;
    --preview-light-alt-table-row: #FBFBFB;
    --preview-light-table: #F5F6F8;
    /*Dark Peview Variables*/
    --preview-dark-primary-color: #1D1E3B;
    --preview-dark-styletech-orange: #ac3f0a;
    --preview-dark-styletech-red: #910d4d;
    --preview-dark-border-color: #5F6075;
    --preview-dark-styletech-blue: #21809a;
    --preview-dark-table-row: #25263e;
    --preview-dark-alt-table-row: #1b1c38;
    --preview-dark-table: #272942;
}

@media only screen and (min-width : 992px) and (max-width: 1400px) {
    :root[theme='dark'] {
        /* POPUPS */
        --auto-popup-height: auto;
        --auto-popup-max-height: 95%;
        --small-popup-height: 300px;
        --medium-popup-height: 400px;
        --large-popup-height: 500px;
        --extra-large-popup-height: 600px;
    }
}

/* ----- Desktop Variables ----- */
@media screen and (min-device-width: 1200px) and (-webkit-min-device-pixel-ratio: 1) {
    :root[theme='dark'] {
        --page-margin-left: 2rem;
        --page-margin-right: 2rem;
        --mobile-floating-button-bottom-offset: 2.5rem;
        /* BORDER RADIUS*/
        --border-radius-desktop-only: var(--border-radius-small);
        /* FORM INPUTS */
        --form-date-input-width: 40%;
        /* Layout */
        --header-background: #1D1E3B;
        --header-text-color: white;
        --main-header-height: 2.8rem;
        --header-padding-bottom: 0.25rem;
        --header-padding-top: 0.25rem;
        --page-content-height: calc(100% - (var(--main-header-height) + var(--header-padding-bottom) + var(--header-padding-top)));
        --menu-width: 25%;
        /* DROPDOWN */
        --dropdown-width: 13.125rem;
        --minimum-tab-width: unset;
        --collection-control-border: 1px solid #ccc;
    }
}

/* IPAD */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
    :root[theme='dark'] {
        --dropdown-width: 13.125rem;
    }
}

@media (max-width: 1024px) {
    :root[theme='dark'] {
        --page-content-height: calc(100% - (var(--main-header-height) + var(--header-padding-bottom) + var(--header-padding-top)));
    }
}

@media only screen and (min-width: 1401px) {
    :root[theme='dark'] {
        /* POPUPS */
        --auto-popup-height: auto;
        --auto-popup-max-height: 95%;
        --small-popup-height: 30%;
        --medium-popup-height: 50%;
        --large-popup-height: 80%;
        --extra-large-popup-height: 95%;
    }
}