/* Dashboards
  ========================================================================== */



/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  src: url(fonts/XRXV3I6Li01BKofINeaBTMnFcQ.woff2) format('woff2'); /* https://fonts.gstatic.com/s/nunito/v16 */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  src: url(fonts/XRXW3I6Li01BKofAjsOUYevIWzgPDA.woff2) format('woff2'); /* https://fonts.gstatic.com/s/nunito/v16 */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Dashboard List */

.dash-wrapper {
  display: grid;
  grid-gap: 40px;
/*   grid-template-columns: repeat(auto-fit, 300px);   */
  grid-template-columns: repeat(auto-fit, 270px);  
  
/*   margin: 50px 0; */
/* margin-left: 50px; */

  word-wrap: break-word;
  justify-content: center;

}

.dash-box {
/*   background-color: #ECECEF; */
  background-color: #FFF;
  border-radius: 5px;
  padding: 20px;
  font-size: 120%;
  display: flex;
  align-items: center;
  height: 160px;
  cursor: pointer;
/*   box-shadow: 5px 10px 10px 0 #00000040;   */
  position: relative;
  
  outline: solid #8080801f 1px;
  
  margin: 10px;
  
    
}
.dash-box:hover {
/* 	box-shadow: 5px 10px 15px 10px #00000040; */
	box-shadow: 0px 10px 10px -2px #00000045;
}
.dash-display{
    display:table-cell;
    width: 100%;
    background: transparent;
}

.dash-miniature {
    height: 90px;      /* equals max image height */
    width: 90px;
    white-space: nowrap;
    border-radius:50px;
    text-align: center;
    overflow:hidden;    
    display: inline-block;
    vertical-align: middle;
/*     box-shadow: 0 0 20px 3px #00000030; */
}



.dash-miniature img {
    vertical-align: middle;
    max-height: 100%;
    max-width: 100%;
    
}

.dash-infos{
	display: inline-block;
    vertical-align: middle;
	width: calc(100% - 100px);
	text-align: center;
	padding: 0;
}

.dash-infos a{
	color: black;
	font-weight: bold;
}
.dash-infos a:hover{
    text-decoration: none;
}

.dash-box:is(:hover) .dashcfg.rqdhcfg{
	opacity: 1;	
}

.dashcfg.rqdhcfg{

	position: absolute;
	top: 0;
	right: 0;
	margin: 5px;
	align-self: baseline;
	opacity: 0;


	background: url(../img/dots.svg) no-repeat;
	width: 20px;
	height: 20px;
	background-size: contain;
	filter: invert(53%) sepia(0%) saturate(144%) hue-rotate(179deg) brightness(88%) contrast(97%);
}

.dashcfg.rqdhcfg:hover{
    filter: invert(100%);
    background-color: #5a6268;
    border-color: #545b62;
}

/* Dashboard */
  
.rqdashboard {
	font-family: "Nunito", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif
	
}  
.rqdashboard .rqhdr {
	display:none;
}
.rqdashboard .rqview {
	padding:0;
	margin:0;
}
.rqdashnav{
	margin: auto;
}
.rqview h2.rqhdrdash{
	font-size:250%;
	font-weight:bold;
	border:none;
	float:left;
	margin-right:10px;
}

/*

.rqdefaultpage .rqview .rqhdrdashmob h2{
	font-size:175%;
	font-weight:bold;
	border:none;
	margin-right:10px;
}
*/

.rqhdrdashmob {
	font-size:90%;
}



.dashparam .rqchartparam .lbl{
	float:left;
	
	
	top: 0.2em;
    position: relative;	
}

.dashparam .rqchartparam .val{
	float:left;
}

.rqdashnav .sortable-placeholder {
	background-color:#49494B;
	color:#49494B;
/* 	height: 20px !important; */
	float: left;
}

.rqdashnav .ui-sortable-helper a.rqdashlnk {
	background: #848D94;
	color: #fff;

}


.rqdashpglnk {
	float:left;
	color:#9E9EAD;
	padding:5px;
	user-select: none;
	white-space: nowrap;
    overflow: visible;
}



.rqdashpglnkSlide{
   	opacity: 0.5;
   	cursor: pointer;
   	display: none;
   	padding: 0 0 4px 0;

}



a.rqdashlnk {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-family: pt_sans, Verdana, sans-serif;
	font-size: 11px;
	cursor: pointer;
	margin: 0;
	padding: 4px 18px 4px 18px;
	-webkit-border-radius: 30px;
	border-radius: 30px;
	text-decoration: none;
	color: #9E9EAD;
	background: none;
    white-space: nowrap;
	overflow:visible;
}

a.rqdashlnk:hover {
	background: #848D94;
	color: #fff;
}

/* selected link */
a.rqdashlnk.rqdashcur {
	background: #DFE0E2; 
	
	color: #49494B;
}

a.rqdashlnk.rqdashcur:hover {
	background: #848D94;
	color: #fff;
}

/* selected link when moving link */
a.rqdashlnk.rqdashcur.noHover:hover {
	background: #DFE0E2;
	color: #49494B;
}

/* normal link when moving */
a.rqdashlnk.noHover:hover {
	background: none; 
	
	color: #9E9EAD;
}

.rqdashwdgt {
	width:220px;
	height:110px;
	position:absolute;
	padding:5px;

}

.rqdashwdghead {
	height:20px;	
}



.rqdhcfg {
    z-index: 1;
    position: relative;
}

.rqdashwdgttl {
	height:20px;
/* 	padding:2px 0 0 0; */
	padding:0;
/* 	font-size:12px; */
	font-size:15px;
	font-weight:bold;
	float:left;
	
	overflow-y: hidden;
	position: absolute;
	word-wrap: anywhere;
	
}

.rqdashwdgcnt {
	background:#FFFFFF;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	position:relative;
	overflow: hidden;
	transform-origin: top left;
	
	
	
	height: -webkit-calc(100% - 20px);
    height:    -moz-calc(100% - 20px);
    height:         calc(100% - 20px);
	clear:both;
	
}
/*
.rqdashimg {
	width:48px;
	height:48px;
	top:16px;
	left:16px;
	position:absolute;
    cursor: default !important;   
  
	
}
.rqdashimg img {
	width:48px;
	height:48px;
}
*/


.rqdashimg svg path{	
	cursor: default !important;
}

.rqdashimg {
	width: 23%;
/* 	height: 60%; */
	top:20%;
	left:8%;
	position:absolute;
    cursor: default !important;

  	height: auto;	
	display: block;
    
}
.rqdashimg img {
	width: 23%;
/* 	height: 60%; */
	height: auto;	
	display: block;
}
.rqdashalarm {
	width:24px;
	height:24px;
	top: 0px;
	left: calc(100% - 24px);	
    left: -webkit-calc(100% - 24px);
	left: -moz-calc(100% - 24px);
	
	position:absolute;
	content:url(../img/alert.svg);
/* 	Firefox */
	-moz-animation: blink normal 2s infinite ease-in-out; 
/* 	Webkit */
    -webkit-animation: blink normal 2s infinite ease-in-out; 
/*      IE */
    -ms-animation: blink normal 2s infinite ease-in-out;
/*      Opera and prob css3 final iteration */
    animation: blink normal 2s infinite ease-in-out;
}
/*
.rqdashval {
	top:16px;
	left:100px;
	position:absolute;
}*/

.rqdashval {
	top:initial;
	left:45%;
	position:absolute;	
    align-items: center;
    display: flex;
    height: calc(100% - 10px);
    height: -webkit-calc(100% - 10px);
	height: -moz-calc(100% - 10px);	

}


.rqdashval .val {
	font-size:22px;
	vertical-align: middle;	
	font-weight:bold;
}
.rqdashval .unit {
	font-size:10px;
	padding-left:3px;
	font-weight:bold;
	position:relative;
	top:-8px;
}


.rqdashdt {
	
/* 	all: initial; */
	bottom: 0px;
/* 	left:48%; */
	position:absolute;
	font-size:10px;
	color:#ADADB5;
	
	width: 100%;
	text-align: center;
	
}

.rqdashdifftime {
/* 	top:35px; */
/* 	left:100px; */
	
	top:56%;
	left:48%;
	position:absolute;
}
.rqdashdifftime .val {
	font-size:15px;
	font-weight:bold;
}


/* Firefox old*/
@-moz-keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
} 

@-webkit-keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}
/* IE */
@-ms-keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
} 
/* Opera and prob css3 final iteration */
@keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
} 




.calculval {
	position:relative;
}

.calculval .val {
	font-size:22px;
	font-weight:bold;
}
.calculval .unit {
	font-size:10px;
	padding-left:3px;
	font-weight:bold;
	position:relative;
	top:-8px;
}





.dashboard-datepicker,
.dashboard-timepicker,
.dashboard .ui-timepicker-select,
.nav-dashboard-container .ui-timepicker-select {
    padding-top:0;
    padding-bottom:0;
    max-width: 95px;
    font-size: 13px;
	font-weight: 400;
	color: rgb(73, 80, 87);
	height:22px !important;
}

.nav-dashboard-container select.ui-timepicker-select{
	display:inline !important;
}

.dashboard-container .custom-time-picker-select {
	background: url("<%=request.getContextPath()%>/custom/iot/dashboard/img/sort.svg") no-repeat 95% 50%;
	-moz-appearance: none; 
	-webkit-appearance: none; 
	appearance: none;
	background-size: 8px;
}


/* CELL FREE/NON FREE */
/*.cell-ok{
  outline:1px solid green !important;
  z-index:20;
  position:absolute !important;
}

.cell-ko{
  outline:1px solid red !important;
  z-index:20;
  position:absolute !important;
}*/
.cell-ok{
/*   outline:1px solid green !important; */
	background-color:#d4d4d850;
/* 	z-index:20; */
	position:absolute !important;
	border-radius: 5px;
	box-shadow: 0 0 3px green !important;
    backdrop-filter: blur(5px);
	
}

.cell-ko{
/*   outline:1px solid red !important; */
/* 	z-index:20; */
	background-color:#d4d4d850;
	position:absolute !important;
	border-radius:5px;
	/*   opacity:0.4; */
	box-shadow: 0 0 3px red !important;
    backdrop-filter: blur(5px);
	
  
}

/* RESPONSIVE */

/*@media screen and (max-width: 600px){
	.rqdashpage .medium-col-bar{
		width: 99% !important;
		height: calc((100% - 40px)*2/3);
	}

	.rqdashpage .medium-table{
		width: 96%;
		height: calc((100% - 40px)/3);
		margin-right: 2%;
	}
	
	.rqdashpage .medium_item{
		height:400px;
	}
	
	.rqdashpage .medium-col-bar.no-data-alert{	
		mask-size: 50%;
	    -webkit-mask-size: 50%;
	    height: calc((100% - 40px)*2/3);
	}
}*/



@media screen and (max-width: 575px) {	
	.rqdashpage {
		height: calc(100% - 62px);
    	height: -webkit-calc(100% - 62px);
		height: -moz-calc(100% - 62px);
    	overflow: hidden !important;
    	overflow-y:visible !important;
    	padding: 1px;
   	 	padding-left: 1px;
	}
  
  	.rqdashpage .rqdashwdgt{
	    position: initial !important;
	    display: inline-block;
	    width: 100% !important;
	    margin-bottom: 10px;
	    max-height: calc(100vw * 9/16) !important; /*16:9 aspect ratio*/
    	max-height: -webkit-calc(100vw * 9/16) !important;
		max-height: -moz-calc(100vw * 9/16) !important;
	  }
	  	.dashboard-datepicker,
	.dashboard-timepicker,
	.dashboard .ui-timepicker-select,
	.nav-rqdashpage .ui-timepicker-select {
	    max-width: unset;
	    width: 50%;
	}
}
/* @media screen and (min-width: 576px) and (max-width: 991px) { */
@media screen and (min-width: 576px) and (max-width: 1280px) {
	.rqdashpage .rqdashwdgt{    
    position: relative !important;
    display: inline-block;
    top: auto !important;
    left: auto !important;
    margin-bottom: 5px;
    margin-right: 5px;
    vertical-align: top;
    max-width: 100%;
 	max-height: calc(100vw * 9/16) !important; 
 	max-height: -webkit-calc(100vw * 9/16) !important; 
    max-height:    -moz-calc(100vw * 9/16) !important; 
    
  }
  
  /*.rqdashpage .flux_item{
  	display: block;
    margin-left: auto;
    margin-right: auto;
  }*/
}

/* @media screen and (max-width: 991px) { */
@media screen and (max-width: 1280px) {
	/*.rqdashpage .dashboard-widget-menu > .btn-group-dropdown{
    right: 10px;
  }*/
  
  .rqdashwdgt{    
 	 overflow: scroll;
  }
  
  .rqdashpage {
    width: unset !important;
    height:unset !important;
    padding-bottom: 25px;
  	height: calc(100vh - 100px);
	height: -webkit-calc(100vh - 100px);
	height: -moz-calc(100vh - 100px);
  	
	}
	
	/*.nav-rqdashpage {
	    overflow-x: hidden;
	}*/
}

/* WIDGETS */


/* Bitmap */
.rqdashbitmap {
    width: 100%;
    height: 100%;
    position: relative;
	
}

.rqdashbitmap img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}



/* GROUP */


.grpmenu-button{
	background: none;
/* 	display: flex; */
	display: none;
/* 	display: flex; */

}

.grpmenu-img{
  margin-right: 10px;
  background-image: url("/dashboard/img/baseline_last_page_black_24dp.png");
  background-size: contain;
  background-repeat: no-repeat;
  width: 24px;
  display: block;
  height: 24px;
}

	
.grpmenu-img.expanded{
  background-image: url("/dashboard/img/baseline_first_page_black_24dp.png");

}

.grpheader {

  color: #444;

  font-size: 140%;
}
.groupemenu-inner{
	
  border-right: solid #80808054 1px;	
	
}


.grpmenu {
/*   border-right: solid #80808054 1px; */
  width: 100%;

  visibility: hidden;

  overflow: hidden;

  -webkit-transition: visibility .8s ease;
  -moz-transition: visibility .8s ease;
  -ms-transition: visibility .8s ease;
  -o-transition: visibility .8s ease;
  transition: visibility .8s ease;
  transition-property: width, visibility;
  min-width: 0;
  width: 0%;
  padding: 0;
  padding-top: 50px;

}
.dashpagenum{
	position: absolute;
	bottom: 0;
	right: 0;
	margin-bottom: -10px;


}

.carousel-inner{
	overflow-y: visible;
}

.grpmenu.expanded {
  visibility: visible;
  width: 25% !important;

}

.grpmenu .form-check {
  padding-bottom: 15px;
}

.grpmenu .form-check-label {
  width: 100%;
}

.grpmenu .form-check-label:hover {
  cursor: pointer;
}

.grpmenu .form-check-label.selected{
	color: #58b0dc;

}


/* @media screen and (max-width: 991px) { */
@media screen and (max-width: 1280px) {
	.grpmenu.expanded {
	  width: 100% !important;
	
	}
	
}

.grp-content{
	height:100%;
}


.grpnum {

  position: absolute;
  right: 0;
  padding-right: 10px;
  background: white;
  color:gray !important;
}



.selected.grpname {
  background-color: blue;
}

.grpmenu .form-check-input {
  margin-top: 0;
}



/* Dash List */





 .dashlst_container .carousel, .dashlst_container .carousel-inner{
     height:100%;
 }
 

 .dashlst_container .carousel-control-prev-icon {
     background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
 }
 
 .dashlst_container .carousel-control-next-icon {
      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
 }
 
 
 .dashlst_container .carousel-control-next, .dashlst_container .carousel-control-prev {
     width: auto;
 }


 /*****
  *
  * Radio checked style related
  * the fun part starts here
  *   
  */
  
  
 .dashlst_container input[type=radio] {
   display: none;
 }
 
 /**
  * How it should look when hovered
  */
  .dashlst_container .active-label, .dashlst_container input:checked + label, .dashlst_container label:focus, .dashlst_container label:hover, .dashlst_container label:active {
   color: #58b0dc;
 }
 .dashlst_container .active-label:before, .dashlst_container input:checked + label:before, .dashlst_container label:focus:before, .dashlst_container label:hover:before, .dashlst_container label:active:before {
   background: white;
   border-color: #58b0dc;
 }
 
 
 .dashlst_container label {
   font-size: 1rem;
   font-weight: bold;
   line-height: 1;
   cursor: pointer;
   display: block;
   padding: 1rem 1rem 1rem 3rem;
   position: relative;
   border-top: 1px solid rgba(0, 0, 0, 0.1);
   background: white;
   whitespace: no-wrap;
   overflow: hidden;
   text-overflow: ellipsis;
   transition: all 0.15s ease;
   /**
    * This is the radio fake dot basically
    */
 }
 .dashlst_container label:first-of-type {
   border: 0;
 }
 .dashlst_container label:before {
   content: "";
   position: absolute;
   left: 1rem;
   top: 1rem;
   width: 16px;
   height: 16px;
   border-radius: 50%;
   border: 0.2rem solid #ccc;
 }
 
 /**
  * How it should look when checked
  */
 .dashlst_container input:checked + label:before {
   border-color: white;
   border: none;
   background: #58b0dc;
 }
 
 /**
  * How it should look when disabled
  */
 .dashlst_container input:disabled + label {
   background: #efefef;
   color: rgba(0, 0, 0, 0.5);
   cursor: not-allowed;
 }
 .dashlst_container input:disabled + label:hover {
   border-color: rgba(0, 0, 0, 0.1);
 }
 .dashlst_container input:disabled + label:before {
   border-color: white;
   background: white;
 }
 
 
 
 
 	/*IFRAME*/
 	
 	
.dashframe .rqdashpage {
	clear:both;
	background:#FFFFFF;
}

.dashframe .flyby{
	width: unset !important;

}

.dashframe .flbif{
	width: unset !important;

}

.dashframe .rqdashwdgttl{
	position: static;
	float: none;
	text-align: center;
}
		
 	
@media screen and (min-width: 992px) {
  
  .defaultframe .dashframe .rqdashpage .rqdashwdgt{    
    position: relative !important;
    display: inline-block;
    top: auto !important;
    left: auto !important;
    margin-bottom: 5px;
    margin-right: 5px;
    vertical-align: top;
    max-width: 100%;
 	max-height: calc(100vw * 9/16) !important; 
    
  }
  
  .defaultframe .dashframe .rqdashpage {
    width: unset !important;
    height:unset !important;
    padding-bottom: 25px;
  	height: calc(100vh - 100px);
	}
}