/* CSS Document */
html{
	height:100%;
  font-size: 10px;
}
body{
  height:100%;
  /* login body */
  overflow:hidden;
}

/*login wrapper*/
.login-wrapper{
  height: 100vh;

  display: flex;
  display: -ms-flexbox;
  display: -webkit-flex;

  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

/* login top bar */
.belly-band {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 1rem;
  background: #d1dde6;
}

.belly-band .item {
  color: #002e5d;
  text-decoration: none;
  font-weight: bold;
}

.belly-band .item + .item {
  margin-left: 4rem;
}

.belly-band .item.watch-video {
  color: #bb2d36;
}

.belly-band .item.watch-video.disabled {
  color: #ccc;
}
/* Logoin Contents */
.login-content {
  flex: 1;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  align-items: stretch;
  background: linear-gradient(180deg, #F7F7F7 50%, #FFF 50%);
}

.login-content .login-left, .login-content .login-right  {
  flex: 1;
}
.login-content .login-left{
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.login-form-box {
  /*position: absolute;*/
  /*top: 50%;*/
  /*left: 10%;*/
  /*transform: translateY(-50%);*/
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 380px;
  background-color: #f0f0f0 !important;
  box-shadow: 5px 5px 10px #bbbbbb;
  border-radius: 2px;
}

.image-wrapper {
  width: 380px;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding-top: 30px;
}

.login_fleetup_logo {
  width: 56%;
  height: 56px;
  margin: 0 auto;
  background: url(../images/FleetUp3ShadowLogo.png?v=20201023) top center no-repeat;
  background-size: contain;
}

.login-form {
  width: 380px;
  padding: 5px 20px 5px 20px;
}

.login-title {
  font-weight: bold;
  text-align: center;
  color: #236192;
}

.login-input-group {
  margin-bottom: 30px !important;
}

.login-text-input {
  height: 42px;
  border-radius: 10px;
  color: #727272;
  box-shadow: 3px 3px 8px #b2b2b2;
  outline: none;
}

.login-text-input:focus {
  outline: none;
}

/* login right */
.login-content .login-right {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.login-right .slogan, .login-right .truck-diagram {
  flex: 0 0 50%;
}

.login-right .slogan {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

/* slogan */

.slogan .intro {
  flex: 0 0 57%;
  color: #000;
  margin-right: 1rem;
}

.slogan .intro-img {
  flex: 0 0 43%;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.slogan .intro-img img{
  width: 65%;
}
.intro h1, .intro h3 {
  margin: 0;
  color: #002e5d;
  font-weight: bold;
}
.intro h3{
  font-size: 2.4rem;
}
.intro h1{
  font-size: 3.6rem;
}
.intro .sub-txt {
  margin-top: 2rem;
  font-size: 1.4rem;
}
/* car box */
.login-right .truck-diagram {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.login-right .truck-diagram img {
  width: 75%;
  margin-left: 1%;
  /*opacity: 0;*/
  /*transform: translateX(80px) translateY(30px);*/
  /*animation: carEnter 2s ease-in forwards;*/
}
/* FU customer style */
[class*=fu-btn-]:focus{
    outline: none;
}
.fu-btn-success,.fu-btn-success:focus,.fu-btn-success:active,.fu-btn-success:active:hover,.fu-btn-success:active:focus{
    color: #fff;
    background-color: #eaaa00;
    box-shadow: 3px 3px 8px #b2b2b2;
    height:50px !important;
}
.fu-btn-success:hover{
    color: #fff;
    background-color: #ffbb07;
}
.fu-btn-primary,.fu-btn-primary:focus,.fu-btn-primary:active,.fu-btn-primary:active:hover,.fu-btn-primary:active:focus{
    color: #fff;
    background-color: #236192;
    box-shadow: 3px 3px 8px #b2b2b2;
}
.fu-btn-primary:hover{
    color: #fff;
    background-color: #2973ad;
    box-shadow: 3px 3px 8px #b2b2b2;
}
.loading-img{
    width: 20px;
    height: 20px;
    margin: 0 5px;
    animation: spin 2s linear infinite;
    display: none;
}
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@media screen and (min-width: 1100px)  {
  .slogan .intro-img img{
    width: 50%;
  }
}
@media screen and (min-width: 1600px)  {
  .slogan .intro-img img{
    width: 45%;
  }
}
@media screen and (min-width: 1400px)  {
  html{
    font-size: 11px;
  }
  .intro h3{
    font-size: 3.1rem;
  }
  .intro h1{
    font-size: 4.9rem;
  }
  .intro .sub-txt {
    font-size: 1.55rem;
  }
}
@media screen and (min-width: 1800px)  {
  html{
    font-size: 12px;
  }
  .login-content{
    padding: 0 8%;
  }
  .intro h3{
    font-size: 2.83333rem;
  }
  .intro h1{
    font-size: 4.5rem;
  }
  .intro .sub-txt {
    font-size: 1.4166rem;
  }
}
@media screen and (min-width: 2200px)  {
  .login-content{
    padding: 0 12%;
  }
  html{
    font-size: 13px;
  }
  .intro h3{
    font-size: 2.618rem;
  }
  .intro h1{
    font-size: 4.16rem;
  }
  .intro .sub-txt {
    font-size: 1.31rem;
  }
}
/*@media screen and (min--moz-device-pixel-ratio: 1.7),*/
/*screen and ( -webkit-min-device-pixel-ratio: 1.7), screen and (min-device-pixe1-ratio: 1.7) {*/
/*  .intro h3{*/
/*    font-size: 20px;*/
/*  }*/
/*  .intro h1{*/
/*    font-size: 28px;*/
/*  }*/
/*  .intro .sub-txt{*/
/*    font-size: 11px;*/
/*  }*/
/*  .slogan .intro-img img{*/
/*    width: 45%;*/
/*  }*/
/*  .login-left{*/
/*    transform: scale(0.8);*/
/*  }*/
/*  .belly-band{*/
/*    font-size: 10px;*/
/*    padding: 5px;*/
/*  }*/
/*}*/
/*@media screen and (min--moz-device-pixel-ratio: 2),*/
/*screen and ( -webkit-min-device-pixel-ratio: 2), screen and (min-device-pixe1-ratio: 2) {*/
/*  .intro h3{*/
/*    font-size: 16px;*/
/*  }*/
/*  .intro h1{*/
/*    font-size: 22px;*/
/*  }*/
/*  .intro .sub-txt{*/
/*    font-size: 9px;*/
/*  }*/
/*  .slogan .intro-img img{*/
/*    width: 40%;*/
/*  }*/
/*  .belly-band{*/
/*    font-size: 10px;*/
/*    padding: 5px;*/
/*  }*/

/*  .login-left {*/
/*    transform: scale(0.6);*/
/*  }*/

/*  .login-right .truck-diagram img {*/
/*    width: 60%;*/
/*  }*/
/*}*/
/*@media screen and (min--moz-device-pixel-ratio: 3),*/
/*screen and ( -webkit-min-device-pixel-ratio: 3), screen and (min-device-pixe1-ratio: 3) {*/
/*  .intro h3{*/
/*    font-size: 12px;*/
/*  }*/
/*  .intro h1{*/
/*    font-size: 16px;*/
/*  }*/
/*  .intro .sub-txt{*/
/*    font-size: 5px;*/
/*  }*/
/*  .slogan .intro-img img{*/
/*    width: 40%;*/
/*  }*/
/*  .belly-band{*/
/*    font-size: 8px;*/
/*    padding: 3px;*/
/*  }*/
/*  .login-left{*/
/*    transform: scale(0.5);*/
/*  }*/
/*  .login-right .truck-diagram img {*/
/*    width: 50%;*/
/*  }*/
/*}*/
@keyframes carEnter {
  0% { opacity: 0; transform: translateX(100px) translateY(30px); }
  100% { opacity: 1; transform: translateX(0) translateY(0); }
}