@import "../custom-flexcss";
.canvas{
  height: 100%;
  position: relative;
  width: 100%;


  .canvas-background {
    background: #fff;
    height: 100%;
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
    overflow-y: auto;
  } 


    .canvas-grid{      

      -ms-grid-row: 1;
    -ms-grid-row-span: 4;
    grid-row: 1/5;

      -ms-grid-row: 1;
      -ms-grid-row-span: 4;
      grid-row: 1/5;
      -ms-grid-column: 1;
      -ms-grid-column-span: 3;
      grid-column: 1/4;

    }

    .canvas-logo{
      display: none;
      -ms-grid-row: 1;
      grid-row: 1;
      -ms-grid-column: 3;
      -ms-grid-column-span: 7;
      grid-column: 2/6;
    }
  

  .loginLogo{

    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-flex-basis: 1px;
    -ms-flex-preferred-size: 1px;
    flex-basis: 1px;

    .ft-tagline{

      font-size: 16px;
      line-height: 24px;
      color: #fff;
      margin: 0;
      font-weight: 400;
      text-shadow: 0px 0px 4px black;
    }
  }

  .logo-header{
    @include f-flex;
    @include f-flex-align-items-center;
    margin-bottom: 8px;

    img{
      max-height: 40px;
      width: auto;
      height: 70%;
      z-index: 2;
    } 

  }

  .canvas-panel{

    @include f-flex;
    width: 100%;

    -ms-grid-column: 1;
    -ms-grid-column-span: 23;
    grid-column: 1/13;
    -ms-grid-row: 1;
    grid-row: 1;

    @include f-flex-column;

    @include f-flex-justify-center;  
    margin: 0 auto;
  }

  .loginPanel-container{

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;


  }

  .panel-logo{  

    .ft-tagline{
      display: none;
      
    }
    
  }
  
} // end canvas

.canvas-layout {
  display: -ms-grid;
  display: grid;
  position: relative;
  -ms-grid-rows: 60px min-content minmax(min-content,1fr) minmax(35px,min-content);
  grid-template-rows: 60px -webkit-min-content minmax(-webkit-min-content,1fr) minmax(35px,-webkit-min-content);
  grid-template-rows: 60px min-content minmax(min-content,1fr) minmax(35px,min-content);
  -ms-grid-columns: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  min-height: 100%;


  >:first-child{
    -ms-grid-row: 1;
    -ms-grid-column: 1;

  }
}

.canvas-grid{

  display: block;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background: #fff;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  padding-left: 17px;
  padding-right: 14px;
  position: relative;
}

.loginPanel{
    @include f-flex;
    @include f-flex-column;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 5px 35px rgba(0,0,0,0.2);
    border-radius: 4px;
    border: 1px solid hsla(0,0%,100%,0);    
    
    min-height: 100%;
    padding: 24px 0 40px;
    position: relative;

    &:after{
      content: '';
      position: absolute;
      top: 5px;
      left: 5px;
      right: 5px;
      bottom: 5px;
      pointer-events: none;
      background: linear-gradient(to bottom, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.1) 15%, transparent 50%, transparent 85%, rgba(255,255,255,0.3) 100%);
    
    }

    
    .mat-form-field,
    .mat-form-field-infix{
      width: 100%;
    }
    .mat-form-field-suffix{
      position: absolute;
      right: 11px;
      top: 14px;

    }



    .sign-in-wrapper {
        @include f-flex;
        @include f-flex-column;
        margin-top: 20px;
        button {
          background: $label-color;
          color: #fff!important;
    
          &.btn:hover {
            background: $label-color;
            color: $white;
             box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22) !important;
          }
        }
    }

    #loading {
        background-image: url("/images/loading.gif");
        background-position: top center;
        background-repeat: no-repeat;
        height: 22px;
      }

      

    .ft-error-message{
        box-shadow: 0 3px 7px 0 rgb(0 0 0 / 25%);
        border-radius: 2px;
        font-size: 1.2em;
        font-weight: 500;
        color: #fff;
        width: 100%;
        padding: 20px 0;
        position: absolute;
        top: 0;
        z-index: 3;
        animation: fadeOut ease 15s;
        -webkit-animation: fadeOut ease 15s;
        -moz-animation: fadeOut ease 15s;
        -o-animation: fadeOut ease 15s;
        -ms-animation: fadeOut ease 15s;

        .mat-icon{
          margin-left: 10px;
        }
        
        span{
          margin: 0 auto;
          padding: 0 20px;
          line-height: 1.5rem;
        }
    }
    .error-message {          
        background-color: rgba(244, 67, 54, .75);
        
    }
    .success-message {          
        background-color:rgb(61, 199, 99, .75);
        
    }
  
      .appVersion{        
        margin-top: 10px;
        }


        .box-header{
            color: #fff;
            display: block;
            padding: 10px;            
            position: relative;
        }
    
        h5{
            padding: 0;
            margin: 0;                        
            color: var(--login-input-color);
            font-size: 24px;
            font-weight: 400;
            line-height: 1.3;
            letter-spacing: 0;
            text-transform: none;
            text-align: center;
        }
        h5 + p{
            color: var(--login-input-color);
            letter-spacing: 0.05em;
            text-align: center;
            margin: 10px auto;
            font-size: 16px;

        }
    
    
        a{
            text-decoration: none;
            color: var(--login-input-color);
            
        }
    
    
        footer{
            margin-top: 40px;
            text-align: center;
    
        }


        

.btn-social:before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 100%;
  }
  .btn-social:focus {
    outline: none;
  }
  .btn-social:active {
    box-shadow: inset 0 0 0 32px rgba(0,0,0,0.1);
  }
  
  
  /* Facebook */
  .btn-social-facebook {
    background-image: linear-gradient(#4C69BA, #3B55A0);
    background-color: #4267B2!important;
    text-shadow: 0 -1px 0 #354C8C;
  }
  .btn-social-facebook:before {
    border-right: #364e92 1px solid;
    background: url('/images/f_logo_RGB-White_58.png');
  
  }
  .btn-social-facebook:hover,
  .btn-social-facebook:focus {
    background-color: #365899;
  }
  
  
  /* Google */
  .btn-social-google {
    background: #3399ff!important;
  }
  .btn-social-google:before {
    border: #3399ff 1px solid;
    background: url('/images/btn_google_signin_light_normal_web.png');
  
  
  }
  
  .btn-social-google:hover,
  .btn-social-google:focus {
    background: #E74B37;
  }
  

}

.hr{
	height:2px;
	margin: 20px 0;
	background:rgba(255,255,255,.2);
}

.foot-lnk{
  text-align: center;
}








// login autofill
.loginPanel {
  :-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  input:-webkit-autofill,
  textarea:-webkit-autofill,
  textarea:-webkit-autofill:hover,
  textarea:-webkit-autofill:focus,
  select:-webkit-autofill,
  select:-webkit-autofill:hover,
  select:-webkit-autofill:focus {  
    -webkit-text-fill-color: #fff!important;    

  }  
}








@media screen and (min-width: 510px){  


  .canvas .logo-header{
    margin: 0;
  }

    .canvas {
      background: #f4f4f4 50%;
      background-size: cover;
      height: 100%;
  
      .canvas-background {
        background: rgba(0,0,0,.5);
      }
  
      .canvas-layout {
        -ms-grid-columns: 1fr minmax(-webkit-min-content,1280px) 1fr;
        -ms-grid-columns: 1fr minmax(min-content,1280px) 1fr;
        grid-template-columns: 1fr minmax(-webkit-min-content,1280px) 1fr;
        grid-template-columns: 1fr minmax(min-content,1280px) 1fr;
    
      } 
      
      .canvas-grid{
          -ms-grid-column: 2;
          -ms-grid-column-span: 1;
          grid-column: 2/3; 
          
        }
      
  
      .canvas-panel{
        height: 100%;
        width: 100%;
        width: 358px;
      }
  
      .loginPanel-container{
  
        padding: 16px 0;
        @include f-flex;
        @include f-flex-column;
        @include f-flex-justify-center;
  
  
      }
  
    
  
    }// end canvass

    .loginPanel {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      min-height: 480px;
      padding: 10px 0;

      box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2); 
      border-radius: 8px;
      position: relative;
      z-index: 1;
      
      overflow: hidden;

      .mat-form-field {
        width: 100%;
        min-width: 300px;
      }

      }
  
  
    .canvas-grid {
      -webkit-box-align: center;
      -webkit-align-items: center;
      -moz-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      background: rgba(0,0,0,0);
      margin: 0 auto;
      padding-left: 0;
      padding-right: 0;
  }
    
  
    
  
  
  } // end @media screen and (min-width: 510px){



    @media screen and (min-width: 1024px){
  
      .canvas{
    
        .canvas-logo{
          .logo-container{
            width: 340px;
          }
        }
        
        .loginLogo{
          @include f-flex-align-self-center;
    
          .ft-tagline{
            font-size: 20px;
            font-weight: 300;
            color: #f4f4f4;
          }
    
        }
    
        
      }// end canvas
    
      

      
      
    } // end @media screen and (min-width: 1024px){



    @media screen and (min-width: 1280px){

  
      .loginPanel {
        padding: 0;
        min-height: 404px;
    }

    .canvas .panel-logo .ft-tagline{
      display: block;
    }

    .hr{      
      margin-top: 10px;
      margin-bottom: 10px;
    }

      .canvas-grid{
        display: -ms-grid;
        display: grid;
        -ms-grid-rows: 1fr;
        grid-template-rows: 1fr;
        -ms-grid-columns: 1fr 32px 1fr 32px 1fr 32px 1fr 32px 1fr 32px 1fr 32px 1fr 32px 1fr 32px 1fr 32px 1fr 32px 1fr 32px 1fr;
        grid-template-columns: repeat(12,1fr);
        grid-gap: 0 32px;
        gap: 0 32px;
    
      }
  
      .canvas{
  
        .canvas-logo{
          display: block;
  
          .logo-container{
            @include f-flex;
  
            height: 100%;
            @include f-flex-align-items-center;
            position: relative;
            bottom: 0;
            width: 400px;
  
          }
  
          .logo-header{
            img{
              max-height: 100%;
              height: auto;
              margin-right: 16px;
              width: 100%;
              max-width: 200px;
              
            }
          }
          
        }
  
        .canvas-panel{
  
          @include f-flex-justify-center;
  
          -ms-grid-column: 13;
          -ms-grid-column-span: 9;
          grid-column: 7/12;
  
  
        }

        .panel-logo{
          display: none;
          
        }
  
  
    }// end canvas
  
    
    
  
  
  } // end @media screen and (min-width: 1280px){


    @media screen and (min-width: 1024px) and (min-height: 780px){

      .canvas{
    
        .canvas-logo{
          .logo-container{        
            position: fixed;
          }
        }
    
      }
      
    
    
    }



    @media screen and (min-width: 1768px){

      .canvas-grid{
    
        -ms-grid-columns: 1fr 40px 1fr 40px 1fr 40px 1fr 40px 1fr 40px 1fr 40px 1fr 40px 1fr 40px 1fr 40px 1fr 40px 1fr 40px 1fr;
        grid-template-columns: repeat(12,1fr);
        grid-gap: 0 40px;
        gap: 0 40px;
      }  
    
    } // end @media screen and (min-width: 1768px){