@charset "UTF-8";

/* Copyright (C) Integrys.it - All Rights reserved */
html, body {padding:0; margin:0;}
html {
      font-size: 100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;
      background:url(../../img/layout/background.gif) repeat;
}

a, button, input { outline: false; }

/* VENDOR: TWITTER BOOTSTRAP */
html{background-color:transparent;}
body{background-color:transparent;}


a:not(.btn):not(.select2-choice),
a:not(.btn):not(.select2-choice):link,
a:not(.btn):not(.select2-choice):visited
{
      color:#f03c21;
}
a:not(.attachment):active {
      color:black;
}
a:hover {
      color:#f03c21;
      text-decoration:underline;
}

/* Effetto visivo: tab disabilitate */
.nav-tabs a.disabled {
      color:#ccc !important;
      cursor:default !important;
}

.popover-title,
.popover-content {
      color: #000 !important;
}
/* === VENDOR: BOOTBOX === */
/* @source http://stackoverflow.com/a/18522320/5963151 */
.fullscreen .modal-dialog {
  width: 96%;
  height: 96%;
  margin: 0 auto;
  padding: 0;
}

.fullscreen .modal-content {
  height: auto;
  min-height: 100%;
  border-radius: 0;
}

/* Allinea .modal-footer nella parte inferiore  del .modal-content */
.fullscreen .modal-footer {
      position: absolute;
      bottom: 0;
      width: 100%;
}

/* === TEXT-COLORS === */
.text-color-01 {
      color: #000 !important;
}

.text-color-02 {
      color:#fff !important;
}

.text-color-03 {
      color: #f03c21 !important;
}

.text-color-04 {
      color: #0CC !important;
}

.text-color-05,
.text-color-warning
{
      color:#f90 !important;
}

.text-color-06 {
      color: #ccc !important;
}

.word-wrap {
      overflow-wrap:break-word;
      word-wrap:break-word;
      white-space:pre-line;
}

/* ===  TESTO ===*/
*{font-family: 'Ubuntu', sans-serif !important;}

.text-size-big {
      font-size: 33px;
}

.text-size-medium {
      font-size: 26px;
}

.text-size-small {
      font-size: 18px;
}

.page-title{
      display:block;
      text-align: center;
      margin-top:30px;
}

/* ===  STRUTTURA ===*/
.layer1{position:absolute;z-index:10;margin-top:-60px auto 0 auto;padding:50px 10px 10px 10px;}
.layer2{position:absolute;z-index: 9;margin-top:-10px auto 0 auto;padding:50px 10px 10px 10px;}
.layer3{position:absolute;z-index: 8;margin-top:-10px auto 0 auto;padding:50px 10px 10px 10px;}
.layer4{position:absolute;z-index: 7;margin-top:-10px auto 0 auto;padding:50px 10px 10px 10px;}
.layer5{position:absolute;z-index: 6;margin-top:-10px auto 0 auto;padding:50px 10px 10px 10px;}
.layer6{position:absolute;z-index: 5;margin-top:-10px auto 0 auto;padding:50px 10px 10px 10px;}
.layer7{position:absolute;z-index: 4;margin-top:-10px auto 0 auto;padding:50px 10px 10px 10px;}
.layer8{position:absolute;z-index: 3;margin-top:-10px auto 0 auto;padding:50px 10px 10px 10px;}
.layer9{position:absolute;z-index: 2;margin-top:-10px auto 0 auto;padding:50px 10px 10px 10px;}

.hack{clear:both;}

/* Z-INDEXs */
#app-top-bar-wrapper.fixed {
      /* 1043 (z-index MagnificPopup) */
      /* 1060 (z-index Twitter bootstrap popover) */
      z-index: 1061;
}
.modal {
      z-index: 1062;
}
.mfp-wrap, .mfp-bg {
      z-index:1062 !important;
}

#app-top-bar-wrapper {
    width:100%; height:70px;
    background: #f03c21; /* arancione */
    border-bottom: 3px solid #ffc000;

}
      #app-top-bar-wrapper.fixed {
            position: fixed;
            top: 0; left: 0;
      }

      #app-top-bar {
            margin:0 auto;
            width:1024px; height:70px;
            text-align:center;color:#fff;
            position:relative;
      }
      #app-top-bar-menu-btn {
            position:absolute;
            left:0; top:0;
            width:70px; height:70px; line-height: 70px;
            font-size: 33px;
            color:#fff;
            text-align: center;
      }

      #app-top-bar-logo {
            display: none;
            width:210px;height:54px;
            background: url(../../img/layout/logo.png) no-repeat center;
            position:absolute;
            top:8px;
            left:400px;
      }

#app-main-wrapper {
      width:1080px;height:auto;
      margin:0 auto;clear:both;
      padding-top:70px;
}
#app-main-wrapper-full {
      min-width: 1080px; /* importante per gestire render su mobile */
      width:100%;height:auto;
      padding-top:70px;
}
.app-column-lft{
      float:left;
      padding:20px;
      width/**/:520px;width:480px !important;
      height:100%;
      background:#fff;
      }
.app-column-rgt{
      float:right;
      padding:20px;
      width/**/:520px;width:480px !important;
      height:100%;
      background:#fff;
}

#footer-info{
      margin-top:33px;
      text-align: center;color:#fff;font-size:14px;text-transform:uppercase;
}

/** ==== PAGE: PAGINA MAPPA === */
#ui-map-layers-slidetoggle {
      position:absolute;top:105px;left:10px;z-index:998;
      cursor:pointer;
}

#ui-map-layers-nav {
      float:left;
}

#ui-map-layers-tree {
      display:inline-block;
      text-align:left !important;
      width:auto;padding:0 20px;margin-top:100px
}

      #ui-map-layers-search {
            margin:10px auto;
            width:100%;
      }

      #ui-map-layers-tree {
      }


      .google-map-autocomplete-element {
            width:40%;height:60px;line-height:60px;font-size:18px;
            opacity:0.70;
      }
      .google-map-autocomplete-element:hover {
            opacity:1;
      }

/** ==== ELEMENTO: Paginazione        ==== */
.app-navigation {
      border-top:1px solid #ccc;
      padding-top:30px;
}
      .app-navigation a {
            color:black !important;
      }

/** ==== ATTACHMENTS ==== */
.backend-ui-attachments .row,
.frontend-ui-attachments .row {
      margin-top:50px !important;
}

.attachment-popover {border:0;}
      .attachment-popover a { display:block; }

/* Crea box immagine fittizia che contiene un icona */
.background-ui-attachments .fake-image,
.frontend-ui-attachments   .fake-image
{
      text-align:center;
      background-color:whitesmoke;
      height:150px
}

      /* Allineamento icona Fontello al centro di .fake-image */
      .background-ui-attachments .fake-image i.icon-vertical-align,
      .frontend-ui-attachments   .fake-image i.icon-vertical-align
      {
            position: relative;
            top: 30px;
      }

.backend-ui-attachments  .thumbnail,
.frontend-ui-attachments .thumbnail
{
      height:250px;
}
      /* Colori thumbnail a seconda dello stato */
      .backend-ui-attachments .attachment-expired .thumbnail {
            border-color:red !important;
      }
      .backend-ui-attachments .attachment-expiring .thumbnail {
            border-color:#faebcc !important;
      }
      .backend-ui-attachments .attachment-valid .thumbnail {
            border-color:#d6e9c6 !important;
      }



      .backend-ui-attachments .thumbnail i,
      .frontend-ui-attachments .thumbnail i
      {
            font-size: 55px;
      }

      .backend-ui-attachments .thumbnail .caption,
      .backend-ui-attachments .thumbnail .caption
      {
            text-align:center;
            text-decoration:none;
      }

/* ==== PAGE: LoS+RLB ==== */
.sprite-direction {
      background: url("/../img/layout/direction-sprite.png") no-repeat top left;width: 200px; height: 122px;
      /* common */
      vertical-align: middle;
      text-align: center;
      display: table-cell;

      color:#fff;
      font-size: 40px;
}

      .sprite-direction.icon-direction-from { background-position: 0 0; }
      .sprite-direction.icon-direction-to { background-position: 0 -132px; }

.direction-distance {
      display:inline-block;text-align:center;width:100%;
      color:#000;font-size:40px !important;
}

.losLegend{text-transform:uppercase;color:#ccc;text-align:right;font-size:20px;}
.losData{color:#000;text-align:center;font-size:30px;}


/* ==== FORMS COMPONENTS ===== */
.app-elm-wrapper{
      width/**/:1080px;width:1060px !important;
      position:relative;
}
      .app-elm-col {
            display:inline-block !important;
            height:100%;

            margin-left:-10px;

            /*
            Allinea elemento in alto: Utilizzato per allineare l'elemento

            Per evitare:
            https://www.dropbox.com/s/dsfboltoybe8hip/Screenshot%202016-04-26%2014.25.51.png?dl=0
            */
            vertical-align: top;

            /* Serve per posizionare gli inputs tramite margin:0 auto; */
            position:relative;top:0;left:0;
      }


            div[class*="app-elm-col-"]::before {
                  /* I div devono avere sempre un contenuto: altrimenti non viene applicato il width, e il float sovrappone gli elementi */
                  content:"";
                  border:0.000000000000001px solid transparent;
            }

            /* Utilizzato anche nelle tabelle, non inserire altre proprietà eccetto width */
            .app-elm-col-25-perc {width:25%;}


            .app-elm-col-100-perc {width:100%;min-width:100%;}
            .app-elm-col-90-perc {width:90%;min-width:90%;}
            .app-elm-col-80-perc {width:80%;min-width:80%;}
            .app-elm-col-70-perc {width:70%;min-width:70%;}
            .app-elm-col-60-perc {width:60%;min-width:60%;}
            .app-elm-col-50-perc {width:50%;min-width:50%;}
            .app-elm-col-40-perc {width:40%;min-width:40%;}
            .app-elm-col-30-perc {width:30%;min-width:30%;}
            .app-elm-col-20-perc {width:20%;min-width:20%;}
            .app-elm-col-10-perc {width:10%;min-width:10%;}

            div[class*="app-elm-col-"] input,
            div[class*="app-elm-col-"] select
            {
                  display:flex !important; /* utile per allineare il blocco al centro tramite margin */
                  margin:0 auto !important;

                  width:80% !important;
                  text-align:center !important;
            }

      .app-elm {
            width:1000px;
            margin: 0 auto 40px auto;
            clear:both;
      }

            .app-elm-txt-spacer100{float:left;height:30px;width:100px;}

            .app-elm-table {
                  margin:0 auto;min-width:1000px;
                  font-size:26px;text-align:left;border-collapse: collapse;
            }

                  .app-elm-table th {
                        font-weight: bold;
                        text-align:left;font-size: 26px;color:#000;

                        border-top:1px solid #ccc;padding: 20px;
                  }
                        .app-elm-table th a:link,
                        .app-elm-table th a:visited
                        {
                              text-decoration: none; color:#f03c21;
                        }

                  .app-elm-table th a:hover  {color:#333;}
                  .app-elm-table th a:active {color:#000;}


                  .app-elm-table td {
                        border-top:1px solid #ccc;
                        padding: 20px;
                  }


                  .icn {
                        font-size:40px;
                        display:inline-block;
                        text-decoration:none !important;
                  }

                  a.icn:link, a.icn:visited {color:#f03c21;}
                  a.icn:hover{color:#333;}
                  a.icn:active{color:#000;}

                        /* Testo descrittivo sotto a.icn (preso dal tag title) */
                        a.icn:after {
                              display: block;
                              content:attr(title);
                              text-align:center;
                              font-size:15px;
                              padding:0 2px;
                        }


            .top-padding-30{padding-top:30px}
            .top-padding-50{padding-top:50px}
            .top-liner{border-top:1px solid #000;}

            .bkgrnd-dark{background:#969696;-webkit-box-shadow: 0px 10px 10px 0px rgba(50, 50, 50, 0.75);-moz-box-shadow:0px 10px 10px 0px rgba(50, 50, 50, 0.75);box-shadow:0px 10px 10px 0px rgba(50, 50, 50, 0.75);}
            .bkgrnd-middle{background:#ccc;-webkit-box-shadow: 0px 10px 10px 0px rgba(50, 50, 50, 0.75);-moz-box-shadow:0px 10px 10px 0px rgba(50, 50, 50, 0.75);box-shadow:0px 10px 10px 0px rgba(50, 50, 50, 0.75);}
            .bkgrnd-light{background:#fff;-webkit-box-shadow: 0px 10px 10px 0px rgba(50, 50, 50, 0.75);-moz-box-shadow:0px 10px 10px 0px rgba(50, 50, 50, 0.75);box-shadow:0px 10px 10px 0px rgba(50, 50, 50, 0.75);}

.app-h1 {
      display: block;
      text-align: center;
      color: #fff;
      font-size: 26px;
      text-transform: uppercase;
      line-height: 26px;
      height: 26px;
      width: 100%;
      margin-bottom: 20px;
}

/* ==== APP COMPONENT: ALERTS ==== */
.app-alert {
      display:block;
      padding: 20px;
      text-align: center;
      text-transform: uppercase;
      color: #fff;
}

.app-alert-success {
      background-color: #0CC;
}
.app-alert-info {
      background-color: #288ED6;
}
.app-alert-error {
      background-color: red;
}

.app-alert-warning {
      background-color: #f90;
}

/* ==== FORM COMPONENTS ==== */
div.required label:not(.app-btn-upload):before {
     content:'*  ';
     font-size:22px;
     color:red;
     padding-left:5px;
}

.bkgrnd-light       div[class^="app-elm"] *[disabled],
.bkgrnd-middle      div[class^="app-elm"] *[disabled],
.bkgrnd-dark        div[class^="app-elm"] *[disabled],
.bkgrnd-transparent div[class^="app-elm"] *[disabled],

.bkgrnd-light       div[class^="app-elm"] *[readonly],
.bkgrnd-middle      div[class^="app-elm"] *[readonly],
.bkgrnd-dark        div[class^="app-elm"] *[readonly],
.bkgrnd-transparent div[class^="app-elm"] *[readonly]
{
      background-color:white !important;
      border:0 !important;
}

.bkgrnd-dark        div[class^="app-elm"] label,
.bkgrnd-transparent div[class^="app-elm"] label
{
      display:block;
      text-align:center;color:#fff;font-size:26px;text-transform:uppercase;line-height:26px;
      height:26px;width:100%;
      margin-bottom:20px;
}

.bkgrnd-light  div[class^="app-elm"] label,
.bkgrnd-middle div[class^="app-elm"] label
{
      display:block;
      text-align:center;color:#33b6c9;font-size:26px;text-transform:uppercase;line-height:26px;
      height:26px;width:100%;
      margin-bottom:20px;
}
.bkgrnd-light       div[class^="app-elm"] input,
.bkgrnd-middle      div[class^="app-elm"] input,
.bkgrnd-dark        div[class^="app-elm"] input,
.bkgrnd-transparent div[class^="app-elm"] input
{
      background:#fff;
      border:1px solid #000;
      width:960px; height:70px;
      font-size:33px;text-align:center;color:#000;
      -webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;
}
.bkgrnd-light       div[class^="app-elm"] select,
.bkgrnd-middle      div[class^="app-elm"] select,
.bkgrnd-dark        div[class^="app-elm"] select,
.bkgrnd-transparent div[class^="app-elm"] select
{
      background:#fff;
      border:1px solid #000;
      width:960px; height:70px;
      font-size:33px;text-align:center;color:#000;
      -webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;
}

.bkgrnd-light       div[class^="app-elm"] textarea,
.bkgrnd-middle      div[class^="app-elm"] textarea,
.bkgrnd-dark        div[class^="app-elm"] textarea,
.bkgrnd-transparent div[class^="app-elm"] textarea
{
      background:#fff;
      border:1px solid #000;
      width:960px; height: 300px;
      font-size:33px;text-align:left;color:#000;
      -webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;
}


.bkgrnd-dark        div[class^="app-elm-fluid"] label,
.bkgrnd-transparent div[class^="app-elm-fluid"] label
{
      display:inline-block;
      width: 100%;
}

.bkgrnd-light  div[class^="app-elm-fluid"] label,
.bkgrnd-middle div[class^="app-elm-fluid"] label
{
      display:inline-block;
      width: 100%;
}
.bkgrnd-light       div[class^="app-elm-fluid"] input,
.bkgrnd-middle      div[class^="aapp-elm-fluid"] input,
.bkgrnd-dark        div[class^="app-elm-fluid"] input,
.bkgrnd-transparent div[class^="app-elm-fluid"] input
{
      display:inline-block;
      width: 100%;
}

.bkgrnd-light       div[class^="app-elm-fluid"] select,
.bkgrnd-middle      div[class^="app-elm-fluid"] select,
.bkgrnd-dark        div[class^="app-elm-fluid"] select,
.bkgrnd-transparent div[class^="app-elm-fluid"] select
{
      display:inline-block;
      width: 100%;
}

.bkgrnd-light       div[class^="app-elm-fluid"] textarea,
.bkgrnd-middle      div[class^="app-elm-fluid"] textarea,
.bkgrnd-dark        div[class^="app-elm-fluid"] textarea,
.bkgrnd-transparent div[class^="app-elm-fluid"] textarea
{
      display:inline-block;
      width: 100%;
}



      .app-elm fieldset,
      .app-elm-wrapper fieldset {
            border:0;
      }

      .app-elm fieldset legend,
      .app-elm-wrapper fieldset legend {
            color:#0CC;font-size:33px;text-align:center;text-align: center;
            display:inline-block;width:100%;
            margin-bottom:40px;
      }

      /* Checkboxes: label a lato */
      .app-elm > input[type=checkbox] {
            width:auto !important;height:auto !important;
            padding:20px;
            display:inline-block;
      }
      .app-elm > input[type=hidden] + input + label {
            width:auto;
            color:#CCC;
            text-align: left;
            display: inline;
            font-size: 26px;
            padding-left:30px;
            margin-bottom: 25px;
      }

input.parsley-error,
textarea.parsley-error
{
      /* Annulla "margin-bottom" su INPUT */
      margin-bottom: 10px !important;
}
.error-message, .parsley-errors-list li {
      color:red;font-weight:bold;text-align:center;text-transform:uppercase;
      font-size:18px;
}

.parsley-errors-list li {
      list-style-type:none;
}

/* ==== APP BUTTONS ==== */
.app-btn {

}

      /* Colorazione bottone in base a contesto */
      .app-btn:hover,
      .app-btn-rectangular:hover,
      .app-btn-rectangular-small:hover
      {
            box-shadow:0px 0px 15px 0px rgba(240, 60, 33, 0.75);
                  -webkit-box-shadow:0px 0px 15px 0px rgba(240, 60, 33, 0.75);
                  -moz-box-shadow:0px 0px 15px 0px rgba(240, 60, 33, 0.75);
            border:1px solid #fff;
      }

      .app-btn:active,
      .app-btn-rectangular:active,
      .app-btn-rectangular-small:active{
            background:#000;
      }

      .app-btn-default,
      .app-btn-secondary
      {
            background-color:#00aeef !important;
            border-color: #00aeef !important;
      }

      .app-btn-default:hover,
      .app-btn-secondary:hover
      {
            box-shadow:0px 0px 15px 0px rgba(0, 174, 239, 0.75) !important;
                  -webkit-box-shadow:0px 0px 15px 0px rgba(0, 174, 239, 0.75) !important;
                  -moz-box-shadow:0px 0px 15px 0px rgba(0, 174, 239, 0.75) !important;
            border-color:#00aeef !important;
      }

/* Tipologia bottoni */
.app-btn-block {
      display:block;
      vertical-align:middle;
}

.app-btn-rectangular {
      background:#f03c21;
      border:1px solid #000;
      width:100%;height:80px;line-height:80px;
      font-size:33px;text-align:center;text-transform:uppercase;color:#fff !important;
      -webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;
      margin:50px 0px;
      display:block;
}

    .app-btn-rectangular-small {
          width:300px;height:70px;line-height:70px;
          font-size:22px;
          margin:20px auto;
    }

      a.app-btn-rectangular, a.app-btn-rectangular-small {
            display:block;
            text-decoration:none;
      }

      .app-btn-rectangular-inline {
            display:inline-block;
            width: 49%;
            margin-left:0;
            margin-right:0;
      }

      /** Da utilizzare con .app-btn-rectangular */
      label.app-btn-upload {
            height: 70px !important;
            line-height: 70px !important;
      }


      .app-btn-circle {
            border-radius: 50%;
                  -webkit-border-radius: 50%;
                  -moz-border-radius: 50%;

            display:block;
            margin:5px auto 0px auto;

            background-color: #f03c21;
            color: #fff !important;

            font-size: 40px;
            text-align:center;

            width: 60px;
            height: 60px;
            line-height: 60px;

            cursor:pointer;
      }

      .app-btn-circle.app-btn-circle-inline {
            display:inline-block;
      }


      .app-btn-circle.app-btn-circle-big {
            width: 120px;
            height: 120px;
            line-height: 120px;
            font-size: 70px;

      }

      .app-btn-circle.app-btn-circle-medium {
            width: 80px;
            height: 80px;
            line-height: 80px;
            font-size: 60px;
      }

      .app-btn-circle.app-btn-circle-small {
            width: 40px;
            height: 40px;
            line-height: 40px;
            font-size: 20px;
      }

      .app-btn-circle.app-btn-circle-tiny {
            width: 20px;
            height: 20px;
            line-height: 20px;
            font-size: 10px;
      }

      /* app-btn-circle tramite UiHelper::btnCircle */
      div.app-btn-circle-wrapper-inline {
            float:left;
            text-align:center;
            margin-right:20px;
      }
            div.app-btn-circle-wrapper-inline + .app-btn-circle {
                  margin:0 auto;
            }

            div[class^="app-btn-circle-wrapper"] > a[class^=".app-btn-circle-"] + span {
                  text-transform: uppercase;
            }

            /* TODO @cristcan: assegnare font-size per tutte le classi che definiscono la misura del testo */
            div[class^="app-btn-circle-wrapper"] > .app-btn-circle-small + span {
                  font-size:16px !important;
            }
            div[class^="app-btn-circle-wrapper"] > .app-btn-circle-medium + span {
                  font-size:20px !important;
            }

.app-btn-squared-wrapper{
      display:inline-block;float:left;
      width:200px;height:250px;
      margin-bottom:30px;
}
      .app-btn-squared-spacer{width:200px;height:200px;float:left;}
      .app-btn-squared-spacer65{width:65px;height:200px;float:left;}

      .app-btn-squared-box {
            display: table-cell;
            vertical-align: middle;

            width:200px;height:200px;
            background:#f03c21;
            border:1px solid #000;
            -webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;
      }
            .app-btn-squared-box.app-btn-active {
                  background-color:#ccc !important;
            }

            .app-btn-squared-box:hover{
                  -webkit-box-shadow:0px 0px 15px 0px rgba(240, 60, 33, 0.75);-moz-box-shadow:0px 0px 15px 0px rgba(240, 60, 33, 0.75);box-shadow:0px 0px 15px 0px rgba(240, 60, 33, 0.75);
                  border:1px solid #fff;
            }


            .app-btn-squared-box.app-btn-active:hover {
                  box-shadow:none;
                        border:1px solid #ccc;
                        -webkit-box-shadow: none;
                        -moz-box-shadow: none;
            }


            .app-btn-squared-box:active{background:#000;}

                  .app-btn-squared-box-icon{
                        text-align: center;color:#fff;font-size:140px;line-height:140px;
                        padding: 0px;
                  }

      .app-btn-squared-txt{
            width:200px;
            margin-top:15px;
            text-align:center;font-size:22px;text-transform:uppercase;
      }




#html5shield{
      margin:20px auto;
      color:rgba(255,255,255,0.2);
      text-align:center;font-size:72px;
}

.rlb-circle {
      width:216px; height:216px;
      border-radius: 50%;
      border:5px solid;
      margin:0 auto;
      font-size: 60px;
      text-align: center;
      line-height: 216px;
}

      .rlb-circle-red {
            border-color: red;
            color: red;
      }
      .rlb-circle-yellow {
            border-color:#ffcb05;
            color:#ffcb05;
      }
      .rlb-circle-orange {
            border-color:#f3a32f;
            color:#f3a32f;
      }
      .rlb-circle-green {
            border-color:#10aa14;
            color:#10aa14;
      }

      /* CIRCLE: MARIN */
      .rlb-power-margin {
            width:120px;
            height:120px;
            font-size:32px;
            color:white;
            border:0;
            line-height:120px;
            text-align:center;
      }

      .rlb-power-margin.rlb-circle-green {
            background-color: #10aa14;
      }
      .rlb-power-margin.rlb-circle-yellow {
            background-color:#ffcb05;
      }
      .rlb-power-margin.rlb-circle-orange {
            background-color: #f7941d;
      }
      .rlb-power-margin.rlb-circle-red {
            background-color:red;
      }

nav {text-align:center;}

/* ==== COMPONENT: LEFT PANEL (MMENU) ==== */
/* Barra di ricerca in "Impianti" */

#SiteSearchForm {
      text-align: center;
}
      #SiteSearchField {
            width: 80%;
            margin: 10px auto;
      }

.mm-menu, .mm-menu > .mm-panel { z-index:999 !important; }
.mm-menu > .mm-navbar { z-index:1000 !important; }

/** Navbar: Avatar + Logout **/
.mm-navbar-bottom-1 {
      height:120px !important; /* Ogni navbar di Mmenu ha l'altezza di 40px */
}

/*
Se si aggiungono troppi links (si supera l'altezza del client) non vengono tagliete tutte le voci).
Questo perchè la navbar occupa 80px (40x2)
*/
.mm-hasnavbar-bottom-1 .mm-panel {
      bottom:80px !important;
}

/** Overrides mmenù: LEGGIBILITÀ */

.mm-panel li span,
.mm-panel li a {
      color:black !important;
}

.mm-listview, .mm-listview > li {
      font-size: 20px;
      text-align:left;
}
.mm-navbar-bottom a {
      font-size: 20px;
      line-height:120px;
}

/** Overrides mmenù: STILE */
.mm-navbar-bottom a {
      color:#f03c21 !important;
}

/* ==== COMPONENT: PAGINATION ==== */
select.pagination-limit {
      width: 472px !important;
      height: 46px !important;
      font-size: 22px !important;
      color: #3a7bb5 !important;
}


/* Helpers */
.text-muted {color:#ccc !important;}
.text-centered, .text-center {text-align:center}
.text-uppercase {text-transform:uppercase !important}
.text-bold, .bld{font-weight:bold;}

.display-none {display:none !important;}
.display-inline {display:inline;}
.display-inline-block {display:inline-block;}
.display-block {display:block !important;}

.app-panel-title {
      display: block;
      text-align: center;
      color: #09c;
      font-size: 26px;
      text-transform: uppercase;
      line-height: 26px;
      height: 26px;
      width: 100%;
      margin-bottom: 20px;
}


input.input-as-text {
      border:0 !important;
}



/** === VENDOR: SELECT 2 === */
.app-elm .select2-container,
.app-elm .select2-drop,
.app-elm .select2-search,
.app-elm .select2-search input
{
      width:960px;
      margin-bottom: 40px;
}
/* Override width per select2 inline */
.app-elm-fluid .select2-container,
.app-elm-fluid .select2-drop,
.app-elm-fluid .select2-search,
.app-elm-fluid .select2-search input
{
      width:100% !important;
      margin-bottom: 40px;
}

/* ==== PANEL IN MODAL ==== */
.modal-dialog.modal-lg .app-elm label {color:black !important}
modal-dialog.modal-lg .app-elm-wrapper {width:100% !important}

      .modal-dialog .app-elm-wrapper .app-elm {width:100% !important}
            .modal-dialog .app-elm-wrapper .app-elm label {width:82% !important}
            .modal-dialog .app-elm-wrapper .app-elm input, textarea, select {width:82% !important}
            .modal-dialog .app-elm-wrapper .select2-container {
                  width: 82% !important;
                  margin-bottom:30px;
            }

      .modal-header{
            font-size: 26px;
            text-transform: uppercase;
      }
           .modal-header button.bootbox-close-button.close{
                  font-size: 40px !important;
            }


/* ===== VENDOR: SELECT2 OVERRIDES ==== */
.select2-container .select2-choice, .select2-result-label {
  font-size: 33px;
  line-height: 70px;
  height:70px !important;
  overflow:hidden;
}

.select2-search input {
    font-size: 33px;
    line-height: 70px;
    height:70px !important;
    overflow:hidden;
}

.select2-arrow, .select2-chosen {
  font-size: 33px;
    line-height: 70px;
    height:70px !important;
}

/* =============== VENDOR: JSTREE Override ===================== */
.jstree-container-ul {
      background-color:white;
}
.jstree-icon {
      background-image: url("../../img/layout/jstree-sprite-32px.png") !important;
}
.jstree-default .jstree-clicked, .jstree-anchor {
      box-shadow: none !important;
      background:#fff !important;
}

/* Utilizzando il background-color su .jstree-anchor c'è un difetto grafico (l'icona del checkbox ha lo sfondo bianco) */
.jstree-icon {
      margin-left:-1px !important;
}
.jstree-anchor.jstree-search {
      font-style:none !important;
      color: #fff !important;
      background-color:#f03c21 !important;
      font-weight:300px;
}

/* =============== RESPONSIVE ===================== */

/* Smartphone General */
@media only screen and (min-device-width : 320px) and (max-device-width : 1024px) {

      body{min-height:1800px;}

      button[class*="btn-"] {
            width: auto;
            height: 100px;
            font-size: 33px;
      }
      legend.text-uppercase {font-size:40px;}

      #app-top-bar-wrapper {
          height:80px;

      }
            #app-top-bar {
                  height:80px; line-height:80px;
            }
            #app-top-bar-menu-btn {
                  width:80px; height:80px; line-height: 80px;
                  font-size: 60px;
            }

            #app-top-bar-logo {
                  top:15px;
            }

            #ui-map-layers-slidetoggle {
                  top:120px;
            }

            #app-main-wrapper, #app-main-wrapper-full {
              padding-top:100px;
            }

      .app-elm-wrapper div[class^="app-elm"] input {
            height: 100px; line-height: 100px;
            font-size: 40px;
      }

      .app-elm-wrapper div[class^="app-elm-fluid"] input{
             height: 30px; line-height: 30px;
            font-size: 18px;

      }

      .app-elm-table{font-size:33px;}

      .app-btn-squared-txt {font-size:30px;}
      .app-btn-rectangular {height: 100px; line-height: 100px;}

      .icn{font-size:70px;}


      .pagination-lg>li>a, .pagination-lg>li>span{
            font-size:70px;
      }



      .modal-header button.bootbox-close-button.close{
            font-size: 60px !important;
      }
}