:root {
    --root-bg: rgba(246, 248, 249, 1);
    --Gray-gray-80: rgba(171, 177, 175, 0.8);
    --Gray-500: rgb(171, 177, 175);
    --White-500: rgba(255, 255, 255, 1);
    --Primary-Primary-200: rgba(165, 225, 202, 1);
    --primary-600-principal: #000000;
    --primary-600-principal-disabled: #cccccc;
    --Primary-500: #000000;
    --Dark-500: rgba(13, 18, 16, 1);
    --Netraul-Colors-100: #F9FAFB;
    --Netraul-Colors-400: 949EAA;
    /* verde ativo #000000 */
}

* {
    font-family: Lexend;
}

html,
body {
    height: 100%;
    width: 100%;
    overflow-x: hidden;
    background: var(--Netraul-Colors-100);
}


h1 {
    font-size: 80px !important;
    line-height: 100px;
}

h2 {
    font-size: 26px !important;
    line-height: 32.5px;
    font-weight: 500;
}

h3 {
    font-size: 40px !important;
    line-height: 50px;
}

h4 {
    font-size: 30px !important;
    line-height: 50px;
}

h5 {
    font-size: 24px !important;
    line-height: 36px;
}

p {
    font-size: 16px !important;
    line-height: 24px;
}

hr {
    height: 1px;
    width: 100%;
    background: #DBDFE3;
    margin: 30px 0px;
}

.di--right-text {
    color: var(--Netraul-Colors-400);
    font-weight: 400;
}

.di--image-login,
.di--image-reset,
.di--image-onboarding,
.di--image-recover {
    height: 100%;
    border-radius: 30px;
    background-size: cover;
    background-position: center;
}

.di--input-login input[type="password"] {
    padding-right: 4rem;
}


.di--input-login input {
    gap: 10px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    border-radius: 10px !important;
    border: 1px solid var(--Gray-gray-80);
    background: var(--White-500);
    font-size: 16px;
    font-family: Lexend;
    font-weight: 300;
    line-height: 24px;
}



small {
    font-size: 0.85em;
}

.di--bg-primary {
    background-color: var(--Netraul-Colors-100);
}

.di--on-blur {
    filter: blur(2px);
}

.di--toast {
    position: absolute;
    right: -100%;
    top: 30%;
    min-width: 40%;
    transition: right ease-in 0.2s;
}

.di--modal-content {
    padding: 32px;
}

#di--toast-body {
    display: flex;
    align-items: center;
    padding: 16px;
    background-color: var(--Netraul-Colors-100);
}

.di--toast-text {
    width: 100%;
    padding: 0px 16px;
}


.di--code-input {
    font-size: 1.5em;
    text-align: center;
    flex: 0 1 10em;
    width: 0em;
    border-radius: 10px;
    margin: 3px;
    border: 1px solid var(--Gray-gray-80);
    background: var(--White-500);
    font-family: 'Lexend';
    height: 3em;
}

.di--toast.di--show-toast {
    right: 0;
}

#di--toast-body.success {
    border-left: solid 10px #47B881;
}

#di--toast-body.warn {
    border-left: solid 10px #d69c1f;
}

#di--toast-body.error {
    border-left: solid 10px #d61f1f;
}

.di--toast-bg {
    z-index: 99999999999999999;
    height: 100%;
    width: 100%;
}

.di--box-onboarding,
.di--box-login,
.di--box-reset,
.di--box-recover {
    width: 50%;
}

.di--btn-block {
    width: 100%;
}

.di--btn-smart {
    padding: 14px 24px;
    min-width: 145px;
    gap: 10px;
    line-height: 24px;
}

.di--pointer {
    cursor: pointer;
}

.di--gray-text {
    color: var(--Gray-500);
}



.modal-body,
.modal-footer {
    padding: 0;
}

.di--form-floating>.form-control:focus~label,
.di--form-floating>.form-control:not(:placeholder-shown)~label {
    color: var(--primary-600-principal);
    transform: scale(.75) translateY(-.5rem) translateX(.15rem);
    transition: ease 0.570s;
}

.di--form-floating>.form-control~label,
.di--form-floating>.form-control:not(:placeholder-shown)~label {
    transition: ease 0.570s;
}

.form-control:focus,
.select2-container--default.select2-container--focus .select2-selection--multiple:focus {
    border-color: var(--primary-600-principal);
    outline: 0;
    box-shadow: 0px 0px 0px 0rem var(--primary-600-principal);
}

.di--container-login,
.di--container-reset,
.di--container-recover,
.di--container-onboarding {
    display: flex;
    align-items: center
}

.di--form-login,
.di--form-reset,
.di--form-recover,
.di--form-onboarding {
    height: 100%;
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--Netraul-Colors-100);
}

.di--form-login>div,
.di--form-reset>div,
.di--form-recover>div,
.di--form-onboarding>div {
    width: 100%;
}

.di--show-password-icon {
    position: absolute;
    top: 50%;
    /* Centraliza verticalmente */
    right: 15px;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 1;
    background: none;
    border: none;
    z-index: 100000;
    color: var(--Dark-500);
}

.di--show-password-icon i {
    font-size: 1.5rem;
    transform: scaleX(-1);
}

.di--show-password-icon:hover i {
    color: #333;
}

/* MARGIN */
.di--mg-10 {
    margin: 10px;
}

.di--mg-l-10 {
    margin-left: 10px;
}

.di--mg-r-10 {
    margin-right: 10px;
}

.di--mg-t-10 {
    margin-top: 10px;
}

.di--mg-b-10 {
    margin-bottom: 10px;
}

.di--mg-20 {
    margin: 20px;
}

.di--mg-l-20 {
    margin-left: 20px;
}

.di--mg-r-20 {
    margin-right: 20px;
}

.di--mg-t-20 {
    margin-top: 20px;
}

.di--mg-b-20 {
    margin-bottom: 20px;
}

.di--mg-30 {
    margin: 30px;
}

.di--mg-l-30 {
    margin-left: 30px;
}

.di--mg-r-30 {
    margin-right: 30px;
}

.di--mg-t-30 {
    margin-top: 30px;
}

.di--mg-b-30 {
    margin-bottom: 30px;
}

.di--mg-40 {
    margin: 40px;
}

.di--mg-l-40 {
    margin-left: 40px;
}

.di--mg-r-40 {
    margin-right: 40px;
}

.di--mg-t-40 {
    margin-top: 40px;
}

.di--mg-b-40 {
    margin-bottom: 40px;
}

.di--mg-50 {
    margin: 50px;
}

.di--mg-l-50 {
    margin-left: 50px;
}

.di--mg-r-50 {
    margin-right: 50px;
}

.di--mg-t-50 {
    margin-top: 50px;
}

.di--mg-b-50 {
    margin-bottom: 50px;
}

.di--mg-60 {
    margin: 60px;
}

.di--mg-l-60 {
    margin-left: 60px;
}

.di--mg-r-60 {
    margin-right: 60px;
}

.di--mg-t-60 {
    margin-top: 60px;
}

.di--mg-b-60 {
    margin-bottom: 60px;
}

.di--mg-70 {
    margin: 70px;
}

.di--mg-l-70 {
    margin-left: 70px;
}

.di--mg-r-70 {
    margin-right: 70px;
}

.di--mg-t-70 {
    margin-top: 70px;
}

.di--mg-b-70 {
    margin-bottom: 70px;
}

.di--mg-80 {
    margin: 80px;
}

.di--mg-l-80 {
    margin-left: 80px;
}

.di--mg-r-80 {
    margin-right: 80px;
}

.di--mg-t-80 {
    margin-top: 80px;
}

.di--mg-b-80 {
    margin-bottom: 80px;
}

.di--mg-90 {
    margin: 90px;
}

.di--mg-l-90 {
    margin-left: 90px;
}

.di--mg-r-90 {
    margin-right: 90px;
}

.di--mg-t-90 {
    margin-top: 90px;
}

.di--mg-b-90 {
    margin-bottom: 90px;
}

.di--mg-100 {
    margin: 100px;
}

.di--mg-l-100 {
    margin-left: 100px;
}

.di--mg-r-100 {
    margin-right: 100px;
}

.di--mg-t-100 {
    margin-top: 100px;
}

.di--mg-b-100 {
    margin-bottom: 100px;
}

/* PADDING */
.di--pad-0 {
    padding: 0px;
}

.di--pad-10 {
    padding: 10px;
}

.di--pad-l-10 {
    padding-left: 10px;
}

.di--pad-r-10 {
    padding-right: 10px;
}

.di--pad-t-10 {
    padding-top: 10px;
}

.di--pad-b-10 {
    padding-bottom: 10px;
}

.di--pad-20 {
    padding: 20px;
}

.di--pad-l-20 {
    padding-left: 20px;
}

.di--pad-r-20 {
    padding-right: 20px;
}

.di--pad-t-20 {
    padding-top: 20px;
}

.di--pad-b-20 {
    padding-bottom: 20px;
}

.di--pad-30 {
    padding: 30px;
}

.di--pad-l-30 {
    padding-left: 30px;
}

.di--pad-r-30 {
    padding-right: 30px;
}

.di--pad-t-30 {
    padding-top: 30px;
}

.di--pad-b-30 {
    padding-bottom: 30px;
}

.di--pad-40 {
    padding: 40px;
}

.di--pad-l-40 {
    padding-left: 40px;
}

.di--pad-r-40 {
    padding-right: 40px;
}

.di--pad-t-40 {
    padding-top: 40px;
}

.di--pad-b-40 {
    padding-bottom: 40px;
}

.di--pad-50 {
    padding: 50px;
}

.di--pad-l-50 {
    padding-left: 50px;
}

.di--pad-r-50 {
    padding-right: 50px;
}

.di--pad-t-50 {
    padding-top: 50px;
}

.di--pad-b-50 {
    padding-bottom: 50px;
}

.di--pad-60 {
    padding: 60px;
}

.di--pad-l-60 {
    padding-left: 60px;
}

.di--pad-r-60 {
    padding-right: 60px;
}

.di--pad-t-60 {
    padding-top: 60px;
}

.di--pad-b-60 {
    padding-bottom: 60px;
}

.di--pad-70 {
    padding: 70px;
}

.di--pad-l-70 {
    padding-left: 70px;
}

.di--pad-r-70 {
    padding-right: 70px;
}

.di--pad-t-70 {
    padding-top: 70px;
}

.di--pad-b-70 {
    padding-bottom: 70px;
}

.di--pad-80 {
    padding: 80px;
}

.di--pad-l-80 {
    padding-left: 80px;
}

.di--pad-r-80 {
    padding-right: 80px;
}

.di--pad-t-80 {
    padding-top: 80px;
}

.di--pad-b-80 {
    padding-bottom: 80px;
}

.di--pad-90 {
    padding: 90px;
}

.di--pad-l-90 {
    padding-left: 90px;
}

.di--pad-r-90 {
    padding-right: 90px;
}

.di--pad-t-90 {
    padding-top: 90px;
}

.di--pad-b-90 {
    padding-bottom: 90px;
}

.di--pad-100 {
    padding: 100px;
}

.di--pad-l-100 {
    padding-left: 100px;
}

.di--pad-r-100 {
    padding-right: 100px;
}

.di--pad-t-100 {
    padding-top: 100px;
}

.di--pad-b-100 {
    padding-bottom: 100px;
}

/* HEIGHT */
.di--hg-10 {
    height: 10%;
}

.di--hg-20 {
    height: 20%;
}

.di--hg-30 {
    height: 30%;
}

.di--hg-40 {
    height: 40%;
}

.di--hg-50 {
    height: 50%;
}

.di--hg-60 {
    height: 60%;
}

.di--hg-70 {
    height: 70%;
}

.di--hg-80 {
    height: 80%;
}

.di--hg-90 {
    height: 90%;
}

.di--hg-100 {
    height: 100%;
}


/* ---------------- BUTTON PRIMARY ------------------ */
.di--btn-primary {
    display: flex;
    height: 52px;
    padding: 16px 24px;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    background: #000000;
    border: none;
    color: #F9FAFB;
    text-align: center;
    font-family: Lexend;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    transition: 
    background-color 0.3s ease, 
    transform 0.2s ease, 
    box-shadow 0.2s ease;
  }
  
  .di--btn-primary:hover {
    display: flex;
    padding: 16px 24px;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    background: #333333;
    border: none;
    color: #F9FAFB;
    text-align: center;
    font-family: Lexend;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
  
  .di--btn-primary:active {
    display: flex;
    padding: 16px 24px;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    background: #1a1a1a;
    border: none;
    color: #F9FAFB;
    text-align: center;
    font-family: Lexend;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }
  
  .di--btn-primary:disabled {
    background: #cccccc !important;
    box-shadow: none;
    cursor: not-allowed;
  }
  
  /* ---------------- BUTTON PRIMARY LIGHT ------------------ */
  
  .di--btn-primary-light {
    display: flex;
    height: 52px;
    padding: 16px 24px;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    background-color: none !important;
    color: #000000;
    text-align: center;
    font-family: Lexend;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    transition: 
    background-color 0.3s ease, 
    transform 0.2s ease, 
    box-shadow 0.2s ease;
    border: 2px solid  #000000;
  }
  
  .di--btn-primary-light:hover {
    background-color: #333333;
    color: #333333;
  }
  
  .di--btn-primary-light:active {
    background-color: #1a1a1a;
    color: #1a1a1a;
  }
  
  .di--btn-primary-light:disabled {
    background-color: #B7BEC6;
    color: #B7BEC6;
    cursor: not-allowed;
  }
  
  /* ---------------- BUTTON INFO ------------------ */
  .di--btn-info {
    display: flex;
    height: 52px;
    padding: 16px 24px;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    background: #DBDFE3;
    border: none;
    color: #707D8D;
    text-align: center;
    font-family: Lexend;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    transition: 
    background-color 0.3s ease, 
    transform 0.2s ease, 
    box-shadow 0.2s ease;
  }
  
  .di--btn-info:active {
    display: flex;
    padding: 16px 24px;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    background: #B7BEC6;
    border: none;
    color: #707D8D;
    text-align: center;
    font-family: Lexend;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }
  
  .di--btn-info:disabled {
    background: #EEF0F2 !important;
    box-shadow: none;
    cursor: not-allowed;
  }
  
  /* ---------------- BUTTON INFO LIGHT ------------------ */
  
  .di--btn-info-light {
    display: flex;
    height: 52px;
    padding: 16px 24px;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    background-color: none !important;
    color: #B7BEC6;
    text-align: center;
    font-family: Lexend;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    transition: 
    background-color 0.3s ease, 
    transform 0.2s ease, 
    box-shadow 0.2s ease;
    border: 2px solid  #B7BEC6;
  }
  
  .di--btn-info-light:active {
    background-color: #707D8D;
    color: #707D8D;
  }
  
  .di--btn-info-light:disabled {
    background-color: #B7BEC6;
    color: #B7BEC6;
    cursor: not-allowed;
  }
  
  /* ---------------- BUTTON DANGER ------------------ */
  .di--btn-danger {
    display: flex;
    height: 52px;
    padding: 16px 24px;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    background: #F64C4C;
    border: none;
    color: #F9FAFB;
    text-align: center;
    font-family: Lexend;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    transition: 
    background-color 0.3s ease, 
    transform 0.2s ease, 
    box-shadow 0.2s ease;
  }
  
  .di--btn-danger:hover {
    display: flex;
    padding: 16px 24px;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    background: #F76464;
    border: none;
    color: #F9FAFB;
    text-align: center;
    font-family: Lexend;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
  
  .di--btn-danger:active {
    display: flex;
    padding: 16px 24px;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    background: #F52E2E;
    border: none;
    color: #F9FAFB;
    text-align: center;
    font-family: Lexend;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }
  
  .di--btn-danger:disabled {
    background: #FDD1D1 !important;
    box-shadow: none;
    cursor: not-allowed;
  }
  
  /* ---------------- BUTTON DANGER LIGHT ------------------ */
  
  .di--btn-danger-light {
    display: flex;
    height: 52px;
    padding: 16px 24px;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    background-color: none !important;
    color: #F64C4C;
    text-align: center;
    font-family: Lexend;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    transition: 
    background-color 0.3s ease, 
    transform 0.2s ease, 
    box-shadow 0.2s ease;
    border: 2px solid  #F64C4C;
  }
  
  .di--btn-danger-light:hover {
    background-color: #F76464;
    color: #F76464;
  }
  
  .di--btn-danger-light:active {
    background-color: #F52E2E;
    color: #F52E2E;
  }
  
  .di--btn-danger-light:disabled {
    background-color: #FDD1D1;
    color: #FDD1D1;
    cursor: not-allowed;
  }
  
  /* ---------------- BUTTONS TAMANHOS ------------------ */
  
  .di--btn-sm {
    height: 30px !important;
  }
  
  .di--btn-md {
    height: 40px !important;
  }
  
  /* ---------------- BUTTONS ESTILOS ------------------ */
  
  .di--btn-light {
    background-color: none !important;
  }