/* roboto-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../../fonts/roboto-v30-latin-regular.woff2') format('woff2'); 
}
/* roboto-500 - latin */
@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('../../fonts/roboto-v30-latin-500.woff2') format('woff2');
}
/* roboto-700 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('../../fonts/roboto-v30-latin-700.woff2') format('woff2'); 
}
/* roboto-900 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  src: url('../../fonts/roboto-v30-latin-900.woff2') format('woff2'); 
}

html {
height:100%;
}

body{ 
			
		height: 100%;	
}
.dashboardcontainer{
   
   
    padding-right: 25px;
    padding-left: 25px;
   
  background-size: cover;
  background-position: center;

padding-top: 15px;

min-height: 100%;

}

.dashboard{
  overflow-y: auto;
  height: 100%;
  background-size: cover;
  background-position: center;
}


.fullscreenpopupoverlay{
position: fixed;
z-index: 999999;
background-color: #00000094;
width: 100%;
height: 100%;
display: flex;
margin-left: auto;
margin-right: auto;
justify-content: center;
margin-top: auto;
margin-bottom: auto;
align-items: center;
top: 0;
}

.fullscreencontent{
	background: #FFF;
	width: 100%;
	height: 90%;
	border-radius: 5px;
	
	overflow: hidden;
	top: 100%;
	position: absolute;
}


.fullscreenclosebutton{
	cursor:pointer;
  background: #1CA3F0;
  padding: 5px 0px 5px 18px;
  width: 50px;
  position: absolute;
  right: 0;
  font-size: 20px;
  color: #FFF;
  border-radius: 0px 0px 0px 0px;
}

.fullscreenclosebutton:hover
{
  background: #67C8FF;
}

.publishpreview{
display: flex;
align-items: center;
margin-left: auto;
margin-right: auto;
justify-content: center;
}

.previewimage{
border-radius: 10px !important;
border: solid  !important;
}
.searchinputtemplatecontainer{
	width:0px;
	transition: all .5s;
	overflow: hidden;
}

.templatesearchbuttonstyle{
  padding: 5px;
  background-color: #1CA3F0;
  border-radius: 0px 5px 5px 0px;
  color: #FFF;
  cursor:pointer;
}



.searchkeywordtemplate{
background-color: #FFF;
color: #000;
border-radius: 5px 0px 0px 5px;
padding-left: 10px;
padding-right: 10px;
}

.searchtemplateinputbox
{
background-color: #FFF !important;
border-radius: 5px !important;
padding: 5px !important;
margin: 5px !important;
height:30px;
border:none !important;
width: calc(100% - 50px);
}


.templatesearchresultsclass{
	background-color: #4f4f4f;
	width: 100%;
	height: calc(100% - 60px);
	overflow:auto;

}


.templatesearchinputclass{
	display: flex;
	height: 40px;
	
}


.tabcontainer{
display: flex;
}

.tab{
  margin-right: 10px;
  padding: 5px;
  background-color: #6f6f6f;
  border-radius: 4px;
  padding-left: 10px;
  padding-right: 10px;
	cursor:pointer;
}

.tab:hover{
	background-color:#00c3ff;
}

.tabactive{
	background-color:#00c3ff;
}

.heartposition{
  position: absolute;
  background-color: white;
  display: flex;
  top: 10px;
  width: fit-content;
  border-radius: 5px;
  right: 10px;
  border-style: solid;
  border-width: 3px;
  border-color: #b7b7b7;
}

.heartposition:hover{
  background-color: #000;
  border-color: #FFF;
}

.templatename{
	padding-right:5px;
	margin-top: 8px;
	color: #FFF;
	
}

.contextpopup{
background: #fff0;
width: 60%;

position: absolute;
top: -450px;
padding: 5px;
display: flex;
box-shadow: 0px 0px 15px #00000080;
z-index: 101;
margin: auto;
left: 0;
right: 0;
border-radius: 6px;
  transition: all .5s;
height: 300px;
margin-top: 70px;
}




.successmessage{
background-color: #00b500;
padding-left: 10px;
padding-right: 10px;
border-radius: 5px;
}

.errormessage{
background-color: red;
margin-left: 10px;
padding-left: 10px;
padding-right: 10px;
border-radius: 5px;
font-size: 10px;
position: absolute;
top: -12px;
left: 140px;
border: solid;
border-width: 3px;
}

.publishpreview{
display: flex;
margin-left: auto;
margin-right: auto;
justify-content: center;
}

.sharetemplatetexthelp{
background-color: #6b6b6b;
padding: 10px;
border-radius: 4px;
margin-bottom: 20px;
font-size: 14px;
}
.smallsharetemplatetexthelp{
border-radius: 4px;
margin-bottom: 2px;
font-size: 14px;
}
.multilineinput{
width: 300px;
height: 100px;
background-color: #393939;
border-radius: 4px;
border-style: solid;
color: #FFF;

}
 textarea:focus {
  color: #FFF !important;
  color: #FFF !important;
}
multilineinput:focus { 
    color: #FFF !important;
 }


.centrebutton{
  display: flex;
  justify-content: center;
  align-items: center;
}


.bluebutton{
background-color: #1CA3F0;
border-radius: 5px;
cursor: pointer;
width: 180px;
padding: 10px 10px 10px 10px;
text-align: center;
}
.bluebutton:hover{
background-color: #FFF;
color:#000;
}


.forminput{
height: 30px;
border-radius: 4px !important;
color: #FFF !important;;
}
.formlabel
{
	width: 200px;
}

.formline
{
	margin: 5px;
	display:flex;
	position: relative;
	margin-bottom: 15px;
}

.tablecell{
display: table-cell;

}

.unitdisplay{
display: table-cell;
padding-right: 1vw;
  font-size: 1vw;

}

.hlvalues{
font-size: 1vw;
position: absolute;
top: 8.8vw;
display: flex;
width: 100%;
}

.lowvalue{
	width: 50%;
	
}
.highvalue{
	width: 50%;
	
}

.sensorvaluecontainer{
	position:relative;
	width: fit-content;
	margin-top: 2.5vw;
}



.textpadding{
padding-left: 10px;
padding-right: 5px;
padding-top: 4px;
}



.colourbox{
	margin-top: 5px;
	margin-right: 5px;
}

.colourgroup{
background: #4c4c4c;
margin-left: 5px;

padding: 0px 5px 5px 5px;
margin-top: 0px;
border-radius: 5px;
display: flex;
}

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

.popupwindow{
position: absolute;
width: 100%;
height: 100%;
background-color: #00000070;
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;

}

.popupquestionsarea{
	padding: 10px;
margin: 20px;
}

.popupquestion{
background-color: white;
width: 500px;
border-radius: 5px;
box-shadow: 0px 0px 15px 15px #0000004d;
height: 280px;
position: relative;
}

.popupbuttonpanel{
background-color: #444;
border-radius: 0px 0px 5px 5px;
display: flex;
margin-left: auto;
margin-right: 0;
height: 60px;
position: absolute;
bottom: 0px;
width: 100%;
}

.linkspacing{
	margin-left: 5px;
	margin-right: 15px;
	cursor:pointer;
	text-decoration: underline;
}

.floatright{
display: flex;
margin-left: auto;
margin-right: 0;
}

.popupbuttonleft{
	color: #FFF;
	width: 50%;
	text-align: center;
	padding-top: 14px;
	border-radius: 0px 0px 0px 5px;
	cursor: pointer;
}

.popupbuttonright{
	color: #FFF;
	width: 50%;
	text-align: center;
	padding-top: 14px;
	border-radius: 0px 0px 5px 0px;
	cursor: pointer;
}

.popupbuttonright:hover{

	background-color: #1CA3F0;

}
.popupbuttonleft:hover{

	background-color: #1CA3F0;

}

.activelayout{
width: 10px;
background-color: #00c200;
margin-right: 5px;
border-radius: 4px 0px 0px 4px;
}

.layouttemplatestyle{
	display: flex;
	background-color: #afafaf;
	margin: 15px;
	color: #FFF;
	padding: 5px;
	border-radius: 4px;
}

.layoutheader{
  padding: 10px;
}
.layoutcountstyle{
padding: 0px 15px 0px 15px;
color: #FFF;
}

.addlayoutbutton{
background-color: #1CA3F0;
width: fit-content;
padding: 5px 15px 5px 15px;
border-radius: 5px;
position: absolute;
top: 15px;
right: 20px;
color: #FFF;
cursor:pointer;
}

.addlayoutbutton:hover{
background-color: #60BEF4;

}

.layoutcontainer
{
width: 100%;
overflow: auto;
height: calc(100% - 100px);
max-height: 400px;
display: block;
}


@keyframes saveanimation{
  0% {border-color: white;}

  50%   {border-color: #03A4FF;}
 
  100% {border-color: white;}
}

.savebutton{
  animation-name: saveanimation;
  animation-duration: 0.8s;
  animation-iteration-count: infinite;
  background-color: #1CA3F0;
  border-radius: 5px;
  cursor: pointer;
  margin-left: 5px;
  display: flex;
  height: 40px;
  color: #FFF;
  padding-top: 2px;
  right: 60px;
  position: absolute;
  top: 4px;
  border: solid;
  border-width: 2px;
  border-color: white;
  z-index: 999999;
}


.savebutton:hover{
background-color: #60B7E8;

}


.closedesingerbutton{
  animation-name: saveanimation;
  animation-duration: 0.8s;
  animation-iteration-count: infinite;
  background-color: #7B7B7B;
  border-radius: 5px;
  cursor: pointer;
  margin-left: 5px;
  display: flex;
  height: 40px;
  color: #FFF;
  padding-top: 2px;
  right: 10px;
  position: absolute;
  top: 4px;
  
  z-index: 999999;
}


.closedesingerbutton:hover{
background-color: #60B7E8;

}

.toolbuttoncontainer{
background-color: #3d3d3d;
border-radius: 5px;
cursor:pointer;
margin-left: 5px;
display: flex;
height: 35px;
}
.toolbuttoncontainer:hover{
background-color: #1CA3F0;

}

.toolbuttonsmall{
background-color: #3d3d3d;
width:40px;
border-radius: 5px;
cursor:pointer;
margin-left: 5px;
height: 35px;
text-align: center;
padding-top: 9px;
}

.toolbuttonsmall:hover{
background-color: #1CA3F0;

}
.pointericon{
	cursor:pointer;
}

.toolbutton{
background-color: #3d3d3d;
padding-right: 6px;
border-radius: 5px;
cursor:pointer;
margin-left: 5px;
display: flex;
height: 35px;
padding-left: 5px;
padding-top: 0px;
}

.toolbutton:hover{
background-color: #1CA3F0;

}

.toolbarcontainerparent{
display: flex;
width: 100%;
background-color: #444;
z-index: 9999;
position: absolute;
top: 0px;
height:50px;
}

.toolbarcontainer{
display: flex;
width: 2500px;
}

.toolbar{
	transition: all 1s;
	display:flex;
	margin-top: 2px;
	margin-bottom: 2px;
}

.hiddentoolbartool{
left:-2800px;
position: absolute;
background-color: #363636;
padding: 5px;
border-radius: 5px;
margin-right: 5px;
transition: all 1s;
color: #FFF;
overflow: hidden;
z-index: 9;
}

.toolbartool{
position: relative;
background-color: #444;
padding: 5px;
border-radius: 5px;
margin-right: 5px;
transition: all 3s;
color: #FFF;
overflow: hidden;
cursor:pointer;
}

.toolbartool:hover{
/** background-color: #1CA3F0; **/

}

.toolbarsubtool{
position: relative;
background-color: #363636;
width: 44px;
border-radius: 5px;
margin-right: 5px;
margin-left: 5px;
transition: all 1s;
color: #FFF;
overflow: clip;
left: 0px;
cursor:pointer;
}
.toolbarsubtool:hover{
background-color: #1CA3F0;
}

.toolbarsubtool_nohighligh{
position: relative;
background-color: #363636;
width: 44px;
border-radius: 5px;
margin-right: 5px;
margin-left: 5px;
transition: all 1s;
color: #FFF;
overflow: clip;
left: 0px;
cursor:pointer;
}
.toolbarsubtool_nohighligh:hover{
background-color: #363636;
}

.toolbarsubtool_button{
position: relative;
background-color: #565656;
width: 44px;
border-radius: 5px;
margin-right: 5px;
margin-left: 5px;
transition: all .5s;
color: #FFF;
overflow: clip;
left: 0px;
cursor:pointer;
  width: 40px;
  font-size: 25px;
  text-align: center;
  padding-top: 5px;
	height: 35px;
}

.toolbarsubtool_button:hover{
background-color: #1CA3F0;
}


.toolbariconsgv{
  width: 43px;
  font-size: 25px;
  text-align: center;
  padding-top: 0px;
	height: 35px;
}
.toolbariconsgvpadding{
  width: 43px;
  font-size: 25px;
  text-align: center;
  padding-top: 2px;
	height: 35px;
}

.toolbaricon{
  width: 43px;
  font-size: 25px;
  text-align: center;
  padding-top: 5px;
	height: 35px;
}
.toolbariconsubmenu{
  width: 43px;
  font-size: 25px;
  text-align: center;
  padding-top: 0px;
  height: 35px;
}
.toolbardashboardlayout:hover{
background-color: #1CA3F0;

}

.toolbardashboardlayout{
 position: relative;
background-color:  #444;
padding: 5px;
border-radius: 5px;
margin-right: 5px;
transition: all 3s;
color: #FFF;
cursor:pointer;
}

.gaugeclass{
	width: 100%;
	height: 100%;
	margin-bottom: 10px;
	margin-top: 10px;
}
.guagetextvalue{

	color: #FFF;
	padding-left: 2vw;
	padding-right: .3vw;

}

.gaugesensorvaluecontainer{
	display: table;
	position: absolute;
	bottom: 0px;
	text-align: center;
	font-size: 3.0vw;
	left: 50%;
	transform: translate(-50%, 0);
}

.gauge-container{
	width: 100% !important;
	height: 66% !important;

}
.gaugecontainer{

		width: 100%;
		position: absolute;
    		margin-top: 1.6vw;
    		bottom: 0px;
    		top: 0px;
    		left: 50%;
    		transform: translate(-50%, 0);
		
}

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

	.gaugecontainer{
		margin-top: 6vw;
	}
}


.headernotification{
position: absolute;
background: red;
z-index: 101;
width: 80%;
text-align: center;
height: 60px;
padding: 10px;
top: -70px;
color: #FFF;
font-size: 18px;
transition: all .5s;
margin: auto;
left: 0;
right: 0;
border-radius: 0px 0px 10px 10px;
padding-top: 12px;
}
.headernotificationgreen{
  background: #2f8300 !important;
  color: #4F0 !important;
 
}

.headernotificationactive{
top: 50px;

}
.maxusage{
	background: red;
	border-radius: 5px;
	padding: 1px 15px 1px 15px;
}
.usage{
	margin-bottom: 4px;
	border-radius: 5px;
	padding: 1px 15px 1px 15px;
}
.grid-stack > .grid-stack-item > .ui-resizable-se {
 
  background-color: #FFF;
  border-radius: 10px;
}

.footercounter{
position: absolute;
background: #1CA3F0;
bottom: -40px;

padding: 5px;
  padding-right: 5px;
  padding-left: 5px;
padding-right: 5px;
padding-left: 5px;
color: #FFF;
border-radius: 5px 5px 0px 0px;
padding-left: 10px;
padding-right: 10px;
transition: all .5s;
width: 100%;
}
.footercounter:hover{
	bottom: 0px;
}

.usagenotice
{
  line-height: 1;
  margin: 10px;
}

.togglebutton{
color: #FFF;
text-align: center;
padding: 5px;
border-radius: 5px;
cursor: pointer;
font-size: 25px;
line-height: .9;
height: 35px;
width: 40px;
}
.togglebutton:hover{
	background: #1CA3F0;
}

.togglebuttonactive{
	background: #23F01C;
}




.toolclass{
background: #4f4f4f;
border-radius: 5px;
padding: 0px 10px 10px 10px;
margin: 10px;
font-size: 35px;
width: 80px;
height: 100px;
text-align: center;

}

.toolclass:hover{
	cursor:pointer;
	background: #1CA3F0;
	
}



.trendcontainer{
	
}

.trendicon{
 transition: all 3s;
 height: 6.5vw;
 width: 6.5vw;
}



.onoffcheck{
padding: 5px 5px 2px 5px;
background: #585757;
border-radius: 20px;
color: #FFF;
margin: 0px 10px 0px 0px;
width: 30px;
font-size: 20px;
}

.applytoallbutton{
	margin-left: 10px;
	margin-top: -2px;
	
	width: 100%;
	border-radius: 20px;
	text-align: center;
	padding: 5px;
	color: #000;
	display: flex;
	cursor: pointer;
}

.applytoallbutton:hover{
	cursor: pointer;
	
	
}
.applytoallbuttonactive{
	cursor: pointer;
	
}

.chartcanvascontainer{
	padding: 10px;
	height: calc(100% - 2vw);

}

.iconcentre{
	
	display: flex;
  	justify-content: center;
	height: 100%;
	align-items: center;
}
.standardicon{
	font-size: 3vw;
	

}
.highlightnewwidget{
	box-shadow: none;
	animation-name: newwidgetanimation;
  	animation-duration: 2s;
	animation-iteration-count: 1;
}

@keyframes newwidgetanimation{
  0%   {background-color: #FFF;}
 
  100% {background-color: none;}
}

.visualalert_blue{
	box-shadow: none;
	animation-name: animateblue;
  	animation-duration: 1s;
	animation-iteration-count: infinite;
}

@keyframes animateblue{
  0%   {box-shadow: none;}
  50%  {box-shadow: 0px 0px 10px 3px  #0096FF;}
  100% {box-shadow: none;;}
}

.visualalert_yellow{
	box-shadow: none;
	animation-name: animateyellow;
  	animation-duration: 1s;
	animation-iteration-count: infinite;
}

@keyframes animateyellow{
  0%   {box-shadow: none;}
  50%  {box-shadow: 0px 0px 10px 3px  #FFFB00;}
  100% {box-shadow: none;;}
}

.visualalert_amber{
	box-shadow: none;
	animation-name: animateamber;
  	animation-duration: 1s;
	animation-iteration-count: infinite;
}

@keyframes animateamber{
  0%   {box-shadow: none;}
  50%  {box-shadow: 0px 0px 10px 3px #FF9100;}
  100% {box-shadow: none;;}
}

.visualalert_red{
	box-shadow: none;
	animation-name: animatered;
  	animation-duration: 1s;
	animation-iteration-count: infinite;
}

@keyframes animatered{
  0%   {box-shadow: none;}
  50%  {box-shadow: 0px 0px 10px 3px  #FF0000;}
  100% {box-shadow: none;;}
}

.visualalert_green{
	box-shadow: none;
	animation-name: animategreen;
  	animation-duration: 1s;
	animation-iteration-count: infinite;
}

@keyframes animategreen{
  0%   {box-shadow: none;}
  50%  {box-shadow: 0px 0px 10px 3px  #1AFF00;}
  100% {box-shadow: none;;}
}


.conversioncontainer{
width: 100%;
background-color: #363636;
color: #FFF;
padding: 5px;
}

.conversionspopup{
background: #fff0;
width: 100%;

position: absolute;
top: -450px;
padding: 5px;
display: flex;
box-shadow: 0px 0px 15px #00000080;
z-index: 101;
margin: auto;
left: 0;
right: 0;
border-radius: 6px;
  transition: all .5s;
height: 200px;
margin-top: 70px;
}



.centercontent{
  display: flex;
  justify-content: center;
}

.betweencondition{
	width: fit-content;
	display: none;
}


.inputstyle{
padding: 2px !important; 
color: #000 !important;
width: 100px !important;
border-radius: 3px !important;
height: 33px;
}

.ruledeletebutton {
font-size: 20px;
background-color: red;
padding: 10px;
border-radius: 5px;
border: solid;
margin-right: 10px;
}

.ruledeletebutton:hover{
background-color: #ff7800;
}

.bottom_old{
	margin-left: 50px;
	margin-top: 5px;
}

.alertrule{
padding: 5px;
background-color: #888;
border-radius: 3px;
margin: 5px 0px 0px 0px;
}

.alerts{
background-color: #393939;
height: 100%;
width: 100%;

padding: 1rem;
flex-wrap: wrap;
box-sizing: border-box;
position: relative;
height: 100%;

z-index: 1;
overflow: auto;
color: #FFF;
}
.addvisualalert{
color: #FFF;
padding: 5px 7px 5px 7px;
font-size: 35px;
background-color: #1CA3F0;
border-radius: 60px;
box-shadow: 0px 0px 12px black;
border: solid;
border-color: #FFF;
margin-top: 10px;
}

.addvisualalert:hover{
background-color: #54F01C;
cursor: pointer;

}

.closeicon{
color: #FFF;
padding: 0px 10px 0px 10px;
  padding-top: 0px;
font-size: 25px;
position: absolute;
z-index: 999;
right: 15px;
bottom: -15px;
background-color: #444;
border-radius: 60px;
border: solid;
border-color: #FFF;
height: 35px;
padding-top: 3px;
}

.closeicon:hover{
 background-color: #ff7800;
	cursor: pointer;
}



.visualalertpopup{
background: #fff0;
width: 100%;
position: absolute;
top: -550px;
padding: 0px;
display: flex;
box-shadow: 0px 0px 15px #00000080;
z-index: 101;
transition: all .5s;
height: 60%;
margin-top: 50px;
max-height: 500px;
}



.clockformatclass{
	background: #4f4f4f;
	border-radius: 5px;
	padding: 10px;
	height: 50px;
	margin: 10px;
}

.clockformatclass:hover{
	cursor:pointer;
	background: #adadad;
	
}

.widgetcontainerpanel{
	height:100%;
}

.titlepannel{
	display:flex;
	height: 100%;
}

.titletext{
	font-size: 2.4vw;
	color: #706f6f;
	width: 100%;
	text-align: center;
	padding-left: 1vw;
	padding-right: 1vw;
	white-space: nowrap;
	overflow: hidden;
	width:100%;
	margin: auto;
	position: relative;
}

.grid-stack {
  
}

.grid-stack-item-content {
  color: #000000a6;
  text-align: center;
  
   border-radius: 6px;
	overflow: hidden;
	

}

.grid-stack-item{
border-radius: 5px;
}



.grid-stack-item-content:hover .deletebutton {
transition: all .2s ease-out;
display: block;

opacity: 1;
}


.grid-stack > .grid-stack-item > .grid-stack-item-content {
  
  overflow-y: hidden !important;
}


.datachangesignal{
	box-shadow: none;
	animation-name: signalanimationborder;
  	animation-duration: 1s;
	animation-iteration-count: 3;
}

@keyframes signalanimationborder{
  0%   {box-shadow: none;}
  50%  {box-shadow: 0px 0px 10px #FFF;}
  100% {box-shadow: 0px 0px 0px #FFFFFFF;}
}



.hyperlinkclass
{
	color: #FFF !important;
	text-decoration: underline !important;
}


.unsplashloadmore
{
	text-align: left;
	color: #FFF;
	margin-top: 9px;
	margin-left: 10px;
}
.unsplashloadmore:hover
{
	cursor:pointer;
	
}

.attributestyle{
	color:#FFF;
	font-weight: 100;
	line-height: 1.3;
	display: flex;
}

.attributestyleunsplash{
  color: #FFF;
  font-size: 12px;
  font-weight: 100;
  line-height: 1.4;
}
.attributestyleunsplash .a{
  color: #FFF;
 
}
.attributestylename{
	color:#FFF;
	line-height: 1.2;
}

.unsplashsearchresultsclass{
	overflow:auto;
}

.searchresultstextstyle{
	color: #FFF;
	margin: 5px;
}

.removebutton{
padding: 5px;
background-color: #1CA3F0;
border-radius: 5px;
margin: 5px;
color: #FFF;
}

.removebutton:hover{
background-color: #00c3ff;
cursor:pointer;
}



.searchbuttonstyle{
padding: 5px;
background-color: #1CA3F0;
border-radius: 5px;
margin: 5px;
color: #FFF;
}

.searchbuttonstyle:hover{
background-color: #00c3ff;
cursor:pointer;
}

.searchinputclass{
	display: flex;
	height: 50px;
}

.inputbox
{
background-color: #FFF !important;
border-radius: 5px !important;
padding: 5px !important;
margin: 5px !important;
height:35px;
width: 350px;
}

.unsplashsearchresultsclass{
	background-color: #4f4f4f;
	width: 100%;
	height: calc(100% - 180px);
}

.imageselector{
float: left;
padding: 10px;
background-color: #313131;
border-radius: 5px;
margin: 10px;
position: relative;
height: 170px;
}

.imageselector:hover{
         cursor: pointer;
	background-color:#7c7c7c;
}

.unspash{
    top:-580px;
}

.unsplashsearch{
  height: 100%;
  
  width: 100%;
	transition: all 2s;
}

.unsplashpopup {
  background: #444;
  width: 100%;
  position: absolute;
  top: -620px;
  padding: 0px;
  display: flex;
  z-index: 100;
  
  transition: all .5s;
	height: 80%;
	max-height:500px;
}

.icondisplay{
    font-size: 40px;
    padding: 10px;
	height: 80px;

     transition: background-color .3s ease-out 100ms;
}
.icondisplay:hover{
    background: black;
    border-radius: 5px;
    height: 80px;
}


.iconlist{
background-color: #393939;
height: 100%;
width: 100%;
display: flex;
padding: 1rem;
flex-wrap: wrap;
box-sizing: border-box;
position: relative;
height: 100%;

z-index: 1;
overflow: auto;
color: #FFF;
}

.windrosepannel{
        height: 100%;
    width: 100%;
}
.widgetcontainerrose{
    height: 100%;
    width: 100%;
}

.rose{
    margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
    transition: all 3s;
 height: 6.5vw;
 width: 6.5vw;
}

.windrosevalue {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
    height: 4vw;
    font-size: 2.5vw;
}

.container{
    font-family: "Roboto", Sans-serif;
    overflow-y: scroll;
    height: calc(100% - 70px);
    padding-right: 25px;
    padding-left: 25px;
    top: 70px;
    padding-top:25px;
   border: solid;
   border-width: 0px 0px 40px 0px !important;
  background-size: cover;
  background-position: center;
}

.iconpopup{
background: #fff0;
width: 100%;
position: absolute;
top: -550px;
padding: 0px;
display: flex;
z-index: 101;
transition: all .5s;
height: 60%;
margin-top: 50px;
max-height: 500px;
}

.dsignerpopup{
background: #444;
width: 100%;
position: absolute;
top: -450px;
padding: 0px;
display: flex;
z-index: 101;
margin: auto;
left: 0;
right: 0;
transition: all .5s;
height: 150px;
margin-top: 50px;
}

.iframestyles{
	border: none;
	width:100%;
}

.headertitle {
  font-size: 30px;
  color: #FFF;
  
  padding: 0px 20px 5px 20px;
  border-radius: 3px;
  transition: background-color .5s ease-out 100ms;
  z-index: 101;
}

.headertitle:hover{
    cursor: pointer;
    background: #FF1493;
} 

.headertitle:hover .backgrounddiv { 
     opacity: 0;
}



.backgrounddiv{
    transition: all .5s ease-out 100ms;
    background: #000;
    opacity: .5;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    left: 0;
}

.spanstyle {
  padding-bottom: 15px;
  display: block;
  line-height: .8;
  position: relative;
}

.iconclass{
    font-size: 3vw;
    padding-top: 13px;
}

.colourborder
{
border-color: #FFF;
border-width: 2px;
border-style: solid;
border-radius: 6px;
display: flex;
width: 27px;
height: 27px;
}

.deletebutton
{
  position: absolute;
  right: 5px;
  padding: 0px 5px 1px 5px;
  background: #ff00005e;
  color: aliceblue;
  cursor: pointer;
  border-radius: 35px;
  transition: all .5s;
  font-size: 10px;
  top: 5px;
  z-index: 1;
  border-color: #FFF;
  border-width: 2px;
  border-style: solid;
  display:none;
}

.deletebutton:hover
{
	background: #f00;
}


/** STYLE WIDGET **/
.widgetcontainer{
    overflow:hidden;
    height: 100%;
     display : flex;
    align-items : center;
}


.leftpanel{
  width: 5.5vw;
  height: 100%;
  vertical-align: middle;
  background-color: #000000b8;
  color: #FFF;

}




.rightpanel
 {
  width: calc(100% - 4.5vw);
  height: 100%;
}

.title
{
    font-size: 1.6vw;
    color: white;
    width: 100%;
    text-align: left;
    padding-left: 1vw;
    padding-right: 1vw;
    white-space: nowrap;
    overflow: hidden;
 height: auto;
position: absolute;
}

.charttitle
{
    font-size: 1.6vw;
    color: white;
    width: 100%;
    text-align: left;
    padding-left: 1vw;
    padding-right: 1vw;
    white-space: nowrap;
    overflow: hidden;
position: absolute;
z-index:9;
}

.datachart{
	position: absolute;
	bottom: 0px;

}


.sensorvalue{
    font-size: 5.5vw;
    line-height: 1;
   	
    text-align: left;
    padding-left: 1vw;
    padding-right: .4vw;
    color: white;
    margin-top: -.2vw;
	letter-spacing: -2.5px !important;
    
}


.unitclass{
    font-size: 1.2vw;
	margin-top: 2px;
}

/** #################### **/



.highlightwidget
 {
  width: 100%;
  height: 100%;
  position: absolute;
  border: dashed;
  border-width: 3px;
  border-color: #FFF;
	animation-name: flashborder;
  	animation-duration: 1s;
	animation-iteration-count: infinite;

}

	


@keyframes flashborder{
  0%   {border-color: #FFF;}
  25%  {border-color: #1CA3F0;}
  75%  {border-color: #000;}

  100% {border-color: #FFF;}
}



.highlightborder
{
    border: solid;
    border-color: #FFF;
    border-radius: 6px;
}

.colourborder{

      margin: 2px 5px 5px 5px;
}


/** #################### **/


/** 
.headertitle:hover .hovercog {
transition: all .2s ease-out;
display: block;
margin: 0px 0px 0px -60px;
background-color: dimgray;
color: #FFF;
opacity: 1;
}


.hovercog
 {
transition: all 1s ease-out;
background-color: white;
padding: 2px 10px 3px 10px;
position: absolute;
margin: 0px 0px 0px -20px;
color: black;
border-radius: 3px 0px 0px 3px;
opacity: 0;
height: 40px;
font-size: 20px;
width: 40px;
}

**/




/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 170px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  top: 125%;
  left: 50%;
  margin-left: -60px;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
	font-size: 16px;
}


/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}



.tooltipnotificationactive{
top: 80px !important;

}

.tooltipnotification{
position: absolute;
background: #292929;
z-index: 101;
width: 200px;
text-align: center;

padding: 8px;
  padding-top: 4px;
top: -70px;
color: #FFF;
font-size: 16px;
transition: all .5s;
left: 0;
border-radius: 5px;
padding-top: 5px;
padding-bottom: 7px;
box-shadow: 0px 0px 20px 10px #0000003d;
border: solid;
border-width: 2px;
border-color: #7e7f7f;
}

.questiontitle{
font-weight: bold;
font-size: 22px;
}

.widgetname{
	padding-top: 4px;
	text-align: center;
}





.popupheader
{
	
  background: #1CA3F0;
  padding: 5px 0px 5px 18px;
  width: 100%;
 
  font-size: 20px;
  color: #FFF;
  border-radius: 0px 0px 0px 0px;
}

.midnightmaxvalue{
	font-size:40px;
	margin-top: -14px;
}
.midnightminvalue{
	font-size:40px;
	margin-top: -14px;
}

.midnightmaxtime{
	margin-top: -16px;
}
.midnightmintime{
	margin-top: -16px;
}

.midnightchartcontainer{
	height:calc(100% - 205px);
	padding:20px;
}
.midnightheader{
	
	height: 175px;
}
.midnightsensorname{
	width:100%;
	text-align: center;
	font-size: 25px;
}
.midnighthighlowcontainer{
display:flex;
width:100%;

	}

.maxvalue{
border-radius: 5px;
width: 50%;
background-color:#87B024;
	color:#FFF;
margin: 10px;

text-align: center;
}
.minvalue{
border-radius: 5px;
width: 50%;
background-color:#1CA3F0;
	color:#FFF;
margin: 10px;

text-align: center;
}

.subheader{
	text-align:center;
	font-size:16px;
}

.blocked{
position: absolute;
z-index: 999;
top: 0px;
background-color: #ff0000bf;
width: calc(100% - 100px);
font-size: 23px;
color: #FFF;
text-align: center;
margin: 50px;
border-radius: 8px;
padding: 100px;
}

.blockedwarning{
position: absolute;
z-index: 999;
top: 0px;
background-color: #ff8300;
width: 100%;
font-size: 14px;
color: #FFF;
padding: 5px;
text-align: center;
}

.blockout{
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #000c;
  z-index: 99;
}


.svgiconbox{
    width: 50px;
    height: 50px;
    position: relative;
margin-left: auto;
    margin-right: auto;
}
.svgcentericon{
margin-left: auto;
    margin-right: auto;
}


.fixediconsize{
	width: 50%;
    margin-left: auto;
    margin-right: auto;
}