:root {
  --pantas-dark-blue: #1f5388;
  --pantas-dark-blue-rgb: 31,83,136;
  --pantas-blue: #007ecb;
  --pantas-light-blue: #58b2f8;
  --pantas-pale-blue: #e3f2fd;
  --pantas-paler-blue: #edf8fe;
  --pantas-light-grey: #f5f5f5;
  --pantas-cyan: #32b9de;
  --pantas-light-cyan: #00ccfa;
  --pantas-lighter-grey: #d4d8dd;
  --muted: var(--bs-gray-600);

  --navbar-height: 3.4rem;
  --navbar-logo-width: 100px;
  --navbar-logo-width-xl: 130px;

  /* from Bootstrap */
  --table-hover-bg: rgba(0, 0, 0, 0.075);
  --bs-orange-rgb: 253,126,20;
  --bs-shadow-sm: 0 .125rem .25rem rgba(0,0,0,.15);
  --bs-shadow: 0 .5rem 1rem rgba(0,0,0,.15);

  /* From Bootstrap 4 */
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;

  /* Avoid Chrome bug: with smooth-scrolling, form validation message does not appear if an error triggers scrolling to focus on invalid field */
  scroll-behavior: auto;
}

@font-face {
  font-family: Avenir;
  font-weight: 300;
  src: /* Avenir Light */
    url("fonts/mti-webfonts/1475496/0078f486-8e52-42c0-ad81-3c8d3d43f48e.cbdc2473e3a0.woff2") format("woff2"),
    url("fonts/mti-webfonts/1475496/908c4810-64db-4b46-bb8e-823eb41f68c0.f9d7be1e5d49.woff") format("woff");
}
@font-face {
  font-family: Avenir;
  font-weight: 400; /* normal */
  src: /* Avenir Medium */
    url("fonts/mti-webfonts/1475532/17b90ef5-b63f-457b-a981-503bb7afe3c0.24ee2bf455a2.woff2") format("woff2"),
    url("fonts/mti-webfonts/1475532/c9aeeabd-dd65-491d-b4be-3e0db9ae47a0.8dd7d27bdda2.woff") format("woff");
}
@font-face {
  font-family: Avenir;
  font-weight: 700; /* bold */
  src: /* Avenir Heavy */
    url("fonts/mti-webfonts/5687390/0d51f252-d47b-421f-8ffe-eb417dce1b53.7b5433a07924.woff2") format("woff2"),
    url("fonts/mti-webfonts/5687390/b34d406c-b12e-4b82-892e-1bfab6517cce.c22f8481f6b9.woff") format("woff");
}
@font-face {
  font-family: Avenir;
  font-weight: 900;
  src: /* Avenir Black */
    url("fonts/mti-webfonts/1475556/c78eb7af-a1c8-4892-974b-52379646fef4.4b1e6a63a33b.woff2") format("woff2"),
    url("fonts/mti-webfonts/1475556/75b36c58-2a02-4057-a537-09af0832ae46.ba786d65ffb8.woff") format("woff");
}


/*** ELEMENTS/GLOBALS ***/

body {
  font-family: Avenir, Verdana, Arial, sans-serif;
}

a:not(:hover) {
  text-decoration: none;
}

.table:not(.table-default) > thead th {
  background-color: var(--pantas-pale-blue);
}

dt {
  font-weight: normal;
  color: var(--muted);
}
dd {
  margin-bottom: 1rem;
}

h1, h2, h3 {
  font-weight: bold;
  margin-bottom: 1.25rem;
}
h1 { font-size: 1.75rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }

/* H1 edit button */
h1 > sup {
  font-weight: normal;
  font-size: 1rem;
}


/*** BOOTSTRAP CLASS ADJUSTMENTS ***/

@media (min-width: 1400px) { /* default 1200px (xl->xxl) */
  .container {
    max-width: 1140px;
  }
}
@media (min-width: 1600px) { /* default 1400px (xxl->"3xl") */
  .container {
    max-width: 1320px;
  }
}


/*** PAGE LAYOUT ***/

body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.sidebar-main-layout {
  flex-grow: 1;
  display: flex;
}
.header-main-layout {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  position: relative;
}
main {
  flex: 1 0 95vh;
}

/* body classes */
.has-side-navbar {
  --sidebar-width: 14rem;
}
.pantas-lite {
  --navbar-lite-width: 45px;
}


/*** PAGE HEADING IN TOP NAVBAR ***/

.has-side-navbar .header {
  margin-top: 1rem;
}
@media (min-width: 768px) { /* breakpoint md */
  .has-side-navbar .header {
    position: absolute;
    top: calc(-1 * var(--navbar-height));
    left: calc(var(--navbar-logo-width) + var(--navbar-lite-width, 0px) + 1.5rem);
    translate: 0 50%;
    margin-top: 0;
  }
  .has-side-navbar .header * {
    margin: 0;
  }
  .has-side-navbar .header h1 {
    font-size: 1.5rem;
  }
}
@media (min-width: 1200px) { /* breakpoint xl */
  .header > .container {
    margin: 0 auto;
  }
  .has-side-navbar .header {
    left: auto;
    width: 100%;
  }
}


/*** TOP NAVBAR ***/

.navbar {
  height: var(--navbar-height);
  padding-left: 1rem;
  padding-right: 1rem;
  flex-wrap: nowrap;
}
.navbar-brand {
  margin-right: 1.5rem;
  display: flex;
  align-items: end;
}
.navbar-brand > img {
  width: var(--navbar-logo-width);
}
.navbar-brand-lite {
  margin-left: .5rem;
  color: #888;
  letter-spacing: .25rem;
  font-size: .7rem;
  translate: 0 .1rem;
}
.navbar .nav-link,
.navbar .dropdown-item {
  background-color: transparent;
  color: var(--bs-body-color);
  font-weight: 100;
}
.navbar .nav-link.active,
.navbar .dropdown-item.active {
  color: var(--pantas-blue);
  font-weight: bold;
}
.navbar .dropdown-item:hover {
  background-color: var(--pantas-blue);
  color: #ffffff;
}
.nav-profile-dropdown {
  z-index: 1; /* Ensure elements in here are clickable when page heading is in top navbar */
}
.nav-profile-dropdown #navbarUserDropdown {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  background-color: var(--pantas-blue);
  color: white;
  border: none;
  border-radius: 50%;
  font-size: .75rem;
  font-weight: bold;
  letter-spacing: 1px;
}
.nav-profile-dropdown #navbarUserDropdown:hover {
  background-color: var(--pantas-dark-blue);
}
.nav-profile-dropdown .dropdown-menu {
  box-shadow: var(--bs-shadow-sm);
}

@media (max-width: 1199px) { /* below breakpoint xl: navbar is in mobile mode */
  .navbar-collapse {
    position: absolute;
    z-index: 1000;
    top: 100%;
    left: 0;
    width: 100%;
    padding: 0 1rem;
    background-color: white;
    box-shadow: 0 1rem 1rem rgba(0,0,0,.15);
  }
  .navbar .nav-link {
    padding-top: .75rem;
    padding-bottom: .75rem;
  }
  .navbar-nav .dropdown-menu {
    margin-top: 0;
    padding-top: 0;
    border: none;
  }
  .nav-profile-dropdown #navbarUserDropdown {
    display: none;
  }
  .nav-profile-dropdown .dropdown-menu {
    position: static;
    display: block;
    width: 100%;
    border: none;
    box-shadow: none;
  }
  .nav-profile-dropdown .dropdown-item {
    padding: .75rem 0;
  }
}

@media (min-width: 1200px) { /* breakpoint xl and above */
  :root {
    --navbar-logo-width: var(--navbar-logo-width-xl);
  }
  .navbar {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .navbar-brand {
    margin-right: 1rem;
  }
  .navbar-brand-lite {
    font-size: .85rem;
    translate: 0 .05rem;
  }
  .navbar .nav-item:not(.nav-profile-dropdown) {
    margin-right: 1rem;
  }
  .navbar hr {
    display: none;
  }
  .nav-profile-dropdown .dropdown-item:hover {
    background-color: var(--pantas-blue);
  }
}

.google_translate .dropdown-item.selected-language {
  background-color: var(--pantas-blue);
  color: var(--pantas-dark-blue);
  font-weight: 700;
}


/*** SIDE NAVBAR ***/

.side-navbar {
  --bgcolor: var(--pantas-dark-blue);
  --fgcolor: white;
  background-color: var(--bgcolor);
  flex: 0 0 var(--sidebar-width);
  display: none;
}
.side-navbar .nav {
  padding: 1rem;
}
@media (min-width: 1200px) { /* breakpoint xl */
  .side-navbar {
    display: block;
  }
  .has-side-navbar .footer {
    padding-left: var(--sidebar-width);
  }
}
.side-navbar .nav-item:not(li:last-child) {
  margin-bottom: .75rem;
}
.side-navbar .nav-link {
  position: relative;
  padding: .75rem;
  color: var(--fgcolor);
  font-weight: bold;
  font-size: 95%;
}
.side-navbar .nav-link:active,
.side-navbar .nav-link.active {
  background-color: var(--fgcolor);
  color: var(--bgcolor);
}
.side-navbar .nav-link.active::before {
  content: "";
  position: absolute;
  top: 0;
  left: -1.2rem;
  height: 100%;
  border: 4px solid var(--fgcolor);
  border-radius: 4px;
}
.side-navbar .nav-link:not(.active):hover,
.side-navbar .nav-link:not(.active)[aria-expanded="true"] {
  outline: 1px solid var(--fgcolor);
}

.side-navbar .nav-link.dropdown-toggle::after {
  position: absolute;
  right: 0;
  top: 50%;
  translate: -1rem -.15rem;
}
.side-navbar .nav-link.dropdown-toggle.show::after {
  transform: rotate(.5turn);
}
.side-navbar .dropdown-menu {
  position: static;
  background-color: var(--bgcolor);
  border: none;
}
.side-navbar .nav-item .dropdown-item {
  padding-left: 2rem;
  padding-right: 0;
  color: var(--fgcolor);
  font-weight: 100;
  font-size: 95%;
  word-wrap: normal;
}
.side-navbar .nav-item .dropdown-item:hover,
.side-navbar .nav-item .dropdown-item:focus {
  background-color: transparent;
  color: var(--fgcolor);
  text-decoration: underline;
}
.side-navbar .nav-item .dropdown-item.active {
  background-color: transparent;
  color: var(--fgcolor);
  text-decoration: underline;
  font-weight: bold;
}

.side-navbar-collapsible {
  position: fixed;
  translate: 0 -1px;
  z-index: 100;
  width: var(--sidebar-width);
  border-radius: 0 .8rem .8rem 0;
  box-shadow: var(--bs-shadow-sm);
}
.side-navbar-collapsible .nav {
  padding: .5rem;
}
.side-navbar-collapsible:not(:hover):not(:focus-within) {
  width: auto;
}
.side-navbar-collapsible:not(:hover):not(:focus-within) .nav-link > span,
.side-navbar-collapsible:not(:hover):not(:focus-within) .dropdown-toggle::after {
  display: none;
}


/*** PAGE FOOTER ***/

.footer {
  font-size: .9rem;
  font-weight: 100;
  background-color: var(--pantas-dark-blue);
  color: var(--bs-gray-400);
  padding: 2rem 0;
}
.footer h6 {
  font-weight: bold;
  color: white;
}
.footer li {
  margin-bottom: .25rem;
  opacity: .8;
}
.footer a {
  text-decoration: none;
  color: white;
}
.footer a:hover,
.footer a:hover .fa-stack {
  color: var(--bs-gray-400);
}


/*** LANDING PAGE BUTTONS ***/

:root {
  --btn-landing-color: var(--pantas-blue);
  --btn-landing-color-alt: var(--pantas-light-blue);
}
.btn-landing {
  padding: .7rem 1rem;
  font-size: .8rem;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-width: 2px;
}
.btn-landing.btn-primary {
  background-color: var(--btn-landing-color);
  border-color: var(--btn-landing-color);
}
.btn-landing.btn-primary:hover,
.btn-landing.btn-primary.active {
  background-color: var(--btn-landing-color-alt);
  border-color: var(--btn-landing-color-alt);
}
.btn-landing.btn-outline-primary {
  color: var(--btn-landing-color);
  border-color: var(--btn-landing-color);
  background-color: transparent;
}
.btn-landing.btn-outline-primary:hover,
.btn-landing.btn-outline-primary.active {
  color: white;
  background-color: var(--btn-landing-color);
}
.btn-group > .btn-landing:not(:first-child) {
  margin-left: -2px;
}


/*** LOGO LIST ***/
/* Make images within .logo-list fill their grid cell regardless of image dimensions */

.logo-list .img-fluid {
  height: 100%;
  object-fit: contain;
}


/*** FORM ELEMENTS ***/

label {
  color: var(--muted);
}

.form-text,
label > small /* "(optional)" */ {
  opacity: .75;
}

.form-switch label {
  color: black;
}

.errorlist {
  list-style: none;
  padding-left: 0;
  color: var(--bs-danger);
}

.form-control.border-0::file-selector-button {
  border-inline-end-width: 0;
}


/*** BREADCRUMBS ***/
nav {
  --bs-breadcrumb-divider: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><path d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='%236c757d'/></svg>");
}


/*** NAV PILLS ***/
/* .outline-nav-pills can be used to differentiate .nav-pills from primary buttons, which look very similar */

.nav-pills.outline-nav-pills .nav-link {
  --bs-nav-link-padding-y: .5rem;
  color: var(--bs-body-color);
  border: 2px solid var(--bs-gray-300);
  margin-bottom: .25rem;
}
.nav-pills.outline-nav-pills .nav-link.active {
  background-color: rgba(var(--bs-primary-rgb), .1);
  color: var(--bs-body-color);
  border-color: var(--bs-primary);
}


/*-- TOOLTIPS --*/
/* Usage: <span data-bs-toggle="tooltip" data-bs-custom-class="tooltip-w2x tooltip-textstart" ...> */

.tooltip-w2x {
  --bs-tooltip-max-width: 400px; /* 2x default width */
}
.tooltip-textstart .tooltip-inner {
  text-align: left;
}


/*** BOX SIDE HIGHLIGHT ***/
/* Add a thick left pseudo-border to an element with a 1px border */
.left-bar-pantasblue {
  position: relative;
}
.left-bar-pantasblue::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 8px;
  height: calc(100% + 2px);
  background-color: var(--pantas-blue);
}


/*** GLOW ***/

.glow-paleblue {
  background-image: radial-gradient(var(--pantas-pale-blue) 30%, transparent 70%);
  height: 20rem;
  width: 20rem;
}


/*** GOOGLE TRANSLATE POPUP ***/
/* Hack to address GRE-1121 */

#goog-gt-tt { /* Popup */
  display: none !important;
}
font[style] > font[style] { /* Targeted text */
  background-color: transparent !important;
  box-shadow: none !important;
}


/*** UTILITIES ***/
/* Keep this section at the bottom of this file */

.maxw-sm { max-width: var(--breakpoint-sm); }
.maxw-md { max-width: var(--breakpoint-md); }
.maxw-lg { max-width: var(--breakpoint-lg); }
.minw-100 { min-width: 100px; }
.w-1 { width: 1%; }

@media (min-width: 992px) { /* breakpoint lg */
  .position-lg-absolute { position: absolute; }
}

@media (min-width: 1600px) { /* breakpoint 3xl */
  .d-3xl-none { display: none !important; }
  .g-3xl-5, .gx-3xl-5 { --bs-gutter-x: 3rem; }
  .g-3xl-5, .gy-3xl-5 { --bs-gutter-y: 3rem; }
  .mt-3xl-5 { margin-top: 3rem !important; }
}

.bg-pantaspalerblue { background-color: var(--pantas-paler-blue); }
.bg-pantaspaleblue { background-color: var(--pantas-pale-blue); }
.bg-pantasdarkblue { background-color: var(--pantas-dark-blue); }
.text-pantasdarkblue { color: var(--pantas-dark-blue); }
.text-pantasblue { color: var(--pantas-blue); }

.fw-boldest { font-weight: 900; }

.display-7 {
  font-size: calc(1.325rem + .9vw); /* from fs-2 class */
  line-height: 1.2;
}
@media (min-width: 1200px) { /* breakpoint xl */
  /* match aipay-mvp font-size of 36px when browser maximized */
  .display-7 {
    font-size: 2.25rem;
  }
}

.mb-7 { margin-bottom: 7rem; }
.mt-n6 { margin-top: -5rem; }
.p-2rem { padding: 2rem; } /* Between .p-4 and .p-5 */

.fs-lg { font-size: 1.125rem; } /* For landing pages */
.small-sm { font-size: 0.7em; }

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

.capitalize-translation:first-letter {
  text-transform: uppercase;
}

.hover-enlarge { transition: transform .2s }
.hover-enlarge:hover { transform: scale(1.1); }

/* Remove if Bootstrap 5.3+ loaded */
.object-fit-cover { object-fit: cover; }
.object-fit-contain { object-fit: contain; }

/* Multifile field to have normal input colors */
.border-form { border-color: #ced4da; }

.text-orange {
  color: var(--bs-orange);
}

.w-5 {
  width: 5%;
}

.border-blue {
  border-radius: 5px;
  border: 1px solid #F5F5F6;
  background: #EDF8FE;
  color: #000 !important;
  font-family: Avenir;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.border-yellow {
  border: 0.5px solid #E9ECEF;
  background-color : #FCF9E9
}

.na-switch:checked {
  background-color: #388845;
  border-color: #388845;
}

select:disabled {
  background-image: none;
}

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

/* Firefox */
.hide-number-counter input[type="number"] {
    -moz-appearance: textfield;
}

/* Ensures the cursor is default on readonly field */
input[readonly] {
    cursor: default;
}

.badge-lightblue {
  background-color: var(--pantas-pale-blue);
  color: var(--pantas-blue);
  border-radius: 5px;
  line-height: normal;
}

.badge-pantasblue {
  background-color: var(--pantas-blue);
  color: var(--bs-white);
  border-radius: 5px;
  line-height: normal;
}

.badge-yellow {
  background-color: #FCF9E9;
  color: #E3A843;
  border-radius: 5px;
  line-height: normal;
}

.badge-grey {
  background-color: #F8F9FA;
  color: #6C757D;
  border-radius: 5px;
  line-height: normal;
}

.badge-green {
    background-color: #D1E7DD;
    border-radius: 5px;
    color: #198754 !important;
}

.badge-red {
  background-color: #FBF2EE;
  color: #DC3545;
  border-radius: 5px;
  line-height: normal;
}

.card-box:hover {
  cursor: pointer;
  text-decoration: none;
  border-color: #0D6EFD !important;
}

.switch-page-dropdown .dropdown-menu {
  background-color: white !important;
  color: black !important;
  border: 1px solid rgba(0, 0, 0, 0.1)!important;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15)!important;
}

.switch-page-dropdown .dropdown-item {
  background-color: white !important;
  color: black !important;
}

.switch-page-dropdown .dropdown-item:hover {
  background-color: #f8f9fa !important;
  color: black !important;
}

.switch-page-dropdown .dropdown-toggle {
  width: 170px;
  height: 40px;
}

.toast-body-cross {
  font-family: Avenir;
  font-size: 14px;
  font-weight: 400;
  color: #212529;
}

.badge-warning {
  background-color: #FFF5C1;
  font-family: Avenir!important;
  font-size: 14px!important;
  font-weight: 800!important;
  color: #E1981B !important;
}

.badge-success {
  background-color: #E6F7EF;
  font-family: Avenir!important;
  font-size: 14px!important;
  font-weight: 800!important;
  color: #198754 !important;
}


/* Force placeholder text to be pure black */
.items-placeholder::placeholder {
    color: #000000 !important; /* Pure black */
    opacity: 1; /* Ensures placeholder is fully opaque */
}

.bg-pantasgrey-100 {
  background-color: #F8F9FA;
}

.bg-pantasgrey-300 {
  background-color: #DEE2E6;
}

.hover-shadow:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important; /* Smooth hover shadow */
  transition: box-shadow;
}

/* to mask all input field not to capture at clarity */
input {
    data-clarity-mask: true;
}

.border-blue-line {
  border-color: var(--pantas-light-blue);
}

.border-yellow-line {
  border: 0.5px solid #E3A843;
}

.border-green-line {
  border: 0.5px solid #198754;
}

.border-red-line {
  border: 0.5px solid #DC3545;
}

.border-circle-blue-line {
  border: 0.5px solid var(--pantas-light-blue);
}

.text-pantas-blue {
  color: var(--pantas-light-blue);
}

.border-dashed {
  border-style: dashed !important;
}