/* ==|== Checkflo styles =====================================================
   Author: Checkflo
  
   ========================================================================== */


/* =============================================================================
   Styles for Sign In
   ========================================================================== */
   

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}

#content-wrapper {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
}

#contentContainer {
  padding: 2em;
  width: fit-content;
  max-width: 90%;
}

footer {
  text-align: center;
  padding: 1em 0;
}

* {
  box-sizing: border-box;
}
#signin-wrapper{
  position: relative;
  display: block;
  padding: 0 0 40px;
  margin: 0 auto;
  max-width: 1500px;
}
.expandLine {
  margin-top: 2em;
  width: 100%;
  height: 1px; /* Define the height of the line */
  background: linear-gradient(to left, #223649, #3fb6ff, #223649);
  transform: scaleX(0); /* Start with no width */
  transform-origin: center; /* Expand from the center */
  animation: expandanimate 1.5s ease-in-out forwards;
}
#contentContainer .warning,
#contentContainer .success{
  max-width: 550px;
  margin: 1em auto;
}
input{
  width: 100%;
  padding: .6em 1em;
  border: none;
  border-radius: 4px;
  margin: .5em 0;
  opacity: 1;
  display: inline-block;
  font-size: 1.4em;
  line-height: 1.4em;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  vertical-align: middle;
}
input:hover {
  opacity: 0.85;
  text-decoration: none;
}
.btnLogo{
  display: inline-block;
  width: 100px;
  height: 30px;
  margin-right: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
}
#checkflo.btn {
  /*background-color: #52CEE6;*/
  color: #fff;
}
#checkflo.btn > i.btnLogo {
  background-image: url("../imageServer/Checkflo-Logo_Blue.png");
}
/*#qbo.btn {
  background-color: #365EBF;
  color: #fff;
}
#qbo.btn > i.btnLogo {
  background-image: url("../imageServer/qbo-app-logo-white.png");
}*/
#intuitImgBtn {
  display: block;
  margin: .5em auto;
  color: none;
  text-decoration: none;
  width: 250px;
  height: 50px;
  background-image: url("../imageServer/Sign_in_blue_btn_tall_default.svg");
  background-repeat: no-repeat;
  background-size: 250px 50px;
}
#intuitImgBtn:hover {
  color: none;
  text-decoration: none;
  background-image: url("../imageServer/Sign_in_blue_btn_tall_hover.svg");
}
#duo.btn {
  color: #fff;
}
#duo.btn > i.btnLogo {
  background-image: url("../imageServer/duo-security-vector-logo.svg");
}
#azure.btn {
  color: #fff;
}
#azure.btn > i.btnLogo {
  background-image: url("../imageServer/azure-app-logo-color.svg");
}
#entra.btn {
  color: #fff;
}
#entra.btn > i.btnLogo {
  background-image: url("../imageServer/entra-app-logo-color.png");
}
#xero.btn {
  color: #fff;
}
#xero.btn > i.btnLogo {
  background-image: url("../imageServer/xero-app-logo-white.png");
}
.btn {
  width: 100%;
  padding: .6em 1em;
  color: white;
  background: #223649;
  border-radius: 5px;
  opacity: 1;
  display: inline-block;
  font-size: 1.4em;
  line-height: 1.4em;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  vertical-align: middle;
}
.btn:hover,
.btn:active{
  text-decoration: none;
}
 a.alink{
  color: #fff;
  text-decoration: none;
}
.gradient-border {
  display: block;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.2);
  padding: 2px 2px;
  margin: 1em 0;
  background-repeat: no-repeat;
  width: 100%;
}
.gradient-border:hover {
  background: linear-gradient(60deg, #ffffff, #57c8e3, #ffffff, #223649, #57c8e3, #1098ad, #57c8e3, #ffffff);
  border-radius: 5px;
  animation: animatedgradient 5s ease-in-out alternate infinite;
  background-size: 300% 300%;
  background-repeat: repeat;
}

@keyframes animatedgradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.bt-box{
  display: block;
  clear: both;
  width: 100%;
  height: 2px;
  background-color: #1a6696;
}
.col {
  display: table-cell;
  /*width: 50%;*/
  margin: auto;
  padding: 0px;
}
  
.formRow:after {
  content: "";
  display: table;
  clear: both;
}
.c1 {
  /*border: 1px solid red;*/
  vertical-align: top;
  padding-left: 0;
  padding-right: 100px;
  max-width: 450px;
}
.c2 {
  /*border: 1px solid blue;*/
  width: 350px;
}
.c3 {
  background-color: #fff;
  border-radius: 5px;
  width: 350px;
  padding: 2em;
}
#logo-Wrap a{
  display: block;
  margin: 0;
}
.logo-Company{
  max-width: 250px;
}
#box-SignIn{
  padding: 2em;
  background-color: #ffffff;
  border-radius: 5px 5px 0 0;
}
.box-NewAccount{
  padding: 2em;
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 0 0 5px 5px;
}
.box-NewAccount:hover{
  background-color: rgba(255, 255, 255, 0.20);
}
.titleH1{
  display: block;
  text-align: center;
  margin: .5em auto;
}
.titleH1 H1{
  color: #fff;
}
.titleWrapper{
  display: block;
  margin-bottom: 40px;
}
.subText{
  color: #ffffff;
  font-size: 1em;
}
h1.signTitle{
  color: #000;
  font-size: 1.5em;
  font-weight: 500;
}
.imgDefault {
  max-width: 100%;
  height: auto;
  margin-top: 1em;
}
.imgCheckfloAppLogo{
  width: 30px;
  margin-right: 1em;
}
div.hideElement{
  display: none;
}
.getApp{
  display: block;
  padding: .5em;
  width: 100%;
  text-align: center;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.20);
  font-size: 1.4em;
  line-height: 1.4em;
  border-radius: 5px;
  text-decoration: none;
  border: 1px solid transparent;
}
a.getApp{
  color: #fff;
  text-decoration: none;
}
.getApp:hover{
  color: #fff;
  text-decoration: none;
  background-color: rgba(255, 255, 255, 0.25);
  border: 1px solid #ffffff;
}
h2.title-NewAccount{
  text-align: center;
  color: rgba(255, 255, 255, 0.50);
  font-size: 1.4em;
  line-height: 1.4em;
  margin-top: 0;
}
.forgotPwd{
  display: block;
  color: rgba(255, 255, 255, 0.7);
  width: 100%;
  font-size: 1.2em;
  margin-top: 3em;
}
.backSignIn-wrap{
  width: 100%;
  font-size: 1.3em;
}
.backSignIn:link,
a.backSignIn{
  display: block;
  padding: .5em;
  width: 100%;
  color: rgba(34, 54, 73, 0.5);
  font-size: 1.2em;
  text-decoration: none;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}
.backSignIn:hover,
.backSignIn:active{
  background-color: rgba(0, 0, 0, 0.3);
  color: rgba(34, 54, 73, 1);
}
.submitSignIn,
a.submitSignIn,
a.submitSignIn:link{
  display: block;
  border: none;
  width: 100%;
  font-size: 1.7em;
  font-weight: 500;
  color: #fff;
  background-color: #0f5187;
  padding: .5em;
  color: #fff;
  border-radius: 4px;
  margin-top: 1em;
  margin: 2em 0 1em;
  text-decoration: none;
}
.submitSignIn:hover,
.submitSignIn:active
a.submitSignIn:hover,
a.submitSignIn:active{
  background-color: #3f74be;
  text-decoration: none;
}
.collapse{
  /*border: 1px solid blue;*/
}
.collapse.default,
.collapse.xero{
  text-align: center;
  font-size: 1.5em;
  line-height: 2em;
}
.collapse h2{
  font-size: 2.1em;
  margin: 1.5em auto 1.5em;
  text-align: center;
}
.collapse.default h2{
  font-size: 2.1em;
  margin: 1.2em 0;
}
div.formRow{
  vertical-align: middle;
  margin-top: 1.5em;
}
.col-25{
  float: left;
  width: 25%;
}

.col-75{
  float: left;
  width: 75%;
}
.formRow:after {
  content: "";
  display: table;
  clear: both;
}

.collapse input[type=text], 
.collapse input[type=email],
.collapse input[type=tel],
.collapse input[type=number],
.collapse input[type=password],
.collapse select, 
.collapse textarea{
  padding: 7px;
  box-sizing: border-box;
  resize: vertical;
  margin: 0;
  background-color: #ffffff;
  border: 1px solid transparent;
  border-bottom: 1px solid #1a6696;
  border-radius: 0;
}
label{
  padding: 0;
  display: block;
  clear: both;
  color: #666;
  font-size: 1.4em;
}

/*Fix for warning box*/
div.box{
  margin: 1em auto;
}
.box-content,
.box-content::before{
  font-size: 1.5em!important;
}

span.togglePassword{
  position: relative;
  margin-top: 15px;
  margin-left: -40px;
  font-size: 1.4em;
  cursor: pointer;
  z-index: 10;
  float: right;
}

.secureSignIn{
  margin-top: 3em;
  display: block;
}

/* Edge browser has an eye for passwords but others don't so we disable it in Edge */

input[data-reveal]::-ms-reveal, 
input[data-reveal] + [aria-hidden] {
  display: none;
}

/* Hide password reveal button in MS Edge */
::-ms-reveal {
  display: none;
}

  /*Animation*/
  
div.collapse{
  animation: fadeIn 2s;
  -webkit-animation: fadeIn 2s;
  -moz-animation: fadeIn 2s;
  -o-animation: fadeIn 2s;
  -ms-animation: fadeIn 2s;
}
@keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-moz-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-o-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-ms-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@keyframes expandanimate {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.its-mobile{
  width: 100%;
  display: block;
  margin-bottom: 10px;
  clear: both;
}
@media screen and (max-width: 750px) {
  .col {
    width: 100%;
    margin-top: 0;
  }
  .col.c1,
  .col.c2{
    width: 100%;
    display: block;
  }
  .c1 {
    padding: 0;
    margin-bottom: 40px;
  }
  .col-25, .col-75, button[type=submit]{
    width: 100%;
    margin-top: 0;
    margin-bottom: .25em;
  }
  button[type=submit] {
    margin-top: 1em;
  }
  label{
    padding-bottom: 2px;
  }
  .forgotPwd,
  .secureSignIn{
    margin-top: 1em;
  }
}

/* =============================================================================
   smartphones, touchscreens
   ========================================================================== */
   
@media (any-pointer: none){
    
 .col {
    width: 100%;
    margin-top: 0;
  }
  .col.c1,
  .col.c2,
  .col.c3{
    width: 100%;
    display: block;
  }
  
  .col-25, .col-75, button[type=submit] {
    width: 100%;
    margin-top: 0;
    margin-bottom: .25em;
  }
  button[type=submit] {
    margin-top: 1em;
  }
  label{
    padding-bottom: 2px;
  }
}