* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none !important;
}

::-webkit-scrollbar {
    width: 8px;
    height:8px;
}

::-webkit-scrollbar-track {
    background: var(--color-blue);
}

::-webkit-scrollbar-thumb {
    background: var(--color-primary-blue);
}



:root {
  /* Greys */
  --color-dark-grey: #545F71;
  --color-light-grey: #EFEFEF;
  --color-light-grey-2: #EEF1F4;
  --color-medium-grey: #9BA5B7;
  --color-lighter-grey: #f8f9fa;
  --color-mid-dark-grey: #555555;
  --color-link-text: #009BD5;

  /* Blues */
  --color-light-skyblue: #E2F3FF;
  --color-mid-skyblue: #64BFFF;
  --color-blue: #3963ED;
  --color-primary-blue: #04497E;

  /* Greens */
  --color-light-green: #E6FFE2;
  --color-mid-green: #7DD87B;

  /* Browns */
  --color-light-brown: #FFEEE8;
  --color-mid-brown: #D8947B;

  /* Accents */
  --color-red: #FA4646;
  --color-orange: #D9A71E;
  --color-pink: #FEF8EA;

  /* Neutrals */
  --color-black: #000000;
  --color-black-alt: #1D1B20;
  --color-black-font: #1E1E1E;
  --color-white: #ffffff;
  --header-color: #021838;

  /* Some other colors */
  --border-color-light: #E7EAEC;
  --border-color-dark: #B5BdC4;
  --primary-black-color: #07121B;
  --secondary-black-color: #607180;
  --heading-color-section: #04497E;
  --grey-icon-color: #929DA8;
  --background-bg-color: #EDEDEE;

  --color-success : #12B76A;
  --color-error: #F04438;
  --navbar-text-color: #F1B42F;
  --status-in-review-color: #f6dd03;
}

#global-page-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.page-loader-content {
  text-align: center;
}

.page-loader-logo {
  width: 120px;
  height: auto;
  margin-bottom: 20px;
}

.page-loader-text {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 15px;
  color: #333;
}

.page-loader-progress {
  width: 250px;
  height: 10px;
  background: #e0e0e0;
  border-radius: 5px;
  overflow: hidden;
  margin: 0 auto;
}

.page-loader-bar {
  width: 0%;
  height: 100%;
  background: #3498db;
  transition: width 0.3s ease;
}

/* Modern browsers */
input::placeholder,
textarea::placeholder {
  color: var(--color-black) !important;
  opacity: 0.25;
}

/* WebKit (Chrome, Safari, newer Edge) */
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: var(--color-black) !important;
  opacity: 0.25;
}

/* Firefox (legacy prefixes) */
input:-moz-placeholder,
textarea:-moz-placeholder {
  color: var(--color-black) !important;
  opacity: 0.25;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
  color: var(--color-black) !important;
  opacity: 0.25;
}

/* IE10–11 */
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: var(--color-black) !important;
  opacity: 0.25;
}


input {
  background-color: var(--color-white) !important;
}


html {
  font-size: 100%;
  outline: none;
}

.navbar-dark{
  padding: 0;
}

.weblink {
  margin:0 0.75rem;
}

.static-top.navbar .menu-bar > .navbar-nav > li > a{
  font-size: 0.875rem !important;
  padding: 5px 0;
}

.nav-item:hover {
    color: var(--navbar-text-color);
}

.navbar-dark .navbar-nav .show.dropdown-menu {
  background-color: var(--header-color) !important;
}

.navbar-dark .navbar-nav .show.dropdown-menu > li > a {
  color: var(--navbar-text-color) !important;
}

/* Top-level menu links only */
.weblinks > .nav-item > .nav-link:hover,
.weblinks > .nav-item > .nav-link:focus {
    background-color: transparent !important;
}

/* Keep dropdown toggle (username) visible even when hovering inside dropdown */
.weblinks .nav-item.dropdown:hover > .nav-link,
.weblinks .nav-item.dropdown:focus-within > .nav-link {
    background-color: transparent !important;
    color: var(--color-orange) !important; /* keeps the text color */
}

.navbar-dark .navbar-nav a.show, .navbar-dark .navbar-nav a.dropdown-toggle.show {
  color: var(--color-white) !important;
}

.static-top.navbar .menu-bar > .navbar-nav > li > a:hover{
  background: transparent;
  color: var(--navbar-text-color);
  border-bottom-color: none;
  text-decoration: none !important;
}

.navbar-nav .nav-link.active, .navbar-nav .show>.nav-link{
  color: var(--navbar-text-color);
  border-bottom: 3px solid var(--navbar-text-color) !important;
}

.static-top.navbar .menu-bar > .navbar-nav > .divider-vertical{
  margin-top: 8px !important;
}


body {
  font-family: Arial, sans-serif;
  background-color: var(--background-bg-color) !important;
  height: 100vh !important;
  outline: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Times New Roman", serif !important;
  margin: 0px;
}

.accordion-item {
  border: 1px solid var(--color-light-grey-2);
  border-left: none;
  border-right: none;
  border-radius: 0px;
  opacity: 0;
  transform: translateX(0);
  animation: slideUp 0.7s ease forwards;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

footer .footer-bottom p{
  color: var(--color-white) !important;
  font-size: 13px !important;
}

.accordion-item h2.accordion-header {
  margin-top: 0;
}

/* Utility focus reset */
button:focus,
button:active,
.accordion-button:focus,
#content .nav-tabs.nav-account .nav-link.active {
  outline: none;
  box-shadow: none;
  border-color: transparent;
}

.alert-danger {
  background-color: var(--color-light-brown);
  color: var(--color-danger);
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.validation-summary-errors {
  background-color: #fff3f3;
  border-left: 4px solid var(--color-red);
  color: var(--color-red);
  padding: 6px 15px;
  border-radius: 6px;
  font-size: 0.875rem;
  margin-bottom: 15px;
  box-shadow: 2px 2px 8px rgba(217, 48, 37, 0.1);
  /* animation: fadeIn 0.5s ease-in-out; */
  --bs-alert-color: var(--color-red) !important;
}

.validation-summary-errors ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.validation-summary-errors li {
  margin-bottom: 6px;
}

.validation-summary-errors a {
  color: var(--color-red);
  text-decoration: none;
  font-weight: 500;
  transition: color .3s ease;
}

.validation-summary-errors a:hover {
  color: #a61b1b;
  opacity: 0.8;
  text-decoration: underline;
}

#content {
  width: 100%;
  max-width: 400px;
  margin: 3rem auto;
  box-shadow: 0 0 1rem rgba(0, 0, 0, .10);
  padding: 1px 0 1.5rem;
  border-radius: 1rem;
  background: #ffffff;
}

#ContentContainer_MainContent_MainContent_SecureRegister > .row > .col-lg-6 {
  width: 100%;
}

/* Account nav */
#content .nav-tabs.nav-account {
  border-bottom: 1px solid var(--color-light-grey);
  justify-content: center;
  gap: 1rem;
  padding-bottom: 0;
}

#content .nav-tabs.nav-account .nav-link {
  font-size: 0.937rem;
  font-weight: 500;
  color: var(--color-black-font);
  padding: .75rem 1.5rem;
  border-radius: .5rem .5rem 0 0;
  background-color: var(--color-lighter-grey);
  border: 1px solid transparent;
  transition: all .3s ease;
}

#content .nav-tabs.nav-account .nav-link:hover {
  color: var(--color-primary-blue) !important;
  text-decoration: none;
}

#content .nav-tabs.nav-account .nav-link.active {
  background-color: var(--color-white);
  color: var(--color-black-font);
  border-color: #ddd #ddd var(--color-white);
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.05);
}

/* Login heading */
.login-heading-section {
  border-bottom: none;
  line-height: inherit;
  margin: 0;
  color: var(--color-black) !important;
  padding-bottom: 0;
  font-size: 1.5rem;
  text-align: center;
  font-weight: 400;
}

.portal-form {
  padding: 0 1.5rem;
}

/* Full width column behavior inside portal-form/page-content */
.page-content .col-md-6,
.portal-form .row.mb-3>label,
.portal-form .row.mb-3>div,
.portal-form .row.mb-3>.offset-md-4.col-md-8 {
  flex: 0 0 100%;
  max-width: 100%;
  margin-left: 0;
}

/* Row label styling */
.portal-form .row.mb-3>label {
  text-align: left;
  font-size: 0.875rem;
  color: var(--color-black-font);
  font-weight: 400 !important;
}

/* Submit button (sign in) */
.portal-form #submit-signin-local {
  width: 100%;
  margin-bottom: .5rem;
  border-radius: .5rem;
  background: var(--color-black-alt);
  border: 1px solid var(--color-black);
  color: var(--color-white);
  padding: 0.75rem 1.25rem;
  font-size: 0.937rem;
  font-weight: 400;
  transition: background .3s ease, box-shadow .3s ease, transform .2s ease;
}

.portal-form #submit-signin-local:hover {
  background: var(--color-black);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transform: translateY(-1px);
}

/* Forgot password link */
.portal-form a[title="Forgot your password?"] {
  display: block;
  width: 100%;
  text-align: right;
  font-size: 14px;
  color: var(--color-black-alt);
  background: none;
  border: none;
  padding: 0;
  margin-top: .5rem;
  text-decoration: none;
}

.portal-form a[title="Forgot your password?"]:hover {
  text-decoration: underline;
}

/* External login button centering */

button[title="Sign in"] {
  width: 100% !important;
}

.btn-line,
.btn-primary {
  background-color: var(--color-primary-blue) !important;
  color: var(--color-white) !important;
  border-color: var(--color-primary-blue) !important;
  width: auto !important;
  display: block !important;
  margin: 10px auto !important;
  text-align: center;
  font-weight: 400 !important;
  color: white !important;
  font-size: 15px !important;
  padding: 8px 20px !important;
  border-radius: 4px !important;
}

.btn-line:hover,
.btn-primary:hover {
  background-color: var(--color-blue) !important;
}

/* ----------------------
   Checkbox custom styles
   --------------------*/
/* .checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 0;
} */

.portal-form .checkbox label {
  display: flex;
  align-items: center;
  text-align: left;
  font-size: 14px;
}

.portal-form .checkbox input[type="checkbox"] {
  margin-right: 0.5rem;
  position: relative;
  top: -3px;
}

/* Hide default and custom style (scoped for .checkbox) */
.checkbox input[type="checkbox"] {
  appearance: none;
  width: 1.1rem;
  height: 1.1rem;
  border: 2px solid var(--color-blue);
  border-radius: 4px;
  background: var(--color-white);
  cursor: pointer;
  position: relative;
  transition: all .2s ease;
}

.checkbox input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 5px;
  width: 5px;
  height: 10px;
  border: solid var(--color-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Generic checkbox (other contexts) */
input[type="checkbox"] {
  appearance: inherit;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--color-blue);
  border-radius: 4px;
  background-color: var(--color-white);
  cursor: pointer;
  position: relative;
  transition: all .2s ease;
}

input[type="checkbox"]:checked {
  background-color: var(--color-blue) !important;
}

input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 6px;
  width: 5px;
  height: 10px;
  border: solid var(--color-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ----------------------
   Generic UI containers
   --------------------*/
.crmEntityFormView,
.entitylist,
.modal-content,
.popover-content {
  background-color: var(--color-white);
  padding: 2rem;
}

/* Disabled look */
.disabled-row,
.disabled-row tr td {
  /* background-color: rgba(0, 0, 0, 0.2) !important; */
  pointer-events: none;
  user-select: none;
  opacity: .3;
  position: relative;
  z-index: 99; 
}

/* Toast */
.toast {
  visibility: visible;
  min-width: 370px;
  background-color: var(--primary-black-color);
  color: var(--color-white);
  text-align: left;
  border-radius: 8px;
  padding: 16px 20px;
  position: fixed;
  z-index: 9999;
  left: 50%;
  bottom: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  box-shadow: rgba(0, 0, 0, 0.22) 0 25.6px 57.6px, rgba(0, 0, 0, 0.18) 0 4.8px 14.4px;
  opacity: 0;
  transition: opacity .4s ease, bottom .4s ease;
}

.toast.show {
  opacity: 1;
  bottom: 50%;
}

.toast.success {
  background-color: var(--color-success);
  /* border: 1px solid var(--color-mid-green); */
  color: var(--color-white);
}

.toast.error {
  background-color: var(--color-error);
  /* border: 1px solid var(--color-mid-brown); */
  color: var(--color-white);
}

.toast.info {
  background-color: var(--color-white);
  border: 1px solid var(--color-blue);
  color: var(--color-blue);
}

/* Loader overlay */
.loader-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 10000;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: var(--color-white);
  font-size: 18px;
}

.loading-section {
  padding: 20px 30px;
  background: var(--color-white);
  border-radius: 8px;
  display: flex;
  box-shadow: rgba(0, 0, 0, 0.22) 0 25.6px 57.6px, rgba(0, 0, 0, 0.18) 0 4.8px 14.4px;
}

.spinner {
  border: 6px solid #f3f3f3;
  border-top: 6px solid var(--color-blue);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
  margin-bottom: 12px;
  margin-right: 20px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Accordion */
.accordion-button,
.accordion-heading-title {
  color: var(--color-primary-blue);
  font-family: Arial;
  font-size: 20px;
  font-weight: 400;
  border-radius: 3rem;
}

.accordion-item {
  margin: 0px;
}

.accordion-button:not(.collapsed) {
  color: var(--color-primary-blue);
  background-color: var(--color-white);
  box-shadow: none;
  border-radius: 0;
}

/* User details panel */
.userdetails-panel {
  padding: 16px;
  margin: 0;
  background: var(--color-white);
  border-radius: 8px;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, .15);
  animation: slideUp 0.7s ease forwards;
}

/* Paragraph defaults */
p,
.p,
.page_section p,
.section-diagonal-left p,
.section-diagonal-right p,
p.form-text span {
  color: var(--primary-black-color) !important;
  font-size: 14px !important;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: .5px;
  margin: 15px 0;
}

.static-top.navbar-dark{
  border-bottom: 1px solid rgba(255,255,255,0.2) !important;
}

/* Table wrapper */
.tableWrapper {
  width: 100%;
  border: 1px solid var(--color-light-grey-2);
  padding: 20px;
  margin-top: -15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
  background: #fff;
  border-radius: 8px;
}

/* ----------------------
   Table / cdd-table styles
   --------------------*/
/* .table, table {
  width: 100%;
  border-collapse: collapse;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
  border-radius: 6px;
  overflow: hidden;
  background: transparent;
}

.table thead, table thead {
  background-color: #0078D7;
  color: #fff;
}

.table th, table th {
  padding: 14px;
  text-align: left;
  font-weight: 600;
  font-size: 16px;
}

.table td, table td {
  padding: 12px 14px;
  border-bottom: 1px solid #e0e0e0;
  font-size: 15px;
  color: #333;
} */
/*Changes commented by KS

.cdd-table,
.table,
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  font-family: Arial, sans-serif;
  font-size: 0.875rem;
}

.cdd-table th,
.table th,
table th .cdd-table td,
.table td,
table td {
  border: 1px solid var(--border-color-light);
  text-align: left;
  /* vertical-align: middle; */
/*  vertical-align: top;
  letter-spacing: .5px;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  /* 150% */
/*  letter-spacing: 0.5px;

}

.cdd-table th,
.table th,
table th {
  color: var(--heading-color-section);
  background: var(--color-pink);
  padding: 12px 16px;
  font-weight: normal;
}

.cdd-table td,
.table td,
table td {
  color: var(--primary-black-color);
  padding: 5px 16px;
}

.cdd-table tr,
.table tr,
table tr {
  background-color: var(--color-white);
  transition: background-color .3s ease;
}

.cdd-table tr:hover,
.table tr:hover,
table tr:hover {
  background-color: var(--border-color-light);
}*/

/*Changes for Table inside a table*/
.cdd-table:not(.inner_tbl),
.table:not(.inner_tbl),
table:not(.inner_tbl) {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  font-family: Arial, sans-serif;
  font-size: 0.875rem;
}

.cdd-table:not(.inner_tbl) th,
.table:not(.inner_tbl) th,
table:not(.inner_tbl) th,
.cdd-table:not(.inner_tbl) td,
.table:not(.inner_tbl) td,
table:not(.inner_tbl) td {
  border: 1px solid var(--border-color-light);
  text-align: left;
  vertical-align: top;
  letter-spacing: 0.5px;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  vertical-align: middle;
}

.cdd-table:not(.inner_tbl) th,
.table:not(.inner_tbl) th,
table:not(.inner_tbl) th {
  color: var(--heading-color-section);
  background: var(--color-pink);
  padding: 12px 16px;
  font-weight: normal;
}

.cdd-table:not(.inner_tbl) td,
.table:not(.inner_tbl) td,
table:not(.inner_tbl) td {
  color: var(--primary-black-color);
  padding: 5px 16px;
}

.cdd-table:not(.inner_tbl) tr,
.table:not(.inner_tbl) tr,
table:not(.inner_tbl) tr {
  background-color: var(--color-white);
  transition: background-color 0.3s ease;
}

.cdd-table:not(.inner_tbl) tr:hover,
.table:not(.inner_tbl) tr:hover,
table:not(.inner_tbl) tr:hover {
  background-color: var(--border-color-light);
}

.inner_tbl{
  width: 100%;
}

.inner_tbl tr:hover{
  background: transparent;
}

.inner_tbl tr td,
.inner_tbl tr th {
  padding: 0 !important;
  border: none !important;
}

/* Dropdown / select styles used in various places */
select {
  outline: none;
  border: none;
  background: none;
}

.dropdown,
.dropdown-center,
.dropend,
.dropstart,
.dropup,
.dropup-center {
  padding: 0 !important;
}

.dropdown {
  padding: 8px;
  font-size: 14px;
}

select.dropdown {
  width: 100%;
  padding: 8px;
  font-size: 14px;
}

/* Scoped select appearance for cdd-table */
.cdd-table select {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  font-size: 13px;
  color: var(--muted-text);
  cursor: pointer;
  position: relative;
  display: inline-block;
  box-shadow: none;
}

.cdd-table option {
  background: var(--color-white);
  color: var(--primary-black-color);
  padding: 5px 10px;
}

/* Note: pseudo-element arrow via ::after is not supported on <select> reliably; kept for design intent */
.cdd-table select::after {
  content: "u{25be}";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 14px;
  color: var(--muted-text);
}

/* ----------------------
   Upload / file inputs
   --------------------*/
/* Default upload button (generic) */
.upload-btn {
  background-color: var(--color-blue);
  color: var(--color-white);
  border: none;
  padding: 8px 14px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color .3s ease;
  min-width: 100px;
}

.upload-btn:hover {
  background-color: var(--color-dark-grey);
}

/* Scoped cdd-table upload button with icon and pill style */
.cdd-table button.upload-btn {
  color: var(--color-white);
  border: none;
  padding: 5px 16px 5px 40px;
  font-size: 13px;
  border-radius: 48px;
  cursor: pointer;
  position: relative;
  background-color: var(--color-link-text);
}

.cdd-table button.upload-btn::after {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml;utf8,<svg fill='white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 20h14v-2H5v2zm7-18L5.33 9h3.67v4h6V9h3.67L12 2z'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}

.cdd-table button.upload-btn:hover {
  background-color: var(--color-dark-grey);
}

/* File input base rules */
input[type="file"] {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  color: var(--color-mid-dark-grey);
}

/* .file-upload wrapper and input styling */
.file-upload {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  padding: 0;
  margin: 0 auto;
  border: none;
  border-radius: 12px;
  transition: border-color .3s ease, box-shadow .3s ease;
}

.file-upload:hover {
  border-color: var(--color-primary-blue);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
}

.file-upload .file-input {
  font-size: 13px;
  color: var(--color-primary-blue);
  padding: 0;
  border-radius: 20px 8px 8px 20px;
  border: none;
  background: var(--color-link-text);
  cursor: pointer;
  margin-bottom: 0;
  width: 100%;
}

.file-upload .file-input::file-selector-button {
  font-size: 13px;
  font-weight: 400;
  color: var(--color-white);
  padding: 5px 15px;
  margin-right: 12px;
  border: none;
  border-radius: 20px;
  background: var(--color-link-text);
  /* box-shadow: 0 2px 6px rgba(0, 0, 0, .15); */
  cursor: pointer;
  transition: all .3s ease;
}

.file-upload .file-input::file-selector-button:hover {
  background: linear-gradient(135deg, #357ab8, #2c5f94);
}

.file-upload .file-input:focus {
  outline: none;
  /* box-shadow: 0 0 0 3px rgba(74, 144, 226, .4); */
}

/* Upload area dashed box */
.upload-area {
  border: 2px dashed var(--color-light-grey);
  padding: 30px;
  cursor: pointer;
  border-radius: .5rem;
}

.upload-area:hover {
  border-color: var(--color-blue);
  background-color: var(--color-lighter-grey);
}

#uploadMessage {
  font-size: 11px;
}

/* ----------------------
   Documents / headings
   --------------------*/
.sectionBlockLayout {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 8px;
}

.wrapper-body {
  padding: 20px 0;
  min-height: calc(100% - 101px) !important;
}

#content-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.lightGrayColor {
  color: var(--secondary-black-color) !important;
}

.min-column-height {
  height: 1.5rem;
}

.heading {
  color: var(--heading-color-section);
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  margin: 0;
}

.sub_heading,
.h3-heading {
  color: var(--heading-color-section);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
}

.sub_heading a.anchor-link-style {
  color: var(--color-link-text);
}

.sub_heading a.anchor-link-style:hover {
  color: var(--heading-color-section);
}

/* Table appearance notes previously red—changed to neutral */
.table {
  background-color: transparent;
}

/* ----------------------
   Questionnaire / forms
   --------------------*/
.form-container {
  width: 100%;
  /* max-width: fit-content; */
  margin: inherit;
}

form label {
  display: block;
  font-weight: 600;
  color: var(--color-black-font);
  font-size: 14px;
  transition: color 0.3s ease;
  margin-bottom: 5px;
  transition: color .3s ease;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="date"],
textarea,
select {
  width: 100%;
  padding: 0.50rem 1rem;
  border: 1px solid var(--border-color-light);
  border-radius: 8px;
  font-size: 1rem;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.05);
  transition: border-color .3s ease, box-shadow .3s ease;
  font-size: 0.9rem;
  color: var(--color-black-font);
}

.radio-group {
  margin-top: .5rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.radio-group label {
  font-weight: normal;
}

.form-container button {
  margin-top: .6rem;
  width: auto;
  padding: .35rem 1rem;
  background-color: var(--accent-blue);
  color: var(--color-white);
  border: none;
  border-radius: 8px;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background-color .3s ease;
}

.form-container button:hover {
  background-color: #005fa3;
}

/* #Register > #ContentContainer_MainContent_MainContent_SecureRegister > .alert-info{
  display: none;
} */

#Register  #ContentContainer_MainContent_MainContent_SecureRegister  .alert-info{
  display: none;
}

/* CRM lookup */
.crm-lookup {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.crm-lookup input[type="text"] {
  width: 350px;
  padding: .45rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: #e1eae8;
}

.crm-lookup button {
  padding: 7px 16px;
  background: #ccc;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.crm-lookup button:hover {
  background-color: #005a9e;
}

/* Lookup dialog */
.lookup-dialog {
  position: fixed;
  top: 20%;
  left: 30%;
  width: 300px;
  background: #fff;
  border: 1px solid #ccc;
  padding: 20px;
  z-index: 1000;
  box-shadow: 0 0 10px rgba(0, 0, 0, .3);
}

.lookup-content ul {
  list-style: none;
  padding: 0;
  margin: 10px 0;
}

.lookup-content li {
  padding: 8px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
}

.lookup-content li:hover {
  background-color: #f0f0f0;
}

.lookup-content button {
  margin-top: 10px;
  padding: 6px 12px;
  background-color: var(--color-mid-dark-grey);
  color: var(--color-white);
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.lookup-content button:hover {
  background-color: #444;
}

/* Hidden helper */
.hidden {
  display: none;
}

/* Popup alert */
.popup-alert {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--color-mid-green);
  border: 3.6px solid var(--color-mid-green);
  padding: 1.5rem 2rem;
  border-radius: 10px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, .2);
  z-index: 9999;
  max-width: 50%;
  width: 100%;
  text-align: center;
}

/* Title */
.popup-alert h4 {
  font-size: 1.2rem;
  color: var(--color-white);
  margin: 0;
  padding: 0;
}

/* Optional paragraph */
.popup-alert p {
  margin: 0.5rem 0 0;
  color: #f5f5f5;
}

/* Close button */
.popup-alert .close-btn {
  position: absolute;
  top: -20px;
  right: 0rem;
  background: none;
  border: none;
  font-size: 3rem;
  color: var(--color-white);
  cursor: pointer;
}


.popup-alert .close-btn:hover {
  color: #333;
  background: transparent !important;
}

/* Fade-in animation used earlier */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, -60%);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

.customtooltip {
  display: inline-block;
  /* or "block" if you want it to take full width */
  position: relative;
  box-sizing: border-box;
  max-width: 100%;
  /* never exceed parent width */
  white-space: normal;
  /* allow wrapping */
  overflow-wrap: break-word;
  word-break: break-word;
  line-height: 1.4;
  cursor: help;
  padding-right: 0.25rem;
  /* visual breathing room, optional */
}

label.customtooltip {
  text-decoration: underline !important;
  text-decoration-color: currentColor;
  text-decoration-thickness: auto;
  text-decoration-skip-ink: auto;
  cursor: help
}

/* Pure-CSS tooltip using data-tooltip attribute */
.customtooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: -80px;
  max-height: 120px;
  overflow-y: auto;
  z-index: 9999;
  display: none;
  /* shown on hover/focus */
  background: var(--heading-color-section);
  color: var(--color-white);
  padding: 0.6rem 0.8rem;
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  white-space: normal;
  /* ensure tooltip text wraps */
  overflow-wrap: break-word;
  word-break: break-word;
  width: auto;
  max-width: calc(100vw - 20px);
  /* never overflow viewport horizontally */
}

/* show tooltip on hover and when focused (accessibility) */
.customtooltip:hover::after,
.customtooltip:focus::after {
  display: block;
}

/* optional: prevent tooltip from going off-screen to the right */
.customtooltip::after {
  left: 0;
  right: auto;
}

/* optional: reposition tooltip when near the right edge */
@media (min-width: 320px) {
  .customtooltip[data-tooltip] {
    /* fallback safe max width */
    max-width: 100%;
  }
}

form#testform {
  margin: 0px auto;
}

h4.sub_heading {
  position: relative;
}

h4.sub_heading::before {
  content: "";
  display: block;
  width: 100%;
  background: linear-gradient(to right, var(--accent), transparent 60%);
  margin: 0px;
}

form#testform label {
  display: block;
  font-weight: 600;
  color: var(--text);
  margin: 0px 0 6px;
  padding: 10px 0rem 0px 0rem;
}

/* Inline labels for radio/checkbox groups */
form#testform label[for*=",option"],
form#testform label[id*=",label,"] {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0px 16px 0px 0;
  font-size: 13px;
  font-weight: 400;
  padding-top: 0;
}

/* Inputs and textareas 
form#testform input[type="text"],
form#testform input[type="date"],
form#testform textarea {
  font-size: 14px;
    line-height: 20px;
    padding: 5px 10px;
    width: 100%;
    border: unset;
    border-radius: 4px;
    outline-color: rgb(84 105 212 / 0.5);
    background-color: rgb(255, 255, 255);
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
}*/

form#testform textarea {
  height: 60px;
  resize: vertical;
  width: 100%;
  margin: 0;
}

/* Focus states 
form#testform input[type="text"]:focus,
form#testform input[type="date"]:focus,
form#testform textarea:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}*/

/* ✅ Radio button labels */
form#testform label[id*=",label,Yes"] input[type="radio"],
form#testform label[id*=",label,No"] input[type="radio"] {
  accent-color: var(--primary);
  margin: 0px;
}

form#testform label[id*=",label,Yes"] input[type="radio"]+span,
form#testform label[id*=",label,No"] input[type="radio"]+span {
  /* optional text styling for radio labels */
  font-weight: 600;
  color: var(--text);
}

/* ✅ Checkbox labels */
form#testform label[id*=",label,Yes"] input[type="checkbox"],
form#testform label[id*=",label,No"] input[type="checkbox"] {
  accent-color: var(--danger);
  /* different color for checkboxes */
}

form#testform label[id*=",label,Yes"] input[type="checkbox"]+span,
form#testform label[id*=",label,No"] input[type="checkbox"]+span {
  /* optional text styling for checkbox labels */
  font-weight: 500;
  color: var(--muted);
}

/* ✅ Shared pill-style background (applies to both, but you can split if needed) */
form#testform label[id*=",label,Yes"],
form#testform label[id*=",label,No"] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f9fafb;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 10px;
  cursor: pointer;
}


/* Tables 
form#testform table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0 18px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
    font-family: Arial, sans-serif;
}

form#testform thead th {
  color: #04497E;
    background: #FEF8EA;
    padding: 12px 16px;
}

form#testform thead th,
form#testform tbody td {
  border: 1px solid #ddd;
    text-align: left;
    vertical-align: middle;
    font-family: Arial;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.5px;
}

form#testform tbody td {
  padding: 10px 12px;
  border-top: 1px solid #e5e7eb;
  vertical-align: middle;
}*/

form#testform table input[type="text"],
form#testform table input[type="date"] {
  width: 100%;
}

/* Buttons in table "Actions" column */
form#testform table button[type="button"] {
  appearance: none;
  background: #00adef;
  color: #ffffff;
  font-weight: 400;
  padding: 3px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 140ms ease, transform 80ms ease, box-shadow 140ms ease;
  font-size: 13px;
  border: none;
  outline: none;
}

form#testform table button[type="button"]:hover {
  background: #0a62c7;
}

form#testform table button[type="button"]:active {
  transform: translateY(1px);
}

/* Lists (ul) for descriptive bullets */
form#testform ul {
  margin: 8px 0 12px 18px;
  color: var(--muted);
}

form#testform ul li {
  margin: 6px 0;
  font-size: 13px;
}

.displayBlock {
  display: block !important;
}

/* Submit button */
form#testform button[type="submit"].form-container {
  padding: 8px 15px;
  font-size: 14px;
  border: 1px solid #4279cd;
  background: var(--color-primary-blue);
  color: #ffffff;
  font-weight: 400;
  border-radius: 8px;
  cursor: pointer;
  transition: background 140ms ease, box-shadow 140ms ease, transform 80ms ease;
}

form#testform button[type="submit"].form-container:hover {
  background: var(--color-blue);
  box-shadow: 0 6px 18px rgba(0, 83, 179, 0.25);
}

form#testform button[type="submit"].form-container:active {
  transform: translateY(1px);
}

/* Spacing rhythm between grouped fields */
form#testform input[type="text"]+h4.sub_heading,
form#testform textarea+h4.sub_heading,
form#testform table+h4.sub_heading,
form#testform ul+h4.sub_heading {
  margin-top: 32px;
}

form#testform input[type="text"] {
  box-shadow: none;
  width: 100%;
  margin: 0;
}

/* Helper: hide elements that are inline-hidden in markup but keep layout clean */
form#testform textarea[style*="display: none"],
form#testform label[style*="display: none"] {
  display: none !important;
}

/* Optional: smooth grouping around radio blocks with "Yes/No" pairs */
form#testform label[id*=",label,Yes"],
form#testform label[id*=",label,No"] {
  background: none;
  /* border: 1px solid var(--border); */
  border-radius: 999px;
  padding: 5px 0px;
}

/* Optional: compact spacing where multiple inline labels appear */
form#testform label[for*=",option"]+label[for*=",option"] {
  margin-left: 0;
}

.modal-box-width {
  max-width: 900px;
}

.popup-document-guideline-width {
  width: 1000px;
  max-width: 80%;
  /* height: 500px; */
  max-height: 90%;
  overflow-y: auto;
}

.popup-document-guideline-width iframe {
  width: 100%;
  height: 460px;
  border: none;
  display: block;
}

.modal-body {
  padding: 0;
}

.blueLightBgColor {
  background: var(--color-light-skyblue) !important;
}

.blueDarkBgColor {
  background: var(--color-mid-skyblue) !important;
}

.greenLightBgColor {
  background: var(--color-light-green) !important;
}

.greenDarkBgColor {
  background: var(--color-mid-green) !important;
}

.brownLightBgColor {
  background: var(--color-light-brown) !important;
}

.brownDarkBgColor {
  background: var(--color-mid-brown) !important;
}



.popUp-BgColor-section {
  display: flex;
  gap: 20px;
  margin-top: 15px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.20);
  box-shadow: 0 4px 51px 4px rgba(0, 0, 0, 0.05);
  padding: 1rem;
}

.popup-details-icon {
  display: flex;
  align-items: center;
  font-weight: 600;
  flex-direction: column;
  padding: 16px;
  gap: 15px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.20);
  background: rgba(255, 255, 255, 0.50);
  width: 316px;
}

.popup-details-icon .popup-number {
  color: var(--color-white);
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;

}

.popup-details-icon .popup-heading-text {
  color: var(--color-black);
  text-align: center;
  font-size: 1rem;
  font-style: normal;
  font-weight: 700;
  line-height: 120%;
  /* 28.8px */

}

.popup-details-icon .popup-icon-style svg {
  width: 48px;
}

.popup-details-icon .popup-summary {
  color: var(--color-black);
  text-align: center;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 300;
  line-height: 120%;
  /* 24px */
}

.popup-details-text {
  color: var(--color-black-font);
  font-size: 1rem;
  font-style: normal;
  font-weight: 300;
  line-height: 160%;
  /* 32px */
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Hide default carousel controls */
.carousel-control-prev,
.carousel-control-next {
  display: none;
}

/* Navigation buttons container */
.nav-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.crmEntityFormView,
.entitylist,
.modal-content,
.popover-content {
  background-color: var(--color-white) !important;
  color: var(--color-black-font) !important;
  border-radius: 10px;
  box-shadow: 0 4px 54px 0 rgba(0, 0, 0, 0.25);
  padding: 1rem;
  border: none !important;
}

.popup-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.popup-buttons .popup-checkbox-section input[type="checkbox"] {
  position: relative;
  top: 5px;
}

.popup-buttons .popup-action-button {
  display: inline-flex;
}

.popup-buttons .popup-action-button button {
  display: flex;
  padding: 10px 16px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 6px;
  background: var(--color-dark-grey);
  color: var(--color-white);
  font-size: 0.875rem;
  margin-left: 20px;
  border: 1px solid var(--color-dark-grey);

}

.popup-buttons .popup-action-button button:hover {
  color: var(--color-dark-grey);
  background: var(--color-white);
}

.question-section {
  margin-bottom: 1rem;
  /* background: var(--color-white);
  box-shadow: 0px 3px 6px rgba(0, 0, 0, .15);
  animation: slideUp 0.7s ease forwards;
  border-radius: 8px;
  padding-bottom: 1rem; */
}

.question-section h4 {
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  background: var(--color-link-text);
  border-bottom: 1px solid var(--border-color-light);
  padding: 0.5rem 1rem 0.5rem 1rem;
  margin: 0;
  color: var(--color-white);
  border-radius: 8px 8px 0px 0px;
}

.question-section table {
  width: 100%;
  margin: 5px 0;
}

.popUpCloseBtn {
  background-color: var(--color-red);
  border: 1px solid var(--color-red);
  color: var(--color-white);
  height: 12px;
  text-align: center;
  font-size: 1rem;
  font-weight: 400;
  width: 12px;
}

.popUpCloseBtn:hover {
  color: var(--color-red);
  background-color: var(--color-white);
}

.questionnaire-accordion-body{
  margin-left: 5px;
}

/* clickable header 
.accordion-trigger {
  padding: 1rem !important;
  cursor: pointer;
  position: relative;
  background: var(--color-white);
  margin: 0px !important;
  padding-right: 40px !important;
  border-radius: 8px;
}

.accordion-trigger::before {
  content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 10 12 16 18 10'/></svg>");
  position: absolute;
  right: 12px;
  top: 55%;
  transform: translateY(-50%);
  font-size: 20px;
  pointer-events: none;
}

.question-section.open .accordion-trigger::before {
  content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 14 12 8 18 14'/></svg>");
}

.questionnaire-accordion-body {
  padding: 10px 12px;
  display: none;
  margin-top: -10px;
}

.question-section.open .questionnaire-accordion-body {
  display: block;
}*/


.status-document-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-white) !important;
  border-radius: 48px;
  font-size: 12px;
  min-width: 80px;
  width: 80px;
  border: none;
}
.status-accepted {
  background: var(--color-success);
}
.status-rejected {
  background: var(--color-error);
}
.status-inreview {
  background: var(--status-in-review-color);
}

.status-notStarted{
  background-color: var(--color-light-grey);
  color: var(--secondary-black-color) !important;
}

.status-reviewed{
  background: var(--color-blue);
}

.notes-popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  justify-content: center;
  align-items: center;
}

.notes-popup-content {
  width: 100%;
  background: var(--color-white);
  max-width: 750px;
  position: relative;
  background-color: var(--color-white) !important;
  color: var(--color-black-font) !important;
  border-radius: 10px;
  box-shadow: 0 4px 54px 0 rgba(0, 0, 0, 0.25);
  padding: 2rem;
}

.notes-popup-close-btn {
    cursor: pointer;
    font-size: 36px;
    position: absolute;
    top: 0px;
    right: 15px;
}

.upload-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px;
    border: 2px dashed #cbd3dd;
    border-radius: 12px;
    background: #fdfdfd;
    transition: border-color 0.25s ease, background 0.25s ease;
    cursor: pointer;
    gap: 0px;
}

.upload-section:hover {
    border-color: #4a6cf7;
    background: #f5f7ff;
}

.upload-section input[type="file"] {
    display: none;
}

.upload-section .select-btn {
    background: none;
    border: none;
    color: var(--heading-color-section);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
    transition: color 0.2s ease;
}

.upload-section .select-btn:hover {
    color: var(--color-primary-blue);
    background-color: transparent;
}

.upload-section .file-name {
    font-size: 0.875rem;
    margin-top: 5px;
    color: var(--color-orange);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: underline;
}

.upload-section .upload-btn-questionaire {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.upload-section .upload-btn-questionaire:hover {
    background: var(--color-link-text);
}

.upload-section.dragover {
    border-color: var(--color-link-text);
    background: #eef2ff;
}

.home--card-view{
  margin-top: 1rem;
  position: relative;
  height: 284px;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #F5F5F5;
  background: var(--color-white);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.20);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.home--card-view:hover{
  border-color: #2196F3!important;
  box-shadow: 0 6px 20px rgba(33, 150, 243, 0.25);
}

.home--card-view .card-title {
  color: var(--color-primary-blue);
  font-size: 18px;
  font-style: normal;
  line-height: 0;
  font-weight: 400;
  letter-spacing: 0.4px;
}

.home--card-view .span-text {
  font-size: 12px;
    height: auto;
    padding: 10px 0;
    margin: 6px 0;
    display: block;
    color: var(--color-mid-dark-grey);
}

.home--card-view .home--card-btn{
  position: absolute;
  bottom: 0;
}

.home--card-view .home--card-btn button{
  background: var(--color-link-text);
  color: var(--color-white);
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.5px;
  border: none;
}

.home--card-view .home--card-btn button:hover {
  background: var(--color-primary-blue);
}

.home--card-view .home--card-text{
  height: 125px;
}

.home--card-view .home--card-text .card-text{
  color: var(--color-primary-blue) !important;
  text-align: center;
  font-size: 12px !important;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.4px;
  line-height: 1rem;
  margin: 5px 0;
}

.disabledCard {
  opacity: 0.35;
  pointer-events: none;
  user-select: none;
}

.disabledCard button {
  pointer-events: auto;
  user-select: auto;
  color: initial;
}

#navbar > nav > ul >li:nth-child(6){
  display:unset !important;
}

.formActionBtns{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  max-width: 340px;
  margin: 0 auto;
}

.ques--add-record-btn{
  background-color: var(--color-mid-green);
  padding: 5px;
  text-align: center;
}

.ques--remove-record-btn{
  background-color: var(--color-mid-brown);
  padding: 5px;
  text-align: center;
}

.error-field {
    border: 1px solid var(--color-red) !important;
}

.error-section {
    border-left: 5px solid var(--color-red);
    background: var(--color-light-brown) !important;
}

.question-section table tbody tr td button{
  margin-right: 5px;
  padding: 0;
  position: relative;
  top: -10px;
}

.question-section table tbody tr td button:hover{
  background: transparent;
}