#login{
     position: fixed;
     display: inline-block;
     
     width:  calc(100% - 32px);
     height: calc(100% - 32px);

     max-width: 900px;

     overflow: hidden;   


     margin-top: 16px;
     bottom: -110vh;

     background-color: $c-w;
     overflow-y: scroll;

     opacity: 1;

     @include bs-4;
     @include align-center;
     
     z-index: 210;  
     //border: 3px solid red;               //←←←←←←←←←←←←←←←←←←←←
 
    & .contLeft{
      position: relative;
      display: inline-block;
      top: 0px;

      float: left;
      height: 100%;
      width: 50%;
      
      // padding-left: 8px;
      // padding-right: 8px;

      background: #FAFCFE;
      //@include bs-4;


       & .logo  { 
         position: absolute;
         display: inline-block;
         width:  100px;
         height: 100px;
         bottom: 8px;
         left: 8px;


          background:          url('svg/illustrations/gosive-logo-gradiente.svg');
          background-size:     100% auto   !important;
          background-position: center !important;
          background-repeat:   no-repeat !important;


           @include centerTransform;

         // border: 0.3px solid red;               //←←←←←←←←←←←←←←←←←←←←

      }


      & .title {  
        position: relative;
        display: block;
        width: 100%;
        margin-top: 16px;
        @include font(h6, $c-pd); 
        text-align: left;
        padding-left: 12px;

        //border: 0.3px solid purple;               //←←←←←←←←←←←←←←←←←←←←
      }

      & .login_title {  
        position: relative;
        display: block;
        width: 100%;
        margin-top: 16px;
        font-size: 30px;
        font-weight: 600;
        color: #000;
        text-align: center;
        //border: 0.3px solid purple;               //←←←←←←←←←←←←←←←←←←←←
      }

      & .login_desc {  
        position: relative;
        display: block;
        width: 100%;
        font-size: 18px;
        color: #000;
        text-align: center;
        //border: 0.3px solid purple;               //←←←←←←←←←←←←←←←←←←←←
      }

      & .desLeft   { 
        position: relative;
        display: block;

        margin-top: 8px;
        padding-left: 12px;
        padding-right: 12px;

        @include font(body2, $c-b); 
        text-align: center;
        //border: 0.3px solid red;               //←←←←←←←←←←←←←←←←←←←←
     }      


       & .illus  { 
         position: relative;
         display: block;
         width:  calc(100% +  0px);
         height: 500px;
         margin-top: 32px;
         left: 0px;


          background:          url('svg/illustrations/welcome.svg');
          background-size:     100% auto   !important;
          background-position: center !important;
          background-repeat:   no-repeat !important;

         // border: 0.3px solid red;               //←←←←←←←←←←←←←←←←←←←←

      }

     // border: 0.1px solid blue;               //←←←←←←←←←←←←←←←←←←←←


    }

    & .contRight{
      position: relative;
      display: inline-block;
      top: 0px;
      float: left;
      height: 100%;
      width: 50%;

      padding-left: 32px;
      padding-right: 8px;


      //border: 3px solid green;               //←←←←←←←←←←←←←←←←←←←←

    }
        
      & .title {  
        position: relative;
        display: block;
        width: 100%;
        margin-top: 16px;
        @include font(h6, $c-p); 
        text-align: left;
        padding-left: 12px;

        //border: 0.3px solid purple;               //←←←←←←←←←←←←←←←←←←←←
      }


      & .des   { 
        position: relative;
        display: block;

        margin-top: 2px;
        padding-left: 12px;


        @include font(body2, $c-b); 
        text-align: left;

        //border: 0.3px solid red;               //←←←←←←←←←←←←←←←←←←←←
     }

      & .cont  { 
        position: relative;
        display:  inline-block;
        visibility: hidden;
        width: 100%;
        height: 50%;
        bottom: 0px;
        left:   0px;
        //border: 0.3px solid red;               //←←←←←←←←←←←←←←←←←←←←

           & .illus  { 
             position: relative;
             display: block;
             width:  200px;
             height: 200px;
             margin-top: 56px;


              background:          url('svg/illustrations/gosive-logo-gradiente.svg');
              background-size:     auto  100% !important;
              background-position: left !important;
              background-repeat:   no-repeat !important;

              @include centerTransform;
            // border: 0.3px solid blue;               //←←←←←←←←←←←←←←←←←←←←

          }

          & label{

            position: relative;
            display: block;
            width: 100%;
            margin-top: 8px;

            text-align: center;
            @include centerTransform;
            @include font(body2, $c-fb)            

            //border: 0.3px solid blue;               //←←←←←←←←←←←←←←←←←←←←

          }


     }/*cont*/


// <!-- src="../../../public/css/img/confirmation/login.svg" 
// src="../../../public/css/img/confirmation/login-key.svg" -->





     
}