html,body{
		/* background-color: #fff !important; */
		background-color: #F5F5EE !important;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
}

br{
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.footer-loading {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 6px;
	width: 100%;
	background: #318fe7;
	opacity: 0;
	/* border: 0.5px solid #000; */
}


    .bkimg{
    	position: relative;
    	height: 100%;
    	}

    .bkimg .row{
  		height: 100%;
    }


    .bkimg .row .right{
      background: url('../assets/enterprise.jpg');
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      height: 100%;
    }


  	.bkimg .row .left {
  		height: 100%;
  		padding: 2% 0% 12px 0%;
  		background: #F5F5EE;
  	 }


     .bkimg .row .left .main{
       text-align: center;
       display: block;
       margin: auto;
       width: 55%;
  		 margin-bottom: 0px;
  		 outline: none;
       position: relative;
       left: 0px;
       padding: 32px 0 0 0;
  	 }


     /* logo styling */
     .logo{
       text-align: center;
       margin: auto;
       display: block;
       width: 100%;
       margin: auto;
     	font-size: 22px;
     	font-weight: bolder;
     	color: #000;
     	cursor: pointer;
      background: url('../assets/farebin_em.png');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
     	-webkit-user-select: none;
     	-khtml-user-select: none;
     	-moz-user-select: none;
     	-o-user-select: none;
     	-ms-user-select: none;
     	user-select: none;
       margin: auto;
       height: 84px;
       width: 199px;
     	/* background: #C90; */
     	}

     .logo:hover{
     	text-decoration: none;
     	color: #000;
     	outline: none;
     	}

     .logo:focus{
     	text-decoration: none;
     	color: #000;
     	outline: none;
     	}


  	 .bkimg .row .left h1.default {
       display: block;
       margin: auto;
       width: 100%;
  		 padding-bottom: 32px;
  		 /* margin-top: 34px; */
       line-height: 42px;
   	 }

  	 .bkimg .row .left h1.default span{
  		 font-size: 33px;
   	 }


 	 .already{
 		 display: block;
 		 margin: auto;
 		 margin-top: 70px;
 		 width: 100%;
 		 /* text-align:center; */
 		 font-size: 14px;
 	 }

	 .signed_in {
		 margin-top: 8px !important;
		 font-size: 16px;
		 color: #999;
	 }

	 .auth_error {
		 color: #c3638c;
	 }

 	 .already *{
 		 display: inline;
 	 }

 	 .already a{
 		 margin-left: 1px;
 		 font-size: 14px;
  	 font-weight: normal;
 	 }



	 .loading_div {
		 position: relative;
		 margin-top: 16px;
		 height: 32px;
	 }

	 .loading {
	   position: absolute;
	   top: calc(50% - 15px);
	   left: calc(50% - 15px);
	   display: block;
	   margin: auto;
	   border: 4px solid transparent;
	   border-bottom: 4px solid #1a73e8;
	   border-left: 4px solid #1a73e8;
	   border-radius: 50%;
	   width: 30px;
	   height: 30px;
	   z-index: 999;
	   animation: spin 0.45s linear infinite;
	 }

	 @keyframes spin {
	   0% { transform: rotate(0deg); }
	   100% { transform: rotate(360deg); }
	 }









    @media (max-width:1025px) {
      .bkimg .row .left .phone_verify_step, .bkimg .row .left .main{
        display: block;
        margin: auto;
        width: 83%;
   		  margin-bottom: 0px;
   		  outline: none;
        position: relative;
        left: -4px;
        top: 21px;
   	 }

     .bkimg .row .left h1.default{
       margin-top: 44px;
     }

     .menu-host{
       right: 2px;
     }
    }






    @media (max-width:800px) {
			input {
				-webkit-user-select: text !important;
				user-select: text !important;
			}

      .bkimg .row .left .phone_verify_step, .bkimg .row .left .main{
        display: block;
        margin: auto;
        width: 64%;
   		  margin-bottom: 0px;
   		  outline: none;
        position: relative;
        left: 5px;
        top: 99px;
   	 }

     .bkimg .row .left h1.default{
       margin-top: 44px;
     }

     .menu-host{
       right: 2px;
     }
  }



  @media screen and (orientation:landscape) and (max-width:825px) {

    .bkimg .row .left .phone_verify_step, .bkimg .row .left .main{
      display: block;
      margin: auto;
      width: 64%;
      margin-bottom: 0px;
      outline: none;
      position: relative;
      left: 5px;
      top: 2px;
      padding-bottom: 70px;
   }

   .bkimg .row .right{
     background: none;
     background-color: transparent;
     height: 18%;
   }


   .menu-host{
     display: none;
   }

   .logo{
     text-align: center;
   }

   html,body{
   		background-color: #FFF !important;
   }

 }


 @media screen and (orientation:landscape) and (max-width: 736px) {

   .bkimg .row .left .phone_verify_step, .bkimg .row .left .main{
     display: block;
     margin: auto;
     width: 63%;
     margin-bottom: 0px;
     outline: none;
     position: relative;
     left: 4px;
     top: 14px;
     padding-bottom: 70px;
  }

  .bkimg .row .right{
    background: none;
    background-color: transparent;
    height: 18%;
  }

  .bkimg .row .left h1.default{
    text-align: left;
  }

  .menu-host{
    display: none;
  }

  .logo{
    text-align: left;
  }
}




@media screen and (orientation:landscape) and (max-width: 668px) {

  .bkimg .row .left .phone_verify_step, .bkimg .row .left .main{
    display: block;
    margin: auto;
    width: 82%;
    margin-bottom: 0px;
    outline: none;
    position: relative;
    left: 4px;
    top: 14px;
    padding-bottom: 70px;
 }

}



  @media (max-width:415px) {
    .bkimg .row .left .phone_verify_step, .bkimg .row .left .main{
      display: block;
      margin: auto;
      width: 85%;
      margin-bottom: 4px;
      outline: none;
      position: relative;
      left: 1px;
      top: 22px;
   }

	 .bkimg .row .left .main{
		 padding-bottom: 50px !important;
		 background: #FFF;
	 }

	 .bkimg .row .left {
     padding-bottom: 14px !important;
   }

   .bkimg .row .right{
		 display: none;
     background: none;
     background-color: #FFF;
     height: 15%;
   }

	 .already {
		 z-index: 50 !important;
		 margin-top: 31px;
	 }

   .logo{
     text-align: left;
		 margin-top: 14px;
   }

   .bkimg .row .left h1.default{
     margin-top: 28px;
     width: calc(80% + 4px);
   }

   .menu-host{
     display: none;
   }
  }




  @media (max-width: 325px) {

   .bkimg .row .left h1.default{
     font-size: 32px;
     line-height: normal;
   }

   .bkimg .row .left h1.default span{
     font-size: 28px;
   }

   span.buttonText, span.buttonText2, span.buttonText3 {
     padding-left: 12px;
   }

 }
