/* 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;
}
ul,
p {
  margin: 0;
  padding: 0;
}

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

.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%
    ),
    url("./../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;
}

.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;
}

.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;
}

.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;
}

.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;
}
.margin-left-0 {
  margin-left: 0px !important;
}
.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% */
}

.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;
}

: 6px;
border-radius: 6px;
height: 144px;