/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/
@media (min-width: 1281px) {

    .flex-content-welcome{
        margin-top: 8%;
    }
    
    .resize-welcome-img{
        width: 350px;
        height: 100%;
    }
    
    .resize-bg-print{
        height: 520px;
        overflow: auto;
    }
}

/* (1366x768) WXGA Display */
@media screen and (max-width: 1366px) {
    
    .flex-content-welcome{
        margin-top: 8%;
    }

    .resize-welcome-img{
        width: 250px;
        height: 100%;
    }
    
    .resize-bg-print{
        height: 350px;
        overflow: auto;
    }
}

/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/
@media (min-width: 1025px) and (max-width: 1281px) {
  
    .flex-content-welcome{
        margin-top: 8%;
    }

    .resize-welcome-img{
        width: 250px;
        height: 100%;
    }

    .resize-bg-print{
        height: 350px;
        overflow: auto;
    }
}

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) {
  
    .resize-welcome-img{
        width: 250px;
        height: 100%;
    } 
    
    .resize-bg-print{
        height: 350px;
        overflow: auto;
    }
}

/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  
    .resize-welcome-img{
        width: 200px;
        height: 100%;
    }

    .resize-bg-print{
        height: 350px;
        overflow: auto;
    }
}

/* Lista de trabalhos da exportacao e das medias dos trabalhos: ocupa o que sobra da tela
   (cabecalho, breadcrumb, titulo do painel e o botao de avancar somam ~324px), para o botao
   nao sair da tela. */
@media (min-width: 768px) {
    .resize-bg-export,
    .resize-bg-averages{
        height: calc(100vh - 330px);
        min-height: 240px;
        overflow: auto;
    }
}

/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/
@media (min-width: 481px) and (max-width: 767px) {
  
    .resize-welcome-img{
        width: 150px;
        height: 100%;
    }

    .resize-bg-export{
        height: 515px;
        overflow: auto;
    }
    
    .resize-bg-averages{
        height: 515px;
        overflow: auto;
    } 
    
    .resize-bg-print{
        height: 400px;
        overflow: auto;
    }
}

/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/
@media (min-width: 320px) and (max-width: 480px) {
    
    .resize-welcome-img{
        width: 150px;
        height: 100%;
    }

    .resize-bg-export{
        height: 565px;
        overflow: auto;
    }
    
    .resize-bg-averages{
        height: 565px;
        overflow: auto;
    } 
    
    .resize-bg-print{
        height: 400px;
        overflow: auto;
    }
}