:root {
    --screenSize: "extra small";
    --containerSize: auto;
    --gutter: 15px;
  }
  
 /* // Small devices (landscape phones, 576px and up) */
 @media (min-width: 412px) { 
    :root {
      --screenSize: "small";
      --containerSize: 550px; 
      --containerFormulario: 300px;
      --containerImgLogo:250px ;
      --conteudoPaddingTop: 10px;
      --conteudoPaddingRight: 10px;
      
      --positionFormulario: center;
      --floatImg: center;
    }
  }

  /* // Small devices (landscape phones, 576px and up) 
  @media (min-width: 576px) { 
    :root {
      --screenSize: "small";
      --containerSize: 550px; 
      --containerFormulario: 400px;
      --containerImgLogo:300px ;
      --conteudoPaddingTop: 90px;
      --conteudoPaddingRight:10px;
      --positionFormulario: center;
      --marginLogoImgRight: 80px;
    }
  }*/
  
  /* // Medium devices (tablets, 768px and up) */
  @media (min-width: 768px) { 
    :root {
      --screenSize: "medium";
      --containerSize: 100%; 
      --containerImgLogo:300px ;
      --containerFormulario: 300px;
      --conteudoPaddingTop: 80px;
      --conteudoPaddingRight:10px;
      --positionFormulario: center;
      --marginLogoImgRight: 80px;
    }
  }
  
  /* // Large devices (desktops, 992px and up) */
  @media (min-width: 992px) { 
    :root {
      --screenSize: "large";
      --containerSize: 100%; 
      --containerImgLogo:500px ;
      --containerFormulario: 300px;
      --conteudoPaddingTop: 120px;
      --conteudoPaddingLeft:80px;
      --conteudoPaddingRight:10px;
      --positionFormulario: center;
      --marginLogoImgRight: 70px;
    }
  }
 


@media (min-width: 1400px){
    :root {
        --screenSize: "extra large";
        --containerSize: 100%;
        --containerFormulario: 500px;
        --containerImgLogo:700px;
        --conteudoPaddingTop: 180px ;
        --conteudoPaddingRight:80px;
        --positionFormulario: center;
        --marginLogoImgRight: 80px;
      }
}
    
    .conteudo{
        background-color: #7ab6e0;
        background-image: linear-gradient( to right, #e1f2ff, #048553 );
        width: var(--containerSize);
        height: 92%;
        padding-top: var(--conteudoPaddingTop);
        padding-left:var(--conteudoPaddingLeft);
        padding-right:var(--conteudoPaddingRight);
        display:flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .login_img{
        float: left;
        display:block;
        width: var(--containerImgLogo);  
        height:190px;
        background-image: url("../images/marca_soe.png");
        margin-top: 50px;
        margin-right: var(--marginLogoImgRight);
        /*margin-left: 100px;*/
        
        /*background-position: center; centraliza imagem*/
        background-size:contain;
        /*background-size: 800px 190px; ; imagem cobre toda área do div
        background-size: 150px 150px; 
        */
        background-repeat: no-repeat;

        
    }
    
    .formulario_login{
        background-color: rgb(255, 255, 255);
        width: var(--containerFormulario);
        height:fit-content;
        float:right;
        padding-left:20px;
        padding-top:80px;
        padding-right:30px;
        padding-bottom:70px;
        margin-top: 10px;
        margin-left: 25px;
        border: 1px solid rgb(209, 202, 202);
        border-radius: 10px;
       
    
    }