@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;400;500;700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;700&display=swap');
@import url('https://roots.cedrotech.com/apis/file/cedro_design/foundation/1.6.16.0/css/light/tokens.css');

html, body {
    font-family: var(--font-family-02), sans-serif;
}

label {
    font-weight: normal;
}

.container-wrapper {
    background-color: var(--color-grey-200);
    font-size: var(--font-size-xsmall);
    color: var(--color-grey-800);
}

.container-wrapper .text-center {
    font-size: var(--font-size-xxsmal);
    justify-content: center;
}

.container-wrapper .header .brand {
    background-image: url(./../images/logo.svg);
    background-repeat: no-repeat;
    width: 340px;
    height: 50px;
}

.container-wrapper .header .action button {
    color: var(--color-secondary-500);
    font-size: var(--font-size-xsmall);
    border: 1px solid var(--color-secondary-500);
}

.login-wrapper {
    background-color: var(--color-grey-100);
}

.info-login h3 span {
    font-family: var(--font-family-01), sans-serif;
    font-size: var(--font-size-xxmedium);
    color: var(--color-grey-800);
}

.info-login p span {
    color: var(--color-grey-600);
    font-size: var(--font-size-xsmall);
}

.label-float input {
    border: 1px solid var(--color-grey-100);
    color: var(--color-grey-900) !important;
    border-radius: var(--border-radius-large);
    background-color: var(--color-grey-200);
    font-size: var(--font-size-small);
}

.label-float label {
    color: var(--color-grey-700);
}

.label-float input:focus {
    border-color: var(--color-primary-500);
}

.recovery-wrapper a {
    color: var(--color-secondary-500);
    font-size: var(--font-size-xsmall);
}

.actions-wrapper button:enabled {
    color: var(--color-grey-900);
    background-color: var(--color-primary-500);
    font-size: var(--font-size-xsmall);
}

.actions-wrapper button:disabled {
    color: var(--color-grey-400);
    background-color: var(--color-grey-300);
    font-size: var(--font-size-xsmall);
}

.new-account {
    font-size: var(--font-size-xsmall);
    color: var(--color-grey-700);
    /* display: none; */
}

.new-account a {
    color: var(--color-primary-500);
    /* display: none; */
}

#link-login-create-Account,
#link-login-create-Account label {
    cursor: pointer !important;
}

.redirect-link {
    font-size: var(--font-size-xsmall);
    color: var(--color-secondary-500);
    width: 152px;
    text-align: center;
}

.message {
    font-size: var(--font-size-xxsmall);
    color: var(--color-grey-600);
    text-align: center;
    width: auto;
}

.label-float .password-visibility-toggle {
    background-image: url(./../images/eye.svg);
    top: 54% !important;
    width: 16px;
    height: 17px;
;
}

.label-float .password-visibility-toggle.visible {
    background-image: url(./../images/eye-off.svg);
}

.result-modal {
    background-color: var(--color-grey-100);
}

.result-modal .modal-logo.expired {
    background-image: url(../images/result-expired.svg);
}

.result-modal .modal-logo.error {
    background-image: url(../images/result-error.svg);
}

.result-modal .modal-logo.success {
    background-image: url(../images/result-success.svg);
    height: 64px;
    width: 64px;
}

.result-modal h1 {
    font-family: var(--font-family-01);
    font-size: var(--font-size-xxmedium);
    color: var(--color-grey-800);
}

.result-modal h2 {
    font-family: var(--font-family-01);
    font-size: var(--font-size-medium);
    color: var(--color-grey-500);
}

.download-icon {
    background-image: url('./../images/download.svg');
}

.download-btns img {
    border: 1px solid var(--color-primary-500);
}

.result-modal p {
    font-size: var(--font-size-xsmall);
    line-height: var(--font-size-small);
    color: var(--color-grey-900);
}

.result-modal p + p {
    margin-top: var(--spacing-xsmall);
}

.result-modal button {
    border: 1px solid var(--color-primary-600);
    color: var(--color-grey-100);
    background: var(--color-primary-500) !important;
}

.result-modal button :hover {
    border: 1px solid var(--color-primary-700) !important;
}

.result-modal button :disabled {
    border: none;
}

.modal-content {
    background-color: var(--color-grey-100);
}

.modal-body {
    font-family: var(--font-family-01), sans-serif;
    line-height: var(--line-height-distant);
}

.modal-body h3 {
    font-weight: var(--font-weight-bold);
    color: var(--color-grey-800);
}

.modal-body p {
    font-size: var(--font-size-small);
    font-family: var(--font-family-02), sans-serif;
    font-weight: var(--font-weight-regular);
    color: var(--color-grey-800);
}

.modal-body .body-text {
    color: var(--color-grey-600);
}

.modal-body .doubts {
    font-size: var(--font-size-xxsmal);
    color: var(--color-grey-800);
}

.modal-body .doubts span {
    font-size: var(--font-size-xsmall);
}

.modal-body .mail {
    background-color: var(--color-grey-200);
    color: var(--color-grey-800);
}

.resendBnt {
    color: var(--color-primary-500);
    font-size: var(--font-size-small);
}

.download-btns img {
    border: 1px solid var(--color-primary-500);
}


.loading-button-loading::after {
    border-top-color: var(--color-primary-500);
}

.color-success {
    color: var(--color-success-400);
}

.password-params {
    color: var(--color-grey-800);
}

.warning-field label{
    color: var(--color-support-danger-300);
}

.warning-field input {
    color: var(--color-support-danger-500);
    border-color: var(--color-support-danger-500);
}

.warning-field input:focus{
    border: 1px solid var(--color-support-danger-500);
}

.warning-span{
    color: var(--color-support-danger-500);
}

.warning-field .password-visibility-toggle {
    background-image: url(./../images/eye-danger.svg);
    width: 16px;
    height: 17px;
}

.warning-field .password-visibility-toggle.visible {
    background-image: url(../../greylabel/images/eye-off-danger.svg);
}

.icon-close {
    background-repeat: no-repeat;
    width: 16px;
    height: 16px;
}

.modal-body .icon-reset-password {
    background-repeat: no-repeat;
    width: 100%;
    height: 64px;
    background-position: center;
}