/*
HUB Dashboard
Version: v1
*/

@font-face {
    font-family: "SF Mono";
    font-weight: 600;
    src: url("https://sf.abarba.me/SFMono-Semibold.otf");
    font-display: auto;
}

:root {
    --orange: #FA861E;
    --cyan: #007AFF;
    --dark: #030303;
    --gray: #9EA0A1;
    --yellow: #FFF200;
    --green: #17A728;
    --purple: #A237F3;
    --c1: #7FC2E4;
    --c2: #BDE8FB;
    --c3: #162056;
    --c4: #00BFF0;
    --c5: #FFE282;
    --c6: #FFF0C0;
    --c7: #E60A14;
    --c8: #E6E6E6;
}

html, body {
    height: 100%;
}

#root {
    overflow-y: scroll;
}

@media only screen and (max-width: 780px) {
    body {
        height: auto;
    }
}

body {
    font-family: 'Montserrat', system, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif;
    font-size: 16px;
    display: flex;
    flex-flow: column wrap;
    background-color: #F4F4F7;
}

hr {
    border: 0;
    outline: 0;
    background-color: #d8d8d8;
    height: 1px;
    margin: 2rem auto;
}

/* login page */
.login-page main {
    height: 100%;
    display: flex;
    flex-flow: row nowrap;
}

.vl {
    border-left: 4px solid white;
    height: 65%;
    margin-top: auto;
    margin-bottom: auto;
    border-radius: 2px;
}

.login-page main > section a:hover {
    color: var(--cyan);
}

@media only screen and (max-width: 780px) {
    .login-page main {
        flex-flow: column nowrap;
    }
}

.login-page main > section {
    flex: 1 1 50%;
}

@media only screen and (max-width: 780px) {
    .login-page main > section {
        flex: 1 0 auto;
    }
}

/*left with frame*/
.login-page main > section.leftFrame {
    background-color: transparent;
    padding: 1rem;
    text-align: left;
    flex-flow: column nowrap;
    overflow-y: scroll;
}

@media only screen and (max-width: 780px) {
    .login-page main > section.leftFrame {
        padding: 2rem 1rem 4rem;
    }

    .login-page main > section.leftFrame {
        overflow-y: auto;
    }
}

.login-page main > section.leftFrame.orange {
    background-color: var(--orange);
}

.login-page main > section.leftFrame.cyan {
    background-color: var(--cyan);
}


.login-page main > section.leftFrame.white {
    background-color: transparent;
}

.login-page main > .leftFrame svg {
    width: 200px;
    height: 64px;
}

@media only screen and (max-width: 780px) {
    .login-page main > .leftFrame .logo {
        margin-bottom: 3rem;
    }
}

.login-page main .leftFrame > div {
    max-width: 640px;
    margin: auto auto auto 4rem;
}

@media only screen and (max-width: 1280px) {
    .login-page main .leftFrame > div {
        margin-left: 1rem;
    }
}

@media only screen and (max-width: 1024px) {
    .login-page main .leftFrame > div {
        margin-top: 2rem;
        margin-left: 0;
        padding-bottom: 2rem;
    }
}

@media only screen and (max-width: 320px) {
    .login-page main .leftFrame > div {
        margin-top: 1rem;
        padding-bottom: 1rem;
    }
}

/**/

.leftFrame .step-indicator {
  margin: 0 auto !important;
}

.leftFrame .logo {
  max-width: 245px;
  display: block;
  padding: 1rem 0;
  position: relative;
  top: 10px;
  left: -16px;
  border-top-right-radius: 60px;
  border-bottom-right-radius: 60px;
  background-color: #ffffff;
}

.leftFrame .logo svg {
  margin-left: 1rem;
}

.login-page main .leftFrame > div h1,
.login-page main .leftFrame > div h1 {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    color: #000000;
    margin-bottom: 1rem;
}

@media only screen and (max-width: 480px) {
    .login-page main .leftFrame > div h1 {
        font-size: 2rem;
        color: #000000;
    }
}

.login-page main .leftFrame > div p {
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: .625rem;
    color: #000000;
}

@media only screen and (max-width: 480px) {
    .login-page main .leftFrame > div p {
        line-height: 1.6;
        font-size: 1rem;
        color: #000000;
    }
}

.login-page main .leftFrame > div p:last-of-type {
    margin-bottom: 2rem;
}

.login-page main .leftFrame > div ul {
    margin-bottom: 1rem;
    list-style-position: inside;
    line-height: 2;
}

.login-page main .leftFrame .templates li p {
    font-size: .875rem;
    margin: auto 0 auto .625rem;
}

@media only screen and (max-width: 320px) {
    .login-page main .leftFrame .templates li p {
        margin-top: .625rem;
    }
}

.login-page main .leftFrame .form-wrap {
    background: rgba(255,255,255,0.50);
    border: 1px solid var(--c8);
    border-radius: 24px;
    width: 600px;
    overflow: hidden;
    padding-left: 1rem;
    padding-right: 1rem;
}


/*end left with frame*/

.login-page main > section.left {
    /*    background-color: var(--c3);*/
    color: #ffffff;
    padding: 1rem;
    text-align: left;
    display: flex;
    flex-flow: column nowrap;
    overflow-y: scroll;
}

@media only screen and (max-width: 780px) {
    .login-page main > section.left,
    .login-page main > section.right {
        padding: 2rem 1rem 4rem;
    }

    .login-page main > section.left {
        overflow-y: auto;
    }
}

.login-page main > section.left.orange {
    background-color: var(--orange);
}

.login-page main > section.left.cyan {
    background-color: var(--cyan);
}


.login-page main > section.left.white {
    background-color: #ffffff;
}

.login-page main > .left svg {
    width: 200px;
    height: 64px;
}

.login-page main > .left .login-gohubedenred {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 10%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

    .login-page main > .left .login-gohubedenred .logo-login-gohubedenred {
        width: 375px !important;
        height: 117px !important;
    }

@media only screen and (max-width: 780px) {
    .login-page main > .left .logo {
        margin-bottom: 3rem;
    }
}

.login-page main .left > div {
    max-width: 640px;
    margin: 8rem auto auto 4rem;
}

@media only screen and (max-width: 1280px) {
    .login-page main .left > div {
        margin-left: 1rem;
    }
}

@media only screen and (max-width: 1024px) {
    .login-page main .left > div {
        margin-top: 2rem;
        margin-left: 0;
        padding-bottom: 2rem;
    }
}

@media only screen and (max-width: 320px) {
    .login-page main .left > div {
        margin-top: 1rem;
        padding-bottom: 1rem;
    }
}

.left .step-indicator {
    margin: 0 auto !important;
}

.left .logo {
    max-width: 245px;
    display: block;
    padding: 1rem 0;
    position: relative;
    top: 10px;
    left: -16px;
    border-top-right-radius: 60px;
    border-bottom-right-radius: 60px;
    background-color: #ffffff;
}

.left .logo svg {
  margin-left: 1rem;
}

.login-page main .left > div h1,
.login-page main .right > div h1 {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    color: #ffffff;
    margin-bottom: 1rem;
}

@media only screen and (max-width: 1024px) {
    .login-page main .right > div h1 {
        font-size: 2rem;
    }
}

@media only screen and (max-width: 480px) {
    .login-page main .left > div h1,
    .login-page main .right > div h1 {
        font-size: 2rem;
    }
}

.login-page main .right > div h1 {
    color: var(--dark);
    text-align: left;
}

.login-page main .left > div p {
    font-size: 1.125rem;
    line-height: 1.8;
    margin-bottom: .625rem;
}

@media only screen and (max-width: 480px) {
    .login-page main .left > div p {
        line-height: 1.6;
        font-size: 1rem;
    }
}

.login-page main .left > div p:last-of-type {
    margin-bottom: 2rem;
}

.login-page main .left > div ul {
    margin-bottom: 1rem;
    list-style-position: inside;
    line-height: 2;
}

.login-page main .right {
    display: flex;
    flex-flow: column nowrap;
    overflow-y: scroll;
}

@media only screen and (max-width: 1280px) {
    .login-page main .right {
        padding: 0 1rem;
    }
}

@media only screen and (max-width: 1024px) {
    .login-page main .right {
        padding: 2rem 1rem;
    }
}

@media only screen and (max-width: 780px) {
    .login-page main .right {
        overflow-y: unset;
        padding: 2rem 1rem;
    }
}

.login-page main .right > .form {
    margin: auto;
    max-width: 600px;
    width: 100%;
}

@media only screen and (max-width: 780px) {
    .login-page main .right > .form {
        width: 100%;
        max-width: 100%;
    }
}

.register-confirm main .right .form-wrap,
.register-alreadyexists main .right .form-wrap,
.register-contaedenred main .right .form-wrap,
.login-page main .right .form-wrap {
    background: rgba(255,255,255,0.50);
    border: 1px solid var(--c8);
    border-radius: 24px;
    width: 600px;
    overflow: hidden;
}

@media only screen and (max-width: 780px) {
    .register-confirm main .right .form-wrap,
    .register-alreadyexists main .right .form-wrap,
    .register-contaedenred main .right .form-wrap,
    .login-page main .right .form-wrap {
        width: 100%;
    }
}

@media only screen and (max-width: 1280px) {
    .register-confirm main .right .form-wrap,
    .register-alreadyexists main .right .form-wrap,
    .register-contaedenred main .right .form-wrap,
    .login-page main .right .form-wrap {
        max-width: 100%;
        margin: 0 auto;
    }
}

.form-wrap + .form-wrap {
    margin-top: 2rem;
}

@media only screen and (max-width: 1280px) {
    ..register-confirm main .right .form-wrap + .form-wrap,
    .register-alreadyexists main .right .form-wrap + .form-wrap,
    .register-contaedenred main .right .form-wrap + .form-wrap,
    .login-page main .right .form-wrap + .form-wrap {
        margin-top: 2rem;
    }
}

.form-wrap + h1 {
    margin-top: 2rem;
}

.form-wrap a:not(.btn) {
    text-decoration: none;
    font-weight: 500;
    color: var(--dark);
    font-size: .875rem;
    text-align: left;
}

.login-page main .right > .form p:first-of-type {
    margin-top: 2rem;
}

.login-page main .right > .form p {
    text-align: left;
    font-size: .875rem;
}

    .login-page main .right > .form p a {
        text-decoration: none;
        font-weight: 500;
        color: var(--dark);
    }

/* platforms */
.platform-list {
    list-style-type: none;
}

    .platform-list li {
        padding: 1rem 0;
        margin: 0 16px;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #E6E6E6;
    }

@media only screen and (max-width: 320px) {
    .platform-list li {
        flex-flow: column nowrap;
        justify-content: center;
    }

    .login-page main .right > .form .platform-list li p {
        text-align: center;
        margin-bottom: 1rem !important;
    }

    .platform-list li figure {
        margin-bottom: 1rem;
    }

        .platform-list li figure img {
            margin: auto;
        }
}

.platform-list li:last-child {
    border-bottom: 0;
}

.login-page main .right > .form .platform-list li p {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--dark);
    margin-top: 0;
    margin: auto 0;
}

.platform-list .btn {
    padding: 10px 20px;
}

    .platform-list .btn.svg {
        line-height: 1;
        padding: 6px 20px;
        min-width: 100px;
        max-height: 35px;
    }

    .platform-list .btn.btn-gray.svg {
        width: 32px;
        height: 32px;
        padding: 6px;
        margin: auto 0;
        min-width: 0;
    }

.platform-list.transactions li {
    flex-flow: column nowrap;
}

.transactions .data-header {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    flex: 1 1 100%;
    margin-bottom: 1rem;
}

    .transactions .data-header a svg {
        transition: transform 140ms linear;
    }

.transactions .expand .data-header a svg {
    transform: rotate(180deg);
}

.transactions .t-cont {
    height: auto;
    opacity: 1;
    transition: opacity 140ms linear, height 140ms linear;
}

.transactions .expand .t-cont {
    opacity: 0;
    height: 0;
    visibility: hidden;
}

.transactions .input-third {
    flex: 1 1 100%;
}

@media only screen and (max-width: 375px) {
    .transactions .input-third {
        flex-flow: column nowrap;
    }
}

.transactions .input-third > .input-container.checkbox {
    margin-left: 0;
}

.transactions .input-third > .input-container:last-child {
    margin-right: 0 !important;
}

/* activation code */
.codeact {
    padding: 1rem 2rem;
    background-color: #ffffff;
    font-size: 1.375rem !important;
    font-weight: 600;
    font-family: 'SF Mono', monospace;
    color: var(--dark);
    display: inline-block;
    border-radius: 5px;
}

/* carrega */
.templates li {
    display: flex;
    flex-flow: row nowrap;
}

@media only screen and (max-width: 320px) {
    .templates li {
        flex-flow: column nowrap;
        text-align: center;
    }
}

.templates li:not(:last-child) {
    margin-bottom: .625rem;
}

.login-page main .left .templates li p {
    font-size: .875rem;
    margin: auto 0 auto .625rem;
}

@media only screen and (max-width: 320px) {
    .login-page main .left .templates li p {
        margin-top: .625rem;
    }
}

/* btn */
.btn {
    -webkit-appearance: none;
    outline: 0;
    margin: 0;
    border: 0;
    font-family: inherit;
    font-size: .812rem;
    line-height: 1;
    display: inline-block;
    padding: .625rem 1rem;
    background-color: var(--c3);
    color: #ffffff;
    border-radius: 16px;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    border: 1px solid transparent;
    transition: transform 100ms linear, box-shadow 120ms linear;
    box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
}

@media only screen and (max-width: 414px) {
    .form-actions-btns .btn {
        width: 100%;
    }
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 7px 14px rgba(50,50,93,.1),0 3px 6px rgba(0,0,0,.08);
}

.btn:active {
    transform: scale(.95);
    box-shadow: 0 6px 12px -2px rgba(50,50,93,.25),0 3px 7px -3px rgba(0,0,0,.3);
}

.btn.btn-white {
    color: #ffffff;
    border: 1px solid #ffffff;
}

.btn.btn-cyan {
    background-color: var(--cyan);
    color: #ffffff;
}

.btn.btn-account {
    background-color: var(--c3);
    color: #ffffff;
    border-color: #ffffff;
}

.btn.btn-black {
    background-color: var(--dark);
    color: #ffffff;
}

.btn.btn-yellow {
    background-color: var(--yellow);
    color: var(--dark);
}

.btn.btn-green {
    background-color: #44C002;
    color: #ffffff;
}

.btn.btn-gray {
    background-color: #ffffff;
    border: 1px solid #D5D5D5;
}

    .btn.btn-gray svg {
        margin: 7px 0 auto 0;
    }

.btn-gray.active svg {
    transform: rotate(180deg);
}

/* inputs */
.input-half,
.input-third {
    display: flex;
    flex-flow: row nowrap;
}

@media only screen and (max-width: 480px) {
    .input-half {
        flex-flow: column nowrap;
    }
}

.input-half > .input-container {
    margin: 0 1rem .875rem 1rem;
    flex: 1 1 50%;
}

@media only screen and (max-width: 480px) {
    .input-half > .input-container {
        flex: 1 1 100%;
    }
}

.input-half > .input-container:first-child {
    margin-right: 0;
}

@media only screen and (max-width: 480px) {
    .input-half > .input-container:first-child {
        margin-right: 1rem;
    }
}

.input-third {
    margin-bottom: .625rem;
}

    .input-third:first-of-type {
        margin-top: 1rem;
    }

    .input-third > .input-container {
        margin-right: 0 !important;
        margin-top: 0;
        margin-bottom: 0;
        flex: 1 1 50%;
    }

        .input-third > .input-container:last-child {
            margin-right: 1rem !important;
        }

        .input-third > .input-container.checkbox {
            flex: 0 0 26px;
        }

@media only screen and (max-width: 480px) {
    .input-container.checkbox input[type="checkbox"] {
        transform: scale(2);
    }
}

.text-container {
    margin: .875rem 1rem;
}

.input-container {
    margin: .875rem 1rem;
}

    .input-container label,
    .input-container label[for] {
        font-size: .875rem;
        font-weight: 500;
        color: var(--dark);
        text-align: left;
        margin-bottom: .5rem;
        display: block;
    }

        .input-container label.error {
            font-style: italic;
            color: var(--c7);
            font-size: .875rem;
            margin-top: .625rem;
        }

    .input-container input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]),
    .input-container select,
    .input-container textarea {
        width: 100%;
        height: 43px;
        -webkit-appearance: none;
        outline: none;
        border: 1px solid var(--c8);
        box-sizing: border-box;
        padding: 13px 1rem;
        background-color: #f6f5f9;
        color: #131415;
        border-radius: 7px;
        font-size: .875rem;
        transition: border 140ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 140ms cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 140ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

        .input-container input:not([type="radio"]):not([type="checkbox"]):not([type="submit"])::placeholder,
        .input-container select::placeholder,
        .input-container textarea::placeholder {
            opacity: 1;
            color: #999999;
        }

        .input-container input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):focus,
        .input-container select:focus,
        .input-container textarea:focus {
            background-color: #ffffff;
            border: 1px solid var(--c3);
            box-shadow: 0 2px 4px 0 rgba(45,39,72,0.10);
        }

    .input-container.checkbox {
        margin: 1rem;
        display: flex;
        flex-flow: row nowrap;
    }

        .input-container.checkbox label {
            order: 2;
            font-weight: 400;
            font-size: .75rem;
            margin: auto auto auto 0;
            color: #575872;
            cursor: pointer;
        }

        .input-container.checkbox input[type="checkbox"] {
            margin: auto 6px auto auto;
            order: 1;
        }

    .input-container select {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="15" viewBox="0 0 10 15"><path fill="%23B6B9C0" d="M2 9C2.1 8.9 1.5 8.9 1 9 0.9 9.6 0.9 10.1 1 10L4 14C4.7 14.1 5.3 14.1 6 14L9 10C9.1 10.1 9.1 9.6 9 9 8.5 8.9 7.9 8.9 8 9L5 12 2 9Z"/><path d="M8 6C7.9 6.1 8.5 6.1 9 6 9.1 5.4 9.1 4.9 9 5L6 1C5.3 0.9 4.7 0.9 4 1L1 5C0.9 4.9 0.9 5.4 1 6 1.5 6.1 2.1 6.1 2 6L5 3 8 6Z" /></svg>');
        background-position: center right 10px;
        background-repeat: no-repeat;
    }

        .input-container select:focus {
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="15" viewBox="0 0 10 15"><path fill="%230E1630" d="M2 9C2.1 8.9 1.5 8.9 1 9 0.9 9.6 0.9 10.1 1 10L4 14C4.7 14.1 5.3 14.1 6 14L9 10C9.1 10.1 9.1 9.6 9 9 8.5 8.9 7.9 8.9 8 9L5 12 2 9Z"/><path d="M8 6C7.9 6.1 8.5 6.1 9 6 9.1 5.4 9.1 4.9 9 5L6 1C5.3 0.9 4.7 0.9 4 1L1 5C0.9 4.9 0.9 5.4 1 6 1.5 6.1 2.1 6.1 2 6L5 3 8 6Z" /></svg>');
        }

.form-wrap .form-actions-btns {
    text-align: center;
    /*    border-top: 1px solid #E3E8EE;
    background-color: #fafafa;*/
    padding: 1rem;
    margin-bottom: -20px;
}

@media only screen and (max-width: 780px) {
    .form-wrap .form-actions-btns {
        padding: 1rem;
    }
}

@media only screen and (max-width: 320px) {
    .form-wrap .form-actions-btns {
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
    }

        .form-wrap .form-actions-btns > * {
            margin: .625rem 0 !important;
            width: 100%;
            text-align: center !important;
        }
}

.form-actions-btns .btn {
    margin: -10px .625rem 0 0;
}

    .form-actions-btns .btn:last-child {
        margin-right: 0;
    }

.form-wrap .form-actions-btns .sso-login {
    font-weight: 600;
}

.form-wrap .form-actions-btns p {
    display: inline-block;
    margin: auto .625rem auto 0 !important;
}

/* hierarchy */
.hierarchy header {
    padding: 1rem;
    display: flex;
    justify-content: space-between;
}

    .hierarchy header svg {
        width: 108px;
        height: 66px;
    }

    .hierarchy header div {
        text-align: right;
    }

        .hierarchy header div h1 {
            font-size: 3rem;
            font-weight: 700;
            color: var(--dark);
        }

        .hierarchy header div p {
            margin: 1rem 0 0 0;
            font-size: 1.125rem;
            color: #838385;
            max-width: 600px;
            line-height: 1.6;
        }

.hierarchy main {
    display: flex;
    min-height: 800px;
    position: relative;
    justify-content: center;
    align-items: center;
}

    .hierarchy main .add p {
        font-size: .875rem;
        color: #A7A7A9;
        max-width: 320px;
        margin: 1rem auto;
        line-height: 1.6;
    }

.hierarchy .available-items {
    width: 240px;
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    padding: 1rem;
    background-color: #ffffff;
    border: 1px solid #DADADF;
    border-radius: 10px;
    box-shadow: 0 8px 20px 0 rgba(166,165,198,0.22);
}

    .hierarchy .available-items h4 {
        text-align: left;
        text-transform: uppercase;
        font-weight: 600;
        font-size: .875rem;
        color: var(--dark);
        text-transform: uppercase;
    }

    .hierarchy .available-items .items {
        margin-top: 1rem;
    }

        .hierarchy .available-items .items .item {
            padding: 8px 20px;
            border-radius: 20px;
            font-family: monospace;
            font-size: 16px;
            font-weight: 700;
            color: #ffffff;
            background-color: var(--cyan);
            -webkit-user-select: none;
            user-select: none;
            cursor: move;
            transition: transform 140ms linear, box-shadow 140ms linear;
        }

            .hierarchy .available-items .items .item:hover {
                transform: translateY(-2px) scale(1.05);
                box-shadow: 0 4px 20px 0 rgba(166,165,198,.5);
            }

            .hierarchy .available-items .items .item.purple {
                background-color: var(--purple);
            }

            .hierarchy .available-items .items .item.orange {
                background-color: var(--orange);
            }

            .hierarchy .available-items .items .item.green {
                background-color: var(--green);
            }

            .hierarchy .available-items .items .item.dark {
                background-color: var(--dark);
            }

            .hierarchy .available-items .items .item.yellow {
                background-color: var(--yellow);
                color: #000000;
            }

            .hierarchy .available-items .items .item:not(:last-child) {
                margin-bottom: .312rem;
            }

.hierarchy footer {
    width: 100%;
    position: absolute;
    bottom: 0;
    padding: 1rem;
    text-align: right;
}

/* drag */
.drag-list li {
    user-select: none;
}

/* fixes */
.alert-warning {
    text-align: left;
}

    .alert-warning ul {
        list-style-position: inside;
        margin-top: .625rem;
    }

.right .row {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

/* hide scrollbars */
.left,
.right {
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

    .left::-webkit-scrollbar { /* WebKit */
        width: 0;
        height: 0;
    }

    .right::-webkit-scrollbar { /* WebKit */
        width: 0;
        height: 0;
    }

.step-indicator ul {
    display: flex;
    flex-flow: row nowrap;
    list-style-type: none;
}

    .step-indicator ul li {
        width: 30px;
        height: 30px;
        display: block;
        background-color: rgba(128,194,227,.5);
        border-radius: 20px;
    }

        .step-indicator ul li.active {
            box-shadow: 0 0 12px rgba(0,175,255,.9);
            position: relative;
            background-color: #ffffff;
            color: var(--dark);
        }

.step-indicator {
    counter-reset: step;
}


    .step-indicator ul li:before {
        content: counter(step);
        counter-increment: step;
        width: 30px;
        height: 30px;
        display: block;
        margin: 0 auto 10px auto;
        border-radius: 50%;
        color: var(--dark);
        text-align: center;
        font-weight: bold;
    }


    .step-indicator ul li.active:not(:first-child)::before {
        width: 32px;
        height: 0px;
        background-color: #ffffff;
        position: absolute;
        transform: translateY(-50%);
        color: var(--dark);
    }

    .step-indicator ul li:not(:last-child) {
        margin-right: 2rem;
    }

    .step-indicator ul li span {
        display: none;
        opacity: 0;
        visibibility: hidden;
    }

/*Tags input*/
.bootstrap-tagsinput {
    width: 100%;
    border: 1px solid var(--c8);
    border-radius: 24px;
    background-color: #f6f5f9;
    box-shadow: none;
    color: #131415;
    transition: border 140ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 140ms cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 140ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

    .bootstrap-tagsinput input {
        border: none !important;
        box-shadow: none;
        outline: none;
        background-color: transparent;
        padding: 0 6px;
        margin: 0;
        width: auto !important;
        max-width: inherit;
    }

    .bootstrap-tagsinput .tag {
        color: #0767DB;
        border: 1px solid #0767DB;
        background-color: transparent;
        cursor: default;
        display: inline-flex;
        font-size: 0.8125rem;
        transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
        border-radius: 24px;
        padding: 2px 5px;
    }

        .bootstrap-tagsinput .tag [data-role="remove"]:after {
            display: block;
            content: url("data:image/svg+xml;charset=UTF-8, <svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='100' width='100'><path d='M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z'></path></svg>");
            height: 28px;
            width: 28px;
        }

        .bootstrap-tagsinput .tag [data-role="remove"]:hover {
            box-shadow: none;
        }

.collapser {
    border-radius: 6px;
}

    .collapser:hover {
        cursor: pointer;
        background-color: #eee;
    }

.field-validation-error,
.error {
    font-style: italic;
    font-size: 0.8rem;
    color: var(--red) !important;
}

.bootstrap-tagsinput input {
    height: calc(1.5em + .75rem + 2px);
}

/*Bootstrap select*/
.bootstrap-select .btn,
.form-group textarea,
.form-group input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]) {
    border: 1px solid var(--c8);
    padding: 13px 1rem;
    background-color: #f6f5f9;
    color: #131415;
    border-radius: 24px;
    font-size: .875rem;
    transition: border 140ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 140ms cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 140ms cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

    .bootstrap-select .btn:focus,
    .form-group textarea:focus,
    .form-group input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):focus {
        background-color: #ffffff;
        border: 1px solid var(--c3);
        box-shadow: 0 2px 4px 0 rgba(45,39,72,0.10);
        outline: none !important;
    }

.bootstrap-select .btn {
    padding: 10px 1rem;
    box-shadow: none;
    text-transform: none;
}

.bootstrap-select .dropdown-toggle .filter-option-inner-inner {
    font-weight: 500;
}


/* Form Check */
.form-check {
    text-align: left;
}

    .form-check label,
    .form-group label {
        font-size: .875rem;
        font-weight: 500;
        color: var(--dark);
        text-align: left;
    }

    .form-check a {
        color: var(--c3) !important;
    }

        .form-check a:hover {
            color: var(--primary) !important;
        }


/*Style to verify message password*/
.requirements {
    list-style-type: none;
}

.wrong .fa-check {
    display: none;
}

.good .fa-times {
    display: none;
}

.messageContains {
    color: green;
}
/*End*/

/*Style for icon eyes*/
.field-icon {
    float: right;
    margin-left: -25px;
    margin-right: 17px;
    margin-top: -26px;
    position: relative;
    z-index: 2;
}
/*End*/

/* login page brasil*/
.register-confirm main .left,
.register-alreadyexists main .left,
.register-contaedenred main .left,
.login-brasil {
    background-color: var(--c3);
}

.register-confirm main,
.register-alreadyexists main,
.register-contaedenred main,
.login-brasil main {
  height: 100%;
  display: flex;
  flex-flow: row nowrap;
}

..register-confirm main > section a:hover,
.register-alreadyexists main > section a:hover,
.register-contaedenred main > section a:hover,
.login-brasil main > section a:hover {
  color: var(--cyan);
}

@media only screen and (max-width: 780px) {
    .register-confirm main,
    .register-alreadyexists main,
    .register-contaedenred main,
    .login-brasil main {
        flex-flow: column nowrap;
    }
}

.register-confirm main > section,
.register-alreadyexists main > section,
.register-contaedenred main > section,
.login-brasil main > section {
    font-weight: bold;
    color: white;
    flex: 1 1 50%;
}

@media only screen and (max-width: 780px) {
    .register-confirm main > section,
    .register-alreadyexists main > section,
    .register-contaedenred main > section,
    .login-brasil main > section {
        flex: 1 0 auto;
    }
}

/*left with frame*/
.register-contaedenred main > section.leftFrame,
.login-brasil main > section.leftFrame {
    background-color: transparent;
    padding: 1rem;
    text-align: left;
    flex-flow: column nowrap;
    overflow-y: scroll;
}

@media only screen and (max-width: 780px) {
    .register-contaedenred main > section.leftFrame,
    .login-brasil main > section.leftFrame {
        padding: 2rem 1rem 4rem;
    }

    .register-contaedenred main > section.leftFrame,
    .login-brasil main > section.leftFrame {
        overflow-y: auto;
    }
}

.register-contaedenred main > section.leftFrame.orange,
.login-brasil main > section.leftFrame.orange {
    background-color: var(--orange);
}

.register-contaedenred main > section.leftFrame.cyan,
.login-brasil main > section.leftFrame.cyan {
    background-color: var(--cyan);
}


.register-contaedenred main > section.leftFrame.white,
.login-brasil main > section.leftFrame.white {
    background-color: transparent;
}

.register-contaedenred main > .leftFrame svg,
.login-brasil main > .leftFrame svg {
    width: 200px;
    height: 64px;
}

@media only screen and (max-width: 780px) {
    .register-contaedenred main > .leftFrame .logo,
    .login-brasil main > .leftFrame .logo {
        margin-bottom: 3rem;
    }
}

.register-contaedenred main .leftFrame > div,
.login-brasil main .leftFrame > div {
    max-width: 640px;
    margin: auto auto auto 4rem;
}

@media only screen and (max-width: 1280px) {
    .register-contaedenred main .leftFrame > div,
    .login-brasil main .leftFrame > div {
        margin-left: 1rem;
    }
}

@media only screen and (max-width: 1024px) {
    .register-contaedenred main .leftFrame > div,
    .login-brasil main .leftFrame > div {
        margin-top: 2rem;
        margin-left: 0;
        padding-bottom: 2rem;
    }
}

@media only screen and (max-width: 320px) {
    .register-contaedenred main .leftFrame > div,
    .login-brasil main .leftFrame > div {
        margin-top: 1rem;
        padding-bottom: 1rem;
    }
}

.register-contaedenred main .leftFrame > div h1,
.login-brasil main .leftFrame > div h1 {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    color: #000000;
    margin-bottom: 1rem;
}

@media only screen and (max-width: 480px) {
    .register-contaedenred main .leftFrame > div h1,
    .login-brasil main .leftFrame > div h1 {
        font-size: 2rem;
        color: #000000;
    }
}

.register-contaedenred main .leftFrame > div p,
.login-brasil main .leftFrame > div p {
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: .625rem;
    color: #000000;
}

@media only screen and (max-width: 480px) {
    .register-contaedenred main .leftFrame > div p,
    .login-brasil main .leftFrame > div p {
        line-height: 1.6;
        font-size: 1rem;
        color: #000000;
    }
}

.register-contaedenred main .leftFrame > div p:last-of-type,
.login-brasil main .leftFrame > div p:last-of-type {
    margin-bottom: 2rem;
}

.register-contaedenred main .leftFrame > div ul,
.login-brasil main .leftFrame > div ul {
    margin-bottom: 1rem;
    list-style-position: inside;
    line-height: 2;
}

.register-contaedenred main .leftFrame .templates li p,
.login-brasil main .leftFrame .templates li p {
    font-size: .875rem;
    margin: auto 0 auto .625rem;
}

@media only screen and (max-width: 320px) {
    .register-contaedenred main .leftFrame .templates li p,
    .login-brasil main .leftFrame .templates li p {
        margin-top: .625rem;
    }
}

.register-contaedenred main .leftFrame .form-wrap,
.login-brasil main .leftFrame .form-wrap {
    background: rgba(255,255,255,0.50);
    border: 1px solid var(--c8);
    border-radius: 24px;
    width: 600px;
    overflow: hidden;
    padding-left: 1rem;
    padding-right: 1rem;
}


/*end left with frame*/
.register-confirm main > section.left,
.register-alreadyexists main > section.left,
.register-contaedenred main > section.left,
.login-brasil main > section.left {
    /*    background-color: var(--c3);*/
    color: #ffffff;
    padding: 1rem;
    text-align: left;
    display: flex;
    flex-flow: column nowrap;
    overflow-y: scroll;
}

@media only screen and (max-width: 780px) {
    .register-confirm main > section.left,
    .register-alreadyexists main > section.left,
    .register-contaedenred main > section.left,
    .register-contaedenred main > section.right,
    .login-brasil main > section.left,
    .login-brasil main > section.right {
        padding: 2rem 1rem 4rem;
    }

    .register-confirm > main > section.left,
    .register-alreadyexists > main > section.left,
    .register-contaedenred > main > section.left,
    .login-brasil main > section.left {
        overflow-y: auto;
    }
}

.register-confirm main > section.left.orange,
.register-alreadyexists main > section.left.orange,
.register-contaedenred main > section.left.orange,
.login-brasil main > section.left.orange {
    background-color: var(--orange);
}

.register-confirm main > section.left.cyan,
.register-alreadyexists main > section.left.cyan,
.register-contaedenred main > section.left.cyan,
.login-brasil main > section.left.cyan {
    background-color: var(--cyan);
}

.register-confirm main > section.left.white,
.register-alreadyexists main > section.left.white,
.register-contaedenred main > section.left.white,
.login-brasil main > section.left.white {
    background-color: #ffffff;
}

.register-confirm main > .left svg,
.register-alreadyexists main > .left svg,
.register-contaedenred main > .left svg,
.login-brasil main > .left svg {
    width: 160px;
    height: 60px;
}

.login-brasil main > .left .login-gohubedenred {
  margin: 0;
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-brasil main > .left .login-gohubedenred .login-logo {
  background: #FFF;
  padding: 25px 65px;
  border-radius: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-brasil main > .left .login-gohubedenred .login-logo img {
  width: 360px;
}

.register-contaedenred .left .edenred-account-register-wrapper {
  padding: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.register-contaedenred .left .edenred-account-register-text {
  width: 100%;
  max-width: 800px;
}

@media only screen and (max-width: 780px) {
  .register-confirm main > .left .logo,
  .register-alreadyexists main > .left .logo,
  .register-contaedenred main > .left .logo,
  .login-brasil main > .left .logo {
    margin-bottom: 3rem;
  }
  .login-brasil main > .left .login-gohubedenred .login-logo img {
    width: 100%;
  }
}

@media only screen and (max-width: 1280px) {
    .register-confirm main .left > div,
    .register-alreadyexists main .left > div,
    .register-contaedenred main .left > div,
    .login-brasil main .left > div {
        margin-left: 1rem;
    }
}

@media only screen and (max-width: 1024px) {
    .register-confirm main .left > div,
    .register-alreadyexists main .left > div,
    .register-contaedenred main .left > div,
    .login-brasil main .left > div {
        margin-top: 2rem;
        margin-left: 0;
        padding-bottom: 2rem;
    }
}

@media only screen and (max-width: 320px) {
    .register-confirm main .left > div,
    .register-alreadyexists main .left > div,
    .register-contaedenred main .left > div,
    .login-brasil main .left > div {
        margin-top: 1rem;
        padding-bottom: 1rem;
    }
}

.register-confirm main .left > div h1,
.register-confirm main .right > div h1,
.register-alreadyexists main .left > div h1,
.register-alreadyexists main .right > div h1,
.register-contaedenred main .left > div h1,
.register-contaedenred main .right > div h1,
.login-brasil main .left > div h1,
.login-brasil main .right > div h1 {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    color: #ffffff;
    margin-bottom: 1rem;
}

@media only screen and (max-width: 1024px) {
    .register-confirm main .right > div h1,
    .register-alreadyexists main .right > div h1,
    .register-contaedenred main .right > div h1,
    .login-brasil main .right > div h1 {
        font-size: 2rem;
    }
}

@media only screen and (max-width: 480px) {
    .register-confirm main .left > div h1,
    .register-confirm main .right > div h1,
    .register-alreadyexists main .left > div h1,
    .register-alreadyexists main .right > div h1,
    .register-contaedenred main .left > div h1,
    .register-contaedenred main .right > div h1,
    .login-brasil main .left > div h1,
    .login-brasil main .right > div h1 {
        font-size: 2rem;
    }
}

.register-confirm main .right > div h1,
.register-alreadyexists main .right > div h1,
.register-contaedenred main .right > div h1,
.login-brasil main .right > div h1 {
    color: white;
    text-align: left;
    font-size: 32px;
}

.register-confirm main .left > div p,
.register-alreadyexists main .left > div p,
.register-contaedenred main .left > div p,
.login-brasil main .left > div p {
    font-size: 1.125rem;
    line-height: 1.8;
    margin-bottom: .625rem;
}

@media only screen and (max-width: 480px) {
    .register-confirm main .left > div p,
    .register-alreadyexists main .left > div p,
    .register-contaedenred main .left > div p,
    .login-brasil main .left > div p {
        line-height: 1.6;
        font-size: 1rem;
    }
}

.register-confirm main .left > div p:last-of-type,
.register-alreadyexists main .left > div p:last-of-type,
.register-contaedenred main .left > div p:last-of-type,
.login-brasil main .left > div p:last-of-type {
    margin-bottom: 2rem;
}

.register-confirm main .left > div ul,
.register-alreadyexists main .left > div ul,
.register-contaedenred main .left > div ul,
.login-brasil main .left > div ul {
    margin-bottom: 1rem;
    list-style-position: inside;
    line-height: 2;
}

.register-confirm main .right,
.register-alreadyexists main .right,
.register-contaedenred main .right,
.login-brasil main .right {
    display: flex;
    flex-flow: column nowrap;
    overflow-y: scroll;
}

@media only screen and (max-width: 1280px) {
    .register-confirm main .right,
    .register-alreadyexists main .right,
    .register-contaedenred main .right,
    .login-brasil main .right {
        padding: 0 1rem;
    }
}

@media only screen and (max-width: 1024px) {
    .register-confirm main .right,
    .register-alreadyexists main .right,
    .register-contaedenred main .right,
    .login-brasil main .right {
        padding: 2rem 1rem;
    }
}

@media only screen and (max-width: 780px) {
    .register-confirm main .right,
    .register-alreadyexists main .right,
    .register-contaedenred main .right,
    .login-brasil main .right {
        overflow-y: unset;
        padding: 2rem 1rem;
    }
}

.register-confirm main .right > .form,
.register-alreadyexists main .right > .form,
.register-contaedenred main .right > .form,
.login-brasil main .right > .form {
    margin: auto;
    max-width: 600px;
    width: 100%;
}

@media only screen and (max-width: 780px) {
    .register-confirm main .right > .form,
    .register-alreadyexists main .right > .form,
    .register-contaedenred main .right > .form,
    .login-brasil main .right > .form {
        width: 100%;
        max-width: 100%;
    }
}

.register-confirm main .right .form-wrap,
.register-alreadyexists main .right .form-wrap,
.register-contaedenred main .right .form-wrap,
.login-brasil main .right .form-wrap {
    /*    background: rgba(255,255,255,0.50);
    border: 1px solid var(--c8);
    border-radius: 24px;*/
    width: 470px;
    height: 450px;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (max-width: 780px) {
    .register-confirm main .right .form-wrap,
    .register-alreadyexists main .right .form-wrap,
    .register-contaedenred main .right .form-wrap,
    .login-brasil main .right .form-wrap {
        width: 100%;
    }
}

@media only screen and (max-width: 1280px) {
    .register-confirm main .right .form-wrap,
    .register-alreadyexists main .right .form-wrap,
    .register-contaedenred main .right .form-wrap,
    .login-brasil main .right .form-wrap {
        max-width: 100%;
        margin: 0 auto;
    }
}


@media only screen and (max-width: 1280px) {
    .register-confirm main .right .form-wrap + .form-wrap,
    .register-alreadyexists main .right .form-wrap + .form-wrap,
    .register-contaedenred main .right .form-wrap + .form-wrap,
    .login-brasil main .right .form-wrap + .form-wrap {
        margin-top: 2rem;
    }
}

.register-confirm main .right > .form p:first-of-type,
.register-alreadyexists main .right > .form p:first-of-type,
.register-contaedenred main .right > .form p:first-of-type,
.login-brasil main .right > .form p:first-of-type {
    margin-top: 2rem;
}

.register-confirm main .right > .form p,
.register-alreadyexists main .right > .form p,
.register-contaedenred main .right > .form p,
.login-brasil main .right > .form p {
    text-align: left;
    font-size: .875rem;
}

    .register-confirm main .right > .form p a,
    .register-alreadyexists main .right > .form p a,
    .register-contaedenred main .right > .form p a,
    .login-brasil main .right > .form p a {
        text-decoration: none;
        font-weight: 500;
        color: var(--dark);
    }

/* platforms */
@media only screen and (max-width: 320px) {
    .register-confirm main .right > .form .platform-list li p,
    .register-alreadyexists main .right > .form .platform-list li p,
    .register-contaedenred main .right > .form .platform-list li p,
    .login-brasil main .right > .form .platform-list li p {
        text-align: center;
        margin-bottom: 1rem !important;
    }
}

.register-confirm main .right > .form .platform-list li p,
.register-alreadyexists main .right > .form .platform-list li p,
.register-contaedenred main .right > .form .platform-list li p,
.login-brasil main .right > .form .platform-list li p {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--dark);
    margin-top: 0;
    margin: auto 0;
}

.register-confirm main .left .templates li p,
.register-alreadyexists main .left .templates li p,
.register-contaedenred main .left .templates li p,
.login-brasil main .left .templates li p {
    font-size: .875rem;
    margin: auto 0 auto .625rem;
}

@media only screen and (max-width: 320px) {
    .register-confirm main .left .templates li p,
    .register-alreadyexists main .left .templates li p,
    .register-contaedenred main .left .templates li p,
    .login-brasil main .left .templates li p {
        margin-top: .625rem;
    }
}

.dropdownMenuLink:hover {
    color: var(--cyan);
}

.dropdownMenuLink {
    color: white;
}

.register-confirm .btn.btn-cyan,
.register-alreadyexists .btn.btn-cyan,
.register-contaedenred .btn.btn-cyan,
.login-brasil .btn.btn-cyan {
    background-color: var(--cyan);
    color: #ffffff;
    width: 100%;
    height: 43px;
    border-radius: 25px;
    border: 1px;
    -webkit-transition: color 1s;
    -moz-transition: color 1s;
    -o-transition: color 1s;
    transition: color 1s;
    -webkit-transition: background-color 1s;
    -moz-transition: background-color 1s;
    -o-transition: background-color 1s;
    transition: background-color 1s;
}

    .register-confirm .btn .btn-cyan:hover,
    .register-alreadyexists .btn .btn-cyan:hover,
    .register-contaedenred .btn .btn-cyan:hover,
    .login-brasil .btn .btn-cyan:hover {
        color: var(--cyan);
        background-color: white;
    }

.register-confirm .form-wrap a:not(.btn),
.register-alreadyexists .form-wrap a:not(.btn),
.register-contaedenred .form-wrap a:not(.btn),
.login-brasil .form-wrap a:not(.btn) {
    text-decoration: none;
    font-weight: 900;
    color: white;
    font-size: 12px;
    /*    text-align: left;*/
}

.register-confirm .form-wrap .form-actions-btns,
.register-alreadyexists .form-wrap .form-actions-btns,
.register-contaedenred .form-wrap .form-actions-btns,
.login-brasil .form-wrap .form-actions-btns {
    text-align: center;
    /*    border-top: 1px solid #E3E8EE;
    background-color: #fafafa;*/
    padding: 1rem;
    margin-bottom: -20px;
}

.register-confirm .form-actions-btns btn,
.register-alreadyexists .form-actions-btns .btn,
.register-contaedenred .form-actions-btns .btn,
.login-brasil .form-actions-btns .btn {
    margin: -10px .625rem 0 0;
}

.register-confirm .left .logo,
.register-alreadyexists .left .logo,
.register-contaedenred .left .logo,
.login-brasil .left .logo {
    max-width: 210px;
    display: block;
    padding: 1px;
    position: relative;
    top: 10px;
    left: -80px;
    border-top-right-radius: 60px;
    border-bottom-right-radius: 60px;
    background-color: #ffffff;
}

.register-confirm .text-container,
.register-alreadyexists .text-container,
.register-contaedenred .text-container,
.login-brasil .text-container {
    margin: .875rem 1rem;
}

.register-confirm .input-container input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]),
.register-confirm .input-container select,
.register-confirm .input-container textarea,
.register-alreadyexists .input-container input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]),
.register-alreadyexists .input-container select,
.register-alreadyexists .input-container textarea,
.register-contaedenred .input-container input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]),
.register-contaedenred .input-container select,
.register-contaedenred .input-container textarea,
.login-brasil .input-container input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]),
.login-brasil .input-container select,
.login-brasil .input-container textarea {
    width: 100%;
    height: 43px;
    -webkit-appearance: none;
    outline: none;
    border: 1px solid var(--c8);
    box-sizing: border-box;
    padding: 13px 1rem;
    background-color: #f6f5f9;
    color: #131415;
    border-radius: 7px;
    font-size: .875rem;
    transition: border 140ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 140ms cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 140ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.register-confirm body,
.register-alreadyexists body,
.register-contaedenred body {
    background-color: #F4F4F7;
}

.register-confirm main .right > div h1,
.register-alreadyexists main .right > div h1,
.register-contaedenred main .right > div h1 {
    color: var(--c3);
    font-size: 1.5rem;
    text-align: center;
}

.register-confirm .dropdownMenuLink,
.register-alreadyexists .dropdownMenuLink,
.register-contaedenred .dropdownMenuLink {
    color: var(--dark);
    text-decoration: none;
}

.register-confirm main .right .form-wrap,
.register-alreadyexists main .right .form-wrap,
.register-contaedenred main .right .form-wrap {
    padding-top: 2rem;
    color: var(--dark);
    width: 100%;
    height: auto;
}

    .register-confirm main .right .form-wrap hr,
    .register-alreadyexists main .right .form-wrap hr,
    .register-contaedenred main .right .form-wrap hr {
        margin: 1rem auto;
        margin-top: 0;
    }

    .register-confirm main .right .form-wrap .btns,
    .register-alreadyexists main .right .form-wrap .btns,
    .register-contaedenred main .right .form-wrap .btns {
        padding: 1rem;
        padding-bottom: 2rem;
    }

        .register-confirm main .right .form-wrap .btns a,
        .register-alreadyexists main .right .form-wrap .btns a {
            padding: .85rem 1rem;
        }

        .register-contaedenred main .right .form-wrap .btns a {
            color: var(--cyan) !important;
        }

        .register-confirm main .right .form-wrap .btns .btn,
        .register-alreadyexists main .right .form-wrap .btns .btn,
        .register-contaedenred main .right .form-wrap .btns .btn {
            transition: background-color .5s
        }

            .register-confirm main .right .form-wrap .btns .btn:hover:not([disabled]),
            .register-alreadyexists main .right .form-wrap .btns .btn:hover:not([disabled]),
            .register-contaedenred main .right .form-wrap .btns .btn:hover:not([disabled]) {
                background-color: white;
                color: var(--cyan);
            }

            .register-confirm main .right .form-wrap .btns .btn.disabled,
            .register-confirm main .right .form-wrap .btns .btn:disabled,
            .register-alreadyexists main .right .form-wrap .btns .btn.disabled,
            .register-alreadyexists main .right .form-wrap .btns .btn:disabled,
            .register-contaedenred main .right .form-wrap .btns .btn.disabled,
            .register-contaedenred main .right .form-wrap .btns .btn:disabled {
                opacity: 0.4;
            }

    .register-contaedenred main .right .form-wrap .bootstrap-select .btn {
        background-color: white;
        height: 50px;
    }

    .register-contaedenred main .right .form-wrap .bootstrap-select.form-control {
        background-color: transparent;
        height: auto;
    }

    .register-contaedenred main .right .form-wrap .bootstrap-select .dropdown-toggle .filter-option {
        height: auto;
    }

    .register-contaedenred main .right .form-wrap .bootstrap-select .dropdown-item {
        color: var(--dark);
    }

        .register-contaedenred main .right .form-wrap .bootstrap-select .dropdown-item.active {
            color: white;
        }

    .register-contaedenred main .right .form-wrap .field-validation-error,
    .register-contaedenred main .right .form-wrap .field-validation-error .error {
        padding-left: 1rem;
    }

    .register-contaedenred main .right .form-wrap .input-validation-error,
    .register-contaedenred main .right .form-wrap .input-validation-error:focus,
    .register-contaedenred main .right .form-wrap .input-validation-error:active {
        border-color: var(--red);
    }

.register-confirm .hiden,
.register-alreadyexists .hiden,
.register-contaedenred .hiden {
    display: none;
}

.register-confirm main .right .form-wrap .form-group label,
.register-alreadyexists main .right .form-wrap .form-group label,
.register-contaedenred main .right .form-wrap .form-group label {
    font-weight: 600;
}

.register-confirm main .right .form-wrap .form-group, input.form-control,
.register-alreadyexists main .right .form-wrap .form-group input.form-control,
.register-contaedenred main .right .form-wrap .form-group input.form-control {
    height: 50px;
    background-color: white;
}

.register-contaedenred .register-reason .selected .dropdown-item,
.register-contaedenred .register-reason .selected .dropdown-item {
    background-color: #f8f9fa;
}

.register-contaedenred .tooltip > .tooltip-inner {
    background-color: #fff;
    border: 1px solid var(--c8);
    color: var(--dark);
}

.register-contaedenred .bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.register-contaedenred .bs-tooltip-bottom .arrow::before {
    border-bottom-color: var(--c8);
}

.register-confirm main .right > .form p {
    font-weight: 500;
    margin-bottom: 2rem;
}
/*end login brasil*/
.userNotFoundContainer {
    height: 400px;
}