:root {
  --portalThemeColor20: #FF0000;

  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 8px;
}

/* =========================================================
   HEADER BASE
========================================================= */

.navbar,
.navbar-default,
.navbar-inverse,
.navbar-static-top,
header {
  border: none !important;
  margin-bottom: 0 !important;
}

.navbar-brand,
.navbar-static-top .navbar-brand,
.navbar-fixed-top .navbar-brand,
.navbar-brand h1,
.navbar-brand .siteTitle,
.navbar-brand a,
.navbar-brand .xrm-attribute-value,
.navbar-brand .xrm-attribute-value a {
  font-weight: 700 !important;
  text-decoration: none !important;
}

/* remove vertical divider */
.divider-vertical {
  display: none !important;
}

/* burger */
button.navbar-toggle,
.navbar-toggle {
  border-radius: 10px !important;
}

.navbar-toggle {
  position: relative !important;
}

.navbar-toggle .icon-bar {
  display: block !important;

  width: 22px !important;
  height: 2px !important;

  margin: 4px 0 !important;

  transition:
    transform 0.2s ease,
    opacity 0.2s ease !important;

  transform-origin: center !important;
}

.navbar-toggle:not(.collapsed) .icon-bar:nth-of-type(2) {
  transform: translateY(6px) rotate(45deg) !important;
}

.navbar-toggle:not(.collapsed) .icon-bar:nth-of-type(3) {
  opacity: 0 !important;
}

.navbar-toggle:not(.collapsed) .icon-bar:nth-of-type(4) {
  transform: translateY(-6px) rotate(-45deg) !important;
}

/* =========================================================
   NAVIGATION / UNDERLINE / DOTS / LOGO FOCUS
========================================================= */

.navbar-nav > li {
  position: relative;
}

.navbar-nav > li > a {
    letter-spacing: 1px;
    font-size: 13px !important;
}

.navbar-nav > li > a,
.navbar-nav > li > .dropdown-toggle {
  background: transparent !important;

  border: 1px solid transparent !important;
  border-radius: 999px !important;

  font-size: 15px !important;
  font-weight: 700 !important;

  box-sizing: border-box !important;

  transition:
    background-color 0.2s ease,
    border-color 0.2s ease !important;
}

/* remove default hover */
.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus,
.navbar-nav > li > .dropdown-toggle:hover,
.navbar-nav > li > .dropdown-toggle:focus,
.navbar-nav > li.open > a,
.navbar-nav > li.open > a:hover,
.navbar-nav > li.open > a:focus {
  background: transparent !important;

  border-color: transparent !important;

  box-shadow: none !important;
  outline: none !important;
}

.navbar.navbar-inverse .navbar-nav > li > a:focus {
  border-color: transparent !important;

  box-shadow: none !important;
  outline: none !important;
}

/* underline */
.navbar-nav > li::after {
  content: "";

  position: absolute;

  left: 10px;
  right: 10px;
  bottom: 4px;

  height: 2px;

  background: var(--portalThemeColor7);

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.2s ease;
}

.navbar-nav > li:hover::after,
.navbar-nav > li.active::after,
.navbar-nav > li:has(> a[aria-current="page"])::after {
  opacity: 1;
}

/* no underline on dropdown */
.navbar-nav > li.dropdown:hover::after,
.navbar-nav > li.dropdown.active::after,
.navbar-nav > li.dropdown:has(> a[aria-current="page"])::after {
  opacity: 0 !important;
}

/* dots */
.menu-dot-status {
  flex: 0 0 10px;

  width: 10px;
  height: 10px;

  border-radius: 50%;

  display: inline-block;

  box-sizing: border-box;

  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.menu-dot-status.done {
  background: var(--portalThemeColor1) !important;
  border: 2px solid var(--portalThemeColor1) !important;
}

.menu-dot-status.pending {
  background: var(--portalThemeColor20) !important;
  border: 2px solid var(--portalThemeColor20) !important;
}

/* logo focus */
.navbar-brand a,
.navbar-brand a:hover,
.navbar-brand a:focus,
.navbar-brand a:active,
.navbar-brand .xrm-attribute-value,
.navbar-brand .xrm-attribute-value:focus,
.navbar-brand .xrm-attribute-value a:focus {
  background: transparent !important;

  border: none !important;

  box-shadow: none !important;
  outline: none !important;

  text-decoration: none !important;
}

.navbar-brand img {
  border: none !important;

  box-shadow: none !important;
  outline: none !important;
}

/* =========================================================
   INPUTS
========================================================= */

.form-control,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="password"],
select,
textarea {
  min-height: 46px;

  border: 1px solid var(--portalThemeColor4);

  border-radius: var(--radius-md);

  padding: 10px 14px;
}

/* readonly datetime inputs */

/* datetime inputs */
.crmEntityFormView .datetimepicker {
  width: 100% !important;
}

.crmEntityFormView .datetimepicker .text-muted {
  display: none !important;
}

/* readonly datetime inputs only */
.crmEntityFormView .datetimepicker > input.form-control.input-text-box.readonly {
  display: block !important;
  width: 100% !important;
  min-height: 46px !important;

  border: 1px solid #d6d6d6 !important;
  border-radius: var(--radius-md) !important;

  background: #f5f5f5 !important;
  color: #555555 !important;

  padding: 10px 14px !important;

  box-shadow: none !important;
  outline: none !important;
  opacity: 1 !important;

  cursor: default !important;
}

.crmEntityFormView .datetimepicker > input.form-control.input-text-box.readonly:focus {
  border-color: #d6d6d6 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* =========================================================
   SUBMIT BUTTONS
========================================================= */

.crmEntityFormView .actions,
.crmEntityFormView .form-actions,
.crmEntityFormView .form-custom-actions,
.entity-form .actions {
  display: flex !important;

  justify-content: flex-end !important;

  padding: 18px 24px 0 24px !important;
}

.crmEntityFormView input[type="submit"],
.crmEntityFormView button[type="submit"],
.crmEntityFormView .actions .btn,
.crmEntityFormView .form-actions .btn,
.crmEntityFormView .form-custom-actions .btn {
  border-radius: var(--radius-md) !important;
}

/* =========================================================
   PCF MULTISELECT
========================================================= */

.msos-container {
  border: 1px solid var(--portalThemeColor4) !important;

  border-radius: var(--radius-md) !important;

  background: var(--portalThemeColor7) !important;

  overflow: visible !important;

  box-shadow: none !important;
}

.msos-container .msos-inner-container,
.msos-container .msos-selected-items-container {
  border: 0 !important;

  border-radius: 0 !important;

  background: transparent !important;

  box-shadow: none !important;
}

.msos-container .msos-inner-container {
  min-height: 46px !important;

  padding: 6px 10px !important;
}

.msos-container .msos-selected-items-container {
  padding: 6px 10px 0 10px !important;
}

.msos-container.msos-active {
  border-color: var(--portalThemeColor4) !important;
}

.msos-selected-items-container > div {
  background: var(--portalThemeColor3) !important;

  border-radius: var(--radius-sm) !important;

  padding: 4px 8px !important;

  margin: 0 6px 6px 0 !important;
}

.msos-container .msos-caret-container {
  height: 100% !important;
  max-height: 100% !important;
}

/* =========================================================
   USER DROPDOWN
========================================================= */

.navbar-nav .dropdown-menu {
  margin-top: 8px !important;

  min-width: 180px;

  padding: 6px 0 !important;

  background: var(--portalThemeColor7) !important;

  border: 1px solid var(--portalThemeColor4) !important;
  border-radius: var(--radius-md) !important;

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12) !important;

  overflow: hidden;
}

.navbar-nav .dropdown-menu > li > a {
  padding: 10px 16px !important;

  background: transparent !important;

  border: 0 !important;

  font-size: 14px;
  line-height: 1.4;

  color: var(--portalThemeColor9) !important;

  text-decoration: none !important;
}

.navbar-nav .dropdown-menu > li > a:hover,
.navbar-nav .dropdown-menu > li > a:focus {
  background: var(--portalThemeColor3) !important;

  color: var(--portalThemeColor9) !important;

  box-shadow: none !important;
  outline: none !important;
}

.navbar-nav .dropdown-menu > .divider {
  margin: 6px 0 !important;

  height: 1px !important;

  background-color: var(--portalThemeColor3) !important;
}

.navbar-nav .dropdown.open > .dropdown-menu {
  display: block;
}

/* =========================================================
   FOOTER
========================================================= */

.footer .footer-bottom {
  padding: 0 !important;
}

.footer .footer-bottom p {
  font-size: 16px !important;

  white-space: nowrap;
}

/* =========================================================
   SIGN IN
========================================================= */

/* tabs */
.nav.nav-tabs.nav-account > li > a {
  border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
}

.nav.nav-tabs.nav-account > li.active > a,
.nav.nav-tabs.nav-account > li.active > a:hover,
.nav.nav-tabs.nav-account > li.active > a:focus {
  border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
}

/* inputs */
#content .form-control,
#content input[type="text"],
#content input[type="email"],
#content input[type="password"] {
  border-radius: var(--radius-md) !important;
}

/* buttons */
#content .btn,
#content .btn-primary,
#content .btn-default,
#content a.btn.btn-default {
  border-radius: var(--radius-md) !important;
}

/* spacing */
#content .form-group .btn {
  margin-right: 8px;
}

#content .form-group .btn:last-child {
  margin-right: 0;
}

/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 1200px) {
  .navbar-static-top.navbar-inverse > .container {
    max-width: 980px !important;
    width: 980px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    display: flex !important;
    align-items: center !important;
  }

  /* left side */
  .navbar-header {
    flex: 0 0 auto !important;
  }

  /* logo */
  .navbar-brand {
    padding-left: 0 !important;
  }

  .navbar-brand img {
    height: 42px !important;
    width: auto !important;

    margin: 0 28px !important;
  }

  /* center / right */
  #navbar.navbar-collapse {
    flex: 1 1 auto !important;

    padding-left: 20px !important;
    padding-right: 0 !important;
  }

  .menu-bar.navbar-right {
    float: none !important;

    width: 100% !important;

    margin-right: 0 !important;
  }

  /* nav list */
  .navbar-nav.weblinks {
    width: 100% !important;

    display: flex !important;
    align-items: center !important;

    gap: 20px !important;

    margin: 0 !important;
  }

  /* nav text */
  .navbar-nav > li > a,
  .navbar-nav > li > .dropdown-toggle {
    font-size: 12px !important;
    font-weight: 500 !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* underline width */
  .navbar-nav > li::after {
    left: 0 !important;
    right: 0 !important;
    bottom: 5px !important;
  }

  /* user right */
  .navbar-nav.weblinks > li.dropdown {
    margin-left: auto !important;
  }

  /* smaller dots */
  .menu-dot-status {
    width: 8px !important;
    height: 8px !important;

    flex-basis: 8px !important;
  }
}

/* =========================================================
   TABLET / MOBILE
========================================================= */


@media (max-width: 1199px) {
  .container > .navbar-header,
  .container > .navbar-collapse,
  .container-fluid > .navbar-header,
  .container-fluid > .navbar-collapse {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .navbar-static-top.navbar-inverse > .container,
  .container,
  .container-fluid {
    width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .navbar-header {
    float: none !important;
    min-height: 64px !important;
  }

.navbar-brand {
  height: 64px !important;
  min-height: 64px !important;

  display: flex !important;
  align-items: center !important;

  padding: 0 !important;
  margin: 0 !important;
  line-height: normal !important;
}

.navbar-brand .xrm-attribute,
.navbar-brand .xrm-attribute-value,
.navbar-brand .xrm-attribute-value a {
  display: flex !important;
  align-items: center !important;

  height: 64px !important;
}

.navbar-brand img {
  height: 36px !important;
  width: auto !important;
  margin: 0 !important;
  display: block !important;
}

  .navbar-toggle {
    display: block !important;
    float: right !important;
    margin-top: 10px !important;
    margin-right: 0 !important;
    margin-bottom: 10px !important;
  }

  #navbar.navbar-collapse {
    clear: both !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #navbar.navbar-collapse.collapse {
    display: none !important;
  }

  #navbar.navbar-collapse.collapse.in {
    display: block !important;
  }

  .navbar-nav.weblinks {
    float: none !important;
    display: block !important;
    width: 100% !important;
    margin: 8px 0 0 !important;
  }

  .navbar-nav.weblinks > li {
    float: none !important;
  }

  .navbar-nav.weblinks > li > a {
    padding: 12px 16px !important;
  }

  .navbar-nav .open .dropdown-menu {
    width: calc(100% - 32px) !important;
    margin: 12px 16px 0 16px !important;
  }

  .crmEntityFormView {
    padding: 16px !important;
  }

  .crmEntityFormView .actions,
  .crmEntityFormView .form-actions,
  .crmEntityFormView .form-custom-actions,
  .entity-form .actions {
    display: block !important;
    padding: 18px 0 0 0 !important;
    margin: 0 !important;
  }

  .crmEntityFormView input[type="submit"],
  .crmEntityFormView button[type="submit"],
  .crmEntityFormView .actions .btn,
  .crmEntityFormView .form-actions .btn,
  .crmEntityFormView .form-custom-actions .btn {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .tab-title {
    padding-top: 0;
  }
}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {
  #content .form-group .btn,
  #content a.btn.btn-default {
    width: 100%;
    margin-right: 0;
    margin-bottom: 10px;
  }

  #content .form-group .btn:last-child,
  #content a.btn.btn-default:last-child {
    margin-bottom: 0;
  }

  .summary-stats {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .summary-stats strong {
    font-size: 22px !important;
  }

  .summary-stats span {
    font-size: 9px !important;
  }
}