/***** General & Common CSS *****/

/* scroll in lower resolutions */
.desktop-version{
    overflow: auto !important;

}
.desktop-version .app-page {
    overflow: auto !important;
}

.mobile-version .titleBoxDiv .title{
    font-size: 32px !important;
}

.mobile-version .inputFieldGroup {
    margin-top: 5px;
}

.mobile-version .arrow-tooltip .right-arrow-tooltip {
    opacity: 100%;
}
.mobile-version .or {
    margin-top: 10px;

}
.mobile-version .s-signup .sign-in{
    display: none;
}
.mobile-version .img-btn {
    display: none;
}
.desktop-version .ipadButton {
    display: none;
}
.mobile-version .ipadButton:hover {
    background-color: #FFB300;
    color: #FFFFFF;
}
.mobile-version .ipadButton {
    left: 25%;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    align-items: center;
    z-index: 1;
    position: relative;
    width: 114px;
    height: 40px;
    cursor: pointer;
    align-items: center;
    letter-spacing: 0.04em;
    background: none;
    border: 1px solid #FFFFFF;
    font-weight: 600;
    font-size: 14px;
    line-height: 16px;
    color: #FFFFFF;

    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.16);
    border-radius: 4px;
}
.mobile-version .infoCheckmark {
    margin-bottom: 14px;
}

.mobile-version .img-text{
    top: 23%;

}
.mobile-version .sign-in{
    width: 67%;
    top: 26%;
}

.mobile-version .cont {
    width: 100%;
    height: 100%;
}
.mobile-version .sub-cont {
    position: unset;
}
.mobile-version .img:before {
    background-image:none;
}
.mobile-version .img {
    right: 0;
    display: flex;
    width: 33%;
    left: unset;
    background-color: #3A2357;
}


.mobile-version .app-page{
    overflow: hidden;
}
.mobile-version .page-layout{
    position: absolute;
    padding: 4%;
    margin: 0px;
    width: 100% !important;
    height: 100% !important;
}

body {
    font-family: 'Nunito';
    background-image: none !important;
    background-color: #FAFAFA !important;
}


.footerMobileVersion a {
    font-weight: bold;
    text-decoration: underline !important;

}

.footerMobileVersion {
    font-weight: normal;
    display: none;
    /* New to zeevou? Sign up or get a free demo */
    height: 20px;
    font-family: Nunito;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 20px;
    /* identical to box height, or 143% */
    align-items: center;
    text-align: center;
    /* #3A2357 */
    color: #3A2357;
}

.mobile-version .card {
    height: 100%;
    position:relative;
}
.mobile-version .login-copyright {
    display: none;
}
.mobile-version .signUpLoginButton{
    margin-top: 20%;
}
.mobile-version .logInFormSet{
    padding: 0px 10%;
    width: unset;
}
@supports (-webkit-touch-callout: none) {
    /* CSS specific to iOS devices */

    .rememberMeCheckBox {
        font-family: Nunito !important;
        display: flex;
        font-size: 16px !important;
    }
    .checkmark {
        margin-bottom: 2px;
    }

}
.mobile-version .inputFieldGroup {
    width: 100%;
}
.mobile-version .capslock span {
    display: none;
}

@media only screen and (max-width: 767px) and (orientation : portrait), (max-height: 550px) and (orientation: landscape) {

    .mobile-version .sign-in{
        top: 0%;
    }
    .mobile-version .s-signup .arrow-tooltip .right-arrow-tooltip {
        right: 0%;
        bottom: 50px;
    }
    .mobile-version .s-signup .arrow-tooltip .right-arrow-tooltip::after {
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
        bottom: -13%;
        left: 43%;
        border-width: 9px;

    }
    .mobile-version .page-layout{
        position: relative;
    }
    .mobile-version body {
        max-width: 574px !important;

    }
    .mobile-version fieldset {
        min-width: 260px !important;
    }
    .mobile-version .logInFormSet{
        padding: unset;
    }


    .mobile-version .form-signin fieldset {
        margin: 0px !important;
    }
    .mobile-version .logInFormSet {
        margin: 2% auto;
        width: 100%;
    }

    .mobile-version .s-signup .signUpLoginButton {
        margin-top: 16px;
    }
    .mobile-version .signUpLoginButton {
        margin-top: 65px;
        display: block;
    }
    .mobile-version .page-layout, .mobile-version .form, .mobile-version .sign-in, .mobile-version .cont {
        width: 100%;

    }
    .mobile-version .signUpLoginButton button {
        width: 100%;
    }

    .mobile-version input {
        width: 100%;
    }

    .mobile-version .app-page {
        margin: 0px 5%;
        top: 50%;
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        position: relative;
    }

    .mobile-version .footerMobileVersion {
        display: block;
        margin-top: 40px;
    }

    .mobile-version .s-signup .sign-up {
        display: unset;
    }
    .mobile-version .sign-up {
        display: none;
    }
    .mobile-version .sub-cont .img {
        display: none;
    }

    .mobile-version .zeevou-logo {
        width: 56px;
        height: 56px;
        display: block;
        content: url("../images/Logo-02.svg");
        margin: 0 auto 2%;
    }

    .zeevou-logo {
        display: none;
    }

    .mobile-version {
        background-color: white !important;
    }
    .mobile-version .card {
        height: 100%;
        width: 100%;
        border-radius: 0%;
        box-shadow: none;
        border: none;
    }

    .mobile-version .login-page{
        overflow: hidden;
    }

    .googleLogin p{
        margin-top: 2px;
        padding: 20px;
    }

    .mobile-version .titleBoxDiv .title{
        font-size: 24px !important;
    }
}

.mobile-version .login-page{
    margin:unset ;
}

@media only screen and (max-height: 550px) and (orientation : landscape){
    .mobile-version .app-page {
        top: unset !important;
        -ms-transform: none !important;
        transform: none !important;
        position: unset !important;
    }
    .mobile-version .login-page{
        overflow: unset;
        margin: auto;
    }

}

@media only screen and (max-height: 900px) {.desktop-version .page-layout {margin: 0% auto !important;}}
@media only screen and (min-height: 900px) {.desktop-version .bottomOfPage{position: absolute;bottom: 1%;}}
@media only screen and (max-width: 1280px) {
    /*.desktop-version .page-layout {*/
    /*    margin: 8% auto !important;*/
    /*}*/
    .desktop-version .card {
        margin: 0 10px !important;
    }
    .login-copyright{
        font-size: 11px;
    }
}
@media only screen and (max-width: 1000px) {
    .desktop-version .s-signup .arrow-tooltip .right-arrow-tooltip {
        right: 0%;
        bottom: 50px;
    }
    .desktop-version .s-signup .arrow-tooltip .right-arrow-tooltip::after {
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
        bottom: -13%;
        left: 43%;
        border-width: 9px;

    }
    .desktop-version .img-btn{
        margin-top: 15%;
    }
    .desktop-version .free-demo {
        padding-right: 5%;
        padding-left: 5%;
    }
    .desktop-version .sign-up{
        width: 78%;
        left: 20%;

    }
}
@media only screen and (max-width: 350px){
    .mobile-version .sign-in{
        top: 5%;
    }
    /*.mobile-version .app-page{*/
    /*    top: 55%;*/
    /*}*/
    .mobile-version .infoCheckBox{
        display: unset !important;
    }
    .mobile-version .signUpLoginButton {
        margin-top: 50px;
    }
    .mobile-version .rememberandforgetpass{
        margin-top: 10px;
    }
    .mobile-version .or {
        margin-top: 0px;
    }
    .mobile-version .title {
        margin-bottom: 0px!important;

    }
    .mobile-version .footerMobileVersion {
        display: block;
        margin-top: 25px;
        font-size: 13px;
    }
}

.mobile-version .content-margin {
    margin-top: 0px !important;
}

.mobile-version .title{
    font-style: normal;
    font-weight: bold;
    font-size: 24px !important;
    line-height: 33px !important;
}
.mobile-version .free-demo {
    padding: 0 10%;
    margin-top: 65%;

    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.02em;
    color: #FFFFFF;
}
.mobile-version .card-img-overlay h2 {
    padding: 0 10% !important;
}
.mobile-version .card-img-overlay h2 {
    font-style: normal;
    font-size: 14px!important;
    line-height: 20px;
    letter-spacing: -0.02em;
    color: #FFFFFF;
    font-weight: 400;
}
.mobile-version .zeevou-icon{
    width: 64px !important;
    height: 64px !important;
}

@media only screen and (min-width:1024px)  and (orientation : portrait){
    .mobile-version .content-margin{
        margin-top: 50px !important;

    }
    .mobile-version .free-demo{
        margin-top: 60%;

    }
}
@media only screen and (min-height:1024px)  and (orientation : portrait){
    .mobile-version .s-signup .termsOfService {
        position: absolute;
        padding: 3% 5%;
        margin-top: -4%;
        margin-left: -5%;
    }
    .mobile-version .s-signup .formWrapper {
        width: 67%;
        margin-left: 33%;
        margin-top: 36%;

    }
}
@media only screen and (min-height:1024px)  and (orientation : landscape){
    .mobile-version .free-demo{
        margin-top: 58%;

    }
}
@media only screen and (min-width:1024px) and (orientation : landscape) {
    .mobile-version .ipadButton{
        left: 33%;
    }

    .mobile-version .s-signup .formWrapper {
        width: 67%;
        margin-top: 10%;
        margin-left: 33%;
    }
    .mobile-version .sign-in {
        top: 15%;
    }
    .mobile-version .img-text {
        top: 10%;
    }
    .mobile-version .img-btn{
        margin-top: 0px;
    }
}

/*             signup mobile view               */

.mobile-version .cont{
    border-radius: 0px;
}
.mobile-version .termsOfService{
    position: unset;
    margin-left: 0px;
}
.mobile-version .infoCheckBox{
    justify-content: center;
    display: flex;
    float: unset;
    margin-left: 8px;
}
.mobile-version .s-signup .img{
    right: unset;
}
.mobile-version .s-signup .sign-up{
    all: unset;
}

.mobile-version .img-btn span {
    -webkit-transform: unset;
    transform: unset;
    transition:unset;
}
.mobile-version .img-text {
    -webkit-transform: unset;
    transform: unset;
    transition:unset;

}
.mobile-version .sub-cont {
    -webkit-transform: unset;
    transform: unset;
    transition:unset;

}

.mobile-version .cont.s-signup .sub-cont {
    all: unset;
}

.reset-success.container-margin {
    margin-top: 76px;
    margin-bottom: 76px;
}

.reset-success .title-box {
    margin-bottom: 56px;
}

.reset-success .title {
    font-style: normal;
    font-weight: bold;
    font-size: 32px !important;
    line-height: 44px;

    margin-bottom: 12px;
}

.login-page{
    /*margin: 4% auto;*/
    position: unset;
}
.page-layout {
    margin: 6% auto;
    /*width: 1366px;*/
    /*height: 768px;*/
}

fieldset {
    min-width: 328px !important;
    /*max-width: 400px;*/
}

.title {
    font-style: normal;
    font-weight: 700;
    font-size: 32px !important;
    line-height: 44px;
    margin-bottom: 16px;
}

.Description {
    /* Log in with your social network */

    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 24px;
    align-items: center;
    text-align: center;
    color: #757575;
}

.card-img-overlay .title {
    margin-bottom: 8px !important;
}

/*!***** Card Box & Image CSS *****!*/

.card {
    width: 1254px;
    height: 688px;
}
.desktop-version .card {
    width: 100%;
    height: 100%;
    max-width: 1254px;
    min-width: 900px;
    max-height: 688px;
}
.card-border {
    border-radius: 25px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.149);
    border: none;
}

.card-img-overlay .title {
    color: #FFFFFF;
}

.card-img-overlay {
    padding-top: 23px;
}

.card-img-overlay h2 {
    padding:0% 15% !important;
    color: #FFFFFF;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;

    /* TEMPORARY */
    margin-bottom: 24px;
}

.zeevou-icon {
    margin-top: 15%;
    content: url("../images/Zeevou-icon.svg");
    width: 68.98px;
    height: 74.46px;
}

.card-img-overlay .btn:hover {
    background-color: #FFB300 !important;
}

/***** Footer Notes CSS *****/
.footerLinks {
    margin-top: 30%;
    color: #FFFFFF;

}

.footerLinks p {
    margin: 0px;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.02em;
}

.free-demo a {
    color: rgb(255, 122, 0);!important;
}

.free-demo a:hover {
    color: rgb(255, 122, 0); !important;
}

.redirect-alert-box {
    margin-top: 56px;
}

/***** General Input CSS *****/

input[type='checkbox'] {
    width: 0 !important;
    height: 0 !important;
}

input {
    position: static;
    width: 100% !important;
    height: 40px !important;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding: 8px 12px 8px 16px;
    margin: 0px !important;
}

input:invalid {
    background: #F5F5F5 !important;
    border: 0.5px solid #C4C4C4;
    box-sizing: border-box;
    border-radius: 4px;
}

input:valid {
    background: #FFFFFF;
    border: 1px solid #C4C4C4;
    box-sizing: border-box;
    border-radius: 4px;
}

input:focus {
    background: #FFFFFF !important;
    border: 1.6px solid #009688 !important;
    box-sizing: border-box !important;
    border-radius: 4px !important;
}

input:hover {
    border: 1px solid #009688;
    box-sizing: border-box;
    border-radius: 4px;
}

.error input {
    background: #FFFFFF !important;
    border: 1.6px solid #F44336 !important;
    box-sizing: border-box;
    border-radius: 4px;
}

input .error {
    background: #FFFFFF !important;
    border: 1.6px solid #F44336 !important;
    box-sizing: border-box;
    border-radius: 4px;
}

.error span,.error a{
    border-color: #F44336;
    color: #F44336;
}


.password-p {
    padding-right: 32px !important;
}

/*!***** Input Control Group CSS *****!*/

.control-group {
    margin-top: 0px !important;
    padding-bottom: 32px;
}

label {
    color: #212121;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;

    margin-bottom: 8px;
}

span.validation-failed {
    position: absolute;
    margin: 4px 0px 0px 0px;
    visibility: hidden;
}

span.validation-failed span {
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 18px;

    color: #F44336;
}

/*!***** Eye Icon CSS *****!*/
/*!***** TEMPORARY Until replacing SVG with new Icon Models CSS *****!*/

.eyeOpen {
    visibility: visible;
}

.eyeClose {
    visibility: hidden;
}

.eye {
    float: right;
    cursor: pointer;

    width: 15px;
    height: 15px;

    margin-top: -29px;
    margin-right: 20px;
}

.bi-eye-slash::before {
    content: url("../images/Close-eye-icon.svg");

}

.bi-eye::before {
    content: url("../images/Open-eye-icon.svg");
}

.logInButton {
    display: flex;
    justify-content: center;
    margin-top: 20%;
}

.labelErrorMSG {
    position: static;
    width: 328px;
    height: 16px;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 18px;
    color: #F44336;
    display: flex;
    margin-top: 4px;
}

/* remove default ms edge toggle password */
::-ms-reveal {
    display: none;
}

/*!**************************************************** Social Button ****************************************************!*/
.socialLogIn{
    margin-top: 10%;
    display: flex;
}
.socialLogIn a{
    color: #212121;

}
.socialLogIn a:hover{
    color: #212121;
}

.or {
    margin-top: 15px;
    /*margin-bottom: 10px;*/
    /*width: 100%;*/
    display: flex;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 20px;
    align-items: center;
    text-align: center;
    letter-spacing: -0.02em;
    color: #757575;
}

.or hr {
    /*display: inline;*/
    width: 100%;
    color: #757575;

}

.googleIcon{
    margin-right: 16px;
    width: 24px;
    height: 24px;
    background: url("../images/Integration Logos-300x300-36.svg") no-repeat center;

}
.googleLogin {
    margin-left: 20px;
    display: flex;
    float: right;
    background: url("../images/Integration Logos-300x300-36.svg") no-repeat center ;
    border: 1px solid #C4C4C4;
    box-sizing: border-box;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
    height: 40px;
}
.googleLogin:hover{
    border: 1px solid #009688;

}

.xeroIcon{
    margin-right: 16px;
    width: 24px;
    height: 24px;
    background: url("../images/Xero Logo.png") no-repeat center;

}

.xeroLogin {
    padding-top: 2%;
    justify-content: center;
    display: flex;
    border: 1px solid #C4C4C4;
    box-sizing: border-box;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
    height: 40px;
}

.officeLogin {
    margin-left: 20px;
    display: flex;
    float: right;
    background: url("../images/microsoft-office.svg") no-repeat center;
    border: 1px solid #C4C4C4;
    box-sizing: border-box;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
    height: 40px;

    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    /* identical to box height, or 133% */
    align-items: center;
    text-align: center;
}
.fbLogin {
    margin-left: 20px;
    display: flex;
    float: right;
    background: url("../images/facebook-3 1.svg") no-repeat center;
    border: 1px solid #C4C4C4;
    box-sizing: border-box;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
    height: 40px;
}

.xeroIcon{
    margin-right: 16px;
    width: 24px;
    height: 24px;
    background: url("../images/Integration Logos-Xero.svg") no-repeat center;

}

.xeroLogin {
    margin-left: 20px;
    display: flex;
    float: right;
    background: url("../images/Integration Logos-Xero.svg") no-repeat center;
    background-size: 30px;
    border: 1px solid #C4C4C4;
    box-sizing: border-box;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
    height: 40px;
    padding: 20px;
}

.forget-pass {
    font-style: normal;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #009688;
    margin-top: -3px;
}

.forget-pass:hover {
    color: #00796B !important;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
}


/*!**************************************************** login and sign up Panel ****************************************************!*/

.loader-circle {
    display: none;
    position: relative;
    top: -225px
}
.loader-circle:before {
     content: '';
     display: block;
 }

.mobile-version .circular {
    width: 13%;
    margin-top: -5px;
}
.circular {
    animation: rotate 2s linear infinite;
    transform-origin: center center;
    width: 60%;
    margin-top: -5px;
}

.path {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
    stroke-linecap: round;
}

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

@keyframes dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35px;
    }
    100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124px;
    }
}

@keyframes color {
    100%,
    0% {
        stroke: white;
    }
    40% {
        stroke: #3A2357;
    }
    66% {
        stroke: white;
    }
    80%,
    90% {
        stroke: #3A2357;
    }
}

.showbox {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 5%;
}
.content-margin {
    margin-top: 80px;
}


.titleBoxDiv {
    text-align: center;
}

.welcomeBox {
    /* Welcome Back! */
    font-style: normal;
    font-weight: bold;
    font-size: 32px;
    line-height: 32px;
    align-items: center;
    color: #3A2357;
}

.logInDescription {
    /* Log in with your social network */

    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 24px;
    align-items: center;
    text-align: center;
    color: #757575;
}

.inputFieldGroup {
    width: 76%;
    height: 88px;
    margin: 10px auto;
    text-align: left !important;
}

.inputLabels {
    position: static;
    width: 97px;
    height: 16px;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    color: #757575;
}

.inputLabels i {
    cursor: pointer;
}

.fieldSets {
    border: none;
    margin: 0px;
    padding: 0px;
}

.formSingInFooter:hover {
    color: black;
}


.footText {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.02em;
    color: #212121;
    margin: 0px;
}

.infoAndOffers {
    /*margin-left: 8px;*/
    color: #212121
}

.termsOfService {
    position: absolute;
    margin-left: -40px;
    margin-top: 4%;
}

.buttonSignUpLogin {
    border: none;
    align-items: center;
    padding: 8px 32px;
    position: static;
    background: rgb(108, 29, 204);
    border-radius: 4px;
    order: 0;
    flex-grow: 0;
    margin: 0px 0px;
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0.04em;
    color: #FFFFFF;
    box-shadow: rgba(108, 29, 204, 0.24) 0px 8px 16px 0px;
    cursor: pointer;
    width: 76%;
    height: 40px;
}

.buttonSignUpLogin:hover:enabled {
    box-shadow: none;
    text-decoration: none;
    background-color: rgb(74, 20, 140);
}

.buttonSignUpLogin:disabled {
    box-shadow: none;
    cursor: default;
    opacity: 70%;
}
.buttonSignUpLogin img{
    width: 24px;
    height: 24px;
}
.formSingInFooter {
    margin-top: 15px;
}

.logInFormSet {
    margin: 0 auto;
    width: 442px;
    height: 100%;
}
.mobile-version .rightpanelDescription{
    padding:0% 10% !important;

}
.desktop-version .rightpanelDescription{
    padding:0% 15% !important;
}
/************************************* Login CSS *************************************/

/*!***** Arrow ToolTip CSS *****!*/

.arrow-tooltip {
    position: relative;
}

.arrow-tooltip .right-arrow-tooltip {
    visibility: hidden;
    background-color: #FFB300;
    color: #fff;
    border-radius: 4px;
    padding: 8px 12px;
    z-index: 5;
    bottom: 0px;
    right: 103%;

    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    opacity: 0.9;

    width: 184px;
    height: 136px;
}

.arrow-tooltip .right-arrow-tooltip::after {
    content: "";
    position: absolute;
    bottom: 10%;
    left: 100%;
    margin-top: -5px;
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent transparent #FFB300;
}

.arrow-tooltip .left-arrow-tooltip {
    visibility: hidden;
    background-color: #FFB300;
    color: #fff;
    border-radius: 4px;
    padding: 11px 14px;
    z-index: 5;
    top: 0;
    left: 102%;

    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    opacity: 0.9;

    width: 132px;
    height: 40px;
}

.arrow-tooltip .left-arrow-tooltip::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -6px;
    border-width: 6px;
    border-style: solid;
    border-color: transparent #FFB300 transparent transparent;
}

span.tooltip-text {
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
}

span.tooltip-text ul {
    line-height: 20px;
}

span.tooltip-text ul li {
    margin-left: 20px;
}

/*                  custom checkbox               */
.rememberMeCheckBox {
    float: left;
    display: flex;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 20px;
    align-items: center;
    text-align: center;
    letter-spacing: -0.02em;
    color: #212121;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.rememberMeCheckBox input {
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark {
    margin-bottom: 2px;
    display: flex;
    float: left;
    height: 18px;
    width: 18px;
    border: 2px solid #757575;
    border-radius: 4px;
    margin-right: 5px;
}

/* On mouse-over, add a grey background color */
.rememberMeCheckBox:hover input ~ .checkmark {
    border-color: black;
    color: black;
}


/* When the checkbox is checked, add a blue background */
.rememberMeCheckBox input:checked ~ .checkmark {
    background-color: #009688;
    border-color: #009688;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    display: none;
}

/* Show the checkmark when checked */
.rememberMeCheckBox input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.rememberMeCheckBox .checkmark:after {
    margin: 1px auto;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.rememberandforgetpass {
    margin-top: 15px;
    max-width: 350px;
    margin-left: 50px;
}

.free-demo {
    margin-top: 41%;
    line-height: 1.57143;
    font-size: 0.875rem;
    font-family: Nunito, "Public Sans", sans-serif;
    font-weight: 400;
    text-align: center;
}
.opacity_after-loading{
    opacity: 40%;
}

.signUpLoginButton {
    justify-content: center;
    margin-top: 80px;
}

.desktop-version .sign-up .formWrapper {
    margin-top: 110px;
}
.desktop-version .sign-up .signUpLoginButton {
    margin-top: 110px;
}

.sessionExpired{
    display: inline-flex;
    width: 328px;
    justify-content: center;
}

.sessionExpired p{
    margin: 0px;
    /* User Text */
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;

    /* #FF8F00 */
    color: #FF8F00;
}
.sessionExpired-check-mark-icon{
    margin-right: 6px;
    content: url("../images/ic_info_24dp.svg");
    align-self: flex-start;
    transform: scaleY(-1);
}

/************************************* Sign Up CSS *************************************/

/*                  custom checkbox               */
.infoCheckBox {
    display: flex;
    float: left;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    letter-spacing: -0.02em;
    color: #212121;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin-left: 50px;
    max-width: 350px;
}

/* Hide the browser's default checkbox */
.infoCheckBox input {
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.infoCheckmark {
    margin-bottom: 17px;
    display: flex;
    float: left;
    height: 18px;
    min-width: 18px;
    border: 2px solid #757575;
    border-radius: 4px;
    margin-right: 5px;
}

/* On mouse-over, add a grey background color */
.infoCheckBox:hover input ~ .infoCheckmark {
    border-color: black;
    color: black;
}


/* When the checkbox is checked, add a blue background */
.infoCheckBox input:checked ~ .infoCheckmark {
    background-color: #009688;
    border-color: #009688;
}

/* Create the checkmark/indicator (hidden when not checked) */
.infoCheckmark:after {
    content: "";
    display: none;
}

/* Show the checkmark when checked */
.infoCheckBox input:checked ~ .infoCheckmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.infoCheckBox .infoCheckmark:after {
    margin: 1px auto;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* ***************** Pop Up ************************ */

/* Popup container - can be anything you want */
.popup {
    position: relative;
    display: inline-block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

}

/* The actual popup */

.popuptext {
    background: #FFB300;
    border-radius: 4px;
    visibility: hidden;

    width: 182.82px;
    height: 109px;

    color: #FFFFFF;
    padding: 8px 12px;
    position: absolute;
    z-index: 5;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;

    margin-top: -60px;
    margin-left: -300px;
    align-items: center;

    flex: none;

}

/* Popup arrow */
.popuptext::after {
    content: "";
    position: absolute;
    vertical-align: center;
    top: 77%;
    left: 100%;
    border-width: 8px;
    border-style: solid;
    border-color: #FFB300 transparent transparent transparent;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

/* Toggle this class - hide and show the popup */
.popup {
    visibility: visible;
}


li.li-failed {
    margin-left: 11.5px !important;
    padding-left: 8.5px;
}

li.li-failed::marker {
    content: "×";
}

li.li-success {
    margin-left: 14px !important;
    padding-left: 6px;
}

li.li-success::marker {
    content: "✓";
}

span.tooltip-text.success {
    background-color: #009688;
}

.right-arrow-tooltip.success::after {
    border-color: transparent transparent transparent #009688;
}

.error .arrow-tooltip .right-arrow-tooltip {
    background-color: #F44336 !important;
}

.error .arrow-tooltip .right-arrow-tooltip::after {
    border-color: transparent transparent transparent #F44336 !important;
}


/******************************** SLIDER ***********************************************/

*, *:before, *:after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Nunito', sans-serif;
}

.desktop-version .cont {
    width: 100% !important;
}
.cont {
    border-radius: 25px;
    overflow: hidden;
    position: relative;
    width: 1254px;
    height: 688px;
}

.desktop-version .form {
    width: 65% !important;
}
.form {
    position: relative;
    width: 640px;
    height: 100%;
    -webkit-transition: -webkit-transform 1.2s ease-in-out;
    transition: -webkit-transform 1.2s ease-in-out;
    transition: transform 1.2s ease-in-out;
    transition: transform 1.2s ease-in-out, -webkit-transform 1.2s ease-in-out;
}


.desktop-version .sub-cont {
    left: 59.5% !important;
    width: 102% !important;

}
.sub-cont {
    border-radius: 25px;
    overflow: hidden;
    position: absolute;
    left: 720px;
    top: 0;
    width: 1254px;
    height: 100%;
    padding-left: 260px;
    background: #fff;
    -webkit-transition: -webkit-transform 1.2s ease-in-out;
    transition: -webkit-transform 1.2s ease-in-out;
    transition: transform 1.2s ease-in-out;
}

.desktop-version .cont.s-signup .sub-cont {

    -webkit-transform: translate3d(-58.7%, 0, 0);
    transform: translate3d(-58.7%, 0, 0);
}
.cont.s-signup .sub-cont {
    -webkit-transform: translate3d(-720px, 0, 0);
    transform: translate3d(-720px, 0, 0);
}

.desktop-version .img {

    width: 40% !important;
}
.img {
    border-radius: 25px;
    overflow: hidden;
    z-index: 1;
    position: absolute;
    left: 0;
    top: 0;
    width: 534px;
    height: 100%;
    padding-top: 360px;
}

.img:before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 1173px;
    height: 688px;
    border-radius: 25px;
    background-image: url(../images/Back_sign_up.svg);
    background-size: cover;
    transition: -webkit-transform 1.2s ease-in-out;
    transition: transform 1.2s ease-in-out, -webkit-transform 1.2s ease-in-out;
}

.img:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.desktop-version .cont.s-signup .img:before {
    -webkit-transform: translate3d(55%, 0, 0) !important;
    transform: translate3d(55%, 0, 0) !important;
}
.cont.s-signup .img:before {
    -webkit-transform: translate3d(640px, 0, 0);
    transform: translate3d(640px, 0, 0);
}

.img-text {
    z-index: 1;
    position: absolute;
    left: 0;
    top: 50px;
    width: 100%;
    padding: 0 20px;
    text-align: center;
    color: #fff;
    -webkit-transition: -webkit-transform 1.2s ease-in-out;
    transition: -webkit-transform 1.2s ease-in-out;
    transition: transform 1.2s ease-in-out, -webkit-transform 1.2s ease-in-out;

    font-weight: 700;
    line-height: 1.55556;
    font-size: 1.125rem;
    font-family: Nunito, "Public Sans", sans-serif;
    text-align: center;
    overflow-wrap: anywhere;
    color: rgb(255, 255, 255);
}

.cont.s-signup .img-text.m-up {
    -webkit-transform: translateX(520px);
    transform: translateX(520px);
}

.img-text.m-in {
    -webkit-transform: translateX(-520px);
    transform: translateX(-520px);
}

.cont.s-signup .img-text.m-in {
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

.desktop-version .sign-in {
    width: 59.5% !important;
}
.sign-in {
    /*width: 680px;*/
    /*check it when slide show comes up*/
    width: 720px;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    right: 0%;
}

.desktop-version .cont.s-signup .sign-in {
    -webkit-transform: translate3d(55%, 0, 0) !important;
    transform: translate3d(55%, 0, 0) !important;
}
.cont.s-signup .sign-in {
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
    -webkit-transition-duration: 1.2s;
    transition-duration: 1.2s;
    -webkit-transform: translate3d(640px, 0, 0);
    transform: translate3d(640px, 0, 0);
}

.img-btn {
    overflow: hidden;
    z-index: 1;
    position: relative;
    width: 114px;
    height: 40px;
    margin: 12% auto;
    background-color: rgb(108, 29, 204);
    box-shadow: rgba(108, 29, 204, 0.24) 0px 8px 16px 0px;
    cursor: pointer;
    border-radius: 4px;
    border: none;
    font-family: Nunito;
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 24px;
    align-items: center;
    letter-spacing: 0.04em;
    color: rgb(255, 255, 255);
    margin-top: 17%;
}

.img-btn:hover {
    box-shadow: none;
    text-decoration: none;
    background-color: rgb(74, 20, 140);
}

.img-btn:after {
    content: '';
    z-index: 1;
    position: absolute;
    left: 0;
    top: 0;
    width: 114px;
    height: 40px;
    padding: 8px 32px;
    border-radius: 4px;
}

.img-btn span {
    position: absolute;
    left: 0;
    top: 0;
    /*display: -webkit-box;*/
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    -webkit-transition: -webkit-transform 1.2s;
    transition: -webkit-transform 1.2s;
    transition: transform 1.2s;
    transition: transform 1.2s, -webkit-transform 1.2s;
}

.img-btn span.m-in {
    -webkit-transform: translateY(-72px);
    transform: translateY(-72px);
}

.cont.s-signup .img-btn span.m-in {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.cont.s-signup .img-btn span.m-up {
    -webkit-transform: translateY(72px);
    transform: translateY(72px);
}

.desktop-version .sign-up {
    width: 74% !important;

}
.sign-up {
    width: 680px;
    left: 25%;
    -webkit-transform: translate3d(-900px, 0, 0);
    transform: translate3d(-900px, 0, 0);
}

.cont.s-signup .sign-up {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.z-index-2 {
    z-index: 2;
}

.hidden {
    visibility: hidden;
}

.visible {
    visibility: visible;
}

@media only screen and (max-height: 900px) {.desktop-version .page-layout {margin: 4% auto !important;}}
@media only screen and (min-height: 900px) {.desktop-version .bottomOfPage{position: absolute;bottom: 1%;}}
@media only screen and (max-height: 800px) {
    .desktop-version .page-layout {
        margin: 3% auto !important;
    }
    .desktop-version .cont{
        height: 600px !important;
    }
    .desktop-version .sign-in{
        top: -5%;
    }
    .desktop-version .sign-up{
        top: -5%;
    }
    .desktop-version .img-text{
        top: -50px;
    }
    .desktop-version .img-btn{
        margin-top: 0%;
    }
}
@media only screen and (max-height: 900px) and (max-width: 1440px) {
    .desktop-version .page-layout {
        margin: 5% auto !important;
    }
}
@media only screen and (max-height: 768px) and (max-width: 1366px) {
    .desktop-version .card{
        margin-right: 10% !important;
        margin-left: 10% !important;
    }
    .desktop-version .sign-in {
        top: -9%;
    }
    .desktop-version .signUpLoginButton{
        margin-top: 20% !important;
    }
    .desktop-version .page-layout {
        margin: 10px auto !important;
    }
    .desktop-version .cont{
        height: 570px !important;
    }

}
@media only screen and (max-height: 720px) and (max-width: 1280px) {
    .desktop-version .card{
        /*margin-right: 0 !important;*/
        /*margin-left: 0 !important;*/
    }
    .desktop-version .page-layout {
        margin: 10px auto !important;
    }
    .desktop-version .signUpLoginButton{
        margin-top: 20%;
    }
    .desktop-version .cont{
        height: 566px !important;
    }

}