/*font*/
    @font-face {
      font-family:'FSJoeyWeb';
      src:url('font/fs-joey/FSJoeyWeb-Regular.woff2') format('woff2'), url('font/fs-joey/FSJoeyWeb-Regular.woff') format('woff');
    }

    @font-face {
      font-family:'FSJoeyWeb';
      src:url('font/fs-joey/FSJoeyWeb-Italic.woff2') format('woff2'), url('font/fs-joey/FSJoeyWeb-Italic.woff') format('woff');;
      font-style: italic;
    }

    @font-face {
      font-family:'FSJoeyWeb';
      src:url('font/fs-joey/FSJoeyWeb-Light.woff2') format('woff2'), url('font/fs-joey/FSJoeyWeb-Light.woff') format('woff');
      font-weight:300;
    }

    @font-face {
      font-family:'FSJoeyWeb';
      src:url('font/fs-joey/FSJoeyWeb-LightItalic.woff2') format('woff2'), url('font/fs-joey/FSJoeyWeb-LightItalic.woff') format('woff');
      font-weight:300;
      font-style:italic;
    }

    @font-face {
      font-family:'FSJoeyWeb';
      src:url('font/fs-joey/FSJoeyWeb-LightItalic.woff2') format('woff2'), url('font/fs-joey/FSJoeyWeb-LightItalic.woff') format('woff');
      font-weight:300;
      font-style:italic;
    }

    @font-face {
      font-family:'FSJoeyWeb';
      src:url('font/fs-joey/FSJoeyCyWeb-Medium.woff2') format('woff2'), url('font/fs-joey/FSJoeyCyWeb-Medium.woff') format('woff');
      font-weight:500;
    }

    @font-face {
      font-family:'FSJoeyWeb';
      src:url('font/fs-joey/FSJoeyCyWeb-MediumItalic.woff2') format('woff2'), url('font/fs-joey/FSJoeyCyWeb-MediumItalic.woff') format('woff');
      font-weight:500;
      font-style:italic;
    }

    @font-face {
      font-family:'FSJoeyWeb';
      src:url('font/fs-joey/FSJoeyWeb-Bold.woff2') format('woff2'), url('font/fs-joey/FSJoeyWeb-Bold.woff') format('woff');;
      font-weight:700;
    }

    @font-face {
      font-family:'FSJoeyWeb';
      src:url('font/fs-joey/FSJoeyWeb-BoldItalic.woff2') format('woff2'), url('font/fs-joey/FSJoeyWeb-BoldItalic.woff') format('woff');
      font-weight:700;
      font-style:italic;
    }

    @font-face {
      font-family:'FSJoeyWeb';
      src:url('font/fs-joey/FSJoeyWeb-Heavy.woff2') format('woff2'), url('font/fs-joey/FSJoeyWeb-Heavy.woff') format('woff');
      font-weight:900;
    }

    @font-face {
      font-family:'FSJoeyWeb';
      src:url('font/fs-joey/FSJoeyWeb-HeavyItalic.woff2') format('woff2'), url('font/fs-joey/FSJoeyWeb-HeavyItalic.woff') format('woff');
      font-weight:900;
      font-style:italic;
    }


    @font-face {
      font-family: 'planet-icon-natal';
      src:  url('font/planet-icon-natal/planet-icon-natal.eot?8ybwyc');
      src:  url('font/planet-icon-natal/planet-icon-natal.eot?8ybwyc#iefix') format('embedded-opentype'),
        url('font/planet-icon-natal/planet-icon-natal.ttf?8ybwyc') format('truetype'),
        url('font/planet-icon-natal/planet-icon-natal.woff?8ybwyc') format('woff'),
        url('font/planet-icon-natal/planet-icon-natal.svg?8ybwyc#planet-icon-natal') format('svg');
      font-weight: normal;
      font-style: normal;
    }

    /* sizing */
    html, body, main                { height: 100% }                    /* CSS needs to know how to fill */
    main, header, footer, article   { width: 100%; max-width: 100% }    /* max- for cross-browser quirks */

    /* styling */
    body                            { margin: 0; padding: 0 }

    body{
      font-family:'FSJoeyWeb', sans-serif;
      color:#666;
    }

    @media only screen and (min-device-width: 320px) and (orientation:portrait)
    {
     body{
      font-size:13px;
      }
    }

    article{
      flex: 1;
      align-items: center;
      justify-content: center;
    }

    a{
      color:#323B40;
    }

    a:hover{
      text-decoration:none;
      color:#323B40;
    }

    header{
      border-bottom:1px solid #ccc;
      background-color:#ffffff !important;
      font-size:16px;
    }

    .accent{
      color:#3CB5E8 !important;
    }

    .accent:hover{
      color:#1486b6 !important;
    }

    .pointer{
      cursor:pointer;
    }

    .bg-accent{
      background-color:#3CB5E8;
    }

    .f-klavika{
      /*font-family: 'Titillium Web', sans-serif;*/
      color:#323B40;
      font-weight:900;
      /*color:#556d7a;*/
    }

    .btn-accent{
      background-color:#3CB5E8;
      color:#fff !important;
      font-size:0.9em;
      border-radius: 2em;
    }

    .btn-accent:hover{
      background-color:#1486b6;
    }

    .f-small{
      font-size:0.9em;
    }

    .f-medium{
      font-size:16px;
    }

    .f-big{
      font-size:2em;
    }

    .f-bigger{
      font-size:4em;
    }

    .progress-bar{
      height:0.6em;
      border-radius: 0.6em;
    }

    /*side*/
    .side {
      height: 100%;
      width: 95%;
      position: fixed;
      z-index: 9999;  /*INDIVIDUARE Z-INDEX ADEGUATO, IN CONFLITTO CON JQUERY SMOOTH ZOOM*/
      top: 0;
      right: -100%;
      background-color: #ffffff;
      overflow-x: hidden;
      transition: 0.5s;
      -webkit-overflow-scrolling: touch;
    }

    @media (min-width: 768px) {
      .side {
      width: 60%;
      }
    }


    .abs-l{
      position:absolute;
      top:1.3em;
      left:1.3em;
    }

    #overlay{
      position:absolute;
      top:0:
      left:0;
      height:100%;
      width:100%;
      z-index:8888; /*INDIVIDUARE Z-INDEX ADEGUATO, IN CONFLITTO CON JQUERY SMOOTH ZOOM*/
      background-color:rgba(0,0,0,0.5);
      display:none;
    }

    .top{
      line-height:1.5em;
    }

    .icon{
      width:50px;
      height:50px;
    }

    .logo{
      width:100%;
      max-width:120px;
    }

    .caption{
      font-size:0.8em;
      color:#323B40;
      margin-top:0.5em;
    }

    .smart-item{
      cursor:pointer;
    }

    .float{
      float:left;
    }

    .selectable:hover{
      background-color:#3CB5E8;
      color:#fff !important;
      cursor:pointer;
    }

    .selected{
      background-color:#3CB5E8;
      color:#fff !important;
    }

    .preview-image{
      /*background: url(img/foto/app-di-quartiere.jpg) no-repeat center center; */
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      width:100%;
      height:200px;
      background-position:center;
    }

    .attributes{
      font-size:0.8em;
      border-bottom:1px solid #ccc;
    }

    .hidden{
    display:none;
    }

  .preview-spending{
  position:absolute;
  top:33px;
  right:0;
  width:100%;
  height:1.5em;
}

    .badge{
  border:1px solid #3CB5E8;
  margin:0 auto;
  background-color:#fff;
  border-radius: 1.5em;
  font-size:0.9em;
  color:#666;
  font-weight:300;
}

.bg-warning{
  background-color:#F2C249 !important;
}

.bg-danger{
  background-color:#EA4753 !important;
}

.bg-success{
   background-color:#7EC152 !important;
}

#svg-pan-zoom-controls{
    display:none;
  }

 #mobile-div{
  width:100%;
  height:100%;
  background-color:/*#868686;*/ #b2d3d4;
 }

 .cursor{
  cursor:pointer;
 }

 /* Landscape phones and portrait tablets */
@media (min-width: 767px) {
  .m-desktop{
    margin:0 4em;
  }

  #punti{
    font-size:4em;
  }
}

      /*AZIONE PER ALLINEARE VERTICALMENTE IL MODAL*/
      .modal-dialog {
        min-height: calc(100vh - 60px);
        overflow: auto;
      }
      @media(max-width: 768px) {
        .modal-dialog {
          min-height: calc(100vh - 20px);
        }
      }

      .modal-content{
        border-radius:1em;
      }

      .modal-header{
        border-bottom:none;
      }

      .modal-body{
        font-weight:300;
      }

      .form-control{
        border:none;
        border-radius:0;
        border-bottom:1px solid #3CB5E8 !important;
        padding:0 !important;
        margin:1em 0 0 0;
      }

      label.error{
        color: #EA4753 !important;
        font-size:0.8em;
      }

      .evidence{
      background-color:rgba(24,71,91,0.2);
      }