.login-div
{
    display: grid;
    grid-gap: 2rem;
    /* width: 400px;
    max-width: 100%; */
}

.login-form
{
    display: grid;
    /*grid-gap: 1rem;*/
    padding: 2rem;
    /*min-height: 244px;*/
}

.login-grid{
    display: grid;
    grid-gap: 1rem;
}

/* ct-btn styles starts */
.login-div [class*='ct-btn-'],
.login-div .ct-btn-base
{
    display: inline-block;
    position: relative;
    height: auto;
    margin: 0;
    border: none;
    outline: 0;
    cursor: pointer;
    box-shadow: none;

    text-align: center;
    letter-spacing: .03rem;

    padding: .5rem .7rem;
    border-radius: .2rem;

    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;

    -webkit-tap-highlight-color: transparent;

    fill: var(--DefaultTextColor);
    color: var(--DefaultTextColor);
    background-color: transparent;
}


.login-div .ct-btn-hero{
    fill: #ffffff;
    color: #ffffff;
    background-color: var(--BrandColor1);
}
.login-div .ct-btn-hero:after {
    background-color: #FFFFFF!important;
}
.login-div .ct-btn-hero:active:after, .login-div .ct-btn-white:active:after {
    opacity: .3!important;
}

.login-div .ct-btn-white{
    color: var(--BrandColor1);
    background-color: #ffffff;
}
.login-div .ct-btn-white:after {
    background-color: #000000!important;
}

.login-div [class*='ct-btn-'] *
{
    pointer-events: none;
}

.login-div [class*='ct-btn-']:after
{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 3px;
    background-color: #000000;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease-in-out, visibility 0s .3s;
}
.login-div [class*='ct-btn-']:active:after
{
    transition: opacity .2s ease-in-out, visibility 0s;
    visibility: visible;
    opacity: .1;
}
.login-div [class*='ct-btn-']:active
{
    box-shadow: none;
}
/* ct-btn styles ends */

.no-login-msg{
    background-color: #ffffff;
    padding: 1rem 2rem;
}

.login-txtbox{
    display: block;
    width: 100%;
    border: none;
    outline: none;
    padding: .8rem;
}

.getstarted-grid{
    display: grid;
    text-align: center;
}

.getstarted-link{
    padding: 1rem!important;
    text-decoration: none;
}

#btnLogin, #btnGoogleSignIn{
    padding: .8rem!important;
}

#divUserLoginGrid 
{
  display: grid;
  grid-gap: 1rem;
  border-bottom: 1px solid var(--BrandColor1);
  padding-bottom: 1rem;
}

.btnGoogleGrid{
  display: grid;
  grid-template-columns: 1fr;
  /*border-top: 1px solid var(--BrandColor1);
  padding-top: 1rem;*/
}

#btnGoogleSignIn{
  font-weight: 700;
}

.google-signin-grid{
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 1rem;
  align-items: center;
  justify-content: center;
}