/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 29 de jan. de 2021, 13:19:16
    Author     : marangoni
*/

/*canvas#analogical-canvas-chart{
    position:relative; 
    z-index:1;
}*/

html {
    scroll-behavior: smooth;
}

.chart-flex {
    margin-left:4px;
    margin-bottom: 20px;
    background-color: black;
    padding: 4px;
}

.chart-settings {
    width: 30px;
    height: 30px;
    margin-top: -20px;
    position: relative;
    padding-left: 7px;
    padding-top: 5px;
}

.chart-block {
    width: 30px;
    height: 60px;
    margin-top: -57px;
    position: absolute;
    background-color: #000000;
}
canvas {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.sortable {
    border: 0;
    padding: 0px;
}
.sortable li {
    border: 0;
}

.sortable li {
    border: none;
    list-style: none outside none;
    margin: 4px;
    padding: 0px;
    cursor: move;
}
.sortable li:focus, .sortable li:hover {
    background-color: #000000;
    border-radius: 0px;
    border: 0px; 
}

.cursor-move li{
    cursor: move;
}

.sortable .handle {
    cursor: move;
}

.sortable li.disabled {
    cursor: not-allowed;
}

.sortable.grid {
    overflow: hidden;
}

.sortable.grid li {
    float: left;
    min-width: 70px;
    min-height: 70px;
    text-align: center;
}

.sortable .handle {
    cursor: move;
}

.sortable li.disabled {
    opacity: 1;
}

.widget{
  border-radius: 2px;
  padding: 0;
  margin: 0 0 0 0;
  background: rgba(0, 0, 0, 1);
  color: #fff;
  position:relative;
  text-align: center;  
  border-style: solid;
  border-color: black;
  border-width: 3px;
}

.widget-maintenance{
    position: absolute;
    bottom: -3px;
    right: 3px;
    cursor:pointer;
}

.widget-notification{
    position: absolute;
    bottom: -3px;
    left: 0;
    cursor:pointer;
}

.widget-image {
  padding-top: 2px;        
  width: 40%;
}

/* MINI */
.widget-mini{
  width: 80px;
  height: 80px;
}
.widget-title-mini {
  color: #FFFFFF;
  font-size: 9px;
  padding-left: 2px;
  padding-right: 2px;  
  padding-top: 0;    
}

.widget-subtitle-mini {
  color: #FFFFFF;
  font-size: 8px;
  padding-left: 2px;
  padding-right: 2px;  
}

.widget-value-mini {
  color: #FFFFFF;
  font-size: 12px;
  padding-top: 5px;  
}
.widget-value-text-mini {
  color: #FFFFFF;
  font-size: 12px;
  padding-top: 0px;  
}
.widget-unit-text-mini {
  color: #FFFFFF;
  font-size: 8px;
  padding-top: 5px;    
}

.widget-unit-mini {
  color: #FFFFFF;
  font-size: 8px;
  padding-top: 5px;    
}

.widget-img-mini {
  padding-top: 1px;        
  width: 42%;
}

.widget-footer-mini {
  color: #FFFFFF;
  font-size: 8px;
  position:absolute;
  bottom:0;
  left:0; 
  right:0;
  margin-bottom: 1px;
}

/* SMALL */
.widget-small{
  width: 120px;
  height: 120px;
}

.widget-title-small {
  color: #FFFFFF;
  font-size: 12px;
  padding-left: 2px;
  padding-right: 2px;  
  padding-top: 0;    
}

.widget-subtitle-small {
  color: #FFFFFF;
  font-size: 10px;
  padding-left: 2px;
  padding-right: 2px;  
}

.widget-value-small {
  color: #FFFFFF;
  font-size: 20px;
  padding-top: 11px;  
}
.widget-value-text-small {
  color: #FFFFFF;
  font-size: 20px;
  padding-top: 0px;  
}
.widget-unit-text-small {
  color: #FFFFFF;
  font-size: 10px;
  padding-top: 0px;    
}
.widget-unit-small {
  color: #FFFFFF;
  font-size: 10px;
  padding-top: 10px;    
}

.widget-img-small {
  padding-top: 5px;        
  width: 47%;
}

.widget-footer-small {
  color: #FFFFFF;
  font-size: 9px;
  position:absolute;
  bottom:0;
  left:0; 
  right:0;
  margin-bottom: 4px;
}
/* NORMAL */
.widget-normal{
  width: 190px;
  height: 190px;
}
.widget-title-normal {
  color: #FFFFFF;
  font-size: 22px;
  padding-left: 2px;
  padding-right: 2px;  
  padding-top: 0;    
}

.widget-subtitle-normal {
  color: #FFFFFF;
  font-size: 16px;
  padding-left: 2px;
  padding-right: 2px;  
}

.widget-value-normal {
  color: #FFFFFF;
  font-size: 32px;
  padding-top: 18px;  
}

.widget-unit-normal {
  color: #FFFFFF;
  font-size: 18px;
  padding-top: 15px;    
}
.widget-value-text-normal {
  color: #FFFFFF;
  font-size: 32px;
  padding-top: 6px;  
}
.widget-unit-text-normal {
  color: #FFFFFF;
  font-size: 18px;
  padding-top: 0px;    
}
.widget-img-normal {
  padding-top: 6px;        
  width: 54%;
}

.widget-footer-normal {
  color: #FFFFFF;
  font-size: 9px;
  position:absolute;
  bottom:0;
  left:0; 
  right:0;
  margin-bottom: 4px;
}
/* MEDIUM */
.widget-medium{
  width: 256px;
  height: 256px;
}
.widget-title-medium {
  color: #FFFFFF;
  font-size: 35px;
  padding-left: 2px;
  padding-right: 2px;  
  padding-top: 0;    
}

.widget-subtitle-medium {
  color: #FFFFFF;
  font-size: 24px;
  padding-left: 2px;
  padding-right: 2px;  
}

.widget-value-medium {
  color: #FFFFFF;
  font-size: 50px;
  padding-top: 12px;  
}

.widget-unit-medium {
  color: #FFFFFF;
  font-size: 20px;
  padding-top: 5px;    
}

.widget-value-text-medium {
  color: #FFFFFF;
  font-size: 50px;
  padding-top: 0px;  
}
.widget-unit-text-medium {
  color: #FFFFFF;
  font-size: 20px;
  padding-top: 0px;    
}

.widget-img-medium {
  padding-top: 5px;        
  width: 54%;
}

.widget-footer-medium {
  color: #FFFFFF;
  font-size: 1.85em;
  position:absolute;
  bottom:0;
  left:0; 
  right:0;
  margin-bottom: 4px;
}
/* LARGE */
.widget-large{
  width: 400px;
  height: 400px;
}
.widget-title-large {
  color: #FFFFFF;
  font-size: 3.95em;
  padding-left: 2px;
  padding-right: 2px;  
  padding-top: 0;    
}

.widget-subtitle-large {
  color: #FFFFFF;
  font-size: 3.85em;
  padding-left: 2px;
  padding-right: 2px;  
}

.widget-value-large {
  color: #FFFFFF;
  font-size: 5.0em;
  padding-top: 12px;  
}

.widget-unit-large {
  color: #FFFFFF;
  font-size: 3.65em;
  padding-top: 14px;    
}

.widget-value-text-large {
  color: #FFFFFF;
  font-size: 4.9em;
  padding-top: 0px;  
}
.widget-unit-text-large {
  color: #FFFFFF;
  font-size: 3.65em;
  padding-top: 0px;    
}

.widget-img-large {
  padding-top: 5px;        
  width: 54%;
}

.widget-footer-large {
  color: #FFFFFF;
  font-size: 1.85em;
  position:absolute;
  bottom:0;
  left:0; 
  right:0;
  margin-bottom: 4px;
}


/* WIDGET PARA GRAFICOS CHART */
.widget-graphics-small{
  width: 504px;
  height: 248px;
}


/* WIDGET PARA INFOGRAFICO DO RESUMO */

.widget-resume{
    margin-right: -18px;
    margin-left: -10px;
}
/* INFO BOX */
.info-box {
    display: block;
    min-width: 200px;
    background: #fff;
    width: 100%;
    min-height: 70px;
    margin-bottom: 10px;
}

.info-box-content {
    padding: 5px 10px;
    margin-left: 70px;
}  
.info-box-text {
    display: block;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
} 

.info-box-number {
    display: block;
    font-weight: bold;
    font-size: 12px;
}
.progress-description, .info-box-text {
    display: block;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.info-box-icon {
    border-top-left-radius: 2px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 2px;
    display: block;
    float: left;
    height: 70px;
    width: 70px;
    text-align: center;
    font-size: 45px;
    line-height: 70px;
    background: rgba(0,0,0,0.2);
}       
/* Barra do top pulsante padrão ONE*/
.glow {
    position: relative; 
    max-height: 5px;  
    z-index: 1030;
    background: linear-gradient(90deg, #004efe, #000000);
    background-size: 400% 400%;
    -webkit-animation: AnimationOneTop 5s ease infinite;
    -moz-animation: AnimationOneTop 5s ease infinite;
    animation: AnimationOneTop 5s ease infinite;
}

@-webkit-keyframes AnimationOneTop {
    0%{background-position:0% 17%}
    50%{background-position:100% 84%}
    100%{background-position:0% 17%}
}
@-moz-keyframes AnimationOneTop {
    0%{background-position:0% 17%}
    50%{background-position:100% 84%}
    100%{background-position:0% 17%}
}
@keyframes AnimationOneTop {
    0%{background-position:0% 17%}
    50%{background-position:100% 84%}
    100%{background-position:0% 17%}
}

/* outras barra gradiente */
#gradient
{

    border:1px solid black;
    font-size:30px;
    background: linear-gradient(90deg, #ff7e00, #ffffff, #5cff00);
    background-size: 200% 200%;

    -webkit-animation: Animation 5s ease infinite;
    -moz-animation: Animation 5s ease infinite;
    animation: Animation 5s ease infinite;
}

@-webkit-keyframes Animation {
    0%{background-position:10% 0%}
    50%{background-position:91% 100%}
    100%{background-position:10% 0%}
}
@-moz-keyframes Animation {
    0%{background-position:10% 0%}
    50%{background-position:91% 100%}
    100%{background-position:10% 0%}
}
@keyframes Animation { 
    0%{background-position:10% 0%}
    50%{background-position:91% 100%}
    100%{background-position:10% 0%}
}



/* ************************* */




/* Galaxy S5 */
@media (min-width: 360px) and (max-width: 361px) and (orientation: portrait) {
    .widget-clp-mini {
        width: 78px;
        height: 80px;
    }
    .sortable li { 
        margin-right: 0px; 
        margin-bottom: 2px;
        min-width: 78px;
        min-height: 80px;     
     }
     .btext{
        position: absolute;
        top: 25%;
        width: 100%;
    }
    .login-box, .register-box {
        width: 240px;
        margin: 7% auto;
    }
    .chart-settings {
        margin-top: -10px;
    }
    .chart-block {
        margin-top: -46px;
    }
}
@media (min-width: 640px) and (max-width: 641px) and (orientation: landscape) {
    .sortable li { 
        margin: 3px; 
    }
    .btext{
        position: absolute;
        top: -20px;
        width: 100%;
    }     
    .login-box, .register-box {
        width: 240px;
        margin: 7% auto;
    }
    .chart-settings {
        margin-top: -10px;
    }
    .chart-block {
        margin-top: -46px;
    }
}

/* Pixel 2 */
@media (min-width: 411px) and (max-width: 412px) and (orientation: portrait) {
    .sortable li { 
        margin-right: 3.55vw; 
    }
    .btext{
        position: absolute;
        top: 30%;
        width: 100%;
    }
    .login-box, .register-box {
        width: 240px;
        margin: 7% auto;
    }
    .chart-settings {
        margin-top: -10px;
    }
    .chart-block {
        margin-top: -46px;
    }
}
@media (min-width: 731px) and (max-width: 732px) and (orientation: landscape) {
    .sortable li { 
        margin: 3px; 
    }
    .btext{
        position: absolute;
        top: 0px;
        width: 100%;
    }     
    .login-box, .register-box {
        width: 240px;
        margin: 7% auto;
    }
    .chart-settings {
        margin-top: -10px;
    }
    .chart-block {
        margin-top: -46px;
    }
}

/* iPhone 5/SE S */
@media (min-width: 320px) and (max-width: 321px) and (orientation: portrait) {
    .sortable li { 
        margin-right: 5.4vw; 
    }
    .btext{
        position: absolute;
        top: 25%;
        width: 100%;
    }
    .login-box, .register-box {
        width: 240px;
        margin: 7% auto;
    }
    .chart-settings {
        margin-top: -10px;
    }
    .chart-block {
        margin-top: -46px;
    }
}
/* iPhone 6/7/8 PLUS */
@media (min-width: 414px) and (max-width: 415px) and (orientation: portrait) {
    .sortable li { 
        margin-right: 3.7vw; 
    }
    .btext{
        position: absolute;
        top: 30%;
        width: 100%;
    }     
    .login-box, .register-box {
        width: 240px;
        margin: 7% auto;
    }
    .chart-settings {
        margin-top: -10px;
    }
    .chart-block {
        margin-top: -46px;
    }
}
/* iPhone 6/7/8 X M */
@media (min-width: 375px) and (max-width: 376px) and (orientation: portrait) {
    .sortable li { 
        margin-right: 1.5vw;
    }
    .btext{
        position: absolute;
        top: 25%;
        width: 100%;
    }     
    .login-box, .register-box {
        width: 240px;
        margin: 7% auto;
    }
    .widget-resume{
      width: 102vw;
    }   
    .chart-settings {
        margin-top: -10px;
    }
    .chart-block {
        margin-top: -46px;
    }
}
@media (min-width: 812px) and (max-width: 813px) and (orientation: landscape) {
    .sortable li { 
        margin: 3px; 
    }
    .btext{
        position: absolute;
        top: -40px;
        width: 100%;
    }       
    .login-box, .register-box {
        width: 240px;
        margin: 7% auto;
    }
    .chart-settings {
        margin-top: -10px;
    }
    .chart-block {
        margin-top: -46px;
    }
}

/* Redmi Note 8 */
@media only screen and (min-device-width: 393px) and (orientation: portrait) {
    .sortable li { 
        margin-right: 2vw;
    }
    .btext{
        position: absolute;
        top: 25%;
        width: 100%;
    }     
    .login-box, .register-box {
        width: 240px;
        margin: 7% auto;
    }
    .widget-resume{
      width: 102vw;
    }    
    .chart-settings {
        margin-top: -10px;
    }
    .chart-block {
        margin-top: -46px;
    }
}
@media only screen and (min-device-width: 851px) and (orientation: landscape) {
    /* Your Styles... */ 
}

/* ***************************************************************************/

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

/* ***************************************************************************/

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

/* ***************************************************************************/

.sp-preview-x {
    position: relative;
    width: 25px;
    height: 20px;
    border: solid 1px #222;
    margin-right: 30px;
    float: left;
    z-index: 0;
}
/* ************************************************************************** */


.center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.center-settings{
    margin-top: 10%;
}


.wrapper-settings {
    display: grid;
    grid-template-columns: 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px;
    /*grid-template-columns: 5% 5% 5% 5% 5% 5% 5% 5% 5% 5%;*/    
    grid-gap: 4px;
    margin-left: 0;
}
.box-settings {
    color: #fff;
    padding-top: 2px;
    padding-left: 2px;
    cursor: pointer;
    width: 30px;
    height: 30px;
}
.box-settings-mini {
    color: #fff;
    padding-top: 5px;
    padding-left: 5px;
    cursor: pointer;
    width: 30px;
    height: 30px;
}

.wrapper-settings-mini {
    display: grid;
    grid-template-columns: 8% 8% 8% 8% 8% 8% 8% 8% 8% 8% 8%;
    grid-gap: 2.2%;
    margin-left: -4px;
}


.vertical-center {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.modal-header {
    padding-left: 20px;
    border-bottom: 1px solid #333;
}

.modal-header .close {
  display:none;
}

.modal-footer {
    padding: 5px;
    text-align: right;
    border-top: 1px solid #333;
}

.bootbox.modal {z-index: 9999 !important;}