/* Global styles */
html, body {
    font-family: Lato, Sans-Serif;
}

a:hover {
    color: #1f787f;
}

.body-background-circle header {
    text-align: center;
    margin: 50px 0 25px 0;
}

.body-background-circle header img {
    width: 90%;
}

header > nav {
    height: 90px;
    background-color: #fff;
    box-shadow: 0 0 20px #cfcfcf;
}

input::placeholder {
    color: #e3e2e3;
    font-size: 17px;
    line-height: 30px;
}

input[type=text],
input[type=email],
input[type=password],
input[type=tel] {
    width: 39px;
    height: 22px;
    font-size:14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.57;
    letter-spacing: normal;
    color: black;
    width: 320px;
    height: 36px;
    border-radius: 7px;
    box-shadow: inset 1px 2px 3px 0 rgba(0, 0, 0, 0.21);
    border: solid 1px #cbcbcb;
    background-color: #fff;
    padding-left:7px;
    cursor:auto;
}
input[type="email"]::-webkit-input-placeholder,
input[type="password"]::-webkit-input-placeholder,
input[type="text"]::-webkit-input-placeholder {
    width: 100%;
    height: 22px;
    font-size: 14px !important;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: normal;
    color: #cdd4dc;
    padding-left: 5px;
    vertical-align: middle;
}

.input-error {
    border: solid 1px #e02020 !important;
}


input[type="email"]::-moz-placeholder,
input[type="password"]::-moz-placeholder,
input[type="text"]::-moz-placeholder {
    font-size: 14px !important;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: normal;
    color: #cdd4dc;
    padding-left: 7px;
    vertical-align: middle;
}

input[type="email"]:-ms-input-placeholder,
input[type="password"]:-ms-input-placeholder,
input[type="text"]:-ms-input-placeholder {
    font-size: 14px !important;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: normal;
    color: #cdd4dc;
    padding-left: 7px;
    vertical-align: middle;
}


input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus,
input[type=tel]:focus {
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.57;
    letter-spacing: normal;
    color: black;
    width: 320px;
    height: 36px;
    border-radius: 7px;
    box-shadow: inset 1px 2px 3px 0 rgba(0, 0, 0, 0.21);
    border: solid 1px #cbcbcb;
    background-color: #fff;
    outline: none;
    font-size: 14px;
}
        /* Global classes */
.primary-color {
    color: var(--primary-color, #30b34c) !important;
}

.secondary-color {
    color: var(--secondary-color, #1f787f) !important;
}

.secondary-background {
    background-color: var(--secondary-color, #1f787f) !important;
}

.full-width {
    width: 100% !important;
}

.italic {
    font-style: italic;
}

.body-background-circle {
    background-repeat: no-repeat;
    background-position-x: 1600px;
    background-position-y: top;
}

.body-background-circle .container {
    max-width: 350px;
}

.body-background-circle input::placeholder {
    /*color: #1f787f;*/
    font-size: 26px;
}

.body-background-circle input:focus::placeholder {
    /*color: #30b34c;*/
}

.body-background-circle input.error {
    border-bottom: 3px solid #c60321;
    margin-bottom: 0;
}

.body-background-circle input.error + .error-wrapper {
    background-color: #d45561;
    color: #fff;
    font-size: 20px;
    font-weight: 100;
    padding: 5px 20px 10px 20px;
    border-radius: 0 0 10px 10px;
}

input.input-validation-error,
textarea.input-validation-error,
select.input-validation-error  {
    background: var(--White);
    border: 1px solid #e02020;
}

input:focus.input-validation-error,
textarea:focus.input-validation-error,
select:focus.input-validation-error {
    background: var(--White);
    border: 1px solid #e02020;
}

.container-fluid {
    max-width: 1280px;
}

.container-fluid .greeting-wrapper {
    margin-top: 160px;
}

.big-round {
    width: 32px;
    height: 32px;
    border-radius: 20px;
    float: left;
    margin-top: 3px;
}

.manage-wrapper > .nav {
    margin-bottom: 20px;
}

.manage-wrapper > .nav > .nav-item {
    margin-right: 20px;
}

.manage-wrapper > .nav > .nav-item > .nav-link {
    font-size: 20px;
    color: #000;
}

.manage-wrapper > .nav > .nav-item > .nav-link.active {
    border-bottom: 3px solid #30b34c;
}

.box-shadow-wrapper {
    background-color: #fff;
    border-radius: 7px;
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.07);
}

.manage-inner {
    padding: 30px 75px 40px 30px;
    margin-bottom: 100px;
}

.manage-information {
    margin-left: 50px;
}

.manage-information > .title {
    font-size: 22px;
    font-weight: bold;
    border-bottom: 2px solid #1f787f;
    padding-bottom: 5px;
    margin-bottom: 20px;
    overflow: auto;
}

.note {
    font-size: 18px;
    margin-top: 40px;
    color: #8a8889;
}

.error-bubble ul {
    margin: 0;
    padding: 0;
}

    .error-bubble ul li {
        list-style-type: none;
        /*margin: 0;
        background-color: #d7041a;
        color: #fff;
        font-size: 17px;
        line-height: 32px;
        font-weight: 200;
        margin-bottom: 30px;
        border-radius: 15px;
        padding: 6px 12px;
        box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.07);*/
        text-decoration: none;
        color: #e02020;
        font-size: 14px;
    }

.code {
    font-weight: bold;
    font-family: 'Courier New';
}

.modal-backdrop {
    background-color: #30b34c;
}

.modal-dialog {
    min-width: 40%;
}

.modal-content {
    padding: 30px;
}

/* Buttons */
.btn {
    cursor: pointer;
}

.btn:disabled {
    background-color: #cccccc !important;
    opacity:1;
}

/*.body-background-circle .btn {
    font-size: 17px;
}*/

.btn-rounded {
    width: 320px;
    height: 36px;
    border-radius: 7px;
    vertical-align: middle;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: normal;
    text-align: center;
    color: #fff;
}

.btn-inverse {
    color: var(--primary-color, #30b34c) !important;
    background-color: white;
    line-height: 22px !important;
    width: 318px;
    border: 1px solid;
    border-color: var(--primary-color, #30b34c) !important;
}

.login-after-reset, .login-after-reset:active, .login-after-reset:hover {
    background-color: #1e9e3d !important;
}

.btn-rounded:hover {
    color: #fff;
}

.show-password-btn {
    position: absolute;
    right: 15px;
    top: 5px;
    border: 0;
    background-color: transparent;
    color: #8a8889;
    font-size: 24px;
    outline: none !important;
    cursor: pointer;
}

.body-background-circle .btn.long-btn {
    font-size: .8rem;
}

/*input[type=text] + .show-password-btn {
    color: #1f787f;
}

input[type=text]:focus + .show-password-btn {
    color: #30b34c;
}*/

.btn-small-text {
    font-size: 13px !important;
}

.btn-white {
    background-color: #fff;
    box-shadow: 0px 5px 10px #f0f0f0;
}

/* Checkbox */
input[type=checkbox] {
    position: absolute;
    opacity: 0;
}

input[type=checkbox] + label {
    position: relative;
    cursor: pointer;
    padding: 0;
    color: #8a8889;
    font-size: 14px;
}

input[type=checkbox] + label::before {
    content: '';
    margin-right: 8px;
    display: inline-block;
    vertical-align: text-top;
    width: 15px;
    height: 15px;
    background: #f7f7f7;
    border-radius: 3px;
    box-shadow: inset 0px 1px 2px 1px rgba(0, 0, 0, 0.1);
}

    input[type=checkbox]:checked + label::before {
        background-color: var(--primary-color, #30b34c) !important;
        box-shadow: none;
    }

input[type=checkbox]:checked + label:after {
    content: '';
    position: absolute;
    left: 3px;
    top: 10px;
    background: white;
    width: 2px;
    height: 2px;
    box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
}

/* Login */
.greeting-wrapper {
    text-align: center;
    font-size: 33px;
    line-height: 35px;
    font-weight: bold;
    margin-bottom: 70px;
}

.greeting-wrapper span {
    color: var(--primary-color, #30b34c) !important;
}

.primary-background {
    background-color: var(--primary-color, #30b34c);
}

.logo-background {
    width: 80%;
    height: 90px;
    background-image: var(--logo);
    background-size: contain;
    background-repeat: no-repeat;
    background-position-y: center;
    display: inline-block;
}

.login-form {
    margin-bottom: 60px;
}

.login-form h2 {
    text-align: center;
    font-size: 27px;
    line-height: 35px;
    font-weight: bold;
    margin-bottom: 33px;
}

.login-form p {
    margin-top: 27px;
    margin-bottom: 27px;
    color: #8a8889;
}

.login-form .border-bottom {
    padding-bottom: 20px;
    margin-top: 20px;
}

.additional-links {
    margin-top: 20px;
}

.additional-links .italic {
    color: #8a8889;
}

/* Profile */
#profile_info {
    font-size: 20px;
}

#profile_info a {
    font-size: 18px;
}

#profile_info .row {
    margin-top: 15px;
}

#profile_info.write .row {
    margin-top: 10px;
}

#profile_info .read-state,
#profile_info.write .write-state {
    display: block;
}

#profile_info.write .read-state,
#profile_info .write-state {
    display: none;
}

/* Two-factor authentication */
#enable_authentication p {
    color: #8a8889;
    line-height: 34px;
}

/* Only for circle-background */
@media (min-width: 2150px) {
    .body-background-circle {
        background-position-x: right;
    }
}

@media(max-width: 430px) {
    .marg25neglayout {
        margin-top: -30px;
    }
}

.form-group > input[type="email"]::-webkit-input-placeholder,
.form-group > input[type="password"]::-webkit-input-placeholder,
.login-form.marg30neg > form > div.form-group > input[name="Code"]::-webkit-input-placeholder,
.login-form.marg30neg > form > div.form-group > input#Email::-webkit-input-placeholder {
    font-size: 20px;
}

.form-group > .intl-tel-input.allow-dropdown.separate-dial-code > input[type="tel"]::-webkit-input-placeholder {
    font-size: 20px;
    color: lightgray;
}

.size27 {
    margin-top: -18px;
    font-size: 27px;
}

.size18 {
    font-size: 18px;
}

.marg30neg {
    margin-top: -30px;
}

.orDiv {
    display: block;
    text-align: center;
    font-size: 25px;
    line-height: 35px;
    font-weight: bold;
    margin: 7px 0px 7px 0px;
}
.marg10neg {
    margin-top: -10px !important;
}

.margTopBottom10neg {
    margin-top: -10px;
    margin-bottom: -10px;
}

.size25 {
    font-size: 25px !important;
}

.pswdGrey {
    color: #6c6c6c !important;
    width: 320px;
    height: 22px;
    font-size: 14px;
    line-height: 1.57;
    text-align: right;
    text-decoration: underline;
}

.marg27neg{
    margin-top:-10px !important;
    margin-bottom:10px !important;
}

.marg15neg {
    text-align: center;
    margin-top: -15px;
}

.marg10pos{
    margin-top:10px;
    margin-bottom:10px;
}

.marg20pos{
    margin: 0px 0px 20px 0px;
}
.floatRight{
    float: right;
}

.border-top-marg10 {
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
    margin-top:10px;
}

@media (min-width: 380px) {
    .body-background-circle .btn.long-btn {
        font-size: 17px;
    }
}

.failureMesg {
    margin: -2px 0px 10px 0px;
    text-align: center;
    font-size: 15px;
}

.greenColor {
    color: #30b34c;
}

.lnkBtn {
    background: none !important;
    color: #30b34c;
    color: var(--primary-color, #30b34c) !important;
    border: none;
    padding: 0 !important;
    font: inherit;
    cursor: pointer;
    font-weight: bold;
    font-family: inherit;
}

div.customError {
    /*list-style-type: none;
    margin: 0;
    background-color: #d7041a;
    color: #fff;
    font-size: 17px;
    line-height: 32px;
    font-weight: 200;
    margin-bottom: 30px;
    border-radius: 15px;
    padding: 6px 12px;
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.07);*/
    color: #e02020;
    font-size: 14px;
}

.displayNone {
    display: none;
}

.displayInline{
    display:inline;
}

.btn-back {
    padding: 6px 25px 10px;
    border-radius: 23px;
    color: #fff;
    text-align: center;
    background-color: #1f787f !important;
    font-size: 15px;
    float:left;
    cursor:pointer;
    border:0;
}

.btn-back:hover {
    color: #fff;
}

.marg5pos{
    margin-top:5px;
}

.centerAlign {
    text-align: center;
}

.leftAlign {
    text-align: left;
}

.clsEmail::-webkit-input-placeholder, .clsEmail:active::-webkit-input-placeholder {
    color: var(--primarycolor, #30b34c) !important;
}

.wcDiv {
    margin-bottom: 70px;
    /*display: flex;*/
    display: inherit;
    justify-content: center;
}

.obWelcome {
    width: 377px;
    height: 65px;
    color: #525a53;
    font-family: "Visia Pro";
    font-size: 45px;
    font-weight: 700;
    letter-spacing: -0.9px;
    line-height: 20px;
    margin-top: 30px;
}

.obMsg {
    width: 599px;
    /*height: 171px;*/
    color: #000000;
    font-family: "Visia Pro";
    font-size: 20px;
    font-weight: 400;
    letter-spacing: -0.4px;
    line-height: 21px;
}

.firstobhr {
    width: 80%;
    display: inline-flex;
    margin-left: 50px;
}

.stepHeading {
    color: #525a53;
    font-family: "Visia Pro";
    font-size: 45px;
    font-weight: 700;
    letter-spacing: -0.9px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: 0px 30px 30px 30px;
    display: inline-block;
    margin-bottom: 40px;
}

.stepBody {
    color: #000000;
    font-family: "Visia Pro";
    font-size: 20px;
    font-weight: 400;
    letter-spacing: -0.4px;
    line-height: 21px;
    margin-bottom: 60px;
}

.stepSubBody {
    color: #000000;
    font-family: "Visia Pro";
    font-size: 20px;
    font-weight: 400;
    letter-spacing: -0.4px;
    margin:0;
}

.stepBtnSecondary {
    width: 286px;
    height: 50px;
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.07);
    border-radius: 25px;
    background-color: #1f787f;
    color: #ffffff;
    font-family: "Visia Pro";
    font-size: 18px;
    font-weight: 700;
    line-height: 30px;
}

    .stepBtnSecondary:hover, .stepBtnPrimary:hover {
        color: #ffffff;
    }

.stepBtnPrimary {
    width: 286px;
    height: 50px;
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.07);
    border-radius: 25px;
    background-color: #3bac4e;
    color: #ffffff;
    font-family: "Visia Pro";
    font-size: 18px;
    font-weight: 700;
    line-height: 30px;
}

.mgB20pos{
    margin-bottom:20px;
}

.mainSubDiv {
    margin-bottom: 70px;
    text-align: center;
}

.powerddByDiv {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-bottom:60px;
}

.onboardingMainDiv {
    width: 90%;
    margin: auto;
}

    .onboardingMainDiv > div.mainSubDiv > div > a.btn.stepBtnSecondary > font > font
    , .onboardingMainDiv > div.mainSubDiv > div > a.btn.stepBtnPrimary > font > font {
        vertical-align: unset !important;
    }

    .startTxt {
        color: #3bac4e;
        font-family: "Visia Pro";
        font-size: 45px;
        font-weight: 700;
        letter-spacing: -0.9px;
    }

.powerBy {
    color: #333333;
    font-family: "Visia Pro";
    font-size: 9px;
    font-weight: 300;
    margin-left: 2px;
}

.powerByName {
    color: #3bac4e;
    font-family: "Visia Pro";
    font-size: 9px;
    font-weight: 300;
}

/*@media screen and (max-width: 400px) {
    .wcDiv {
        margin-bottom: 70px;
        display: inherit;
        justify-content: center;
    }
}*/

.p-greetings {
    font-size: 14px;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.43;
    letter-spacing: normal;
    text-align: center;
    color: #6c6c6c;
}

.label-formfield {
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.57;
    letter-spacing: normal;
    color: #6c6c6c;
}
#lblGreetings{
    margin-bottom:0;
}

.link-smartlockr {
    height: 20px;
    font-size: 14px;
    line-height: 1.43;
    color: #6c6c6c;
}

    .link-smartlockr:hover, .link-smartlockr:active {
        text-decoration:none;
        color: #6c6c6c;
    }

.div-poweredby {
    padding: 5px 0 15px 0;
}
.align-center {
    text-align:center;
}
input[type=email]::-ms-clear {
    display: none !important;
}
input:-ms-input-placeholder:focus {
    color: #999;
}
.margin-30-top{
    margin-top:30px;
}

.privacy-links {
    color: #6c6c6c !important;
    text-decoration: underline !important;
}

.forgot-password-submit {
    margin-top: 30px !important;
}

.forgot-password-return-to-login {
    margin-top: -15px !important;
}

.color-green {
    background-color: var(--primary-color, #30b34c) !important;
}

.reset-password-submit {
    background-color: #1e9e3d;
    margin-top: 10px;
}

.sms-login-code-resend {
    margin-top: -22px;
    width: max-content;
}

.sms-login-code-resend-link {
    color: #6c6c6c;
    text-decoration: underline;
    font-size: 14px;
    margin-left: 2px;
    font-family: Lato;
    cursor: pointer;
}

.sms-login-code-resend-link-text {
    display: none;
    font-size: 13.5px;
    font-weight: normal;
    font-family: Lato;
    text-align: left;
    margin-top: 5px;
    text-decoration: none;
    color: #6c6c6c
}

.sms-login-code-resend-text {
    text-decoration: none !important;
    text-align: left !important
}

.sms-login-code-resend-verify-div {
    margin-top: -15px !important;
}

.sms-signup-submit {
    background-color: #1e9e3d;
    margin-top: 1rem !important;
}

.overflow-auto {
    overflow: auto;
}

.external-login {
    width: 49%;
    float: left;
    min-height: 10px;
}

.external-login-other {
    width: 49%;
    float: right;
}

.clear-both {
    clear: both;
}

.no-border-bottom {
    border-bottom: 0;
}

.layout-footer {
    text-align: right;
    border-top: 0;
}

.layout-account-greetings {
    bottom: 5px;
    margin-left: 9px;
}

.font-size-12 {
    font-size: 12px;
}

.margin-left-negative-10 {
    margin-left: -10px;
}

.btnResendSmsCodeDisabled {
    opacity: 0.17 !important;
    color: #6c6c6c !important;
    text-decoration: none !important;
    font-size: 14px !important;
    margin-left: 2px !important;
    font-family: Lato !important;
}

.btnResendSmsCodeEnabled {
    color: #6c6c6c !important;
    text-decoration: underline !important;
    font-size: 14px !important;
    margin-left: 2px !important;
    font-family: Lato !important;
    cursor: pointer;
    text-decoration: underline !important;
}

.btn-logout {
    background-color: #38B34C !important;
    border: 1px solid #2ab34b;
}

.send-verification-email {
    background: none;
    border: 0;
}

.onboarding-div {
    float: left;
    display: inline-grid;
}

.error-page {
    padding-top: 100px;
}

/* css for mobile devices with small screen */
@media (max-width:350px) and (min-width:280px) {
    .body-background-circle .container {
        max-width: 100%;
    }

    .btn-rounded {
        width: 100%;
    }

    input[type="text"], input[type="email"], input[type="password"], input[type="tel"] {
        width: 100% !important;
    }
}