:root{
	--background-light: #FFFFFF;
	--background-dark: #F0F2F4; /* Original: #F7F8F9*/
	--background-logregmgmt: #FCFCFC;
	--background-ui-overlay: #00000099;
	
	--text-light: #FFFFFF;
	--text-dark: #3D4649;
	--text-welcome-subtitle: #81949B;
	--text-bold: #656F73;
	--text-bold-light: #9FA5A8;
	
	--text-sidebar-inactive: #909FA5;
	
	--primary-blue: #355A9B;
	--secondary-blue: #3F69B3;
	
	--primary-red: #D71F1F;
	--secondary-red: #BD1B1B;
	
	--primary-green: #28B446;
	
	--sidebar-active: rgba(144, 159, 165, 0.05);
	--sidebar-focus-bg: rgba(144, 159, 165, 0.00);
	--shadow-logregmgmt: rgba(180, 209, 218, 0.25);
	--focus-outline: rgba(53, 90, 155, 0.20);
	--focus-red: rgba(215, 31, 31, 0.20);
	
	--dev-filter-active: #4D75BC;
	
	--toggle-background: #E4E6E7;
	--lvl2-box-shadow: rgba(192, 192, 192, 0.25);
	
	--sidebar-separator: #DAE4ED;
	--border-blue: #E2E5E7;
	--disabled-background: #F1F1F1;
	
	--dashed-line: #ABBFC3;
	
	--yellow-container: #FFF6E8;
	
	/*--debug-purple: #6d6e69;*/
	--debug-purple: transparent;
	
	--singlepole-chin-color: #F5F6F7;
	
	--range-select-bg: #E4E6E7;
	
	--chart-ticks: #878D8F;
	--chart-grid: #E2E5E7;
	
	--scrollbar-normal: #DAE4ED;
	--scrollbar-hover: #ABBFC3;
	
	--norgb-shadow-color: #bbb;
}


html{
	max-width: 100vw;
	height: 100vh;
	overflow: hidden;
	/*overscroll-behavior: none;*/
	/*overflow: auto;*/
	margin: 0px;
	padding: 0px;
	font-family: 'Manrope', normal; 
	font-weight: 600;
}

body{
	height: 100%;
	max-height: 100%;
	margin: 0px;
	padding: 0px;
	font-family: 'Manrope', normal; 
	font-weight: 600;
}

h1, h2, h3, img, p, svg{
	-ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;
	-webkit-user-drag: none;
}

.document-container a{
	color: var(--text-dark);
}

.document-container h1, h2, h3, img, p, svg{
	-ms-user-select: auto;
    -webkit-user-select: auto;
    user-select: auto;
	-webkit-user-drag: auto;
}

.document-container .logo-inline-mgmt:hover{
	cursor: pointer;
}

.info-single-record-div h2{
	-ms-user-select: auto;
    -webkit-user-select: auto;
    user-select: auto;
}

.donotshow{
	display: none;
}

.ui-container-mgmt, .ui-container-login, .ui-container-register, .notfound-ui-container{
	margin: 0px;
	padding: 16px;
	box-sizing: border-box;
	display: flex;
	height: auto;
	min-height: 100vh;
	width: 68%;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.index-ui-container{
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 0px 0px 0px 0px;
	overflow: hidden;
}

.index-divsel{
	height: 100%;
	width: 100%;
	padding: 24px 40px;
	box-sizing: border-box;	
	display: flex;
	flex-direction: column;
	overflow-y: auto;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.login-background-img, .register-background-img, .mgmt-background-img{
	width: 66vw;
	height: 100vh;
	margin:0px;
	padding:0px;
	position:fixed;
	left:34vw;
	top: 0px;
	background: url("/images/background_login.webp");
	background-size: auto 101vh;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

.index-body{
	bottom: 0px;
	background: var(--background-light);
	display: flex;
	flex-direction: row;
	height: 100dvh;
}

.login-body, .register-body, .mgmt-body{
	background: var(--background-logregmgmt);
}

.index-sidebar{
	box-sizing: border-box;
	height: 100vh;
	width: 100px;
	background: var(--background-dark);
	border-radius: 0px 24px 24px 0px;
	flex-shrink: 0;
	
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 32px 16px;
}


#logout-sidebtn{
	margin-top: auto;
}


.home-welcome-div{
	width: 100%;
	max-width: 1500px;
	background: url(/images/background_login.webp);
	box-sizing: border-box;
	border-radius: 24px;
	background-size: 1500px auto;
	background-position: left 78%;
	background-repeat: no-repeat;
	padding: 40px;	
}

.room-top-banner-div{
	gap:44px;
	width: 100%;
	box-sizing: border-box;
	border-radius: 24px;
	padding: 0px;	
	display: flex;
	justify-content: space-between;
	align-items:center;
	flex-direction: column;
	padding: 24px 32px;
}

#active-room-top-div{
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 0px;	
	display: flex;
	justify-content: space-between;
	align-items:center;
	flex-direction: row;
}

#active-room-bottom-div{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items:center;
	width: 100%;
	box-sizing: border-box;
	padding: 0px;	
}

#active-room-edit{
	display: none;
	align-self: start;
}

#active-room-icon{
	display: none;
}

#active-room-back{
	display:flex;
	align-self: start;
}

#active-room-name{
	display: none;
	align-self: start;
	padding: 0px 0px 0px 24px;
	color: var(--text-dark);
	font-family: Manrope;
	font-size: 26px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	margin: 0px;
}

.imgbtndiv-g8{
	display: flex;
	height: 40px;
	padding: 8px 16px;
	justify-content: center;
	align-items: center;
	gap: 8px;
	border-radius: 24px;
	background: var(--background-light);
	box-sizing: border-box;
}

#shared-rooms-txt{
	color: var(--text-dark);
    font-size: 24px;
    font-weight: 600;
    margin: 0px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.shrdrm-g8{
	display: flex;
	min-height: 40px;
	max-height: 100%;
	overflow: hidden;
	padding: 8px 16px;
	justify-content: center;
	align-items: center;
	gap: 8px;
	border-radius: 24px;
	background: var(--background-light);
	box-sizing: border-box;
	max-width: 40%;
	align-self: start;
}

.imgbtndiv-g8 svg, .shrdrm-g8 svg{
	width: 20px;
	height: 20px;
}

.imgbtndiv-g8 h2{
	color: var(--text-dark);
	text-align: center;
	font-family: Manrope;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: 16px; /* 114.286% */
	margin: 0px;
}

.shrdrm-g8 h2{
	color: var(--text-dark);
	text-align: center;
	font-family: Manrope;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: 16px; /* 114.286% */
	margin: 0px;
	overflow-wrap: break-word;
    max-width: 100%;
}

.active-room-bottom-g16{
	display: flex;
	align-items: center;
	gap: 16px;
	max-width: 70%;
}

.active-room-bottom-g16 svg{
	height: 40px;
	width: 40px;
}

.active-room-bottom-g16 h1{
	color: #3D4649; /* STATIC COLOR! */
	font-family: Manrope;
	font-size: 26px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	margin: 0px;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-welcome-div h1{
	color: var(--text-dark);	
	font-size: 28px;	
	font-weight: 500;	
	margin: 0px;
}

.home-welcome-div p{
	color: var(--text-welcome-subtitle);	
	font-size: 14px;	
	font-weight: 400;	
	margin: 0px;
	margin-bottom: -3px;
}


.devices-outer-div{
	position: relative;
    width: auto;
    height: auto;
    padding: 24px 0px 24px 0px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 24px;
    overflow-y: scroll;
    margin-left: -40px;
    margin-right: -40px;
    padding-left: 40px;
    padding-right: 40px;
    margin-bottom: -24px;
}

.home-outer-div, .rooms-outer-div{
	position: relative;
	width:100%;
	height: auto;
	padding: 24px 0px 24px 0px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.rooms-header-div{
	position: relative;
	width:100%;
	height: auto;
	padding: 0px 0px 24px 0px;
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.settings-header-div{
	padding: 2px 0px 26px 0px;
}

.devices-header-div-outer{
	position: relative;
	width:100%;
	height: auto;
	padding: 0px 0px 16px 0px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.devices-header-div{
	position: relative;
	width:100%;
	height: auto;
	padding: 0px 0px 0px 0px;
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;	
}

.pulseable-pulsing{
	animation: pulse 2s infinite;
	z-index: 20 !important;
}

@keyframes pulse {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 #4D75BCB2;
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
	}

	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
	}
}


.filter-order-container-div{
    width: 100%;
    height: auto;
    padding: 0px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
}

.devices-filter-container-header-div, .devices-order-container-header-div{
	padding: 0px;
	box-sizing: border-box;
	display: flex;
	max-width: 100%;
	flex-direction: row;
	align-items: center;
	justify-content: left;
	flex-wrap: wrap;
	overflow: auto;
	gap: 8px;
}

.devices-filter-header-div, .devices-order-header-div{
	display: flex;
	padding: 9px 16px;
	justify-content: center;
	align-items: center;
	border-radius: 100px;
	background: var(--background-dark);		
}

.devices-filter-header-div h1, .devices-order-header-div h1{
	margin: 0px;
	color: var(--text-dark);
	text-align: center;
	font-size: 16px;
	font-weight: 700;
	text-wrap: nowrap;
	overflow-wrap: normal;
	white-space: nowrap;
}

.devices-header-div h1, .settings-header-div h1, .rooms-header-div h1{
	color: var(--text-dark);	
	font-size: 26px;	
	font-weight: 700;	
	margin: 0px;
}

.devices-header-div img, .rooms-header-div img{
	height: 40px;
	width: 40px;
	border-radius: 50%;
}

.home-inner-div{
	box-sizing: border-box;
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: left;
	gap: 16px;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 0px 40px 6px 40px;
}


.action-fade-overlay{
	position:absolute;
	width:100%;
	height:100%;
	left: 0px;
	top: 0px;
	background: linear-gradient(90deg, var(--background-light), transparent 2%, transparent 98%, var(--background-light));
	pointer-events: none;
}

.ui-overlay{
    background: var(--background-ui-overlay);
    position: absolute;
    z-index: 10;
    width: 100%;
    height: 100%;
    top: 0px;
	left: 0px;
    padding: 40px;
	box-sizing: border-box;
	
	display: flex;
	flex-direction: row;
	justify-content: right;
	align-items: flex-start;
	color: var(--text-light);
	transition: opacity 0.15s ease-in-out;
}

.ui-overlay-inner{
	background: var(--background-dark);
	padding: 0px;
	margin: 0px;
	display: flex;
	flex-direction: row;
	justify-content: right;
	align-items: flex-start;
	gap: 8px;
	height: 100%;
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0px 4px 32px 0px var(--shadow-logregmgmt);
}

#install-pwa-overlay{
	justify-content: center;
	align-items: center;
}

.ui-overlay-block{	
	flex-grow: 1;
	position:relative;
	display: flex;
	flex-direction: column;
	justify-content: start;
	align-items: center;
	height: 100%;
	padding: 16px 0px 0px 0px;	
	background: var(--background-light);	
	box-sizing: border-box;
	overflow-y: auto;
	min-width: 320px;
}

.ui-overlay-block-inner{
	position:relative;
	display: flex;
	flex-direction: column;
	justify-content: start;
	align-items: center;
	width: 100%;
	height: 100%;
	padding: 0px 12px 32px 20px;			
	gap: 24px;
	box-sizing: border-box;
	overflow-y: scroll;
	overflow-x: hidden;
}	

.info-message-box-div{
	display: flex;
	padding: 12px 16px;
	align-items: center;
	gap: 16px;
	/*align-self: stretch;*/
	border-radius: 24px;
	background: var(--background-dark);
}

.info-message-box-div h2{
	color: var(--text-dark);
	text-align: center;
	font-family: Manrope;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	margin: 0px;
}

.connections-list-noconn-placeholder-div{
	display: none;
	width: 100%;
	padding: 24px 32px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 8px;
	border-radius: 24px;
	background: var(--background-dark);
	box-sizing: border-box;
}

.framemod-list-noconn-placeholder-div{
	display: none;
	width: 100%;
	padding: 24px 32px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 8px;
	border-radius: 24px;
	background: var(--background-light);
	box-sizing: border-box;
	max-width: 300px;
	box-shadow: 0px 4px 32px 0px var(--lvl2-box-shadow);
	box-sizing: border-box;
}

.connections-list-noconn-placeholder-div h1,
.framemod-list-noconn-placeholder-div h1{
	align-self: stretch;
	margin: 0px;
	color: var(--text-dark);
	text-align: center;
	font-family: Manrope;
	font-size: 18px;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
}

.connections-list-noconn-placeholder-div h2,
.framemod-list-noconn-placeholder-div h2{
	margin: 0px;
	color: var(--text-bold);
	font-family: Manrope;
	font-size: 12px;
	font-style: normal;
	font-weight: 500;
	text-align: center;
	line-height: normal;
}

.connections-list-noconn-placeholder-div:only-child,
.framemod-list-noconn-placeholder-div:only-child{
	display: flex;
}

.connections-linksable-btns-list-div{
	display: flex;
	padding: 0px 24px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 8px;
	align-self: stretch;
}


.connections-linksable-btns-list-div h2{
	color: var(--text-bold);
	text-align: center;
	font-family: Manrope;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	margin: 0px;
}

strong{
	font-weight: 700;
}

.ui-overlay-block-inner-inner{
	display: flex;
	flex-direction: column;
	justify-content: start;
	align-items: stretch;
	align-self: stretch;
	padding: 0px 8px 32px 8px;		
	gap: 24px;
	box-sizing: border-box;
}

.ui-overlay-block-inner-inner-centered{
	display: flex;
	flex-direction: column;
	justify-content: start;
	align-items: center;
	align-self: stretch;
	padding: 0px 0px 32px 0px;		
	gap: 24px;
	box-sizing: border-box;
}

.add-text-of-step{
	margin: 0px;
	color: var(--text-dark);
	text-align: center;
	font-family: Manrope;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
}

.add-step-text-container{
	display: flex;
	padding: 16px 24px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 32px;
	align-self: stretch;
}

.add-step-content-container{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 16px;
	align-self: stretch;
}

.add-step-content-selectable{
	display: flex;
	padding: 16px 24px 16px 0px;
	align-items: center;
	gap: 20px;
	align-self: stretch;
	border-radius: 24px;
	background: var(--background-dark);
	cursor: pointer;
}

.add-step-ilustration-container{
	display: flex;
	padding: 16px 24px;
	align-items: center;
	gap: 20px;
	align-self: stretch;
	justify-content: center;
	border-radius: 24px;
	background: var(--background-dark);
}

.add-step-ilustration-container img{
	height: 150px;
}

.add-netlist-container{
	display: flex;
	padding: 16px 24px 16px 16px;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	align-self: stretch;
	border-radius: 24px;
	background: var(--background-dark);	
}

.add-listable-network-container{
	display: flex;
	align-items: flex-start;
	gap: 8px;
	align-self: stretch;
	cursor: pointer;
}

.disabled-in-this-mode{
	opacity: 0.4;
	pointer-events: none;
	cursor: default;
}



.disabled-in-this-mode h3:after{
	content:" (Disabled in this mode)";
}

.add-listable-network-container-selected img{
	opacity: 1 !important;
}

.add-listable-network-container-rssi{
	opacity: 1 !important;
}

.add-listable-network-container img{
	width: 20px;
	height: 20px;
	opacity: 0;
}

.add-listable-network-container h3{
	margin: 0px;
	flex: 1 0 0;
	color: var(--text-dark);
	font-family: Manrope;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.add-connecting-waiter-container{
	margin-top: 60px;
	display: flex;
	padding: 16px 40px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 32px;
	align-self: stretch;
}

.add-connecting-waiter-container img{
	width: 96px;
	height: 96px;
}

.add-connecting-waiter-container-inner{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 16px;
	align-self: stretch;
}

.add-connecting-waiter-container-inner h1{
	margin: 0px;
	align-self: stretch;
	color: var(--text-dark);
	text-align: center;
	font-family: Manrope;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
}

.add-connecting-waiter-container-inner h2{
	margin: 0px;
	align-self: stretch;
	color: var(--text-dark);
	text-align: center;
	font-family: Manrope;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
}

.add-step-content-yellow-error-container{
	display: flex;
	padding: 24px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 16px;
	align-self: stretch;
	border-radius: 24px;
	background: var(--yellow-container);
}

.add-step-content-yellow-error-container img, .add-step-content-yellow-error-container svg{
	width: 24px;
	height: 24px;
}

.add-step-content-yellow-error-container h3{
	margin: 0px;
	align-self: stretch;
	color: var(--text-dark);
	text-align: center;
	font-family: Manrope;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
}

.add-step-content-selectable-selected{
	border-radius: 24px;
	background: var(--background-dark);
	box-shadow: 0px 0px 0px 2px var(--primary-blue);
}

.add-step-content-selectable img{
	height: 108px;
}

.add-step-content-selectable h2{
	flex: 1 0 0;
	margin: 0px;
	color: var(--text-dark);
	font-family: Manrope;
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
}

.device-info-name-with-edit-div{
	width: 100%;
	border-bottom: 1px solid var(--border-blue);
	display: flex;
	padding: 16px 24px;
	box-sizing: border-box;
	justify-content: space-between;
	align-items: center;
	align-self: stretch;
}

.device-info-name-with-edit-div-img{
	width: 20px;
	height: 20px;
	filter: drop-shadow(0px 0px 4px #F7F8F9); /* CONST COLOR */
}



.device-info-name-with-edit-div-label{	
	margin: 0px 16px 0px 0px;
	color: var(--text-dark);
	text-align: left;
	width: 100%;
	font-family: Manrope;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
}

.device-info-name-with-edit-div-label:disabled{
	background:transparent;
	border: none;
	padding: 0px;
	height: auto;
	border-radius: 0px;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
	pointer-events: none;
}



.info-list-of-info-records-div{
	display: flex;
	flex-direction: column;
	justify-content: start;
	gap: 0px;
	width: 100%;
	padding: 8px 0px;
}

.info-single-record-div, .info-single-record-div-clickable{
	display: flex;
	padding: 8px 24px;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	align-self: stretch;
	position: relative;
}


.info-single-record-div-name{
	margin: 0px;
	align-self: stretch;
	color: var(--text-bold);
	font-family: Manrope;
	font-size: 12px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
}

.info-single-record-div-value{
	margin: 0px;
	align-self: stretch;
	color: var(--text-dark);
	font-family: Manrope;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
}

.device-options-info-level1-div{
	border-radius: 24px;
	background: var(--background-dark);
	display: flex;
	width: 100%;
	padding-bottom: 8px;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	min-height: 52px;
	overflow: hidden;
}

.device-options-info-level1-div-nopad{
	border-radius: 24px;
	background: var(--background-dark);
	display: flex;
	width: 100%;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	min-height: 52px;
	overflow: hidden;
}

.device-options-level1-div{
	border-radius: 24px;
	background: var(--background-dark);
	display: flex;
	width: 100%;
	padding: 24px 0px;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	box-sizing: border-box;
	justify-content: center;
}

.inside-modopt-div{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	width: 100%;
	box-sizing: border-box;
	padding: 0px 24px;
}

.outside-modopt-div{
	display: flex;
	padding: 0px;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}

.device-options-level2-div{
	background: var(--background-light);
	border-radius: 24px;
	width: 100%;
	max-width: 300px;
	box-shadow: 0px 4px 32px 0px var(--lvl2-box-shadow);
	box-sizing: border-box;
	min-height: 52px;
	display: flex;
	flex-direction: column;
	justify-content: start;
	align-items: center;
	overflow: hidden;
	padding: 8px 0px;
}

.device-options-level2-div-nopad{
	background: var(--background-light);
	border-radius: 24px;
	width: 100%;
	max-width: 300px;
	box-shadow: 0px 4px 32px 0px var(--lvl2-box-shadow);
	box-sizing: border-box;
	min-height: 52px;
	display: flex;
	flex-direction: column;
	justify-content: start;
	align-items: center;
	overflow: hidden;
	padding: 0px;
}

.csm-options-div{
	width: 100%;
	padding-bottom: 9px;
}

.activate-button-tiny{
	width: 40px;
    height: 24px;
    box-sizing: border-box;
    padding: 0px;
    margin: 0px;
	font-size: 8px;
    font-weight: 400;
	min-height: 0px;
}

.timer-input{
	display: flex;
	width: 64px;
	height: 35px;
	padding: 10px 12px;
	justify-content: center;
	align-items: center;
	gap: 12px;
	border-radius: 12px;
	text-align: center;
	border: 1px solid var(--border-blue);
}

.device-options-level2-clickable-div{
	border-radius: 24px;
	box-shadow: 0px 4px 32px 0px var(--lvl2-box-shadow);
	display: flex;
	width: 100%;
	max-width: 300px;
	padding: 16px 16px 16px 24px;
	justify-content: space-between;
	align-items: center;
	box-sizing: border-box;
}

.device-options-level2-clickable-div div{
	display: flex;
	align-items: center;
	gap: 8px;
}

.csm-rotate-right{
	transform: rotate(90deg);
}

.csm-rotate-left{
	transform: rotate(-90deg);
}


.device-options-level2-clickable-div img, .device-options-level2-clickable-div svg{
	height: 20px;
}

.device-options-level2-clickable-div h2{
	color: var(--text-dark);
	font-family: Manrope;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	margin: 0px;
}

.scheduler-or-similar-button{
	position: relative;
	display: flex;
	padding: 16px 16px 16px 24px;
	justify-content: space-between;
	align-items: center;
	border-radius: 24px;
	background: var(--background-light);
	box-shadow: 0px 4px 32px 0px var(--lvl2-box-shadow);
	width:100%;
	max-width: 300px;
	box-sizing: border-box;
	min-height: 52px;
}

.stats-display-div{
	display: flex;
	flex-direction: row;
	width: 100%;
	padding: 0px 24px;
	justify-content: space-between;
	align-items: center;
	box-sizing: border-box;
}

.stats-display-div h1{
	color: var(--text-dark);
	font-family: Manrope;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: 20px; /* 142.857% */
	letter-spacing: 0.5px;
	text-transform: uppercase;
	margin: 0px;
}

.stats-display-div button{
	height: auto;
	width: auto;
	display: flex;
	padding: 6px 12px 6px 10px;
	justify-content: center;
	align-items: center;
	gap: 8px;
	border-radius: 8px;
	border: 1px solid var(--border-blue);
	background: var(--background-light);
	min-height: unset;
}

.stats-display-div button:focus{
	background: unset;
}

.stats-display-div svg{
	width: 18px;
	height: 18px;
}

.stats-display-div h3{
	color: var(--text-bold);
	text-align: right;
	font-family: Manrope;
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
	margin: 0px;
}

.voltage-current-display-div{
	display: flex;
	flex-direction: column;
	padding: 24px 32px 16px 32px;
	justify-content: space-between;
	border-radius: 24px;
	background: var(--background-dark);
	width: 100%;
	box-sizing: border-box;
	gap: 5px;
}

.chart-display-div{
	display: flex;
	flex-direction: column;
	padding: 24px 32px;
	justify-content: space-between;
	border-radius: 24px;
	background: var(--background-dark);
	width: 100%;
	box-sizing: border-box;
	gap: 5px;
}

.chart-period-selector-div h1{
	color: var(--chart-ticks);
	text-align: center;
	font-family: Manrope;
	font-size: 10px;
	font-style: normal;
	font-weight: 700;
	line-height: 10px; /* 100% */
	margin: 0px;
}

.chart-arrow-disabled{
	opacity: 0.4;
}

.chart-right-sum-div{
	display:flex;
	flex-direction: row;
	align-items: center;
	justify-content: start;
}

.chart-period-selector-div svg{
	height: 16px;
}

.chart-period-selector-div{
	display:flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	margin-top: 3px;
}

.actual-chart-div{
	width: 100%;
	height: 156px;
}

.chart-range-select-div{
	display: flex;
	width: 100%;
	padding: 4px;
	align-items: flex-start;
	border-radius: 8px;
	background: var(--range-select-bg);
	margin-top: 16px;
}

.chart-range-select-div h1{
	color: var(--text-dark);
	text-align: center;
	font-family: Manrope;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	margin: 0px;
}

.chart-range-select-div div{
	display: flex;
	height: 32px;
	justify-content: center;
	align-items: center;
	gap: 10px;
	flex: 1 0 0;
	border-radius: 4px;
}

.chart-range-selected{
	background:  var(--background-light);
}


.voltage-current-display-title-div{
	display:flex;
	flex-direction: row;
	justify-content: space-between;
}

.voltage-current-display-title-div h1{
	color: var(--text-dark);
	font-family: Manrope;
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
	margin: 0px;
}

.voltage-current-display-title-div h2{
	color: var(--text-dark);
	text-align: right;
	font-family: Manrope;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	margin: 0px;
	margin-left: 4px;
}

.volts-line{
	width: 100%;
	height: 8px;
	flex-shrink: 0;
	border-radius: 4px;
	background: linear-gradient(90deg, #D7561F 0%, #F1C553 27.12%, #82D45C 50.22%, #F1C553 73.45%, #D7561F 100%);
	box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.16) inset;
}

.amps-line{
	width: 100%;
	height: 8px;
	flex-shrink: 0;
	border-radius: 4px;
	background: linear-gradient(90deg, #82D45C 50.22%, #F1C553 73.45%, #D7561F 100%);
	box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.16) inset;
}

.volts-numbers{
	display: flex;
    margin-top: 9px;
    justify-content: space-evenly;
    align-items: flex-end;
}

.current-numbers{
	display: flex;
    margin-top: 9px;
    justify-content: space-between;
    align-items: flex-end;
}

.volts-number-div{
	display:flex;
	flex-direction: column;
	align-items: center;
	width: 0px;
	padding: 0px;
	margin: 0px;
	gap: 3px;
}

.volts-number-div div{
	width: 1px;
	height: 11px;
	opacity: 0.6;
	background: var(--text-dark);
}

.volts-number-div h1{
	color: var(--text-dark);
	text-align: center;
	font-family: Manrope;
	font-size: 10px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	margin: 0px;
}

.voltage-current-arrow-div{
	display:flex;
	position: relative;
	flex-direction: column;
	width: 40px;
	gap: 4px;
	align-items: center;
}

.voltage-current-arrow-div svg{
	width: 20px;
	height: 18px;
	flex-shrink: 0;
}

.voltage-current-arrow-div h1{
	color: var(--text-dark);
	text-align: center;
	font-family: Manrope;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	margin: 0px;
}

.voltage-current-arrow-conatiner{
	display: block;
	width: 100%;
	padding: 0px;
	margin: 0px -20px 0px -20px;
}

.scheduler-opt-select-container{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	gap: 16px;
}

.scheduler-or-similar-button-left{
	display: flex;
	align-items: center;
	gap: 8px;
}

.scheduler-or-similar-button-left img, .scheduler-or-similar-button-right img{
	width: 20px;
	height: 20px;
}

.scheduler-counter-blue-div h2{
	color: #fff;	/* Maybe const color */
	text-align: center;
	font-family: Manrope;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	margin: 0px;
}

.scheduler-counter-blue-div{
	display: flex;
	width: 20px;
	height: 20px;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	border-radius: 100px;
	background: linear-gradient(315deg, var(--primary-blue) 0%, var(--dev-filter-active) 100%);
}

.scheduler-or-similar-button-left h1{
	color: var(--text-dark);
	font-family: Manrope;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	margin: 0px;
}

.scheduler-or-similar-button-right{
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 2px;
}

.options-level2-entry-container{
	display: flex;
	padding: 10px 32px;
	justify-content: space-between;
	align-items: center;
	align-self: stretch;
	gap: 8px;
}

.options-level2-entry-container-tabbed{
	display: flex;
	padding: 10px 32px 10px 48px;
	justify-content: space-between;
	align-items: center;
	align-self: stretch;
	gap: 8px;
}

.options-level2-entry-container h2{
	margin: 0px;
	color: var(--text-bold);
	font-family: Manrope;
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
}

.options-level2-entry-container img{
	width: 24px;
	height: 24px;
}

.frame-with-numbers-outer{
	display:flex;
	max-width: 100%;
	flex-direction: row;
	overflow-x: auto;
	padding: 0px 16px 16px 16px;
	box-sizing: border-box;
}

.frame-with-numbers{
	display:flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 32px;
}

.numbers-ms-div{
	padding: 0px 14px 0px 14px;
	display:flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 28px;
}

.connections-list-module-displayer-div{
	position: relative;
	display: flex;
	padding: 32px;
	align-items: center;
	gap: 16px;
	align-self: stretch;
	border-radius: 24px;
	background: var(--background-dark);
	justify-content: space-between;
}

.connections-list-module-corner-dot-div{
	position: absolute;	
	top: 12px;
	right: 16px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	visibility: hidden;
}

.connections-list-module-corner-dot-div h3{
	color: var(--text-bold);
	font-family: Manrope;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 18px; /* 128.571% */
	margin: 0px;
}

.connections-list-module-corner-dot-div div{
	height: 12px;
	width: 12px;
	border-radius: 12px;
}

.connections-list-module-displayer-div img{
	height: 72px;
}

.connections-vertical-g8{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 8px;
	width: 200px;
}

.connections-vertical-g8 h1{
	color: var(--text-dark);
	font-family: Manrope;
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	margin: 0px;
	max-width: 150px;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.connections-list-module-displayer-div:hover{
	cursor: pointer;
}

.connections-list-module-active-and-inactive-shower-div{
	display: flex;
	align-items: flex-start;
	gap: 11px;
}

.connections-list-module-active-and-inactive-shower-div svg{
	height: 20px;
	width: 20px;
}

.connections-list-module-actorinact-container{
	display: flex;
	align-items: center;
	gap: 4px;
}

.connections-list-module-actorinact-container h2{
	color: var(--text-bold);
	font-family: Manrope;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	margin: 0px;
}

.pwa-overlay-block{
	gap: 8px !important;
}

.ui-overlay-toolbar-div{
	display: flex;
	align-self: stretch;
	justify-content: space-between;
	flex-direction: row;
	align-items: center;
	padding: 0px 24px 16px 24px;
}

.ui-overlay-main-div{
	display:flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	position: relative;
	width: 100%;
}

.ui-overlay-toolbar-title-container{
	display: flex;
	flex-direction: column;
	gap: 2px;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	width: 80%;
	max-width: 320px;
}

.ui-overlay-toolbar-title{
	color: var(--text-dark);
	text-align: center;
	font-size: 16px;
	font-weight: 700;
	margin: 0px;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90%;
}

.ui-overlay-toolbar-subtitle{
	color: var(--text-bold);
	padding: 2px;
	text-align: center;
	font-family: Manrope;
	font-size: 12px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	margin: 0px;	
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
	width: 300px;
}

.ui-overlay-toolbar-option{
	padding: 0px;
	display: flex;
	justify-content: center;
	border-radius: 8px;
	width: 32px;
	height: 32px;
	position: relative;
}

.ui-overlay-toolbar-option-40{
	padding: 0px;
	display: flex;
	justify-content: center;
	border-radius: 8px;
	width: 40px;
	height: 40px;
}

.ui-overlay-toolbar-option-inivisible{
	padding: 0px;
	display: flex;
	width: 32px;
	height: 32px;
	opacity: 0;
}

.ui-overlay-toolbar-option img, .ui-overlay-toolbar-option svg{
	height: 32px;
	width: 32px;
	margin: 0px;
	border-radius: 8px;
}

.ui-overlay-toolbar-option-40 img{
	height: 40px;
	width: 40px;
	margin: 0px;
}

.device-more-info-section-div{
	display:flex;
	flex-direction: column;
	width: 100%;
	padding: 0px;
	gap: 16px;
}

.device-more-info-section-title-div{
	padding: 16px 0px 0px 0px;
	width: 100%;
}

.device-more-info-section-title-div h1{
	margin: 0px;
	color: var(--text-dark);
	font-family: Manrope;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: 20px; /* 142.857% */
	letter-spacing: 0.5px;	
}

.device-more-info-module-container{
	display: flex;
	flex-direction: row;
	justify-content: start;
	align-items: top;
	width: 100%;
	padding: 0px;
	gap: 8px;
}

.device-more-info-module-container-left{
	width: 32px;
	display: flex; 
	flex-direction: column;
	gap: 8px;
}

.device-more-info-mx-bubble{
	box-sizing: border-box;
	height:32px;
	width: 32px;
	border-radius: 32px;
	border: 1px solid var(--border-blue);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.device-more-info-mx-bubble h1{
	margin: 0px;
	color: var(--text-dark);
	text-align: center;
	font-family: Manrope;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
}



.add-action-div{
	width: 176px;
	height: 148px;
	flex-shrink: 0;
	border-radius: 24px;
	border: 1px dashed var(--dashed-line);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 16px;
}

.action-div{
	height: 148px;
	flex-shrink: 0;
	border-radius: 24px;
	background: var(--background-dark);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 8px;
}

.home-outer-div .rooms-inner-div{
	flex-direction: column;
	gap:32px;
}


.rooms-inner-div{
	display: flex;
	width: 100%;
	box-sizing:border-box;
	justify-content: left;
	padding: 0px;
	flex-wrap: wrap;
	flex-direction: row;
	gap: 16px;
}

.devices-inner-div{
	box-sizing: border-box;
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	justify-content: left;
	gap: 12px;
	padding: 0px 0px 0px 0px;
	flex-wrap: wrap;
}

#noroom-placeholder, #nodevices-placeholder{
	width: 176px;
	height: 148px;
	flex-shrink: 0;
	border-radius: 24px;
	border: 1px dashed #ABBFC3;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 16px;
	flex-direction: column;	
}

#nodevices-placeholder{
	align-self:center;
	margin-top: 64px;
}

#noroom-placeholder svg, #nodevices-placeholder svg{
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	fill: linear-gradient(315deg, #355A9B 0%, #4D75BC 100%);
}

#noroom-placeholder h1, #nodevices-placeholder h1{
	color: var(--text-dark);
	text-align: center;
	font-family: Manrope;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: 16px; /* 114.286% */
	width: 86px;
	margin: 0px;
	white-space: normal;
}



@media only screen and (max-width: 359px){
	.devices-inner-div{
		grid-template-columns: 1fr; 
	}
	.device-div-outer{
		grid-column: unset !important;
	}
}
@media only screen and (max-width: 699px) and (min-width: 360px){
	.devices-inner-div{
		grid-template-columns: 1fr 1fr; 
	}
}

@media only screen and (max-width: 999px) and (min-width: 600px){
	.devices-inner-div{
		grid-template-columns: 1fr 1fr 1fr;
	}
}

@media only screen and (max-width: 1199px) and (min-width: 1000px){
	.devices-inner-div{
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}
}

@media only screen and (max-width: 1339px) and (min-width: 1200px){
	.devices-inner-div{
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}
}
@media only screen and (max-width: 1559px) and (min-width: 1340px){
	.devices-inner-div{
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	}
}
@media only screen and (max-width: 1749px) and (min-width: 1560px){
	.devices-inner-div{
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	}
}
@media only screen and (max-width: 1939px) and (min-width: 1750px){
	.devices-inner-div{
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	}
}

.device-div-outer{
	position:relative;
	display:flex;
	overflow: hidden;
}

.room-div-outer{
	position: relative;
	display: flex;
	width: 300px;
	flex-direction: column;
	align-items: center;
	justify-content: end;
	max-width: 100%;
	border-radius: 24px;
	border: 1px solid #00000000;
}

.room-div-outer-onhome, .room-div-outer-onconnpicker{
	order: 0;
	position: relative;
	display: flex;
	width: 250px;
	min-width: 250px;
	flex-direction: column;
	align-items: center;
	justify-content: end;
	max-width: 100%;
	border-radius: 24px;
	border: 1px solid #00000000;
}

.room-withdev-onhome-div, .room-withdev-onconndevpicker-div{
	display:flex;
	flex-direction: column;
	max-width: 100%;
	position: relative;
}
/*
.room-withdev-onhome-div-shadower{
	position: absolute;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 1;
	/*background: linear-gradient(90deg,var(--background-light) 0px, transparent 8px, transparent 99%, var(--background-light) 100%); * /
	background-image: linear-gradient(to right, var(--background-light) 0px, transparent 8px),linear-gradient(to left, var(--background-light) 0px, transparent 8px);
}
*/


.stgsother-entry-withinfo-div, .stgsother-entry-withinfo-div-nohover{
	display: flex;
	padding: 16px 0px;
	justify-content: space-between;
	align-items: center;
	align-self: stretch;
}

.stgsother-entry-withinfo-div:hover{
	cursor: pointer;
}

.ui-overlay-block-inner-stgs{
	position:relative;
	display: flex;
	flex-direction: column;
	justify-content: start;
	align-items: center;
	width: 100%;
	height: 100%;
	padding: 0px 16px 32px 24px;			
	gap: 24px;
	box-sizing: border-box;
	overflow-y: scroll;
}	

.elinfo-mainpicker-div{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 8px;
	align-self: stretch;
}

.elinfo-currency-picker-div{
	display: flex;
	height: 48px;
	padding: 6px 16px;
	justify-content: space-between;
	align-items: center;
	align-self: stretch;
	border-radius: 8px;
	border: 1px solid var(--border-blue);
	background: var(--background-light);
	box-sizing: border-box;
}

.elinfo-currency-picker-div h1, .elinfo-price-picker-div h1{
	color: var(--text-dark);
	text-align: right;
	font-family: Manrope;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	margin: 0px;
	opacity: 0.6;
	text-wrap: nowrap;
}

.elinfo-currency-picker-div select{
	background: var(--background-light);
    color: var(--text-dark);
    text-align: center;
    font-family: Manrope;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    width: auto;
    text-align: right;
    border: 0px;
	outline: 0px;
}

.elinfo-currency-picker-div select:hover, .elinfo-currency-picker-div select:focus{
	border: 0px;
	outline: 0px;
}

.elinfo-price-picker-div input{
	height: auto;
    border: none;
    border-radius: 0px;
    width: auto;
    text-align: right;
	align-self: stretch;
	padding: 0px;
}

.elinfo-price-picker-div input:hover, .elinfo-price-picker-div input:focus{
	border:none;
	box-shadow: none;
}

.elinfo-price-picker-div{
	display: flex;
	height: 48px;
	padding: 10px 16px;
	justify-content: space-between;
	align-items: center;
	align-self: stretch;
	border-radius: 12px;
	border: 1px solid var(--border-blue);
	background: var(--background-light);
	box-sizing: border-box;
}



.one-notif-entry-div{
	display: flex;
	gap: 8px;
	flex-direction: column;
	width: 100%;
	min-width: 200px;
}

.notif-title-title-txt{
	color: var(--text-dark);
	text-align: center;
	font-family: Manrope;
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	margin: 0px;
}

.one-notif-entry-div h2{
	color: var(--text-dark);
	text-align: center;
	font-family: Manrope;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	margin: 0px;
}

.one-notif-entry-div h4{
	color: var(--text-dark);
	text-align: center;
	font-family: Manrope;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	margin: 0px;
}



#activeroom-topshower-div{
	width: 100%;
	height: 45px;
	display: flex;
	position: absolute;
	top: -100px;
	left: 0px;
	transition: top 0.2s ease-in-out;
	filter: drop-shadow(10px 10px 20px var(--background-light));
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 0px 24px;
	z-index: 7;
	border-radius: 0px 0px 24px 24px;
	box-sizing: border-box;
}

#activeroom-topshower-div h3{
	font-family: Manrope;
	font-size: 17px;
	font-style: normal;
	font-weight: 700;
	line-height: 22px; /* 129.412% */
	margin: 0px;
	overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
	width: 100%;
}


.room-sideshower-div{
	width: 45px;
	height: 166px;
	position: absolute;
	top: 0px;
	left: -110px;
	border-radius: 0px 24px 24px 0px;
	z-index: 7;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	transition: left 0.2s ease-in-out, width 0.1s ease-in-out;
	filter: drop-shadow(10px 10px 20px var(--background-light));
}

.room-sideshower-div h3{
	width: 126px;
	transform: rotate(-90deg);
	font-family: Manrope;
	font-size: 17px;
	font-style: normal;
	font-weight: 700;
	line-height: 22px; /* 129.412% */
	margin: 0px;
	overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.room-withdev-onhome-scroll-div{
	display:flex;
	flex-direction: row;
	overflow-x: scroll;
	width:auto;
	gap: 32px;
	padding-bottom: 8px;
	justify-content: start;
	align-items: stretch;
	margin-left: -40px;
	margin-right: -40px;
	padding-left: 40px;
}

.room-withdev-onhome-devs-div{
	display:flex;
	flex-direction:row;
	overflow-x: visible;
	gap: 24px;
	justify-content: start;
	align-items: center;
	padding-right: 40px;
}

.room-withdev-onhome-devs-div .device-div{
	min-width: 160px;
	max-width: 300px;
	padding-left: 16px;
	padding-right: 16px;
}


.room-div-inner-title h1{
	color: #FFF;
	font-family: Manrope;
	font-size: 17px;
	font-style: normal;
	font-weight: 700;
	line-height: 22px;
	margin: 0px;
	
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
	padding:4px;
}

.room-div-inner-rest{
	height: 102px;
	display:flex;
	border-radius: 24px 24px 0px 0px;
	flex-direction: column;
	align-items: start;
	justify-content: start;
	align-self: stretch;
	padding: 24px 0px 0px 24px;
	box-sizing: border-box;
}

.room-devno-div{
	display: flex;
	padding: 6px 10px;
	justify-content: center;
	align-items: center;
	gap: 10px;
	position: absolute;
	right: 16px;
	top: 16px;
	border-radius: 20px;
	background: #fff;
}

.room-devno-div h3{
	text-align: right;
	font-family: Manrope;
	font-size: 13px;
	font-style: normal;
	font-weight: 600;
	line-height: 15px; /* 115.385% */
	margin: 0px;
}

.room-div-inner-rest svg{
	height: 40px;
	width: 40px;
}

.room-div-inner-title{
	display: flex;
	padding: 16px 24px;
	align-items: center;
	gap: 10px;
	align-self: stretch;
	border-radius: 0px 0px 24px 24px;
}

.add-room-section-div{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
	align-self: stretch;
}

.add-room-name-div h1, .add-room-section-div h1, .add-room-coloricon-inner-div h2{
	color: var(--text-dark);
	font-family: Manrope;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: 20px; /* 142.857% */
	letter-spacing: 0.5px;
	text-transform: uppercase;
	margin: 0px;
}

.add-room-section-div-16{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	align-self: stretch;
}

.horizontal-gap16, .googlehomeauth-btn-container{
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 16px;
	align-self: stretch;
}

.googlehomeauth-btn-container button{
	width:auto;
	flex-grow: 1;
}

.horizontal-gap16 button{
	width: auto;
	flex-grow: 1;
}

#addroom-param-delbtn-enabler{
	display: flex;
	align-self: stretch;
	flex-direction: column;	
	gap:0px;
}


.add-room-name-div{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	align-self: stretch;
}



.add-room-coloricon-div{
	display: flex;
	align-items: flex-start;
	gap: 40px;
	align-self: stretch;
}

.add-room-coloricon-inner-div{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	flex: 1 0 0;
}

.add-room-coloricon-shower-div{
	width: 100%;
	height: 100px;
	border-radius: 24px;
	border: 1px solid var(--border-blue);
	display: flex;
	align-items: center;
	justify-content: center;
}

#roomedit-devlist-container{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	align-self: stretch;
}

.roomdevlist-device-div{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 8px;
	width: 100%;
	border-radius: 24px;
	background: var(--background-dark);
	position: relative;
	padding: 16px;
	box-sizing: border-box;
}

.roomdevlist-device-div h1{
	color: var(--text-dark);
	text-align: center;
	font-family: Manrope;
	font-size: 13px;
	font-style: normal;
	font-weight: 600;
	line-height: 15px; /* 115.385% */
	margin: 0px;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 65%;
	text-transform: none;
}

.roomdevlist-iksic{
	width: 40px;
	height: 40px;
	position: absolute;
	right: 8px;
	top: 8px;
	fill: var(--background-light);
	filter: drop-shadow(0px 4px 4px rgba(61, 70, 73, 0.25));
}

.roomdevlist-strelica-up{
	display: flex;
	width: 40px;
	height: 40px;
	padding: 10px;
	justify-content: center;
	align-items: center;
	position: absolute;
	left: 16px;
	top: 16px;
	border-radius: 20px;
	background: var(--background-light);
	box-shadow: 0px 4px 4px 0px rgba(61, 70, 73, 0.25);
	box-sizing: border-box;
}

.roomdevlist-strelica-up .colorizableicon{
	transform: rotate(90deg);
}

.roomdevlist-strelica-down .colorizableicon{
	transform: rotate(-90deg);
}

.roomdevlist-strelica-down{
	display: flex;
	width: 40px;
	height: 40px;
	padding: 10px;
	justify-content: center;
	align-items: center;
	position: absolute;
	left: 16px;
	/*top: 56px;*/
	bottom: 16px;
	border-radius: 20px;
	background: var(--background-light);
	box-shadow: 0px 4px 4px 0px rgba(61, 70, 73, 0.25);
	box-sizing: border-box;
}

.roomdevlist-cover-img{
	height: 108px;
}

.add-room-section-separator{
	width: 100%;
	height: 6px;
	border-radius: 3px;
	flex-shrink: 0;
	background: var(--background-dark);
}

#addroom-param-icon{
	width: 40px;
	height: 40px;
}

.room-edit-icon-div{
	background: var(--background-light);
	display: flex;
	width: 40px;
	height: 40px;
	justify-content: center;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	border-radius: 24px;
	box-sizing: border-box;
}

.room-selector-with-arrow-div{
	display: flex;
	padding: 16px 24px;
	justify-content: space-between;
	align-items: center;
	align-self: stretch;
}

.room-selector-with-arrow-div h1{
	color: var(--text-dark);
	text-align: center;
	font-family: Manrope;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	margin: 0px;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.device-div-double-size{
	grid-column: span 2;
}

.device-div-offline > *{
	opacity: 0.4;
	will-change: filter;
}

.device-div{
	width: 100%;
	position: relative;
	display: flex;
	padding: 16px 9px 12px 9px;
	flex-direction: column;
	align-items: center;
	justify-content: start;
	gap: 8px;
	border-radius: 24px;
	background: var(--background-dark);
	user-select: none;
	overflow: hidden;
	border: 1px solid transparent;
}

.device-div h3{
	display: none;
}

.offline-overlay-on-list-outer{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 6;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}


.offline-overlay-on-list{
	z-index: 4;
	display: inline-flex;
	padding: 8px 12px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 4px;
	border-radius: 16px;
	background: rgba(61, 70, 73, 0.60);
	backdrop-filter: blur(5px);
	align-self: start;
	margin-top: 51px;
}

.offline-overlay-on-opts{
	z-index: 4;
	display: inline-flex;
	padding: 16px 24px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 8px;
	border-radius: 22px;
	background: rgba(61, 70, 73, 0.60);
	backdrop-filter: blur(5px);
	align-self: start;
	margin-top: 181px;
}

.offline-overlay-on-list img{
	width: 20px;
	height: 20px;
}

.offline-overlay-on-opts img{
	width: 24px;
	height: 24px;
}

.offline-overlay-on-list h3{
	margin: 0px;
	color: #ffffff; /* CONST COLOR */
	text-align: center;
	font-family: Manrope;
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}

.offline-overlay-on-opts h3{
	margin: 0px;
	color: #ffffff; /* CONST COLOR */
	text-align: center;
	font-family: Manrope;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
}

.frame-selected{
}

.frame-selected + div:before{
	box-shadow: 0px 0px 5px 3px #aaa inset;
	position: absolute;
	content: '';
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	z-index: 13;
	pointer-events: none;
}

.frame-selected + div{
	opacity:0.95;
}


.delete-confirm-overlay, .msg-info-overlay{
	position:absolute;
	width: 100%;
	height: 100%;
	z-index: 30;
	background: rgba(0, 0, 0, 0.80);
	backdrop-filter: blur(5px);
	display:flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 24px;
	box-sizing: border-box;
}

.ota-confirm-div h3{
	flex: 1 0 0;
    margin: 0px;
    color: var(--text-dark);
    font-family: Manrope;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
	text-align: center;
}

.ota-confirm-div h2{
	flex: 1 0 0;
    margin: 0px;
    color: var(--text-bold);
    font-family: Manrope;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
	text-align: center;
}

.roomsharing-list-removable-div{
	display: flex;
	flex-direction: row;
	gap: 8px;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

.roomsharing-list-removable-div h2{
	margin: 0px;
    color: var(--text-bold);
    font-family: Manrope;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    text-align: center;
    line-height: normal;
}

.roomsharing-list-removable-div button{
	width: 20px;
    min-height: 20px;
    box-sizing: border-box;
    padding: 0px;
    height: 20px;
}

.roomsharing-addnew-container-div{
	display: flex;
	flex-direction: column;
	gap: 8px;
	justify-content: center;
	align-items: center;
	
}


.delete-confirm-div, .ota-confirm-div{	
	padding: 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	border-radius: 24px;
	background: var(--background-light);
	box-shadow: 0px 4px 32px 0px var(--lvl2-box-shadow);
	max-width: 342px;
	overflow: auto;
    max-height: 90%;
}

.color-picker-ol-div{
	display: flex;
	max-width: 342px;
	flex-grow: 1;
	padding: 24px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 40px;
	border-radius: 24px;
	background: var(--background-light);
	box-shadow: 0px 4px 32px 0px var(--lvl2-box-shadow);
	box-sizing:border-box;
}

.color-picker-ol-title-div{
	display:flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.colorol-iks{
	width:32px;
	height:32px;
}

.colorol-iks:hover{
	cursor:pointer;
}

.colorol-iks-fejk{
	width:32px;
	height:32px;
}



.color-picker-ol-div h1{
	margin: 0px;
	color: var(--text-dark);
	text-align: center;
	font-family: Manrope;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
}

.color-picker-grid-div{
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	gap: 16px;
	align-self: stretch;
	flex-wrap: wrap;
}

.color-picker-grid-div-room{
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	gap: 32px;
	align-self: stretch;
	flex-wrap: wrap;
}

.color-picker-grid-div-room svg{
	width: 32px;
	height: 32px;
}

.color-circle-div{
	width: 32px;
	height: 32px;
	border-radius: 50%;
	cursor: pointer;
	border: 1px solid var(--toggle-background);
	box-sizing:border-box;
}

.color-circle-div-room{
	width: 40px;
	height: 40px;
	border-radius: 50%;
	cursor:pointer;
}

.delete-confirm-div-top{
	display: flex;
	align-items: center;
	gap: 16px;
	align-self: stretch;
}

.delete-confirm-div-top img{
	width: 32px;
	height: 32px;
}

.delete-confirm-div-top h3{
	flex: 1 0 0;
	margin: 0px;
	color: var(--primary-red);
	font-family: Manrope;
	font-size: 16px;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
}

.delete-confirm-div-top h2{
	flex: 1 0 0;
	margin: 0px;
	color: var(--text-dark);
	font-family: Manrope;
	font-size: 16px;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
}

.delete-confirm-div-bottom{
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 16px;
	width: 100%;
}




.options-devicebox-div{
	position: relative;
	display: flex;
	padding: 0px;
	flex-direction: column;
	align-items: center;
	justify-content: start;
}


.options-div-modules-container-2m{
	position: absolute;
	width: 120px;
	height: 120px;
	/*background: url(/images/2M_frame/2M_Background.png);*/
	background-size: 100%;
	top: 75px;
}

.options-div-modules-container-3m{
	position: absolute;
	width: 180px;
	height: 120px;
	/*background: url(/images/3M_frame/3M_Background.png);*/
	background-size: 100%;
	top: 75px;
}

.options-div-modules-container-4m{
	position: absolute;
	width: 240px;
	height: 120px;
	/*background: url(/images/4M_frame/4M_Background.png);*/
	background-size: 100%;
	top: 75px;
}

.options-div-modules-container-5m{
	position: absolute;
	width: 300px;
	height: 120px;
	/*background: url(/images/5M_frame/5M_Background.png);*/
	background-size: 100%;
	top: 75px;
}

.options-div-modules-container-6m{
	position: absolute;
	width: 360px;
	height: 120px;
	/*background: url(/images/6M_frame/6M_Background.png);*/
	background-size: 100%;
	top: 75px;
}

.options-div-modules-container-7m{
	position: absolute;
	width: 420px;
	height: 120px;
	/*background: url(/images/7M_frame/7M_Background.png);*/
	background-size: 100%;
	top: 75px;
}



.device-div-modules-container-2m{
	position: absolute;
	width: 48px;
	height: 48px;
	/*background: url(/images/2M_frame/2M_Background.png);*/
	background-size: 100%;
	top: 46px;
}

.device-div-modules-container-3m{
	position: absolute;
	width: 72px;
	height: 48px;
	background: var(--debug-purple);
	top: 46px;
}

.device-div-modules-container-4m{
	position: absolute;
	width: 96px;
	height: 48px;
	/*background: url(/images/4M_frame/4M_Background.png);*/
	background-size: 100%;
	top: 46px;
}

.device-div-modules-container-5m{
	position: absolute;
	width: 120px;
	height: 48px;
	background: var(--debug-purple);
	top: 46px;
}

.device-div-modules-container-6m{
	position: absolute;
	width: 144px;
	height: 48px;
	background: var(--debug-purple);
	top: 46px;
}

.device-div-modules-container-7m{
	position: absolute;
	width: 168px;
	height: 48px;
	/*background: var(--debug-purple);*/
	top: 46px;
}



.device-div-module-1{
	position:absolute;
	left:0px;
	top: 0px;
}

.device-div-module-2{
	position:absolute;
	left:24px;
	top: 0px;
}

.device-div-module-3{
	position:absolute;
	left:48px;
	top: 0px;
}

.device-div-module-4{
	position:absolute;
	left:72px;
	top: 0px;
}

.device-div-module-5{
	position:absolute;
	left:96px;
	top: 0px;
}

.device-div-module-6{
	position:absolute;
	left:120px;
	top: 0px;
}

.device-div-module-7{
	position:absolute;
	left:144px;
	top: 0px;
}

.device-div-module-1 img, .device-div-module-2 img, .device-div-module-3 img,
.device-div-module-4 img, .device-div-module-5 img, .device-div-module-6 img, 
.device-div-module-7 img{
	height: 48px;
	transition: opacity 2s ease-in-out;
}







.roomorder-device-div-modules-container-2m{
	position: absolute;
	width: 24px;
	height: 24px;
	/*background: url(/images/2M_frame/2M_Background.png);*/
	background-size: 100%;
	top: 46px;
	margin-left: 34px;
}

.roomorder-device-div-modules-container-4m{
	position: absolute;
	width: 48px;
	height: 24px;
	/*background: url(/images/4M_frame/4M_Background.png);*/
	background-size: 100%;
	top: 46px;
	margin-left: 42px;
}


.roomorder-device-div-modules-container-7m{
	position: absolute;
	width: 84px;
	height: 24px;
	/*background: var(--debug-purple);*/
	top: 46px;
	margin-left: 30px;
}

.roomorder-device-div-module-1{
	position:absolute;
	left:0px;
	top: 0px;
}

.roomorder-device-div-module-2{
	position:absolute;
	left:24px;
	top: 0px;
}

.roomorder-device-div-module-3{
	position:absolute;
	left:48px;
	top: 0px;
}

.roomorder-device-div-module-4{
	position:absolute;
	left:72px;
	top: 0px;
}

.roomorder-device-div-module-5{
	position:absolute;
	left:96px;
	top: 0px;
}

.roomorder-device-div-module-6{
	position:absolute;
	left:120px;
	top: 0px;
}

.roomorder-device-div-module-7{
	position:absolute;
	left:144px;
	top: 0px;
}

.roomorder-device-div-module-1 img, .roomorder-device-div-module-2 img, .roomorder-device-div-module-3 img,
.roomorder-device-div-module-4 img, .roomorder-device-div-module-5 img, .roomorder-device-div-module-6 img, 
.roomorder-device-div-module-7 img{
	height: 48px;
	transition: opacity 2s ease-in-out;
}





.options-div-module-1{
	position:absolute;
	left:0px;
	top: 0px;
}

.options-div-module-2{
	position:absolute;
	left:60px;
	top: 0px;
}

.options-div-module-3{
	position:absolute;
	left:120px;
	top: 0px;
}

.options-div-module-4{
	position:absolute;
	left:180px;
	top: 0px;
}

.options-div-module-5{
	position:absolute;
	left:240px;
	top: 0px;
}

.options-div-module-6{
	position:absolute;
	left:300px;
	top: 0px;
}

.options-div-module-7{
	position:absolute;
	left:360px;
	top: 0px;
}


.options-div-module-1 img, .options-div-module-2 img, .options-div-module-3 img,
.options-div-module-4 img, .options-div-module-5 img, .options-div-module-6 img, 
.options-div-module-7 img{
	height: 120px;
	transition: opacity 1s ease-in-out;
}

.options-div-module-1, .options-div-module-2, .options-div-module-3,
.options-div-module-4, .options-div-module-5, .options-div-module-6, 
.options-div-module-7{
	height: 120px;
	transition: scale 0.1s ease-in-out, border-radius 0.3s ease-in-out, z-index 0.1s step-end;
	border-radius: 0px;
	overflow: hidden;
	z-index: 4;
}

.options-titlename-div{
	display: flex;
	padding: 16px 24px;
	align-items: center;
	gap: 10px;
	align-self: stretch;
	justify-content: center;
	border-bottom: 6px solid #F5F6F7;
}

.options-titlename-div h1{
	margin: 0px;
	color: var(--text-dark);
	text-align: center;
	font-family: Manrope;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.device-div h2{
	margin: 0px;
	color: var(--text-dark);
	text-align: center;	
	font-size: 13px;	
	font-weight: 600;
	line-height: 14px; /* 107.692% */
	max-width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	padding: 3px;
}

.device-div-cover-img{
	height: 108px;
	transform: translateZ(0);
}

.options-div-cover-img, .options-div-sb-img{	
	height: 270px;
}

.nohover:hover{
	cursor: default !important;
}

.active-module-inopt{
	z-index: 5;
	scale: 1.17;
	overflow: hidden;
	border-radius: 8px;
	box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.60);
	transition: scale 0.1s ease-in-out, border-radius 0.3s ease-in-out, z-index 0.1s step-start;
}
.active-module-inopt img{
	scale: 1.05;
}

.add-action-div img{
	width: 48px;
	height: 48px;
}

.action-div img{
	width: 32px;
	height: 32px;
}

.add-action-div h2{
	color: var(--text-dark);
	text-align: center;	
	font-size: 14px;	
	font-weight: 700;
	line-height: 16px; /* 114.286% */
	width: 86px;
	margin: 0px;
}

.action-div h2{
	color: var(--text-light);
	text-align: center;	
	font-size: 15px;	
	font-weight: 600;
	line-height: 17px; /* 113.333% */
}

.home-outer-div h1, .devices-outer-div h1{
	color: var(--text-dark);	
	font-size: 24px;	
	font-weight: 600;	
	margin: 0px;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
	max-width: 100%;
}

.rooms-outer-div h1, .room-div-inner-title h1{
	color: #fff; /* STATIC COLOR */
	font-family: Manrope;
	font-size: 17px;
	font-style: normal;
	font-weight: 700;
	line-height: 22px; /* 129.412% */
}

.home-separator{
	box-sizing: border-box;
	min-height: 12px;
	max-height: 12px;
	width: auto;
	background: var(--background-dark);
	margin-left: -40px;
	margin-right: -40px;
}

.welcome-title-div{
	display: flex;
	flex-direction: row;
	max-width: 750px;
}


.sidebar-logo{
	background: url(/images/icons/sidebar_logo_v2.svg);
	width: 42px;
	height: 34px;
}

.sidebar-icon-div{	
	border-radius: 16px;
	height: 64px;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 2px;
}


.sidebar-icon-div:focus{
	border: 2px solid var(--focus-outline);
	background: var(--sidebar-focus-bg);
}

.sidebar-icon-div:active{
	background: var(--sidebar-active);
}

.sidebar-icon-div img{
	width:30px;
	height:30px;
}

.sidebar-icon-div h1{
	color: var(--text-sidebar-inactive);
	text-align: center;	
	font-size: 12px;	
	font-weight: 600;	
	margin: 0px;
}

.sidebar-separator{
	background: var(--sidebar-separator); 
	width:68px; 
	height:1px;
}


.login-div{
	position:relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 431px;
	padding: 56px;	
	
	gap: 56px;
	border-radius: 24px;
	background: var(--background-light);
	box-shadow: 0px 4px 32px 0px var(--shadow-logregmgmt);
	box-sizing: border-box;
}

.register-div{
	position:relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 431px;
	padding: 56px;		
	gap: 40px;
	border-radius: 24px;
	background: var(--background-light);
	box-shadow: 0px 4px 32px 0px var(--shadow-logregmgmt);
	box-sizing: border-box;
	
}

.mgmt-div{
	position:relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 431px;
	padding: 56px;		
	gap: 40px;
	border-radius: 24px;
	background: var(--background-light);
	box-shadow: 0px 4px 32px 0px var(--shadow-logregmgmt);
	box-sizing: border-box;
}

.document-container{
	position:relative;
	left: 5%;
	display: flex;
	flex-direction: column;
	justify-content: left;
	align-items: left;
	width: 90%;
	padding: 56px;	
	
	gap: 16px;
	border-radius: 24px;
	background: var(--background-light);
	box-shadow: 0px 4px 32px 0px var(--shadow-logregmgmt);
	box-sizing: border-box;
	
	top: 2vh;
}

#doc-toc h2{
	margin: 0px;
	font-size: 16px;
}


#pp-document-container ol {
  counter-reset: list;
}
#pp-document-container ol > li {
  list-style: none;
}
#pp-document-container ol > li:before {
  content: counter(list, lower-alpha) ") ";
  counter-increment: list;
}

#stgsel-other{
	gap: 0px;
}

.document-container h1, .document-container h2{
	color: var(--primary-blue);	
	font-size: 20px;	
	font-weight: 700;
}

.document-container h3{
	color: var(--primary-blue);	
	font-size: 16px;	
	font-weight: 700;
	margin-top: 12px;
	margin-bottom: 4px;
}

.user-manual-displayer-div{
	border-top: 1px solid var(--border-blue);
	width: 100%;
	padding: 16px 24px 4px 24px;
	box-sizing: border-box;
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 8px;
}

.user-manual-displayer-div h3{
	color: var(--text-dark);
    text-align: center;
    font-family: Manrope;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-manual-displayer-div:hover{
	cursor: pointer;
}

.document-container p, .document-container li{
	color: var(--text-bold);	
	font-size: 16px;	
	font-weight: 500;
}

.mgmt-err-div{
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.mgmt-pwd-div{
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}




.pwd-fgt-div{
	align-self: stretch;
    text-align: left;
	justify-content: space-between;
	width:100%;
	display:flex;
}

.logo-inline-login, .logo-inline-register, .logo-inline-mgmt{
	background-image: url("/images/icons/connekt_logo_inline_v2.svg");
	height: 40px;
	width: 165px;
	background-repeat: no-repeat;
}

.separator-6{
	height: 6px;
	width: 100%;
}

.separator-8{
	height: 8px;
	width: 100%;
}

.separator-16{
	height: 16px;
	width: 100%;
}

.separator-20{
	height: 20px;
	width: 100%;
}

.separator-26{
	height: 26px;
	width: 100%;
}

.separator-32{
	height: 32px;
	width: 100%;
}

.separator-40{
	height: 40px;
	width: 100%;
}

.separator-120{
	display: none;
	min-height: 104px;
	max-height: 104px;
	height:120px;
	width: 100%;
}

.login-title, .register-title, .mgmt-err-title{
	color: var(--primary-blue);
	text-align: center;
	font-size: 20px;	
	font-weight: 500;	
}

.login-subtitle, .register-subtitle, .mgmt-err-msg{
	color: var(--text-bold-light);
	text-align: center;	
	font-size: 14px;	
	font-weight: 500;	
}

label{
	color: var(--text-bold);
	font-family: 'Manrope', normal;	
	font-size: 14px;	
	font-weight: 600;	
}

label:focus-within{
	color: var(--primary-blue);
}

.login-form, .register-form{
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}



.input-field{
	width: 100%;
}

input{
	box-sizing: border-box;
	width: 100%;
	display: flex;
	height: 48px;
	padding: 10px 16px;
	align-items: center;
	gap: 10px;
	align-self: stretch;
	border-radius: 12px;
	border: 1px solid var(--border-blue);
	background: var(--background-light);
	
	color: var(--text-bold);	
	font-family: 'Manrope', normal;
	font-size: 14px;	
	font-weight: 600;
	font-style: normal;	
}

input::placeholder{
	opacity: 0.6;
}

input:focus{	
	box-shadow: 0px 0px 0px 2px var(--focus-outline);
	border: 1px solid var(--primary-blue);
	outline: none;
}

input:disabled{
	border-radius: 12px;
	border: 1px solid var(--border-blue);
	background: var(--disabled-background);
}

.pass-with-eye{
	display: block;
	position: relative;
	
}
.pass-with-eye input{
	width: 100%;
}

.pass-with-eye img{
	position: absolute;
	right: 16px;
	top: 14px;
	z-index: 3;
	width: 20px;
	height: 20px;
}

.login-error-msg, .register-error-msg{
	width: 100%;
}

button{
	width: 100%;
	display: block;
	min-height: 48px;
	padding: 10px;
	justify-content: center;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	border-radius: 12px;
	background: var(--primary-blue);
	color: var(--text-light);
	text-align: center;	
	font-size: 14px;	
	font-weight: 700;	
	font-family: 'Manrope', normal; 
	outline: none;
	border: none;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}



button:focus{
	background: var(--secondary-blue);
	box-shadow: 0px 0px 0px 2px var(--focus-outline);
	outline: none;
}

button:disabled{
	border-radius: 12px;
	opacity: 0.5;
}

.button-white{
	background: var(--background-light);
	color: var(--text-bold);
	border: 1px solid var(--border-blue);
}

.button-white:focus{
	border-radius: 12px;
	border: 1px solid var(--text-bold);
	background: var(--background-light);
	box-shadow: 0px 0px 0px 2px var(--focus-outline);
	color: var(--text-bold);
}

.button-white:disabled{
	border-radius: 12px;
	border: 1px solid var(--border-blue);

	background: var(--disabled-background);
	cursor: not-allowed;
	color: var(--text-bold);
}

.button-transparent{
	background: transparent;
	color: var(--text-bold);
	border: 1px solid var(--border-blue);
}

.button-transparent:focus{
	border-radius: 12px;
	border: 1px solid var(--text-bold);
	background: transparent;
	box-shadow: 0px 0px 0px 2px var(--focus-outline);
	color: var(--text-bold);
}

.button-transparent:disabled{
	border-radius: 12px;
	border: 1px solid var(--border-blue);

	background: var(--disabled-background);
	cursor: not-allowed;
	color: var(--text-bold);
}

.module-not-targetable{
	cursor: not-allowed !important;
}

.module-not-targetable:after{
	content: '';
    position: absolute;
    display: flex;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
	background-size: 40px 40px;
	background-image: url(/images/icons/no-no-circle.svg);
	background-repeat: no-repeat;
	background-position: center;
}
.module-not-targetable:after svg{
	height: 32px;
	width: 32px;
}

.module-not-targetable:hover{
	cursor: not-allowed !important;
}

.module-not-targetable:active{
	animation: module-shake 0.5s;
	animation-iteration-count: 1;
}

@keyframes module-shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.one-connection-container-div{
	display: flex;
	width: 100%;
	padding-bottom: 24px;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	border-radius: 24px;
	background: var(--background-dark);
	position: relative;
}

.action-inactive-in-this-mode:before{
	position:absolute;
	top:40%;
	width:60%;
	height:30%;
	z-index: 5;
	content: "Disabled in current mode";   
    background: rgba(61, 70, 73, 0.60);
    backdrop-filter: blur(5px);
	justify-content: center;
	align-items: center;
	
	
	display: flex;
    padding: 8px 12px;
    flex-direction: column;
    border-radius: 16px;
	
	margin: 0px;
    color: #ffffff;
    text-align: center;
    font-family: Manrope;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.inactive-lang-hr:before{
	content: "Nedostupno u ovom načinu rada" !important;
}

.inactive-lang-hi:before{
	content: "Disabled in current mode" !important;
}

.action-inactive-in-this-mode .connections-nightmare-container,
.action-inactive-in-this-mode .toggle-switch{
	opacity:0.6;
	pointer-events: none;
	cursor: default;
}

.one-connection-header-div{
	display: flex;
	height: 56px;
	padding: 16px;
	justify-content: space-between;
	align-items: center;
	align-self: stretch;
	border-bottom: 1px solid var(--border-blue);
	box-sizing: border-box;
}

.one-connection-header-div h2{
	color: var(--text-dark);
	font-family: Manrope;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	margin: 0px;
}

.one-connection-header-div svg{
	width: 40px;
	height: 40px;
	margin-top: 2px;
}

.one-connection-header-div svg:hover{
	cursor: pointer;
}

.connection-temp-arrow-div-delayed{
	margin-top: 7px;
    align-self: start;
    height: 100px;
    width: 80px;
    background-image: url(/images/icons/simple_connection_arrow_delayed.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.connection-temp-arrow-div-top{
	margin-top: 4px;
	align-self: center;
	height: 50px;
	width: 80px;
	background-image: url(/images/icons/simple_connection_arrow_top.svg);
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
}

.connection-temp-arrow-div-middle{
	margin-top: 42px;
	align-self: center;
	height: 50px;
	width: 80px;
	background-image: url(/images/icons/simple_connection_arrow_middle.svg);
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
}

.connection-temp-arrow-div-bottom{
	margin-top: 82px;
	align-self: center;
	height: 50px;
	width: 80px;
	background-image: url(/images/icons/simple_connection_arrow_bottom.svg);
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
}


.connections-bootom-expandable-div-expander-arrow-div{
	transform: rotate(-90deg);
	/*transition: transform 0.2s ease-in-out;*/
	/*display: flex; TODO*/
	display: none; /* TODO hidden for now, enable here */
}

.connections-bootom-expandable-div-expander-arrow-div:hover{
	cursor: pointer;
}

.connections-bootom-expandable-div-expander-arrow-div svg{
	height: 40px;
	width: 40px;
}

.connection-bottom-expandable-div{
	display: none;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	align-self: stretch;
}


.conn-expandable-option-expandable-expander-div{
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0px;
	gap: 0px;
	width: 100%;
	border-radius: 24px;
	background: var(--background-light);
}

.conn-expander-option-selector-expanded .horizontal-gap8-iconwithtext-dark svg{
	transform: rotate(45deg);
}

.conn-expander-option-selector-expanded + .conn-expandable-option-selector{
	display: flex;
}


.conn-expandable-option-selector{
	width: 100%;
	display: none;
	flex-direction: column;
	gap: 16px;
	padding: 16px;
	
}

.connections-expandable-one-card-div{
	display: flex;
	height: 52px;
	padding: 16px 16px 16px 24px;
	justify-content: space-between;
	align-items: center;
	align-self: stretch;	
	box-sizing: border-box;
	width: 100%;
}

.connections-expandable-one-card-div:hover{
	cursor: pointer;
}

.connection-bottom-expanded{
	transform: rotate(-270deg) !important;
}

.connection-bottom-expanded + .connection-bottom-expandable-div .connections-expandable-one-card-div{
	display: flex !important;
}

.connection-bottom-expanded + .connection-bottom-expandable-div{
	display: flex;
}

.horizontal-gap8-iconwithtext-dark,
.horizontal-gap8-iconwithtext-light{
	display: flex;
	align-items: center;
	gap: 8px;
}

.horizontal-gap8-iconwithtext-dark svg{
	height: 20px;
	width: 20px;
	color: var(--text-dark);
}

.horizontal-gap8-iconwithtext-dark h2{
	margin: 0px;
	color: var(--text-dark);
	font-family: Manrope;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
}

.horizontal-gap8-iconwithtext-light svg{
	height: 20px;
	width: 20px;
	color: var(--text-sidebar-inactive);
}

.horizontal-gap8-iconwithtext-light h2{
	margin: 0px;
	color: var(--text-sidebar-inactive);
	font-family: Manrope;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
}

.connections-nightmare-container-container{
	display: flex;
	padding: 0px 24px;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	align-self: stretch;
}

.connections-nightmare-container{
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	align-self: stretch;
	margin: 0px 24px;
}

.connection-displayer-left-switch{
	position: relative;
	width: 60px;
	height: 120px;
	flex-shrink: 0;
}

.connection-displayer-left-switch img{
	height: 100%;
}

.connection-displayer-right-socket{
	display: flex;
	width: 120px;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	position: relative;
}

.connection-displayer-right-socket img{
	height: 120px;
}

.connections-displayer-right-top-selector{
	display: flex;
	height: 24px;
	padding: 2px;
	justify-content: space-between;
	align-items: center;
	align-self: stretch;
	border-radius: 28px;
	background: var(--background-light);
	box-shadow: 0px 4px 32px 0px var(--lvl2-box-shadow);
	gap: 2px;
}

.connections-right-onoff-displayer{
	border-radius: 56px;
	stroke-width: 1px;	
	backdrop-filter: blur(5px);
	width: 56px;
	height: 56px;
	flex-shrink: 0;
	position: absolute;
	right: 8px;
	top: 48px;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
}

.connections-right-onoff-displayer:hover{
	opacity: 0.8;
	cursor: pointer;
}

.connections-right-onoff-displayer h2{
	text-transform: uppercase;
	margin: 0px;
	font-family: Manrope;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
}

.connections-right-onoff-displayer-on h2{
	color: #28B446;
}

.connections-right-onoff-displayer-off h2{
	color: #D71F1F;
}

.connections-right-onoff-displayer-mid h2{
	color: #d6b81f;
}

.connections-right-onoff-displayer-mid{
	background: #e7d1654d;
	border: 1px solid #d6b81f;
}

.connections-right-onoff-displayer-on{
	background: rgba(101, 221, 127, 0.50);
	border: 1px solid #28B446;
}

.connections-right-onoff-displayer-off{
	background: rgba(231, 103, 103, 0.30);
	border: 1px solid #D71F1F;
}

.connections-displayer-right-top-selection{
	display: flex;
	padding: 0px;
	justify-content: center;
	align-items: center;
	gap: 10px;
	flex: 1 0 0;
	align-self: stretch;
	border-radius: 100px;
}
.connections-displayer-right-top-selection:hover{
	cursor: pointer;
	background: var(--background-dark);
}

.connections-displayer-right-top-selected, .connections-displayer-right-top-selected:hover{
	background: var(--dev-filter-active) !important;
}
.connections-displayer-right-top-selected svg{
	color: var(--text-light);
}

.connections-displayer-right-top-selection svg{
	width: 18px;
	height: 18px;
}

.connections-switch-hand-up{
	position: absolute;
	top: 8px;
	left: 19px;
	height: 23px;
	width: 37px;
	background-image: url("/images/icons/switch_shower_hand_grey.png");
	background-size: 27px;
	background-repeat: no-repeat;
	background-position: center;
}

.connections-switch-hand-timer{
	position: absolute;
	top: -36px;
	left: 16px;
	height: 28px;
	width: 37px;
	background-image: url("/images/icons/clocken-untouched.png");
	background-size: 36px;
	background-repeat: no-repeat;
	background-position: center;
}

.connections-switch-hand-timer.connections-switch-hand-selected{
	background-image: url("/images/icons/clocken-touched.png") !important;
}

.connections-switch-hand-down{
	position: absolute;
	bottom: 8px;
	left: 19px;
	height: 23px;
	width: 37px;
	background-image: url("/images/icons/switch_shower_hand_grey.png");
	background-size: 27px;
	background-repeat: no-repeat;
	background-position: center;
}

.connections-switch-hand-middle{
	position: absolute;
    top: 48px;
    left: 28px;
    height: 23px;
    width: 37px;
    background-image: url(/images/icons/switch_shower_arrow_grey.png);
    background-size: 24px;
    background-repeat: no-repeat;
    background-position: center;
}

.connections-switch-hand-timer:hover,
.connections-switch-hand-up:hover,
.connections-switch-hand-middle:hover,
.connections-switch-hand-down:hover{
	cursor: pointer;
}

.connections-switch-hand-middle.connections-switch-hand-selected{
	background-image: url("/images/icons/switch_shower_arrow_blue.png") !important;
}

.connections-switch-hand-down.connections-switch-hand-selected,
.connections-switch-hand-up.connections-switch-hand-selected{
	background-image: url("/images/icons/switch_shower_hand_blue.png") !important;
}


.button-with-icon{
	min-height: 48px;
	display: flex;
	padding: 10px 24px;
	justify-content: space-between;
	align-items: center;
	align-self: stretch;
}

.button-with-icon img{
	width: 20px;
	height: 20px;
}

.button-with-icon h1{
	margin: 0px;
	color: #FFFFFF; /* CONST COLOR */
	text-align: center;
	font-family: Manrope;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
}

.button-red{
	background: var(--primary-red);
	height: 48px;
}

.button-red:focus{
	border-radius: 12px;
	background: var(--primary-red);
	box-shadow: 0px 0px 0px 4px var(--focus-red);
}

.button-red:disabled{
	background: var(--primary-red);
	opacity: 0.5;
}

.login-error-label, .register-error-label{
	display: block;
	color: var(--primary-red);
	text-align: right;	
	font-size: 12px;	
	font-weight: 500;	
	align-self: stretch;
}

.semiclickable-text{
	align-self: stretch;
	color: var(--text-bold-light);
	text-align: center;	
	font-size: 14px;	
	font-weight: 500;	
}

.clickable-text{
	color: var(--primary-blue);	
	font-size: 14px;	
	font-weight: 600;	
	text-decoration: none;
}

.checkbox-wrapper{
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: left;
	align-items: center;
	gap: 6px;
}

.input-checkbox{
	height: 20px;
	width: 20px;	
	accent-color: var(--primary-blue);
}


.checkbox-label{
	height: 20px;
}

.noscrollarrowsonthisone .roomdesktopscroll-right-div,
.noscrollarrowsonthisone .roomdesktopscroll-left-div{
	display:none;
}

.roomdesktopscroll-right-div{
	position: absolute;
	top: 16px;
	right: 0px;
	width: 30px;
	height: 30px;
	border: 1px solid var(--text-dark);
	z-index: 7;
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--background-dark);
	border-radius: 30px;
}

.roomdesktopscroll-left-div{
	position: absolute;
	top: 16px;
	right: 38px;
	width: 30px;
	height: 30px;
	border: 1px solid var(--text-dark);
	z-index: 7;
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--background-dark);
	border-radius: 30px;
}

.roomdesktopscroll-left-div svg{
	transform: rotate(90deg);
}

.roomdesktopscroll-right-div:hover,
.roomdesktopscroll-left-div:hover{
	cursor: pointer;
}

.roomdesktopscroll-right-div.nomorescroll,
.roomdesktopscroll-left-div.nomorescroll{
	opacity: 0.5;
	cursor: default !important;
}

#reset_pwd, #ghbody a, #aabody a{
	color: var(--primary-blue);
	text-align: right;	
	font-size: 12px;	
	font-weight: 500;	
	text-decoration-line: underline;
}

.google-container, .microsoft-container{
	color: var(--text-bold-light);
	text-align: center;
	display: inline-block; 
	width: 100%;	
}


.google-logo{
	background: url("/images/signin_providers/google_logo.svg");
	height: 20px;
	width: 20px;
}


.button-white .gsi-material-button-icon {
	height: 20px;
	margin-right: 12px;
	min-width: 20px;
	width: 20px;	
}



.button-white .gsi-material-button-content-wrapper {
	-webkit-align-items: center;
	align-items: center;
	display: flex;
	-webkit-flex-direction: row;
	flex-direction: row;
	-webkit-flex-wrap: nowrap;
	flex-wrap: nowrap;
	height: 100%;
	justify-content: center;
	position: relative;
	width: 100%;
}

/* LOADER BEGIN*/
.loader {
    width: 48px;
    height: 48px;
    border: 5px solid var(--text-sidebar-inactive);
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    }

    @keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
    } 
/* LOADER END */


/* TOGGLE BEGIN */

.toggle-switch {
	position: relative;
	display: inline-block;
	width: 40px;
	height: 24px;
	border: 2px solid transparent;
}

.toggle-switch input { 
	opacity: 0;
	width: 0;
	height: 0;
}

.toggle-slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--toggle-background);
	-webkit-transition: .4s;
	transition: .4s;
	border-radius: 16px;
}

.toggle-slider:before {
	position: absolute;
	content: "";
	height: 20px;
	width: 20px;
	left: 2px;
	bottom: 2px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
	border-radius: 50%;
}

.toggle-switch:focus-within{
	border-radius: 16px;
	border: 2px solid rgba(53, 90, 155, 0.20);
}

.toggle-switch input:disabled + .toggle-slider:before {
	opacity: 0.4;
	cursor: wait;
}

.toggle-switch [type="checkbox"][disabled]:checked + .toggle-slider {
	opacity: 0.4;
	cursor: wait;
}
.toggle-switch input:disabled + .toggle-slider {
	cursor: wait;
}


.toggle-switch input:checked + .toggle-slider {
	background: var(--primary-blue);
}


.toggle-switch input:checked + .toggle-slider:before {
	-webkit-transform: translateX(16px);
	-ms-transform: translateX(16px);
	transform: translateX(16px);
}


/* TOGGLE END */


.hex-color-displayer-box{
	position: absolute;
	height: 14px;
	width: 14px;
	margin-top: 17px;
    margin-left: 17px;
	border: 1px solid var(--text-bold);
	border-radius: 4px;
	
}

.hex-input-shifted{
	padding-left: 36px;
}

/* Color slider BEGIN */

.color-slider {
	-webkit-appearance: none;
	width: 100%;
	height: 8px;
	box-sizing: border-box;

	/*background: linear-gradient(90deg, #F00 0%, #F1E153 22.4%, #6CD45C 41.15%, #5CD4C5 60.94%, #5653F1 79.69%, #D71F1F 100%);*/
	background: linear-gradient(90deg, hsl(0,100%, 50%), hsl(60,85%, 64%),hsl(120,85%, 64%),
	hsl(180,58%, 60%),hsl(240,58%, 60%),hsl(300,85%, 64%), hsl(360,75%, 48%));

	box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.16) inset;
	outline: none;

	-webkit-transition: .2s;
	transition: opacity .2s;
	border-radius: 8px;
	padding: 0px;
	margin: 0px;
	align-self: center;
}

.color-slider:disabled{
	cursor: wait;
}
.color-slider:disabled::-webkit-slider-thumb{
	cursor: wait;
}

.color-slider::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  background: var(--background-light);
  border-radius: 24px;
  cursor: pointer;
  filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.40));


}

.color-slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  background: var(--background-light);
  cursor: pointer;
  margin-right: -8px;
}

/* COLOR SLIDER END */

.color-shower{
	cursor: pointer;
	box-sizing: border-box;
	padding: 0px;
	min-width: 40px;
	height: 24px;
	border-radius: 24px;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid var(--toggle-background);
}

.color-shower h1, .color-shower-name{
	margin: 0px;
    color: var(--text-bold);
    font-family: Manrope;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.color-shower-disabled{
	opacity: 0.4;
	cursor: wait;
}



::-webkit-scrollbar {
	height: 6px;
	width: 6px;
	position:relative;
}

::-webkit-scrollbar-track {
	background-color: transparent;
}


::-webkit-scrollbar-thumb {
	background-color: var(--scrollbar-normal);
	border: 0px solid transparent;
	background-clip: border-box;
}

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

.settings-main-flex{
	display: flex;
	max-width: 420px;
	padding: 16px 0px 0px 0px;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.hex-input-div{
	display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: start;
    justify-content: space-between;
    box-sizing: border-box;
    width: 100%;
}
.hex-input-div button{
	width: 50%;
}

.settings-entry-flex, .settings-entry-flex-nohover{
	display: flex;
	padding: 16px 0px;
	justify-content: space-between;
	align-items: center;
	align-self: stretch;
	background: var(--background-light);
}

.settings-entry-left-flex, .settings-entry-right-flex{
	display: flex;
	align-items: center;
	gap: 8px;
}

.settings-entry-right-flex h2{
	color: var(--text-sidebar-inactive);
	text-align: right;
	font-family: Manrope;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	margin: 0px;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 130px;
}
.locale-switcher{
	border: none;
	margin-right: -28px;
    padding-right: 28px;
    z-index: 5;
    background: transparent;
	color: var(--text-sidebar-inactive);
	appearance: none;
	text-align: right;
}

.settings-entry-flex h1, .settings-entry-flex-nohover h1, .settings-entry-left-flex h1{
	color: var(--text-dark);
	font-family: Manrope;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	margin: 0px;
}

.settings-entry-left-flex img, .settings-entry-flex img,
.settings-entry-left-flex svg, .settings-entry-flex svg{
	width: 20px;
	height: 20px;
}

.ui-overlay-toolbar-option-invisible{
	width: 32px;
	height: 32px;
}

.stgs-overlay-logout-option-invisible{
	width: 20px;
	height: 20px;
}

.stgs-acc-groupcontainer{
	display: flex;
	padding-top: 16px;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	align-self: stretch;
}

.stgs-acc-groupcontainer-logout{
	display: flex;
	height: 48px;
	padding: 10px 24px;
	justify-content: space-between;
	align-items: center;
	align-self: stretch;
	border-radius: 12px;
	border: 1px solid var(--border-blue);
	box-sizing: border-box;
}

.stgs-acc-grouptitlediv{
	display: flex;
	padding: 0px;
	align-items: center;
	gap: 10px;
	align-self: stretch;
}

.stgs-acc-groupcontainer-logout h1{
	color: var(--text-dark);
	text-align: center;
	font-family: Manrope;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	margin: 0px;
}

.stgs-acc-grouptitlediv h1{
	flex: 1 0 0;
	color: var(--text-dark);
	font-family: Manrope;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: 20px; /* 142.857% */
	letter-spacing: 0.5px;
	text-transform: uppercase;
	margin: 0px;
}

.stgs-acc-grouptitlediv img, .stgs-acc-groupcontainer-logout img,
.stgs-acc-groupcontainer-logout svg{
	width: 20px;
	height: 20px;
}

.stgs-acc-grouptitlediv img{
	filter: drop-shadow(0px 0px 4px #F7F8F9);
}

.stgs-acc-namediv{
	display: flex;
	padding: 0px;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	align-self: stretch;
}

.stgs-acc-namewithdisplayeditable{
	display: flex;
	padding: 16px 24px;
	justify-content: space-between;
	align-items: center;
	align-self: stretch;
	border-radius: 12px;
	background: var(--background-dark);
}

.stgs-acc-namewithdisplayeditable h1{
	color: var(--text-dark);
	text-align: center;
	font-family: Manrope;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	margin: 0px;
}

.stgs-acc-namewithdisplayeditable input{	
	color: var(--text-dark);
	text-align: left;
	font-family: Manrope;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	margin: 0px;	
	padding: 16px 24px;
    height: 19px;
    box-sizing: content-box;
	margin:0px;
	border-radius: 12px;
}

.stgs-acc-namewithdisplayeditable input:disabled{
	color: var(--text-sidebar-inactive);
	border: none;
	width:auto;
	padding: 0px;
	background: transparent;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
	text-align: right;
	font-family: Manrope;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	border-radius: 0px;
}

.stgs-acc-namewithdisplayeditable h2{
	color: var(--text-sidebar-inactive);
	text-align: right;
	font-family: Manrope;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	margin: 0px;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stgs-acc-separator-line{
	width: 120%;
	height: 10px;
	background: var(--background-dark);
	margin: 0px; 
}

.stgs-acc-separator-line-main{
	width: 120%;
	height: 10px;
	width: 100vw;
	background: var(--background-dark);
	margin: 0px; 
}

.inner-with-separators{
	/*overflow-y: auto;*/
    overflow-x: hidden;
}

.stgs-acc-external-action-button{
	display: flex;
	padding: 16px 24px;
	justify-content: space-between;
	align-items: center;
	align-self: stretch;
	border-radius: 12px;
}

.stgs-acc-external-action-button h1{
	color: var(--text-dark);
	font-family: Manrope;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	margin: 0px;
}

.schedules-list{
	display: flex;
	padding: 16px 0px;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	align-self: stretch;
}


.schedules-edit-div-conatiner{
	display: none;
	padding: 16px 0px;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	align-self: stretch;
}

.schedules-edit-div{
	display: flex;
	padding: 0px;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	align-self: stretch;
}

#connections-roomdevpicker-div{
	align-items: flex-start;
}



.schedule-on-list-div{
	position:relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	align-self: stretch;
	border-radius: 24px;
	background: var(--background-dark);
}

.schedule-inactive-in-this-mode:before{
	position:absolute;
	top:25%;
	width:60%;
	height:30%;
	z-index: 5;
	content: "Disabled in current mode";   
    background: rgba(61, 70, 73, 0.60);
    backdrop-filter: blur(5px);
	justify-content: center;
	align-items: center;
	
	
	display: flex;
    padding: 8px 12px;
    flex-direction: column;
    border-radius: 16px;
	
	margin: 0px;
    color: #ffffff;
    text-align: center;
    font-family: Manrope;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.schedule-inactive-in-this-mode *{
	opacity:0.6;
}


.schedule-inactive-in-this-mode{
	pointer-events: none;
	cursor: default;
}

.schedule-on-list-top-div{
	display: flex;
	padding: 16px 24px;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	align-self: stretch;
	border-bottom: 1px solid var(--border-blue);
}

.schedule-on-list-top-div h1{
	color: var(--text-bold);
	font-family: Manrope;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	align-self: stretch;
	margin: 0px;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px;
}

.schedule-on-list-bottom-div{
	display: flex;
	padding: 16px 24px;
	justify-content: center;
	align-items: flex-start;
	gap: 8px;
	align-self: stretch;
	align-items: center;
}

.schedule-on-list-top-bottom-div{
	display: flex;
	justify-content: space-between;
	align-items: center;
	align-self: stretch;
}

.schedule-on-list-top-bottom-div h2{
	color: var(--text-dark);
	font-family: Manrope;
	font-size: 20px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	margin: 0px;
}

.schedule-on-list-bottom-left, .schedule-on-list-bottom-right{
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 0 0;
}

.schedule-on-list-bottom-left img, .schedule-on-list-bottom-right img{
	width: 20px;
	height: 20px;
}

.schedule-on-list-bottom-left h3, .schedule-on-list-bottom-right h3{
	color: var(--text-dark);
	font-family: Manrope;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	flex: 1 0 0;
	margin: 0px;
}



.scheduler-info-div{
	display: flex;
	padding-bottom: 8px;
	flex-direction: column;
	align-items: center;
	align-self: stretch;
	border-radius: 24px;
	background: var(--background-dark);
}

.scheduler-info-top-div{
	display: flex;
	padding: 16px 24px;
	justify-content: space-between;
	align-items: center;
	align-self: stretch;
	border-bottom: 1px solid var(--border-blue);
	gap: 8px;
}



.scheduler-info-top-div input{
	color: var(--text-dark);
	font-family: Manrope;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
}

.scheduler-info-top-div input:disabled{
	height: 19px;
    border: none;
    background: transparent;
	padding: 0px;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
	border-radius: 0px;
	pointer-events: none;
}

#favdev-container{
	padding-bottom: 0px;
}

.ota-dot-div{
	width: 12px;
	height: 12px;
	position: absolute;
	background: var(--primary-red);
	border-radius: 10px;
	top: 0px;
	right: 0px;
}

.ota-update-btn-on-moreinfo{
	position: absolute;
	right: 16px;
	min-height: 10px;
	max-width: 30%;
	text-transform: uppercase;
}

.scheduler-info-top-div img{
	width: 20px;
	height: 20px;
	filter: drop-shadow(0px 0px 4px #F7F8F9);
}

.scheduler-info-bottom-div{
	display: flex;
	padding: 8px 0px;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
}

.scheduler-time-picker-div{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
	align-self: stretch;
}

.scheduler-time-picker-div h1{
	color: var(--text-dark);
	text-align: center;
	font-variant-numeric: lining-nums tabular-nums;
	font-family: Manrope;
	font-size: 24px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	margin: 0px;
}

.scheduler-time-picker-left-div, .scheduler-time-picker-right-div{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.scheduler-time-picker-left-div img, .scheduler-time-picker-right-div img,
.scheduler-time-picker-left-div svg, .scheduler-time-picker-right-div svg{
	width: 62px;
	height: 62px;
}

.hour-display-div, .minute-display-div{
	display: flex;
	width: 70px;
	padding: 8px 16px 8px 16px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 2px;
	border-radius: 8px;
	background: var(--background-light);
	box-sizing: border-box;
}

.hour-display-div input, .minute-display-div input{
	color: var(--text-dark);
	text-align: center;
	font-variant-numeric: lining-nums tabular-nums;
	font-family: Manrope;
	font-size: 24px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	margin: 0px;
	padding: 0px;
	border: 0px;
	outline: 0px;
    border-radius: 0px;
}

.hour-display-div input:focus, .minute-display-div input:focus,
.hour-display-div input:hover, .minute-display-div input:hover{
	border: 0px;
	outline: 0px;
	box-shadow: none;
}



.hour-display-div h3, .minute-display-div h3{
	color: var(--text-bold);
	text-align: center;
	font-variant-numeric: lining-nums tabular-nums;
	font-family: Manrope;
	font-size: 8px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	margin: 0px;
}

.scheduler-action-div{
	display: flex;
	padding: 8px 24px;
	justify-content: space-between;
	align-items: center;
	align-self: stretch;
}

.scheduler-action-div img{
	width: 20px;
	height: 20px;
}

.scheduler-action-left-div{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	flex: 1 0 0;
}

.scheduler-action-left-div h1{
	color: var(--text-bold);
	font-family: Manrope;
	font-size: 12px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	align-self: stretch;
	margin: 0px;
}

.scheduler-action-left-div h2{
	color: var(--text-dark);
	font-family: Manrope;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	align-self: stretch;
	margin: 0px;
}

.colorizableicon{
	color: var(--text-dark);
	display:flex;
}



@media only screen and (min-width: 801px){
	.showonlyonmobile{
		display: none;		
	}
	.max-width-400{
		max-width: 2560px;
	}
}

@media only screen and (max-width: 500px) and (min-width: 800px){
	.room-div-outer, .room-div-outer-onhome, .room-div-outer-onconnpicker{
		width: 500px;
	}
}

@media only screen and (max-height: 535px) and (min-width: 800px){
	.sidebar-logo{
		display: none;
	}
	.sidebar-separator{
		display:none;
	}
}	

@media only screen and (max-height: 450px) and (min-width: 800px){
	.index-sidebar{
		gap: 4px;
		padding-top: 8px;
		padding-bottom: 8px
	}
}

@media only screen and (max-width: 800px){	

	.desktoponly{
		display: none;
	}

	.roomdesktopscroll-right-div,
	.roomdesktopscroll-left-div{
		display: none;
	}

	.document-container{
		left: 0px;
		width: 100%;
		padding: 24px;
		top: 0px;
	}

	.room-div-outer-onhome, .room-div-outer-onconnpicker{
		height: 148px;
	}

	.room-sideshower-div{
		height: 148px;
	}

	.room-withdev-onhome-scroll-div{
		margin-left: -16px;
		margin-right: -16px;
		padding-left: 16px;
	}
	
	.room-withdev-onhome-devs-div{
		padding-right: 16px;
	}

	.rooms-inner-div{
		justify-content: center;
	}
	
	.ui-overlay-block-inner{
		padding: 0px 8px 32px 8px;
	}
	
	.devices-header-div img, .rooms-header-div img{
		height: 48px;
		width: 48px;
	}
	
	#active-room-icon, #active-room-edit{
		display: flex;
	}
	
	#active-room-bottom-div{
		display:none;
	}
	
	#active-room-name{
		display:block;
	}
	
	#active-room-top-div{
		height: 102px;
	}
	
	#add-room-ol-maindiv{
		padding: 0px 24px 0px 24px;
	}
	
	.home-outer-div h1, .devices-outer-div h1{
		max-width: 80%;
	}
	.room-edit-icon-div{
		top: 16px;
		right: 16px;
	}
	
	.settings-main-flex{
		padding: 16px 24px 0px 24px;
		max-width: 100%;
	}
	
	.hideonmobile{
		display:none;
	}
	
	.index-body{
		flex-direction: column-reverse;
	}
	
	.separator-120{
		display: block;
	}
	
	.home-outer-div h1, .devices-outer-div h1, .rooms-outer-div h1{
		margin: 0px;
	}
	
	.home-inner-div{
		padding: 0px 22px;
		flex-wrap: wrap;
		justify-content: center;
	}
	
	.devices-inner-div, .rooms-inner-div{
		padding: 28px 16px;
	}
	
	.action-div, .add-action-div{
		width: 45%;
		flex-grow: 1;
		max-width: 176px;
		min-width: 150px;
	}
	
	.home-outer-div{
		align-items: center;		
	}
	
	.devices-outer-div{
		align-items: center;
		padding: 0px;
		overflow-y: visible;
		margin: 0px;
	}

	.rooms-outer-div{
		align-items: center;
		padding: 0px;
	}
	
	.home-separator{
		margin: 0px 0px 0px 0px;		
	}
	
	::-webkit-scrollbar {
		display: none;
	}
	
	.sidebar-logo{
		display:none;
	}
	
	.rooms-header-div{
		padding: 32px 24px 16px 24px;
	}
	
	.settings-header-div{
		padding: 38px 24px 22px 24px;
	}
	
	.devices-header-div{
		padding: 0px 24px;
	}
	
	.devices-header-div-outer{
		padding: 32px 0px 16px 0px;
	}
	
	.devices-filter-container-header-div, .devices-order-container-header-div{
		flex-wrap: nowrap;
		padding: 0px 24px;
	}	
	
	
	.sidebar-icon-div{
		max-width: 100px;
	}
	
	.action-fade-overlay{
		display: none;
	}
	
	.index-ui-container{
		position: relative;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
	}
	
	.index-sidebar{
		border-radius: 24px 24px 0px 0px;
		flex-direction: row;
		height: 104px;
		width: 100%;
		justify-content: space-evenly;
	}
	
	.sidebar-separator{
		display: none;
	}
	
	.index-divsel{
		padding: 0px;
		box-sizing: border-box;
	}
	
	.home-welcome-div{
		padding: 32px;
		background-size: 900px auto;
		background-position: 46% 76%;
		border-radius: 0px 0px 24px 24px;
		user-select: none;
	}
	
	.room-top-banner-div{
		border-radius: 0px 0px 24px 24px;
		user-select: none;
		padding: 16px;
	}
	
	.welcome-title-div{
		max-width: 62%;
	}
	
	#welcome-title-text{
		font-size: 18px;
	}
	
	#overview-text{
		display:none;
	}
	
	.mgmt-background-img, .login-background-img, .register-background-img{
		background-size: auto 110vh;
		left:0%;
		width:100vw;
		height: 100dvh;
	}
	
	.ui-container-mgmt, .ui-container-login, .ui-container-register, .notfound-ui-container{
		width: 100%;
	}
	
	#logout-sidebtn{
		margin-top: unset;
	}
	
	.device-div-modules-container-2m{
		height: 40px;
		width: 40px;
		top: 41px;
	}

	.device-div-modules-container-3m{
		height: 40px;
		width: 60px;
		top: 41px;
	}
	
	.device-div-modules-container-4m{
		height: 40px;
		width: 80px;
		top: 41px;
	}
	
	.device-div-modules-container-5m{
		height: 40px;
		width: 100px;
		top: 41px;
	}
	
	.device-div-modules-container-6m{
		height: 40px;
		width: 120px;
		top: 41px;
	}
	
	.device-div-modules-container-7m{
		height: 40px;
		width: 140px;
		top: 41px;
	}
	
	.device-div-module-2{
		left: 20px;
	}
	
	.device-div-module-3{
		left: 40px;
	}
	
	.device-div-module-4{
		left: 60px;
	}
	
	.device-div-module-5{
		left: 80px;
	}
	
	.device-div-module-6{
		left: 100px;
	}
	
	.device-div-module-7{
		left: 120px;
	}
	
	.device-div-module-1 img, .device-div-module-2 img, .device-div-module-3 img,
	.device-div-module-4 img, .device-div-module-5 img, .device-div-module-6 img, 
	.device-div-module-7 img{
		height: 40px;
	}	
	
	.device-div-cover-img{
		height: 90px;
	}
	
	
	.ui-overlay{
		justify-content: center;
		padding: 40px 0px 40px 0px;
	}
	
}

@media only screen and (max-width: 300px){
	.index-sidebar{
		zoom: 0.5;
	}
}



@media only screen and (max-width: 430px){
	.login-div, .register-div, .mgmt-div{
		box-shadow: none;		
		padding: 40px 24px;
		gap: 40px;
	}	
	
	.ui-overlay{
		padding: 40px 0px 0px 0px;
	}
	
	.ui-overlay-inner{
		width: 100%;
		border-radius: 24px 24px 0px 0px;
	}
	
	.ui-overlay-block{		
		width: 100%;
	}
	
	.connections-nightmare-container{
		margin: 0px 0px;
	}
}


@media only screen and (min-aspect-ratio: 1241/672) {
	.login-background-img, .register-background-img, .mgmt-background-img{
		background-position: right;
	}
}


@media (hover: hover) and (pointer: fine) {
	
	.room-withdev-onconndevpicker-div .room-sideshower-div:hover{
		width: 45px;
		cursor: default;
	}
	
	.room-sideshower-div:hover{
		cursor: pointer;
		width: 55px;
	}
	
	.devices-filter-header-div:hover, .devices-order-header-div:hover{
		cursor: pointer;
	}

	.devices-header-div img:hover, .rooms-header-div img:hover{
		opacity: 0.7;
		cursor: pointer;
	}

	.device-info-name-with-edit-div-img:hover{
		cursor: pointer;
	}

	.info-single-record-div-clickable:hover{
		cursor:pointer;
	}

	.device-options-info-level1-div-nopad:hover {
		cursor:pointer;
	}

	.device-options-level2-clickable-div:hover{
		cursor: pointer;
	}

	.stats-display-div button:hover{
		background: unset;
	}

	.chart-period-selector-div svg:hover{
		cursor: pointer;
	}

	.chart-range-select-div div:hover{
		cursor: pointer;
	}

	.scheduler-or-similar-button:hover{
		cursor: pointer;
	}

	.ui-overlay-toolbar-option:hover, .ui-overlay-toolbar-option-40:hover{
		background: var(--sidebar-active);
		cursor: pointer;
	}

	#noroom-placeholder:hover, #nodevices-placeholder:hover{
		cursor: pointer;	
	}

	.roomdevlist-iksic:hover{
		cursor:pointer;
		opacity: 0.8;
	}

	.roomdevlist-strelica-down:hover, .roomdevlist-strelica-up:hover{
		cursor: pointer;
		border: 1px solid var(--text-bold);
	}

	.add-room-coloricon-shower-div:hover{
		cursor: pointer;
	}

	.room-edit-icon-div:hover, .imgbtndiv-g8:hover {
		cursor: pointer;
		border: 1px solid var(--text-bold);
	}

	.color-picker-grid-div-room svg:hover{
		cursor: pointer;
	}


	.options-div-cover-img:hover, .options-div-module-1:hover, .options-div-module-2:hover, 
	.options-div-module-3:hover, .options-div-module-4:hover, .options-div-module-5:hover,
	.options-div-module-6:hover, .options-div-module-7:hover{
		cursor: pointer;
	}

	.device-div-outer:hover, .room-div-outer:hover, .room-div-outer-onhome:hover{
		cursor: pointer;
	}

	.room-div-outer:hover, .room-div-outer-onhome:hover{
		border: 1px solid var(--background-light); /* STATIC COLOR */
	}

	.device-div:hover{
		border: 1px solid var(--background-light);
	}


	.action-div:hover{
		opacity: 0.8;
		cursor: pointer;
	}

	.add-action-div:hover{
		cursor: pointer;
		border: 1px dashed var(--text-bold);
	}

	.sidebar-icon-div:hover{
		cursor: pointer;
		background: var(--sidebar-active);
	}

	.sidebar-logo:hover{
		cursor: pointer;
	}

	input:hover{
		border: 1px solid var(--text-bold);
		outline: none;
	}

	.pass-with-eye img:hover{
		cursor: pointer;
	}

	button:hover{
		background: var(--secondary-blue);
		outline: none;
		cursor: pointer;
	}

	.button-white:hover, .button-transparent:hover{
		color: var(--text-bold);
		background: var(--background-light);
		border-radius: 12px;
		border: 1px solid var(--text-bold);
	}

	.button-red:hover{
		background: var(--secondary-red);
	}

	.clickable-text:hover{
		cursor: pointer;
	}

	#reset_pwd:hover{
		color: var(--primary-blue);
		background: none;
		border: none;
		cursor: pointer;
	}

	.settings-entry-flex:hover{
		cursor: pointer;
	}

	.stgs-acc-grouptitlediv img:hover, .stgs-acc-groupcontainer-logout:hover{
		cursor:pointer;
	}

	.stgs-acc-external-action-button:hover{
		cursor:pointer;
		background: var(--background-dark);
	}

	.schedule-on-list-div:hover{
		cursor: pointer;
	}

	.scheduler-info-top-div img:hover{
		cursor:pointer;
	}

	.scheduler-time-picker-left-div img:hover, 
	.scheduler-time-picker-right-div img:hover,
	.scheduler-time-picker-left-div svg:hover, 
	.scheduler-time-picker-right-div svg:hover{
		cursor:pointer;
	}

	.scheduler-action-div:hover{
		cursor:pointer;
	}
	
}