html{ scrollbar-width: thin; scrollbar-color: rgba(128, 128, 128, 0.2) transparent; }
body{ flex: 1 1; display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; box-sizing: border-box; margin: 0; border: 0 none transparent; padding: 0; min-width: 412px; width: 100%; overflow-x: hidden; min-height: 100svh; overflow-y: auto; margin: 0; border: 0 none transparent; padding: 0; background-color: rgb(255, 255, 255); background-image: url('https://cdn.sistemacobra.com.br/media/image/login.jpg'); background-size: cover; background-repeat: no-repeat; background-position-x: center; background-position-y: center; }
a, a:hover, a:active, a:visited{ border: 0 none transparent !important; text-decoration: none !important; user-select: none; }
a, p, span, label, input, textarea,button{ font-family: Arial, Helvetica, sans-serif, Arial, Helvetica, sans-serif; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:active, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:active, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:active{ transition: background-color 5000s ease-in-out 0s; }

div#authentication{ display: flex; flex-flow: column nowrap; align-items: stretch; justify-content: center; box-sizing: border-box; margin: 0; border: 0 none transparent; border-radius: 12px; padding: 12px; background-color: rgba(255, 255, 255, 0.8); box-shadow: 0 0 12px rgb(255, 255, 255); backdrop-filter: blur(10px); }

div#presentation-area{ display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; margin: 0; border: 0 none transparent; padding: 12px 0; user-select: none; }
div#presentation-logo{ display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; box-sizing: border-box; width: 108px; height: 56px; margin: 0; border: 0 none transparent; padding: 0; }
div#presentation-logo i{ width: 80px; font-size: 40px; color: rgb(235, 0, 69); }
div#presentation-trend{ display: flex; flex-flow: row nowrap; align-items: center; justify-content: flex-start; position: relative; box-sizing: border-box; height: 56px; margin: 0; border: 0 none transparent; padding: 0; }
div#presentation-trend-icon{ display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; position: relative; box-sizing: border-box; height: 56px; margin: 0; border: 0 none transparent; padding: 0; }
div#presentation-trend-icon i{ font-size: 20px; }
div#presentation-trend-icon i::before, div#presentation-trend-icon i::after{ color: rgb(235, 0, 69); opacity: 1; }
div#presentation-trend-label{ display: flex; flex-flow: row nowrap; align-items: center; justify-content: flex-start; position: relative; box-sizing: border-box; width: 148px; height: 56px; overflow: hidden; margin: 0; border: 0 none transparent; padding: 0 12px; }
div#presentation-trend-label i{ margin-right: 8px; font-size: 40px; color: rgb(128, 128, 128); text-shadow: 0 0 8px rgb(255, 255, 255); }
div#presentation-trend-label ul{ list-style-type: none; margin: 0; padding: 0; }
div#presentation-trend-label ul li{ margin: 0; padding: 0; }
div#presentation-trend-label ul li:first-child span{ font-style: normal; font-size: 16px; font-weight: 400; }
div#presentation-trend-label ul li:last-child span{ font-style: normal; font-size: 20px; font-weight: 700; }

div#title{ display: flex; flex-flow: column nowrap; align-items: center; justify-content: flex-start; box-sizing: border-box; width: 424px; margin: 0; border: 0 none transparent; padding: 0 12px 12px 12px; }
span.main-title{ overflow-wrap: break-word; word-break: break-word; font-style: normal; font-size: 18px; font-weight: 700; color: rgb(235, 0, 69); }
span.sub-title{ overflow-wrap: break-word; word-break: break-word; font-style: normal; font-size: 14px; font-weight: 700; color: rgb(0, 62, 82); }

div#username{ display: block; box-sizing: border-box; margin: 0; border: 0 none transparent; padding: 12px; }
div#username-field{ display: flex; flex-flow: row nowrap; align-items: stretch; justify-content: stretch; box-sizing: border-box; width: 400px; margin: 0; border: 0 none transparent; border-radius: 8px; padding: 6px; background-color: rgb(240, 240, 240); cursor: text; }
div#username-icon{ display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; box-sizing: border-box; width: 36px; margin: 0; border: 0 none transparent; padding: 0; }
input#v_users_login_email{ box-sizing: border-box; width: calc(100% - 36px); margin: 0; border: 0 none transparent; padding: 6px; background-color: transparent; outline: none; font-style: normal; font-size: 16px; font-weight: 400; color: rgb(128, 128, 128); }
div#username-validation{ display: none; box-sizing: border-box; margin: 0; border: 0 none transparent; padding: 6px; }
div#username-validation > span{ font-style: normal; font-size: 12px; font-weight: 400; color: rgb(235, 0, 69); }

div#password{ display: block; box-sizing: border-box; margin: 0; border: 0 none transparent; padding: 12px; }
div#password-field{ display: flex; flex-flow: row nowrap; align-items: stretch; justify-content: stretch; box-sizing: border-box; width: 400px; margin: 0; border: 0 none transparent; border-radius: 8px; padding: 6px; background-color: rgb(240, 240, 240); cursor: text; }
div#password-icon{ display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; box-sizing: border-box; width: 36px; margin: 0; border: 0 none transparent; padding: 0; }
input#v_users_login_password{ box-sizing: border-box; width: calc(100% - 72px); margin: 0; border: 0 none transparent; padding: 6px; background-color: transparent; outline: none; font-style: normal; font-size: 16px; font-weight: 400; color: rgb(128, 128, 128); }
button#password-visibility{ display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; box-sizing: border-box; width: 36px; margin: 0; border: 0 none transparent; border-radius: 4px; padding: 0; outline: none; cursor: pointer; user-select: none; }
button#password-visibility:active{ background-color: rgba(192, 192, 192, 0.5); }
div#password-validation{ display: none; box-sizing: border-box; margin: 0; border: 0 none transparent; padding: 6px; }
div#password-validation > span{ font-style: normal; font-size: 12px; font-weight: 400; color: rgb(235, 0, 69); }

div#statements{ display: flex; flex-flow: row nowrap; align-items: stretch; justify-content: space-between; box-sizing: border-box; width: 424px; margin: 0; border: 0 none transparent; padding: 12px; }

div#proceed{ display: block; box-sizing: border-box; margin: 0; border: 0 none transparent; padding: 0; }

button#login-proceed{ display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; box-sizing: border-box; margin: 0; border: 1px solid rgba(235, 0, 69, 0.5); border-radius: 8px; padding: 12px 12px 12px 20px; background-color: rgba(235, 0, 69, 0.125); outline: none; cursor: pointer; user-select: none; }
button#login-proceed:hover{ background-color: rgba(235, 0, 69, 0.25); }
button#login-proceed:active{ background-color: rgba(235, 0, 69, 0.5); }
div#login-proceed-text{ display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; gap: 12px; box-sizing: border-box; margin: 0; border: 0 none transparent; padding: 0; }
div#login-proceed-text > span{ font-style: normal; font-size: 16px; font-weight: 700; color: rgb(235, 0, 69); }
button#login-proceed:active > div#login-proceed-text > span{ font-style: normal; font-size: 16px; font-weight: 700; color: rgb(141, 0, 41); }
div#login-proceed-icon{ display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; box-sizing: border-box; width: 36px; margin: 0; border: 0 none transparent; padding: 0; }
div#login-proceed-icon > i{ --fa-primary-color: rgb(235, 0, 69); --fa-primary-opacity: 1; --fa-secondary-color: rgb(235, 0, 69); --fa-secondary-opacity: 0.5; }
button#login-proceed:active > div#login-proceed-icon > i{ --fa-primary-color: rgb(141, 0, 41); --fa-primary-opacity: 1; --fa-secondary-color: rgb(141, 0, 41); --fa-secondary-opacity: 0.5; }

button#recovery-proceed{ display: none; flex-flow: row nowrap; align-items: center; justify-content: center; box-sizing: border-box; margin: 0; border: 1px solid rgba(235, 0, 69, 0.5); border-radius: 8px; padding: 12px 12px 12px 20px; background-color: rgba(235, 0, 69, 0.125); outline: none; cursor: pointer; user-select: none; }
button#recovery-proceed:hover{ background-color: rgba(235, 0, 69, 0.25); }
button#recovery-proceed:active{ background-color: rgba(235, 0, 69, 0.5); }
div#recovery-proceed-text{ display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; gap: 12px; box-sizing: border-box; margin: 0; border: 0 none transparent; padding: 0; }
div#recovery-proceed-text > span{ font-style: normal; font-size: 16px; font-weight: 700; color: rgb(235, 0, 69); }
button#recovery-proceed:active > div#recovery-proceed-text > span{ font-style: normal; font-size: 16px; font-weight: 700; color: rgb(141, 0, 41); }
div#recovery-proceed-icon{ display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; box-sizing: border-box; width: 36px; margin: 0; border: 0 none transparent; padding: 0; }
div#recovery-proceed-icon > i{ --fa-primary-color: rgb(235, 0, 69); --fa-primary-opacity: 1; --fa-secondary-color: rgb(235, 0, 69); --fa-secondary-opacity: 0.5; }
button#recovery-proceed:active > div#recovery-proceed-icon > i{ --fa-primary-color: rgb(141, 0, 41); --fa-primary-opacity: 1; --fa-secondary-color: rgb(141, 0, 41); --fa-secondary-opacity: 0.5; }

div#request{ display: block; box-sizing: border-box; margin: 0; border: 0 none transparent; padding: 0; }

button#recovery-request{ display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; box-sizing: border-box; margin: 0; border: 1px solid rgba(128, 128, 128, 0.5); border-radius: 8px; padding: 12px 12px 12px 20px; background-color: rgba(192, 192, 192, 0.125); outline: none; cursor: pointer; user-select: none; }
button#recovery-request:hover{ background-color: rgba(192, 192, 192, 0.25); }
button#recovery-request:active{ background-color: rgba(192, 192, 192, 0.75); }
div#recovery-request-text{ display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; gap: 12px; box-sizing: border-box; margin: 0; border: 0 none transparent; padding: 0; }
div#recovery-request-text > span{ font-style: normal; font-size: 16px; font-weight: 700; color: rgb(128, 128, 128); }
button#recovery-request:active > div#recovery-request-text > span{ font-style: normal; font-size: 16px; font-weight: 700; color: rgb(96, 96, 96); }
div#recovery-request-icon{ display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; box-sizing: border-box; width: 36px; margin: 0; border: 0 none transparent; padding: 0; }
div#recovery-request-icon > i{ --fa-primary-color: rgb(128, 128, 128); --fa-primary-opacity: 1; --fa-secondary-color: rgb(128, 128, 128); --fa-secondary-opacity: 0.5; }
button#recovery-request:active > div#recovery-request-icon > i{ --fa-primary-color: rgb(96, 96, 96); --fa-primary-opacity: 1; --fa-secondary-color: rgb(96, 96, 96); --fa-secondary-opacity: 0.5; }

button#login-request{ display: none; flex-flow: row nowrap; align-items: center; justify-content: center; box-sizing: border-box; margin: 0; border: 1px solid rgba(128, 128, 128, 0.5); border-radius: 8px; padding: 12px 12px 12px 20px; background-color: rgba(192, 192, 192, 0.125); outline: none; cursor: pointer; user-select: none; }
button#login-request:hover{ background-color: rgba(192, 192, 192, 0.25); }
button#login-request:active{ background-color: rgba(192, 192, 192, 0.75); }
div#login-request-text{ display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; gap: 12px; box-sizing: border-box; margin: 0; border: 0 none transparent; padding: 0; }
div#login-request-text > span{ font-style: normal; font-size: 16px; font-weight: 700; color: rgb(128, 128, 128); }
button#login-request:active > div#login-request-text > span{ font-style: normal; font-size: 16px; font-weight: 700; color: rgb(96, 96, 96); }
div#login-request-icon{ display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; box-sizing: border-box; width: 36px; margin: 0; border: 0 none transparent; padding: 0; }
div#login-request-icon > i{ --fa-primary-color: rgb(128, 128, 128); --fa-primary-opacity: 1; --fa-secondary-color: rgb(128, 128, 128); --fa-secondary-opacity: 0.5; }
button#login-request:active > div#login-request-icon > i{ --fa-primary-color: rgb(96, 96, 96); --fa-primary-opacity: 1; --fa-secondary-color: rgb(96, 96, 96); --fa-secondary-opacity: 0.5; }

div#warning{ display: none; flex-flow: row nowrap; align-items: center; box-sizing: border-box; margin: 0; border: 0 none transparent; padding: 12px; }
div#warning-icon{ display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; box-sizing: border-box; width: 46px; margin: 0; border: 0 none transparent; padding: 0 3px 0 0; }
div#warning-icon > i.fa-spinner-third{ --fa-primary-color: rgb(128, 128, 128); --fa-primary-opacity: 1; --fa-secondary-color: rgb(128, 128, 128); --fa-secondary-opacity: 0; }
div#warning-icon > i.fa-circle-check{ --fa-primary-color: rgb(60, 102, 39); --fa-primary-opacity: 1; --fa-secondary-color: rgb(60, 102, 39); --fa-secondary-opacity: 0; }
div#warning-icon > i.fa-circle-xmark{ --fa-primary-color: rgb(189, 38, 38); --fa-primary-opacity: 1; --fa-secondary-color: rgb(189, 38, 38); --fa-secondary-opacity: 0; }
div#warning-message{ display: block; flex-flow: row nowrap; align-items: center; justify-content: flex-start; box-sizing: border-box; width: 354px; margin: 0; border: 0 none transparent; padding: 0 0 0 3px; }
div#warning-message > span{ overflow-wrap: break-word; word-break: break-word; font-style: normal; font-size: 14px; font-weight: 700; }
div#warning-message > span.wait{ color: rgb(128, 128, 128); }
div#warning-message > span.check{ color: rgb(60, 102, 39); }
div#warning-message > span.xmark{ color: rgb(189, 38, 38); }