/* No Left-panel, Right-panel, Header, Toolbar, Page content side */
#left-panel, #right-panel, .app-header, .page-toolbar, .app-page__content-side {
    display: none;
}

/* General CSS Mobile-view */
.mobile-version .btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 32px;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.32);
    border-radius: 4px;
}

.mobile-version .app-page__central-panel {
    padding: 0px !important;
}

.mobile-version .arrow-tooltip .right-arrow-tooltip {
    opacity: 100%;
}

/* Mobile */
@media only screen and (max-width: 767px) and (orientation: portrait), (max-height: 550px) and (orientation: landscape) {
    .mobile-version .redirect-alert-box {
        margin-top: 80px;
    }

    .mobile-version .check-email .container-margin {
        margin: 0px;
    }

    .mobile-version .Approved {
        display: block;
    }

    .mobile-version .col-7 {
        all: unset !important;
    }

    .mobile-version .left-panel {
        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;
    }
    .mobile-version .page-layout {
        position: absolute;
        padding: 4%;
        margin: unset;
        width: 100% !important;
        height: 100% !important;
    }

    .mobile-version {
        height: unset;
    }

    .mobile-version .reset .container-margin {
        margin: auto;
        max-width: 574px;
        min-width: 260px !important;

    }

    .mobile-version .reset-request .container-margin {
        margin: 0;
    }

    .mobile-version body {
        max-width: 574px !important;
        max-width: 574px !important;
    }

    .mobile-version .btn {
        background: #009688;
        width: 100%;
    }

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

    .mobile-version .form-wrapper__inner {
        padding: 0px !important;
    }

    .desktop-version .zeevou-logo {
        display: none;
    }

    .mobile-version .title {
        justify-content: center;

        font-style: normal;
        font-weight: bold;
        font-size: 24px !important;
        line-height: 33px;
        display: flex;
        align-items: center;
        text-align: center;

        color: #3A2357;
    }

    .mobile-version .title h2 {

        /* 18 - R */

        font-family: Nunito;
        font-style: normal;
        font-weight: 400 !important;
        font-size: 18px !important;
        line-height: 24px;
        /* or 133% */

        display: flex;
        align-items: center;
        text-align: center;

        /* #3A2357 */

        color: #3A2357;
    }

    .mobile-version .need-help a {
        font-weight: bold;
        text-decoration: underline !important;

    }

    .mobile-version .need-help {
        bottom: 0;
        position: absolute;
        text-align: center;

    }

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

    .mobile-version .form-wrapper__inner form {
        margin: 0px;
        width: 100%;
    }

    .mobile-version .footerMobileVersion {
        display: block;
    }
    .mobile-version .row, .wrapper_row, .wrapper_subrow {
        align-items: center;
        float: unset;
        display: block;
        flex-wrap: unset;
        height: auto;
        width: 100%;
        min-width: 260px !important;
    }

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

    .mobile-version .arrow-tooltip .right-arrow-tooltip {
        right: 0;
        bottom: 130%;
        top: unset;
        width: 175px;
        height: 152px;
        background: #FCB817;
        box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.25);
        border-radius: 4px;
    }

    .mobile-version .arrow-tooltip .right-arrow-tooltip::after {
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
        top: unset;
        left: 50%;
        bottom: -13%;
        border-width: 10px;
    }

    .mobile-version .check-mark-icon {
        display: none;
    }

    .mobile-version .form-signin--reset {
        max-width: 574px;
    }

    .mobile-version .reset .form-wrapper__inner form {
        margin: auto;
        display: contents;
    }

    .form-signin.form-column-layout .field-set, .form-signin.form-column-layout .title-box {
        width: 100%;
    }
}

@media only screen and (max-height: 550px) and (orientation: landscape) {
    .mobile-version .need-help {
        position: relative;
        margin-top: 10%;
    }
}

/* Ipad */
@media only screen and (min-height: 1024px)  and (orientation: portrait), (min-width: 1024px) and (orientation: landscape) {
    .mobile-version .check-email .container-margin {
        margin-top: 200px;
    }

    .mobile-version .footerMobileVersion {
        display: none;
    }

    .mobile-version .back-img {
        background: #3A2357 none;
    }

    .mobile-version .card {
        width: 100%;
        height: 100%;
    }

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


    .mobile-version .col-7 {
        flex: 0 0 68.333333% !important;
        max-width: 68.333333% !important;
    }

    .mobile-version .col-5 {
        flex: 0 0 31.666667% !important;
        max-width: 31.666667% !important;
    }

    .mobile-version .left-panel .title {
        font-size: 24px !important;
        line-height: 33px !important;

    }

    .mobile-version .card-img-overlay h2 {
        font-weight: 400 !important;
        font-size: 14px !important;
        line-height: 20px !important;
        letter-spacing: -0.02em !important;
    }

    .mobile-version .card-img-overlay {
        padding: 0px;
    }

    .mobile-version .reset .container-margin {
        margin-top: 60%;

    }

    .mobile-version .reset-request .container-margin {
        margin-top: 60%;
    }

    .mobile-version .left-panel .btn {
        background: #3A2357;
        /* #FFFFFF */
        border: 1px solid #FFFFFF;
        box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.16);
        border-radius: 4px;

        color: #FFFFFF;
    }

    .mobile-version .centered {
        top: 54% !important;
    }
}

/* Ipad landscape */
@media only screen and (min-width: 1024px) and (orientation: landscape) {
    .mobile-version .container-margin {
        margin-top: 30% !important;
    }
}


/* copy-right */
@media only screen and (min-height: 900px) {
    .desktop-version .copyright-clmn {
        position: absolute;
        bottom: 1%;
    }
}


.desktop-version .footerMobileVersion {
    display: none;
}

/***** General & Common CSS *****/
body {
    overflow: auto;
    font-family: 'Nunito';
    background-image: none !important;
    background-color: #FAFAFA !important;
}

.Approved {
    display: none;
    visibility: hidden;
    float: right;
    font-family: Nunito;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #00796B !important;
}

.mobile-version .copyright-clmn {
    display: none
}

.page-layout {
    margin: 4% auto;
    width: 100%;
    height: 100%;
}

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

.card-container {
    margin: 76px 0;
}

/* TEMPORARY */
.reset-request .container-margin {
    margin-top: 188px;
    margin-bottom: 158px;
}

/* TEMPORARY */
.reset .container-margin {
    margin-top: 175px;
    margin-bottom: 158px;
}

/* TEMPORARY */
.check-email .container-margin {
    margin-top: 76px;
    margin-bottom: 76px;
}

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

/* TEMPORARY */
.login-page .container-margin {
    margin-top: 80px;
}

/***** TitleBox & Title CSS *****/

.title-box {
    text-align: center;
    margin-bottom: 68px;
}

.reset-request .title-box {
    margin-bottom: 44px;
}

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

.check-email .title-box {
    margin-bottom: 92px;
}

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

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

    margin-bottom: 12px;
}

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

/***** Footer Notes CSS *****/

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

.need-help {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 20px;

    position: absolute;
    bottom: 56px;
    width: 100%;
}

.need-help a {
    color: #009688;
}

.need-help a:hover {
    font-weight: 500;
    color: #00796B;
}

.redirect-login a {
    color: #009688;
}

.redirect-login a:hover {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #00796B;
}

.redirect-login a.war-link {
    color: #FCB414;
}

.redirect-login a.war-link:hover {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #FCB414;
}

.free-demo {
    margin-top: 29%;
    color: #FFFFFF;
}

.free-demo a {
    color: #FFB300;
}

.free-demo a:hover {
    color: #009688;
}

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

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

.redirect-alert {
    font-style: normal;
    font-weight: normal;
    font-size: 16px !important;
    line-height: 24px !important;

    color: #3A2357;
}

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

/***** General Button CSS *****/

.btn {
    font-style: normal;
    font-weight: bold;
    font-size: 14px;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    padding: 8px 32px !important;
    height: 40px;
}

.btn-background {
    background: #009688;
    color: #FFFFFF;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.32);
}

.btn:disabled {
    background-color: #009688 !important;
    color: #FFFFFF !important;
    opacity: 0.32 !important;
    cursor: default !important;
    box-shadow: none !important;
}

.btn:hover {
    background-color: #00796B;
    border-radius: 4px !important;
    padding: 8px 32px !important;
    border-color: #00796B !important;
    box-shadow: none !important;
}

a.btn {
    background-color: #FFFFFF;
    display: inline-flex !important;
}

a.btn:focus {
    background-color: #FFFFFF !important;
    display: inline-flex !important;
    border-color: #FFFFFF !important;
    color: #3c2458 !important;
}

a.btn:hover {
    border-color: #FFB300 !important;
    display: inline-flex !important;
    color: #FFFFFF !important;
}

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

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

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

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

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

/***** Card Box & Image CSS *****/
.card {
    width: 1254px;
    height: 688px;
}

.card-border {
    border-radius: 25px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.149);
    border: none;
}

.centered {
    position: absolute;
    top: 52.7%;
    left: 19%;
    transform: translate(-14%, -50%);
}

.back-img {
    background-image: url(../images/Mask_Group.svg);
    background-repeat: no-repeat;
}

.check-email-img-send-email {
    margin-left: -50px !important;
}
.check-email-img {
    height: 240px;
}

.left-panel {
    border-radius: 25px;
}

.login-page .back-img {
    background-position: right;
}

.img-overlay-margin {
    margin-top: 42.9%;
    margin-left: 18px;
}

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

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

.card-img-overlay h2 {
    color: #FFFFFF;
    font-weight: 500;
    font-size: 18px;
    line-height: 24px;

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

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

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

/***** 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: 1;
    top: 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;
    top: 14%;
    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: 8px 12px;
    z-index: 1;
    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: -5px;
    border-width: 5px;
    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;
}

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

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

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

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

/***** ^^ ^^ ^^ ^^ ^^ ^^ ^^ ^^ ^^ ^^ ^^ ^^ ^^ ^^ ^^ ^^ ^^ ^^ *****/
/***** TEMPORARY Until replacing SVG with new Icon Models CSS *****/

/***** Check Mark Success & Warning Icon CSS *****/
/***** TEMPORARY Until replacing SVG with new Icon Models CSS *****/

.check-mark-success::before {
    content: url("../images/ic_checkbox_fill_marked_24dp.svg");
}

.check-mark-warning::before {
    content: url("../images/Vector.svg");
}

span.check-mark-icon {
    visibility: hidden;
    z-index: 1;
    top: 20%;
    left: 102%;

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

span.visible {
    visibility: visible !important;
}

/***** ^^ ^^ ^^ ^^ ^^ ^^ ^^ ^^ ^^ ^^ ^^ ^^ ^^ ^^ ^^ ^^ ^^ ^^ *****/
/***** TEMPORARY Until replacing SVG with new Icon Models CSS *****/

/*                  Remember Me checkbox               */
.remember-me {
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 24px;
    cursor: pointer;
    color: #757575;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

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

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

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

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

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

/* Style the checkmark/indicator */
.remember-me .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);
}

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

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

.login-button {
    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;
}

/**************************************************** Social Button ****************************************************/
.or {
    margin-top: 30px;
    margin-bottom: 10px;
    width: 100%;
    display: inline-block;
    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: 136px;
    color: #757575;
}

.googleLogin {
    display: flex;
    float: left;
    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: 156px;
    height: 40px;
}

.fbLogin {
    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: 156px;
    height: 40px;
}

.sessionExpired{
    display: inline-flex;
}

.reset-request .sessionExpired{
    display: inline-flex;
    margin-bottom: 32px;
}

.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;
    margin-bottom: auto;
    content: url("../images/ic_info_24dp.svg");
}

.hidden {
    visibility: hidden;
}