/* Common CSS */
@font-face {
  font-family: 'Roboto';
  src: url('/o/dena-header-footer-navigation-css/Roboto/Roboto-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto';
  src: url('/o/dena-header-footer-navigation-css/Roboto/Roboto-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}


body {
  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial;
}

*,
*::after,
*::before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
/* Prefixed with `body` throughout this file (specificity +1 element) so these rules
   beat Bootstrap/Clay, which are injected AFTER this client extension and would
   otherwise win every equal-specificity tie on source order. On prod the same rules
   live in a JSP-linked login.css that loads after Bootstrap, so they win unprefixed. */
body ul,
body p {
  margin: 0;
  padding: 0;
}

.html {
  font-size: 62.5%;
}
body .container {
  max-width: 1200px;
  margin: auto;
  width: 90%;
}

/* The theme (dena-main-css) sets .portlet { margin-bottom: 10px }, which shows as a
   white strip between the hero and the footer. Prod cancels it from a <style> block in
   the JSP; migrated here so the JSP block can be retired. !important is required — the
   theme's rule has equal specificity and Bootstrap/Clay load after this extension. */
.portlet {
  margin-bottom: 0px !important;
}

/* body .navbar (0,1,1) beats Bootstrap's .navbar (0,1,0), which would otherwise win
   on source order and force position:relative + padding:8px 0 — pushing .main down
   so the hero image no longer sits behind the fixed header. Deliberately kept BELOW
   dena-theme-css's body.has-control-menu .navbar (0,2,1) so the signed-in
   control-menu override still wins. */
body .navbar {
  background: var(--Plain-White, #fff);
  box-shadow: 0px 5px 9px 0px rgba(0, 0, 0, 0.15);
  position: fixed;
  width: 100%;
  background: #fff;
  z-index: 100;
  padding: 0;
}

.navbar-container {
  display: flex;
  justify-content: space-between;
  height: 110px;
  align-items: center;
}

.menu-items {
  display: flex;
}

.logo {
height: unset !important;
width : 200px !important;
}
.alert-box {
  margin-top: 30px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.alert-success{
color: #173249 !important;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: normal;
background-color: unset !important;
}
.alert-success svg{
color: #173249 !important;
}
.alert-error svg,
.error-modal svg {
  color: #ef5050;
}

.info-modal svg {
  color: #58839f;
}

.success-modal svg {
  color: #22c7b8;
  font-size: 24px;
}

.error-alert {
  color: #ef5050;
  font-family: Roboto;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.error-modal,
.info-modal {
  padding: 16px;
}

.error-modal,
.info-modal h4 {
  color: var(--Jet-Black, #343434);
  font-family: Roboto;
  font-size: 22px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.error-modal-heading,
.info-modal-heading {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}

.error-modal-desc,
.info-modal-desc {
  margin-top: 20px;
}
.error-modal-desc,
.info-modal-desc p {
  color: var(--Sonic-Silver, #787878);
  font-family: Roboto;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 171.429% */
}

.modal-content button.modal-btn-close {
  height: 24px;
  height: 24px;
  width: 24px;
  position: absolute;
  border-radius: 50%;
  background-color: var(--Grey-Medium, #e5e5e5);
  z-index: 9999;
  right: 8px;
  top: 8px;
  text-align: center;
  border: 0px;
}

.modal-btn-close svg {
  color: var(--Dark-Medium, #4f4f4f);
}
/* For Login Page */

.main {
  width: 100%;
  min-height: 100vh;
  display: -moz-box;
  display: -ms-flexbox;
  position: relative;
  z-index: 1;
  background: linear-gradient(
      0deg,
      rgba(23, 50, 89, 0.2) 0%,
      rgba(23, 50, 89, 0.2) 100%
    ),
    var(--login-bg-image, url("/o/dena-login-page-css-cx/images/login-bg-updated.jpg"))
      lightgray 0px 0px / 100% 101.957% no-repeat;
}

.main .login-container {
  padding-top: 163px;
  padding-bottom: 100px;
}

.login-card {
  display: inline-block;
  margin-top: 50px;
  border-radius: var(--none, 0px) var(--none, 0px) 26px 26px;
  background: var(--Plain-White, #fff);
  box-shadow: 0px 9px 4px 0px rgba(0, 0, 0, 0.15);
}

.login-container h1 {
  color: var(--Plain-White, #fff);
  font-family: "ITC Officina Serif Std";
  font-size: 80px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.login-container p {
  color: var(--Plain-White, #fff);
  font-family: Roboto;
  font-size: 22px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.login-container .nav-tabs {
  display: inline-flex;
  height: 51px;
  padding: 0;
}

.nav-tabs .nav-link {
  display: flex;
  width: 298px;
  height: 51px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

/* Scoped under .login-container so these beat Bootstrap's .nav-tabs .nav-link.active
   (0,3,0). bootstrap.min.css is injected AFTER this client extension, so an equal
   specificity rule would lose on source order. */
.login-container .nav-tabs .nav-link.active {
  border-bottom: 2px solid #58839f;
  background: var(--Cool-Ice, #e9eeef);
  color: var(--Blue-Stone, #58839f);
  font-family: Roboto;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px; /* 150% */
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.login-container .nav-tabs .nav-link {
  border: unset;
  border-bottom: 2px solid #d6d6d6;
  border-radius: 0px;
  color: var(--Spanish-Gray, #989898);
  font-family: Roboto;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px; /* 150% */
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.login-form {
  padding: 20px;
  margin: 20px 0px;
}

.login-card .admin-login {
  width: 596px;
}

.login-form .sp-login-form {
  width: 450px;
}

/* DAFZ Client tab: single, centered SSO login button.
   Everything above the button is removed for this tab, so the form is
   widened to fill the card and the button is centered against the full
   card width. The wrapper is given the same height the Vendor form
   occupies so the card stays the same size when switching tabs. */
#tenant-login-pane .sp-login-form {
  width: 100%;
}

#tenant-login-pane .sso-login-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 303px; /* matches the Vendor tab form height (343px) minus 40px padding */
}

#tenant-login-pane .sso-login-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#tenant-login-pane .sso-login-inner .btn-primary {
  margin-top: 0;
}

#tenant-login-pane .sso-help-text {
  margin-top: 16px;
  max-width: 260px;
  text-align: center;
  color: var(--Sonic-Silver, #787878);
  font-family: Roboto;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.nav-tabs + .tab-content .tab-pane {
  background-color: unset !important;
  border-radius: unset !important;
  padding: unset !important;
}

.form-footer {
  display: flex;
  justify-content: space-between;
}

body .btn-primary {
  margin-top: 27px;
  display: flex;
  min-width: 216px;
  min-height: 54px;
  padding: 8px 22px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  background: var(--Charcoal-Blue, #173249);
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.12),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.2);
  /* btn text */
  color: var(--primary-contrast, #fff);
  font-family: Roboto;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 26px; /* 144.444% */
  letter-spacing: 0.46px;
  text-transform: uppercase;
  outline: 0;
  border: 0;
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--Pastel-Blue, #b3ced4);
  color: var(--Charcoal-Blue, #173249);
}

.btn-primary:disabled {
  background: var(--Light-Silver, #d6d6d6);
  color: var(--Sonic-Silver, #787878);
  box-shadow: unset;
}

form .login-btn:focus {
  outline: 0;
}

.form-input .form-label {
  color: var(--Blue-Stone, #58839f);
  font-family: Roboto;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 12px; /* 85.714% */
  letter-spacing: 0.15px;
}

.form-footer label {
  margin-left: 8px;
  margin-bottom: 0px !important;
}

.common-text {
  color: var(--Blue-Stone, #58839f);
  font-family: Roboto;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.form-input {
  display: inline-flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  position: relative;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
  vertical-align: top;
  width: 100%;
  margin-bottom: 30px;
}

.form-input .input-field {
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.4375em;
  letter-spacing: 0.00938em;
  color: rgba(0, 0, 0, 0.87);
  box-sizing: border-box;
  position: relative;
  cursor: text;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
}

.form-input .input-field::before {
  border-bottom: 1px solid #d6d6d6;
  left: 0;
  bottom: 0;
  content: "\00a0";
  position: absolute;
  right: 0;
  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  pointer-events: none;
}

.form-input.disabled-input .input-field::before {
  border-bottom-style: dotted;
}

.form-input.disabled-input label,
.form-input.disabled-input input {
  color: var(--Spanish-Gray, #989898) !important;
}

.form-input .input-field input {
  font: inherit;
  letter-spacing: inherit;
  color: currentColor;
  padding: 4px 0 5px;
  border: 0;
  box-sizing: content-box;
  background: none;
  height: 1.4375em;
  margin: 0;
  -webkit-tap-highlight-color: transparent;
  display: block;
  min-width: 0;
  width: 100%;
  -webkit-animation-name: mui-auto-fill-cancel;
  animation-name: mui-auto-fill-cancel;
  -webkit-animation-duration: 10ms;
  animation-duration: 10ms;
}

.form-input .input-field input::after {
  border-bottom: 2px solid #1976d2;
  left: 0;
  bottom: 0;
  content: "";
  position: absolute;
  right: 0;
  -webkit-transform: scaleX(0);
  -moz-transform: scaleX(0);
  -ms-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: -webkit-transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
  transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
  pointer-events: none;
}

.form-input .input-field input:focus {
  outline: none;
}

.form-input .input-field input::placeholder {
  color: var(--Silver-Chalice, #adadad);
  font-family: Roboto;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 133.333% */
  letter-spacing: 0.15px;
}

.checkbox-group {
  display: inline-flex;
  align-items: center;
}

.check-box-group label {
  margin-bottom: 0px !important;
}

.checkbox-group input[type="checkbox"] {
  width: 20px;
  height: 20px;
}

.checkbox-group input[type="checkbox"]:checked {
  accent-color: var(--Blue-Stone, #58839f);
}

.text-link {
  color: var(--Blue-Stone, #58839f);
  font-family: Roboto;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-decoration: none !important;
  margin-bottom: 0px !important;
}

.text-link:hover {
  color: var(--Charcoal-Blue, #173249);
}

.sign-up-sp {
  margin-top: 18px;
}

.login-bottom-box {
  max-width: 596px;
  padding: 13px 20px;
  border-radius: var(--none, 0px) var(--none, 0px) 26px 26px;
  background: var(--Culture-Gray, #f8f8f8);
}

.login-bottom-box .alert-box {
  margin-top: 0px;
  color: var(--Sonic-Silver, #787878);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 143%; /* 20.02px */
  letter-spacing: 0.17px;
}

.login-bottom-box .alert-box .error-info {
  margin-left: 10px;
}

.login-bottom-box .alert-box svg {
  font-size: 22px;
}

/* For Set Password */
.reset-password-card {
  border-radius: var(--1, 8px) var(--1, 8px) 26px 26px;
  background: var(--Plain-White, #fff);
  box-shadow: 0px 9px 4px 0px rgba(0, 0, 0, 0.15);
  min-width: 750px;
}
.reset-password-card .btn-primary {
  margin-top: 0px;
}
.password-criteria-list {
  margin-top: 5px;
}
.password-criteria-list ul {
  list-style: none;
}

.password-criteria-list ul li {
  color: var(--Sonic-Silver, #787878);
  font-family: Roboto;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 142.857% */
}

.password-criteria-list .validated-password {
  color: var(--Blue-Stone, #58839f);
}

/* For Personalize  */

.checkbox-btn label {
  color: var(--Sonic-Silver, #787878);
  text-align: center;
  font-family: Roboto;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  cursor: pointer;
}

.checkbox-btn label span {
  overflow: hidden;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 15px;
  border: 1px solid var(--Pastel-Blue, #b3ced4);
  background: var(--Plain-White, #fff);
}

.checkbox-btn label span svg {
  margin-right: 10px;
  color: #58839f;
}

.checkbox-btn label input {
  position: absolute;
  display: none;
  color: #fff !important;
}

.checkbox-btn input:hover + span {
  border: 1px solid var(--Silver-Sand, #c5c5c5);
  background: var(--Cool-Ice, #e9eeef);
  color: var(--Blue-Stone, #58839f);
}

.checkbox-btn input:checked + span {
  color: var(--Charcoal-Blue, #173249);
  border: 1px solid var(--Pastel-Blue, #b3ced4);
  background: var(--Pastel-Blue, #b3ced4);
}

.checkbox-btn input:checked + span svg {
  color: var(--Charcoal-Blue, #173249);
}

.login-form-services form {
  max-width: 1057px;
}

.personalize-card {
  max-width: 1057px;
  border-top-left-radius: var(--1, 8px);
  border-top-right-radius: var(--1, 8px);
}

.login-form-services {
  padding: 20px 0px;
}

.login-form-services .form-label,
.service-remarks,
.proceed-to-dashboard {
  margin: 0px 20px;
}

.login-form-services .form-label::after {
  content: " *";
  color: var(--Fire-Opal, #ef5050);
  font-family: Roboto;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.login-form-services .check-box-group {
  padding: 25px 20px;
  background: var(--Culture-Gray, #f8f8f8);
  border: 2px solid #efefef;
  border-left: 0px;
  border-right: 0px;
}

.check-box-group {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 16px;
}

.service-remarks {
  margin-top: 16px;
  color: var(--Blue-Stone, #58839f);
  font-family: Roboto;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.login-form-services button {
  margin-top: 10px;
}

/* Reset Password Screen */

.custom-modal-heading .custom-modal-title {
  color: var(--Jet-Black, #343434);
  font-family: Roboto;
  font-size: 22px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin-bottom: 2px;
}

.custom-modal-heading p {
  color: var(--Sonic-Silver, #787878);
  font-family: Roboto;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 171.429% */
}

.reset-password-form {
  margin-top: 36px;
}

.reset-password-form form {
  max-width: 450px;
}

.reset-password-form .btn-primary {
  margin-top: 0px;
}

.reset-pass-modal-body {
  margin: 25px 12px;
  border: 0;
}

#otp-form {
  margin-top: 10px;
}

#otp-form .btn-primary {
  margin-top: 32px;
}

.otp-main {
  margin-bottom: 14px;
}

.resend-otp {
  outline: 0;
  border: 0;
  color: var(--Blue-Stone, #58839f);
  font-family: Roboto;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  background-color: unset;
}

.resend-otp:disabled {
  color: var(--Spanish-Gray, #989898);
}

.time-countdown {
  color: var(--Jet-Black, #343434);
  font-family: Roboto;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin-right: 8px;
}

/* OTP */
.otp-input-group {
  display: inline-flex;
}
body .margin-left-0 {
  margin-left: 0px !important;
}
body .form-control {
  -webkit-transition: none;
  transition: none;
  text-align: center;
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  border-radius: 10px;
  border: 2px solid var(--Light-Silver, #d6d6d6);
  color: var(--Charcoal-Blue, #173249);
  font-family: Roboto;
  font-size: 40px;
  font-style: normal;
  font-weight: 400;
  line-height: 60px; /* 150% */
}

body .form-control:focus {
  background-color: #ffffff;
  border-color: #d6d6d6;
  outline: 0;
  box-shadow: unset;
}
/* END OTP */

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0;
}

.invalid-input svg {
  color: var(--Fire-Opal, #ef5050);
}

.valid-input svg {
  color: var(--Blue-Green, #22c7b8);
}

.reset-password-card .alert-error {
  margin-top: 10px;
}

::-webkit-scrollbar {
  width: 10px;
}

.checkbox-btn span i {
margin-right: 8px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}