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

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

}

.mobile-version .app-page__central-panel {
    padding: 56px 24px !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;*/
/*}*/

.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: 14px !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,
    .mobile-version #mySignUpPopup {
        right: auto;
        left: 0;
        bottom: auto;
        top: 100%;
        margin-top: 4px;
    }
    .mobile-version .s-signup .arrow-tooltip .right-arrow-tooltip::after,
    .mobile-version #mySignUpPopup::after {
        display: none !important;
    }
    /*.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 .formSingInFooter {
        width: 100%;
        padding-left: 10px;
        padding-right: 12px;
    }


    .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: 35px;
        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: 28%;

    }
}
@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: flex-start;
    display: flex;
    float: unset;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
}
.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;
    background-image: none;
}
/*.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-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;
}

.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;
}

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

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

input[type='checkbox'] {
    width: 0 !important;
    height: 0 !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;
}

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

.eyeOpen {
    visibility: visible;
}

.eyeClose {
    visibility: hidden;
}

.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: #E30168;
    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: 12px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 1.25px;
    color: #6C1DCC;
    margin-top: -3px;
}

.forget-pass:hover {
    font-style: normal;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    color: #4A148C !important;
}


/*!**************************************************** 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: 83%;
    height: 88px;
    margin: 10px auto;
    text-align: left !important;
}

.inputFieldGroup.error {
    margin-bottom: 24px;
}

.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
}

.infoAndOffers a {
    color: #6C1DCC !important;
}

.infoAndOffers a:hover {
    color: #3A2357 !important;
}

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

.buttonSignUpLogin {
    align-items: center;
    padding: 8px 32px;
    position: static;
    order: 0;
    flex-grow: 0;
    margin: 0px 0px;
    cursor: pointer;
    width: 83%;
}

.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;
    width: 83%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 12px;
}


/* Ensure termsOfServiceError is left-to-right */
#termsOfServiceError {
    direction: ltr;
    text-align: left;
    display: none;
}

#termsOfServiceErrorLabel {
    direction: ltr;
    text-align: left;
}

.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;
}

/* Signup tooltip specific styles */
#mySignUpPopup,
.s-signup .arrow-tooltip .right-arrow-tooltip {
    background-color: #FFFFFF !important;
    opacity: 1 !important;
    width: 145px !important;
    height: 156px !important;
    border-radius: 8px !important;
    padding: 12px !important;
    top: 0px;
    bottom: auto ;
    box-shadow: 0px 24px 48px 0px #919EAB33;
}

#mySignUpPopup::after,
.s-signup .arrow-tooltip .right-arrow-tooltip::after {
    display: none !important;
}

#mySignUpPopup ul,
.s-signup .arrow-tooltip .right-arrow-tooltip ul {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#mySignUpPopup ul li,
.s-signup .arrow-tooltip .right-arrow-tooltip ul li {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
    display: flex;
    align-items: center;
}

#mySignUpPopup ul li .validation-icon,
.s-signup .arrow-tooltip .right-arrow-tooltip ul li .validation-icon {
    display: inline-flex;
    margin-right: 2px;
    flex-shrink: 0;
}

#mySignUpPopup ul li::marker,
.s-signup .arrow-tooltip .right-arrow-tooltip ul li::marker {
    content: none;
}

.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: 12px;
    line-height: 20px;
}

#mySignUpPopup.tooltip-text,
.s-signup .arrow-tooltip .right-arrow-tooltip.tooltip-text {
    font-size: 12px;
    color: #596A78;
    line-height: 18px;
}

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: 500;
    font-size: 14px;
    line-height: 24px;
    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: #6C1DCC;
    border-color: #6C1DCC;
}

/* 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 {
    max-width: 350px;
    margin: 15px auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/*.free-demo {*/
/*    margin-top: 41%;*/
/*    line-height: 24px;*/
/*    font-size: 16px;*/
/*    font-family: Nunito, "Public Sans", sans-serif;*/
/*    font-weight: 600;*/
/*    text-align: center;*/
/*}*/
.opacity_after-loading{
    opacity: 40%;
}

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

.desktop-version .sign-up .formWrapper {
    margin-top: 80px;
}
.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);
}

/* Alert Error */
.alert.error {
    display: flex;
    align-items: center;
    background-color: #FFF2F8;
    border-radius: 8px;
    padding: 16px 16px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    letter-spacing: 0.16px;
    width: 83%;
    margin: 10px auto;
}

.alert.error span {
    color: #212B36;
}

/* Icon inside the alert */
.alert.error::before {
    content: "";
    background-image: url("../images/ic_close_circle_24dp.svg");
    background-size: 16px 16px;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 8px;
    filter: invert(15%) sepia(96%) saturate(7447%) hue-rotate(322deg) brightness(93%) contrast(99%);
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    display: inline-block;
    flex-shrink: 0;
}

/* Mobile responsive for alert error */
@media only screen and (max-width: 767px) {
    .alert.error {
        width: 100%;
    }
}

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

/*                  custom checkbox               */
.infoCheckBox {
    display: flex;
    float: left;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 20px;
    text-align: left;
    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: 0;
    margin-right: 0;
    width: 100%;
    max-width: none;
}
.infoCheckBox.error{
    padding-bottom: 12px;
}
/* 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: #6C1DCC;
    border-color: #6C1DCC;
}

/* 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: "✓";
}

/* Remove markers for signup tooltip */
#mySignUpPopup ul li.li-failed,
#mySignUpPopup ul li.li-success,
.s-signup .arrow-tooltip .right-arrow-tooltip ul li.li-failed,
.s-signup .arrow-tooltip .right-arrow-tooltip ul li.li-success {
    list-style: none;
    margin-left: 0 !important;
    padding-left: 0;
}

#mySignUpPopup ul li.li-failed::marker,
#mySignUpPopup ul li.li-success::marker,
.s-signup .arrow-tooltip .right-arrow-tooltip ul li.li-failed::marker,
.s-signup .arrow-tooltip .right-arrow-tooltip ul li.li-success::marker {
    content: none;
}

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: #E30168 !important;
}

.error .arrow-tooltip .right-arrow-tooltip::after {
    border-color: transparent transparent transparent #E30168 !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 .signup-sub-cont {
    left: 58.5% !important;
    width: 100% !important;

}
.desktop-version .login-sub-cont {
    left: 50.5% !important;
    width: 100% !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: 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%;
}
.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;
    background-position: right;
    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%;
    padding-top: 24px;
}
.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: 48px;
    margin: 12% auto;
    cursor: pointer;
    border: none;
    align-items: center;
    margin-top: -5% !important;
    pointer-events: auto;
}

/*.img-btn:hover {*/
/*    box-shadow: none;*/
/*    text-decoration: none;*/
/*    background-color: #FFFFFF;*/
/*    color: #6C1DCC;*/
/*}*/

.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: 28%;
    -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: 100% !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: 100% !important;
    }

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

}

#loginIpadButton {
    position: relative;
    z-index: 9999;
    pointer-events: auto;
}

/* Tablet View */
@media only screen and (max-width: 1000px) and (min-width: 500px) {
    .mobile-version .common-page-layout {
        background-image: none !important;
        background-color: #FFFFFF !important;
    }

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

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

    .mobile-version .img, .sub-cont {
        display: none;
    }

    .mobile-version .cont {
        padding: 0 80px;
    }

    .mobile-version .card {
        width: 100% !important;
        height: 80% !important;
        min-width: unset !important;
        max-height: unset !important;
    }

    .mobile-version .sign-in {
        width: 100% !important;
        padding-top: 0;
        top: 0;
    }

    .mobile-version .page-layout,
    .form,
    .cont, .signUpLoginButton button {
        width: 100%;
    }

    .mobile-version .signUpLoginButton, .formWrapper {
        margin-top: unset !important;
    }

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

    .mobile-version .logInFormSet {
        padding: unset;
        margin: 2% auto;
        width: 100%;
    }

    .mobile-version .alert.error {
        width: 100%;
    }

    .mobile-version .formSingInFooter {
        width: 100%;
        margin-left: unset;
    }

    .mobile-version .rememberandforgetpass {
        max-width: unset;
        min-width: unset;
        margin: 16px;
    }
        /* Mobile override: tooltip should open from bottom of password border */

}