:root {
	--color-main-green: var(--logo-second-color);
	--color-main-orange: #ff7300;
	--spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --card-radius: 12px;
    --transition-speed: 0.2s;
}

/* Theme colors. */
:root {
	--mdc-theme-primary: #333;
	--mdc-theme-secondary: var(--logo-second-color);
	--mdc-theme-background: #fff;
	--mdc-theme-surface: #fff;
	--mdc-theme-error: #b71c1c;
	--mdc-theme-on-primary: #fff;
	--mdc-theme-on-secondary: #ffffff;
	--mdc-theme-on-surface: #000;
	--mdc-theme-on-error: #fff;
	--mdc-theme-text-primary-on-background: rgba(0, 0, 0, 0.87);
	--mdc-theme-text-secondary-on-background: rgba(0, 0, 0, 0.54);
	--mdc-theme-text-hint-on-background: rgba(0, 0, 0, 0.38);
	--mdc-theme-text-disabled-on-background: rgba(0, 0, 0, 0.38);
	--mdc-theme-text-icon-on-background: rgba(0, 0, 0, 0.38);
	--mdc-theme-text-primary-on-light: rgba(0, 0, 0, 0.87);
	--mdc-theme-text-secondary-on-light: rgba(0, 0, 0, 0.54);
	--mdc-theme-text-hint-on-light: rgba(0, 0, 0, 0.38);
	--mdc-theme-text-disabled-on-light: rgba(0, 0, 0, 0.38);
	--mdc-theme-text-icon-on-light: rgba(0, 0, 0, 0.38);
	--mdc-theme-text-primary-on-dark: #fff;
	--mdc-theme-text-secondary-on-dark: hsla(0, 0%, 100%, 0.7);
	--mdc-theme-text-hint-on-dark: hsla(0, 0%, 100%, 0.5);
	--mdc-theme-text-disabled-on-dark: hsla(0, 0%, 100%, 0.5);
	--mdc-theme-text-icon-on-dark: hsla(0, 0%, 100%, 0.5);
	--border-color: #eee;
	--shadow-color: #eee;
	--shadow-color-card: rgb(0 0 0 / 20%);
	--card-background: rgb(249, 249, 249);
	--button-border-color: #e1e1e1;
	--nub-color: white;
	--rangebar-background: #9e9e9e;
	--nub-color-widget: white;
	--rangebar-background-widget: #9e9e9e;

	--font-color: #333;

	--profile-link-active: #ece2ff;
	--profile-link-hover: #f6f1ff;

	--btn-hover: #efefef;

	--pagination-border-color: rgba(0, 0, 0, 0.38);
	--pagination-fill-arrow: rgba(0, 0, 0, 0.54);

	--log-turn-off: #ffdada;
	--log-tunr-on: #e6ffda;
	--log-brightness: #ffecb6;
	--log-channels: #ffecb6;

	--table-border-color: #979797;
	--checkbox-color: rgba(0, 0, 0, 0.54);
	--floating-label: rgba(0, 0, 0, 0.6);
	--dialog-color: rgba(0,0,0, 0.6);
	--text-field-color: rgba(0, 0, 0, 0.87);
	--text-field-border-bottom-color: rgba(0, 0, 0, 0.42);
	--text-field-active-border-bottom-color: rgba(0, 0, 0, 0.87);
	--standard-scroll-background: #ffffff;
	--standard-scroll-color: #131313;
	--standard-scroll-corner: #1e2122;
	--standard-scroll-thumb: #565d60;
	--button-disabled-background: rgba(0, 0, 0, 0.12);
	--button-disabled-color: rgba(0, 0, 0, 0.38);
	--btn-accept-color: #45a83c;
	--btn-remove-color: #ff6464;
	--table-border: #979797;
	--table-row: #e0e0e0;

	--highlight: yellow;
	--regular-button-disabled: #e0e0e0;
	--zone-control-button-on: #fad35b;
	--zone-control-button-text: #646464;
	--zone-control-button-border: #bfbdbd;
	--selector-font-color: #343434;
	--table-border-top: rgba(0,0,0,.12);
	--password-input: #fff;

	--chart-text: #666;
	--chart-lines: #aaa;
	--chart-path: rgb(0,100,100);
	--icon-fill: hsl(210 10% 30%);
    --icon-fill-hover: hsl(210 10% 15%);
	--mdc-shape-medium: 8px;
	--login-gradient-one:rgb(92, 214, 156);
	--login-gradient-two:rgb(37,37,37);
	--color-grad-one: rgb(253 195 17);
	--color-grad-two: #5580ff;

	--mdc-ripple-color: linear-gradient(0deg,rgba(67,73,62,.12),rgba(67,73,62,.12));

	--active-table-device: rgb(197, 234, 231);

	--segmented-button-background: #d9e7cb;
	--segmented-button-text: #171e0e;

	/* --md-sys-color-primary-rgb: 73 103 39; */
	/* --md-sys-color-surface-1: rgb(var(--md-sys-color-primary-rgb) / 0.05); */
	--logo-first-color: #22334c;
	--logo-second-color: #00d699;
}

:root {
	--svrollbar-track-width: 0;
    --svrollbar-track-background: none;
    --svrollbar-track-opacity: 1;

    --svrollbar-thumb-width: 14px;
    --svrollbar-thumb-background: #999;
    --svrollbar-thumb-opacity: 1;
}

html[data-theme='light'] {
	--mdc-theme-primary: #333;
	--mdc-theme-secondary: var(--logo-second-color);
	--mdc-theme-background: #fff;
	--mdc-theme-surface: #fff;
	--mdc-theme-error: #b71c1c;
	--mdc-theme-on-primary: #fff;
	--mdc-theme-on-secondary: #ffffff;
	--mdc-theme-on-surface: #000;
	--mdc-theme-on-error: #fff;
	--mdc-theme-text-primary-on-background: rgba(0, 0, 0, 0.87);
	--mdc-theme-text-secondary-on-background: rgba(0, 0, 0, 0.54);
	--mdc-theme-text-hint-on-background: rgba(0, 0, 0, 0.38);
	--mdc-theme-text-disabled-on-background: rgba(0, 0, 0, 0.38);
	--mdc-theme-text-icon-on-background: rgba(0, 0, 0, 0.38);
	--mdc-theme-text-primary-on-light: rgba(0, 0, 0, 0.87);
	--mdc-theme-text-secondary-on-light: rgba(0, 0, 0, 0.54);
	--mdc-theme-text-hint-on-light: rgba(0, 0, 0, 0.38);
	--mdc-theme-text-disabled-on-light: rgba(0, 0, 0, 0.38);
	--mdc-theme-text-icon-on-light: rgba(0, 0, 0, 0.38);
	--mdc-theme-text-primary-on-dark: #fff;
	--mdc-theme-text-secondary-on-dark: hsla(0, 0%, 100%, 0.7);
	--mdc-theme-text-hint-on-dark: hsla(0, 0%, 100%, 0.5);
	--mdc-theme-text-disabled-on-dark: hsla(0, 0%, 100%, 0.5);
	--mdc-theme-text-icon-on-dark: hsla(0, 0%, 100%, 0.5);
	--border-color: #eee;
	--shadow-color: #eee;
	--shadow-color-card: rgb(0 0 0 / 20%);

	--card-background: rgb(249, 249, 249);
	--button-border-color: #e1e1e1;
	--nub-color: white;
	--rangebar-background: #ffeebe;

	--nub-color-widget: white;
	--rangebar-background-widget: #9e9e9e;
	--switch-off: #000;

	--font-color: #333;

	--profile-link-active: #ece2ff;
	--profile-link-hover: #f6f1ff;

	--btn-hover: #efefef;

	--pagination-border-color: rgba(0, 0, 0, 0.38);
	--pagination-fill-arrow: rgba(0, 0, 0, 0.54);

	--log-turn-off: #ff4a4a;
	--log-turn-on: #06e9a9;
	--log-brightness: #ffbd00;
	--log-channels: #ffbd00;

	--table-border-color: #979797;

	--checkbox-color: rgba(0, 0, 0, 0.54);

	--floating-label: rgba(0, 0, 0, 0.6);
	--dialog-color: rgba(0,0,0, 0.6);
	--text-field-color: rgba(0, 0, 0, 0.87);
	--text-field-border-bottom-color: rgba(0, 0, 0, 0.42);

	--text-field-active-border-bottom-color: rgba(0, 0, 0, 0.87);


    --svrollbar-thumb-background: #999;

	--standard-scroll-background: #fff;
	--standard-scroll-color: #d6cdbf;
	--standard-scroll-corner: #1e2122;
	--standard-scroll-thumb: #b3b3b3;
	--button-disabled-background: rgba(0, 0, 0, 0.12);
	--button-disabled-color: rgba(0, 0, 0, 0.38);

	--btn-accept-color: #00d699;
	--btn-remove-color: #ff6464;

	--table-border: #979797;
	--table-row: #e0e0e0;
	--highlight: yellow;
	--regular-button-disabled: #e0e0e0;

	--zone-control-button-on: #fad35b;
	--zone-control-button-text: #646464;
	--zone-control-button-border: #bfbdbd;

	--selector-font-color: #343434;
	--table-border-top: rgba(0,0,0,.12);
	--password-input: #fff;

	--chart-text: #666;
	--chart-lines: #aaa;
	--chart-path: rgb(0,100,100);
	--icon-fill: hsl(210 10% 30%);
    --icon-fill-hover: hsl(210 10% 15%);
	--login-gradient-one:rgb(92, 214, 156);
	--login-gradient-two:rgb(37,37,37);
	--color-grad-one: rgb(253 195 17);
	--color-grad-two: #5580ff;

	--active-table-device: rgb(197, 234, 231);
	--segmented-button-background: #cfe9d9;
	--segmented-button-text: #0a1f16;

	--progress-bar-background: #d9e7cb3d;

	--logo-first-color: #22334c;
	--logo-second-color: #00d699;
	--mdc-priamry-color: #00d699;
	/* --light-switch-active: #006c4b; */

	--mdc-secondary-container: #cfe9d9;
	--mdc-secondary-background:#fbfdf9;
	--switch-fab-background: #e7e7e7;
	--sensor-path-background: #efefef;

	--blob-background: #f8f8f8;
	--blob-outline: #c7c7c7;
	--login-field-border: #22334cad;
	--range-bar-handle-active: #ffffffa8;
	--range-bar-handle-inactive: #ffffff3d;
	--pips: darkslategray;
	--border-top-color: transparent;
	--zone-inactive-button: #fdf2b8;
	--skeleton-loader: linear-gradient(90deg, #e7e7e7 25%, #cccccc 50%, #e7e7e7 75%);
	--weather-skeleton-loader: linear-gradient(90deg, 
	rgba(0, 0, 0, 0.05) 0%, 
	rgba(0, 0, 0, 0.1) 50%, 
	rgba(0, 0, 0, 0.05) 100%);
	--view-only-active-button-bg: #373737;
	--range-handle-inactive: #ffc500c4;
	--rangebar-background: #ebebeb;
	--view-only-active-button-bg: #ebebeb;
	--view-only-active-color: #333;
	--dashboard-skeleton-panel: #f5f5f5;
	--dashboard-skeleton-value: #e0e0e0;
}

::-webkit-scrollbar {
    background-color: var(--standard-scroll-background);
    color: var(--standard-scroll-color);
}
::-webkit-scrollbar-corner {
    background-color: var(--standard-scroll-corner);
}
::-webkit-scrollbar-thumb {
    background-color: var(--standard-scroll-thumb);
}

html[data-theme='dark'] {
	--mdc-theme-primary: #303536;
	--mdc-theme-secondary: var(--logo-second-color);
	--mdc-theme-background: #1e2122;
	--mdc-theme-surface: #1e2122;
	--mdc-theme-error: #b71c1c;
	--mdc-theme-on-primary: #fff;
	--mdc-theme-on-secondary: #ffffff;
	--mdc-theme-on-surface: #ffffff;
	--mdc-theme-on-error: #fff;
	--mdc-theme-text-primary-on-background: rgba(0, 0, 0, 0.87);
	--mdc-theme-text-secondary-on-background: rgba(0, 0, 0, 0.54);
	--mdc-theme-text-hint-on-background: rgba(175, 163, 144, 0.38);
	--mdc-theme-text-disabled-on-background: rgba(0, 0, 0, 0.38);
	--mdc-theme-text-icon-on-background: rgba(0, 0, 0, 0.38);
	--mdc-theme-text-primary-on-light: rgba(0, 0, 0, 0.87);
	--mdc-theme-text-secondary-on-light: rgba(0, 0, 0, 0.54);
	--mdc-theme-text-hint-on-light: rgba(0, 0, 0, 0.38);
	--mdc-theme-text-disabled-on-light: rgba(255, 255, 255, 0.38);
	--mdc-theme-text-icon-on-light: rgba(0, 0, 0, 0.38);
	--mdc-theme-text-primary-on-dark: #fff;
	--mdc-theme-text-secondary-on-dark: hsla(0, 0%, 100%, 0.7);
	--mdc-theme-text-hint-on-dark: hsla(0, 0%, 100%, 0.5);
	--mdc-theme-text-disabled-on-dark: hsla(0, 0%, 100%, 0.5);
	--mdc-theme-text-icon-on-dark: hsla(0, 0%, 100%, 0.5);
	--border-color: #2d2e31;
	--shadow-color: none;
	--shadow-color-card: rgb(0 0 0 / 20%);

	--card-background: rgb(34, 38, 39);
	--button-border-color: #2d2e31;
	--mdc-segmented-button-outline-color: rgba(175, 163, 144, 0.12);
	--mdc-segmented-button-unselected-ink-color: rgba(255, 255, 255, 0.6);
	--mdc-segmented-button-selected-ink-color: #9f2eff;
	--mdc-ripple-color: #636a6f;
	/* --mdc-theme-surface: #3c4144; */
	--font-color: rgb(250, 244, 235);
	

	--range-slider: #2d2e31;
    --range-handle-inactive: #ffbb001f;
    --range-handle: #daa514;
    --range-handle-focus: #daa514;
    --range-handle-border: var(--range-handle);
    --range-range-inactive: #b58800;
    --range-range: #b58800;
    --bg--range-float-inactive: var(--range-handle-inactive);
    --range-float: var(--range-handle-focus);
    --range-float-text: #ffffff;



	--pips: white;
    --pip-text: var(--range-pip-text, var(--pips));
    --pip-active: white;
    --pip-active-text: white;
    --pip-hover: white;
    --pip-hover-text: var(--range-pip-hover-text, var(--pip-hover));
    --pip-in-range: white;
    --pip-in-range-text: white;

	--nub-color: rgb(68, 68, 68);
	--rangebar-background: #333;
	--switch-off: #000;
	--nub-color-widget: rgb(16, 19, 19);
	--rangebar-background-widget: rgb(0, 0, 0);

	--pagination-color: rgba(255, 255, 255, 0.87);

	--profile-link-active: rgb(40, 44, 45);
	--profile-link-hover: rgb(35, 38, 39);

	--btn-hover: #2d2e31;

	--pagination-border-color: rgba(175, 163, 144, 0.38);
	--pagination-fill-arrow: rgba(255, 255, 255, 0.54);

	--log-turn-off: #bf0000;
	--log-turn-on: #37a503;
	--log-brightness: #bb8b00;
	--log-channels: #bb8b00;

	--table-border-color: rgb(96, 105, 109);

	--checkbox-color: rgba(175, 163, 144, 0.54);

	--floating-label: rgba(255, 255, 255, 0.6);

	--dialog-color: rgba(255, 255, 255, 0.6);
	--text-field-color: rgba(255, 255, 255, 0.87);

	--text-field-border-bottom-color: rgba(175, 163, 144, 0.42);
	--text-field-active-border-bottom-color: rgba(175, 163, 144, 0.87);



    --svrollbar-thumb-background: #2d2e31;

	--standard-scroll-background: #282c2d;
	--standard-scroll-color: #d6cdbf;
	--standard-scroll-corner: #1e2122;
	--standard-scroll-thumb: #565d60;

	--button-disabled-background: rgba(0, 0, 0, 0.12);
	--button-disabled-color: rgba(255, 255, 255, 0.38);

	--btn-accept-color: #00d699;
	--btn-remove-color: rgb(180,0,0);

	--table-border: rgb(96, 105, 109);
	--table-row: rgb(71, 76, 80);
	--highlight: rgb(191, 191, 0);
	--regular-button-disabled: rgb(53, 56, 59);
	--zone-control-button-on: rgb(86, 73, 3);
	--zone-control-button-text: rgb(211, 201, 188);
	--zone-control-button-border: rgb(83, 90, 94);

	--selector-font-color: rgb(249, 243, 234);
	--table-border-top: rgba(175, 163, 144,.12);

	--password-input: #3b3b3b;
	--chart-text: rgb(210, 200, 186);
	--chart-lines: rgb(223, 215, 203);
	--chart-path: rgb(250, 245, 236);

	--icon-fill: hsl(210 10% 70%);
    --icon-fill-hover: hsl(210 15% 90%);
	--login-gradient-one:rgb(92, 214, 156);
	--login-gradient-two:rgb(37,37,37);
	--color-grad-one: rgb(181, 138, 1);
	--color-grad-two: rgb(0, 49, 191);

	--active-table-device: #2b4c4a;

	--segmented-button-background: #354b40;
	--progress-bar-background: #d9e7cb3d;

	--segmented-button-text: #dde6cd;


	--logo-first-color: #FFFFFF;
	--logo-second-color: #00D699;
	/* --light-switch-active: #00d699; */
	--mdc-priamry-color: #00d699;

	--mdc-secondary-container: #354b40;
	--mdc-secondary-background:#191c1a;
	--switch-fab-background: #2d2e31;
	--sensor-path-background: #2d2e31;

	--blob-background: #1e2122;
	--blob-outline: #0a0a0a;

	--login-field-border: rgb(60 97 86);
	--range-bar-handle-active: #dfa800;
	--range-bar-handle-inactive: #ffffff1f;
	--border-top-color: #3a3a3a;
	--zone-inactive-button: #2e2c21;
	--skeleton-loader: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
	--weather-skeleton-loader: linear-gradient(90deg, 
	rgba(255, 255, 255, 0.05) 0%, 
	rgba(255, 255, 255, 0.1) 50%, 
	rgba(255, 255, 255, 0.05) 100%);
	--view-only-active-button-bg: #373737;
	--range-handle-inactive: #a57b3dc7;

	--dashboard-skeleton-panel: #2f2f2f;
	--dashboard-skeleton-value: #4b4b4b;
}

/* Layout grid spacing. */
:root {
	--mdc-layout-grid-margin-desktop: 24px;
	--mdc-layout-grid-gutter-desktop: 24px;
	--mdc-layout-grid-column-width-desktop: 72px;
	--mdc-layout-grid-margin-tablet: 16px;
	--mdc-layout-grid-gutter-tablet: 16px;
	--mdc-layout-grid-column-width-tablet: 72px;
	--mdc-layout-grid-margin-phone: 16px;
	--mdc-layout-grid-gutter-phone: 16px;
	--mdc-layout-grid-column-width-phone: 72px;
}


/*Range Slider*/
:root {
	--range-slider: #efefef; /* slider main background color */
	--range-handle-inactive: #a57b3dc7; /* inactive handle color */
	--range-handle: #d9a514; /* non-focussed handle color */
	--range-handle-focus: #d9a514; /* focussed handle color */
	--range-handle-border: var(--range-handle);
	--range-range-inactive: #ffc411; /* inactive range bar background color */
	--range-range: #ffc411; /* active range bar background color */
	--range-float-inactive: var(--range-handle-inactive); /* inactive floating label background color */
	--range-float: var(--range-handle-focus); /* floating label background color */
	--range-float-text: white; /* text color on floating label */
}


/*Svrollbar*/


/*Fonts*/

/* roboto-cyrillic-ext-100-normal*/
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-display: swap;
	font-weight: 100;
	src: url('./files/roboto-cyrillic-ext-100-normal.woff2') format('woff2'), url('./files/roboto-cyrillic-ext-100-normal.woff') format('woff');

}
/* roboto-cyrillic-ext-300-normal*/
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-display: swap;
	font-weight: 300;
	src: url('./files/roboto-cyrillic-ext-300-normal.woff2') format('woff2'), url('./files/roboto-cyrillic-ext-300-normal.woff') format('woff');

}
/* roboto-cyrillic-ext-400-normal*/
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-display: swap;
	font-weight: 400;
	src: url('./files/roboto-cyrillic-ext-400-normal.woff2') format('woff2'), url('./files/roboto-cyrillic-ext-400-normal.woff') format('woff');

}
/* roboto-cyrillic-ext-500-normal*/
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-display: swap;
	font-weight: 500;
	src: url('./files/roboto-cyrillic-ext-500-normal.woff2') format('woff2'), url('./files/roboto-cyrillic-ext-500-normal.woff') format('woff');

}
/* roboto-cyrillic-ext-700-normal*/
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-display: swap;
	font-weight: 700;
	src: url('./files/roboto-cyrillic-ext-700-normal.woff2') format('woff2'), url('./files/roboto-cyrillic-ext-700-normal.woff') format('woff');

}
/* roboto-cyrillic-ext-900-normal*/
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-display: swap;
	font-weight: 900;
	src: url('./files/roboto-cyrillic-ext-900-normal.woff2') format('woff2'), url('./files/roboto-cyrillic-ext-900-normal.woff') format('woff');

}

@font-face {
	font-family: 'Material Icons';
	font-style: normal;
	font-weight: 400;
	src: url(fonts/material-icons.woff2) format('woff2');
}


@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 200;
	src: url('./files/Manrope-ExtraLight.ttf') format('truetype');
}

@font-face {
	font-family: 'Manrope';
	font-weight: 200;
	font-style:italic;
	src: url('./files/Manrope-ExtraLightItalic.ttf') format('truetype');
}

@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 300;
	src: url('./files/Manrope-Light.ttf') format('truetype');
}

@font-face {
	font-family: 'Manrope';
	font-weight: 300;
	font-style:italic;
	src: url('./files/Manrope-LightItalic.ttf') format('truetype');
}

@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 400;
	src: url('./files/Manrope-Regular.ttf') format('truetype');
}
@font-face {
	font-family: 'Manrope';
	font-style: italic;
	font-weight: 400;
	src: url('./files/Raleway-Italic.ttf') format('truetype');
}

@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 500;
	src: url('./files/Raleway-Medium.ttf') format('truetype');
}
@font-face {
	font-family: 'Manrope';
	font-style: italic;
	font-weight: 500;
	src: url('./files/Raleway-MediumItalic.ttf') format('truetype');
}

@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 600;
	src: url('./files/Raleway-SemiBold.ttf') format('truetype');
}

@font-face {
	font-family: 'Manrope';
	font-style: italic;
	font-weight: 600;
	src: url('./files/Raleway-SemiBoldItalic.ttf') format('truetype');
}

@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 700;
	src: url('./files/Manrope-Bold.ttf') format('truetype');
}

@font-face {
	font-family: 'Manrope';
	font-style: italic;
	font-weight: 700;
	src: url('./files/Raleway-BoldItalic.ttf') format('truetype');
}

@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 800;
	src: url('./files/Raleway-ExtraBold.ttf') format('truetype');
}

@font-face {
	font-family: 'Manrope';
	font-style: italic;
	font-weight: 800;
	src: url('./files/Raleway-ExtraBoldItalic.ttf') format('truetype');
}

@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 900;
	src: url('./files/Raleway-Black.ttf') format('truetype');
}

@font-face {
	font-family: 'Manrope';
	font-style: italic;
	font-weight: 900;
	src: url('./files/Raleway-BlackItalic.ttf') format('truetype');
}

@font-face {
	font-family: 'LibreBarcode';
	font-style: normal;
	src: url('./fonts/LibreBarcode39Text-Regular.ttf') format('truetype');
}

.g-progress-container {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(98, 0, 238, 0.15);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 100;
	border-radius: 10px;
}

.material-icons {
	font-family: 'Material Icons';
	font-weight: normal;
	font-style: normal;
	font-size: 24px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
}

/*Overrides */

svg {
	outline: none !important;
}

.smui-button--color-secondary:not(:disabled):not(.mdc-button--raised):not(.mdc-button--unelevated) {
	color: var(--btn-accept-color) !important;
}

.smui-button--color-secondary.mdc-button--raised:not(:disabled),
.smui-button--color-secondary.mdc-button--unelevated:not(:disabled) {
	background-color: var(--mdc-theme-secondary) !important;
	color:white !important;
}
.controls_master .mdc-button--unelevated:not(:disabled).smui-button--color-secondary {
	background-color: #00d699 !important;
	color:white !important;
}
.controls_master .mdc-button--unelevated:not(:disabled) {
	background-color: var(--switch-fab-background) !important;
	color:white !important;
}
.mdc-segmented-button__segment:first-child{
	border-radius: 28px 0 0 28px !important;
}

.mdc-segmented-button__segment:last-child {
border-radius: 0 28px 28px 0 !important;
}

.mdc-segmented-button__segment{
	text-transform: capitalize !important;
	height: 40px !important;
	justify-content: center !important;
	min-width: 42px !important;
}

.mdc-segmented-button {
    display: inline-grid !important;
    grid-template-columns: 1fr 1fr !important;
    /* margin: 10px !important; */
    text-align: center;
}

.mdc-segmented-button__segment--selected{
	background-color: var(--segmented-button-background) !important;
	color: var(--segmented-button-text) !important;
	font-family: 'Manrope' !important;
	font-weight: bold !important;
}

.mdc-button--outlined {
    height: 40px !important;
    border-radius: 50px !important;
}

.mdc-button--raised {
    height: 40px !important;
    border-radius: 50px !important;
}

.mdc-button{
	text-transform: initial !important;
	border-radius: 28px !important;
	height: 40px !important;
}

.controls .button-mini {
   	border-radius: 20px !important;
	height: 40px !important;
}

.g-progress-container{
	background-color: var(--progress-bar-background);
}

.mdc-dialog .mdc-dialog__surface {
    border-radius: 28px !important;
}

/*Global helpers*/
.g-flex-col {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: auto;
}

.g-flex-row {
	display: flex;
	flex-direction: row;
	width: 100%;
	height: auto;
}

.g-flex-justify-end {
	justify-content: flex-end;
}

.g-flex-justify-start {
	justify-content: flex-start;
}

.g-flex-justify-between {
	justify-content: space-between;
}


/*table*/

.mdc-data-table__header-cell {
	font-weight: 900 !important;
}

/*red button*/

.red-button {
	background-color: #e00505 !important;
	color: white !important;
	opacity: 1;
}
.red-button:hover {
	background-color: #ef0303 !important;
}
.red-button[disabled] {
	opacity: 0.4 !important;
	cursor: not-allowed !important;
}

.default-button {
	background: #404040 !important;
	color: white !important;
	opacity: 1;
}
.default-button:hover {
	background: #5c5c5c !important;
}
.default-button[disabled] {
	opacity: 0.4 !important;
	cursor: not-allowed !important;
}

.g-link-button {
	color: #444;
	line-height: 1;
	letter-spacing: 0.5px;
	font-size: 12px;
	font-weight: 700;
	transition: color 0.3s;
	border: none;
	background: #e8ebe8;
	border-radius: 5px;
	padding: 0 5px !important;
	margin: 0 !important;
	height: 1.4em;
}

.g-link-button:hover {
	color: #27ab1c;
	cursor: pointer;
}

/* End of Global helpers*/

* {
	box-sizing: border-box;
	user-select: none !important;
	
}

html, body {
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0 !important;
	overflow: hidden;
}

body {
	font-family: 'Manrope', sans-serif !important;
	color: var(--font-color)!important;
	background-color: var(--mdc-theme-background);
	border-color: var(--border-color) !important;
}

.widget {
	background-color: var(--mdc-theme-background)!important;
	border-color: var(--border-color) !important;
	box-shadow: var(--shadow-color) 0px 6px 5px -5px !important;
	
}
.widget .card-dimmer, .widget .card-sensor, .widget .zone-card {
	background-color: var(--mdc-theme-background)!important;
	border-color: var(--border-color) !important;
	box-shadow: var(--shadow-color) 0px 6px 5px -5px !important;
}
.card-dimmer {
	background-color: var(--card-background)!important;
	/* border-color: var(--border-color) !important; */
	border-top: 1px solid var(--border-top-color) !important;
	/* box-shadow: var(--shadow-color) 0px 6px 5px -5px !important; */
}

.card-sensor {
	background-color: var(--card-background)!important;
	border-color: var(--border-color) !important;
	border-top: 1px solid var(--border-top-color) !important;


	/* box-shadow: var(--shadow-color) 0px 6px 5px -5px !important; */
}

.zone-card {
	background-color: var(--card-background)!important;
	border-color: var(--border-color) !important;
	box-shadow: var(--shadow-color-card) 0 2px 3px 0px !important;
	border-top: 1px solid var(--border-top-color) !important;


}

.mini-device {
    border-bottom: 1px solid var(--border-color) !important;
}

.selector .btn {
	border: 1px solid var(--button-border-color) !important;
}
.selector .btn__icon {
	border-left: 1px solid var(--button-border-color) !important;
}

.btn__icon::before{
	border-color: rgb(175, 163, 144) transparent transparent !important;
}

.mdc-text-field--disabled .mdc-floating-label {
    color: var(--floating-label) !important;
}

.mdc-text-field--disabled .mdc-text-field__input {
    color: var(--floating-label) !important;
}
.mdc-text-field--disabled .mdc-line-ripple::before {
    border-bottom-color: var(--floating-label) !important;
	opacity: 0.3;
}

.mdc-text-field--disabled {
    opacity: 0.4 !important;
}

.mdc-dialog__header{
	display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

/* .card-dimmer .rangeSlider.disabled .rangeNub, .card-dimmer .sliders.disabled .rangeSlider .rangeNub{
	background-color: rgb(30, 33, 34) !important;
} */

.apexcharts-title-text{
	fill: var(--font-color) !important;
	font-weight: 700 !important;
}
.dali-sliders .rangeNub{
	opacity: 1 !important;
	background-color: var(--range-inactive) !important;
}
.apexcharts-text{
	fill: var(--font-color) !important;
	font-weight: 400;
}

.apexcharts-toolbar{
	z-index: 1 !important;
}

.apexcharts-menu {
	background: var(--mdc-theme-background) !important;
	color: var(--font-color) !important;
}
.device-field .rangeSlider, .card-dimmer .rangeSlider, .zone-card .rangeSlider, .mini-device .rangeSlider {
	height: 30px !important;
	border-radius: 1em !important;
	overflow: hidden;
	cursor: pointer;
}
.mini-device .rangeSlider {
	height: 20px !important;

}
.device-field .rangeBar, .card-dimmer .rangeBar, .zone-card .rangeBar, .mini-device .rangeBar{
	height: 30px !important;
}
.mini-device .rangeBar{
	height: 20px !important;
}
.colortemp-btn .mdc-fab {
	border-radius: 0.5em !important;
	background-color: var(--mdc-theme-primary) !important;
	height: 30px !important;
	width: 30px !important;
}

.colortemp-btn .mdc-fab:not(.mdc-fab--extended) .mdc-fab__ripple {
    border-radius: 1em !important;
}
.card-dimmer .rangeNub, .zone-card .rangeNub, .mini-device .rangeNub {
	display: none !important;
}
.transition__range .rangeSlider .rangeNub{
	background-color: #ffc411;
}

.transition__range .rangeSlider.focus .rangeBar{
	background-color: #ffc411;

}
.rangeHandle:before {
	display: none !important;}

.colortemp-slider .rangeSlider.vertical {
    background: linear-gradient(360deg, var(--color-grad-one) 0%, #e2e4ff 50%, var(--color-grad-two) 100%) !important;
	width: 40px;
	min-height: 130px;
	height: 120px;
	margin: 0;
	overflow: visible;
	padding-bottom: 10px;

}

.colortemp-slider .rangeSlider.vertical .rangeBar {
	width: 40px !important;
	height: 10px !important;
	background: var(--mdc-theme-background) !important;
	position: relative;
}

.colortemp-slider .rangeSlider.vertical .rangeHandle {
	display: block !important;
}

.colortemp-slider .rangeSlider.vertical .rangeHandle .rangeNub {
	display: none !important;
}
.colortemp-slider .rangeSlider.vertical .rangeHandle:before {
	display: none !important;
}

.colortemp-slider .rangeSlider.vertical .rangeHandle .rangeFloat {
    transform: translate(-120%, 20%);
	width: 65px !important;
	color: black;
	border: 1px solid var(--border-color);
	border-radius: 20px;
	font-family: 'Manrope';
	font-weight: 700;
}

@media (min-width: 446px) {
    
	.colortemp-slider .rangeSlider.vertical .rangeHandle .rangeFloat {
		transform: translate(90%, 20%);
		width: 55px;
		
	}
}

.colortemp-slider .rangeSlider.vertical .rangeBar:before {
	content: " ";
	width: 20px;
	height: 2px;
	background: var(--font-color);
	position: absolute;
	top: 40%;
	/* margin: auto; */
	/* left: 50%; */
	right: 25%;
}	
.colortemp-fab  {
	box-shadow: none !important;
}
.card-dimmer .mdc-menu-surface{
	border-radius: 20px;
	overflow: visible;
	left: -8px !important;
    top: -80px !important;
	min-height: 140px;
}

.zone-card .mdc-menu-surface{
	border-radius: 20px;
	overflow: visible;
	left: -8px !important;
    top: -45px !important;
	min-height: 140px;
}

.mini-device .mdc-menu-surface{
	margin-left: 10px;
	border-radius: 20px;
	overflow: visible;
	left: -8px !important;
    top: -80px !important;
	min-height: 140px;

}




.mdc-data-table__pagination-total, .mdc-data-table__pagination-rows-per-page-label, .mdc-data-table__cell {
    color:	var(--pagination-color)!important;
}

 /*Icon btn*/
.icon-square-btn,
.icon-square-btn .mdc-fab,
.icon-square-btn .mdc-fab__ripple
{
	border-radius: 50% !important;
	width: 40px !important;
	height: 40px !important;
	opacity: 1;
}

.icon-square-btn:disabled {
	color: white !important;
	opacity: 0.3;
	cursor: not-allowed;
}

.icon-square-btn i {
	font-size: 30px !important;
}

.card-dimmer .mdc-fab, .mini-device .mdc-fab {
	box-shadow: none;
	height: 40px;
	width: 40px;
	background-color: var(--switch-fab-background);
	color:#00D699 !important;
	margin-right: 10px;
}


.mini-device .mdc-fab{
	height: 30px;
	width: 30px;
}

.mini-device .colortemp-btn .mdc-fab {
	margin-left: 10px;
	margin-right: 0px;
}

.card-dimmer .mdc-fab:hover, .mini-device .mdc-fab:hover{
	box-shadow: none;
}


.users-page .mdc-tooltip.mdc-tooltip--rich .mdc-tooltip__surface {
	background-color: var(--mdc-theme-background);
}
.mdc-segmented-button__segment:not(.mdc-segmented-button__segment--selected),
.mdc-segmented-button__segment:not(.mdc-segmented-button__segment--selected) .mdc-segmented-button__ripple,
.mdc-segmented-button__segment:not(.mdc-segmented-button__segment--selected) .mdc-segmented-button__ripple:focus,
.mdc-segmented-button__segment:not(.mdc-segmented-button__segment--selected) .mdc-segmented-button__ripple:focus-within,
.mdc-segmented-button__segment:not(.mdc-segmented-button__segment--selected) .mdc-segmented-button__ripple:before,
.mdc-segmented-button__segment:not(.mdc-segmented-button__segment--selected) .mdc-segmented-button__ripple:after,
.mdc-segmented-button__segment:not(.mdc-segmented-button__segment--selected).mdc-ripple-upgraded,
.mdc-segmented-button__segment:not(.mdc-segmented-button__segment--selected):focus,
.mdc-segmented-button__segment:not(.mdc-segmented-button__segment--selected):focus-within {
	background-color: transparent !important;
	font-family: 'Manrope'!important;
	font-weight: 400;
}

.mdc-segmented-button__segment{
	font-family: 'Manrope'!important;

	font-weight: 400;
}

.mdc-button {
	font-family: 'Manrope'!important;
	font-weight: 400 !important;
}

.mdc-data-table__cell {
	font-family: 'Manrope' !important;
}

.mdc-data-table__pagination {
	font-family: 'Manrope' !important;
}

.mdc-text-field__input {
	font-family: 'Manrope' !important;

}

.mdc-floating-label {
	font-family: 'Manrope' !important;

}

.mdc-select--outlined:not(.mdc-select--disabled) .mdc-notched-outline__leading, .mdc-select--outlined:not(.mdc-select--disabled) .mdc-notched-outline__notch, .mdc-select--outlined:not(.mdc-select--disabled) .mdc-notched-outline__trailing {
    border-color: var(--pagination-border-color)!important;
}

.mdc-select:not(.mdc-select--disabled) .mdc-select__selected-text {
    color: var(--font-color)!important;
}

.mdc-select:not(.mdc-select--disabled) .mdc-select__dropdown-icon {
    fill: var(--pagination-fill-arrow)!important;
}

.mdc-menu .mdc-deprecated-list {
    color: var(--font-color)!important;
}

.mdc-switch:not(.mdc-switch--checked) .mdc-switch__track {
    background-color: var(--blob-outline)!important;
}

.mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb {
    background-color: var(--nub-color, #1e2122)!important;
    border-color: var(--nub-color, #3c4144)!important;
}

.mdc-button--outlined:not(:disabled) {
    border-color: var(--border-color)!important;
	color: var(--font-color)!important;
}

.mdc-dialog .mdc-dialog__title {
    color: var(--font-color)!important;
}

.mdc-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate="true"]) ~ .mdc-checkbox__background {
    background-color: transparent;
    border-color: var(--checkbox-color) !important;
}

.mdc-text-field:not(.mdc-text-field--disabled) .mdc-floating-label {
    color: var(--floating-label) !important;
}

.mdc-dialog .mdc-dialog__content {
    color: var(--dialog-color) !important;
}

.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input {
    color: var(--text-field-color) !important;
	caret-color: var(--text-field-color) !important;
}

.smui-text-field--standard:not(.mdc-text-field--disabled) .mdc-line-ripple::before {
    border-bottom-color: var(--text-field-border-bottom-color) !important;
}

.smui-text-field--standard:not(.mdc-text-field--disabled):hover .mdc-line-ripple::before {
    border-bottom-color: var(#ef0303) !important;
}

.smui-text-field--standard .mdc-line-ripple::after {
    border-bottom-color: var(--text-field-active-border-bottom-color)!important;
}

.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input {
    color: var(--text-field-color);
}

.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__leading, .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__notch, .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing {
    border-color: var(--border-color) !important;
}

.mdc-button--raised:disabled {
    color: var(--button-disabled-color) !important;
	background: var(--button-disabled-background) !important;
}



.mdc-button:not(:disabled) {
    color: var(--font-color, #6200ee) !important;
}

.mdc-select:not(.mdc-select--disabled) .mdc-select__icon {
    color: var(--pagination-fill-arrow) !important;
}

.mdc-select:not(.mdc-select--disabled) .mdc-floating-label {
    color: var(--floating-label) !important;
}

.mdc-button:disabled {
    color: var(--button-disabled-color) !important;
}

.mdc-button--raised:not(:disabled){
	color: white !important;
}

.mdc-data-table__row, .mdc-data-table__pagination {
    border-top-color: var(--table-border-top) !important;
}

.smui-select--standard:not(.mdc-select--disabled) .mdc-line-ripple::before{
	border-bottom-color: var(--text-field-border-bottom-color) !important;
}

.smui-select--standard:not(.mdc-select--disabled):hover .mdc-line-ripple::before, .smui-text-field--standard:not(.mdc-text-field--disabled):hover .mdc-line-ripple::before {
    border-bottom-color: var(--text-field-active-border-bottom-color) !important;
}

.flatpickr-calendar {
    background-color: var(--mdc-theme-background) !important;
	box-shadow: none !important;
	border: 1px solid var(--border-color) !important;
	border-radius: 20px !important;
    /* box-shadow: rgb(48 51 54) 1px 0px 0px, rgb(48 51 54) -1px 0px 0px, rgb(48 51 54) 0px 1px 0px, rgb(48 51 54) 0px -1px 0px, rgb(0 0 0 / 8%) 0px 3px 13px !important; */
}

.flatpickr-months .flatpickr-month {

    color: var(--font-color) !important;
    fill: var(--font-color) !important;
}

span.flatpickr-weekday {
    color: var(--font-color) !important;
	opacity: 0.54 !important;
}

.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay, .flatpickr-day.notAllowed, .flatpickr-day.notAllowed.prevMonthDay, .flatpickr-day.notAllowed.nextMonthDay {
    color: var(--font-color) !important;
	opacity: 0.34 !important;

}

.flatpickr-day {

    color: var(--font-color) !important;
}

.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay {
    background-color: var(--mdc-secondary-container) !important;
    color: var(--font-color) !important;
    border-color: rgb(9, 89, 185) !important;
	border: none !important;
}

.flatpickr-day.inRange, .flatpickr-day.prevMonthDay.inRange, .flatpickr-day.nextMonthDay.inRange, .flatpickr-day.today.inRange, .flatpickr-day.prevMonthDay.today.inRange, .flatpickr-day.nextMonthDay.today.inRange, .flatpickr-day:hover, .flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover, .flatpickr-day:focus, .flatpickr-day.prevMonthDay:focus, .flatpickr-day.nextMonthDay:focus {
    background-color: var(--btn-hover) !important;
    border-color: var(--border-color) !important;
}

.flatpickr-day.inRange {
	background-color: var(--mdc-secondary-background) !important;
	box-shadow: -5px 0 0 var(--mdc-secondary-background) , 5px 0 0 var(--mdc-secondary-background)  !important;
}

.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)){
	box-shadow: -10px 0 0 var(--mdc-secondary-background) !important;
}
.flatpickr-current-month .numInputWrapper{
	width: 8ch !important;
}
.flatpickr-calendar.hasTime .flatpickr-time {
    border-top-color: var(--border-color) !important;
}

.flatpickr-time input {
    color: var(--font-color) !important;
}

.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month {
    color: var(--font-color) !important;
    fill: var(--font-color) !important;
}

.flatpickr-time input:hover, .flatpickr-time .flatpickr-am-pm:hover, .flatpickr-time input:focus, .flatpickr-time .flatpickr-am-pm:focus {
    background-color: var(--border-color) !important;
}

.numInputWrapper:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

.numInputWrapper span {
    border-color: rgba(151, 141, 125, 0.15) !important;
}

.flatpickr-time .numInputWrapper span.arrowDown::after, .flatpickr-time .numInputWrapper span.arrowUp::after {
    border-top-color: rgb(151, 141, 125) !important;
	border-bottom-color: rgb(151, 141, 125) !important;
}

.flatpickr-time .flatpickr-time-separator, .flatpickr-time .flatpickr-am-pm {
    color: var(--font-color) !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
    background-color: var(--mdc-theme-background) !important;
    outline-color: initial;
}


.mdc-snackbar__action:not(:disabled) {
    color: white !important;
}


.apexcharts-element-hidden{
	display: none;
}

.timepicker-ui-wrapper{
	background-color: var(--mdc-theme-background) !important;
	border-radius: 30px !important;
}

.timepicker-ui-tips-wrapper {
    background: var(--border-color) !important;
    border-radius: 50% !important;
}

.statistics-page .gateway-select.shaped-outlined .mdc-deprecated-list-item{
	height: 40px !important;
}

.statistics-page .gateway-select.shaped-outlined {
	height: 40px !important;
	width: 265px !important;
}

.statistics-page .gateway-select.shaped-outlined .mdc-select__anchor{
	height: 40px !important;
}

.widget .gateway-select.shaped-outlined .mdc-deprecated-list-item{
	height: 40px !important;
}

.widget .gateway-select.shaped-outlined {
	height: 40px !important;
	width: 100% !important;
}

.widget .gateway-select.shaped-outlined .mdc-select__anchor{
	height: 40px !important;
}
.timepicker-ui-clock-hand, .timepicker-ui-dot, .timepicker-ui-circle-hand{
	background-color: var(--mdc-priamry-color) !important;
}

.timepicker-ui-hour:hover, .timepicker-ui-hour.active, .timepicker-ui-minutes:hover, .timepicker-ui-minutes.active, .timepicker-ui-hour.mobile:hover, .timepicker-ui-hour.mobile.active, .timepicker-ui-minutes.mobile:hover, .timepicker-ui-minutes.mobile.active{
	color: var(--btn-accept-color) !important;
	background: var(--mdc-secondary-container) !important;
}
.timepicker-ui-hour, .timepicker-ui-minutes, .timepicker-ui-hour.mobile, .timepicker-ui-minutes.mobile {
	color: var(--font-color);
	background-color: var(--btn-hover) !important;
}
.timepicker-ui-hour-time-12, .timepicker-ui-minutes-time, .timepicker-ui-hour-time-24{
	color: var(--font-color);
}
.timepicker-ui-dots, .timepicker-ui-dots.mobile{
	color: var(--font-color) !important;
}

.timepicker-ui-select-time, .timepicker-ui-select-time.mobile{
	color: var(--font-color) !important;
	font-family: 'Manrope';
	font-weight: 300;
	text-transform: none !important;
	font-size: 16px !important;
}

.timepicker-ui-cancel-btn, .timepicker-ui-ok-btn, .timepicker-ui-cancel-btn.mobile, .timepicker-ui-ok.btn-mobile{
	text-transform: none !important;
	font-weight: 300 !important;
}

.timepicker-ui-clock-face {
	background-color: var(--btn-hover) !important;
}
.timepicker-ui-ok-btn,  .timepicker-ui-ok.btn-mobile{
	color: var(--btn-accept-color) !important;
	font-family: "Manrope" !important;
	font-weight: 300 !important;
}
.timepicker-ui-cancel-btn, .timepicker-ui-cancel-btn.mobile{
	color: var(--font-color) !important;
	font-family: "Manrope" !important;
	font-weight: 300 !important;
}

.timepicker-ui-cancel-btn:hover, .timepicker-ui-ok-btn:hover, .timepicker-ui-cancel-btn.mobile:hover, .timepicker-ui-ok.btn-mobile:hover{
	background: none !important;
}

 .colortemp-slider .rangeSlider.hoverable .rangeHandle:hover .rangeFloat{
	transform: translate(90%, 20%) !important;
}

.rangePips .pip.in-range {
	background-color: var(--pips) !important;
	color: var(--pips) !important
}

.shaped-outlined,
  .shaped-outlined .mdc-select__anchor {
    border-radius: 28px !important;
	height: 56px !important;
  }

  .trigger-wrapper .trigger-condition-time .shaped-outlined .mdc-text-field__input[type="number"] {
    padding-left: 0 !important;
	text-align: center;
	font-size: 32px;
	font-weight: bold;
    padding-right: 0 !important;
  }

  .trigger-wrapper .trigger-condition-time .shaped-outlined .mdc-notched-outline__leading,
  .trigger-wrapper .trigger-condition-time .shaped-outlined .mdc-notched-outline__trailing {
	border-color: var(--btn-accept-color) !important;
  }

  .trigger-wrapper .trigger-condition-time .shaped-outlined.mdc-text-field--focused {
	background: var(--active-table-device);
  }

  .mdc-text-field:not(.mdc-text-field--disabled)+.mdc-text-field-helper-line .mdc-text-field-helper-text{
	color: var(--font-color) !important;
  }

  .shaped-outlined .mdc-text-field__input {
    padding-left: 32px !important;
    padding-right: 0 !important;
  }
  
    .shaped-outlined
      .mdc-notched-outline
      .mdc-notched-outline__leading {
    border-radius: 28px 0 0 28px !important;
    width: 28px !important;
  }
  
    .shaped-outlined
      .mdc-notched-outline
      .mdc-notched-outline__trailing {
    border-radius: 0 28px 28px 0 !important;
  }
  .shaped-outlined .mdc-notched-outline .mdc-notched-outline__notch {
    max-width: calc(100% - 28px * 2) !important;
  }
  .shaped-outlined.mdc-select--with-leading-icon
      .mdc-notched-outline:not(.mdc-notched-outline--notched)
      .mdc-floating-label {
    left: 16px !important;
  }

  .shaped-outlined.mdc-select--activated{
	border-bottom: none !important;

  }

  .shaped-outlined.mdc-select--activated 
  		.mdc-notched-outline
      .mdc-notched-outline__leading{
	border-radius: 28px 0px 0px 0px !important;
	transition: all 0.12s;
}
.shaped-outlined.mdc-select--activated 
.mdc-notched-outline
.mdc-notched-outline__trailing{
    border-radius: 0 28px 0 0 !important;
	transition: all 0.12s;

}

.shaped-outlined .mdc-menu-surface--is-open-below {
	border-radius: 0px 0px 28px 28px ;
	border: 1px solid var(--border-color);
}

.mdc-dialog, .mdc-dialog__header, .mdc-dialog__title, .mdc-dialog__content {
	font-family: 'Manrope' !important;
	font-weight: 400 !important;
}
.mdc-deprecated-list{
	font-family: 'Manrope' !important;
	font-weight: 400 !important;
}

.mdc-button--raised .mdc-button__ripple{
	border-radius: 28px !important;
}

.mdc-select__selected-text{
	font-family: 'Manrope' !important;
}

.mdc-snackbar__label{
	font-family: 'Manrope' !important;
}

.device-field .rangeSlider, .card-dimmer .rangeSlider, .zone-card .rangeSlider, .mini-device .rangeSlider  {
	pointer-events: none;
  }
  span.rangeHandle  {
	pointer-events: all;
  }

  .card-dimmer span.rangeBar, .zone-card span.rangeBar, .mini-device span.rangeBar {
	pointer-events: none;
  }
  .colortemp-slider .rangeSlider {
	pointer-events: all !important;
  }

  .colortemp-slider .span.rangeBar {
	pointer-events: all !important;
  }

/* ios like switch */
.mdc-switch__track {
	width: 42px !important;
    height: 25px !important;
	border-radius: 30px !important;
}

.mdc-switch.mdc-switch--checked .mdc-switch__track{
	background-color: var(--blob-outline) !important;
}

.mdc-switch__thumb-underlay{
	left: -11px !important;
	top: -12px !important;
}
.mdc-switch__handle-track {
	transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
.apexcharts-tooltip-text-goals-value, .apexcharts-tooltip-text-y-value, .apexcharts-tooltip-text-z-value {
    font-weight: bold !important;
}

.timepicker-ui-modal{
	font-family: 'Manrope' !important;
	transition: opacity 0.05s linear !important;
	background-color: var(--mdc-theme-text-secondary-on-background) !important;
}


.mdc-radio .mdc-radio__native-control:enabled:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle{
	border-color: var(--button-disabled-color) !important;
}
.mdc-form-field{
	color: var(--font-color) !important;
}

.mdc-tooltip.mdc-tooltip--rich .mdc-tooltip__surface{
	background-color: var(--mdc-theme-background) !important;
}

.mini-device .rangeSlider .rangeNub {
	background-color: var(--range-bar-handle-inactive);
	left: -9px;
    top: 9px;
    height: 80%;
    width: 80%;

}
.widget .zone-card .rangeSlider .rangeNub {
	height: 110%;
    width: 110%;
	left: -15px;
    top: 11px;
}
.zone-card .rangeSlider .rangeHandle.active .rangeFloat {
	transform: translate(-50%, -100%);
}
.card-dimmer .rangeSlider .rangeNub, .device-field .rangeNub, .zone-card .rangeSlider .rangeNub {
	background-color: var(--range-bar-handle-inactive) !important;
	left: -15px !important;
    top: 11px !important;
}
.card-dimmer .rangeNub, .zone-card .rangeNub, .device-field .rangeNub, .mini-device .rangeNub {
	display: flex !important;
}

.card-dimmer .rangeSlider.focus .rangeNub, .device-field .rangeSlider.focus .rangeNub,  .zone-card .rangeSlider.focus .rangeNub{
	background-color: var(--range-bar-handle-active) !important;
}

.card-dimmer .rangeSlider.disabled .rangeNub, .device-field .rangeSlider.disabled .rangeNub, .card-dimmer .sliders.disabled .rangeSlider .rangeNub{
	background-color: var(--range-bar-handle-inactive) !important;
}


/* test */


/*Rotating*/
@-webkit-keyframes rotating /* Safari and Chrome */ {
	from {
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@keyframes rotating {
	from {
		-ms-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	to {
		-ms-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-webkit-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
.rotating {
	-webkit-animation: rotating 0.6s linear infinite;
	-moz-animation: rotating 0.6s linear infinite;
	-ms-animation: rotating 0.6s linear infinite;
	-o-animation: rotating 0.6s linear infinite;
	animation: rotating 0.6s linear infinite;
}


/*Name search*/

.highlight {
	background: var(--highlight) !important;
}

.v-scrollbar {
	z-index: 1;
}

@media (min-width: 426px) {
	:root {
		--svrollbar-track-width: 14px;
	}
}

.scene-popup .rangeNub {
	opacity: 0;
}


.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__affix--suffix{
	color:var(--font-color) !important;
}

	.v-scrollbar {
	width: 4px !important;
  }

  .v-track {
	background: transparent !important;
  }

  .v-thumb {
	background: var(--border-color) !important;
	border-radius: 4px !important;
  }