﻿/* [1. Landscape phones and down] -IPHONE*/

 
 
  @media (max-width: 480px) 
  {
   
   .widget-header .SearchBox
    {
         display:none;
    }
    .widget-header .SearchBtn
    {
         display:inline-block;
    }
    
    
      /* Informazioni della datatable*/
      .dataTables_info
      {
          display:block;
      }
      .dataTables_length 
      {
           display:block;
      }
      .dataTables_filter
      {
           display:block;
      }
       
       .subnavbar
       {
           display:none;
       }
       .cuscinetto
       {
           margin-top:10px;
       }
       
      		/* Force table to not be like tables anymore */
		table, thead, tbody, th, td, tr { 
			display: block; 

		}
		
		/* Hide table headers (but not display: none;, for accessibility) */
		thead tr { 
			position: absolute;
			top: -9999px;
			left: -9999px;
		}
		
		tr  
		{
		    border:0px;
		}
		
		td { 
			/* Behave  like a "row" */
			 border: none;
			 border-bottom: 1px solid #eee;
             position: relative;
             padding-left: 50%; 
            
		}
		
		.logs td:nth-of-type(1):before { content: "Livello";display:block; margin-bottom:10px; text-align:left;font-weight:bold;}
		.logs td:nth-of-type(2):before { content: "Data";display:block; margin-bottom:10px; text-align:left;font-weight:bold;}
		.logs td:nth-of-type(3):before { content: "Ora";display:block; margin-bottom:10px; text-align:left;font-weight:bold;}
		.logs td:nth-of-type(4):before { content: "Messaggio";display:block; margin-bottom:10px; text-align:left;font-weight:bold;}


        .database td:nth-of-type(1):before { content: "Opz.";display:block; margin-bottom:10px; text-align:left;font-weight:bold;}
        .database td:nth-of-type(2):before { content: "Nome istanza database";display:block; margin-bottom:10px; text-align:left;font-weight:bold;}
		.database td:nth-of-type(3):before { content: "Master database";display:block; margin-bottom:10px; text-align:left;font-weight:bold;}
        
        .tipologie td:nth-of-type(1):before { content: "Opz.";display:block; margin-bottom:10px; text-align:left;font-weight:bold;}
        .tipologie td:nth-of-type(2):before { content: "Tipologia";display:block; margin-bottom:10px; text-align:left;font-weight:bold;}

        .brands td:nth-of-type(1):before { content: "Opz.";display:block; margin-bottom:10px; text-align:left;font-weight:bold;}
        .brands td:nth-of-type(2):before { content: "Brand";display:block; margin-bottom:10px; text-align:left;font-weight:bold;}
        .brands td:nth-of-type(3):before { content: "Tipologia";display:block; margin-bottom:10px; text-align:left;font-weight:bold;}

     
           
        .sitesMaster td:nth-of-type(1):before { content: "Opz.";display:block; margin-bottom:10px; text-align:left;font-weight:bold;}
        .sitesMaster td:nth-of-type(2):before { content: "Company";display:block; margin-bottom:10px; text-align:left;font-weight:bold;}
        .sitesMaster td:nth-of-type(3):before { content: "Nome";display:block; margin-bottom:10px; text-align:left;font-weight:bold;}
        .sitesMaster td:nth-of-type(4):before { content: "Descrizione";display:block; margin-bottom:10px; text-align:left;font-weight:bold;}

        .sites td:nth-of-type(1):before { content: "Company";display:block; margin-bottom:10px; text-align:left;font-weight:bold;}
        .sites td:nth-of-type(2):before { content: "Nome";display:block; margin-bottom:10px; text-align:left;font-weight:bold;}
        .sites td:nth-of-type(3):before { content: "Descrizione";display:block; margin-bottom:10px; text-align:left;font-weight:bold;}
        .sites td:nth-of-type(4):before { content: "Devices";display:block; margin-bottom:10px; text-align:left;font-weight:bold;}
        .sites td:nth-of-type(5):before { content: "Azioni";display:block; margin-bottom:10px; text-align:left;font-weight:bold;}
        
        .tabular td:nth-of-type(1):before { content: "Opz.";display:block; margin-bottom:10px; text-align:left;font-weight:bold;}
        .tabular td:nth-of-type(2):before { content: "Descrizione";display:block; margin-bottom:10px; text-align:left;font-weight:bold;}
        .tabular td:nth-of-type(3):before { content: "Valore";display:block; margin-bottom:10px; text-align:left;font-weight:bold;}
        .tabular td:nth-of-type(4):before { content: "Um.";display:block; margin-bottom:10px; text-align:left;font-weight:bold;}
        .tabular td:nth-of-type(5):before { content: "Grafico";display:block; margin-bottom:10px; text-align:left;font-weight:bold;}
        
        .users td:nth-of-type(1):before { content: "Cognome";display:block; margin-bottom:10px; text-align:left;font-weight:bold;}
		.users td:nth-of-type(2):before { content: "Nome";display:block; margin-bottom:10px; text-align:left;font-weight:bold;}
		.users td:nth-of-type(3):before { content: "Username";display:block; margin-bottom:10px; text-align:left;font-weight:bold;}
		.users td:nth-of-type(4):before { content: "Ultimo Accesso";display:block; margin-bottom:10px; text-align:left;font-weight:bold;}
		.users td:nth-of-type(5):before { content: "Ruolo";display:block; margin-bottom:10px; text-align:left;font-weight:bold;}
        .users td:nth-of-type(6):before { content: "Abilitato";display:block; margin-bottom:10px; text-align:left;font-weight:bold;}
        
        .plants td:nth-of-type(1):before { content: "Opz.";display:block; margin-bottom:10px; text-align:left;font-weight:bold;}
		.plants td:nth-of-type(2):before { content: "Nome";display:block; margin-bottom:10px; text-align:left;font-weight:bold;}
		.plants td:nth-of-type(3):before { content: "Company";display:block; margin-bottom:10px; text-align:left;font-weight:bold;}
		.plants td:nth-of-type(4):before { content: "Brand";display:block; margin-bottom:10px; text-align:left;font-weight:bold;}
		.plants td:nth-of-type(5):before { content: "Locazione";display:block; margin-bottom:10px; text-align:left;font-weight:bold;}
        .plants td:nth-of-type(6):before { content: "Attivo";display:block; margin-bottom:10px; text-align:left;font-weight:bold;}

        
        .InLineOutLine td:nth-of-type(1):before { content: "Plant";display:block; margin-bottom:10px; text-align:left;font-weight:bold;}
		.InLineOutLine td:nth-of-type(2):before { content: "Device #";display:block; margin-bottom:10px; text-align:left;font-weight:bold;}
		.InLineOutLine td:nth-of-type(3):before { content: "Ultimo Aggiornamento";display:block; margin-bottom:10px; text-align:left;font-weight:bold;}
		.InLineOutLine td:nth-of-type(4):before { content: "Stato";display:block; margin-bottom:10px; text-align:left;font-weight:bold;}
		
        .counters td:nth-of-type(1):before { content: "Opz.";display:block; margin-bottom:10px; text-align:left;font-weight:bold;}
		.counters td:nth-of-type(2):before { content: "Codice";display:block; margin-bottom:10px; text-align:left;font-weight:bold;}
		.counters td:nth-of-type(3):before { content: "Nome";display:block; margin-bottom:10px; text-align:left;font-weight:bold;}
		.counters td:nth-of-type(4):before { content: "Brand";display:block; margin-bottom:10px; text-align:left;font-weight:bold;}
		.counters td:nth-of-type(5):before { content: "Proprieta'";display:block; margin-bottom:10px; text-align:left;font-weight:bold;}

        .FileExplorer td:nth-of-type(1):before { content: "Nome";display:block; margin-bottom:10px; text-align:left;font-weight:bold;}
		.FileExplorer td:nth-of-type(2):before { content: "Dimensione";display:block; margin-bottom:10px; text-align:left;font-weight:bold;}
		.FileExplorer td:nth-of-type(3):before { content: "Data Creazione";display:block; margin-bottom:10px; text-align:left;font-weight:bold;}
		.FileExplorer td:nth-of-type(4):before { content: "Data Modifica";display:block; margin-bottom:10px; text-align:left;font-weight:bold;}

        .Calcoli td:nth-of-type(1):before { content: "Opz.";display:block; margin-bottom:10px; text-align:left;font-weight:bold;}
        .Calcoli td:nth-of-type(2):before { content: "Company";display:block; margin-bottom:10px; text-align:left;font-weight:bold;}
		.Calcoli td:nth-of-type(3):before { content: "Device";display:block; margin-bottom:10px; text-align:left;font-weight:bold;}
		.Calcoli td:nth-of-type(4):before { content: "Descrizione";display:block; margin-bottom:10px; text-align:left;font-weight:bold;}
		

       .well .SearchBoxMobile {
    width: 80%;
} 
        
  }
  @media (min-width: 481px)
  { 
       .well .SearchBoxMobile {
     width: 80%;
   }
    .widget-header .SearchBox
    {
         display:none;
    }
    .widget-header .SearchBtn
    {
         display:inline-block;
    } 
       .subnavbar
       {
           display:none;
       }
      .cuscinetto
       {
           margin-top:20px;
       }
  }
 
/* [2. Landscape phone to portrait tablet] LENCO VERTICALE*/
  @media (max-width: 767px)
  {
      .nav-tabs > li > a, .nav-pills > li > a {
    margin-right: 2px;
    padding-left: 6px;
    padding-right: 6px;
}
    .well .SearchBoxMobile {
     width: 92%;
   }
   .widget-header .SearchBox
    {
         display:none;
    }
    .widget-header .SearchBtn
    {
         display:inline-block;
    }
    .subnavbar {
        margin-left: -20px;
        margin-right: -20px;    
        
    }
    
    
    .subnavbar-inner {
        height: auto;
       
    }
    
    .subnavbar .container > ul {
        width: 100%;
        height: auto;
        
        border: none;
        
    }
    
    .subnavbar .container > ul > li {
        width: 33%;
        height: 70px;
        margin-bottom: 0;
        
        border: none;
    }
    
    
    
    .subnavbar .container > ul > li.active > a {
        font-size: 11px/1.6em;
        background: transparent;
    }
    
    .subnavbar .container > ul > li > a > i {   
        display: inline-block;  
        margin-bottom: 0;
        
        font-size: 20px/1.8em;
    }
    
    
    .subnavbar-open-right .dropdown-menu {
        left: auto;
        right: 0;
    }
    
    .subnavbar-open-right .dropdown-menu:before {
        left: auto;
        right: 12px;
    }
    .subnavbar-open-right .dropdown-menu:after {
        left: auto;
        right: 13px;
    }
    
    .extra {
        margin-right: -20px;
        margin-left: -20px;
    }
    
    .extra .container {
        padding: 0 20px;
    }
    
    .footer {
        margin-right: -20px;
        margin-left: -20px;
    }
    
    .footer .container {
        padding: 0 20px;
    }
    
    .footer .footer-terms {
        text-align: left;
    }
    
    .footer .footer-terms a {
        margin-left: 0;
        margin-right: 1em;
    }

      #Grafico modal-body  {
      height: 380px;
    }

    .highchart
    {
        width:500px;
    }
    


  }

 
/* [3. Portrait tablet to landscape and desktop] IPAD VERTICALE*/
  @media (min-width: 768px) and (max-width: 979px) 
  {
      .nav-tabs > li > a, .nav-pills > li > a {
    margin-right: 2px;
    padding-left: 6px;
    padding-right: 6px;
}
   .well .SearchBoxMobile {
     width: 93%;
   }
    .widget-header .SearchBox
    {
         display:none;
    }
    .widget-header .SearchBtn
    {
         display:inline-block;
    }
    .subnavbar
    {
        display:none;
    }
  
    .cuscinetto
    {
        margin-top:10px;
    }
      
    .navbar-fixed-top {
        position: static;
        margin-bottom: 0;
    }
  
    .subnavbar 
    {
        margin-top:0px;
    }
    
    .subnavbar .container {     
        width: auto;
    }
    
    .subnavbar-collapse {
         clear: both;
    }
  
    .subnavbar-collapse .nav {
         float: none;
         margin: 0 0 9px;
    }
  
    .subnavbar-collapse .nav > li {
         float: none;
    }
  
    .subnavbar-collapse .nav > li > a {
         margin-bottom: 2px;
    }
  
    .subnavbar-collapse .nav > .divider-vertical {
         display: none;
    }
    
    .subnavbar-collapse .nav .nav-header {
         color: #999999;
         text-shadow: none;
    }
  
    .subnavbar-collapse .nav > li > a,
    .subnavbar-collapse .dropdown-menu a {
         padding: 6px 15px;
         font-weight: bold;
         color: #999999;
         -webkit-border-radius: 3px;
         -moz-border-radius: 3px;
         border-radius: 3px;
    }
    
    .subnavbar-collapse .btn 
    {
         padding: 4px 10px 4px;
         font-weight : normal;
         -webkit-border-radius: 4px;
         -moz-border-radius: 4px;
         border-radius: 4px;
    }

   

  

    .highchart
    {
        width:600px;
    }

    #Grafico .modal-body  {
      max-height: 440px;
    }
    #Grafico {
        width: 700px; /* SET THE WIDTH OF THE MODAL */
        margin: 0px 0 0 -350px; /* CHANGE MARGINS TO ACCOMODATE THE NEW WIDTH (original = margin: -250px 0 0 -280px;) */
    }
    
  }
 
 @media (min-width: 980px)  
 {
  .well .SearchBoxMobile {
     width: 93%;
   }

    .widget-header .SearchBtn
    {
         display:none;
    } 
    .widget-header .SearchBox
    {
         display:inline-block;
    }
    
  
    
    .subnavbar
    {
         display:block !important;
    }
   
    .cuscinetto
    {
         margin-top:0px;
    }

    .navbar .mybtn-navbar
    {
         display:none;
    }
    
   .subnavbar 
    {
         margin-top:42px;
    }

    

     

    #Grafico .modal-body  {
      max-height: 440px;
    }

    #Grafico {
        
        width: 900px; /* SET THE WIDTH OF THE MODAL */
        margin: 0px 0 0 -450px; /* CHANGE MARGINS TO ACCOMODATE THE NEW WIDTH (original = margin: -250px 0 0 -280px;) */
    }
   
}
 
/* [4. Large desktop] */
  @media (min-width: 1200px) 
  {
   

   
    .widget-header .SearchBtn
    {
         display:none;
    }
    .widget-header .SearchBox
    {
         display:inline-block;
    }
    .navbar .mybtn-navbar
    {
         display:none;
    }


    
    #Grafico .modal-body  {
      max-height: 440px;
    }

    #Grafico {
        width: 800px; /* SET THE WIDTH OF THE MODAL */
        margin: 0px 0 0 -400px; /* CHANGE MARGINS TO ACCOMODATE THE NEW WIDTH (original = margin: -250px 0 0 -280px;) */
    }

  .pull-right 
  { 
      float: right;

  }
 
  }








