@charset "UTF-8";
/**
 * Clay 3.84.0
 *
 * SPDX-FileCopyrightText: © 2020 Liferay, Inc. <https://liferay.com>
 * SPDX-FileCopyrightText: © 2020 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
 *
 * SPDX-License-Identifier: BSD-3-Clause
 */
/**
 * Bootstrap v4.4.1
 *
 * SPDX-FileCopyrightText: © 2019 Twitter, Inc. <https://twitter.com>
 * SPDX-FileCopyrightText: © 2019 The Bootstrap Authors <https://getbootstrap.com/>
 *
 * SPDX-License-Identifier: LicenseRef-MIT-Bootstrap
 */
/**
 * Clay 3.84.0
 *
 * SPDX-FileCopyrightText: © 2020 Liferay, Inc. <https://liferay.com>
 * SPDX-FileCopyrightText: © 2020 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
 *
 * SPDX-License-Identifier: BSD-3-Clause
 */
/**
 * Bootstrap v4.4.1
 *
 * SPDX-FileCopyrightText: © 2019 Twitter, Inc. <https://twitter.com>
 * SPDX-FileCopyrightText: © 2019 The Bootstrap Authors <https://getbootstrap.com/>
 *
 * SPDX-License-Identifier: LicenseRef-MIT-Bootstrap
 */
.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.sr-only-focusable:active, .sr-only-focusable:focus {
  clip: auto;
  height: auto;
  overflow: visible;
  position: static;
  white-space: normal;
  width: auto;
}

.lfr-asset-column-details .lfr-asset-categories {
  color: #7d7d7d;
}
.lfr-asset-column-details .lfr-asset-categories .lfr-asset-category {
  color: #555;
}
.lfr-asset-column-details .lfr-asset-description {
  color: #444;
  font-style: italic;
  margin: 0.5em auto 2em;
  -ms-hyphens: none;
  -webkit-hyphens: none;
  hyphens: none;
}
.lfr-asset-column-details .lfr-asset-icon {
  border-right: 1px solid transparent;
  color: #999;
  float: left;
  line-height: 1em;
  margin-right: 10px;
  padding-right: 10px;
}
.lfr-asset-column-details .lfr-asset-icon.last {
  border-width: 0;
}
.lfr-asset-column-details .lfr-asset-tags {
  color: #7d7d7d;
}
.lfr-asset-column-details .lfr-asset-tags .tag {
  color: #555;
}
.lfr-asset-column-details .lfr-asset-metadata {
  clear: both;
  margin-bottom: 1.5em;
  padding-bottom: 1.5em;
}
.lfr-asset-column-details .lfr-panel {
  clear: both;
  margin-bottom: 0.2em;
}
.lfr-asset-column-details .lfr-panel.lfr-extended {
  border: 1px solid #ccc;
  margin-bottom: 0;
}
.lfr-asset-column-details .taglib-custom-attributes-list label,
.lfr-asset-column-details .lfr-asset-field label {
  display: block;
}
.lfr-asset-column-details .taglib-custom-attributes-list {
  margin-bottom: 1em;
}

.overlay {
  position: absolute;
}

.overlay-hidden,
.overlaymask-hidden {
  display: none;
}

.lfr-form-row {
  border-bottom: 1px solid #ccc;
  margin-bottom: 10px;
  margin-top: 10px;
  padding: 1px 5px 25px;
  position: relative;
}
.lfr-form-row:after {
  clear: both;
  content: "";
  display: block;
  height: 0;
}
.lfr-form-row:hover {
  border: solid #ccc;
  border-width: 1px 0;
  padding-top: 0;
}
.lfr-form-row.lfr-form-row-inline .form-group {
  margin-right: 5px;
}
.lfr-form-row legend .field-label {
  float: left;
  margin-right: 10px;
}
.lfr-form-row .handle-sort-vertical {
  background: url(../images/application/handle_sort_vertical.png) no-repeat 0 50%;
  cursor: move;
  padding-left: 20px;
}
.lfr-form-row fieldset {
  border-width: 0;
  margin: 0;
  padding: 0;
}

.lfr-autorow-controls {
  bottom: 5px;
  position: absolute;
  right: 5px;
}

.datepicker-popover-content .popover-content {
  padding: 0.75rem 1rem;
}

.dropdown.open > .dropdown-menu, .overlay-content .open > .dropdown-menu {
  display: block;
}

.form-control-inline {
  background-color: transparent;
  font-size: 1.125rem;
  font-weight: 700;
}
.form-control-inline:not(:hover) {
  border-color: transparent;
}
.form-control-inline::placeholder {
  color: #a9afb5;
  font-style: italic;
}

.form-search .input-group {
  position: relative;
}
.form-search .input-group.advanced-search .search-query {
  padding-left: 40px;
  z-index: 0;
}
.form-search .input-group.advanced-search .toggle-advanced {
  cursor: pointer;
  left: 0;
  line-height: 1;
  padding: 8px 10px;
  position: absolute;
  top: 0;
}
.form-search .input-group.advanced-search .toggle-advanced .caret {
  margin-top: 7px;
}
.form-search .input-group.advanced-search .toggle-advanced .icon-search {
  font-size: 14px;
}
@media (max-width: 991.98px) {
  .form-search .input-group {
    width: 100%;
  }
  .form-search .input-group .btn {
    clip: rect(0, 0, 0, 0);
    left: -9999px;
    position: absolute;
  }
  .form-search .input-group input.search-query {
    width: 100%;
  }
}

.lfr-table {
  border-collapse: collapse;
  clear: both;
}
.lfr-table > tbody > tr > td,
.lfr-table > tbody > tr > th,
.lfr-table > thead > tr > td,
.lfr-table > thead > tr > th,
.lfr-table > tfoot > tr > td,
.lfr-table > tfoot > tr > th {
  padding: 0 5px;
  overflow-wrap: break-all;
  word-wrap: break-all;
}
.lfr-table > tbody > tr > td:first-child, .lfr-table > tbody > tr > td.first-child,
.lfr-table > tbody > tr > th:first-child,
.lfr-table > tbody > tr > th.first-child,
.lfr-table > thead > tr > td:first-child,
.lfr-table > thead > tr > td.first-child,
.lfr-table > thead > tr > th:first-child,
.lfr-table > thead > tr > th.first-child,
.lfr-table > tfoot > tr > td:first-child,
.lfr-table > tfoot > tr > td.first-child,
.lfr-table > tfoot > tr > th:first-child,
.lfr-table > tfoot > tr > th.first-child {
  padding-left: 0;
}
.lfr-table > tbody > tr > td:last-child, .lfr-table > tbody > tr > td.last-child,
.lfr-table > tbody > tr > th:last-child,
.lfr-table > tbody > tr > th.last-child,
.lfr-table > thead > tr > td:last-child,
.lfr-table > thead > tr > td.last-child,
.lfr-table > thead > tr > th:last-child,
.lfr-table > thead > tr > th.last-child,
.lfr-table > tfoot > tr > td:last-child,
.lfr-table > tfoot > tr > td.last-child,
.lfr-table > tfoot > tr > th:last-child,
.lfr-table > tfoot > tr > th.last-child {
  padding-right: 0;
}
.lfr-table > tbody > tr > th,
.lfr-table > thead > tr > th,
.lfr-table > tfoot > tr > th {
  font-weight: bold;
}

.lfr-pagination:after {
  clear: both;
  content: "";
  display: block;
  height: 0;
  visibility: hidden;
}
.lfr-pagination .dropdown-menu {
  display: none;
}
.lfr-pagination .dropdown-toggle .icon-caret-down {
  margin-left: 5px;
}
.lfr-pagination .lfr-pagination-controls {
  float: left;
}
.lfr-pagination .lfr-pagination-controls .search-results {
  display: inline-block;
  margin-left: 10px;
  margin-top: 5px;
  top: 10px;
}
.lfr-pagination .lfr-pagination-controls li .lfr-pagination-link {
  border-width: 0;
  clear: both;
  color: #333;
  display: block;
  font-weight: normal;
  line-height: 20px;
  padding: 3px 20px;
  text-align: left;
  white-space: nowrap;
  width: 100%;
}
.lfr-pagination .lfr-pagination-delta-selector {
  float: left;
}
@media (max-width: 991.98px) {
  .lfr-pagination .lfr-pagination-delta-selector .lfr-icon-menu-text {
    display: none;
  }
}
.lfr-pagination .pagination-content {
  float: right;
}

.lfr-panel.lfr-extended {
  border: 1px solid transparent;
  border-color: #dedede #bfbfbf #bfbfbf #dedede;
}
.lfr-panel.lfr-extended.lfr-collapsible .lfr-panel-button {
  display: block;
}
.lfr-panel.lfr-extended.lfr-collapsed .lfr-panel-titlebar {
  border-bottom-width: 0;
}
.lfr-panel.panel-default .panel-heading {
  border-bottom-width: 0;
}
.lfr-panel .toggler-header {
  cursor: pointer;
}

.sidebar-sm {
  font-size: 0.875rem;
}
.sidebar-sm .sheet-subtitle {
  font-size: 0.75rem;
  margin-bottom: 1rem;
}
.sidebar-sm .form-group {
  margin-bottom: 1rem;
}
.sidebar-sm .form-control {
  border-radius: 0.1875rem;
  font-size: 0.875rem;
  height: 2rem;
  line-height: 1.5;
  min-height: auto;
  padding: 0.25rem 0.75rem;
}
.sidebar-sm .form-control.form-control-tag-group {
  height: auto;
}
.sidebar-sm .form-control.form-control-tag-group .form-control-inset {
  margin-bottom: 0;
  margin-top: 0;
}
.sidebar-sm .form-control.form-control-tag-group .label {
  margin-bottom: 0;
  margin-top: 0;
  padding: 0 0.25rem;
}
.sidebar-sm .form-control[type=file] {
  padding: 0;
}
.sidebar-sm select.form-control {
  padding-right: 1.6rem;
}
.sidebar-sm select.form-control:not([size]) {
  height: 2rem;
}
.sidebar-sm .article-content-description .input-localized.input-localized-editor .input-group-item .wrapper .form-control {
  min-height: auto;
  padding: 0.285rem 0.75rem;
}
.sidebar-sm .btn:not(.btn-unstyled) {
  border-radius: 0.1875rem;
  font-size: 0.875rem;
  line-height: 1.15;
  padding: 0.4375rem 0.75rem;
}
.sidebar-sm .btn:not(.btn-unstyled).close {
  padding: 0.4375rem;
}
.sidebar-sm .btn.btn-monospaced, .sidebar-sm .btn.btn-monospaced.btn-sm {
  height: 2rem;
  padding: 0.1875rem 0;
  width: 2rem;
}
.sidebar-sm .btn.btn-monospaced.input-localized-trigger, .sidebar-sm .btn.btn-monospaced.btn-sm.input-localized-trigger {
  padding: 0;
}
.sidebar-sm .input-group-item .input-group-text {
  font-size: 0.875rem;
  height: 2rem;
  min-width: 2rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.sidebar-sm .input-group-item .btn .btn-section {
  font-size: 0.5625rem;
}
.sidebar-sm .list-group-item-flex {
  padding: 0.5rem 0.25rem;
}
.sidebar-sm .list-group-item-flex .autofit-col {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.lfr-translation-manager {
  border-radius: 4px;
  display: inline-block;
  margin-top: 0.5em;
  min-height: 1.8em;
}
.lfr-translation-manager .lfr-translation-manager-content .lfr-translation-manager-default-locale {
  display: inline-block;
  width: auto;
}
.lfr-translation-manager .lfr-translation-manager-content .lfr-translation-manager-icon-menu {
  float: none;
  padding: 0.4em 0;
}
.lfr-translation-manager .lfr-translation-manager-content .lfr-translation-manager-icon-menu li,
.lfr-translation-manager .lfr-translation-manager-content .lfr-translation-manager-icon-menu li strong {
  display: inline;
}
.lfr-translation-manager .lfr-translation-manager-content .lfr-translation-manager-translations-message {
  margin: 10px 0;
}
.lfr-translation-manager .lfr-translation-manager-available-translations {
  white-space: normal;
}
.lfr-translation-manager .lfr-translation-manager-available-translations .lfr-translation-manager-available-translations-links {
  line-height: 1;
}
.lfr-translation-manager .lfr-translation-manager-translation {
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  display: inline-block;
  margin: 0.2em;
  padding: 0.4em 0.3em 0.4em 0.5em;
  text-decoration: none;
}
.lfr-translation-manager .lfr-translation-manager-translation * {
  vertical-align: middle;
}
.lfr-translation-manager .lfr-translation-manager-translation img {
  margin-right: 0.3em;
}
.lfr-translation-manager .lfr-translation-manager-translation:hover {
  background-color: #d1e5ef;
}
.lfr-translation-manager .lfr-translation-manager-translation.lfr-translation-manager-translation-editing {
  background-color: #598bec;
  border-color: #224fa8;
  color: #fff;
}
.lfr-translation-manager .lfr-translation-manager-change-default-locale {
  margin: 0 0.4em;
}
.lfr-translation-manager .lfr-translation-manager-delete-translation {
  display: inline-block;
  padding: 0 2px;
}
.lfr-translation-manager .lfr-translation-manager-delete-translation svg {
  pointer-events: none;
}

.lfr-tree a {
  text-decoration: none;
}
.lfr-tree li {
  margin-bottom: 2px;
  padding-left: 0;
}
.lfr-tree li ul li, .lfr-tree li.tree-item {
  padding-left: 0;
}
.lfr-tree li.tree-item {
  padding-left: 5px;
}
.lfr-tree li.tree-item li {
  padding-left: 20px;
}
.lfr-tree li.tree-item ul {
  margin-left: 0;
  margin-top: 5px;
}

.lfr-upload-container {
  margin-bottom: 1rem;
}
.lfr-upload-container .upload-target {
  border: 3px dashed #e5e7e9;
  margin-bottom: 1rem;
  min-height: 2rem;
  padding: 2rem 0;
  position: relative;
  text-align: center;
}
.upload-drop-intent .lfr-upload-container .upload-target {
  z-index: 100;
}
.upload-drop-active .lfr-upload-container .upload-target {
  background-color: #92e5a5;
  border-color: #69db83;
}
.lfr-upload-container .upload-target .drop-file-text {
  font-weight: normal;
}
.mobile .lfr-upload-container .upload-target .drop-file-text {
  display: none;
}
.lfr-upload-container .upload-target .small {
  display: block;
  margin: 5px 0;
  text-transform: lowercase;
}
.lfr-upload-container .manage-upload-target {
  padding-top: 5px;
  position: relative;
}
.lfr-upload-container .manage-upload-target .select-files {
  float: left;
  line-height: 0;
  margin: 0 1.125rem 1.125rem;
  padding: 0 0 0 5px;
}
.lfr-upload-container .cancel-uploads,
.lfr-upload-container .clear-uploads {
  background-repeat: no-repeat;
  float: right;
}
.lfr-upload-container .cancel-uploads {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAnFBMVEX////4YWP/dXjyS07/dXj9bXD6a234YWP4XWD2WVv2VFfsOTzoLzHmKSvkISP2VFf0TE/vREftPT/iHB72WVvvREf0TE//hon/gYX/fYD/e33/dXj/cXP9bXD/a236a23/Zmb4YWP4XWD/Wl32WVv/VVj2VFf3VFb0TE/yS072SUvvREfuQELtPT/sOTzrMzXoLzHnLC/mKSvkISPh2jkWAAAAF3RSTlMAESIiMzMzMzMzMzMzMzNERERERHd3qtw8lzkAAACOSURBVHjaZcjZDsIgEIXhcd+tu5YBKUixttS6vP+7OQKJTfxvTr4D7Tpxu/2w410SjDjwVvLQ805TPiRryfQeKM6OTI68K/BJPHGlJZJjSqSMofEOGXbJecsTgzkds58V5+J8refBU7Jx9yIrmkW0sA6gqbLyuaRjZZWtgXq58rEFan0jf3uTfRuIkf/7AO8DDcVPSSG3AAAAAElFTkSuQmCC);
  margin-right: 0;
}
.lfr-upload-container .clear-uploads {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAdVBMVEX///+6QwTEVx65RQPEVx3EWB64RQPDVxq5RAO5RAO5RQPATQ65RQO5RQO5RQPRczjJZCW9TQTLay28QgTdZAHhaAPmdyHqeQXrikDudgDvfxj0nWP1qHL2tY33tY34dgD+za7+1rj/dxH/fxj/hiH/kk3///9TM3sUAAAAFHRSTlMAbXd4eHh6gN3e3+Hi4+T5+/z8/mIsq5IAAABHSURBVBjTY2CgGWDlFuZhRuIz8cspyggxIgQ4ZFWVVCQ4EQLCCmpqalLCCAFeaWV5SVE+hAC7gJi4iCAbkqksXMK8bNRzNADCOQN++eLhCQAAAABJRU5ErkJggg==);
  padding-left: 16px;
}
.lfr-upload-container .upload-file.upload-complete.file-saved {
  padding-left: 25px;
}
.lfr-upload-container .upload-file .file-title {
  display: inline-block;
  max-width: 95%;
  overflow: hidden;
  padding-right: 16px;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}
.lfr-upload-container .upload-file .icon-file {
  font-size: 40px;
}
.lfr-upload-container .upload-list-info {
  margin: 1em 0 0.5em;
}
.lfr-upload-container .upload-list-info h4 {
  font-size: 1.3em;
}
.lfr-upload-container .cancel-button {
  color: #6c757d;
  margin-top: 1px;
  position: absolute;
  right: 5px;
  top: 50%;
  white-space: nowrap;
}
.lfr-upload-container .cancel-button .cancel-button-text {
  display: none;
  margin-left: 5px;
}
.lfr-upload-container .cancel-button:hover .cancel-button-text {
  display: inline;
}
.lfr-upload-container .cancel-button .lexicon-icon {
  height: 12px;
}
.lfr-upload-container .delete-button {
  color: #6c757d;
}
.lfr-upload-container .delete-button-col {
  padding-right: 10px;
}
.lfr-upload-container .file-added .success-message {
  float: right;
  font-weight: normal;
}
.lfr-upload-container .upload-error {
  opacity: 1;
  padding-left: 25px;
}
.lfr-upload-container .upload-complete .cancel-button,
.lfr-upload-container .delete-button,
.lfr-upload-container .upload-complete.file-saved .delete-button,
.lfr-upload-container .upload-complete.upload-error .delete-button {
  display: none;
}
.lfr-upload-container .multiple-files .upload-error {
  background: #f5c4c9 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAJPSURBVDjLpZPLS5RhFMYfv9QJlelTQZwRb2OKlKuINuHGLlBEBEOLxAu46oL0F0QQFdWizUCrWnjBaDHgThCMoiKkhUONTqmjmDp2GZ0UnWbmfc/ztrC+GbM2dXbv4ZzfeQ7vefKMMfifyP89IbevNNCYdkN2kawkCZKfSPZTOGTf6Y/m1uflKlC3LvsNTWArr9BT2LAf+W73dn5jHclIBFZyfYWU3or7T4K7AJmbl/yG7EtX1BQXNTVCYgtgbAEAYHlqYHlrsTEVQWr63RZFuqsfDAcdQPrGRR/JF5nKGm9xUxMyr0YBAEXXHgIANq/3ADQobD2J9fAkNiMTMSFb9z8ambMAQER3JC1XttkYGGZXoyZEGyTHRuBuPgBTUu7VSnUAgAUAWutOV2MjZGkehgYUA6O5A0AlkAyRnotiX3MLlFKduYCqAtuGXpyH0XQmOj+TIURt51OzURTYZdBKV2UBSsOIcRp/TVTT4ewK6idECAihtUKOArWcjq/B8tQ6UkUR31+OYXP4sTOdisivrkMyHodWejlXwcC38Fvs8dY5xaIId89VlJy7ACpCNCFCuOp8+BJ6A631gANQSg1mVmOxxGQYRW2nHMha4B5WA3chsv22T5/B13AIicWZmNZ6cMchTXUe81Okzz54pLi0uQWp+TmkZqMwxsBV74Or3od4OISPr0e3SHa3PX0f3HXKofNH/UIG9pZ5PeUth+CyS2EMkEqs4fPEOBJLsyske48/+xD8oxcAYPzs4QaS7RR2kbLTTOTQieczfzfTv8QPldGvTGoF6/8AAAAASUVORK5CYII=) no-repeat 5px 5px;
  border-color: #bd2130;
  color: #bd2130;
  font-weight: normal;
  margin-bottom: 16px;
  padding: 8px 8px 8px 24px;
}
.lfr-upload-container .multiple-files .upload-error .error-message {
  display: block;
}
.lfr-upload-container .multiple-files .upload-complete.file-saved .form-check-middle-left .card-body,
.lfr-upload-container .multiple-files .upload-complete.upload-error .form-check-middle-left .card-body {
  padding-left: 1rem;
}
.lfr-upload-container .multiple-files .upload-complete.file-saved .form-check-middle-left .custom-control-label,
.lfr-upload-container .multiple-files .upload-complete.upload-error .form-check-middle-left .custom-control-label {
  display: none;
}
.lfr-upload-container .single-file .upload-error {
  list-style: none;
  margin-top: 1em;
}
.lfr-upload-container .single-file .upload-error .upload-error-message {
  margin-bottom: 0.5em;
}
.lfr-upload-container .upload-complete {
  padding-left: 5px;
}
.lfr-upload-container .upload-complete .error-message,
.lfr-upload-container .upload-complete .success-message {
  font-weight: bold;
  margin-left: 1em;
}
.lfr-upload-container .upload-complete .delete-button {
  display: inline-block;
}
.lfr-upload-container .upload-complete .select-file:disabled + .custom-control-label {
  display: none;
}
.lfr-upload-container .progress {
  display: none;
  margin-top: 0.5rem;
}
.lfr-upload-container .file-uploading .progress {
  display: flex;
}

.lfr-alert-container {
  left: 0;
  position: absolute;
  right: auto;
  top: auto;
  width: 100%;
  z-index: 430;
}
.lfr-alert-container.inline-alert-container {
  position: relative;
}
.lfr-alert-container.inline-alert-container .lfr-alert-wrapper {
  padding: 0;
}
.lfr-alert-container .lfr-alert-wrapper {
  margin-bottom: 5px;
  overflow: hidden;
}

.lfr-search-container td .overlay.entry-action {
  position: static;
}
.lfr-search-container td .overlay.entry-action .btn a {
  display: block;
  padding: 4px 12px;
}

.contextual-sidebar {
  height: calc(100vh - 49px);
  pointer-events: none;
  position: fixed;
  right: 0;
  top: 49px;
  transform: translateX(100%);
  transition: transform ease 0.5s;
  width: 320px;
  will-change: transform;
}
.contextual-sidebar.contextual-sidebar-visible {
  pointer-events: auto;
  transform: translateX(0);
}
body.has-control-menu .contextual-sidebar {
  height: calc(100vh - 98px);
  top: 98px;
}

@media (min-width: 576px) {
  .contextual-sidebar {
    height: calc(100vh - 64px);
    top: 64px;
  }
  body.has-control-menu .contextual-sidebar {
    height: calc(
				100vh - 120px
			);
    top: 120px;
  }
  .contextual-sidebar-content {
    transition: padding ease 0.5s;
    will-change: padding;
  }
  .contextual-sidebar-visible .contextual-sidebar-content,
  .contextual-sidebar-visible + .contextual-sidebar-content {
    padding-right: 320px;
  }
}
.taglib-diff-html div.diff-removed-image {
  background: #fdc6c6 url(../images/diff/minus.png);
}
.taglib-diff-html div.diff-added-image {
  background: #cfc url(../images/diff/plus.png) no-repeat;
}
.taglib-diff-html div.diff-removed-image, .taglib-diff-html div.diff-added-image {
  height: 300px;
  margin: 2px;
  opacity: 0.55;
  position: absolute;
  width: 200px;
}
.taglib-diff-html span.diff-html-added {
  background-color: #cfc;
  font-size: 1em;
}
.taglib-diff-html span.diff-html-added img {
  border: 2px solid #cfc;
}
.taglib-diff-html span.diff-html-changed {
  background: url(../images/diff/underline.png) bottom repeat-x;
}
.taglib-diff-html span.diff-html-changed img {
  border: 2px dotted #009;
}
.taglib-diff-html span.diff-html-removed {
  background-color: #fdc6c6;
  font-size: 1em;
  text-decoration: line-through;
}
.taglib-diff-html span.diff-html-removed img {
  border: 2px solid #fdc6c6;
}

.taglib-discussion {
  font-size: 0.875rem;
  margin-top: 1rem;
}
.taglib-discussion .actions-menu .component-action {
  display: inline-flex;
}
.taglib-discussion .button-holder {
  margin: 1rem 0;
}
.taglib-discussion .comment-container {
  margin-bottom: 1.5rem;
}
.taglib-discussion .lfr-discussion .lfr-discussion-form-edit .alloy-editor-placeholder {
  border-left-color: #dbdde1;
}
.taglib-discussion .lfr-discussion-body {
  font-size: 1rem;
}
@media (min-width: 576px) {
  .taglib-discussion .lfr-discussion-body {
    padding-left: 3.5rem;
  }
}
@media (min-width: 576px) {
  .taglib-discussion .lfr-discussion-details .taglib-user-display {
    word-wrap: break-word;
  }
}
.taglib-discussion .lfr-discussion-details .taglib-user-display .user-details .user-name {
  font-weight: bold;
  text-decoration: none;
}
.taglib-discussion .lfr-discussion-details .taglib-user-display .user-details .user-name:hover {
  text-decoration: underline;
}
.taglib-discussion .lfr-discussion-details .taglib-user-display .user-profile-image .avatar {
  background-size: 50px;
}
.taglib-discussion .lfr-discussion-container {
  border-bottom: 1px solid #e7e7ed;
  margin-bottom: 1.5rem;
}
.taglib-discussion .lfr-discussion-container:first-of-type {
  border-top: 1px solid #e7e7ed;
  padding-top: 1.5rem;
}
.taglib-discussion .lfr-discussion-container:last-of-type {
  border-bottom: 0;
}
.taglib-discussion .lfr-discussion-container .lfr-discussion {
  padding-left: 1rem;
}
.taglib-discussion .lfr-discussion-container .lfr-discussion .lfr-discussion .lfr-discussion .lfr-discussion {
  padding-left: 0;
}
@media (min-width: 576px) {
  .taglib-discussion .lfr-discussion-container .lfr-discussion {
    padding-left: 3.5rem;
  }
}
.taglib-discussion .lfr-discussion-parent-link {
  color: #67678c;
  font-weight: 600;
  margin-left: 1em;
}
@media (max-width: 767.98px) {
  .taglib-discussion .lfr-discussion-parent-link {
    display: block;
    margin-left: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.taglib-discussion .lfr-discussion-controls .autofit-col:first-of-type > .btn-outline-borderless {
  margin-left: -0.75rem;
}
.taglib-discussion .lfr-discussion-more-comments {
  border-top: 1px solid #e7e7ed;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  text-align: center;
}
.taglib-discussion .username {
  color: #272833;
  font-weight: 600;
}
.taglib-discussion .taglib-workflow-status {
  margin-left: 0.5rem;
}
.taglib-discussion .workflow-value {
  text-transform: uppercase;
}
@media (min-width: 576px) {
  .taglib-discussion .actions-menu {
    display: none;
  }
  .taglib-discussion .comment-container:hover .actions-menu,
  .taglib-discussion .actions-menu:focus,
  .taglib-discussion .actions-menu.open {
    display: inline-block;
  }
}

.drop-zone {
  min-height: 80px;
  padding: 20px;
  text-align: center;
}
.drop-zone.drop-enabled {
  outline: 2px dashed transparent;
}
.drop-zone.drop-enabled:not(.no-border) {
  outline-color: rgba(176, 180, 187, 0.5);
}
.drop-zone p {
  margin: 10px auto 0;
  max-width: 75%;
}

.drop-here-info {
  font-size: 25px;
  height: 100%;
  left: 0;
  min-height: 100px;
  opacity: 0;
  position: absolute;
  text-align: center;
  top: 0;
  visibility: hidden;
  width: 100%;
  transition: all 0.2s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .drop-here-info {
    transition: none;
  }
}
.drop-here-info .drop-here-indicator {
  height: 115px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(0, -50%);
}
.drop-here-info .drop-icons {
  display: inline-block;
  position: relative;
  width: 160px;
  transition: all 0.2s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .drop-here-info .drop-icons {
    transition: none;
  }
}
.drop-here-info .drop-icons span {
  border-radius: 3px;
  position: absolute;
  text-align: center;
  transition: all 0.3s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .drop-here-info .drop-icons span {
    transition: none;
  }
}
.drop-here-info .drop-icons span:nth-of-type(1) {
  box-shadow: 5px 4px 0 0 rgba(0, 0, 0, 0.08);
  height: 60px;
  left: 0;
  line-height: 60px;
  opacity: 0;
  top: 10px;
  transform: rotate(25deg);
  width: 60px;
}
.drop-here-info .drop-icons span:nth-of-type(2) {
  background: #00c2ff;
  color: #fff;
  height: 80px;
  left: 40px;
  line-height: 80px;
  width: 80px;
  z-index: 2;
}
.drop-here-info .drop-icons span:nth-of-type(3) {
  box-shadow: -5px 4px 0 0 rgba(0, 0, 0, 0.08);
  display: block;
  font-size: 45px;
  height: 70px;
  left: 90px;
  line-height: 70px;
  opacity: 0;
  position: relative;
  top: 8px;
  transform: rotate(-25deg);
  width: 70px;
  z-index: 1;
}
.drop-here-info .drop-icons span:nth-of-type(1), .drop-here-info .drop-icons span:nth-of-type(3) {
  background: #e8e6e8;
  color: #a5a6ac;
}
.drop-here-info .drop-text {
  color: #fff;
  display: block;
  font-size: 20px;
  margin-left: 0;
  margin-top: 20px;
}
.drop-active .drop-here-info {
  background-color: rgba(0, 0, 0, 0.6);
  opacity: 1;
  visibility: visible;
  z-index: 100;
}
.drop-active .drop-here-info .drop-icons span:nth-of-type(1), .drop-active .drop-here-info .drop-icons span:nth-of-type(3) {
  opacity: 1;
}
.drop-active .drop-here-info span:nth-of-type(1) {
  transform: rotate(-20deg);
}
.drop-active .drop-here-info span:nth-of-type(2) {
  transform: scale(1);
}
.drop-active .drop-here-info span:nth-of-type(3) {
  transform: rotate(15deg);
}

.taglib-empty-result-message.sheet {
  margin-bottom: 24px;
}
.taglib-empty-result-message .taglib-empty-result-message-description {
  color: #6c757d;
  margin-top: 8px;
}
.taglib-empty-result-message .taglib-empty-result-message-header,
.taglib-empty-result-message .taglib-empty-result-message-header-has-plus-btn,
.taglib-empty-result-message .taglib-empty-search-result-message-header {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  margin-left: auto;
  margin-right: auto;
}
.taglib-empty-result-message .taglib-empty-result-message-header,
.taglib-empty-result-message .taglib-empty-result-message-header-has-plus-btn {
  max-width: 200px;
  padding-top: 250px;
}
.taglib-empty-result-message .taglib-empty-result-message-header,
.taglib-empty-result-message .taglib-empty-result-message-header-has-plus-btn {
  background-image: url(/o/prp-theme/images/states/empty_state.gif);
}
.taglib-empty-result-message .taglib-empty-search-result-message-header {
  background-image: url(/o/prp-theme/images/states/search_state.gif);
  max-width: 210px;
  padding-top: 232px;
}
.taglib-empty-result-message .taglib-empty-state {
  background-image: url(/o/prp-theme/images/states/empty_state.gif);
  margin: auto;
  max-width: 250px;
  padding-top: 250px;
}
.taglib-empty-result-message .taglib-success-state {
  background-image: url(/o/prp-theme/images/states/success_state.gif);
  margin: auto;
  max-width: 250px;
  padding-top: 250px;
}
.taglib-empty-result-message .taglib-search-state {
  background-image: url(/o/prp-theme/images/states/search_state.gif);
  margin: auto;
  max-width: 250px;
  padding-top: 250px;
}
.taglib-empty-result-message .taglib-empty-result-message-title {
  font-size: 1rem;
  margin-top: 48px;
}
.taglib-empty-result-message .taglib-empty-result-message-description {
  font-size: 0.875rem;
}
.taglib-empty-result-message .taglib-empty-result-message-header + .taglib-empty-result-message-title,
.taglib-empty-result-message .taglib-empty-search-result-message-header + .taglib-empty-result-message-title,
.taglib-empty-result-message .taglib-empty-state + .taglib-empty-result-message-title,
.taglib-empty-result-message .taglib-success-state + .taglib-empty-result-message-title,
.taglib-empty-result-message .taglib-search-state + .taglib-empty-result-message-title {
  font-size: 1.25rem;
  font-weight: bold;
  text-align: center;
}
.taglib-empty-result-message .taglib-empty-result-message-header ~ .taglib-empty-result-message-description, .taglib-empty-result-message .taglib-empty-result-message-header ~ .taglib-empty-result-message-actions,
.taglib-empty-result-message .taglib-empty-search-result-message-header ~ .taglib-empty-result-message-description,
.taglib-empty-result-message .taglib-empty-search-result-message-header ~ .taglib-empty-result-message-actions,
.taglib-empty-result-message .taglib-empty-state ~ .taglib-empty-result-message-description,
.taglib-empty-result-message .taglib-empty-state ~ .taglib-empty-result-message-actions,
.taglib-empty-result-message .taglib-success-state ~ .taglib-empty-result-message-description,
.taglib-empty-result-message .taglib-success-state ~ .taglib-empty-result-message-actions,
.taglib-empty-result-message .taglib-search-state ~ .taglib-empty-result-message-description,
.taglib-empty-result-message .taglib-search-state ~ .taglib-empty-result-message-actions {
  font-size: 1rem;
  text-align: center;
}

.field-wrapper.form-inline .control-label {
  display: inline-block;
}

.field-wrapper-html .input-localized .input-group-item {
  flex-wrap: nowrap;
}

.taglib-header {
  border-bottom: 1px solid #c8c9ca;
  color: #555;
  margin-bottom: 1em;
  padding-bottom: 10px;
}
.taglib-header .header-title {
  display: inline-block;
  margin: 0.1em;
  max-width: 100%;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
  word-wrap: normal;
}
.taglib-header .header-back-to {
  display: inline-block;
  vertical-align: middle;
}
.taglib-header .header-back-to a {
  display: block;
  font-weight: bold;
  padding: 0 0.3em 0 0;
  text-decoration: none;
}

.taglib-icon {
  text-decoration: none;
}
.taglib-icon:not(.btn):hover .taglib-text, .taglib-icon:not(.btn):focus .taglib-text {
  text-decoration: underline;
}
.taglib-icon[lang] > img {
  vertical-align: baseline;
  width: 16px;
}

.icon-monospaced {
  color: inherit;
  display: inline-block;
  height: 2rem;
  line-height: 34px;
  text-align: center;
  width: 2rem;
}
.icon-monospaced.lexicon-icon {
  padding: 8px;
}

.taglib-icon-list li {
  float: left;
  margin-right: 1em;
}
.taglib-icon-list:after {
  clear: both;
  content: "";
  display: block;
  height: 0;
  visibility: hidden;
}

.lfr-icon-menu .lfr-icon-menu-icon {
  max-width: none;
}
@media (max-width: 767.98px) {
  .table-cell.last .lfr-icon-menu .dropdown-toggle {
    text-align: center;
  }
  .table-cell.last .lfr-icon-menu .dropdown-toggle > img,
  .table-cell.last .lfr-icon-menu .dropdown-toggle .lfr-icon-menu-text {
    display: none;
  }
}

.lfr-menu-list {
  float: none;
  overflow-y: auto;
  position: relative;
}
.lfr-menu-list.direction-right {
  margin: 0 2px;
}
.lfr-menu-list.dropdown-menu {
  float: none;
  position: relative;
}
@media (max-width: 991.98px) {
  .lfr-menu-list.dropdown-menu > li > a {
    font-size: 22px;
    line-height: 40px;
    white-space: normal;
  }
  .lfr-menu-list.dropdown-menu > li > a img {
    margin-bottom: 3px;
  }
}
.lfr-menu-list.dropdown-menu .search-panel {
  margin-bottom: 0;
}
.lfr-menu-list.dropdown-menu .search-panel .form-group {
  margin: 0 16px;
}
.lfr-menu-list.dropdown-menu .search-panel .menu-item-filter {
  width: auto;
}
body > .lfr-menu-list ul {
  border-radius: 4px;
}

.lfr-icon-menu-open:after {
  clear: both;
  content: "";
  display: table;
}
.lfr-icon-menu-open .dropdown-menu {
  position: static;
}

.input-localized.input-localized-editor .form-control {
  border-width: 0;
  height: 100%;
  padding: 0;
}
.input-localized .input-group-item {
  flex-direction: column;
}
.input-localized .input-localized-content {
  margin-left: 6px;
}
.input-group .input-localized .input-localized-content {
  margin-top: 3px;
}
.input-localized .lfr-input-localized .lfr-input-localized-state {
  background-color: #ddd;
}
.input-localized .lfr-input-localized .lfr-input-localized-state.lfr-input-localized-state-error {
  background-color: #ff0047;
}
.input-localized .lfr-input-localized-default a {
  margin-right: 14px;
}
.input-localized .lfr-input-localized-state {
  height: 4px;
  margin: 3px 5px;
  width: 4px;
}
.input-localized .palette-item-inner .lfr-input-localized-flag {
  font-size: 16px;
  opacity: 0.5;
}
.input-localized .palette-item,
.input-localized .palette-item-hover,
.input-localized .palette-item-hover .palette-item-inner {
  border-color: transparent;
}
.input-localized .palette-item-inner {
  border-color: #666;
  display: block;
  height: 16px;
  width: 16px;
}
.input-localized .palette-item-selected .lfr-input-localized-state {
  background: #27c1f2;
}

.input-localized-palette-container .palette-items-container {
  font-size: 0;
  margin: 0;
  white-space: normal;
}
.input-localized-palette-container .palette-item {
  border-width: 0;
  padding: 0.5rem 1.25rem;
}
.input-localized-palette-container .palette-item-inner {
  border: 1px solid;
  margin-right: 4px;
  width: 16px;
}
.input-localized-palette-container .palette-item-inner img {
  display: block;
}

.taglib-move-boxes {
  margin-bottom: 1em;
}
.taglib-move-boxes label {
  border-bottom: 1px solid transparent;
  display: block;
  margin-bottom: 5px;
  padding: 5px;
}
.taglib-move-boxes .toolbar {
  text-align: center;
}
.taglib-move-boxes .arrow-button img {
  border-width: 0;
  height: 16px;
  width: 16px;
}
.taglib-move-boxes .choice-selector {
  width: 100%;
}
.taglib-move-boxes .choice-selector label {
  background: #ebf1f9;
  border-bottom-color: #8db2f3;
}
.taglib-move-boxes .field-content {
  margin-bottom: 0;
}
.taglib-move-boxes .move-arrow-buttons {
  margin-top: 5em;
}
.taglib-move-boxes .move-arrow-buttons .arrow-button {
  display: block;
}
.taglib-move-boxes .sortable-container {
  margin-top: 10px;
}
.taglib-move-boxes .sortable-container .btn.edit-selection {
  margin-bottom: 10px;
}
.taglib-move-boxes .sortable-container .move-option {
  background-color: transparent;
  border-top: 1px solid #ddd;
  display: none;
  margin: 2px 0;
  padding: 2px;
  position: relative;
}
.taglib-move-boxes .sortable-container .move-option.selected {
  display: block;
}
.taglib-move-boxes .sortable-container .move-option.move-option-dragging {
  background-color: #fafafa;
}
.taglib-move-boxes .sortable-container .move-option .checkbox,
.taglib-move-boxes .sortable-container .move-option .handle {
  position: absolute;
}
.taglib-move-boxes .sortable-container .move-option .checkbox {
  display: none;
  margin: 7px 0 0 5px;
}
.taglib-move-boxes .sortable-container .move-option .handle {
  color: #999;
  cursor: pointer;
  font-size: 1.5em;
  padding: 6px;
}
.taglib-move-boxes .sortable-container .move-option .title {
  font-size: 1.2em;
  margin: 1px 0 1px 30px;
}
.taglib-move-boxes .sortable-container.edit-list-active .move-option {
  display: block;
}
.taglib-move-boxes .sortable-container.edit-list-active .move-option .checkbox {
  display: inline-block;
}
.taglib-move-boxes .sortable-container.edit-list-active .move-option .handle {
  display: none;
}
.mobile .taglib-move-boxes .selector-container {
  display: none;
}

.item-selector .card-row > .autofit-col-expand {
  padding-top: 4px;
}
.item-selector .drop-zone {
  background-color: #f1f2f5;
  margin-top: 1rem;
}
.item-selector .input-file {
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  width: 0.1px;
  z-index: -1;
}
.item-selector .input-file + label {
  position: relative;
}
.item-selector .input-file + label::before {
  border-radius: 4px;
  bottom: -2px;
  content: "";
  display: block;
  left: -2px;
  position: absolute;
  right: -2px;
  top: -2px;
  transition: box-shadow 0.15s ease-in-out;
}
.item-selector .input-file:focus + label::before {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #75b8ff;
}
.item-selector .item-selector-list-row:hover {
  background-color: #e5f2ff;
  cursor: pointer;
}

.lfr-map {
  border: 1px solid #ccc;
  min-height: 400px;
  width: 100%;
}
.lfr-map .home-button {
  margin: 5px;
}
@media (max-width: 575.98px) {
  .lfr-map .home-button {
    height: 35px;
    width: 45px;
  }
}
.lfr-map .search-controls {
  font-size: 15px;
  margin-top: 5px;
  width: 100%;
}
@media (min-width: 576px) {
  .lfr-map .search-controls {
    width: 50%;
  }
}
.lfr-map .search-controls .search-input {
  width: 100%;
}

.navbar .navbar-collapse {
  max-height: none;
}
.navbar .navbar-collapse:after, .navbar .navbar-collapse:before {
  display: inline;
}
@media (max-width: 767.98px) {
  .navbar .navbar-search {
    background-color: #f3f3f3;
    border-top-width: 0;
    width: 100%;
  }
}
.navbar .navbar-search .form-search {
  margin: 8px 0;
}
@media (min-width: 768px) {
  .navbar .navbar-search .form-search {
    float: right;
    max-width: 275px;
  }
}
@media (max-width: 767.98px) {
  .navbar .navbar-search .form-search .input-group {
    width: 100%;
  }
}
@media (max-width: 991.98px) {
  .navbar .container .navbar-btn,
  .navbar .container-fluid .navbar-btn {
    margin-bottom: 5px;
    width: 45px;
  }
  .navbar .container .navbar-collapse.open,
  .navbar .container-fluid .navbar-collapse.open {
    border-width: 0;
    display: block;
    height: auto;
    overflow: visible;
  }
}

.taglib-portlet-preview.show-borders {
  border: 1px solid #828f95;
  margin-bottom: 1em;
  padding: 3px 3px 1em;
}
.taglib-portlet-preview.show-borders .title {
  background-color: #d3dadd;
  font-size: 1.4em;
  font-weight: bold;
  padding: 0.5em;
}
.taglib-portlet-preview .preview {
  margin: 1em;
  min-height: 90px;
}

.lfr-search-container .entry-action {
  width: 1px;
}
.lfr-search-container .entry-action .taglib-icon {
  white-space: nowrap;
}

.lfr-search-container-wrapper.lfr-search-container-fixed-first-column {
  position: relative;
}
@media (min-width: 576px) {
  .lfr-search-container-wrapper.lfr-search-container-fixed-first-column .table-responsive {
    margin-left: 375px;
    width: auto;
  }
}
.lfr-search-container-wrapper.lfr-search-container-fixed-first-column .table-responsive .table {
  position: static;
}
.lfr-search-container-wrapper.lfr-search-container-fixed-first-column .table-responsive .table .lfr-search-iterator-fixed-header {
  left: 12px;
  position: fixed;
  right: 12px;
  top: -1px;
  z-index: 1020;
}
.lfr-search-container-wrapper.lfr-search-container-fixed-first-column .table-responsive .table .lfr-search-iterator-fixed-header > th {
  display: block;
  padding: 0;
}
.lfr-search-container-wrapper.lfr-search-container-fixed-first-column .table-responsive .table .lfr-search-iterator-fixed-header > th .lfr-search-iterator-fixed-header-inner-wrapper {
  overflow-x: hidden;
}
@media (min-width: 576px) {
  .lfr-search-container-wrapper.lfr-search-container-fixed-first-column .table-responsive .table .lfr-search-iterator-fixed-header > th .lfr-search-iterator-fixed-header-inner-wrapper {
    margin-left: 375px;
  }
}
.lfr-search-container-wrapper.lfr-search-container-fixed-first-column .table-responsive .table .lfr-search-iterator-fixed-header > th .lfr-search-iterator-fixed-header-inner-wrapper table {
  border-collapse: collapse;
  width: 100%;
}
.lfr-search-container-wrapper.lfr-search-container-fixed-first-column .table-responsive .table .lfr-search-iterator-fixed-header > th .lfr-search-iterator-fixed-header-inner-wrapper table th {
  border-radius: 0;
}
.lfr-search-container-wrapper.lfr-search-container-fixed-first-column .table-responsive .table td,
.lfr-search-container-wrapper.lfr-search-container-fixed-first-column .table-responsive .table th {
  width: auto;
}
@media (min-width: 576px) {
  .lfr-search-container-wrapper.lfr-search-container-fixed-first-column .table-responsive .table td:first-child,
  .lfr-search-container-wrapper.lfr-search-container-fixed-first-column .table-responsive .table th:first-child {
    left: 0;
    position: absolute;
    right: 15px;
  }
}
.lfr-search-container-wrapper.lfr-search-container-fixed-first-column .table-responsive .table th {
  height: auto;
}
.lfr-search-container-wrapper a:not(.component-action):not(.btn) {
  color: #495057;
  font-weight: 500;
  text-decoration: underline;
}
.lfr-search-container-wrapper a:not(.component-action):not(.btn):focus, .lfr-search-container-wrapper a:not(.component-action):not(.btn):hover {
  color: #000;
}
.lfr-search-container-wrapper .dropdown-action .dropdown-toggle {
  color: #6c757d;
}
.lfr-search-container-wrapper .dropdown-action .dropdown-toggle:hover {
  color: #343a40;
}
.lfr-search-container-wrapper .lfr-icon-menu > .dropdown-toggle {
  color: #6c757d;
}
.lfr-search-container-wrapper .lfr-icon-menu > .dropdown-toggle:active, .lfr-search-container-wrapper .lfr-icon-menu > .dropdown-toggle:focus, .lfr-search-container-wrapper .lfr-icon-menu > .dropdown-toggle:hover {
  background-color: #f7f8f9;
  border-radius: 4px;
  color: #343a40;
}
.lfr-search-container-wrapper .lfr-search-container-list .list-group:last-child .list-group-item:nth-last-child(2) {
  border-bottom-left-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}
.lfr-search-container-wrapper .lfr-search-container-list + .taglib-search-iterator-page-iterator-bottom {
  margin-top: 20px;
}
.lfr-search-container-wrapper .list-group {
  margin-bottom: 0;
}
.lfr-search-container-wrapper .list-group + .list-group .list-group-header:first-child,
.lfr-search-container-wrapper .list-group + .list-group .list-group-item:first-child {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.lfr-search-container-wrapper .list-group .list-group-item h4 {
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: 0;
}
.lfr-search-container-wrapper .list-group .list-group-item h5,
.lfr-search-container-wrapper .list-group .list-group-item h6,
.lfr-search-container-wrapper .list-group .list-group-item .h5,
.lfr-search-container-wrapper .list-group .list-group-item .h6 {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: 0;
}
.lfr-search-container-wrapper .list-group .list-group-item span + h2.h5 {
  font-weight: 600;
}
.lfr-search-container-wrapper .list-group .list-group-item h6 + h5 {
  font-weight: 600;
}
.lfr-search-container-wrapper .table-list tbody tr:nth-last-child(2) td:first-child,
.lfr-search-container-wrapper .table-list tbody tr:nth-last-child(2) th:first-child {
  border-bottom-left-radius: 0.25rem;
}
.lfr-search-container-wrapper .table-list tbody tr:nth-last-child(2) td:last-child,
.lfr-search-container-wrapper .table-list tbody tr:nth-last-child(2) th:last-child {
  border-bottom-right-radius: 0.25rem;
}

.user-info {
  display: flex;
}
.user-info .sticker {
  align-self: center;
}
.user-info .user-details {
  margin-left: 1rem;
}
.user-info .user-name {
  color: #343a40;
  font-weight: 600;
}
.user-info .date-info {
  color: #6c757d;
}

.user-status-tooltip .user-status-avatar {
  float: left;
  margin-right: 5px;
}
.user-status-tooltip .user-status-avatar .user-status-avatar-image {
  width: 27px;
}
.user-status-tooltip .user-status-info {
  display: inline-block;
  overflow: hidden;
}
.user-status-tooltip .user-status-info .user-status-date {
  font-size: 11px;
}

.lfr-search-container {
  margin-top: 1.5em;
  overflow: auto;
}
@media (max-width: 767.98px) {
  .lfr-search-container .selector-button {
    width: auto;
  }
}
.touch .lfr-search-container {
  -webkit-overflow-scrolling: touch;
}
.touch .lfr-search-container .searchcontainer-content .table {
  max-width: none;
}

.taglib-page-iterator {
  clear: both;
  height: auto;
  width: auto;
}
.taglib-page-iterator .lfr-pagination-buttons {
  float: right;
  margin: 0;
}
@media (max-width: 991.98px) {
  .taglib-page-iterator .lfr-pagination-buttons {
    width: 100%;
  }
}
@media (max-width: 991.98px) and (max-width: 767.98px) {
  .taglib-page-iterator .lfr-pagination-buttons {
    float: none;
    margin-top: 20px;
  }
}
@media (max-width: 991.98px) {
  .taglib-page-iterator .lfr-pagination-buttons > li {
    display: inline-block;
    width: 50%;
  }
  .taglib-page-iterator .lfr-pagination-buttons > li.first, .taglib-page-iterator .lfr-pagination-buttons > li.last {
    display: none;
  }
  .taglib-page-iterator .lfr-pagination-buttons > li > a {
    line-height: 20px;
    padding: 11px 19px;
  }
}
.taglib-page-iterator .lfr-pagination-config {
  float: left;
  line-height: 46px;
}
@media (max-width: 767.98px) {
  .taglib-page-iterator .lfr-pagination-config {
    float: none;
  }
  .taglib-page-iterator .lfr-pagination-config .current-page-menu {
    display: block;
  }
  .taglib-page-iterator .lfr-pagination-config .current-page-menu .btn {
    display: block;
  }
}
.taglib-page-iterator .lfr-pagination-config .lfr-pagination-delta-selector,
.taglib-page-iterator .lfr-pagination-config .lfr-pagination-page-selector {
  display: inline;
}
.taglib-page-iterator .lfr-pagination-config .lfr-pagination-delta-selector {
  float: none;
}
@media (max-width: 991.98px) {
  .taglib-page-iterator .lfr-pagination-config .lfr-pagination-delta-selector {
    display: none;
  }
}
.taglib-page-iterator .search-results {
  float: left;
  line-height: 46px;
  margin-left: 10px;
}
@media (max-width: 991.98px) {
  .taglib-page-iterator .search-results {
    display: none;
  }
}

.taglib-search-toggle .form-search {
  position: relative;
}
.taglib-search-toggle .form-search .input-group-btn {
  position: absolute;
}
@media (min-width: 992px) {
  .taglib-search-toggle .form-search .input-group-btn {
    position: static;
  }
}
.taglib-search-toggle .toggle-advanced {
  color: inherit;
  margin-left: 10px;
  position: absolute;
  top: 8px;
}
.taglib-search-toggle .toggle-advanced, .taglib-search-toggle .toggle-advanced:hover, .taglib-search-toggle .toggle-advanced:focus {
  text-decoration: none;
}

.taglib-search-toggle-advanced-wrapper .taglib-search-toggle-advanced {
  background-color: #fcfcfc;
  border: solid #ddd;
  border-width: 0 1px 1px;
  margin-top: 0;
  padding: 15px 15px 0;
}
.navbar-search .taglib-search-toggle-advanced-wrapper .taglib-search-toggle-advanced {
  border-width: 1px 0 0;
}
.taglib-search-toggle-advanced-wrapper .taglib-search-toggle-advanced .taglib-search-toggle-advanced-content {
  position: relative;
}
.taglib-search-toggle-advanced-wrapper .taglib-search-toggle-advanced .taglib-search-toggle-advanced-content .match-fields {
  margin-bottom: 0;
}
.taglib-search-toggle-advanced-wrapper .taglib-search-toggle-advanced .taglib-search-toggle-advanced-content .match-fields-legend {
  color: #999;
  font-size: 13px;
}
.taglib-search-toggle-advanced-wrapper .btn.close {
  margin-right: 5px;
  position: relative;
  z-index: 1;
}

.taglib-user-display {
  padding: 0.5em;
}
.taglib-user-display .avatar {
  background: no-repeat center;
  background-size: 60px;
  display: block;
  height: 60px;
  margin: 0 auto;
  width: 60px;
}
.taglib-user-display .avatar.author:after {
  background: rgba(50, 168, 230, 0.5);
  border-radius: 50%;
  content: "";
  display: block;
  height: 100%;
  width: 100%;
}
.taglib-user-display .user-details {
  margin-top: 1em;
}
.taglib-user-display .user-name {
  font-size: 1.1em;
  font-weight: bold;
}
.taglib-user-display a .user-name {
  text-decoration: underline;
}
.taglib-user-display.display-style-1 .user-profile-image {
  float: left;
  margin-right: 24px;
}
.taglib-user-display.display-style-1 .user-name {
  display: inline-block;
  margin-top: 10px;
}
.taglib-user-display.display-style-1 .user-details {
  margin-top: 0;
}
.taglib-user-display.display-style-2 .user-profile-image,
.taglib-user-display.display-style-2 .user-name {
  clear: both;
  display: block;
  min-height: 20px;
  text-align: center;
}
.taglib-user-display.display-style-3 {
  padding: 0;
}
.taglib-user-display.display-style-3 .user-profile-image {
  display: inline-block;
  vertical-align: middle;
}

.taglib-workflow-status .workflow-id,
.taglib-workflow-status .workflow-version,
.taglib-workflow-status .workflow-status {
  color: #999;
}
.table-cell .taglib-workflow-status {
  margin: 0;
}
.table-cell .taglib-workflow-status .workflow-status {
  padding-left: 0;
}

.lfr-autocomplete-input-list .yui3-aclist-list {
  margin: 0;
}

.portal-popup .sheet > .lfr-nav {
  margin-top: -24px;
}
.portal-popup .contacts-portlet .portlet-configuration-container .form {
  position: static;
}
.portal-popup .lfr-form-content {
  padding: 24px 12px;
}
.portal-popup .portlet-body,
.portal-popup .portlet-boundary,
.portal-popup .portlet-column,
.portal-popup .portlet-layout {
  height: 100%;
}
.portal-popup .portlet-column {
  position: static;
}
.portal-popup .dialog-body > .container-fluid-max-xl,
.portal-popup .dialog-body .container-view,
.portal-popup .export-dialog-tree > .container-fluid-max-xl,
.portal-popup .export-dialog-tree .container-view,
.portal-popup .lfr-dynamic-uploader > .container-fluid-max-xl,
.portal-popup .lfr-dynamic-uploader .container-view,
.portal-popup .lfr-form-content > .container-fluid-max-xl,
.portal-popup .lfr-form-content .container-view,
.portal-popup .portlet-configuration-body-content > .container-fluid-max-xl,
.portal-popup .portlet-configuration-body-content .container-view,
.portal-popup .process-list > .container-fluid-max-xl,
.portal-popup .process-list .container-view,
.portal-popup .roles-selector-body > .container-fluid-max-xl,
.portal-popup .roles-selector-body .container-view {
  padding-top: 20px;
}
.portal-popup .dialog-body > .container-fluid-max-xl .nav-tabs-underline,
.portal-popup .dialog-body .container-view .nav-tabs-underline,
.portal-popup .export-dialog-tree > .container-fluid-max-xl .nav-tabs-underline,
.portal-popup .export-dialog-tree .container-view .nav-tabs-underline,
.portal-popup .lfr-dynamic-uploader > .container-fluid-max-xl .nav-tabs-underline,
.portal-popup .lfr-dynamic-uploader .container-view .nav-tabs-underline,
.portal-popup .lfr-form-content > .container-fluid-max-xl .nav-tabs-underline,
.portal-popup .lfr-form-content .container-view .nav-tabs-underline,
.portal-popup .portlet-configuration-body-content > .container-fluid-max-xl .nav-tabs-underline,
.portal-popup .portlet-configuration-body-content .container-view .nav-tabs-underline,
.portal-popup .process-list > .container-fluid-max-xl .nav-tabs-underline,
.portal-popup .process-list .container-view .nav-tabs-underline,
.portal-popup .roles-selector-body > .container-fluid-max-xl .nav-tabs-underline,
.portal-popup .roles-selector-body .container-view .nav-tabs-underline {
  margin-left: -15px;
  margin-right: -15px;
  margin-top: -20px;
}
.portal-popup .dialog-body > .lfr-nav + .container-fluid-max-xl,
.portal-popup .export-dialog-tree > .lfr-nav + .container-fluid-max-xl,
.portal-popup .lfr-dynamic-uploader > .lfr-nav + .container-fluid-max-xl,
.portal-popup .lfr-form-content > .lfr-nav + .container-fluid-max-xl,
.portal-popup .portlet-configuration-body-content > .lfr-nav + .container-fluid-max-xl,
.portal-popup .process-list > .lfr-nav + .container-fluid-max-xl,
.portal-popup .roles-selector-body > .lfr-nav + .container-fluid-max-xl {
  padding-top: 0;
}
.portal-popup .login-container {
  padding: 1rem;
}
.portal-popup .management-bar-default {
  border-left-width: 0;
  border-radius: 0;
  border-right-width: 0;
  border-top-width: 0;
  margin-bottom: 0;
}
.portal-popup .navbar ~ .portlet-configuration-setup,
.portal-popup .portlet-export-import-container {
  height: calc(100% - 48px);
  position: relative;
}
@media (min-width: 576px) {
  .portal-popup .navbar ~ .portlet-configuration-setup,
  .portal-popup .portlet-export-import-container {
    height: calc(100% - 48px);
  }
}
.portal-popup .panel-group .panel {
  border-left-width: 0;
  border-radius: 0;
  border-right-width: 0;
}
.portal-popup .panel-group .panel + .panel {
  border-top-width: 0;
  margin-top: 0;
}
.portal-popup .panel-heading {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.portal-popup .portlet-configuration-setup .lfr-nav {
  margin-left: auto;
  margin-right: auto;
  max-width: 1280px;
  padding-left: 3px;
  padding-right: 3px;
}
@media (min-width: 576px) {
  .portal-popup .portlet-configuration-setup .lfr-nav {
    padding-left: 8px;
    padding-right: 8px;
  }
}
.portal-popup .lfr-dynamic-uploader,
.portal-popup .process-list {
  bottom: 0;
  display: block;
  left: 0;
  overflow: auto;
  position: absolute;
  right: 0;
  top: 48px;
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 576px) {
  .portal-popup .lfr-dynamic-uploader,
  .portal-popup .process-list {
    top: 48px;
  }
}
.portal-popup .portlet-export-import-publish-processes {
  top: 0;
}
.portal-popup .dialog-footer {
  background-color: #fff;
  border-top: 1px solid #dee2e6;
  bottom: 0;
  display: flex;
  flex-direction: row-reverse;
  left: 0;
  margin: 0;
  padding: 10px 24px;
  width: 100%;
  z-index: 1020;
}
@media (min-width: 768px) {
  .portal-popup .dialog-footer {
    position: fixed;
  }
}
.portal-popup .dialog-footer .btn {
  margin-left: 1rem;
  margin-right: 0;
}
.portal-popup .dialog-footer.dialog-footer-not-reverse {
  flex-direction: initial;
  justify-content: flex-end;
}
@media (min-width: 768px) {
  .portal-popup .dialog-body:not(:last-child),
  .portal-popup .lfr-dynamic-uploader:not(:last-child),
  .portal-popup .lfr-form-content:not(:last-child),
  .portal-popup .portlet-configuration-body-content:not(:last-child),
  .portal-popup .roles-selector-body:not(:last-child) {
    padding-bottom: 60px;
  }
}
.portal-popup .lfr-dynamic-uploader {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.portal-popup .lfr-dynamic-uploader.hide-dialog-footer {
  bottom: 0;
}
.portal-popup .lfr-dynamic-uploader.hide-dialog-footer + .dialog-footer {
  display: none;
}
.portal-popup .portlet-configuration-edit-permissions .portlet-configuration-body-content {
  display: flex;
  flex-direction: column;
  overflow: visible;
}
.portal-popup .portlet-configuration-edit-permissions .portlet-configuration-body-content > form {
  flex-grow: 1;
  max-width: none;
  overflow: auto;
}
.portal-popup .portlet-configuration-edit-templates .portlet-configuration-body-content {
  bottom: 0;
}
.portal-popup:not(.article-preview) #main-content,
.portal-popup:not(.article-preview) #wrapper {
  bottom: 0;
  left: 0;
  overflow: auto;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  -webkit-overflow-scrolling: touch;
}
@media print {
  .portal-popup:not(.article-preview) #main-content,
  .portal-popup:not(.article-preview) #wrapper {
    position: initial;
  }
}
.portal-popup .columns-max > .portlet-layout.row {
  margin-left: 0;
  margin-right: 0;
}
.portal-popup .columns-max > .portlet-layout.row > .portlet-column {
  padding-left: 0;
  padding-right: 0;
}

html:not(#__):not(#___) .portlet-layout.dragging {
  border-collapse: separate;
}
html:not(#__):not(#___) .drop-area {
  background-color: #d3dadd;
}
html:not(#__):not(#___) .active-area {
  background: #ffc;
}
html:not(#__):not(#___) .portlet-boundary.yui3-dd-dragging {
  opacity: 0.6;
}
html:not(#__):not(#___) .portlet-boundary.yui3-dd-dragging .portlet {
  border: 2px dashed #ccc;
}
html:not(#__):not(#___) .sortable-layout-proxy {
  opacity: 1;
}
html:not(#__):not(#___) .sortable-layout-proxy .portlet-topper {
  background-image: none;
}
html:not(#__):not(#___) .proxy {
  cursor: move;
  opacity: 0.65;
  position: absolute;
}
html:not(#__):not(#___) .proxy.generic-portlet {
  height: 200px;
  width: 300px;
}
html:not(#__):not(#___) .proxy.generic-portlet .portlet-title {
  padding: 10px;
}
html:not(#__):not(#___) .proxy.not-intersecting .forbidden-action {
  background: url(../images/application/forbidden_action.png) no-repeat;
  display: block;
  height: 32px;
  position: absolute;
  right: -15px;
  top: -15px;
  width: 32px;
}
html:not(#__):not(#___) .resizable-proxy {
  border: 1px dashed #828f95;
  position: absolute;
  visibility: hidden;
}
html:not(#__):not(#___) .sortable-proxy {
  background: #727c81;
  margin-top: 1px;
}
html:not(#__):not(#___) .sortable-layout-drag-target-indicator {
  margin: 2px 0;
}
html:not(#__):not(#___) .yui3-dd-proxy {
  z-index: 1110 !important;
}

.portlet-layout.dragging {
  border-collapse: separate;
}

.drop-area {
  background-color: #d3dadd;
}

.active-area {
  background: #ffc;
}

.portlet-boundary.yui3-dd-dragging {
  opacity: 0.6;
  transform: scale(0.8);
  transition: transform 0.3s ease;
}
@media (prefers-reduced-motion: reduce) {
  .portlet-boundary.yui3-dd-dragging {
    transition: none;
  }
}
.portlet-boundary.yui3-dd-dragging .portlet {
  border: 2px dashed #ccc;
}

.sortable-layout-proxy {
  opacity: 1;
}
.sortable-layout-proxy .portlet-topper {
  background-image: none;
}

.proxy {
  cursor: move;
  opacity: 0.65;
  position: absolute;
}
.proxy.generic-portlet {
  height: 200px;
  width: 300px;
}
.proxy.generic-portlet .portlet-title {
  padding: 10px;
}
.proxy.not-intersecting .forbidden-action {
  background: url(../images/application/forbidden_action.png) no-repeat;
  display: block;
  height: 32px;
  position: absolute;
  right: -15px;
  top: -15px;
  width: 32px;
}

.resizable-proxy {
  border: 1px dashed #828f95;
  position: absolute;
  visibility: hidden;
}

.sortable-proxy {
  background: #727c81;
  margin-top: 1px;
}

.sortable-layout-drag-target-indicator {
  margin: 2px 0;
}

.yui3-dd-proxy {
  z-index: 1110 !important;
}

.portlet-column-content.empty {
  padding: 50px;
}

.lfr-portlet-title-editable {
  margin-top: 0;
  z-index: 9999;
}
.lfr-portlet-title-editable .lfr-portlet-title-editable-content {
  padding: 0;
}
.lfr-portlet-title-editable .lfr-portlet-title-editable-content .field-input {
  margin-bottom: 0;
}
.lfr-portlet-title-editable .lfr-portlet-title-editable-content .textfield-label {
  display: none;
}
.lfr-portlet-title-editable .lfr-portlet-title-editable-content .btn-toolbar-content {
  display: inline-block;
  vertical-align: bottom;
}
.lfr-portlet-title-editable .lfr-portlet-title-editable-content .btn-group {
  margin-top: 0;
}
.lfr-portlet-title-editable .lfr-portlet-title-editable-content .btn {
  display: inline-block;
  float: none;
  margin-top: 0;
  width: auto;
}

.lfr-source-editor {
  border: solid 0 #ccc;
  border-bottom-width: 2px;
  position: relative;
}
.lfr-source-editor .ace_editor {
  height: 100%;
}
.lfr-source-editor .lfr-source-editor-toolbar li > .btn {
  background-color: #fff;
  border: transparent;
  color: #717383;
  outline: 0;
}
.lfr-source-editor .lfr-source-editor-code {
  background-color: #fff;
  color: #2b4259;
}
.lfr-source-editor .lfr-source-editor-code .ace_gutter {
  background-color: #ededef;
  color: #868896;
  overflow: hidden;
}
.lfr-source-editor .lfr-source-editor-code .ace_gutter .ace_fold-widget {
  font-family: fontawesome-alloy;
  text-align: center;
  vertical-align: middle;
}
.lfr-source-editor .lfr-source-editor-code .ace_gutter .ace_fold-widget.ace_open, .lfr-source-editor .lfr-source-editor-code .ace_gutter .ace_fold-widget.ace_closed {
  background-image: none;
}
.lfr-source-editor .lfr-source-editor-code .ace_gutter .ace_fold-widget.ace_open:before {
  content: "▾";
}
.lfr-source-editor .lfr-source-editor-code .ace_gutter .ace_fold-widget.ace_closed:before {
  content: "▸";
}
.lfr-source-editor .lfr-source-editor-code .ace_gutter .ace_gutter-active-cell {
  color: #fff;
}
.lfr-source-editor .lfr-source-editor-code .ace_gutter .ace_gutter-active-line {
  background-color: #717383;
}
.lfr-source-editor .lfr-source-editor-code .ace_gutter .ace_gutter-layer {
  border-right: solid 1px #ccc;
}
.lfr-source-editor .lfr-source-editor-code .ace_gutter .ace_info {
  background-image: none;
}
.lfr-source-editor .lfr-source-editor-code .ace_content .ace_active-line {
  background-color: #ededef;
}
.lfr-source-editor .lfr-source-editor-code .ace_content .ace_constant {
  color: #34adab;
}
.lfr-source-editor .lfr-source-editor-code .ace_content .ace_tag {
  color: #1d5ec7;
}
.lfr-source-editor .lfr-source-editor-code .ace_content .ace_string {
  color: #ff6c58;
}
.lfr-source-editor .lfr-source-editor-code .ace_content .ace_string.ace_regex {
  color: #f00;
}
.lfr-source-editor.ace_dark .lfr-source-editor-code {
  background-color: #47474f;
  color: #fff;
}
.lfr-source-editor.ace_dark .lfr-source-editor-code .ace_gutter {
  background: #54555e;
  color: #fff;
}
.lfr-source-editor.ace_dark .lfr-source-editor-code .ace_gutter .ace_gutter-active-line {
  background-color: #009aed;
}
.lfr-source-editor.ace_dark .lfr-source-editor-code .ace_content .ace_active-line {
  background-color: #11394e;
}
.lfr-source-editor.ace_dark .lfr-source-editor-code .ace_content .ace_cursor {
  color: #fff;
}
.lfr-source-editor.ace_dark .lfr-source-editor-code .ace_content .ace_tag {
  color: #4d91ff;
}

.lfr-fullscreen-source-editor {
  height: 100%;
  overflow: hidden;
}
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-header {
  height: 40px;
  margin-right: 4px;
  margin-top: 4px;
  min-height: 40px;
}
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-content {
  height: 95%;
  position: relative;
}
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-content .panel-splitter {
  border: 1px solid #ccc;
  position: absolute;
}
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-content .preview-panel {
  display: inline-block;
  overflow-y: auto;
  padding-left: 20px;
}
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-content .source-panel {
  display: inline-block;
}
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-content.vertical .source-panel,
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-content.vertical .preview-panel {
  height: 100%;
  width: 50%;
}
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-content.vertical .panel-splitter {
  height: 100%;
  left: 50%;
  top: 0;
}
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-content.horizontal .source-panel,
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-content.horizontal .preview-panel {
  height: 50%;
  width: 100%;
}
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-content.horizontal .panel-splitter {
  top: 50%;
  width: 100%;
}
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-content.simple .panel-splitter,
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-content.simple .preview-panel {
  display: none;
}
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-content.simple .source-panel {
  height: 100%;
  width: 100%;
}

.lfr-fulscreen-source-editor-dialog .modal-footer {
  text-align: left;
}

.file-icon-color-0 {
  background-color: #fff;
  color: #6b6c7e;
}

.file-icon-color-1 {
  background-color: #fff;
  color: #a7a9bc;
}

.file-icon-color-2 {
  background-color: #fff;
  color: #50d2a0;
}

.file-icon-color-3 {
  background-color: #fff;
  color: #af78ff;
}

.file-icon-color-4 {
  background-color: #fff;
  color: #ffb46e;
}

.file-icon-color-5 {
  background-color: #fff;
  color: #ff5f5f;
}

.file-icon-color-6 {
  background-color: #fff;
  color: #4b9bff;
}

.file-icon-color-7 {
  background-color: #fff;
  color: #272833;
}

.lfr-item-viewer.uploading > div:not(.progress-container) {
  opacity: 0.3;
}
.lfr-item-viewer.uploading > .progress-container {
  visibility: visible;
}
.lfr-item-viewer .aspect-ratio a.item-preview {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  position: absolute;
  width: 100%;
}
.lfr-item-viewer .image-viewer-base-image-list {
  padding-top: 35px;
}
.lfr-item-viewer .item-preview:hover {
  cursor: pointer;
}
.lfr-item-viewer .progress-container {
  background-color: #fff;
  left: 0;
  margin: 0 auto;
  padding: 20px 30px;
  position: absolute;
  right: 0;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  visibility: hidden;
  width: 80%;
  z-index: 1000;
}
.lfr-item-viewer .progress-container a {
  position: absolute;
  right: 30px;
}
.lfr-item-viewer .progress-container .progress {
  margin-top: 10px;
}
.lfr-item-viewer .search-info {
  background-color: #d3e8f1;
}
.lfr-item-viewer .search-info .keywords {
  font-size: 1.4em;
  font-weight: bold;
}
.lfr-item-viewer .search-info .change-search-folder {
  font-size: 0.8em;
  font-weight: normal;
}
.lfr-item-viewer .upload-view {
  display: table;
  height: 400px;
  margin-top: 20px;
  width: 100%;
}
.lfr-item-viewer .upload-view > div {
  display: table-cell;
  vertical-align: middle;
}
.lfr-item-viewer .yui3-widget-bd {
  position: relative;
}

.lfr-menu-expanded li a:focus {
  background-color: #5b677d;
  color: #fff;
  text-shadow: -1px -1px #2c2f34;
}

.lfr-url-error {
  display: inline-block;
  white-space: normal;
  overflow-wrap: break-all;
  word-wrap: break-all;
}

.lfr-page-layouts {
  padding: 0;
}
.lfr-page-layouts input[type=radio] {
  opacity: 0;
  position: absolute;
}
.lfr-page-layouts input[type=radio]:checked + .card-horizontal {
  cursor: default;
}
.lfr-page-layouts input[type=radio]:checked + .card-horizontal::after {
  bottom: -0.0625rem;
  content: "";
  left: -0.0625rem;
  position: absolute;
  right: -0.0625rem;
  transition: height 0.15s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .lfr-page-layouts input[type=radio]:checked + .card-horizontal::after {
    transition: none;
  }
}
.lfr-page-layouts .card-horizontal {
  cursor: pointer;
  outline: 0;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .lfr-page-layouts .card-horizontal {
    transition: none;
  }
}
.lfr-page-layouts .card-horizontal::after {
  border-radius: 0 0 0.25rem 0.25rem;
  bottom: -0.0625rem;
  content: "";
  height: 0;
  left: -0.0625rem;
  position: absolute;
  right: -0.0625rem;
  transition: height 0.15s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .lfr-page-layouts .card-horizontal::after {
    transition: none;
  }
}
.modal-body.dialog-iframe-bd {
  overflow: hidden;
  padding: 0;
}

.modal-dialog:not(.dialog-iframe-modal):not(.modal-full-screen) {
  position: relative;
}
.modal-dialog.dialog-iframe-modal {
  max-width: none;
}
.modal-dialog.modal-dialog-sm {
  max-width: 500px;
}
.modal-dialog .yui3-resize-handles-wrapper {
  pointer-events: all;
}
.modal-dialog .yui3-resize-handles-wrapper .yui3-resize-handle-inner-br {
  bottom: 0;
  right: 0;
}

.modal-open .modal {
  display: block;
}

.sheet > .panel-group .sheet-footer {
  margin-bottom: 0;
}

.sheet-footer .btn {
  margin-right: 0.5rem;
}
.sheet-footer .btn:last-child {
  margin-right: 0;
}

.tag-items {
  list-style: none;
  margin: 0 1em 0 0;
  padding: 0 1em 0.5em;
  white-space: normal;
}
.tag-items li {
  display: inline-block;
  margin: 0 1em 0 0;
  max-width: 100%;
}

.tag-selected {
  color: #000;
  font-weight: bold;
  text-decoration: none;
}

.tag-cloud .tag-popularity-1 {
  font-size: 1em;
}
.tag-cloud .tag-popularity-2 {
  font-size: 1.3em;
}
.tag-cloud .tag-popularity-3 {
  font-size: 1.6em;
}
.tag-cloud .tag-popularity-4 {
  font-size: 1.9em;
}
.tag-cloud .tag-popularity-5 {
  font-size: 2.2em;
}
.tag-cloud .tag-popularity-6 {
  font-size: 2.5em;
}

.lfr-portal-tooltip {
  display: inline-flex;
}
.lfr-portal-tooltip,
.lfr-portal-tooltip a {
  -webkit-touch-callout: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

.tree-node .icon-check {
  padding-right: 2px;
}
.tree-node .tree-node-checked .icon-check {
  padding-right: 0;
}
.tree-node [class^=icon-] {
  margin-right: 5px;
}
.tree-node .tree-node-checkbox-container {
  margin-right: 0;
}
.tree-node .tree-node-selected .tree-label {
  background: none;
}

.tree-node-content .tree-hitarea {
  color: #999;
  font-size: 10px;
  padding-right: 6px;
}
.tree-node-content .tree-label {
  margin-left: 3px;
}
.tree-node-content .tree-node-hidden-hitarea {
  visibility: hidden;
}

.tree-node-selected .tree-label {
  background-color: transparent;
}

.tree-view li.tree-node .tree-node-content svg.lexicon-icon {
  pointer-events: none;
}

.user-icon-color-0 {
  background-color: #fff;
  box-shadow: 0 0 0 1px #dee2e6;
  color: #6b6c7e;
}

.user-icon-color-1 {
  background-color: #fff;
  box-shadow: 0 0 0 1px #dee2e6;
  color: #4a97f2;
}

.user-icon-color-2 {
  background-color: #fff;
  box-shadow: 0 0 0 1px #dee2e6;
  color: #e87523;
}

.user-icon-color-3 {
  background-color: #fff;
  box-shadow: 0 0 0 1px #dee2e6;
  color: #fb625b;
}

.user-icon-color-4 {
  background-color: #fff;
  box-shadow: 0 0 0 1px #dee2e6;
  color: #4fa488;
}

.user-icon-color-5 {
  background-color: #fff;
  box-shadow: 0 0 0 1px #dee2e6;
  color: #fe4fb5;
}

.user-icon-color-6 {
  background-color: #fff;
  box-shadow: 0 0 0 1px #dee2e6;
  color: #879b7a;
}

.user-icon-color-7 {
  background-color: #fff;
  box-shadow: 0 0 0 1px #dee2e6;
  color: #af78ff;
}

.user-icon-color-8 {
  background-color: #fff;
  box-shadow: 0 0 0 1px #dee2e6;
  color: #bf8c2a;
}

.user-icon-color-9 {
  background-color: #fff;
  box-shadow: 0 0 0 1px #dee2e6;
  color: #5f9bc7;
}

.collapse.open {
  display: block;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20class='lexicon-icon-outline%20bars-line-top'%20d='M480%2064H32C14.336%2064%200%2049.664%200%2032S14.336%200%2032%200h448c17.664%200%2032%2014.336%2032%2032s-14.336%2032-32%2032z'%20fill='%23212529'/%3E%3Cpath%20class='lexicon-icon-outline%20bars-line-middle'%20d='M480%20288H32c-17.664%200-32-14.336-32-32s14.336-32%2032-32h448c17.664%200%2032%2014.336%2032%2032s-14.336%2032-32%2032z'%20fill='%23212529'/%3E%3Cpath%20class='lexicon-icon-outline%20bars-line-bottom'%20d='M480%20512H32c-17.664%200-32-14.336-32-32s14.336-32%2032-32h448c17.664%200%2032%2014.336%2032%2032s-14.336%2032-32%2032z'%20fill='%23212529'/%3E%3C/svg%3E");
  height: 1em;
  width: 1em;
}

.navbar-nav .nav-item.hover:after {
  bottom: -0.125rem;
  content: "";
  height: 0.125rem;
  left: 0;
  position: absolute;
  width: 100%;
}

.navbar .navbar-toggler .c-inner {
  max-width: none;
}

html:not(#__):not(#___) .cadmin.portlet-topper {
  position: relative;
}
html:not(#__):not(#___) .cadmin.portlet-topper .portlet-topper-toolbar .portlet-icon-back {
  background: url(../images/arrows/12_left.png) no-repeat 0 50%;
  padding: 5px 5px 5px 18px;
}
html:not(#__):not(#___) .cadmin.portlet-topper .portlet-topper-toolbar .portlet-options .lfr-icon-menu-text {
  display: none;
}
html:not(#__):not(#___) .cadmin .component-action.portlet-options {
  color: white;
}

body.portlet {
  border-width: 0;
}

.portlet-icon-back {
  margin-top: -2px;
}
.portlet-topper .portlet-topper-toolbar .portlet-icon-back {
  background: url(../images/arrows/12_left.png) no-repeat 0 50%;
  padding: 5px 5px 5px 18px;
}

.portlet-options-dropdown {
  z-index: 1035;
}

.portlet-topper {
  position: relative;
}
.portlet-topper .portlet-topper-toolbar .portlet-options .lfr-icon-menu-text {
  display: none;
}
.portlet-draggable .portlet-topper {
  cursor: move;
}

.portlet-title-editable {
  cursor: pointer;
}

.portlet-title-text {
  display: inline-block;
  margin-top: 0;
  max-width: 95%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
  white-space: nowrap;
}
.panel-page-body .portlet-title-text, .panel-page-content .portlet-title-text {
  cursor: auto;
}

.portlet-minimized .portlet-content {
  padding: 0;
}

.portlet-nested-portlets .portlet-boundary {
  left: 0 !important;
  position: relative !important;
  top: 0 !important;
}

.portlet-layout .portlet-header {
  margin-bottom: 1rem;
}

@media (min-width: 576px) {
  .portlet .visible-interaction {
    display: none;
  }
}
@media (max-width: 767.98px) {
  .controls-hidden .portlet .visible-interaction {
    display: none;
  }
}
.portlet:hover .visible-interaction, .portlet.open .visible-interaction, .portlet.focus .visible-interaction {
  display: block;
}

.controls-hidden .lfr-meta-actions,
.controls-hidden .lfr-configurator-visibility {
  display: none;
}
.controls-hidden .portlet-topper-toolbar {
  display: none !important;
}

html:not(#__):not(#___) .cadmin.portlet-topper {
  background-color: #f7f7f7;
  border-color: transparent;
  border-radius: 0 0;
  border-style: solid;
  border-width: 1px 1px 1px 1px;
  color: rgba(0, 0, 0, 0.5);
  display: box;
  display: flex;
  padding: 3px 12px 3px 24px;
  position: relative;
}
html:not(#__):not(#___) .portlet > .cadmin.portlet-topper {
  display: none;
}
@media (min-width: 768px) {
  html:not(#__):not(#___) .portlet > .cadmin.portlet-topper {
    display: flex;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    transition: opacity 0.25s, transform 0.25s;
    top: 0;
  }
}
@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
  html:not(#__):not(#___) .portlet > .cadmin.portlet-topper {
    transition: none;
  }
}
html:not(#__):not(#___) .cadmin .portlet-actions {
  float: right;
}
html:not(#__):not(#___) .cadmin .portlet-options {
  display: inline-block;
}
html:not(#__):not(#___) .cadmin .portlet-title-menu {
  flex: 0 1 auto;
}
html:not(#__):not(#___) .cadmin .portlet-title-menu > span > a {
  display: inline-block;
  text-decoration: none;
}
html:not(#__):not(#___) .cadmin .portlet-topper-toolbar {
  margin: 0;
  padding-left: 0;
}
html:not(#__):not(#___) .cadmin .portlet-topper-toolbar > a,
html:not(#__):not(#___) .cadmin .portlet-topper-toolbar > span > a,
html:not(#__):not(#___) .cadmin .portlet-topper-toolbar .lfr-icon-menu > a {
  color: rgba(0, 0, 0, 0.5);
}
html:not(#__):not(#___) .cadmin .portlet-topper-toolbar > a:focus, html:not(#__):not(#___) .cadmin .portlet-topper-toolbar > a:hover {
  text-decoration: none;
}
html:not(#__):not(#___) .cadmin .portlet-name-text {
  font-size: 14px;
  font-weight: 600;
}
html:not(#__):not(#___) .cadmin .portlet-title-default {
  flex: 1 1 auto;
  line-height: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (min-width: 576px) {
  html:not(#__):not(#___) .lfr-configurator-visibility .portlet:hover .portlet-topper, html:not(#__):not(#___) .lfr-configurator-visibility .portlet.focus .portlet-topper, html:not(#__):not(#___) .lfr-configurator-visibility .portlet.open .portlet-topper {
    opacity: 0.5;
  }
}
@media (min-width: 768px) {
  html:not(#__):not(#___) .controls-visible .portlet:hover > .portlet-content-editable, html:not(#__):not(#___) .controls-visible .portlet.open > .portlet-content-editable, html:not(#__):not(#___) .controls-visible .portlet.focus > .portlet-content-editable {
    border-color: transparent;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}
@media (min-width: 768px) {
  html:not(#__):not(#___) .controls-visible .portlet:hover > .cadmin.portlet-topper, html:not(#__):not(#___) .controls-visible .portlet.open > .cadmin.portlet-topper, html:not(#__):not(#___) .controls-visible .portlet.focus > .cadmin.portlet-topper {
    opacity: 1;
    transform: translateY(-97%);
  }
}
@media (min-width: 768px) {
  html:not(#__):not(#___) .controls-visible .portlet.open > .cadmin.portlet-topper {
    transition-duration: 0ms;
  }
}
@media (max-width: 767.98px) {
  html:not(#__):not(#___) .controls-visible .cadmin.portlet-topper {
    display: box;
    display: flex;
  }
}
html:not(#__):not(#___) .controls-visible .cadmin .portlet-topper-toolbar {
  display: block;
}

.portlet {
  margin-bottom: 10px;
  position: relative;
}
@media (min-width: 768px) {
  .controls-visible .portlet:hover > .portlet-content-editable, .controls-visible .portlet.open > .portlet-content-editable, .controls-visible .portlet.focus > .portlet-content-editable {
    border-color: transparent;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}
@media (min-width: 768px) {
  .controls-visible .portlet:hover > .portlet-topper, .controls-visible .portlet.open > .portlet-topper, .controls-visible .portlet.focus > .portlet-topper {
    opacity: 1;
    transform: translateY(-97%);
  }
}
@media (min-width: 576px) {
  .lfr-configurator-visibility .portlet:hover .portlet-topper, .lfr-configurator-visibility .portlet.focus .portlet-topper, .lfr-configurator-visibility .portlet.open .portlet-topper {
    opacity: 0.5;
  }
}

.portlet-content-editable {
  border-color: transparent;
  border-radius: 0 0;
  border-style: solid;
  border-width: 1px 1px 1px 1px;
}
.portlet > .portlet-content-editable {
  border-color: transparent;
}
@media (max-width: 767.98px) {
  .controls-visible .portlet-content-editable {
    border-color: transparent;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}

.portlet-name-text {
  font-size: 0.875rem;
  font-weight: 600;
}

.portlet-options {
  display: inline-block;
}

.portlet-title-default {
  flex: 1 1 auto;
  line-height: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portlet-title-menu {
  flex: 0 1 auto;
}
.portlet-title-menu > span > a {
  display: inline-block;
  text-decoration: none;
}

.portlet-topper {
  background-color: #f7f7f7;
  border-color: transparent;
  border-radius: 0 0;
  border-style: solid;
  border-width: 1px 1px 1px 1px;
  color: rgba(0, 0, 0, 0.5);
  display: box;
  display: flex;
  padding: 3px 12px 3px 24px;
  position: relative;
}
.portlet > .portlet-topper {
  display: none;
}
@media (min-width: 768px) {
  .portlet > .portlet-topper {
    display: flex;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    transition: opacity 0.25s, transform 0.25s;
    top: 0;
  }
}
@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
  .portlet > .portlet-topper {
    transition: none;
  }
}
@media (max-width: 767.98px) {
  .controls-visible .portlet-topper {
    display: box;
    display: flex;
  }
}

.portlet-topper-toolbar {
  margin: 0;
  padding-left: 0;
}
.portlet-topper-toolbar > a,
.portlet-topper-toolbar > span > a,
.portlet-topper-toolbar .lfr-icon-menu > a {
  color: rgba(0, 0, 0, 0.5);
}
.portlet-topper-toolbar > a:focus, .portlet-topper-toolbar > a:hover {
  text-decoration: none;
}
.controls-visible .portlet-topper-toolbar {
  display: block;
}

.lfr-panel-page .portlet-title {
  font-size: 13px;
}

.portlet-borderless .portlet-content {
  padding: 1rem;
}
.portlet-decorate .portlet-content {
  background: #fff;
  border-color: transparent;
  border-style: solid;
  border-width: 1px 1px 1px 1px;
  padding: 1rem;
  word-wrap: break-word;
}
.portlet-barebone .portlet-content {
  padding: 0;
}

.portlet-dynamic-data-lists-display .lfr-ddm-field-group,
.portlet-dynamic-data-lists .lfr-ddm-field-group {
  margin-bottom: 10px;
  margin-top: 10px;
  padding: 28px 24px;
}

.breadcrumb.breadcrumb-vertical {
  display: inline-block;
  text-align: center;
}
.breadcrumb.breadcrumb-vertical li {
  display: block;
}
.breadcrumb.breadcrumb-vertical li.last, .breadcrumb.breadcrumb-vertical li.only {
  background: none;
}
.breadcrumb.breadcrumb-vertical .divider {
  background: url(../images/arrows/07_down.png) no-repeat 50% 100%;
  display: block;
  height: 10px;
  overflow: hidden;
  text-indent: 101%;
  white-space: nowrap;
}

.navbar form {
  margin: 0;
}

:not(.inline-item) > .loading-animation {
  margin-bottom: 20px;
  margin-top: 20px;
}
.product-menu .loading-animation {
  margin-top: 160px;
}

@keyframes lfr-drop-active {
  0% {
    background-color: #ebebeb;
    border-color: #ddd;
  }
  50% {
    background-color: #ddedde;
    border-color: #7d7;
    transform: scale(1.1);
  }
  75% {
    background-color: #ddedde;
    border-color: #7d7;
  }
  100% {
    background-color: #ebebeb;
    border-color: #ddd;
  }
}
.lfr-upload-container .progress-bar,
.lfr-upload-container .progress {
  border-radius: 10px;
}
.lfr-upload-container .upload-file,
.lfr-upload-container .upload-target {
  border-radius: 5px;
}
.upload-drop-active .lfr-upload-container .upload-target {
  animation: none;
}
.upload-drop-intent .lfr-upload-container .upload-target {
  animation: lfr-drop-active 1s ease 0.2s infinite;
}

.select-files {
  border-radius: 5px;
}

.taglib-form-navigator > .form-steps > ul.form-navigator.list-group {
  box-shadow: none;
}
.taglib-form-navigator > .form-steps > ul.form-navigator.list-group .tab .tab-label:hover .number, .taglib-form-navigator > .form-steps > ul.form-navigator.list-group .tab .tab-label:focus .number {
  box-shadow: 0 0 5px 0 #333;
  transition-duration: 0.25s;
  transition-property: box-shadow;
  transition-timing-function: ease-out;
}
.taglib-form-navigator > .form-steps > ul.form-navigator.list-group .tab .tab-label .number {
  border-radius: 50%;
}

@keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}
.lfr-progress-active .progress-bar-status,
.lfr-upload-container .file-uploading .progress-bar .progress {
  animation: progress-bar-stripes 0.5s linear infinite;
  background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.3) 25%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 75%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0));
  background-size: 40px 40px;
  transition: width, 0.5s, ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .lfr-progress-active .progress-bar-status,
  .lfr-upload-container .file-uploading .progress-bar .progress {
    transition: none;
  }
}

@keyframes highlight-animation {
  from {
    background-color: #ffc;
  }
  to {
    background-color: transparent;
  }
}
.highlight-animation {
  animation: highlight-animation 0.7s;
}

.portlet-options.btn-group .dropdown-toggle, .portlet-options.btn-group.open .dropdown-toggle {
  box-shadow: none;
}

.form-group.form-inline.input-boolean-wrapper label, .form-group.form-inline.input-checkbox-wrapper label {
  gap: 0.3125rem;
}

/* These inject tags are used for dynamically creating imports for themelet styles, you can place them where ever you like in this file. */
/* inject:imports */
/* =============================================================================
 * HPE Custom Select — Dropdown Styling (matches listView.jsp design)
 * =============================================================================
 * Scope: Applied to .hpe-select wrappers created by hpe-select-init.js
 *
 * These styles are generic and work regardless of which container the select
 * lives in. The JS controls WHERE it's applied (Settings page only for now).
 * ========================================================================== */
/* --- Native select hidden (visually, but stays in DOM for form submission) --- */
.hpe-select__native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

/* --- Wrapper --- */
.hpe-select {
  position: relative;
  display: block;
  width: 100%;
  min-width: 175px;
}

/* --- Control (the clickable button that replaces the native select visually) --- */
.hpe-select .hpe-select__control {
  width: 100%;
  min-height: 36px;
  height: 36px !important;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  border-radius: 8px;
  border: 1px solid #B1B9BE;
  background: transparent;
  font-family: "HPE Graphik", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  color: #3E4550;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  text-align: left;
}

.hpe-select .hpe-select__control:hover {
  border-color: #7A8288;
}

.hpe-select .hpe-select__control[aria-expanded=true],
.hpe-select .hpe-select__control:focus-visible {
  outline: var(--hpe-focusIndicator-outline);
  outline-offset: var(--hpe-focusIndicator-outlineOffset);
  box-sizing: border-box;
}

/* --- Value text --- */
.hpe-select .hpe-select__value {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Placeholder text in the closed control ------------------------------- *
 * Shown while nothing has been picked yet. The label itself comes from the
 * select's own prompt option, so it stays translated; only the colour is
 * softened here so it reads as a hint rather than a real value.              */
.hpe-select .hpe-select__value.hpe-select__value--placeholder {
  color: #7A8288;
  font-weight: 400 !important;
}

/* --- Arrow icon --- */
.hpe-select .hpe-select__arrow {
  display: inline-flex;
  pointer-events: none;
  transition: transform 0.15s ease;
}

.hpe-select .hpe-select__control[aria-expanded=true] .hpe-select__arrow {
  transform: rotate(180deg);
}

/* --- Dropdown menu --- */
.hpe-select .hpe-select__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
  z-index: 100;
  background: #FFFFFF;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

/* Only the options scroll, so the bar never runs alongside the search field.
   A scrollbar paints at the padding-box edge, so the transparent right border
   is what keeps it clear of the card's rounded corner. */
.hpe-select .hpe-select__list {
  margin: 0;
  padding: 4px 0;
  list-style: none;
  max-height: 240px;
  overflow-y: auto;
  box-sizing: border-box;
  border-right: 6px solid transparent;
}

/* The bar keeps its native appearance; only its position moves. */
/* Hand-written markup (listView.jsp, grid_view_ajax.jsp, support_popup.ftl)
   still uses a single scrolling <ul class="hpe-select__menu"> with the options
   as direct children, so it keeps the cap on the card itself. */
.hpe-select ul.hpe-select__menu {
  padding: 4px 0;
  max-height: 240px;
  overflow-y: auto;
  border-right: 6px solid transparent;
}

.hpe-select .hpe-select__menu[hidden] {
  display: none !important;
}

/* --- Keep the open menu above the fields that follow it ------------------- *
 * `.hpe-select__menu` is `position: absolute; z-index: 100`, and that 100 only
 * ever competes INSIDE the nearest positioned ancestor's stacking context.
 * Several form layouts give that ancestor a z-index of its own. The clearest
 * case is the validation state in _opr_ui.scss:
 *
 *     .opt-personal .settings-container .form-group.input-select-wrapper.field-error,
 *     .opt-personal .multiobj .form-group.input-select-wrapper.field-error {
 *         position: relative;
 *         z-index: 1;
 *     }
 *
 * which is added to EVERY empty required field the moment Save is pressed.
 * `position: relative` + a numeric `z-index` makes each field-group its own
 * stacking context, so the menu's 100 is now trapped inside its group and can
 * no longer out-stack anything outside it. Every group is at the same z-index
 * 1, so painting falls back to DOM order and the NEXT field draws on top of
 * the open list - e.g. on Personal details the "Primary job function" label
 * and control cut straight across the open "Job function" dropdown.
 *
 * Raising the group only while its own dropdown is expanded fixes the overlap
 * and leaves the closed-state layering untouched. The hook is `aria-expanded`
 * on the control rather than `[hidden]` on the menu because it sits outside
 * the element being stacked and both implementations keep it in sync: the
 * generic hpe-select-init.js and the hand-built multiselect in
 * opr-personal-details-web/setting-view.jsp.
 *
 * `!important` is needed because the rules being overridden are up to five
 * classes deep, and some of them live in page-level <style> blocks that are
 * parsed after this stylesheet.
 * ------------------------------------------------------------------------- */
.form-group:has(.hpe-select__control[aria-expanded=true]) {
  z-index: 1000 !important;
}

/* --- Search field: a fixed header above the scrolling list ---------------- *
 * Built by hpe-select-init.js for dropdowns long enough to need filtering
 * (see SEARCH_MIN_OPTIONS there), and by support-popup.js for the hand-written
 * `.hpe-select__menu` markup in listView.jsp / grid_view_ajax.jsp /
 * support_popup.ftl. In the generated markup it is a sibling of
 * `.hpe-select__list`, so it never scrolls; `position: sticky` is kept for the
 * hand-written variants where it is still an <li> inside the list.
 *
 * The 6px top/side padding is not decorative: the focus ring below is drawn on
 * `.hpe-select__search-box` with a 2px outline at a 2px offset, so it needs 4px
 * of clearance on every side.                                                 */
.hpe-select .hpe-select__search {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0;
  padding: 6px 6px 8px;
  background: #FFFFFF;
  list-style: none;
}

/* A little more room for the list once the search field eats ~48px. */
.hpe-select .hpe-select__menu:has(.hpe-select__search) .hpe-select__list {
  max-height: 320px;
  padding-top: 0;
}

.hpe-select ul.hpe-select__menu:has(.hpe-select__search) {
  max-height: 320px;
  padding-top: 0;
}

.hpe-select .hpe-select__search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid #B1B9BE;
  background: #FFFFFF;
}

.hpe-select .hpe-select__search-box svg {
  flex: 0 0 auto;
  display: block;
}

/* Focus ring belongs on the WRAPPER, not on the input.
 *
 * Same situation as the EPI / OPT search boxes in _opr_ui.scss: what the user
 * reads as "the field" is `.hpe-select__search-box` — it owns the 1px #B1B9BE
 * border and the 8px radius. The <input> inside is deliberately `border: 0`,
 * so the global `input:focus-visible` ring from _hpe-foundation.scss (and the
 * stronger `.settings-container input:focus-visible`) was being painted around
 * an invisible box that sits inside the visible one, giving the doubled
 * rectangle. Anchoring the ring to the wrapper makes it hug the field and
 * enclose the magnifier icon too.
 *
 * It also makes the ring immune to layout changes inside the box: the input is
 * a shrinking flex item, so anything added beside it would otherwise narrow the
 * input and drag its outline inward, stranding the icon outside the ring.
 *
 * Values are copied from `.settings-container input:focus-visible` so this is
 * pixel-identical to the phone number / Personal Details fields, and the
 * outline inherits the wrapper's 8px radius so it renders rounded. */
.hpe-select .hpe-select__search-box:focus-within {
  outline: solid 2px #292d30;
  outline-offset: 2px;
  box-sizing: border-box;
}

/* Restrict the ring to keyboard focus, matching the rest of the portal's use of
 * :focus-visible. Browsers without :has() drop this rule as invalid and simply
 * keep the :focus-within ring above, so the field is never left with no
 * indicator at all.
 * NOTE: a focused text field matches :focus-visible in every engine regardless
 * of how focus arrived, so the ring still shows when hpe-select-init.js focuses
 * this input on open() — which is what we want, it is the focus target. */
.hpe-select .hpe-select__search-box:focus-within:not(:has(input:focus-visible)) {
  outline: none;
}

.hpe-select .hpe-select__search-input {
  flex: 1 1 auto;
  /* min-width:0 stops the flex item from refusing to shrink below its
     intrinsic input width, which would push the magnifier out of the box. */
  min-width: 0;
  width: 100%;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  box-shadow: none;
  font-family: "HPE Graphik", Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #3E4550;
}

.hpe-select .hpe-select__search-input::placeholder {
  color: #7A8288;
  opacity: 1; /* Firefox dims placeholders by default */
}

/* Suppress the inner ring so the two do not stack — this is the rectangle that
 * was showing tight around the text, inside the visible field. Specificity
 * (0,3,1) beats `.settings-container input:focus-visible` (0,2,1). */
.hpe-select .hpe-select__search-input:focus,
.hpe-select .hpe-select__search-input:focus-visible {
  outline: none;
  box-shadow: none;
}

/* Kill the browsers' own "clear field" affordances — the menu closing resets
   the query, so a second X inside the box is redundant and off-brand. */
.hpe-select .hpe-select__search-input::-ms-clear,
.hpe-select .hpe-select__search-input::-webkit-search-cancel-button {
  display: none;
}

/* --- No result state ------------------------------------------------------ */
.hpe-select .hpe-select__empty {
  margin: 2px 6px;
  padding: 8px 12px;
  font-family: "HPE Graphik", Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #7A8288;
  cursor: default;
}

.hpe-select .hpe-select__empty[hidden] {
  display: none;
}

/* --- Options --- */
.hpe-select .hpe-select__option {
  position: relative;
  margin: 2px 6px;
  padding: 8px 12px;
  border-radius: 6px;
  font-family: "HPE Graphik", Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: #444444;
  cursor: pointer;
  margin-bottom: 5px;
}

/* --- Last option: drop the 5px gap back to 2px ---------------------------- *
 * The 5px bottom margin is spacing BETWEEN options, so the final one would
 * otherwise add a stray 5px on top of the menu's own 4px vertical padding.   */
.hpe-select .hpe-select__option:last-child {
  margin-bottom: 2px;
}

/* Options can be individually hidden (`.hpe-select__option--hidden` is added by
 * hpe-select-init.js for conditional entries such as the "San" salutation, and
 * `--filtered` while a search query is narrowing the list). If one of those is
 * the true :last-child, the last VISIBLE option would keep the 5px. This
 * targets "a visible option with no visible option after it".
 * Progressive enhancement — without :has() the rule above still handles the
 * common case where nothing trailing is hidden. */
.hpe-select .hpe-select__option:not(.hpe-select__option--hidden):not(.hpe-select__option--placeholder):not(.hpe-select__option--filtered):not(:has(~ .hpe-select__option:not(.hpe-select__option--hidden):not(.hpe-select__option--placeholder):not(.hpe-select__option--filtered))) {
  margin-bottom: 2px;
}

.hpe-select .hpe-select__option:hover {
  background: #F7F7F7;
}

/* --- Selected option --- */
.hpe-select .hpe-select__option[aria-selected=true] {
  background: #D1FFEE;
  color: #292D3A;
  font-weight: 600;
}

.hpe-select .hpe-select__option[aria-selected=true]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 100%;
  background: #1D6750;
  border-radius: 6px 0 0 6px;
}

.hpe-select .hpe-select__option[aria-selected=true]:hover {
  background: rgb(170, 250, 222);
}

/* --- Hidden option (e.g. conditional salutation "San") --- */
.hpe-select .hpe-select__option.hpe-select__option--hidden {
  display: none;
}

/* --- Filtered out by the search query ------------------------------------- *
 * Deliberately a separate class from --hidden / --placeholder: those two mean
 * "never offer this entry", so the filter must never be able to bring them
 * back by clearing a shared class.                                            */
.hpe-select .hpe-select__option.hpe-select__option--filtered {
  display: none;
}

/* --- Prompt option ("Select", "Select One", "Select country", ...) -------- *
 * Never offered as a choice in the list — it is not a real value, it is the
 * empty state. hpe-select-init.js adds this class to option[0] purely on the
 * strength of its VALUE (empty / '-' / '.'), never its label, so it behaves the
 * same in every locale. Selects that need to keep such an entry as a real
 * "reset" choice (the PPA country / relationship filters) opt out in their
 * markup with data-hpe-keep-first. */
.hpe-select .hpe-select__option.hpe-select__option--placeholder {
  display: none;
}

/* --- Disabled state --- */
.hpe-select.hpe-select--disabled .hpe-select__control {
  opacity: 0.6;
  pointer-events: none;
  background: #F4F4F4;
  cursor: not-allowed;
}

/* =============================================================================
 * EXCLUDE: DataTables "Items per page" dropdowns
 * These are styled by module-level CSS (companyContacts.jsp, tasks.jsp, etc.)
 * The theme-level generic styles above must NOT apply inside .dataTables_length.
 * ========================================================================== */
.dataTables_length .hpe-select .hpe-select__menu, .items-per-page .hpe-select .hpe-select__menu {
  top: unset;
}

/* HPE Graphik @font-face declarations live in _fonts.scss (imported below).
   GraphikXXCondensed remains here. */
@font-face {
  font-family: "GraphikXXCondensed";
  src: url("../fonts/HPEGraphikXXCondensed-Regular-Web.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "GraphikXXCondensed";
  src: url("../fonts/HPEGraphikXXCondensed-Extralight-Web.woff2") format("woff2");
  font-weight: 100;
  font-display: swap;
}
@font-face {
  font-family: "GraphikXXCondensed";
  src: url("../fonts/HPEGraphikXXCondensed-Medium-Web.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "GraphikXXCondensed";
  src: url("../fonts/HPEGraphikXXCondensed-Semibold-Web.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "GraphikXXCondensed";
  src: url("../fonts/HPEGraphikXXCondensed-Bold-Web.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
/* =============================================================================
   HPE DESIGN SYSTEM — DESIGN TOKENS (theme foundation)
   Source of truth: hpe-design-tokens@2.2.3
   https://design-system.hpe.design/design-tokens/all-design-tokens
   These CSS custom properties expose the official HPE tokens to the whole
   portal. Foundation wiring (typography/color/focus/etc.) lives at the bottom.
   Auto-generated values copied verbatim from the HPE token package.
   ============================================================================= */
:root {
  /* ---------- Primitive palette ---------- */
  --hpe-base-color-black-opacity100: #000000;
  --hpe-base-color-black-opacity12: rgba(0, 0, 0, 0.12);
  --hpe-base-color-black-opacity24: rgba(0, 0, 0, 0.24);
  --hpe-base-color-black-opacity36: rgba(0, 0, 0, 0.36);
  --hpe-base-color-black-opacity4: rgba(0, 0, 0, 0.04);
  --hpe-base-color-black-opacity48: rgba(0, 0, 0, 0.48);
  --hpe-base-color-black-opacity50: rgba(0, 0, 0, 0.5);
  --hpe-base-color-black-opacity72: rgba(0, 0, 0, 0.72);
  --hpe-base-color-black-opacity8: rgba(0, 0, 0, 0.08);
  --hpe-base-color-blue-50: #e3f1ff;
  --hpe-base-color-blue-200: #65aef9;
  --hpe-base-color-blue-300: #3994f7;
  --hpe-base-color-blue-500: #0070f8;
  --hpe-base-color-blue-700: #0055da;
  --hpe-base-color-blue-900: #003cae;
  --hpe-base-color-blue-1100: #2b3547;
  --hpe-base-color-coral-100: #fc988b;
  --hpe-base-color-coral-200: #e5786a;
  --hpe-base-color-coral-300: #d25f4b;
  --hpe-base-color-coral-400: #c64f3a;
  --hpe-base-color-coral-500: #b4422a;
  --hpe-base-color-cyan-100: #99f0f9;
  --hpe-base-color-cyan-200: #62e5f6;
  --hpe-base-color-cyan-300: #00dbe4;
  --hpe-base-color-cyan-400: #00a4b3;
  --hpe-base-color-cyan-500: #04909d;
  --hpe-base-color-fuschia-100: #fc9ddc;
  --hpe-base-color-fuschia-200: #db72b8;
  --hpe-base-color-fuschia-300: #cc54a4;
  --hpe-base-color-fuschia-700: #ad4089;
  --hpe-base-color-fuschia-900: #7f245c;
  --hpe-base-color-gold-100: #f9cc61;
  --hpe-base-color-gold-200: #ecbe4f;
  --hpe-base-color-gold-300: #deb146;
  --hpe-base-color-gold-400: #c89e3a;
  --hpe-base-color-gold-500: #b38a29;
  --hpe-base-color-gold-550: #b0840d;
  --hpe-base-color-green-100: #d1ffee;
  --hpe-base-color-green-125: #aafade;
  --hpe-base-color-green-400: #00e0af;
  --hpe-base-color-green-450: #66ebcf;
  --hpe-base-color-green-500: #00e0af;
  --hpe-base-color-green-550: #05cc93;
  --hpe-base-color-green-600: #01a982; /* HPE Brand */
  --hpe-base-color-green-650: #009a71;
  --hpe-base-color-green-700: #068667;
  --hpe-base-color-green-800: #006750;
  --hpe-base-color-green-900: #074738;
  --hpe-base-color-green-1000: #093d32;
  --hpe-base-color-grey-50: #f7f7f7;
  --hpe-base-color-grey-200: #e6e8e9;
  --hpe-base-color-grey-400: #d4d8db;
  --hpe-base-color-grey-500: #b1b9be;
  --hpe-base-color-grey-600: #7d8a92;
  --hpe-base-color-grey-650: #606a70;
  --hpe-base-color-grey-700: #535c66;
  --hpe-base-color-grey-800: #3e4550;
  --hpe-base-color-grey-1000: #292d3a;
  --hpe-base-color-grey-1200: #22252e;
  --hpe-base-color-grey-1300: #1d1f27;
  --hpe-base-color-orange-50: #fff3dd;
  --hpe-base-color-orange-500: #ec8c25;
  --hpe-base-color-orange-600: #d36d00;
  --hpe-base-color-orange-1000: #3c361e;
  --hpe-base-color-plum-100: #c98ad4;
  --hpe-base-color-plum-200: #a455b3;
  --hpe-base-color-plum-600: #873492;
  --hpe-base-color-plum-700: #6c2b7c;
  --hpe-base-color-plum-900: #5e1f68;
  --hpe-base-color-purple-100: #b7a2fc;
  --hpe-base-color-purple-200: #9b84fc;
  --hpe-base-color-purple-400: #7764fc;
  --hpe-base-color-purple-700: #5d45d6;
  --hpe-base-color-purple-900: #3c3aa1;
  --hpe-base-color-red-50: #ffecec;
  --hpe-base-color-red-400: #ff7b7b;
  --hpe-base-color-red-500: #fc6161;
  --hpe-base-color-red-600: #ec3331;
  --hpe-base-color-red-800: #cc1f1a;
  --hpe-base-color-red-1000: #552120;
  --hpe-base-color-white-100: #ffffff;
  --hpe-base-color-white-opacity10: rgba(255, 255, 255, 0.1);
  --hpe-base-color-white-opacity12: rgba(255, 255, 255, 0.12);
  --hpe-base-color-white-opacity20: rgba(255, 255, 255, 0.2);
  --hpe-base-color-white-opacity24: rgba(255, 255, 255, 0.24);
  --hpe-base-color-white-opacity36: rgba(255, 255, 255, 0.36);
  --hpe-base-color-white-opacity50: rgba(255, 255, 255, 0.5);
  --hpe-base-color-white-opacity6: rgba(255, 255, 255, 0.06);
  --hpe-base-color-white-opacity7: rgba(255, 255, 255, 0.07);
  --hpe-base-color-white-opacity72: rgba(255, 255, 255, 0.72);
  /* ---------- Dimension scale ---------- */
  --hpe-base-dimension-0: 0px;
  --hpe-base-dimension-25: 1px;
  --hpe-base-dimension-50: 2px;
  --hpe-base-dimension-75: 3px;
  --hpe-base-dimension-100: 4px;
  --hpe-base-dimension-150: 6px;
  --hpe-base-dimension-200: 8px;
  --hpe-base-dimension-225: 9px;
  --hpe-base-dimension-250: 10px;
  --hpe-base-dimension-300: 12px;
  --hpe-base-dimension-350: 14px;
  --hpe-base-dimension-400: 16px;
  --hpe-base-dimension-450: 18px;
  --hpe-base-dimension-475: 19px;
  --hpe-base-dimension-500: 20px;
  --hpe-base-dimension-550: 22px;
  --hpe-base-dimension-600: 24px;
  --hpe-base-dimension-700: 28px;
  --hpe-base-dimension-800: 32px;
  --hpe-base-dimension-900: 36px;
  --hpe-base-dimension-1200: 48px;
  --hpe-base-dimension-1600: 64px;
  --hpe-base-dimension-1800: 72px;
  --hpe-base-dimension-2400: 96px;
  --hpe-base-dimension-3200: 128px;
  /* ---------- Typography primitives ---------- */
  --hpe-base-fontFamily-code: Fira Mono;
  --hpe-base-fontFamily-primary: HPE Graphik;
  --hpe-base-fontSize-80: 0.75rem;
  --hpe-base-fontSize-90: 0.875rem;
  --hpe-base-fontSize-100: 1rem;
  --hpe-base-fontSize-200: 1.125rem;
  --hpe-base-fontSize-300: 1.25rem;
  --hpe-base-fontSize-400: 1.375rem;
  --hpe-base-fontSize-500: 1.5rem;
  --hpe-base-fontSize-600: 2.25rem;
  --hpe-base-fontSize-700: 2.625rem;
  --hpe-base-fontSize-800: 3rem;
  --hpe-base-fontSize-900: 4.5rem;
  --hpe-base-lineHeight-80: 0.75rem;
  --hpe-base-lineHeight-90: 1rem;
  --hpe-base-lineHeight-100: 1.25rem;
  --hpe-base-lineHeight-200: 1.5rem;
  --hpe-base-lineHeight-300: 1.75rem;
  --hpe-base-lineHeight-400: 1.875rem;
  --hpe-base-lineHeight-500: 2.25rem;
  --hpe-base-lineHeight-600: 2.5rem;
  --hpe-base-lineHeight-700: 2.875rem;
  --hpe-base-lineHeight-800: 3rem;
  --hpe-base-lineHeight-900: 4.5rem;
  /* ---------- Radius ---------- */
  --hpe-static-radius-none: var(--hpe-base-dimension-0);
  --hpe-static-radius-hair: var(--hpe-base-dimension-25);
  --hpe-static-radius-xxsmall: var(--hpe-base-dimension-100);
  --hpe-static-radius-xsmall: var(--hpe-base-dimension-150);
  --hpe-static-radius-small: var(--hpe-base-dimension-200);
  --hpe-static-radius-medium: var(--hpe-base-dimension-300);
  --hpe-static-radius-large: var(--hpe-base-dimension-400);
  --hpe-static-radius-xlarge: var(--hpe-base-dimension-600);
  --hpe-static-radius-xxlarge: var(--hpe-base-dimension-800);
  --hpe-static-radius-full: 9999px;
  /* ---------- Border width ---------- */
  --hpe-static-borderWidth-none: var(--hpe-base-dimension-0);
  --hpe-static-borderWidth-xsmall: var(--hpe-base-dimension-25);
  --hpe-static-borderWidth-small: var(--hpe-base-dimension-50);
  --hpe-static-borderWidth-default: var(--hpe-base-dimension-25);
  --hpe-static-borderWidth-medium: var(--hpe-base-dimension-100);
  --hpe-static-borderWidth-large: var(--hpe-base-dimension-150);
  /* ---------- Spacing ---------- */
  --hpe-static-spacing-none: var(--hpe-base-dimension-0);
  --hpe-static-spacing-hair: var(--hpe-base-dimension-25);
  --hpe-static-spacing-6xsmall: var(--hpe-base-dimension-50);
  --hpe-static-spacing-5xsmall: var(--hpe-base-dimension-75);
  --hpe-static-spacing-4xsmall: var(--hpe-base-dimension-100);
  --hpe-static-spacing-3xsmall: var(--hpe-base-dimension-150);
  --hpe-static-spacing-xxsmall: var(--hpe-base-dimension-200);
  --hpe-static-spacing-xsmall: var(--hpe-base-dimension-300);
  --hpe-static-spacing-small: var(--hpe-base-dimension-400);
  --hpe-static-spacing-medium: var(--hpe-base-dimension-600);
  --hpe-static-spacing-large: var(--hpe-base-dimension-800);
  --hpe-static-spacing-xlarge: var(--hpe-base-dimension-1200);
  --hpe-static-spacing-xxlarge: var(--hpe-base-dimension-1600);
  --hpe-static-spacing-3xlarge: var(--hpe-base-dimension-2400);
  --hpe-static-spacing-4xlarge: var(--hpe-base-dimension-3200);
  /* ---------- Global ---------- */
  --hpe-breakpoint-xsmall: 576px;
  --hpe-breakpoint-small: 768px;
  --hpe-breakpoint-medium: 1080px;
  --hpe-breakpoint-large: 1440px;
  --hpe-fontStack-primary: "HPE Graphik", Arial, sans-serif;
  --hpe-fontWeight-thin: 100;
  --hpe-fontWeight-light: 300;
  --hpe-fontWeight-regular: 400;
  --hpe-fontWeight-medium: 500;
  --hpe-fontWeight-semibold: 600;
  --hpe-fontWeight-bold: 700;
  --hpe-fontWeight-black: 900;
  --hpe-focusIndicator-outlineOffset: 2px;
  /* ---------- Semantic colors (light mode) ---------- */
  --hpe-color-transparent: rgba(0, 0, 0, 0);
  --hpe-color-background-back: var(--hpe-base-color-grey-50);
  --hpe-color-background-default: var(--hpe-base-color-white-100);
  --hpe-color-background-front: var(--hpe-base-color-white-100);
  --hpe-color-background-floating: var(--hpe-base-color-white-100);
  --hpe-color-background-contrast: var(--hpe-base-color-black-opacity4);
  --hpe-color-background-contrast-hover: var(--hpe-base-color-black-opacity8);
  --hpe-color-background-critical: var(--hpe-base-color-red-50);
  --hpe-color-background-disabled: var(--hpe-base-color-black-opacity4);
  --hpe-color-background-info: var(--hpe-base-color-blue-50);
  --hpe-color-background-neutral-xstrong: var(--hpe-base-color-grey-1000);
  --hpe-color-background-neutral-xstrong-hover: var(--hpe-base-color-grey-800);
  --hpe-color-background-ok: var(--hpe-base-color-green-100);
  --hpe-color-background-primary-strong: var(--hpe-base-color-green-700);
  --hpe-color-background-primary-strong-hover: var(--hpe-base-color-green-800);
  --hpe-color-background-primary-xstrong: var(--hpe-base-color-green-1000);
  --hpe-color-background-screenOverlay: var(--hpe-base-color-black-opacity12);
  --hpe-color-background-selected-primary: var(--hpe-base-color-green-100);
  --hpe-color-background-warning: var(--hpe-base-color-orange-50);
  --hpe-color-border-critical: var(--hpe-base-color-red-800);
  --hpe-color-border-default: var(--hpe-base-color-grey-500);
  --hpe-color-border-disabled: var(--hpe-base-color-black-opacity12);
  --hpe-color-border-strong: var(--hpe-base-color-grey-800);
  --hpe-color-border-weak: var(--hpe-base-color-grey-400);
  --hpe-color-decorative-brand: var(--hpe-base-color-green-600);
  --hpe-color-decorative-green: var(--hpe-base-color-green-550);
  --hpe-color-decorative-neutral: var(--hpe-base-color-grey-600);
  --hpe-color-focus: var(--hpe-base-color-grey-1000);
  --hpe-color-focus-support: var(--hpe-base-color-white-100);
  --hpe-color-foreground-critical: var(--hpe-base-color-red-600);
  --hpe-color-foreground-ok: var(--hpe-base-color-green-650);
  --hpe-color-foreground-primary: var(--hpe-base-color-green-800);
  --hpe-color-foreground-warning: var(--hpe-base-color-orange-600);
  --hpe-color-icon-critical: var(--hpe-base-color-red-800);
  --hpe-color-icon-info: var(--hpe-base-color-blue-700);
  --hpe-color-icon-ok: var(--hpe-base-color-green-650);
  --hpe-color-icon-onPrimaryStrong: var(--hpe-base-color-white-100);
  --hpe-color-icon-primary: var(--hpe-base-color-green-800);
  --hpe-color-icon-warning: var(--hpe-base-color-orange-600);
  --hpe-color-text-critical: var(--hpe-base-color-red-800);
  --hpe-color-text-default: var(--hpe-base-color-grey-800);
  --hpe-color-text-disabled: var(--hpe-base-color-black-opacity24);
  --hpe-color-text-onPrimaryStrong: var(--hpe-base-color-white-100);
  --hpe-color-text-onStrong: var(--hpe-base-color-white-100);
  --hpe-color-text-primary: var(--hpe-base-color-green-800);
  --hpe-color-text-primary-hover: var(--hpe-base-color-green-900);
  --hpe-color-text-strong: var(--hpe-base-color-grey-1000);
  --hpe-color-text-weak: var(--hpe-base-color-grey-650);
  /* ---------- Button label colours ----------
     Figma component "Button - V2" exposes the resting label colour as
     `button/default/rest/textColor` and `button/secondary/rest/textColor`.
     Both resolve to grey-1000 (#292D3A) — one step darker than
     `color/text/default` (#3E4550), which is reserved for body/helper text. */
  --hpe-button-default-rest-textColor: var(--hpe-base-color-grey-1000);
  --hpe-button-secondary-rest-textColor: var(--hpe-base-color-grey-1000);
  /* ---------- Elevation / focus composites ---------- */
  --hpe-shadow-small: 0 var(--hpe-base-dimension-50) var(--hpe-base-dimension-100) var(--hpe-base-color-black-opacity12);
  --hpe-shadow-medium: 0 var(--hpe-base-dimension-150) var(--hpe-base-dimension-300) var(--hpe-base-color-black-opacity12);
  --hpe-shadow-large: 0 var(--hpe-base-dimension-300) var(--hpe-base-dimension-600) var(--hpe-base-color-black-opacity24);
  --hpe-focusIndicator-boxShadow: 0 0 0 var(--hpe-focusIndicator-outlineOffset) var(--hpe-color-focus-support);
  --hpe-focusIndicator-outline: var(--hpe-base-dimension-50) solid var(--hpe-color-focus);
}

/* These inject tags are used for dynamically creating imports for themelet styles, you can place them where ever you like in this file. */
/*fonts_inject:imports */
/* HPE Design System primary typeface. Declared here so the theme's font
   definitions live in one place. All legacy families below (MetricHPE,
   Metric *, HPE Simple) are re-pointed to these HPE Graphik web fonts so the
   whole portal renders in HPE Graphik without touching the hundreds of
   existing font-family declarations. Icon fonts are unaffected. */
@font-face {
  font-family: "HPE Graphik";
  src: url("../fonts/HPEGraphik-Extralight-Web.woff2") format("woff2");
  font-weight: 100;
  font-display: swap;
}
@font-face {
  font-family: "HPE Graphik";
  src: url("../fonts/HPEGraphik-Regular-Web.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "HPE Graphik";
  src: url("../fonts/HPEGraphik-Medium-Web.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "HPE Graphik";
  src: url("../fonts/HPEGraphik-Semibold-Web.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "HPE Graphik";
  src: url("../fonts/HPEGraphik-Bold-Web.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "MetricHPE";
  src: url("../fonts/HPEGraphik-Regular-Web.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "MetricHPE";
  src: url("../fonts/HPEGraphik-Bold-Web.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "MetricHPE";
  src: url("../fonts/HPEGraphik-Semibold-Web.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "MetricHPE";
  src: url("../fonts/HPEGraphik-Extralight-Web.woff2") format("woff2");
  font-weight: 100;
  font-display: swap;
}
@font-face {
  font-family: HPE Simple;
  src: url("../fonts/HPEGraphik-Bold-Web.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}
/* Register PopUp PRPDXP-635 */
@font-face {
  font-family: "Metric Light";
  src: url(../fonts/HPEGraphik-Extralight-Web.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
}
@font-face {
  font-family: "Metric Regular";
  src: url(../fonts/HPEGraphik-Regular-Web.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
}
@font-face {
  font-family: "Metric Medium";
  src: url(../fonts/HPEGraphik-Medium-Web.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
}
@font-face {
  font-family: "Metric Semibold";
  src: url(../fonts/HPEGraphik-Semibold-Web.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
}
@font-face {
  font-family: "Metric Black";
  src: url(../fonts/HPEGraphik-Bold-Web.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
}
/* endinject */
/* This file allows you to override default styles in one central location for easier upgrade and maintenance. */
/* common_css_start */
#wrapper {
  padding: 0px;
  position: relative;
}

#wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}

#wrapper > .bodyContent {
  flex: 1 0 auto;
}

#wrapper > .breadcrumbs-band,
#wrapper > footer {
  flex: 0 0 auto;
}

.highlight {
  background-color: transparent;
  font-weight: 600;
}

#saveSignin {
  cursor: pointer;
}

.upp-debug {
  max-height: 0px;
}

.portlet-column-content.empty {
  padding: 24px;
}

.lfr-notification-container strong.lead {
  margin-right: 5px;
}

.bodyContent {
  padding-bottom: 64px;
  padding-top: 64px;
  background: var(--color-background-default, #FFF);
}

#megamenu {
  min-height: 848px;
  position: absolute;
  top: inherit;
  display: none;
  left: inherit;
}

.headerdisabled {
  cursor: default;
  font-weight: bold !important;
  pointer-events: none;
}

.modal-content {
  border-radius: 12px;
  height: auto;
}

.headerclickable {
  cursor: pointer;
  font-weight: bold !important;
}

.headerpage_backgrndChange {
  background-color: #fff !important;
  pointer-events: none;
}

.megamenupage_backgrndChange {
  pointer-events: none;
}

.headerpage_backgrndChangeClickable {
  background-color: #fff !important;
}

.headerSecondPoint {
  pointer-events: none;
}

.headerSecondPointClickable {
  cursor: pointer;
}

#headerNavBar {
  position: absolute;
  cursor: pointer;
  top: 24px;
  left: 24px;
}
#headerNavBar img {
  width: 24px;
  height: 24px;
}

#listBtn {
  margin-right: 7px;
}

#gridBtn {
  margin-left: 5px;
}

.customSearchInput {
  display: none;
}

.customSearchInput input {
  border: 0;
  box-shadow: none;
  color: #333;
  font-family: HPE Graphik;
  font-size: 24px;
  font-weight: 300;
  line-height: 30px;
}

.Search.Results .customSearchInput {
  display: block;
}

.searchOpen .customSearchInput {
  margin-top: -8px;
}

.Search.Results #main-content .searchPart .input-text-wrapper {
  display: none;
}

select {
  border: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -ms-appearance: none; /* get rid of default appearance for IE8, 9 and 10*/
}

#selectRows {
  border: 1px solid #B1B9BE;
  background: 0;
  background-image: url(../images/icons/carot-down-new.svg);
  background-position: center right 10px;
  background-size: 10px;
  background-repeat: no-repeat;
  border-radius: 6px;
  font-weight: 600;
  font-size: 16px;
  padding-left: 10px;
  justify-content: flex-end;
  margin-left: 5px;
  accent-color: var(--hpe-color-decorative-brand);
  border-left: 6px solid #0d6d51;
  background-color: rgba(209, 255, 238, 0.99);
  width: 83px;
  height: 40px;
}

#selectRows option:hover,
#selectRows option:checked,
#selectRows option:focus,
.delta-selection option:hover,
.delta-selection option:checked,
.delta-selection option:focus {
  background: var(--hpe-color-decorative-brand) -webkit-linear-gradient(bottom, var(--hpe-color-decorative-brand) 0%, var(--hpe-color-decorative-brand) 100%);
  box-shadow: 0 0 10px 100px var(--hpe-color-decorative-brand) inset;
  color: #fff !important;
}

body {
  background-color: #FFFFFF;
  font-family: HPE Graphik;
  overflow-x: hidden;
}

.portlet {
  margin-bottom: 0px;
}

.noBorderTop {
  border-top: 0px;
}

.dialog-iframe-popup .portlet-body {
  padding: 25px;
}

.row {
  margin-right: 0px;
  margin-left: 0px;
}
.row [class*=col-] {
  padding-right: 12px;
  padding-left: 28px;
}
.row [class*=col-]:first-child {
  padding-left: 0px;
}
.row [class*=col-]:last-child {
  padding-right: 0px;
}

.portlet-decorate .portlet-content {
  padding: 0px;
  border-radius: 0px;
  border: 0;
  background: transparent;
}

.portlet .portlet-content.portlet-content-editable {
  padding: 0px;
  border-radius: 0px;
  border: none;
}

#breadcrumbs {
  min-height: 48px;
  max-width: 1600px;
}
#breadcrumbs .portlet-decorate .portlet-content {
  background: transparent;
  border: none;
}
#breadcrumbs .portlet-topper {
  border: none;
}
#breadcrumbs .portlet-title-text {
  display: none;
}
#breadcrumbs ul.breadcrumb, #breadcrumbs ol.breadcrumb {
  padding: 14px 0px;
  margin-bottom: 0px;
  background-color: transparent;
  /* Home icon: match the 24px line box and drop the baseline nudge so the
     glyph is optically centred against the adjacent label. */
}
#breadcrumbs ul.breadcrumb li, #breadcrumbs ol.breadcrumb li {
  font-family: HPE Graphik;
  /* Figma: breadcrumb text is 16px with a 24px line box, and the
     home icon shares that same line box so icon and text sit on one
     baseline (previously 14px/20px with a 18px icon that overhung). */
  font-size: 16px;
  line-height: 24px;
  /* Equal spacing either side of every crumb, icon included. */
  display: inline-flex;
  align-items: center;
}
#breadcrumbs ul.breadcrumb li a, #breadcrumbs ol.breadcrumb li a {
  color: #006750;
}
#breadcrumbs ul.breadcrumb .breadcrumb-home-item .breadcrumb-home-static, #breadcrumbs ol.breadcrumb .breadcrumb-home-item .breadcrumb-home-static {
  display: inline-flex;
  align-items: center;
  line-height: 24px;
}
#breadcrumbs ul.breadcrumb .breadcrumb-home-item .breadcrumb-home-icon, #breadcrumbs ol.breadcrumb .breadcrumb-home-item .breadcrumb-home-icon {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  display: block;
}
#breadcrumbs ul.breadcrumb-horizontal li {
  margin-right: 8px;
  font-weight: normal;
}
#breadcrumbs ul.breadcrumb-horizontal li + li {
  padding-left: 8px;
}
#breadcrumbs ul.breadcrumb-horizontal li + li:before {
  background-image: none;
  margin-top: 0;
  content: ">";
  color: #666;
  font-size: 16px;
  line-height: 24px;
  height: auto;
  width: auto;
  padding-right: 8px;
}

.bodyContent {
  width: 100%;
  max-width: 1600px;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
}
.bodyContent .sideNavBar {
  width: 24px;
  float: left;
  position: absolute;
  min-height: 800px;
  margin: 0 14px 0 24px;
}
.bodyContent #content {
  overflow: hidden;
  padding-left: 72px;
}

.modal-backdrop.in {
  opacity: 0.5;
}

/* common_css_end */
/* new_mega_menu_start */
#testFirstSideNavi {
  position: absolute;
  width: 320px;
  top: 0;
  z-index: 99;
  background-color: #425563;
  min-height: 848px;
  box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.5);
  display: none;
}
#testFirstSideNavi ul li.active a {
  font-weight: 600;
}
#testFirstSideNavi ul li.active .pageBox .pageIcon {
  background-position: -25px center;
}
#testFirstSideNavi ul li.active .pageBox .firstLevelExpandRight .icon-angle-right {
  opacity: 1;
}
#testFirstSideNavi ul li {
  display: table;
  width: 100%;
  padding: 0 24px;
  height: 72px;
}
#testFirstSideNavi ul li a {
  color: #FFFFFF;
  font-family: HPE Graphik;
  font-size: 19px;
  font-weight: 300;
  line-height: 24px;
  text-decoration: none;
  display: table-cell;
  vertical-align: middle;
  color: white;
  word-break: break-word;
  cursor: pointer;
}
#testFirstSideNavi ul li .pageBox {
  display: block;
  position: relative;
}
#testFirstSideNavi ul li .pageBox .pageIcon {
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-size: 310%;
  display: block;
  float: left;
  margin-right: 24px;
  background-position: 0px center;
  position: absolute;
  top: 50%;
  margin-top: -12px;
}
#testFirstSideNavi ul li .pageBox .pageTitle {
  overflow: hidden;
  display: block;
  padding-left: 48px;
  padding-right: 10px;
}
#testFirstSideNavi ul li .pageBox .firstLevelExpandRight {
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -12px;
}
#testFirstSideNavi ul li .pageBox .firstLevelExpandRight .icon-angle-right {
  opacity: 0.5;
}

.menuOpen #megamenu {
  display: block;
}
.menuOpen #testFirstSideNavi {
  display: block;
}
.menuOpen #headerNavBar .icon-bar:nth-child(1) {
  transform: rotate(45deg);
  transform-origin: 10% 10%;
  margin-bottom: 3px;
}
.menuOpen #headerNavBar .icon-bar:nth-child(2) {
  opacity: 0;
}
.menuOpen #headerNavBar .icon-bar:nth-child(3) {
  transform: rotate(-45deg);
  transform-origin: 10% 90%;
  margin-bottom: 0px;
}

#testSecondSideNavi {
  position: absolute;
}
#testSecondSideNavi ul li {
  padding: 0px;
  display: block;
}
#testSecondSideNavi ul li ul {
  position: absolute;
  width: 330px;
  background-color: #666;
  top: 0;
  left: 320px;
  z-index: 98;
  display: none;
  min-height: 848px;
  box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.5);
}
#testSecondSideNavi ul li ul li {
  display: block;
  padding: 7px 24px;
  cursor: pointer;
}
#testSecondSideNavi ul li ul li.lineSeparator {
  border-bottom: 1px solid #d8d8d8;
}
#testSecondSideNavi ul li ul li .icon-angle-right {
  opacity: 0.5;
}
#testSecondSideNavi ul li ul.active {
  display: block;
}
#testSecondSideNavi ul li ul.active li.active {
  background-color: #565656;
}
#testSecondSideNavi ul li ul.active li.active .icon-angle-right {
  opacity: 1;
}
#testSecondSideNavi ul li a {
  color: #FFFFFF;
  font-family: HPE Graphik;
  font-size: 19px;
  font-weight: 300;
  line-height: 24px;
  text-decoration: none;
  display: block;
  color: white;
  font-size: 20px;
  position: relative;
}
#testSecondSideNavi ul li a .secondLevelExpandRight {
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -12px;
  padding-left: 10px;
}

#testSideNavi ul, #testSecondSideNavi ul, #testFirstSideNavi ul {
  margin: 0;
  padding: 0;
}

#testSideNavi {
  position: absolute;
}
#testSideNavi ul li {
  padding: 0px;
  display: block;
}
#testSideNavi ul li ul li {
  padding: 0px;
}
#testSideNavi ul li ul li ul {
  position: absolute;
  width: 350px;
  top: 0;
  left: 650px;
  z-index: 101;
  display: none;
  min-height: 848px;
  background-color: #fff;
  box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.5);
}
#testSideNavi ul li ul li ul li {
  display: block;
  padding: 7px 24px;
  cursor: pointer;
}
#testSideNavi ul li ul li ul.active {
  display: block;
}
#testSideNavi ul li ul li ul.active .pageImg {
  height: 175px;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
}
#testSideNavi ul li ul li ul.active .pageText {
  padding: 24px;
  border-top: 1px solid #ccc;
}
#testSideNavi ul li ul li ul.active .pageText .pageTitle {
  color: #333333;
  font-family: HPE Graphik;
  font-size: 24px;
  font-weight: 300;
  line-height: 30px;
  display: block;
}
#testSideNavi ul li ul li ul.active .pageText .pageDescription {
  color: #666666;
  font-family: HPE Graphik;
  font-size: 16px;
  line-height: 20px;
  display: block;
  font-weight: normal;
  margin-top: 6px;
}
#testSideNavi ul li ul li ul.active li {
  background-color: #f6f6f6;
  border-top: 1px solid #ccc;
}
#testSideNavi ul li ul li ul.active li:last-child {
  border-bottom: 1px solid #ccc;
}
#testSideNavi ul li ul li ul.active li a {
  color: #000000;
}
#testSideNavi ul li a {
  color: #FFFFFF;
  font-family: HPE Graphik;
  font-size: 19px;
  font-weight: 300;
  line-height: 24px;
  text-decoration: none;
  display: block;
  color: white;
  font-size: 20px;
}

/* new_mega_menu_end */
/* widget_css_start */
.widgetInnerContainer {
  height: 100%;
}
.widgetInnerContainer header {
  text-align: center;
  position: absolute;
  width: 100%;
  top: 5px;
}

.widget_total.iframeWidget {
  height: 100%;
  /* Lay the tile out as a column so the embedded tool fills the height the
     tile actually has. The iframe was previously locked to 342px, which left
     a large dead area on double-height tiles and stopped the tool's footer
     action from reaching the bottom of the card. */
  display: flex;
  flex-direction: column;
}
.widget_total.iframeWidget .widget_title {
  color: white;
  display: block;
  height: auto;
  flex: 0 0 auto;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  padding-top: 0px;
  text-align: center;
  display: inline-block;
}
.widget_total.iframeWidget .widget_title .titleText {
  font-family: HPE Graphik;
  color: #292D3A;
  float: left;
  font-size: 28px;
  z-index: inherit;
  width: 100%;
  /* No horizontal padding: the tile already provides a 24px gutter,
     so the title lines up with the drag handle, the embedded tool's
     fields and its Launch action instead of sitting 24px further in. */
  padding: 44px 0px 0px 0px;
  text-align: left;
  overflow: hidden;
  position: inherit;
  top: 0px;
  letter-spacing: -0.28px;
  text-overflow: ellipsis;
  /* Match the standard (non-iframe) tile title: dark, 28px/500,
     two-line clamp per Figma. Previously this iframe-tile title was
     rendered thin/light (#333, 24px, weight 300, single line), which
     made the Price Communications tile inconsistent with every other
     tile and with the mockup. */
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  line-height: 34px;
  font-weight: 600;
  left: 0px;
}
.widget_total.iframeWidget .widget_title #removeIcon {
  position: absolute;
  /* Sits on the same row as the drag handle (vertically centred on
     it) and shares the tile's 24px right gutter, so the close icon
     and the drag handle read as one aligned header row. 16x16 to
     match the drag handle: at 24x24/top:14 the two icons were
     different sizes on different baselines, and iframe tiles then
     disagreed with Go-button tiles. */
  right: 24px;
  top: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}
.widget_total.iframeWidget .widget_title #removeIcon > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}
.widget_total.iframeWidget iframe {
  border: 0;
  /* Fills the remaining tile height (see the flex column above) rather
     than the old fixed 342px. */
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  /* Share the tile's 24px side gutter. Measured on the live dashboard,
     the title, the drag handle and a Go-button tile's description all
     start 24px in, but the iframe started at 0 - so the embedded tool's
     fields ran to the very edge of the card while every other tile was
     inset. calc() rather than `width:auto`, because an iframe is a
     replaced element and would fall back to its intrinsic width instead
     of stretching. */
  box-sizing: border-box;
  width: calc(100% - 48px);
  margin: 16px 24px 0;
}

/* Styling for the content rendered *inside* a dashboard widget iframe.
   The embedded tool pages are same-origin Liferay widget-mode pages that load
   this same theme stylesheet, so these rules reach into the iframe document.
   `prp-dashboard-iframe` is added to the iframe document by the tagging script
   in iframe_widget.jsp, which keeps these rules from leaking into regular
   portal pages or Liferay popups. */
html.prp-dashboard-iframe,
body.prp-dashboard-iframe {
  /* The embedded pages ship `bg-white`, which painted a white block inside
     the #F7F7F7 tile. Stay transparent so the tile reads as one surface. */
  background: transparent !important;
}

body.prp-dashboard-iframe {
  /* Embedded tool pages wrap their content in a white Bootstrap card, which
     split the tile into a white block sitting on the #F7F7F7 tile surface.
     Flatten those wrappers so the tile reads as a single surface; the form
     controls themselves keep their own fill.

     The list has to cover the full wrapper chain each tool renders -
     #main-content > .portlet-layout > .portlet-column > .portlet-boundary >
     .portlet > .portlet-content > .portlet-content-container >
     .portlet-body > .tools-card > .card > .card-body - because any single
     one of them still painting white shows as a white block in the tile. */
  /* Highcharts paints its own opaque background rect inside the SVG, and the
     SSV tool fills its root wrapper white, so both punched a white block into
     the grey tile even though every CSS wrapper around them is transparent. */
  /* Read-only inputs are used as dropdown value displays. Most already render
     transparent - force the rest so they sit flush in their row instead of
     punching a white box into the tile. `background-color` rather than the
     `background` shorthand, so any icon set via background-image survives. */
  /* Form fields: the embedded tool ships square, hard-edged boxes that butt
     straight up against each other, with the field name rendered inside the
     box. Rebuild them as the rounded, softly outlined controls with the name
     sitting above the box, matching the shared `.hpe-select` component in
     _hpe_select.scss (same border, radius, type scale and interaction
     colours) so the embedded tool reads like the rest of the portal.
     Only `background-color` is set - the `background` shorthand would wipe
     the caret/search background-image these controls rely on. */
  /* Nothing inside a field wrapper may draw its own box - that is what
     produced the double border on the Price Communications tile. */
  /* Control text picks up the same type scale as `.hpe-select__control`.
     `.pricing-selectLabelClass` is the placeholder the tool swaps in while a
     dropdown is open; it ships white, which was invisible once the control
     background became transparent. */
  /* Dropdown menu, matching `.hpe-select__menu`: a floating white card
     instead of the inline grey block the tool ships with. */
  /* Options, matching `.hpe-select__option`. */
  /* The tool flags the active option with `pricing-dropdown_color_grey`;
     render it like `.hpe-select__option[aria-selected="true"]`. */
  /* The Special Pricing panel sizes its fields through an id selector
     (`div#specialDivToggle .pricing-quicksearchdropdown { height: 62px }`),
     so matching that specificity is required to keep both panels aligned. */
  /* That panel wraps its search field in an extra fixed-height box which
     would otherwise double up on the field outline. */
  /* "Select Input" and "Search" share a row and read as two separate
     controls, so give the flex row a gap and let them size evenly. */
  /* Field names sit above their box. The dropdown labels ship with an inline
     `display: none` - only an !important declaration can reveal them. */
  /* The "Agreement number" label ships an inline
     `margin-top: 13px !important`. An inline !important declaration cannot
     be overridden by any stylesheet rule, so the label was pushed 13px down
     from its `top: -20px` anchor and overlapped the top edge of its own box.
     `transform` is not set inline, so use it to cancel the offset. */
  /* The card stretches to the tile so the form fills the available height.
     It must never exceed the iframe viewport: the card's own 56px footer
     strip sat *below* the card body's 24px bottom padding, pushing the card
     8px past the 422px viewport and giving #main-content a scrollbar. The
     real form content ends well above that, so bounding the card to 100vh
     and dropping the now-duplicated body padding removes the scrollbar
     without hiding anything. */
  /* The tool forces `position: inherit !important` on its launch action,
     which collapsed it back into the flow directly under the radios.
     Pin it to the bottom of the *iframe viewport* instead: inside an iframe
     `position: fixed` resolves against that iframe's own viewport, so the
     action behaves as a real tile footer at every tile size (1x1, 1x2, 2x1)
     rather than only when the card happens to be as tall as the tile. */
  /* ---- Order Status Visibility widget ------------------------------------
     Same HPE Design System treatment as the pricing widget above: rounded
     1px fields, muted 12px field labels and light-grey pill buttons pinned
     as the tile footer. The OSV stylesheet uses ids and `!important`
     (`.btn-default { border-radius: 0 !important }`,
     `#search_button:disabled { border/color !important }`), so these
     declarations have to be forced to win the cascade. */
  /* The Highcharts donut sat ~20px left of the tile centre because
     #osv_donut_single is wider than its column and overhangs to the left.
     Give it the column width and centre the chart canvas inside it. */
  /* The total read "Total Orders" ABOVE the figure, with the caption sitting
     on the ring stroke. Per the dashboard mock it is the figure first with
     the caption beneath, both centred inside the ring: reversing the flex
     direction reorders the two without touching the widget's markup, and the
     type sizes keep the block inside the ring's hole. */
  /* The widget hard-codes the card and its body to the chart's original
     height (338px) with `overflow: hidden`, so once the donut is enlarged to
     fill the tile (see tuneOsvChart in iframe_widget.jsp) the "Order search"
     field was clipped off the bottom. Let both grow with their content; the
     chart sizing reserves room for the fields and the pinned footer. */
  /* Legend labels are full text in the DOM but the widget pins an inline
     `width` on each one, so "Delivered"/"In transit"/"Cancelled" rendered
     truncated ("Delive…"). Release the width and lay each item out as
     label-left / count-right on the legend's 131px column pitch, as per the
     mock. 100px keeps the count clear of the next column's colour swatch. */
  /* Field labels: were weight 100 in pure black. */
  /* Secondary pill buttons (were square, green- / grey-outlined). */
  /* Design System disabled state: no outline, 24% black label. */
  /* Room under the content so the pinned footer never overlaps a field. */
  /* Button row becomes the tile footer, like every other tool tile. */
  /* Match the light-gray pill used by the tool tile "Launch" buttons instead
     of the legacy square, green-outlined tool buttons. The embedded portlet
     stylesheets set border/background/color/font-family with !important, so
     those four declarations have to be forced here to win the cascade. */
  /* Icon-only affordances (carets, close, paging) must keep their own look. */
  /* Primary launch action carries the external-link icon, like the tiles. */
  /* Subscription Status Visibility pins its action with `position: absolute`
     to a widget ~334px tall inside a ~150px tile viewport, so the button
     landed roughly 160px below the fold and was never visible. `position:
     fixed` inside an iframe resolves against that iframe's own viewport, so
     this puts it on the same footer baseline as every other tool action.
     (The inline `bottom`/`position` values are removed by
     `prpNormaliseIframeButtons` in iframe_widget.jsp.) */
}
body.prp-dashboard-iframe #main-content,
body.prp-dashboard-iframe .portlet-layout,
body.prp-dashboard-iframe .portlet-column,
body.prp-dashboard-iframe .portlet-boundary,
body.prp-dashboard-iframe .tools-card,
body.prp-dashboard-iframe .card,
body.prp-dashboard-iframe .card-body,
body.prp-dashboard-iframe .portlet,
body.prp-dashboard-iframe .portlet-content,
body.prp-dashboard-iframe .portlet-content-container,
body.prp-dashboard-iframe .portlet-body {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.prp-dashboard-iframe rect.highcharts-background {
  fill: transparent !important;
}
body.prp-dashboard-iframe #ssv-widget {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.prp-dashboard-iframe input[readonly] {
  background-color: transparent !important;
}
body.prp-dashboard-iframe .pricing-bdr,
body.prp-dashboard-iframe .pricing-special-rightbdr,
body.prp-dashboard-iframe .pricing-special-lbdr,
body.prp-dashboard-iframe .pricing-quicksearchdropdown {
  /* 0.8px / 8px radius / 36px box are the measured HPE Design System
     TextInput + Select values (design-system.hpe.design). This block is
     the SINGLE owner of the field box for these wrappers - the stylesheet
     injected by iframe_widget.jsp deliberately does not draw one, because
     two boxes on nested elements rendered as a double border. */
  border: 0.8px solid #B1B9BE !important;
  border-radius: 8px !important;
  background-color: transparent !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  /* anchor for the label lifted above, and room for it */
  position: relative !important;
  overflow: visible !important;
  margin-top: 22px !important;
  height: 36px !important;
  min-height: 36px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  /* HPE DS TextInput inset. Without it the tool's value text sat flush
     against the left border (measured 0px inset) while a real <input> in
     the same form was padded 12px, so the two read as different controls. */
  padding: 0 12px !important;
}
body.prp-dashboard-iframe .pricing-bdr:hover,
body.prp-dashboard-iframe .pricing-special-rightbdr:hover,
body.prp-dashboard-iframe .pricing-special-lbdr:hover,
body.prp-dashboard-iframe .pricing-quicksearchdropdown:hover {
  border-color: #7A8288 !important;
}
body.prp-dashboard-iframe .pricing-bdr:focus-within,
body.prp-dashboard-iframe .pricing-special-rightbdr:focus-within,
body.prp-dashboard-iframe .pricing-special-lbdr:focus-within,
body.prp-dashboard-iframe .pricing-quicksearchdropdown:focus-within {
  border-color: #292D3A !important;
  outline: 2px solid #292D3A !important;
  outline-offset: 2px !important;
}
body.prp-dashboard-iframe .pricing-bdr .dropdown-btn,
body.prp-dashboard-iframe .pricing-special-rightbdr .dropdown-btn,
body.prp-dashboard-iframe .pricing-special-lbdr .dropdown-btn,
body.prp-dashboard-iframe .pricing-quicksearchdropdown .dropdown-btn {
  border: none !important;
  border-radius: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}
body.prp-dashboard-iframe .pricing-dropdown-selected,
body.prp-dashboard-iframe .pricing-dropdown-selectedBox,
body.prp-dashboard-iframe .pricing-selectLabelClass,
body.prp-dashboard-iframe .pricing-myinput,
body.prp-dashboard-iframe .pricing-txt {
  font-family: "HPE Graphik", Arial, sans-serif !important;
  /* HPE Design System TextInput/Select value text is 16px/24px. */
  font-size: 16px !important;
  line-height: 24px !important;
  font-weight: 400 !important;
  color: #292D3A !important;
}
body.prp-dashboard-iframe .options.pricing-myDropdiv {
  position: absolute !important;
  top: calc(100% + 4px) !important;
  left: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 6px 0 !important;
  background: #FFFFFF !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12) !important;
  max-height: 240px !important;
  overflow-y: auto !important;
  z-index: 100 !important;
}
body.prp-dashboard-iframe .pricing-divChild,
body.prp-dashboard-iframe .pricing-divChildBox {
  position: relative !important;
  margin: 2px 8px !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  font-family: "HPE Graphik", Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 20px !important;
  color: #444444 !important;
  background: transparent !important;
  cursor: pointer !important;
}
body.prp-dashboard-iframe .pricing-divChild:hover,
body.prp-dashboard-iframe .pricing-divChildBox:hover {
  background: #F7F7F7 !important;
}
body.prp-dashboard-iframe .pricing-divChild.pricing-dropdown_color_grey,
body.prp-dashboard-iframe .pricing-divChildBox.pricing-dropdown_color_grey {
  background: #D1FFEE !important;
  color: #292D3A !important;
}
body.prp-dashboard-iframe .pricing-divChild.pricing-dropdown_color_grey::before,
body.prp-dashboard-iframe .pricing-divChildBox.pricing-dropdown_color_grey::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 6px !important;
  height: calc(100% - 8px) !important;
  background: #1D6750 !important;
  border-radius: 6px 0 0 6px !important;
}
body.prp-dashboard-iframe .pricing-divChild.pricing-dropdown_color_grey:hover,
body.prp-dashboard-iframe .pricing-divChildBox.pricing-dropdown_color_grey:hover {
  background: #D1FFEE !important;
}
body.prp-dashboard-iframe #specialDivToggle .pricing-bdr,
body.prp-dashboard-iframe #specialDivToggle .pricing-special-lbdr,
body.prp-dashboard-iframe #specialDivToggle .pricing-quicksearchdropdown {
  height: 44px !important;
  min-height: 44px !important;
}
body.prp-dashboard-iframe #specialDivToggle .search-product.pricing-height {
  height: auto !important;
  border: 0 !important;
}
body.prp-dashboard-iframe #standardDivToggle > .row,
body.prp-dashboard-iframe #specialDivToggle > .row {
  gap: 9px !important;
}
body.prp-dashboard-iframe .pricing-bdr,
body.prp-dashboard-iframe .pricing-special-rightbdr {
  flex: 1 1 0 !important;
  max-width: none !important;
  width: auto !important;
}
body.prp-dashboard-iframe .pricing-myLabel,
body.prp-dashboard-iframe .pricing-selectLabelClassBox {
  display: block !important;
  position: absolute !important;
  top: -20px !important;
  left: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: "HPE Graphik", Arial, sans-serif !important;
  font-size: 12px !important;
  line-height: 16px !important;
  font-weight: 400 !important;
  color: #56595E !important;
  white-space: nowrap !important;
}
body.prp-dashboard-iframe .pricing-selectLabelClassBox[style*="margin-top: 13px"] {
  transform: translateY(-13px) !important;
}
body.prp-dashboard-iframe .quickSearch-pricing-card {
  position: relative !important;
  box-sizing: border-box !important;
  height: 100vh !important;
  min-height: 0 !important;
  overflow: hidden !important;
  /* room so the pinned footer action never overlaps the last field */
  padding-bottom: 56px !important;
}
body.prp-dashboard-iframe .quickSearch-pricing-card > .card-body {
  padding-bottom: 0 !important;
}
body.prp-dashboard-iframe .pricing-tools-info {
  position: static !important;
}
body.prp-dashboard-iframe div:has(> #quickSearchSubmit) {
  position: static !important;
}
body.prp-dashboard-iframe .pricing-tools-info #quickSearchSubmit {
  position: fixed !important;
  left: 24px !important;
  bottom: 12px !important;
  z-index: 5 !important;
}
body.prp-dashboard-iframe #chatcontainer {
  width: 100% !important;
  max-width: 100% !important;
}
body.prp-dashboard-iframe #osv_donut_single {
  width: 100% !important;
  margin: 0 !important;
}
body.prp-dashboard-iframe #osv_donut_single .highcharts-container {
  margin: 0 auto !important;
  float: none !important;
}
body.prp-dashboard-iframe #totalText {
  display: flex !important;
  flex-direction: column-reverse !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: "HPE Graphik", Arial, sans-serif !important;
  font-size: 12px !important;
  line-height: 16px !important;
  white-space: nowrap !important;
  color: var(--hpe-color-text-default, #292D3A) !important;
}
body.prp-dashboard-iframe #totalText br {
  display: none !important;
}
body.prp-dashboard-iframe #totalText u {
  text-decoration: none !important;
}
body.prp-dashboard-iframe #totalText #totalCount,
body.prp-dashboard-iframe #totalText #totalCount a {
  font-size: 32px !important;
  font-weight: 600 !important;
  line-height: 38px !important;
  text-decoration: none !important;
  color: var(--hpe-color-text-default, #292D3A) !important;
}
body.prp-dashboard-iframe #QuickSearchWidget,
body.prp-dashboard-iframe #QuickSearchWidget .card,
body.prp-dashboard-iframe #QuickSearchWidget .card > .card-body {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}
body.prp-dashboard-iframe .enabledLegends {
  display: inline-flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  width: 100px !important;
  gap: 6px !important;
}
body.prp-dashboard-iframe .enabledLegends .text.ellipsis {
  width: auto !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  flex: 0 1 auto !important;
}
body.prp-dashboard-iframe .enabledLegends .value {
  flex: 0 0 auto !important;
  margin-left: 0 !important;
}
body.prp-dashboard-iframe .enabledLegends,
body.prp-dashboard-iframe .enabledLegends .text.ellipsis,
body.prp-dashboard-iframe .enabledLegends .value {
  font-family: "HPE Graphik", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--hpe-color-text-default, #292D3A) !important;
}
body.prp-dashboard-iframe .highcharts-legend-item > span {
  overflow: visible !important;
  text-overflow: clip !important;
}
body.prp-dashboard-iframe .osv-selection-frame,
body.prp-dashboard-iframe .searchFilters_Frame,
body.prp-dashboard-iframe .osv-search-frame {
  border: 1px solid var(--hpe-color-border-default, #B1B9BE) !important;
  border-radius: var(--hpe-static-radius-small, 8px) !important;
  background-color: transparent !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
body.prp-dashboard-iframe .osv-selection-frame:hover,
body.prp-dashboard-iframe .searchFilters_Frame:hover,
body.prp-dashboard-iframe .osv-search-frame:hover {
  border-color: #7A8288 !important;
}
body.prp-dashboard-iframe .searchFilters_Label,
body.prp-dashboard-iframe .myLabel,
body.prp-dashboard-iframe .fontmetric1 {
  font-family: "HPE Graphik", Arial, sans-serif !important;
  font-size: 12px !important;
  line-height: 16px !important;
  font-weight: 400 !important;
  color: #56595E !important;
}
body.prp-dashboard-iframe .searchFilters_Input,
body.prp-dashboard-iframe .dropdown-selected,
body.prp-dashboard-iframe #Order-QuickSearch-Input,
body.prp-dashboard-iframe .fontmetric2 {
  font-family: "HPE Graphik", Arial, sans-serif !important;
  /* HPE Design System TextInput/Select value text is 16px/24px. At 14px
     these OSV fields read a size smaller than every other control in the
     tile (and than the Price Communications fields beside them). */
  font-size: 16px !important;
  line-height: 24px !important;
  font-weight: 400 !important;
  color: var(--hpe-color-text-default, #292D3A) !important;
}
body.prp-dashboard-iframe #view_tool_button,
body.prp-dashboard-iframe #search_button,
body.prp-dashboard-iframe .widget-osv-view,
body.prp-dashboard-iframe .widget-osv-search {
  border: none !important;
  border-radius: var(--hpe-static-radius-full, 9999px) !important;
  background-color: rgba(0, 0, 0, 0.04) !important;
  color: var(--hpe-color-text-strong, #292D3A) !important;
  font-family: "HPE Graphik", Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 24px !important;
  padding: 6px 20px !important;
  min-height: 36px !important;
  box-shadow: none !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
  width: auto !important;
  margin-right: 16px;
}
body.prp-dashboard-iframe #view_tool_button:hover,
body.prp-dashboard-iframe #search_button:not(:disabled):hover {
  background-color: rgba(0, 0, 0, 0.08) !important;
}
body.prp-dashboard-iframe #search_button:disabled,
body.prp-dashboard-iframe .widget-osv-search:disabled {
  border: none !important;
  background-color: rgba(0, 0, 0, 0.04) !important;
  color: rgba(0, 0, 0, 0.24) !important;
  cursor: default !important;
}
body.prp-dashboard-iframe .card-body {
  padding-bottom: 60px !important;
}
body.prp-dashboard-iframe .tools-search-button {
  position: fixed !important;
  left: 24px !important;
  right: auto !important;
  bottom: 12px !important;
  width: auto !important;
  display: flex !important;
  align-items: center;
  gap: 12px;
  margin: 0 !important;
  z-index: 5 !important;
}
body.prp-dashboard-iframe .tools-search-button > div {
  width: auto !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
}
body.prp-dashboard-iframe .btn,
body.prp-dashboard-iframe button,
body.prp-dashboard-iframe input[type=button],
body.prp-dashboard-iframe input[type=submit] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  border: none !important;
  border-radius: var(--hpe-static-radius-full, 9999px);
  background-color: rgba(0, 0, 0, 0.04) !important;
  color: #292D3A !important;
  font-family: "HPE Graphik", Arial, sans-serif !important;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  /* Buttons that carry an inline `padding: ... !important` keep their own
     spacing - an inline important declaration always wins - which still
     reads correctly as a pill. */
  padding: 6px 20px !important;
  box-shadow: none;
  text-decoration: none;
  transition: background-color 0.15s ease-in-out;
}
body.prp-dashboard-iframe .btn:hover, body.prp-dashboard-iframe .btn:focus,
body.prp-dashboard-iframe button:hover,
body.prp-dashboard-iframe button:focus,
body.prp-dashboard-iframe input[type=button]:hover,
body.prp-dashboard-iframe input[type=button]:focus,
body.prp-dashboard-iframe input[type=submit]:hover,
body.prp-dashboard-iframe input[type=submit]:focus {
  background-color: rgba(0, 0, 0, 0.08) !important;
  color: #292D3A !important;
}
body.prp-dashboard-iframe .btn.close,
body.prp-dashboard-iframe button.close,
body.prp-dashboard-iframe .btn[class*=caret],
body.prp-dashboard-iframe button[class*=caret],
body.prp-dashboard-iframe .btn[class*=arrow],
body.prp-dashboard-iframe button[class*=arrow],
body.prp-dashboard-iframe .btn[class*=icon],
body.prp-dashboard-iframe button[class*=icon] {
  display: inline-block;
  min-height: 0;
  border-radius: 0;
  background-color: transparent !important;
  padding: 0 !important;
}
body.prp-dashboard-iframe #quickSearchSubmit::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background: url(../images/icons/launch.svg) no-repeat center;
  background-size: 16px 16px;
}
body.prp-dashboard-iframe #viewTool {
  position: fixed !important;
  left: 24px !important;
  right: auto !important;
  top: auto !important;
  bottom: 12px !important;
  margin: 0 !important;
  z-index: 5 !important;
}

/* widget_css_end */
/* header_css_start */
header#banner.linkedAccount-header {
  border-bottom: 4px solid #7630EA;
}

header#banner.linkedAccount-header #heading .headerIcons ul.nav-icons-list > li.profile-img {
  min-width: 32px;
}

header#banner {
  background-color: #1D1F27;
  border-bottom: 1px solid #ddd;
  height: 80px;
  position: relative;
  z-index: 1000;
}
header#banner #heading {
  height: 80px;
  position: relative;
  margin: 0 auto;
  padding: 0px 160px;
}
header#banner #heading .searchContainer {
  display: none;
  margin-left: 72px;
}
header#banner #heading .searchContainer .searchPart {
  width: 85%;
  float: left;
  height: 56px;
}
header#banner #heading .searchContainer .searchPart fieldset {
  padding: 0px;
  margin: 0px;
  border: none;
}
header#banner #heading .searchContainer .searchPart fieldset .input-text-wrapper {
  margin-bottom: 0px;
  margin-top: 19px;
  width: 100%;
}
header#banner #heading .searchContainer .searchPart fieldset .input-text-wrapper input {
  border: none;
  box-shadow: none;
  color: #333333;
  font-family: HPE Graphik;
  font-size: 24px;
  font-weight: 300;
  line-height: 30px;
}
header#banner #heading .searchContainer .searchPart fieldset .field-wrapper {
  display: none;
}
header#banner #heading .searchContainer .searchIcons {
  width: 15%;
  float: left;
  margin-top: 0px;
  text-align: right;
}
header#banner #heading .searchContainer .searchIcons .searchClose {
  display: inline-block;
  cursor: pointer;
}
header#banner #heading .searchContainer .searchIcons .searchClose img {
  width: 18px;
  height: 18px;
  margin-right: 10px;
}
header#banner #heading .searchContainer .searchIcons .searchClose .iconText {
  color: #FFF;
  font-family: HPE Graphik;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  vertical-align: middle;
  margin-right: 40px;
}
header#banner #heading #headerRedirect {
  color: #333333;
}
header#banner #heading .headerText {
  float: left;
  font-family: HPE Graphik;
  font-size: 26px;
  font-style: normal;
  font-weight: 600;
  margin-left: 72px;
  margin-top: 23px;
  line-height: 34px;
  margin-bottom: 23px;
  height: 34px;
  color: #FFF;
  letter-spacing: -0.28px;
}
header#banner #heading .headerText .boldFont {
  font-weight: 600;
}
header#banner #heading .headerText .lightFont {
  font-weight: 300;
}
header#banner #heading .headerIcons {
  float: right;
}
header#banner #heading .headerIcons ul.nav-icons-list {
  margin: 28px 0px;
}
header#banner #heading .headerIcons ul.nav-icons-list > li {
  margin-left: 26px;
  display: inline-block;
  position: relative;
  width: 24px;
  height: 24px;
  padding-left: 0 !important;
}
header#banner #heading .headerIcons ul.nav-icons-list > li > a {
  height: 24px;
  width: 24px;
  display: block;
}
header#banner #heading .headerIcons ul.nav-icons-list > li > a img {
  width: 22px;
  height: 22px;
  cursor: pointer;
  vertical-align: text-top;
}
header#banner #heading .headerIcons ul.nav-icons-list > li > a.deSimulation img {
  width: 24px;
  height: 24px;
  filter: brightness(0) invert(1);
}
header#banner #heading .headerIcons ul.nav-icons-list > li > a.linked-user-icon {
  height: 32px;
  width: 32px;
  border: 2px solid #7630EA;
  border-radius: 50%;
  text-align: center;
}
header#banner #heading .headerIcons ul.nav-icons-list li.mhmg-linked-account {
  min-width: 87px;
}
header#banner #heading .headerIcons ul.nav-icons-list li.mhmg-linked-account .mhmg-linked-oblong-container {
  background: #7630ea;
  border-radius: 64px;
}
header#banner #heading .headerIcons ul.nav-icons-list li.mhmg-linked-account #mhmg-linked-account-close {
  margin-left: 70%;
}
header#banner #heading .headerIcons ul.nav-icons-list li.mhmg-linked-account #mhmg-linked-account-oblong {
  min-width: 78px;
  display: flex !important;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 6px;
  color: #fff;
  cursor: pointer;
  align-items: center;
}
header#banner #heading .headerIcons ul.nav-icons-list li.mhmg-linked-account #mhmg-linked-account-oblong span {
  padding: 2px 2px 2px 5px;
  font-family: HPE Graphik;
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  color: #fff;
  text-align: left;
  max-width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
header#banner #heading .headerIcons ul.nav-icons-list li.mhmg-linked-account #mhmg-linked-account-oblong img {
  width: 12px;
  height: 12px;
}
header#banner #heading .headerIcons ul.nav-icons-list li.mhmg-linked-account #mhmg-linked-account-oblong:hover {
  text-decoration: none;
}
header#banner #heading .headerIcons ul.nav-icons-list li {
  padding-left: 20px;
  display: inline-block;
  position: relative;
}
header#banner #heading .headerIcons ul.nav-icons-list li img {
  width: 22px;
  height: 22px;
  cursor: pointer;
}
header#banner #heading .headerIcons ul.nav-icons-list li.profile-img .dropdown-menu {
  left: inherit;
  right: 0px;
  top: 47px;
  z-index: 1001;
  width: 300px;
  max-width: 450px;
  max-height: inherit;
  padding: 24px;
  border-radius: 16px;
  border: 1px solid #E5E5E5;
  background: #FFF;
  box-shadow: 0 2px 25px 0 rgba(0, 0, 0, 0.05);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
header#banner #heading .headerIcons ul.nav-icons-list li.profile-img .dropdown-menu .systemMenu {
  width: 100%;
}
header#banner #heading .headerIcons ul.nav-icons-list li.profile-img .dropdown-menu .systemMenu ul {
  padding: 0px;
  margin: 0px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
header#banner #heading .headerIcons ul.nav-icons-list li.profile-img .dropdown-menu .systemMenu ul li {
  width: 100%;
  display: block;
  height: auto;
  padding: 0px;
  float: none;
  text-align: center;
}
header#banner #heading .headerIcons ul.nav-icons-list li.profile-img .dropdown-menu .systemMenu ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: HPE Graphik;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  min-height: 40px;
  padding: 8px 18px;
  border-radius: 9999px;
  text-decoration: none;
}
header#banner #heading .headerIcons ul.nav-icons-list li.profile-img .dropdown-menu .systemMenu ul li a img,
header#banner #heading .headerIcons ul.nav-icons-list li.profile-img .dropdown-menu .systemMenu ul li a svg {
  height: 16px;
  width: 16px;
  margin-right: 0px;
}
header#banner #heading .headerIcons ul.nav-icons-list li.profile-img .dropdown-menu .systemMenu ul li.settings {
  order: 1;
  background-color: transparent;
}
header#banner #heading .headerIcons ul.nav-icons-list li.profile-img .dropdown-menu .systemMenu ul li.settings a {
  background-color: #292D3A;
  color: #FFFFFF;
  margin-top: 24px;
}
header#banner #heading .headerIcons ul.nav-icons-list li.profile-img .dropdown-menu .systemMenu ul li.settings a img {
  filter: brightness(0) invert(1);
}
header#banner #heading .headerIcons ul.nav-icons-list li.profile-img .dropdown-menu .systemMenu ul li.settings a:hover, header#banner #heading .headerIcons ul.nav-icons-list li.profile-img .dropdown-menu .systemMenu ul li.settings a:focus {
  background-color: #3E4550;
  outline: none;
}
header#banner #heading .headerIcons ul.nav-icons-list li.profile-img .dropdown-menu .systemMenu ul li.logOut {
  order: 2;
  background-color: transparent;
}
header#banner #heading .headerIcons ul.nav-icons-list li.profile-img .dropdown-menu .systemMenu ul li.logOut a {
  background-color: rgba(0, 0, 0, 0.04);
  color: #292D3A;
}
header#banner #heading .headerIcons ul.nav-icons-list li.profile-img .dropdown-menu .systemMenu ul li.logOut a:hover, header#banner #heading .headerIcons ul.nav-icons-list li.profile-img .dropdown-menu .systemMenu ul li.logOut a:focus {
  background-color: rgba(0, 0, 0, 0.08);
  outline: none;
}
header#banner #heading .headerIcons ul.nav-icons-list li.profile-img .dropdown-menu .userMenu {
  padding: 0px;
  display: block;
  width: 100%;
}
header#banner #heading .headerIcons ul.nav-icons-list li.profile-img .dropdown-menu .userMenu #dockbar-user-information {
  padding: 0px !important;
  margin: 0px !important;
}
header#banner #heading .headerIcons ul.nav-icons-list li.profile-img .dropdown-menu .userMenu ul {
  padding: 0px;
  margin: 0px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
header#banner #heading .headerIcons ul.nav-icons-list li.profile-img .dropdown-menu .userMenu ul li {
  display: block;
  padding: 0px;
}
header#banner #heading .headerIcons ul.nav-icons-list li.profile-img .dropdown-menu .userMenu ul li.divider {
  display: none !important;
  border: none !important;
  margin: 0px;
  height: 0px;
  width: 100%;
}
header#banner #heading .headerIcons ul.nav-icons-list li.profile-img .dropdown-menu .userMenu ul li ul.innerUserContainer {
  padding: 0px;
  margin: 0px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
header#banner #heading .headerIcons ul.nav-icons-list li.profile-img .dropdown-menu .userMenu ul li ul.innerUserContainer li {
  color: #67686E;
  font-family: HPE Graphik;
  font-size: 16px;
  line-height: 24px;
  font-weight: normal;
}
header#banner #heading .headerIcons ul.nav-icons-list li.profile-img .dropdown-menu .userMenu ul li ul.innerUserContainer li:first-child {
  color: #292D3A;
  font-size: 20px;
  font-weight: 600;
  line-height: 26px;
}
header#banner #heading .headerIcons ul.nav-icons-list li.profile-img .dropdown-menu .userMenu ul li ul.innerUserContainer li .userInfoLabel {
  display: block;
  color: #292D3A;
  font-family: HPE Graphik;
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
}
header#banner #heading .headerIcons ul.nav-icons-list li.profile-img .dropdown-menu .userMenu ul li ul.innerUserContainer li .userInfoValue {
  display: block;
  color: #292D3A;
  font-family: HPE Graphik;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
header#banner #heading .headerIcons ul.nav-icons-list li.profile-img .dropdown-menu .userMenu ul li ul.innerUserContainer li.subHeaderTitle {
  color: #292D3A;
  font-family: HPE Graphik;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
}
header#banner #heading .headerIcons ul.nav-icons-list li.profile-img .dropdown-menu .userMenu ul li ul.innerUserContainer li.linked-account-primary-email {
  color: #7630EA;
  word-break: break-all;
}
header#banner #heading .headerIcons ul.nav-icons-list li.profile-img .dropdown-menu .userMenu ul li.headerTitle {
  display: none !important;
  color: #292D3A;
  font-family: HPE Graphik;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  width: 100%;
}
header#banner #heading .headerIcons ul.nav-icons-list li.profile-img .dropdown-menu .userMenu ul li.headerTitle a {
  display: inline-block;
  color: #292D3A;
  width: 100%;
}
header#banner #heading .headerIcons ul.nav-icons-list li.profile-img .dropdown-menu .userMenu ul li.headerTitle .leftOne {
  float: left;
}
header#banner #heading .headerIcons ul.nav-icons-list li.profile-img .dropdown-menu .userMenu ul li.headerTitle .leftOne img {
  height: 23px;
  width: 23px;
  margin-right: 10px;
  float: left;
  margin-top: 3px;
}
header#banner #heading .headerIcons ul.nav-icons-list li.profile-img .dropdown-menu .userMenu ul li.headerTitle .rightOne {
  float: right;
}
header#banner #heading .headerIcons ul.nav-icons-list li.profile-img .dropdown-menu .userMenu ul li.headerTitle .rightOne img {
  height: 18px;
  width: 20px;
}

/* header_css_end */
/* footer_css_start */
footer {
  background-color: #1D1F27;
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 0;
}
footer .footerContainer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between;
  width: 100%;
  max-width: 1648px; /* mirror .bodyContent */
  height: auto;
  margin: 0 auto;
  padding: 0; /* no gutter so it aligns with breadcrumb / cards */
}
footer .footerContainer .footerLogo img {
  height: 30px;
  width: 105px;
}
footer .footerContainer .footerText {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin: 0;
}
footer .footerContainer .footerText .poweredBy {
  color: var(--color-text-body, #E5E5E5);
  /* paragraph/small body copy */
  font-family: var(--heading-font, "HPE Graphik");
  font-size: var(--paragraph-small-body-copy-fontSize, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--paragraph-small-body-copy-lineHeight, 24px); /* 150% */
  letter-spacing: var(--paragraph-small-body-copy-letterSpacing, 0);
  margin: 0;
  white-space: nowrap;
}
footer .footerContainer .footerText .footerLinks ul {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  margin: 0px;
  padding: 0px;
}
footer .footerContainer .footerText .footerLinks ul li {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
  line-height: var(--paragraph-small-body-copy-lineHeight, 24px);
}
footer .footerContainer .footerText .footerLinks ul li a {
  color: var(--color-text-body, #E5E5E5);
  /* paragraph/small body copy */
  font-family: var(--heading-font, "HPE Graphik");
  font-size: var(--paragraph-small-body-copy-fontSize, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--paragraph-small-body-copy-lineHeight, 24px); /* 150% */
  letter-spacing: var(--paragraph-small-body-copy-letterSpacing, 0);
  margin: 0;
  white-space: nowrap;
}
footer .footerContainer .footerText .footerLinks ul li span.divider {
  margin: 0 12px;
  padding: 0;
  line-height: var(--paragraph-small-body-copy-lineHeight, 24px);
  color: var(--color-text-body, #E5E5E5);
}

/* footer_css_end */
/* side_nav_bar_start */
.sideNavBar #side_bar_navigation {
  display: none;
  width: 270px;
  position: absolute;
  left: -250px;
  transition: 0.3s;
  height: 100%;
  top: 0px;
  -webkit-box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.5);
}
.sideNavBar #side_bar_navigation ul {
  margin: 0px;
  padding: 0px;
}
.sideNavBar #side_bar_navigation ul li.selected {
  background: transparent;
}
.sideNavBar #side_bar_navigation ul li.selected a .pageIcon {
  background-position: -25px center;
}
.sideNavBar #side_bar_navigation ul li.selected ul.child-menu {
  display: block;
  z-index: 999;
  right: 0;
  left: 270px;
  transition: 0.3s;
  background-color: transparent;
  -webkit-box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.5);
}
.sideNavBar #side_bar_navigation ul li.selected .childLayer {
  display: block;
  right: 0;
  left: 270px;
  transition: 0.3s;
}
.sideNavBar #side_bar_navigation ul li.selected .pageTitle {
  font-weight: 600;
}
.sideNavBar #side_bar_navigation ul li:nth-child(1) .child-menu {
  padding-top: 15px;
}
.sideNavBar #side_bar_navigation ul li:nth-child(2) .child-menu {
  padding-top: 102px;
}
.sideNavBar #side_bar_navigation ul li:nth-child(3) .child-menu {
  padding-top: 198px;
}
.sideNavBar #side_bar_navigation ul li:nth-child(4) .child-menu {
  padding-top: 275px;
}
.sideNavBar #side_bar_navigation ul li:nth-child(5) .child-menu {
  padding-top: 350px;
}
.sideNavBar #side_bar_navigation ul li:nth-child(6) .child-menu {
  padding-top: 430px;
}
.sideNavBar #side_bar_navigation ul li:nth-child(7) .child-menu {
  padding-top: 480px;
}
.sideNavBar #side_bar_navigation ul li:nth-child(8) .child-menu {
  padding-top: 555px;
}
.sideNavBar #side_bar_navigation ul li:nth-child(9) .child-menu {
  padding-top: 630px;
}
.sideNavBar #side_bar_navigation ul li {
  display: block;
  padding: 24px;
  cursor: pointer;
}
.sideNavBar #side_bar_navigation ul li .childLayer {
  display: none;
  width: 330px;
  position: absolute;
  left: 0px;
  transition: 0.3s;
  height: 100%;
  top: 0px;
  background-color: #666;
}
.sideNavBar #side_bar_navigation ul li a {
  color: #FFFFFF;
  font-family: HPE Graphik;
  font-size: 19px;
  font-weight: 300;
  line-height: 24px;
  text-decoration: none;
}
.sideNavBar #side_bar_navigation ul li a .pageBox {
  display: inline-block;
  position: relative;
}
.sideNavBar #side_bar_navigation ul li a .pageIcon {
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-size: 310%;
  display: block;
  float: left;
  margin-right: 13px;
  background-position: 0px center;
  position: absolute;
  top: 50%;
  margin-top: -12px;
}
.sideNavBar #side_bar_navigation ul li a .pageIcon:nth-child(2) {
  display: none;
}
.sideNavBar #side_bar_navigation ul li a .pageTitle {
  overflow: hidden;
  display: block;
  padding-left: 37px;
}
.sideNavBar #side_bar_navigation ul li ul.child-menu {
  display: none;
  width: 330px;
  top: 0px;
  position: absolute;
  left: -250px;
  transition: 0.3s;
  height: 100%;
}
.sideNavBar #side_bar_navigation ul li ul.child-menu li.selected {
  background-color: #565656;
}
.sideNavBar #side_bar_navigation ul li ul.child-menu li.selected ul.second-child-menu {
  display: block;
  z-index: 999;
  right: 0;
  left: 330px;
  transition: 0.3s;
  background-color: #fff;
  -webkit-box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.5);
}
.sideNavBar #side_bar_navigation ul li ul.child-menu li.selected a {
  font-weight: normal;
}
.sideNavBar #side_bar_navigation ul li ul.child-menu li {
  padding: 7px 24px;
}
.sideNavBar #side_bar_navigation ul li ul.child-menu li a {
  color: #FFFFFF;
  font-family: HPE Graphik;
  font-size: 19px;
  font-weight: 300;
  line-height: 24px;
  text-decoration: none;
}
.sideNavBar #side_bar_navigation ul li ul.child-menu li ul.second-child-menu {
  display: none;
  width: 350px;
  top: 0px;
  position: absolute;
  left: -250px;
  transition: 0.3s;
  height: 100%;
}
.sideNavBar #side_bar_navigation ul li ul.child-menu li ul.second-child-menu .pageImg {
  height: 175px;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
}
.sideNavBar #side_bar_navigation ul li ul.child-menu li ul.second-child-menu .pageText {
  padding: 24px 24px 48px 24px;
  border-top: 1px solid #ccc;
}
.sideNavBar #side_bar_navigation ul li ul.child-menu li ul.second-child-menu .pageText .pageTitle {
  color: #333333;
  font-family: HPE Graphik;
  font-size: 24px;
  font-weight: 300;
  line-height: 30px;
  display: block;
}
.sideNavBar #side_bar_navigation ul li ul.child-menu li ul.second-child-menu .pageText .pageDescription {
  color: #666666;
  font-family: HPE Graphik;
  font-size: 16px;
  line-height: 20px;
  display: block;
  font-weight: normal;
}
.sideNavBar #side_bar_navigation ul li ul.child-menu li ul.second-child-menu li {
  background-color: #f6f6f6;
  border-top: 1px solid #ccc;
}
.sideNavBar #side_bar_navigation ul li ul.child-menu li ul.second-child-menu li a {
  color: #000000;
  font-family: HPE Graphik;
  font-size: 19px;
  line-height: 24px;
}
.sideNavBar #side_bar_navigation ul li ul.child-menu li ul.second-child-menu li:last-child {
  border-bottom: 1px solid #ccc;
}
.sideNavBar:hover #side_bar_navigation {
  display: block;
  z-index: 999;
  right: 0;
  left: 0;
  transition: 0.3s;
  background-color: #425563;
}
.sideNavBar:hover .sideBarImg .navButton .icon-bar:nth-child(1) {
  transform: rotate(45deg);
  transform-origin: 10% 10%;
  margin-bottom: 3px;
}
.sideNavBar:hover .sideBarImg .navButton .icon-bar:nth-child(2) {
  opacity: 0;
}
.sideNavBar:hover .sideBarImg .navButton .icon-bar:nth-child(3) {
  transform: rotate(-45deg);
  transform-origin: 10% 90%;
  margin-bottom: 0px;
}
.sideNavBar .sideBarImg .navButton {
  padding: 20px 24PX;
  position: absolute;
  top: -58px;
  display: block;
}
.sideNavBar .sideBarImg .navButton .icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  margin-bottom: 5px;
  background-color: #666;
}
.sideNavBar .sideBarImg ul {
  margin: 0px;
  padding: 0px;
}
.sideNavBar .sideBarImg ul li {
  display: block;
  padding: 24px 0;
}
.sideNavBar .sideBarImg ul li .pageIcon {
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-size: 310%;
  display: block;
  background-position: -50px center;
}
.sideNavBar .sideBarImg ul li.selected {
  background: transparent;
}
.sideNavBar .sideBarImg ul li.selected .pageIcon {
  background-position: -25px center;
}

/* side_nav_bar_end */
/* login_start */
.bodyContent.sign-in-bg {
  background-image: var(--sign-in-internal-bg, url("../images/sign-in-bg.svg"));
}

.bodyContent.sign-in-bg-external {
  background-image: var(--sign-in-external-bg, url("../images/sign-in-partner-bg.svg"));
}

.bodyContent.sign-in-bg, .bodyContent.sign-in-bg-external {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: none;
  margin: 0;
  overflow: visible;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  min-height: 100vh;
  height: 100%;
}

.bodyContent.sign-in-bg {
  min-height: 512px;
}

.bodyContent.sign-in-bg #content, .bodyContent.sign-in-bg-external #content {
  width: 100%;
  max-width: 1272px;
  padding: 24px;
}

.bodyContent.sign-in-bg .portlet, .bodyContent.sign-in-bg-external .portlet {
  margin: 0 auto;
}

/* External sign-in band: hug the sign-in card to match mockup (no full-viewport swirl) */
.bodyContent.sign-in-bg-external {
  min-height: auto;
  height: auto;
  padding: 72px 24px;
  box-sizing: border-box;
}

.bodyContent.sign-in-bg-external #content {
  max-width: 1600px;
  padding: 0;
}

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

.alertMessages .notificationContainer {
  padding-top: 15px;
  padding-left: 216px;
  padding-bottom: 15px;
}
.alertMessages .notificationContainer .dangerIcon {
  float: left;
  width: 30px;
}
.alertMessages .notificationContainer .notificationContent {
  overflow: hidden;
}
.alertMessages .notificationContainer .upcoming-system-main {
  color: #333333;
  font-family: HPE Graphik;
  font-size: 22px;
  font-weight: 600;
  line-height: 30px;
}
.alertMessages .notificationContainer .date {
  color: #333333;
  font-family: HPE Graphik;
}
.alertMessages .notificationContainer .date p {
  margin-bottom: 0;
}

.homeLoginContent {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
.homeLoginContent .centered {
  min-height: 228px;
  width: 356px;
  background-color: rgba(66, 85, 99, 0.9);
  position: absolute;
  top: 380px;
  padding: 17px;
  left: 170px;
  color: #fff;
}
.homeLoginContent .centered .homeLoginContentHeader {
  color: #fff;
  font-family: HPE Graphik;
  font-size: 32px;
  line-height: 54px;
  font-weight: 600;
}
.homeLoginContent .centered .headerLandingPage {
  color: #fff;
  font-family: HPE Graphik;
  font-size: 14px;
  line-height: 20px;
}
.homeLoginContent .centered .headerdesc {
  color: #fff;
  font-family: HPE Graphik;
  font-size: 14px;
  line-height: 20px;
  font-weight: normal;
  margin-top: 5px;
  margin-bottom: 5px;
}
.homeLoginContent .centered ul.headerdescList {
  padding-left: 26px;
  margin-bottom: 0;
  width: 84%;
  font-size: 14px;
  font-family: HPE Graphik;
}
.homeLoginContent .centered ul.headerdescList li {
  padding-left: 2px;
}

.recommendedContainer .heading-div, .recentlyContainer .heading-div {
  width: 100%;
  color: #333333;
  font-family: HPE Graphik;
  font-size: 19px;
  font-weight: 600;
  line-height: 24px;
  position: relative;
  margin: 28px 0 23px 0;
}
.recommendedContainer .heading-div .headerText, .recentlyContainer .heading-div .headerText {
  background-color: #f6f6f6;
  width: auto;
  display: inline-block;
  z-index: 3;
  padding: 0 20px 0 0px;
  color: #000;
  position: relative;
  margin: 0;
}
.recommendedContainer .heading-div .headerText img, .recentlyContainer .heading-div .headerText img {
  width: 20px;
}
.recommendedContainer .heading-div .headerText span, .recentlyContainer .heading-div .headerText span {
  padding-left: 10px;
}
.recommendedContainer .heading-div:before, .recentlyContainer .heading-div:before {
  content: "";
  width: 100%;
  border-bottom: solid 3px #ccc;
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 1;
}
.recommendedContainer .recommendedInnerContainer .recommended:nth-child(odd), .recommendedContainer .recommendedInnerContainer .recently:nth-child(odd), .recommendedContainer .recentlyInnerContainer .recommended:nth-child(odd), .recommendedContainer .recentlyInnerContainer .recently:nth-child(odd), .recentlyContainer .recommendedInnerContainer .recommended:nth-child(odd), .recentlyContainer .recommendedInnerContainer .recently:nth-child(odd), .recentlyContainer .recentlyInnerContainer .recommended:nth-child(odd), .recentlyContainer .recentlyInnerContainer .recently:nth-child(odd) {
  padding-left: 0px;
}
.recommendedContainer .recommendedInnerContainer .recommended:nth-child(even), .recommendedContainer .recommendedInnerContainer .recently:nth-child(even), .recommendedContainer .recentlyInnerContainer .recommended:nth-child(even), .recommendedContainer .recentlyInnerContainer .recently:nth-child(even), .recentlyContainer .recommendedInnerContainer .recommended:nth-child(even), .recentlyContainer .recommendedInnerContainer .recently:nth-child(even), .recentlyContainer .recentlyInnerContainer .recommended:nth-child(even), .recentlyContainer .recentlyInnerContainer .recently:nth-child(even) {
  padding-right: 0px;
}
.recommendedContainer .recommendedInnerContainer a, .recommendedContainer .recentlyInnerContainer a, .recentlyContainer .recommendedInnerContainer a, .recentlyContainer .recentlyInnerContainer a {
  text-decoration: none;
}
.recommendedContainer .recommendedInnerContainer .card img, .recommendedContainer .recentlyInnerContainer .card img, .recentlyContainer .recommendedInnerContainer .card img, .recentlyContainer .recentlyInnerContainer .card img {
  height: 170px;
  width: 100%;
}
.recommendedContainer .recommendedInnerContainer .card .card-body, .recommendedContainer .recentlyInnerContainer .card .card-body, .recentlyContainer .recommendedInnerContainer .card .card-body, .recentlyContainer .recentlyInnerContainer .card .card-body {
  padding: 20px;
  background: #fff;
}
.recommendedContainer .recommendedInnerContainer .card .card-body .card-title, .recommendedContainer .recentlyInnerContainer .card .card-body .card-title, .recentlyContainer .recommendedInnerContainer .card .card-body .card-title, .recentlyContainer .recentlyInnerContainer .card .card-body .card-title {
  color: #333;
  font-family: HPE Graphik;
  font-size: 24px;
  font-weight: 600;
  line-height: 30px;
  max-height: 60px;
  overflow: hidden;
}
.recommendedContainer .recommendedInnerContainer .card .card-body .card-text, .recommendedContainer .recentlyInnerContainer .card .card-body .card-text, .recentlyContainer .recommendedInnerContainer .card .card-body .card-text, .recentlyContainer .recentlyInnerContainer .card .card-body .card-text {
  color: #666;
  font-family: HPE Graphik;
  font-size: 14px;
  line-height: 20px;
  margin: 10px 0 0 0;
  height: 60px;
  overflow: hidden;
}
.recommendedContainer .recommendedInnerContainer .card .card-body .card-text *, .recommendedContainer .recentlyInnerContainer .card .card-body .card-text *, .recentlyContainer .recommendedInnerContainer .card .card-body .card-text *, .recentlyContainer .recentlyInnerContainer .card .card-body .card-text * {
  color: #666;
  font-family: HPE Graphik;
  font-size: 14px;
  line-height: 20px;
  margin: 0px;
  height: 60px;
  overflow: hidden;
}

.tools-card .card {
  border: none;
  border-radius: 0;
}
.tools-card .card-body {
  padding: 20px;
}
.tools-card .card-body .tools-header span {
  color: #333333;
  font-family: HPE Graphik;
  font-size: 24px;
  font-weight: 300;
  line-height: 30px;
}
.tools-card .card-body .tools-header small {
  color: #333333;
  font-family: HPE Graphik;
  font-size: 18px;
  font-weight: 300;
  line-height: 24px;
  display: block;
}
.tools-card .card-body .tools-search {
  background-repeat: no-repeat;
  background-size: 12px;
  background-position: right 10px center;
  margin-top: 5px;
  border: 2px solid #ddd;
  padding: 5px 10px 5px 10px;
}
.tools-card .card-body .tools-search label {
  height: 12px;
  font-size: 12px;
  color: #646464;
  font-family: HPE Graphik;
  margin-bottom: 0;
  display: block;
}
.tools-card .card-body .tools-search input {
  height: 15px;
  font-size: 13px;
  font-family: HPE Graphik;
  width: 100%;
  border: 0;
  background: 0;
}
.tools-card .card-body .tools-search-button {
  margin-top: 10px;
  /* New branding: match the dashboard tool-tile "Launch" pill
     (rounded light-gray secondary pill, HPE Graphik 600, #292D3A
     text) so the QuickSearchWidget buttons look consistent with the
     other tool widgets instead of the legacy outlined buttons. */
  /* Search = secondary action: subtle outlined pill */
  /* View Tool = primary launch action: filled light-gray pill with
     the launch (external-link) icon used across the tool tiles */
}
.tools-card .card-body .tools-search-button #searcBtn,
.tools-card .card-body .tools-search-button #GoBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  border-radius: 9999px;
  font-size: 16px;
  line-height: 20px;
  font-family: "HPE Graphik", Arial, sans-serif;
  font-weight: 600;
  padding: 6px 20px;
  box-shadow: none;
  transition: background 0.15s ease-in-out;
}
.tools-card .card-body .tools-search-button #searcBtn {
  border: 1px solid #C6C9D2;
  background: transparent;
  color: #292D3A;
}
.tools-card .card-body .tools-search-button #searcBtn:hover {
  background: rgba(0, 0, 0, 0.04);
}
.tools-card .card-body .tools-search-button #GoBtn {
  border: none;
  background: rgba(0, 0, 0, 0.04);
  color: #292D3A;
  margin-top: 28px;
}
.tools-card .card-body .tools-search-button #GoBtn::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background: url(../images/icons/launch.svg) no-repeat center;
  background-size: 16px 16px;
}
.tools-card .card-body .tools-search-button #GoBtn:hover {
  background: rgba(0, 0, 0, 0.08);
}
.tools-card .card-body .tools-image {
  margin-top: 10px;
}
.tools-card .card-body .tools-image img {
  height: 170px;
  width: 100%;
}
.tools-card .card-body .direction_action {
  margin: 0;
  padding: 0;
}
.tools-card .card-body .direction_action li {
  display: block;
  list-style: none;
  margin-top: 22px;
}
.tools-card .card-body .direction_action li span {
  margin-left: 7px;
  font-family: HPE Graphik;
  color: #000000;
  font-family: HPE Graphik;
  font-size: 19px;
  font-weight: 600;
  line-height: 24px;
}

.recPromotions {
  padding: 20px;
  margin-bottom: 0px;
  border: none;
  border-radius: 0px;
}
.recPromotions .promotionHeader {
  border-bottom: 2px solid #614767;
  margin-bottom: 10px;
  padding-bottom: 12px;
}
.recPromotions .promotionHeader .rightOne {
  width: 65%;
  float: left;
}
.recPromotions .promotionHeader .rightOne .heading-div {
  color: #333;
  font-family: HPE Graphik;
  font-size: 24px;
  font-weight: 600;
  line-height: 30px;
}
.recPromotions .promotionHeader .LeftOne {
  width: 35%;
  float: right;
}
.recPromotions .promotionHeader .LeftOne .heading-div {
  padding-right: 15px;
  text-align: right;
}
.recPromotions .promotionHeader .LeftOne .heading-div img {
  width: 20px;
}
.recPromotions .promotionHeader .LeftOne .heading-div span {
  font-size: 19px;
  padding-left: 10px;
  font-family: HPE Graphik;
  font-weight: 600;
  line-height: 30px;
}
.recPromotions .promotionHeader .LeftOne .heading-div a {
  color: #000;
}
.recPromotions .innerContainerContent {
  width: 100%;
  display: inline-block;
}
.recPromotions .innerContainerContent .innerContainer {
  width: 50%;
  float: left;
  padding-top: 12px;
}
.recPromotions .innerContainerContent .innerContainer .promotionsNumber {
  width: 20px;
  float: left;
  margin-right: 5px;
  font-size: 36px;
  color: #333;
  font-weight: 600;
  line-height: 36px;
  font-family: HPE Graphik;
}
.recPromotions .innerContainerContent .innerContainer .promotionContent {
  overflow: hidden;
  height: 120px;
}
.recPromotions .innerContainerContent .innerContainer .promotionContent .promotions-header p {
  color: #333;
  margin-bottom: 0;
  font-family: HPE Graphik;
  font-size: 24px;
  font-weight: 600;
  line-height: 30px;
}
.recPromotions .innerContainerContent .innerContainer .promotionContent .promotions-header a {
  color: #333;
  margin-bottom: 0;
  font-family: HPE Graphik;
  font-size: 24px;
  font-weight: 600;
  line-height: 30px;
  min-height: 30px;
  display: block;
  max-height: 60px;
  overflow: hidden;
}
.recPromotions .innerContainerContent .innerContainer .promotionContent .promotions-desc {
  height: 60px;
  overflow: hidden;
}
.recPromotions .innerContainerContent .innerContainer .promotionContent .promotions-desc p {
  font-family: HPE Graphik;
  font-size: 14px;
  line-height: 20px;
  margin: 0;
  color: #666;
}

.toolHeader {
  width: 100%;
  color: #333;
  font-family: HPE Graphik;
  font-size: 19px;
  font-weight: 600;
  line-height: 24px;
  position: relative;
  margin: 48px 0 24px 0;
  display: inline-block;
}
.toolHeader:before {
  content: "";
  width: 100%;
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 1;
}
.toolHeader .leftText {
  background-color: #f6f6f6;
  width: auto;
  display: inline-block;
  z-index: 3;
  padding: 0 24px 0 0;
  position: relative;
  margin: 0;
  float: left;
  color: #292D3A;
  font-family: HPE Graphik;
  font-size: 52px;
  font-weight: 600;
  line-height: 58px;
  letter-spacing: -1.04px;
}
.toolHeader .accesstools {
  float: right;
  position: relative;
  z-index: 3;
  background-color: #f6f6f6;
  margin-top: 2px;
}
.toolHeader .accesstools .nextLink {
  margin-right: 0px;
}
.toolHeader .rightText {
  background-color: #f6f6f6;
  width: auto;
  display: inline-block;
  z-index: 3;
  padding: 0 0 0 14px;
  position: relative;
  margin: 0;
  float: right;
  color: #333333;
  font-family: HPE Graphik;
  font-size: 19px;
  font-weight: 600;
  line-height: 24px;
}

#carouselExampleIndicators:hover {
  -webkit-box-shadow: 0 6px 24px 0 rgba(0, 0, 0, 0.35);
  -moz-box-shadow: 0 6px 24px 0 rgba(0, 0, 0, 0.35);
  box-shadow: 0 6px 24px 0 rgba(0, 0, 0, 0.35);
}
#carouselExampleIndicators:hover .carousel-inner .img__wrap .carouselLabel {
  display: block;
}
#carouselExampleIndicators .carouselIndicatorsPositions {
  left: 20px;
  width: auto;
  margin-left: 0;
  bottom: 0;
  position: absolute;
  bottom: 24px;
  z-index: 15;
  padding-left: 0;
  list-style: none;
  text-align: center;
}
#carouselExampleIndicators .carouselIndicatorsPositions a {
  color: #666666;
  vertical-align: text-top;
}
#carouselExampleIndicators .carouselIndicatorsPositions a.leftCarousel {
  display: inline-block;
  margin-right: 12px;
}
#carouselExampleIndicators .carouselIndicatorsPositions a.rightCarousel {
  display: inline-block;
  margin-left: 12px;
}
#carouselExampleIndicators .carousel-indicators {
  left: 0;
  width: auto;
  margin-left: 0;
  bottom: 0;
  position: relative;
  padding: 0;
  display: inline-block;
  margin: 0;
}
#carouselExampleIndicators .carousel-indicators li {
  width: 15px;
  height: 15px;
  border-radius: 0;
  margin: 0 2px;
  border: 3px solid #FFF;
  background-color: #ddd;
  vertical-align: sub;
}
#carouselExampleIndicators .carousel-indicators li.active {
  width: 15px;
  height: 15px;
  border: 3px solid var(--hpe-color-decorative-brand);
  background-color: #fff;
}
#carouselExampleIndicators .carousel-indicators .carousel-control {
  background-image: none;
}
#carouselExampleIndicators .carousel-inner {
  position: relative;
  overflow: hidden;
  width: 100%;
}
#carouselExampleIndicators .carousel-inner .img__wrap {
  height: 100%;
  width: 100%;
}
#carouselExampleIndicators .carousel-inner .img__wrap .carouselLabel {
  position: absolute;
  bottom: 175px;
  font-size: 14px;
  letter-spacing: 2px;
  color: #fff;
  line-height: 20px;
  padding: 7px 24px;
  background-color: rgba(51, 51, 51, 0.3);
  z-index: 10;
  display: none;
}
#carouselExampleIndicators .carousel-inner .img__wrap img.d-block {
  height: 358px;
  width: 100%;
}
#carouselExampleIndicators .carousel-inner .img__wrap .color1 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(45deg, #614767 0%, #CE94DB 100%);
  color: #fff;
  visibility: hidden;
  opacity: 0;
  width: 100%;
  float: left;
  z-index: 9;
  padding-left: 26px;
  padding-top: 24px;
  padding-right: 28px;
  font-family: HPE Graphik;
  font-size: 16px;
  line-height: 20px;
  height: 100%;
}
#carouselExampleIndicators .carousel-inner .img__wrap .color1 p {
  margin: 0;
}
#carouselExampleIndicators .carousel-inner .img__wrap .learmore {
  display: none;
  text-decoration: none;
  margin-top: 3px;
  color: #333333;
  font-size: 19px;
  font-weight: 600;
  line-height: 24px;
}
#carouselExampleIndicators .carousel-inner .img__wrap .learmore span {
  padding-left: 15px;
  color: #333333;
  font-family: HPE Graphik;
  font-size: 19px;
  font-weight: 600;
}
#carouselExampleIndicators .carousel-inner .img__wrap .learmore img {
  width: 20px;
  height: 18px;
}
#carouselExampleIndicators .carousel-inner .img__wrap:hover .color1 {
  visibility: visible;
  opacity: 0.9;
}
#carouselExampleIndicators .carousel-inner .img__wrap:hover .learmore {
  display: block;
}
#carouselExampleIndicators .carousel-inner .myCap {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 10;
  padding: 0;
  color: #fff;
  text-align: left;
  width: 65.5%;
}
#carouselExampleIndicators .carousel-inner .myCap .car-div {
  background-color: #fff;
  padding: 20px;
  height: 175px;
  width: 100%;
}
#carouselExampleIndicators .carousel-inner .myCap .car-div span.carouselMainDescription {
  color: #333;
  font-family: HPE Graphik;
  font-size: 24px;
  font-weight: 600;
  line-height: 30px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  height: 60px;
  display: block;
}
#carouselExampleIndicators .carousel-inner .myCap .car-div span.carouselMainDescription p {
  margin: 0px;
}

/* home_css_end */
/* tools_start */
.Tools.modal-open {
  overflow: initial;
}

#toolModal .modal-dialog {
  top: 0 !important;
  margin-top: 0;
}
#toolModal .modal-dialog .modal-content {
  border-radius: 0;
}
#toolModal .modal-dialog .modal-content .modal-footer {
  padding: 0 48px 48px;
  border: 0px;
}
#toolModal .modal-dialog .modal-content .modal-footer button {
  color: #333333;
  font-family: HPE Graphik;
  font-size: 19px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
  height: 42px;
  border: 2px solid #333333;
  border-radius: 0;
  padding: 7px 37px 11px;
}
#toolModal .modal-dialog .modal-content .modal-footer button:hover {
  transition: 0.1s ease-in-out;
  box-shadow: 0px 0px 0px 2px #333333;
  outline-width: 0;
  background-color: #fff;
}
#toolModal .modal-dialog .modal-content .modal-body {
  padding: 0 48px;
}
#toolModal .modal-dialog .modal-content .modal-body .popUpHeader {
  color: #333333;
  font-family: HPE Graphik;
  font-size: 48px;
  font-weight: 300;
  line-height: 54px;
  margin: 48px 0 0 0;
}
#toolModal .modal-dialog .modal-content .modal-body .popUpContent {
  color: #333333;
  font-family: HPE Graphik;
  font-size: 24px;
  font-weight: 300;
  line-height: 30px;
  margin-top: 24px;
  min-height: 156px;
  border-bottom: 1px solid #979797;
}
#toolModal .modal-dialog .modal-content .modal-header {
  border: none;
  padding: 0;
}
#toolModal .modal-dialog .modal-content .modal-header .btn-toolbar {
  width: 24px;
  height: 24px;
  position: absolute;
  right: 27px;
  top: 27px;
  z-index: 11;
}
#toolModal .modal-dialog .modal-content .modal-header .close {
  height: 18px;
  width: 18px;
  background-image: url("../images/icons/User_close.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-color: transparent;
  outline: none;
  margin: 3px 3px;
}
#toolModal .modal-dialog .modal-content .modal-header span {
  opacity: 1;
  display: none;
}

#my-content-div {
  /* Same trailing-margin correction as #my-content-div1 further down: the last
     button's `margin-right: 24px` pushed the CTA row 24px inside the card's
     48px content edge, so Save/Cancel did not line up with the title, the
     message or the divider above them. The gap BETWEEN the buttons is
     untouched. */
}
#my-content-div .hiddenPart {
  display: none;
}
#my-content-div .modal-dialog {
  position: fixed; /* For fix modal position CR#352390 */
  outline: none; /* For remove border from modal CR#352401 */
  top: 0 !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateX(-50%);
  margin: 0 !important;
  /* The pin list grows with the number of tools, so cap it to the viewport
     and scroll inside the card - otherwise a long list pushes Save/Cancel
     below the fold with no way to reach them. */
  max-width: calc(100vw - 32px);
  max-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  /* The 12px radius lives on .modal-content, but the overflow above turns
     THIS element into a clipping box - and a clip box with no radius
     shears the child's rounded corners off, so the card rendered square.
     Match the radius here so the clip follows the card's shape. */
  border-radius: 12px;
  margin-top: 0;
  z-index: 1035 !important;
}
#my-content-div .modal-dialog .modal-content {
  border-radius: 12px;
  border: 0px; /* For remove border from modal CR#352401 */
}
#my-content-div .modal-dialog .modal-content .modal-footer {
  padding: 0 48px 48px;
  border: 0px;
  /* Pin Tool dialog Cancel - the Remove Quick Link popup's Cancel
     (`#my-content-div4 .cancelButton` in cpp-dashboard-widget
     view.jsp) is the branding reference: a plain text action with NO
     fill, NO border and NO shadow at rest, tinting only on hover.
     The #f7f7f7 pill above read as a second filled button beside
     Save, and the box-shadow reset is what keeps the legacy
     `.btn-toolbar > .btn:first-child` hover ring (2px #333) off this
     button - Cancel is the first button in this footer.
     Box metrics deliberately stay in step with .sucessButton above so
     the pair keeps one height and one baseline.
     `.dialogFooterToolbar` is set by PinToolModal.jsx, so only
     footers pairing Cancel with a primary action are affected. */
}
#my-content-div .modal-dialog .modal-content .modal-footer .sucessButton {
  border: 1px solid #292D3A;
  background-color: #292D3A;
  color: #fff;
  font-family: HPE Graphik;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
  padding: 7px 35px;
  margin: 24px 24px 0 0;
  border-radius: 28px;
  outline: none;
}
#my-content-div .modal-dialog .modal-content .modal-footer .sucessButton:hover {
  transition: 0.1s ease-in-out;
  outline-width: 0;
  background-color: #3E4550;
  border: 1px solid #3E4550;
}
#my-content-div .modal-dialog .modal-content .modal-footer .cancelButton {
  border: 0;
  color: #292d3a;
  background-color: #f7f7f7;
  font-family: HPE Graphik;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
  padding: 7px 35px;
  margin: 24px 24px 0 0;
  border-radius: 28px;
  outline: none;
}
#my-content-div .modal-dialog .modal-content .modal-footer .cancelButton:hover {
  transition: 0.1s ease-in-out;
  outline-width: 0;
  background-color: #e6e8e9 !important;
}
#my-content-div .modal-dialog .modal-content .modal-footer .dialogFooterToolbar .cancelButton {
  border: none;
  color: #292d3a;
  background-color: transparent;
  box-shadow: none;
}
#my-content-div .modal-dialog .modal-content .modal-footer .dialogFooterToolbar .cancelButton:focus, #my-content-div .modal-dialog .modal-content .modal-footer .dialogFooterToolbar .cancelButton:active, #my-content-div .modal-dialog .modal-content .modal-footer .dialogFooterToolbar .cancelButton:active:focus {
  border: none;
  background-color: transparent;
  box-shadow: none;
}
#my-content-div .modal-dialog .modal-content .modal-footer .dialogFooterToolbar .cancelButton:hover {
  transition: 0.1s ease-in-out;
  outline-width: 0;
  border: none !important;
  background-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: none !important;
}
#my-content-div .modal-dialog .modal-content .modal-footer .dialogFooterToolbar .cancelButton:focus-visible {
  outline: 2px solid #01A982;
  outline-offset: 2px;
}
#my-content-div .modal-dialog .modal-content .modal-body {
  padding: 0 48px;
  min-height: 368px;
}
#my-content-div .modal-dialog .modal-content .modal-body .hiddenPart {
  display: block;
}
#my-content-div .modal-dialog .modal-content .modal-body h3 {
  color: #292d3a;
  font-family: HPE Graphik;
  font-size: 28px;
  font-weight: 400;
  line-height: 34px;
  margin: 48px 0 0 0;
}
#my-content-div .modal-dialog .modal-content .modal-body .toolSave {
  border: 1px solid #292D3A;
  background-color: #292D3A;
  color: #fff;
  font-family: HPE Graphik;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
  padding: 7px 35px;
  margin: 20px 20px 0 0;
  border-radius: 28px;
}
#my-content-div .modal-dialog .modal-content .modal-body .toolCancel {
  border: 0;
  color: #292d3a;
  background-color: #f7f7f7;
  font-family: HPE Graphik;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
  padding: 7px 35px;
  margin: 20px 20px 0 0;
  border-radius: 28px;
}
#my-content-div .modal-dialog .modal-content .modal-body .toolSubHeaderText {
  margin-top: 24px;
  display: block;
  color: #67686E;
  font-family: HPE Graphik;
  font-size: 16px;
  font-weight: 400;
  line-height: 30px;
}
#my-content-div .modal-dialog .modal-content .modal-body .toolNoteText {
  color: #67686E;
  font-family: HPE Graphik;
  font-size: 12px;
  line-height: 20px;
  display: block;
  margin-bottom: 24px;
}
#my-content-div .modal-dialog .modal-content .modal-header {
  border: none;
  padding: 0;
}
#my-content-div .modal-dialog .modal-content .modal-header .btn-toolbar {
  width: 24px;
  height: 24px;
  position: absolute;
  right: 27px;
  top: 27px;
  z-index: 11;
}
#my-content-div .modal-dialog .modal-content .modal-header .close {
  height: 18px;
  width: 18px;
  background-image: url("../images/icons/User_close.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-color: transparent;
  outline: none;
  margin: 3px 3px;
}
#my-content-div .modal-dialog .modal-content .modal-header span {
  opacity: 1;
  display: none;
}
#my-content-div .modal-footer .btn-toolbar-content button:last-child {
  margin-right: 0 !important;
}
#my-content-div .yui3-widget-mask {
  background-color: rgb(51, 51, 51);
  opacity: 0.7;
}
#my-content-div button.popupCloseSubscribe.toolpopupclose {
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  position: absolute;
  top: 27px;
  right: 27px;
  z-index: 11;
}
#my-content-div ul.radio-box-list {
  padding: 24px 0 36px;
  margin: 0;
}
#my-content-div ul.radio-box-list li {
  display: block;
  margin-bottom: 12px;
}
#my-content-div ul.radio-box-list li .container-radiobox .label {
  font-weight: normal;
  padding: 0 10px;
  margin: 0;
  color: #333333;
  font-family: HPE Graphik;
  font-size: 16px;
  line-height: 24px;
}

#my-content-div1 {
  /* Every button in these footers carries `margin: 24px 24px 0 0`, and that
     trailing `margin-right` applies to the LAST button too - which pushed the
     whole row 24px inside the card's 48px content edge, so the CTAs no longer
     lined up with the title, the message or the divider above them (measured:
     28px short of the divider's right edge, against 4px on the already-fixed
     dialogs). Zero it on the last button only; the 24px gap BETWEEN the
     buttons is untouched. */
}
#my-content-div1 .hiddenPart {
  display: none;
}
#my-content-div1 .modal-dialog {
  /* Centre horizontally, anchored to the top of the viewport - see the
     matching comment on #_esmErrorPopup .modal-dialog in _custom.scss. */
  position: fixed;
  outline: none;
  top: 0 !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateX(-50%);
  margin: 0 !important;
  width: 750px;
  max-width: calc(100vw - 32px) !important;
  max-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  /* The 12px radius lives on .modal-content, but the overflow above turns
     THIS element into a clipping box - and a clip box with no radius
     shears the child's rounded corners off, so the card rendered square.
     Match the radius here so the clip follows the card's shape. */
  border-radius: 12px;
  /* MUST stay: the backdrop (.yui3-widget-mask) is painted at z-index 1035
     inline, so without this the dialog falls to `z-index: auto` and its own
     mask covers it - the card renders but its title and message are greyed
     out behind the backdrop. AlertPopupModal hides this because it sets
     zIndex inline on #dialogId; RemovePinnedToolModal does not, so the
     remove-pin dialog is the one that breaks. */
  z-index: 1035 !important;
}
#my-content-div1 .modal-dialog .modal-content {
  border-radius: 12px;
}
#my-content-div1 .modal-dialog .modal-content .modal-footer {
  padding: 25px 48px 25px;
  border: 0px;
  /* Remove Pin Tool dialog Cancel - same branding reference and same
     reasoning as #my-content-div above (Remove Quick Link popup's
     Cancel: no fill, no border, no shadow; hover is a tint only).
     `.dialogFooterToolbar` is set by RemovePinnedToolModal.jsx only,
     so the Cancel-only footers that AlertPopupModal and ResponseModal
     also render inside #my-content-div1 keep their current styling. */
  /* The ESM access popups (Approval required / Access unavailable) use
     .primaryButton for their call to action, and that rule sets
     `margin: 0 !important` globally. Inside this footer that dropped the
     CTA out of the 24px rhythm every sibling here uses, so it sat on a
     different baseline from .cancelButton and hugged the footer edge.
     Re-apply the same spacing, and keep the row on one baseline so a
     single-CTA popup lines up exactly like the two-button one. */
}
#my-content-div1 .modal-dialog .modal-content .modal-footer .sucessButton {
  border: 1px solid #292D3A;
  background-color: #292D3A;
  color: #fff;
  font-family: HPE Graphik;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
  padding: 7px 35px;
  margin: 24px 24px 0 0;
  border-radius: 28px;
  outline: none;
}
#my-content-div1 .modal-dialog .modal-content .modal-footer .sucessButton:hover {
  transition: 0.1s ease-in-out;
  outline-width: 0;
  background-color: #3E4550;
  border: 1px solid #3E4550;
}
#my-content-div1 .modal-dialog .modal-content .modal-footer .cancelButton {
  border: 0;
  color: #292d3a;
  background-color: #f7f7f7;
  font-family: HPE Graphik;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
  padding: 7px 35px;
  margin: 24px 24px 0 0;
  border-radius: 28px;
  outline: none;
}
#my-content-div1 .modal-dialog .modal-content .modal-footer .cancelButton:hover {
  transition: 0.1s ease-in-out;
  outline-width: 0;
  background-color: #e6e8e9 !important;
}
#my-content-div1 .modal-dialog .modal-content .modal-footer .dialogFooterToolbar .cancelButton {
  border: none;
  color: #292d3a;
  background-color: transparent;
  box-shadow: none;
}
#my-content-div1 .modal-dialog .modal-content .modal-footer .dialogFooterToolbar .cancelButton:focus, #my-content-div1 .modal-dialog .modal-content .modal-footer .dialogFooterToolbar .cancelButton:active, #my-content-div1 .modal-dialog .modal-content .modal-footer .dialogFooterToolbar .cancelButton:active:focus {
  border: none;
  background-color: transparent;
  box-shadow: none;
}
#my-content-div1 .modal-dialog .modal-content .modal-footer .dialogFooterToolbar .cancelButton:hover {
  transition: 0.1s ease-in-out;
  outline-width: 0;
  border: none !important;
  background-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: none !important;
}
#my-content-div1 .modal-dialog .modal-content .modal-footer .dialogFooterToolbar .cancelButton:focus-visible {
  outline: 2px solid #01A982;
  outline-offset: 2px;
}
#my-content-div1 .modal-dialog .modal-content .modal-footer .btn-toolbar-content {
  display: flex;
  align-items: center;
}
#my-content-div1 .modal-dialog .modal-content .modal-footer .primaryButton {
  margin: 24px 24px 0 0 !important;
}
#my-content-div1 .modal-dialog .modal-content .modal-body {
  padding: 0 48px;
}
#my-content-div1 .modal-dialog .modal-content .modal-body .hiddenPart {
  display: block;
}
#my-content-div1 .modal-dialog .modal-content .modal-body h3 {
  color: #292d3a;
  font-family: HPE Graphik;
  font-size: 28px;
  font-weight: 400;
  line-height: 34px;
  margin: 0;
}
#my-content-div1 .modal-dialog .modal-content .modal-body .toolRemove {
  border: 2px solid var(--hpe-color-decorative-brand);
  background-color: var(--hpe-color-decorative-brand);
  color: #fff;
  font-family: HPE Graphik;
  font-size: 19px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
  padding: 7px 35px;
  margin: 24px 24px 0 0;
}
#my-content-div1 .modal-dialog .modal-content .modal-body .toolCancel {
  border: 2px solid #333;
  color: #333;
  background-color: #fff;
  font-family: HPE Graphik;
  font-size: 19px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
  padding: 7px 35px;
  margin: 24px 24px 0 0;
}
#my-content-div1 .modal-dialog .modal-content .modal-body .toolSubHeaderText {
  color: #292d3a;
  font-family: HPE Graphik;
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  margin-top: 20px;
  display: block;
}
#my-content-div1 .modal-dialog .modal-content .modal-header {
  border: none;
  padding: 0;
}
#my-content-div1 .modal-dialog .modal-content .modal-header .btn-toolbar {
  width: 24px;
  height: 24px;
  position: absolute;
  right: 27px;
  top: 27px;
  z-index: 11;
}
#my-content-div1 .modal-dialog .modal-content .modal-header .close {
  height: 18px;
  width: 18px;
  background-image: url("../images/icons/User_close.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-color: transparent;
  outline: none;
  margin: 3px 3px;
}
#my-content-div1 .modal-dialog .modal-content .modal-header span {
  opacity: 1;
  display: none;
}
#my-content-div1 .modal-dialog.esmAccessErrorModal .modal-content .modal-footer .btn-toolbar-content {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
}
#my-content-div1 .modal-dialog.esmAccessErrorModal .modal-content .modal-footer .btn-toolbar-content > div {
  display: flex;
  align-items: center;
  /* Wrap on narrow cards. Without this the two pills are forced
     onto one line and the wider label ("Tools catalog") breaks
     inside its pill and gets clipped; wrapping restores the
     stacked layout these buttons had on small screens. */
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 16px;
}
#my-content-div1 .modal-dialog.esmAccessErrorModal .modal-content .modal-footer .sucessButton,
#my-content-div1 .modal-dialog.esmAccessErrorModal .modal-content .modal-footer .primaryButton,
#my-content-div1 .modal-dialog.esmAccessErrorModal .modal-content .modal-footer .cancelButton {
  margin-right: 0 !important;
  white-space: nowrap;
}
#my-content-div1 .modal-footer .btn-toolbar-content button:last-child {
  margin-right: 0 !important;
}
#my-content-div1 .yui3-widget-mask {
  background-color: rgb(51, 51, 51);
  opacity: 0.7;
}
#my-content-div1 button.popupCloseSubscribe.toolpopupclose {
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  position: absolute;
  top: 27px;
  right: 27px;
  z-index: 11;
}

.modal-dialog .modal-content .modal-body .toolsInnerContainer {
  border-bottom: 1px solid #979797;
  padding-bottom: 48px;
}

.toolContainer {
  position: relative;
}
.toolContainer .tooltip {
  position: absolute;
  top: -25px !important;
  border: none;
}
.toolContainer a {
  display: block;
  height: 20px;
  width: 20px;
  background-repeat: no-repeat;
  background-size: cover;
  cursor: pointer;
}
.toolContainer a.Subscribe {
  background-image: url("../images/icons/Carot-down.png");
}
.toolContainer a.UnSubscribe {
  background-image: url("../images/icons/unsuscribe.png");
}

.toolsContainer {
  background-color: #FFFFFF;
}
.toolsContainer .toolsCatalog .card {
  background-color: #F7F7F7;
  border: 0px;
  border-radius: 12px;
}
.toolsContainer .toolsCatalog .card .card-body {
  padding: 40px;
}
.toolsContainer .toolsCatalog .card .card-body .tools-catalog-list {
  margin-top: 24px;
}
.toolsContainer .toolsCatalog .card .card-body .tools-catalog-list .tools-catalog-list-ul {
  padding: 0;
  margin: 0;
}
.toolsContainer .toolsCatalog .card .card-body .tools-catalog-list .tools-catalog-list-ul li {
  list-style: none;
  font-weight: 300;
  color: #333333;
  font-family: HPE Graphik;
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
  padding: 5px 0px;
}
.toolsContainer .toolsCatalog .card .card-body .tools-catalog-list .tools-catalog-list-ul li:last-child() {
  border-bottom: 0px;
}
.toolsContainer .toolsCatalog .card .card-body .tools-catalog-list .tools-catalog-list-ul li.selected {
  font-weight: 600;
  border-right: 3px solid var(--hpe-color-decorative-brand);
}
.toolsContainer .toolsCatalog .card .card-body .tools-catalog-list .tools-catalog-list-ul li.pinnedTools {
  border-bottom: 0;
  border-top: 2px solid #D4D8DB;
  padding: 24px 0 0 !important;
  margin-top: 20px !important;
}

.toolsDetailsContainer .card-body {
  padding: 24px 24px 10px 24px;
  background: #fff;
}
.toolsDetailsContainer .card-body .header-image img {
  width: 100%;
  height: auto;
}
.toolsDetailsContainer .card-body .tools-catalog-header span {
  font-size: 28px;
  font-weight: 600;
  color: #292D3A;
}
.toolsDetailsContainer .card-body .tools-catalog-search {
  position: relative;
}
.toolsDetailsContainer .card-body .tools-catalog-search label {
  width: 100%;
  margin-bottom: 0;
  font-family: HPE Graphik;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  color: #292D3A;
  cursor: auto;
}
.toolsDetailsContainer .card-body .tools-catalog-search input {
  width: 60%;
  border: 1px solid #B1B9BE;
  background: 0;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  color: #000000;
  height: 36px;
  font-family: HPE Graphik;
  font-weight: 600;
  font-size: 16px;
  border-radius: 8px;
}
.toolsDetailsContainer .card-body .tools-catalog-search ::placeholder {
  color: #606A70;
  font-size: 16px;
  opacity: 0.3;
}
.toolsDetailsContainer .card-body .tools-catalog-search .search-button {
  width: 24px;
  height: 24px;
  position: relative;
  top: 8px;
  right: 35px;
  padding: 0px;
  border: none;
  background: none;
  background-image: url(../images/icons/SearchIcon.svg);
  background-size: 18px;
  background-repeat: no-repeat;
  background-position: center;
}
.toolsDetailsContainer .card-body .tools-catalog-search .search-cross {
  width: 24px;
  height: 24px;
  position: relative;
  right: 35px;
  padding: 0px;
  border: none;
  background: none;
  background-size: 24px;
  background-repeat: no-repeat;
  background-position: center;
}
.toolsDetailsContainer .card-body .displa-rows {
  float: right;
  position: relative;
  margin-top: 14px; /* #352376 : dropdown adjustment */
  left: 65px; /* #352376 : dropdown adjustment */
}
.toolsDetailsContainer .card-body .displa-rows > span {
  font-size: 16px;
  font-family: HPE Graphik;
}
.toolsDetailsContainer .card-body .displa-rows #selectRows {
  border: 2px solid #ddd;
  background: 0;
  background-image: url(../images/icons/carot-down-new.svg);
  background-position: center right 10px;
  background-size: 10px;
  width: 70px;
  height: 35px;
  background-repeat: no-repeat;
  border-radius: 0px;
  font-weight: 600;
  font-size: 13px;
  padding-left: 10px;
  justify-content: flex-end;
  margin-left: 5px;
}
.toolsDetailsContainer .card-body .grid-list-buttons {
  padding: 0;
  margin-bottom: 0px;
  float: right;
}
.toolsDetailsContainer .card-body .grid-list-buttons li {
  display: inline-block;
  padding-left: 8px;
  padding-top: 4px;
  list-style: none;
  height: 36px;
  width: 36px;
}
.toolsDetailsContainer .card-body .toolsALignment.inactive {
  padding: 0 20px 20px;
  background: #fff;
  margin-top: 0;
}

#viewBtn {
  border: none;
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 20px;
  background-color: #F7F7F7;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  float: right;
  font-family: HPE Graphik;
  color: var(--hpe-button-default-rest-textColor, #292D3A);
  height: 36px;
  width: 155px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  background-image: url(../images/icons/launch.svg);
  background-repeat: no-repeat;
  background-size: 16px;
  background-position: right 30px top 10px;
}
#viewBtn:hover {
  transition: 0.1s ease-in-out;
  background-color: #E6E8E9;
  outline-width: 0;
}

.viewBtn {
  border: none;
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 20px;
  background-color: #F7F7F7;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  float: right;
  font-family: HPE Graphik;
  color: var(--hpe-button-default-rest-textColor, #292D3A);
  height: 36px;
  width: 155px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.viewBtn:hover {
  transition: 0.1s ease-in-out;
  background-color: #E6E8E9;
  box-shadow: none;
  outline-width: 0;
}

.Tools {
  /* #352399 : change Expand/Collapse animation timing 1sec to 0.3sec */
}
.Tools .toolsTitleHeader {
  width: 100%;
  float: left;
}
.Tools li.pinnedTools {
  border-bottom: none;
  border-top: 2px solid #666666;
}
.Tools .subContainer {
  clear: both;
  padding: 24px 0;
}
.Tools #tool-name-list .desc-content .toolsTitle {
  width: 70%;
}
.Tools .toolsTitleHeader .down-arrow {
  float: right;
  cursor: pointer;
  height: 36px;
  width: 36px;
  background-color: #F7F7F7;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.Tools .toolsTitleHeader .down-arrow:hover {
  transition: 0.1s ease-in-out;
  background-color: #E6E8E9;
  outline-width: 0;
}
.Tools .toolsTitleHeader .down-arrow.rotate {
  background-color: #FFFFFF;
  border: 1px solid #006750;
}
.Tools .small-content .togglePart {
  display: none;
}
.Tools .down-arrow #down-arrow {
  -webkit-transition: transform 0.3s ease-out;
  -moz-transition: transform 0.3s ease-out;
  -o-transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
.Tools .down-arrow.rotate #down-arrow {
  -webkit-transition: transform 0.3s ease-out;
  -moz-transition: transform 0.3s ease-out;
  -o-transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.Tools .toolsALignment.inactive .toolsDescription.gridView {
  display: none;
}
.Tools .toolsALignment.activeList .toolsDescription.listViewDesc {
  display: block;
}
.Tools .toolsALignment.activeList .toolsDescription.gridView {
  margin-top: 12px;
  display: none;
}
.Tools .portlet-column {
  padding: 0px;
}
.Tools .portlet-content {
  padding: 0px;
}
.Tools .toolsCatalog {
  padding-left: 0px;
}
.Tools .toolsCatalog .card {
  margin-right: 40px;
}
.Tools .toolsALignment .desc-content {
  padding: 0px;
  clear: both;
}
.Tools .toolsALignment .desc-content .toolsTitle {
  color: #000000;
  font-family: HPE Graphik;
  font-size: 24px;
  font-weight: 300;
  line-height: 30px;
  float: left;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.Tools .toolsALignment .desc-content .icons {
  float: right;
  margin: 0 5px;
  height: 36px;
  width: 36px;
  background-color: #F7F7F7;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.Tools .toolsALignment .desc-content .icons:hover {
  transition: 0.1s ease-in-out;
  background-color: #E6E8E9;
  outline-width: 0;
}
.Tools .toolsALignment .desc-content .icons img {
  position: relative;
  bottom: 1px;
}
.Tools .toolsALignment .desc-content .subscribe.icons {
  background-color: #FFFFFF;
  border: 1px solid #006750;
}
.Tools .toolsALignment .desc-content .subscribe.icons:hover {
  transition: 0.1s ease-in-out;
  background-color: #FFFFFF;
  outline-width: 0;
}
.Tools .toolsALignment .desc-content .toolsDescription {
  color: #000000;
  font-family: HPE Graphik;
  font-size: 16px;
  line-height: 20px;
  display: block;
  width: 68%;
  float: left;
}
.Tools .toolsALignment .desc-content .toolsDescription * {
  color: #67686E;
  font-family: HPE Graphik;
  font-size: 16px;
  line-height: 24px;
  text-decoration: none;
  margin: initial;
}
.Tools .toolsALignment .desc-content .toolsDescription ul, .Tools .toolsALignment .desc-content .toolsDescription ol {
  padding-right: 40px !important;
  display: block !important;
}
.Tools .toolsALignment .desc-content .toolsDescription ul li, .Tools .toolsALignment .desc-content .toolsDescription ol li {
  display: list-item !important;
  border: 0 !important;
  padding: 2px !important;
}
.Tools .toolsALignment .desc-content .toolsSubTitle {
  color: #333333;
  font-family: HPE Graphik;
  font-size: 14px;
  letter-spacing: 2px;
  line-height: 20px;
}
.Tools .toolsALignment .desc-content .subTitle {
  display: block;
  background-color: #D4D8DB;
  padding: 12px 16px;
  color: #000000;
  font-family: HPE Graphik;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0px;
  line-height: 22px;
  border-radius: 8px 8px 0 0;
  text-transform: capitalize;
}
.Tools .toolsALignment .desc-content .subContainerContent {
  background-color: #F6F6F6;
  display: inline-block;
  width: 100%;
  border-radius: 0 0 8px 8px;
}
.Tools .toolsALignment .desc-content .subContainerContent ul {
  padding: 0px;
  margin: 0px;
}
.Tools .toolsALignment .desc-content .subContainerContent ul li {
  padding: 0px 10px;
  margin: 0px;
  border: none;
  width: 50%;
  float: left;
}
.Tools .toolsALignment .desc-content .subContainerContent ul li .leftOne {
  float: left;
  width: 23px;
  height: 23px;
  margin-right: 13px;
}
.Tools .toolsALignment .desc-content .subContainerContent ul li .leftOne img {
  width: 20px;
  height: 20px;
}
.Tools .toolsALignment .desc-content .subContainerContent ul li .rightOne {
  overflow: hidden;
}
.Tools .toolsALignment .desc-content .categoryName a {
  color: #068667 !important;
  font-family: HPE Graphik;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  display: block;
}
.Tools .toolsALignment .desc-content .categoryDescription {
  color: #67686E;
  font-family: HPE Graphik;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-transform: uppercase;
}
.Tools .toolsALignment .desc-content .toolsContainer .col-lg-8 {
  padding: 0px;
}
.Tools .small-content-footer .categoryName {
  color: #333333;
  font-family: HPE Graphik;
  font-size: 14px;
  letter-spacing: 2px;
  line-height: 20px;
  display: block;
  /*text-transform: uppercase;*/
}
.Tools .toolsDetailsContainer .col-lg-12 {
  padding: 0px;
}
.Tools .toolsDetailsContainer .small-content .col-md-8, .Tools .toolsDetailsContainer .small-content .col-md-4 {
  padding: 0px;
}
.Tools .toolsDetailsContainer .controlsPagination #pagination_result {
  color: #3E4550;
  font-family: HPE Graphik;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  margin-right: 30px;
}
.Tools .toolsDetailsContainer .controlsPagination .holder {
  display: inline-block;
}
.Tools .toolsDetailsContainer .controlsPagination a {
  display: inline-block;
  height: 24px;
  width: 24px;
  color: #292D3A;
  font-family: HPE Graphik;
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  float: none;
}
.Tools .toolsDetailsContainer .controlsPagination a.jp-current {
  border: 1px solid #006750;
  border-radius: 50%;
  background: transparent;
}
.Tools .toolsDetailsContainer .controlsPagination a.active_pagination {
  height: 24px;
  width: 24px;
  display: inline-block;
  color: #000;
  background: #ddd;
  font-weight: 600;
}
.Tools .grid-list-buttons li {
  display: inline-block;
  padding-left: 8px;
}
.Tools .grid-list-buttons li button {
  width: 36px;
  height: 36px;
  padding: 0px;
  background: transparent;
  border: none;
  outline: 0;
}
.Tools .grid-list-buttons li button img {
  width: 16px;
}
.Tools .grid-list-buttons li button.active {
  border: 1px solid #006750;
  background: #D1FFEE;
  border-radius: 6px;
}
.Tools .grid-list-buttons li #listBtn {
  margin-right: 7px;
}
.Tools .grid-list-buttons li #gridBtn {
  margin-left: 5px;
}
.Tools .InlineBlock {
  display: block;
  width: 100%;
}
.Tools .toolsALignment.inactive {
  padding: 0px 35px 40px;
  background: transparent;
  margin-top: 0px;
}
.Tools .toolsALignment.inactive .small-content-footer .viewButton {
  display: none;
}
.Tools .toolsALignment.inactive #tool-name-list {
  min-height: auto !important;
  padding: 0px;
  margin: 0px;
}
.Tools .toolsALignment.inactive #tool-name-list li:nth-child(10n+1) {
  /*border-top: 2px solid #d7d7d7;*/
}
.Tools .toolsALignment.inactive #tool-name-list li {
  background: #FFFFFF;
  width: 100%;
  margin: 10px 0;
  box-shadow: none;
  padding: 24px;
  display: block;
  border-radius: 12px;
}
.Tools .toolsALignment.inactive #tool-name-list li:nth-child(1) {
  margin: 0 0 12px 0;
}
.Tools .toolsALignment.inactive #tool-name-list li .desc-content .subContainerContent ul li {
  padding: 12px;
  margin: 0px;
  border: none;
  width: 100%;
  background: #F6F6F6;
  border-top: 1px solid #D1D1D1;
  border-radius: 0 0 8px 8px;
}
.Tools .toolsALignment.inactive #tool-name-list .subContainerContent li:nth-child(1) {
  border: 0;
}
.Tools .toolsALignment.inactive #tool-name-list.listView .desc-content .toolsDescription {
  width: 80% !important;
}
.Tools .toolsDetailsContainer .card {
  background: #F7F7F7;
  border: 0;
  border-radius: 12px;
}
.Tools .toolsDetailsContainer .card-body {
  padding: 40px 40px 24px 40px;
  background: transparent;
}
.Tools .toolsALignment.activeList {
  margin-top: 0px;
  padding: 0 24px;
  /* .down-arrow{
   	display: block !important; 
   }*/
}
.Tools .toolsALignment.activeList > .row {
  /*margin-right: -12px;
  		margin-left: -12px;*/
}
.Tools .toolsALignment.activeList .subContainer {
  padding-bottom: 0px;
}
.Tools .toolsALignment.activeList .toolContentHoleContainer.active {
  /*box-shadow: 0 6px 24px 0 rgba(0,0,0,0.35);
  -webkit-box-shadow: 0 6px 24px 0 rgba(0,0,0,0.35);
   	-moz-box-shadow: 0 6px 24px 0 rgba(0,0,0,0.35);*/
}
.Tools .toolsALignment.activeList .controlsPagination {
  margin: 24px 36px;
}
.Tools .toolsALignment.activeList .desc-content.InlineBlock .viewButton {
  display: none;
}
.Tools .toolsALignment.activeList .col-md-8 .desc-content {
  margin-bottom: 0px;
}
.Tools .toolsALignment.activeList .small-content {
  padding: 24px 24px 12px 24px;
  min-height: 150px;
  background-color: #FFFFFF;
  border-radius: 12px 12px 0 0;
}
.Tools .toolsALignment.activeList .small-content-footer {
  background-color: #FFFFFF;
  padding: 0 24px 24px;
  border-radius: 0 0 12px 12px;
}
.Tools .toolsALignment.activeList .small-content-footer .viewButton {
  padding-right: 24px;
}
.Tools .toolsALignment.activeList .small-content-footer .viewButton #viewBtn {
  float: none;
  margin-bottom: 0;
}
.Tools .toolsALignment.activeList .small-content-footer .viewButton button {
  float: none;
  /* margin-bottom: 24px; */
}
.Tools .toolsALignment.activeList .col-md-8 {
  width: 100%;
}
.Tools .toolsALignment.activeList .desc-content .toolsDescription {
  width: 100%;
}
.Tools .toolsALignment.activeList .col-md-8 .viewButton {
  display: block;
  margin: 10px 0px;
}
.Tools .toolsALignment.activeList .col-md-8 .viewButton #viewBtn {
  float: none;
}
.Tools .toolsALignment.activeList #tool-name-list .desc-content .toolsSubTitle {
  display: block;
  padding-top: 6px;
}
.Tools .toolsALignment.activeList #tool-name-list li:nth-child(1) {
  border-top: 0;
}
.Tools .toolsALignment.activeList #tool-name-list li:nth-child(odd) {
  padding-right: 24px;
}
.Tools .toolsALignment.activeList #tool-name-list {
  display: flex !important;
  flex-wrap: wrap;
  padding: 0px;
  width: 100%;
  margin: 0;
}
.Tools .toolsALignment.activeList #tool-name-list li {
  width: 50%;
  margin: 0;
  float: left;
  position: relative;
  padding-bottom: 24px;
}
.Tools .toolsALignment.activeList #tool-name-list .subContainerContent ul li {
  background: transparent;
  display: block;
  width: 100%;
  padding: 12px;
  margin: auto;
  box-shadow: none;
  border-top: 1px solid #D1D1D1;
}
.Tools ul.tools-catalog-list-ul a {
  color: #3E4550;
  display: inline-block;
  text-decoration: none;
  margin-left: 10px;
  position: relative;
  top: 2px;
  padding-bottom: 4px;
  white-space: normal;
  overflow-wrap: break-word;
}
.Tools ul.tools-catalog-list-ul img {
  cursor: pointer;
  height: 24px;
  width: 24px;
}
.Tools ul.tools-catalog-list-ul li span {
  display: flex;
  align-items: center;
}
.Tools .tools-catalog-list-ul li.selected {
  font-weight: 600;
  border-right: 3px solid var(--hpe-color-decorative-brand);
}
.Tools .toolsSubTitle {
  display: block;
}

/* toolsEnd */
/* CustomizeRadio_Start */
.container-radiobox {
  display: block;
  position: relative;
  padding-left: 30px;
  margin-bottom: 10px;
  cursor: pointer;
  font-size: 10px;
  color: #292D3A;
  font-weight: 600;
  user-select: none;
}
.container-radiobox .label {
  color: #292D3A;
  font-family: HPE Graphik;
  font-size: 16px;
  font-weight: normal;
  padding: 5px;
  margin: 0;
}
.container-radiobox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  /*&:checked ~ .checkmark:after {
  	display: block;
  }*/
}
.container-radiobox input:checked ~ .checkmark {
  border: 6px solid var(--hpe-color-decorative-brand);
  background-color: #fff !important;
}
.container-radiobox .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  border-radius: 12px;
  background-color: rgba(0, 0, 0, 0) !important;
  /*&:after {
  	content: "";
  	display: none;
  	position: absolute;
  	top: 6px;
  	left: 6px;
  	width: 10px;
  	height: 10px;
  	background-color: #068667;
  	border-radius: 12px;
  }*/
}

/* CustomizeRadioButton_End */
/* CustomizeSelectBox_Start */
.checkboxContainer {
  margin-bottom: 4px !important;
  display: flex;
  align-items: center;
  position: relative;
  padding: 8px 16px 8px 52px;
  min-height: 24px;
  border-radius: 6px;
  cursor: pointer;
  color: #3E4550;
  font-family: HPE Graphik, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-shadow: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.checkboxContainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  width: 0;
  height: 0;
}
.checkboxContainer input:focus ~ .checkmark, .checkboxContainer input:active ~ .checkmark {
  border-radius: 6px;
  box-shadow: 0 0 0 2px #FFF, 0 0 0 4px #292D3A;
}
.checkboxContainer input:focus:not(:focus-visible) ~ .checkmark {
  box-shadow: none;
}
.checkboxContainer input:checked ~ .checkmark {
  background: #068667 !important;
  border: 1px solid transparent;
}
.checkboxContainer input:checked ~ .checkmark:after {
  display: block;
}
.checkboxContainer:hover {
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.04);
}
.checkboxContainer .checkmark:after {
  content: "";
  position: absolute;
  display: none;
  width: 6px;
  height: 11px;
  left: 8px;
  top: 4px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  box-sizing: border-box;
}

.checkmark {
  position: absolute;
  left: 16px !important;
  top: 50% !important;
  transform: translateY(-50%);
  display: flex;
  width: 24px;
  height: 24px;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  border: 1px solid #B1B9BE;
  background: transparent;
  box-sizing: border-box;
}
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* CustomizeSelectBox_end */
/* news & Event css Start */
.videoContent {
  position: relative;
  height: 100%;
}
.videoContent #img {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.videoContent .videoIcons {
  background-image: url("../images/icons/PlayButton.svg");
  background-repeat: no-repeat;
  width: 50%;
  height: 50%;
  position: absolute;
  left: 0%;
  right: 0%;
  top: 0%;
  bottom: 0%;
  margin: auto;
  background-size: contain;
  background-position: center;
}

div#content-shift a, ul.news-list-ul a {
  color: black;
  display: block;
  justify-content: space-between;
  align-items: flex-start;
}

#content-shift .card {
  background-color: #fff;
  height: auto;
  margin-top: 0px;
  border-radius: 0px;
  margin-bottom: 24px;
  border: 0;
}

.gridViewFilter #content-shift .inner-content-div:nth-child(4n+1) {
  margin-left: 0px;
}
.gridViewFilter #content-shift .inner-content-div:nth-child(4n) {
  margin-right: 0px;
}

.controlsPagination {
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.controlsPagination .pagination_right_container {
  display: flex;
  align-items: center;
}
.controlsPagination #pagination_result, .controlsPagination .displa-rows {
  color: #3E4550;
  font-family: HPE Graphik;
  font-size: 14px;
  line-height: 24px;
  text-align: center;
  margin-right: 30px;
  vertical-align: top;
}
.controlsPagination .holder {
  display: inline-block;
}
.controlsPagination .holder span {
  display: block;
  height: 24px;
  width: 24px;
  color: #67686E;
  font-family: HPE Graphik;
  font-size: 19px;
  font-weight: 400;
  line-height: 24px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  float: left;
}
.controlsPagination a {
  display: block;
  height: 28px;
  width: 30px;
  color: #666666;
  font-family: HPE Graphik;
  font-size: 19px;
  font-weight: 400;
  line-height: 24px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  float: left;
}
.controlsPagination a.jp-current {
  color: #333333;
  font-weight: 600;
  background-color: #DDDDDD;
}
.controlsPagination a.jp-previous {
  background-image: url(../images/icons/left-new.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin-right: 12px;
}
.controlsPagination a.jp-previous.jp-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.controlsPagination a.jp-next {
  background-image: url(../images/icons/right-new.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin-left: 12px;
}
.controlsPagination a.jp-next.jp-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.controlsPagination a.active_pagination {
  height: 24px;
  width: 24px;
  display: inline-block;
  color: #000;
  background: #ddd;
  font-weight: 600;
}

.child-content-shift:hover {
  -webkit-box-shadow: 0 6px 24px 0 rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 6px 24px 0 rgba(0, 0, 0, 0.5);
  box-shadow: 0 6px 24px 0 rgba(0, 0, 0, 0.5);
}
.child-content-shift:hover .img-bg .articleHeader {
  display: block;
  position: absolute;
  bottom: 0px;
  left: 0px;
  z-index: 1001;
  color: #FFFFFF;
  font-family: HPE Graphik;
  font-size: 14px;
  letter-spacing: 2px;
  line-height: 20px;
  background-color: rgba(51, 51, 51, 0.3);
  padding: 7px 13px;
}
.child-content-shift .news-desc {
  height: 64px;
}
.child-content-shift .img-bg {
  height: 180px;
  position: relative;
}
.child-content-shift .img-bg img {
  height: 180px;
  width: 100%;
}
.child-content-shift .img-bg .articleHeader {
  display: none;
}
.child-content-shift .card-desc {
  position: relative;
  padding: 24px;
}
.child-content-shift .card-desc .news-heading {
  height: 60px;
  margin-bottom: 6px;
  overflow: hidden;
}
.child-content-shift .card-desc .news-heading span {
  color: #333333;
  font-family: HPE Graphik;
  font-size: 24px;
  font-weight: 600;
  line-height: 30px;
}
.child-content-shift .card-desc .news-heading span p {
  margin-bottom: 0px;
}
.child-content-shift .card-desc .news-desc .news-text {
  color: #666666;
  font-family: HPE Graphik;
  font-size: 14px;
  line-height: 20px;
}
.child-content-shift .card-desc .news-desc .news-text p {
  margin-bottom: 0px;
}

.overViewContaner {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(45deg, #614767 0%, #CE94DB 100%);
  color: #fff;
  visibility: hidden;
  opacity: 0;
  z-index: 1000;
  padding-left: 26px;
  padding-top: 28px;
  padding-right: 26px;
  font-size: 14px;
}

.overViewContaner.webinar {
  background: linear-gradient(206.76deg, rgba(66, 85, 99, 0.9) 0%, #2AD2C9 100%);
}

.overViewContaner.event {
  background: linear-gradient(45deg, rgba(99, 219, 191, 0.9) 0%, #5F7A76 100%);
}

.inner-content-div:hover .overViewContaner {
  visibility: visible;
  opacity: 0.9;
  overflow: hidden;
}

.overViewContaner .news-desc span {
  color: #fff;
}

.inner-content-div:HOVER .card-desc .news-desc .news-text {
  display: none;
}

.card-desc .news-desc .news-link {
  display: none;
}
.card-desc .news-desc .news-link img {
  width: 20px;
  vertical-align: bottom;
}
.card-desc .news-desc .news-link span {
  padding-right: 10px;
}
.card-desc .news-desc .news-link a {
  color: #333333;
  font-family: HPE Graphik;
  font-size: 19px;
  font-weight: 600;
  line-height: 24px;
}

.inner-content-div:HOVER .card-desc .news-desc .news-link {
  position: absolute;
  bottom: 20px;
  display: block;
}
.inner-content-div:HOVER .card-desc .news-desc .news-link a {
  text-decoration: none;
}

.news-wrapper {
  width: 100%;
  height: 354px;
  background-color: #008c8c;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}
.news-wrapper .overViewContainer.webinar {
  background: linear-gradient(206.76deg, rgba(66, 85, 99, 0.9) 0%, #2AD2C9 100%);
}
.news-wrapper .overViewContainer.event {
  background: linear-gradient(45deg, rgba(99, 219, 191, 0.9) 0%, #5F7A76 100%);
}
.news-wrapper .overViewContainer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(45deg, #614767 0, #ce94db 100%);
  color: #fff;
  visibility: hidden;
  opacity: 0;
  z-index: 1000;
  padding-left: 26px;
  padding-top: 28px;
  padding-right: 26px;
  font-size: 14px;
}
.news-wrapper:hover .overViewContainer {
  visibility: visible;
  opacity: 0.9;
}
.news-wrapper:hover .news-div {
  z-index: 1001;
}
.news-wrapper:hover .news-div .news-dic-desc .description {
  display: none;
}
.news-wrapper:hover .news-div .news-dic-desc .link {
  display: block;
  padding-top: 35px;
  cursor: pointer;
}
.news-wrapper .news-div {
  width: 360px;
  background-color: #fff;
  padding: 24px;
  position: absolute;
  bottom: 0;
}
.news-wrapper .news-div .news-div-header {
  margin-bottom: 6px;
  height: 60px;
}
.news-wrapper .news-div .news-div-header span {
  color: #333333;
  font-family: HPE Graphik;
  font-size: 24px;
  font-weight: 600;
  line-height: 30px;
}
.news-wrapper .news-div .news-dic-desc {
  height: 60px;
}
.news-wrapper .news-div .news-dic-desc .description {
  color: #67686E;
  font-family: HPE Graphik;
  font-size: 14px;
  line-height: 20px;
  font-weight: normal;
}
.news-wrapper .news-div .news-dic-desc .link {
  display: none;
}
.news-wrapper .news-div .news-dic-desc .link img {
  width: 20px;
}
.news-wrapper .news-div .news-dic-desc .link span {
  padding-left: 10px;
}
.news-wrapper .news-div .news-dic-desc .link a {
  color: #333333;
  font-size: 19px;
  font-weight: 600;
  line-height: 24px;
  text-decoration: none;
}

#main-content-list.withFilter {
  padding-left: 354px;
  background-color: #fff;
  min-height: 840px !important;
}
#main-content-list.withFilter #search-filter-wrapper #list_filterBtn {
  background-image: url(../images/icons/Filter_clicked.svg);
}
#main-content-list.withFilter .news-list-ul li .row .col-md-3 {
  padding: 0px;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}

#main-content-list.withOutFilter #search-filter-wrapper #list_filterBtn {
  background-image: url(../images/icons/Filter.svg);
}

#main-content-list .my-card {
  background-color: #F7F7F7;
  width: 100%;
  height: auto;
  border-radius: 12px;
}
#main-content-list .my-card .my-card-body {
  padding: 40px;
}
#main-content-list #search-filter-wrapper {
  padding-bottom: 24px;
  display: flex;
}
#main-content-list #search-filter-wrapper .searchInput {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 555px;
}
#main-content-list #search-filter-wrapper #searchFilterList {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 36px;
  padding: 5px 40px 5px 12px;
  border-radius: 8px;
  border: 1px solid #B1B9BE;
  background: rgba(0, 0, 0, 0);
  color: #606A70;
  font-family: HPE Graphik;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  outline: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#main-content-list #search-filter-wrapper #searchFilterList:focus, #main-content-list #search-filter-wrapper #searchFilterList:active {
  box-shadow: 0 0 0 2px #FFF, 0 0 0 4px #292D3A;
}
#main-content-list #search-filter-wrapper .btn.btn-search.icon {
  height: 24px;
  width: 24px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 12px;
  background-size: 24px;
  background-repeat: no-repeat;
  background-position: center;
  padding: 0;
}
#main-content-list #search-filter-wrapper #list_filterBtn {
  background-repeat: no-repeat;
  background-position: center;
  border: 0;
  position: relative;
  background-size: contain;
  padding: 0;
  height: 24px;
  width: 24px;
  margin-left: 24px;
  margin-top: 8px;
  background-color: transparent;
  outline: none;
}
#main-content-list .display-list-wrapper {
  padding-bottom: 10px;
  text-align: right;
  margin-top: 28px;
}
#main-content-list .display-list-wrapper span {
  margin-right: 12px;
  color: #333333;
  font-family: HPE Graphik;
  font-size: 16px;
  line-height: 20px;
  text-align: right;
}
#main-content-list .display-list-wrapper #dissBtn {
  width: 76px;
  border: 2px solid #dddddd;
  background-image: url(../images/icons/Up.svg);
  background-position: center right 10px;
  background-repeat: no-repeat;
  background-size: 14px;
  height: 40px;
  text-align: left;
  padding-top: 7px;
  outline: none;
  margin-right: 12px;
  background-color: transparent;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 0px 10px 0px 10px;
  color: #333333;
  font-family: HPE Graphik;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}
#main-content-list .display-list-wrapper #listtBtn,
#main-content-list .display-list-wrapper #griddBtn {
  height: 20px;
  min-height: 36px;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  /* display: flex; */
  align-items: center;
  gap: 6px;
  outline: none;
}
#main-content-list .display-list-wrapper #listtBtn.active,
#main-content-list .display-list-wrapper #griddBtn.active {
  border: 1px solid #006750;
  background: #D1FFEE;
}
#main-content-list .display-list-wrapper #listtBtn:hover,
#main-content-list .display-list-wrapper #griddBtn:hover {
  border: 1px solid #074738;
}
#main-content-list .news-list-ul {
  padding: 0px;
  margin: 0px;
  min-height: auto !important;
}
#main-content-list .news-list-ul li:nth-child(1) {
  padding: 24px;
  border-radius: 12px;
  background: #FFF;
  margin-bottom: 16px;
}
#main-content-list .news-list-ul li {
  list-style: none;
  padding: 24px;
  border-radius: 12px;
  background: #FFF;
  margin-bottom: 16px;
}
#main-content-list .news-list-ul li .row .col-md-3 {
  padding-left: 55px;
}
#main-content-list .news-list-ul li .img-content {
  float: left;
  width: 96px;
  height: 96px;
  margin-right: 16px;
  border-radius: 6px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
#main-content-list .news-list-ul li .content {
  overflow: hidden;
}
#main-content-list .news-list-ul li .content h5 {
  color: #292D3A;
  font-family: HPE Graphik;
  font-size: 20px;
  font-weight: 600;
  line-height: 26px;
  font-style: normal;
  margin: 0;
  margin-bottom: 8px;
}
#main-content-list .news-list-ul li .content h5 p {
  margin: 0;
}
#main-content-list .news-list-ul li .content .content-date {
  color: #67686E;
  font-family: HPE Graphik;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
  display: inline-block;
  margin-bottom: 8px;
}
#main-content-list .news-list-ul li .content .content-description {
  color: #67686E;
  font-family: HPE Graphik;
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 24px;
  font-weight: 400;
  font-style: normal;
}
#main-content-list .news-list-ul li .content .content-description p {
  margin: 0;
}
#main-content-list .news-list-ul li .content .content-category {
  display: flex;
  padding: 3px 9px;
  width: fit-content;
  align-items: center;
  gap: 3px;
  color: #3E4550;
  font-family: "HPE Graphik";
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 16px;
  min-height: 24px;
  border-radius: 6px;
  border: 1px solid #D4D8DB;
  background: rgba(0, 0, 0, 0);
}
#main-content-list .news-list-ul li .remaing-things {
  padding: 0px;
  margin: 0px;
}
#main-content-list .news-list-ul li .remaing-things li:nth-child(1) {
  border: 0px;
}
#main-content-list .news-list-ul li .remaing-things li:nth-child(3) {
  float: right;
  padding-left: 0px;
}
#main-content-list .news-list-ul li .remaing-things li:nth-child(1) {
  padding-left: 0px;
}
#main-content-list .news-list-ul li .remaing-things li {
  list-style: none;
  border: 0px;
  padding: 0px;
  display: inline-block;
  padding-left: 24px;
  padding-top: 5px;
  padding-bottom: 0;
  color: #000000;
  font-family: HPE Graphik;
  font-size: 16px;
  line-height: 20px;
}
#main-content-list .news-list-ul li .remaing-things span {
  color: #292D3A;
  font-family: HPE Graphik, Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  padding: 5px 18px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.05);
  transition: background 0.2s ease;
  cursor: pointer;
  display: inline-block;
}

/* Competencies (#951): no top gap, tighter inner spacing per page mockup.
   !important is required to beat the portlet's own main.css rule
   `.eventContainer { margin-top: 85px !important }`. */
.eventContainer.eventContainer--competencies {
  margin-top: 0px !important;
}

.eventContainer.eventContainer--competencies #main-content-wrapper {
  min-height: 0px !important;
}

.eventContainer.eventContainer--competencies #main-content-wrapper #mainContentSection {
  padding: 20px !important;
}

.eventContainer {
  width: 100%;
  padding: 0;
  margin-top: 20px;
}
.eventContainer.listview #filter-menu {
  margin-top: 0px;
}
.eventContainer #main-content-wrapper.gridView #filterBtn {
  background-image: url(../images/icons/Filter_clicked.svg);
}
.eventContainer #main-content-wrapper.gridView #content-shift .inner-content-div {
  display: inline-block;
  list-style: none;
  box-sizing: border-box;
  background: #FFFFFF;
  border-radius: 8px;
  opacity: 1;
  width: 100%;
  flex: 1 1 100%;
  padding: 0px;
}
.eventContainer #main-content-wrapper.gridView #content-shift .inner-content-div img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}
.eventContainer #main-content-wrapper.gridViewFilter #filterBtn {
  background-image: url(../images/icons/Filter.svg);
}
.eventContainer #main-content-wrapper.gridViewFilter #content-shift .inner-content-div {
  margin: 0;
  display: block;
  float: none;
  width: auto;
  min-width: 0;
  padding: 0;
  box-sizing: border-box;
}
.eventContainer #main-content-wrapper.gridViewFilter #content-shift .inner-content-div .card {
  margin-bottom: 24px;
}
.eventContainer .select-menu-list .custimized-ul-checkboxes {
  padding: 0px;
  margin: 0;
}
.eventContainer .select-menu-list .custimized-ul-checkboxes li {
  display: block;
}
.eventContainer .select-menu-list .custimized-ul-checkboxes li:last-child {
  margin-bottom: 0;
}
.eventContainer .select-menu-list .custimized-ul-checkboxes li .checkboxContainer label {
  margin-bottom: 0px;
  color: #333333;
  font-family: HPE Graphik;
  font-size: 16px;
  line-height: 24px;
  font-weight: normal;
}
.eventContainer #main-content-wrapper {
  /* LEFT: Search Block */
  /* RIGHT: Sort Dropdown + View Toggles grouped */
}
.eventContainer #main-content-wrapper #mainContentSection {
  border-radius: 12px;
  background: #F7F7F7;
  padding: 40px;
}
.eventContainer #main-content-wrapper #topHeaderSectionDiv {
  background: transparent;
  padding: 0;
  border-radius: 0;
}
.eventContainer #main-content-wrapper #topHeaderSectionDiv .header-section#topHeaderSection {
  text-align: left;
  width: 100%;
}
.eventContainer #main-content-wrapper #topHeaderSectionDiv .header-section#topHeaderSection h4 {
  font-size: 28px;
  font-weight: 600;
  font-family: HPE Graphik;
  font-style: normal;
  line-height: 34px;
  color: #292D3A;
  margin: 0 0 16px 0;
}
.eventContainer #main-content-wrapper #topHeaderSectionDiv .header-section#topHeaderSection p {
  font-size: 18px;
  font-family: HPE Graphik;
  line-height: 28px;
  font-style: normal;
  color: #67686E;
  font-weight: 400;
  max-width: 1110px;
}
.eventContainer #main-content-wrapper #topHeaderSectionDiv .header-section#topHeaderSection row {
  display: flex;
  align-items: flex-start;
}
.eventContainer #main-content-wrapper.gridView {
  padding-left: 354px;
  min-height: 800px;
}
.eventContainer #main-content-wrapper.gridView #topSearchPart {
  margin: 48px -12px 24px -12px;
}
.eventContainer #main-content-wrapper.gridView #gridRow {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  width: 100%;
  margin: 0 auto;
  padding: 40px;
  box-sizing: border-box;
}
.eventContainer #main-content-wrapper #topSearchPart {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 16px !important;
  width: 100% !important;
  margin: 24px 0 24px 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
.eventContainer #main-content-wrapper .topSearchPart {
  margin: 48px 0 24px 0;
}
.eventContainer #main-content-wrapper #search-filter-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  max-width: 555px;
  padding-left: 0;
}
.eventContainer #main-content-wrapper #search-filter-wrapper .search-label {
  font-size: 12px;
  font-family: "HPE Graphik";
  font-weight: 600;
  color: #292D3A;
  line-height: 16px;
  margin-bottom: 6px;
}
.eventContainer #main-content-wrapper #search-filter-wrapper .search-wrapper {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 5px 12px;
  gap: 6px;
  border-radius: 8px;
  border: 1px solid #B1B9BE;
  background: transparent;
  overflow: hidden;
}
.eventContainer #main-content-wrapper #search-filter-wrapper .search-wrapper:focus-within, .eventContainer #main-content-wrapper #search-filter-wrapper .search-wrapper:active {
  box-shadow: 0 0 0 2px #FFF, 0 0 0 4px #292D3A;
}
.eventContainer #main-content-wrapper #search-filter-wrapper .search-wrapper .searchNews {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 16px;
  color: #292D3A;
}
.eventContainer #main-content-wrapper #search-filter-wrapper .search-wrapper .searchNews::placeholder {
  color: #9EA7AD;
}
.eventContainer #main-content-wrapper #search-filter-wrapper .search-wrapper .btn.btn-search.icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}
.eventContainer #main-content-wrapper .right-controls-group {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-shrink: 0;
}
.eventContainer #main-content-wrapper .right-controls-group .display-list-wrapper {
  display: flex;
  align-items: center;
  padding-bottom: 4px;
}
.eventContainer #main-content-wrapper .right-controls-group #listBtn,
.eventContainer #main-content-wrapper .right-controls-group #gridBtn {
  min-height: 36px;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 6px;
  outline: none;
}
.eventContainer #main-content-wrapper .right-controls-group #listBtn.active,
.eventContainer #main-content-wrapper .right-controls-group #gridBtn.active {
  border: 1px solid #006750;
  background: #D1FFEE;
}
.eventContainer #main-content-wrapper .right-controls-group #listBtn:hover,
.eventContainer #main-content-wrapper .right-controls-group #gridBtn:hover {
  border: 1px solid #074738;
}
.eventContainer #main-content-wrapper #filterBtn {
  background: none;
  border: 0;
  height: 24px;
  width: 24px;
  margin-left: 24px;
  margin-top: 8px;
}
.eventContainer #main-content-wrapper #gridRow {
  margin: 0;
  padding: 0;
  width: 100%;
}
.eventContainer #main-content-wrapper #gridRow #content-shift {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 24px;
}
.eventContainer #filter-menu {
  display: none;
  width: 330px;
  background-color: #F7F7F7;
  transition: 0.3s;
  padding: 40px;
  float: left;
  position: absolute;
  left: 0;
  border-radius: 12px;
}
.eventContainer #filter-menu .header-menu-filter {
  color: #292D3A;
  font-family: HPE Graphik;
  font-size: 28px;
  font-weight: 600;
  line-height: 34px;
  font-style: normal;
}
.eventContainer #filter-menu .clear_all_filter {
  position: absolute;
  top: 40px;
  right: 20px;
}
.eventContainer #filter-menu .clear_all_filter a.clearAllFilterText {
  display: flex;
  min-height: 36px;
  padding: 5px 18px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 9999px;
  border: 1px solid rgba(0, 0, 0, 0);
  background: rgba(0, 0, 0, 0.04);
  text-align: center;
  font-family: HPE Graphik;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.24) !important;
  text-decoration: none;
}
.eventContainer #filter-menu .clear_all_filter a.clearAllFilterText svg {
  width: 16px;
  height: 16px;
  display: block;
}
.eventContainer #filter-menu .clear_all_filter a.clearAllFilterText:hover {
  opacity: 0.8;
}
.eventContainer #filter-menu .heading {
  margin: 24px 0px 12px;
  color: #292D3A;
  font-family: HPE Graphik;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  font-style: normal;
  margin-top: 24px;
}
.eventContainer #filter-menu .btns {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 12px;
  align-items: center;
  justify-content: flex-start;
  margin-top: 24px;
}
.eventContainer #filter-menu #applyBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 5px 18px;
  border-radius: 9999px;
  border: 1px solid transparent;
  background: #292D3A;
  color: #FFFFFF;
  font-family: "HPE Graphik";
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  cursor: pointer;
  width: auto;
  white-space: nowrap;
}
.eventContainer #filter-menu #applyBtn:hover {
  opacity: 0.9;
}
.eventContainer #filter-menu .clearFilterBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 5px 18px;
  border-radius: 9999px;
  border: 1px solid transparent;
  background: rgba(0, 0, 0, 0.04);
  color: #292D3A;
  font-family: "HPE Graphik";
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  cursor: pointer;
  width: auto;
  white-space: nowrap;
}
.eventContainer #filter-menu .clearFilterBtn:hover {
  background: rgba(0, 0, 0, 0.08);
}
.eventContainer #filter-menu .drop-down-here {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 24px;
}
.eventContainer #filter-menu .drop-down-here label {
  margin: 0;
  margin-top: 24px;
  font-family: "HPE Graphik";
  font-size: 12px;
  font-weight: 600;
  font-style: normal;
  line-height: 16px;
  color: #292D3A;
}
.eventContainer #filter-menu .drop-down-here .hpe-select {
  position: relative;
  width: 100%;
  /* Closed control — HPE tokens: 36px min-height, 8px radius, 1px border */
  /* Active / open / focused -> black */
  /* Open menu — the part a native <select> can't style */
  /* Hover — grey (unchanged colour), now reduced/inset */
  /* Selected — green, per HPE guidelines */
  /* Dark-green thick accent bar on the left of the selected option */
}
.eventContainer #filter-menu .drop-down-here .hpe-select .hpe-select__native {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.eventContainer #filter-menu .drop-down-here .hpe-select .hpe-select__control {
  width: 100%;
  min-height: 36px;
  padding: 5px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  border-radius: 8px;
  border: 1px solid #B1B9BE;
  background: transparent;
  font-family: HPE Graphik;
  font-size: 16px;
  color: #292D3A;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.eventContainer #filter-menu .drop-down-here .hpe-select .hpe-select__control:hover {
  border-color: #7A8288;
}
.eventContainer #filter-menu .drop-down-here .hpe-select .hpe-select__control[aria-expanded=true],
.eventContainer #filter-menu .drop-down-here .hpe-select .hpe-select__control:focus-visible {
  border-color: #292D3A;
  box-shadow: 0 0 0 1px #292D3A;
}
.eventContainer #filter-menu .drop-down-here .hpe-select .hpe-select__arrow {
  display: inline-flex;
  pointer-events: none;
  transition: transform 0.15s ease;
}
.eventContainer #filter-menu .drop-down-here .hpe-select .hpe-select__control[aria-expanded=true] .hpe-select__arrow {
  transform: rotate(180deg);
}
.eventContainer #filter-menu .drop-down-here .hpe-select .hpe-select__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  z-index: 20;
  background: #FFFFFF;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  max-height: 320px;
  overflow-y: auto;
}
.eventContainer #filter-menu .drop-down-here .hpe-select .hpe-select__menu[hidden] {
  display: none;
}
.eventContainer #filter-menu .drop-down-here .hpe-select .hpe-select__option {
  position: relative; /* anchor for the green accent bar */
  margin: 2px 8px; /* inset so the highlight doesn't touch the box edges */
  padding: 10px 16px;
  border-radius: 6px; /* rounded highlight, not a full-width band */
  font-family: HPE Graphik;
  font-size: 16px;
  line-height: 22px;
  color: #3E4550;
  font-weight: 600;
  cursor: pointer;
}
.eventContainer #filter-menu .drop-down-here .hpe-select .hpe-select__option:hover {
  background: #F7F7F7;
}
.eventContainer #filter-menu .drop-down-here .hpe-select .hpe-select__option[aria-selected=true] {
  background: #D1FFEE; /* HPE selected mint-green */
  color: #292D3A;
  font-weight: 600;
}
.eventContainer #filter-menu .drop-down-here .hpe-select .hpe-select__option[aria-selected=true]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 100%; /* slightly shorter than the row */
  background: #1D6750; /* HPE dark-green (dd.layui-this::before) */
  border-radius: 6px 0 0 6px;
}
.eventContainer #filter-menu .drop-down-here .hpe-select .hpe-select__option[aria-selected=true]:hover {
  background: #D1FFEE; /* keep green even when hovered */
}

/* news & Event css end */
/* Article css start */
.marginTop20 {
  margin-top: 24px;
  border-radius: 8px;
}

.articleDeails {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-background-card, #292D3A);
  padding: 24px 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 40px;
  box-sizing: border-box;
  width: 100%;
}
.articleDeails .row {
  display: contents;
}
.articleDeails .col-sm-6 {
  display: contents;
}
.articleDeails .detailedImg {
  display: none;
}
.articleDeails .detailedContent {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.articleDeails .detailedContent .detailedHeader {
  display: none;
}
.articleDeails .detailedContent .detailedContentText {
  display: none;
}
.articleDeails .detailedContent .detailedContentButton {
  margin-top: -65px;
}
.articleDeails .detailedContent .detailedContentButton a {
  text-decoration: none;
}
.articleDeails .detailedContent .detailedContentButton a span {
  font-family: "HPE Graphik", HPE Graphik, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: #1c1c1c;
  background-color: #ffffff;
  border: none;
  padding: 10px 24px;
  display: inline-block;
  border-radius: 24px;
  white-space: nowrap;
  cursor: pointer;
  width: auto !important;
}
.articleDeails .detailedContent .detailedContentButton a span:hover {
  background-color: #f0f0f0;
}
.articleDeails .detailedTime {
  flex: 1;
  display: flex;
  column-gap: 24px;
  margin-left: 48px;
}
.articleDeails .detailedTime .dateField, .articleDeails .detailedTime .durationField {
  margin-bottom: 24px;
}
.articleDeails .detailedTime p {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.articleDeails .detailedTime .lightFont {
  color: #FFF !important;
  font-family: HPE Graphik, sans-serif;
  font-size: 16px !important;
  font-style: normal;
  font-weight: 600 !important;
  line-height: 22px !important;
  letter-spacing: 0;
  display: block;
  width: auto !important;
  white-space: nowrap;
}
.articleDeails .detailedTime .boldFont {
  color: #E5E5E5 !important;
  font-family: HPE Graphik, sans-serif;
  font-size: 16px !important;
  font-style: normal;
  font-weight: 400 !important;
  line-height: 24px !important;
  letter-spacing: 0;
}

/* =========================================================================
   DAM rows - one shared card
   -------------------------------------------------------------------------
   Rows arrive in one of two shapes: a single `.articleDownload` holding every
   row, or one wrapper per document. Every rule below therefore starts from
   "each row is its own rounded card" and squares off the edges that turn out
   to be mid-run, decided purely from sibling order.

   `:first-of-type` / `:last-of-type` are deliberately avoided: they match on
   element type, so a stray `<div>` before the rows makes them match nothing
   and the run silently loses its corners.

   Kept here rather than in each ADT: every template used to re-declare these,
   so each new template - and each new content shape - re-opened the same gaps.
   ========================================================================= */
.articleContainer .articlePart > .articleDownload:has(> .row) {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.articleContainer .articlePart > .articleDownload:has(> .row) > .row {
  border-top: 0;
  border-radius: 8px;
  margin-left: 40px !important;
  margin-right: 40px !important;
}

.articleContainer .articlePart > .articleDownload > .row ~ .row,
.articleContainer .articlePart > .articleDownload:has(> .row) + .articleDownload > .row,
.articleContainer .articlePart > .articleDownload:has(> .row) + style + .articleDownload > .row {
  border-top: 1px solid #D1D1D1;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.articleContainer .articlePart > .articleDownload > .row:has(~ .row),
.articleContainer .articlePart > .articleDownload:has(+ .articleDownload > .row) > .row,
.articleContainer .articlePart > .articleDownload:has(+ style + .articleDownload > .row) > .row {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.articleContainer:has(> .articlePart .articleAccordion) .articleInnerContainer,
.articleContainer:has(> .articlePart .articleDownload > .row) .articleInnerContainer {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.articleContainer {
  background: #fff;
  border-radius: 12px !important;
}
.articleContainer .articlePart:has(.articleAccordion), .articleContainer .articlePart:has(.articleDownload > .row) {
  padding-bottom: 40px;
  background-color: #f7f7f7;
  border-radius: 0 0 12px 12px;
}
.articleContainer .articleInnerContainer {
  background-color: #F7F7F7;
  border-radius: 12px;
  padding: 40px;
  position: relative;
}
.articleContainer .articleInnerContainer .articleImg {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: auto;
  aspect-ratio: 16/9;
  overflow: visible;
  position: relative;
  width: auto;
  margin-top: -40px;
  margin-left: -40px;
  margin-right: -40px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
.articleContainer .articleInnerContainer .articleImg iframe {
  width: 100%;
  height: 100%;
}
.articleContainer .articleInnerContainer .articleImg video {
  width: 100%;
  height: 100%;
}
.articleContainer .articleInnerContainer .imgBack {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 10;
}
.articleContainer .articleInnerContainer .imgBack a {
  display: flex;
  height: 48px;
  min-height: 48px;
  padding: 9px 24px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  background-color: #F7F7F7;
  border: 1px solid rgba(0, 0, 0, 0);
  border-radius: 9999px;
  text-decoration: none;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
}
.articleContainer .articleInnerContainer .imgBack a:hover {
  background-color: #F5F5F5;
}
.articleContainer .articleInnerContainer .imgBack a svg {
  vertical-align: middle;
}
.articleContainer .articleInnerContainer .imgBack a span {
  color: #292D3A;
  font-family: "HPE Graphik";
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 28px;
  text-align: center;
}
.articleContainer .articleInnerContainer .withOutImgBack {
  position: relative;
  margin-bottom: 24px;
  cursor: pointer;
}
.articleContainer .articleInnerContainer .withOutImgBack a {
  display: flex;
  height: 48px;
  min-height: 48px;
  padding: 9px 24px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  background-color: #F7F7F7;
  border: 1px solid rgba(0, 0, 0, 0);
  border-radius: 9999px;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.articleContainer .articleInnerContainer .withOutImgBack a:hover {
  background-color: #F5F5F5;
  text-decoration: none;
}
.articleContainer .articleInnerContainer .withOutImgBack a svg {
  vertical-align: middle;
}
.articleContainer .articleInnerContainer .withOutImgBack a span {
  display: inline-block;
  color: #292D3A;
  font-family: "HPE Graphik";
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 28px;
  text-align: center;
}
.articleContainer .articleInnerContainer .dateFormat {
  color: #67686E;
  font-family: HPE Graphik;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}
.articleContainer .articleInnerContainer .postedOnLabel {
  display: block;
  color: #292D3A;
  font-family: HPE Graphik;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 22px;
}
.articleContainer .articleInnerContainer .dateFormat {
  margin-top: 4px;
}
.articleContainer .articleInnerContainer .articlePadding {
  padding-top: 40px;
  display: flow-root;
}
.articleContainer .articleInnerContainer .articlePadding:first-child {
  padding-top: 0;
}
.articleContainer .articleInnerContainer .articlePadding > * {
  margin-top: 0;
  margin-bottom: 0;
}
.articleContainer .articleInnerContainer .articlePadding > * + * {
  margin-top: 24px;
}
.articleContainer .articleInnerContainer .articlePadding > *:last-child {
  display: flow-root;
}
.articleContainer .articleInnerContainer .articlePadding > .articleContent:not(:has(*)) {
  display: none;
}
.articleContainer .articleInnerContainer .articlePadding .articleTitle {
  color: #292D3A;
  font-family: HPE Graphik;
  font-style: normal;
  font-size: 36px;
  font-weight: 600;
  line-height: 42px;
  letter-spacing: -0.36px;
}
.articleContainer .articleInnerContainer .articlePadding .articleHeaderLine {
  height: 7px;
  width: 96px;
  background-color: var(--hpe-color-decorative-brand);
}
.articleContainer .articleInnerContainer .articlePadding .articleSubtext {
  color: #67686E;
  font-family: HPE Graphik;
  font-size: 28px;
  font-style: normal;
  font-weight: 400;
  line-height: 38px;
  letter-spacing: -0.28px;
}
.articleContainer .articleInnerContainer .articlePadding .articleContent {
  text-align: center;
}
.articleContainer .articleInnerContainer .articlePadding .articleContent .articleMedia .articleMediaContainer {
  float: right;
  padding-left: 10px;
  width: 60%;
  height: 300px;
  aspect-ratio: auto;
}
.articleContainer .articleInnerContainer .articlePadding .articleContent .articleMediaContainer {
  float: none;
  padding-left: 0px;
  width: 100%;
  display: block;
  height: auto;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.articleContainer .articleInnerContainer .articlePadding .articleContent .articleMediaContainer video,
.articleContainer .articleInnerContainer .articlePadding .articleContent .articleMediaContainer iframe {
  display: block;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  margin: -2px;
}
.articleContainer .articleInnerContainer .articlePadding .articleContent .articleMediaText {
  text-align: left;
  display: block;
  color: #67686E;
  font-family: HPE Graphik;
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  font-style: normal;
}
.articleContainer .articleInnerContainer .articlePadding .articleContent .articleMediaText ul {
  list-style-type: square;
}
.articleContainer .articleInnerContainer .articlePadding .articleSubtextContainer {
  color: #67686E;
  font-family: HPE Graphik;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: -0.2px;
}
.articleContainer .articleInnerContainer .articlePadding .articleSubtextContainer h1, .articleContainer .articleInnerContainer .articlePadding .articleSubtextContainer h2, .articleContainer .articleInnerContainer .articlePadding .articleSubtextContainer h3, .articleContainer .articleInnerContainer .articlePadding .articleSubtextContainer h4, .articleContainer .articleInnerContainer .articlePadding .articleSubtextContainer h5, .articleContainer .articleInnerContainer .articlePadding .articleSubtextContainer h6 {
  color: #292D3A;
  font-family: "HPE Graphik";
  font-weight: 600;
  margin: 24px 0 8px;
}
.articleContainer .articleInnerContainer .articlePadding .articleSubtextContainer h2 {
  font-size: 28px;
  line-height: 34px;
}
.articleContainer .articleInnerContainer .articlePadding .articleSubtextContainer h3 {
  font-size: 22px;
  line-height: 28px;
}
.articleContainer .articleInnerContainer .articlePadding .articleSubtextContainer img {
  height: auto;
  margin-bottom: 24px;
  width: 100%;
  aspect-ratio: unset;
  object-fit: unset;
}
.articleContainer .articleInnerContainer .articlePadding .articleSubtextContainer ul, .articleContainer .articleInnerContainer .articlePadding .articleSubtextContainer ol {
  padding-left: 20px;
}
.articleContainer .articleInnerContainer .articlePadding .articleSubtextContainer li {
  padding-left: 6px;
}
.articleContainer .articleInnerContainer .articlePadding .articleSubtextContainer a {
  color: #333333;
  text-decoration: underline;
  font-family: "HPE Graphik";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: -0.2px;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
  color: #068667;
}
.articleContainer .articleInnerContainer .articlePadding .articleSubtextContainer a:hover {
  color: #074738;
}
.articleContainer .articleInnerContainer .articlePadding .articleSubtextContainer b {
  font-weight: 600;
}
.articleContainer .articleInnerContainer .articlePadding .articleSubtextContainer strong {
  font-weight: 600;
}

.ratings-card {
  margin-top: 24px !important;
}

.overviewSub {
  padding-top: 0px;
}
.overviewSub.related-content,
.overviewSub .related-content {
  padding: 40px !important;
  border-radius: 12px;
  background-color: #F7F7F7;
  margin-top: 24px;
  margin-bottom: 24px;
}
.overviewSub.related-content .TileTemp_X .img-bg_X,
.overviewSub .related-content .TileTemp_X .img-bg_X {
  height: auto;
  aspect-ratio: 16/9;
}
.overviewSub.related-content:not(:has(.imgContainer)),
.overviewSub .related-content:not(:has(.imgContainer)) {
  display: none;
}
.overviewSub .summaryHeader {
  color: #292D3A;
  font-family: HPE Graphik;
  font-size: 28px;
  font-weight: 600;
  font-style: normal;
  line-height: 34px;
  display: block;
}
.overviewSub .imgContainer .related-img {
  height: 150px;
}
.overviewSub .imgContainer .go {
  color: #333333;
  font-family: HPE Graphik;
  font-size: 24px;
  font-weight: 600;
  line-height: 30px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  background: #fff;
}
.overviewSub .imgContainer .go .icon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}
.overviewSub .imgContainer .go a {
  color: #000;
  text-decoration: none;
}
.overviewSub .imgContainer .articleContentText {
  background-color: #fff;
  padding: 24px;
}
.overviewSub .imgContainer .hpe-sales-certificat {
  margin: 6px 0px 30px 0px;
  display: block;
  word-wrap: break-word;
  overflow: hidden;
  max-height: 61px;
  max-width: 100%;
  color: #666666;
  font-family: HPE Graphik;
  font-size: 14px;
  line-height: 20px;
}
.overviewSub .imgContainer .hpe-sales-certificat a {
  color: #000;
  text-decoration: none;
}

.articleDownload {
  margin-top: 0px;
  padding: 24px;
}
.articleDownload .row {
  padding: 24px;
  border-top: 1px solid #D1D1D1;
  background: #FFF;
}
.articleDownload .row:last-child {
  border-bottom: 0;
}
.articleDownload .row:first-of-type {
  border-bottom: 0;
}
.articleDownload > .row:first-of-type {
  border-top: 0;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.articleDownload > .row:last-of-type {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}
.articleDownload .article-col-1 {
  float: left;
  height: 48px;
  padding: 0;
  margin-right: 24px;
}
.articleDownload .article-col-1 img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  aspect-ratio: 1/1;
}
.articleDownload .article-col-2 {
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.articleDownload .article-col-2 > br {
  display: none;
}
.articleDownload .article-col-2 .articleformatSize {
  margin-top: 0 !important;
}
.articleDownload .articleFormat {
  width: 50%;
  float: left;
  text-align: center;
  font-family: HPE Graphik;
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
  text-transform: uppercase;
}
.articleDownload .articleSize {
  width: 50%;
  float: right;
}
.articleDownload .articleSize .articleSizeRight {
  width: 50%;
  float: left;
  display: block;
  text-align: right;
}
.articleDownload .articleSize .articleSizeRight i {
  font-size: 21px;
  padding-right: 15px;
  padding-top: 10px;
}
.articleDownload .articleSize .articleSizeLeft {
  width: 50%;
  float: right;
  display: block;
}
.articleDownload .articleSize .articleSizeLeft a {
  text-decoration: none;
}
.articleDownload .articleSize .articleSizeLeft .size {
  color: #666;
  font-family: HPE Graphik;
  font-size: 14px;
  line-height: 20px;
}
.articleDownload .articleSize .articleSizeLeft .download {
  color: #333;
  font-family: HPE Graphik;
  font-weight: 600;
}
.articleDownload .row > .col-sm-3 .articleDetail {
  position: static;
  margin-top: 0;
}
.articleDownload .row {
  flex-wrap: wrap;
}
.articleDownload .row > .col-sm-9 {
  flex: 1 1 180px;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
}
.articleDownload .row > .col-sm-3 {
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
  margin-top: 0;
  margin-left: auto;
}
.articleDownload .customDownloadBtn {
  display: flex;
  width: fit-content;
  margin-left: auto;
  min-height: 36px;
  padding: 5px 18px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  border-radius: 9999px;
  border: 1px solid rgba(0, 0, 0, 0);
  background: rgba(0, 0, 0, 0.04);
  text-align: center;
  text-decoration: none !important;
  transition: all 0.2s ease;
  cursor: pointer;
}
.articleDownload .customDownloadBtn .btnIcon {
  display: flex;
  align-items: center;
}
.articleDownload .customDownloadBtn .btnText {
  font-family: HPE Graphik;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: #292D3A;
  font-style: normal;
}
.articleDownload .customDownloadBtn:hover, .articleDownload .customDownloadBtn:focus {
  background: rgba(0, 0, 0, 0.08);
}

.articleSummary {
  background: #F7F7F7;
  padding: 40px;
  border-radius: 12px;
}
.articleSummary .summaryHeader {
  display: block;
  color: #292D3A;
  font-family: HPE Graphik;
  font-style: normal;
  font-size: 28px;
  font-weight: 600;
  line-height: 34px;
  margin-bottom: 24px;
}
.articleSummary .summaryTags {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.articleSummary .summaryTags span,
.articleSummary .summaryTags a,
.articleSummary .summaryTags .label,
.articleSummary .summaryTags .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  min-height: 28px;
  padding: 12px 8px 12px 8px;
  background: #292d3a;
  color: #FFFFFF;
  border: 1px solid #292d3a;
  border-radius: 9999px;
  font-family: HPE Graphik;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
  white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.articleSummary .summaryTags a:hover,
.articleSummary .summaryTags a:hover span,
.articleSummary .summaryTags a:hover .label,
.articleSummary .summaryTags a:hover .badge,
.articleSummary .summaryTags a:focus,
.articleSummary .summaryTags a:focus span,
.articleSummary .summaryTags a:focus .label,
.articleSummary .summaryTags a:focus .badge {
  background: #3E4550;
  border-color: #3E4550;
  color: #FFFFFF;
  text-decoration: none;
}
.articleSummary .related-items-div .related-items-div-title {
  margin-top: 20px;
}
.articleSummary .related-items-div .related-items-div-title a {
  color: #333333;
  font-family: HPE Graphik;
  font-size: 16px;
  line-height: 24px;
  text-decoration: underline;
}
.articleSummary .related-items-div .desc {
  color: #666666;
  font-family: HPE Graphik;
  font-size: 12px;
  line-height: 20px;
  font-weight: lighter;
}
.articleSummary .related-items-div .desc strong {
  font-weight: normal;
}

.portlet-column-last .portlet-column-content .journal-content-article,
.portlet-column-last .portlet-column-content .portlet-body {
  line-height: 0;
}

.portlet-column-last .portlet-column-content .articleSummary {
  line-height: 24px;
}

@media (min-width: 768px) {
  .portlet-column-last .portlet-column-content .articleSummary {
    margin-bottom: 0 !important;
  }
  .portlet-column-last .portlet-column-content .portlet-boundary:has(.articleSummary) ~ .portlet-boundary:has(.articleSummary) .articleSummary {
    margin-top: 40px !important;
  }
}
.related-img {
  height: 200px;
  width: 100%;
}

.articleRelatedText .go a {
  color: #333333;
  font-family: HPE Graphik;
  font-size: 24px;
  font-weight: 600;
  line-height: 30px;
  text-decoration: none;
}
.articleRelatedText .hpe-sales-certificat {
  margin-top: 6px;
}
.articleRelatedText .hpe-sales-certificat a {
  color: #666666;
  font-family: HPE Graphik;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
}

.programInnerContainer .channelProgram {
  padding: 20px 20px 20px 0px;
}

.ppn {
  background: #fff;
}

.programContainer .subContainer {
  padding: 40px;
  position: absolute;
  top: 40px;
  opacity: 0.8;
  background-color: #2AD2C9;
  left: 40px;
  width: 50%;
}
.programContainer .subContainer .leftOne {
  width: 135px;
  height: 75px;
  float: left;
  display: block;
  margin-right: 40px;
}
.programContainer .subContainer .rightOne {
  overflow: hidden;
  display: block;
}
.programContainer .subContainer .rightOne .subContainerHeader .boldFont {
  color: #000000;
  font-family: HPE Graphik;
  font-size: 32px;
  font-weight: 300;
  line-height: 32px;
  display: block;
}
.programContainer .subContainer .rightOne .subContainerHeader .lightFont {
  color: #000000;
  font-family: HPE Graphik;
  font-size: 24px;
  font-weight: 300;
  line-height: 32px;
}
.programContainer .subContainer .rightOne .subContainerText {
  color: #000000;
  font-family: HPE Graphik;
  font-size: 24px;
  font-weight: 300;
  line-height: 30px;
  margin-top: 6px;
  display: block;
}
.programContainer .programImg {
  height: 500px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.row {
  margin: 0px;
}

.programContainer .programInnerContainer {
  margin: 0;
  padding: 20px;
  background: #fff;
}
.programContainer .programPadding {
  padding: 10px;
}
.programContainer .programTitle {
  color: #333333;
  font-family: HPE Graphik;
  font-size: 36px;
  font-weight: 600;
  line-height: 42px;
}
.programContainer .programSubtext {
  color: #000000;
  font-family: HPE Graphik;
  font-size: 24px;
  font-weight: 300;
  line-height: 30px;
  margin-top: 20px;
}

.programContainer .articleDownload .row {
  padding: 15px;
  border-top: 2px solid #ddd;
  border-bottom: none;
}

.programContainer .articleDownload .article-col-1 img {
  width: 36px;
  height: 44px;
}

.articleDownload .articleImg {
  height: 18px;
  width: 20px;
  margin-right: 14px;
  float: left;
}
.articleDownload .articleImg img {
  margin-top: 2px;
}
.articleDownload .articleDetail {
  overflow: visible;
  margin-top: -24px;
}
.articleDownload .articleDetail .articleRedirect {
  display: flex;
  justify-content: flex-end;
}
.articleDownload .articleDetail .articleRedirect * {
  color: #333333;
  font-family: HPE Graphik;
  font-size: 17px;
  font-weight: 600;
  line-height: 24px;
  text-decoration: none;
  padding-bottom: 0px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  padding: 0;
}
.articleDownload .articleDetail .articleRedirect a {
  text-decoration: none !important;
  display: inline-flex;
  min-height: 36px;
  padding: 5px 18px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  border-radius: 9999px;
  border: 1px solid rgba(0, 0, 0, 0);
  background: rgba(0, 0, 0, 0.04);
  flex: 0 0 auto;
  overflow: visible;
  transition: background 0.2s ease;
}
.articleDownload .articleDetail .articleRedirect a:hover, .articleDownload .articleDetail .articleRedirect a:focus {
  background: rgba(0, 0, 0, 0.08);
}
.articleDownload .articleDetail .articleformatSize {
  color: #67686E;
  font-family: HPE Graphik;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none !important;
  line-height: 20px;
}

.articleAccordion:first-child {
  border-top: none;
  position: relative;
}
.articleAccordion:first-child::after {
  content: "";
  position: absolute;
  top: 0;
  left: 40px;
  right: 40px;
  height: 0;
  border-top: 1px solid #d1d1d1;
}
.articleAccordion:not(:has(~ .articleAccordion)) .accordionContainer {
  background-image: none !important;
}
.articleAccordion:not(:has(~ .articleAccordion)) .accordionContainer::after {
  display: none;
}
.articleAccordion .accordionContainer {
  padding: 24px 40px 24px 40px;
  background-repeat: no-repeat;
  position: relative;
}
.articleAccordion .accordionContainer::after {
  content: "";
  position: absolute;
  left: 40px;
  right: 40px;
  bottom: 0;
  border-bottom: 1px solid #d1d1d1;
  pointer-events: none;
}
.articleAccordion .accordionContainer .accordionHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 12px;
  padding-right: 12px;
}
.articleAccordion .accordionContainer .collapseContentLink {
  border-top: 1px solid #D1D1D1;
  margin-left: 0px;
  margin-right: 0px;
}
.articleAccordion .accordionContainer .collapseContentLink .row {
  padding: 24px 0px;
}
.articleAccordion .accordionContainer > a, .articleAccordion .accordionContainer a.sectionHeader {
  color: #292D3A;
  font-family: HPE Graphik;
  font-size: 20px;
  font-weight: 600;
  line-height: 26px;
  display: block;
  cursor: pointer;
  text-decoration: none;
}
.articleAccordion .accordionContainer .clopsePart {
  font-size: 16px;
}
.articleAccordion .accordionContainer .clopsePart > span {
  color: #67686E;
  font-family: "HPE Graphik";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: -0.2px;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 12px;
  padding-right: 12px;
}
.articleAccordion .accordionContainer .clopsePart > span p {
  margin: 0 0 24px;
}
.articleAccordion .accordionContainer .clopsePart > span ul, .articleAccordion .accordionContainer .clopsePart > span ol {
  margin: 0 0 24px;
  padding-left: 24px;
}
.articleAccordion .accordionContainer .clopsePart > span ul {
  list-style-type: square;
}
.articleAccordion .accordionContainer .clopsePart > span ul li::marker {
  color: var(--hpe-color-decorative-brand);
}
.articleAccordion .accordionContainer .clopsePart > span li {
  padding-left: 6px;
}
.articleAccordion .accordionContainer .clopsePart > span b, .articleAccordion .accordionContainer .clopsePart > span strong {
  font-weight: 600;
}
.articleAccordion .accordionContainer .clopsePart > span a:not(.learnMore):not(.customDownloadBtn) {
  display: inline;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  gap: 0;
  white-space: normal;
  text-align: inherit;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: #068667;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}
.articleAccordion .accordionContainer .clopsePart > span a:not(.learnMore):not(.customDownloadBtn):hover, .articleAccordion .accordionContainer .clopsePart > span a:not(.learnMore):not(.customDownloadBtn):focus {
  color: #074738;
  text-decoration-line: underline;
}
.articleAccordion .accordionContainer .clopsePart > span > :last-child {
  margin-bottom: 0;
}
.articleAccordion .accordionContainer .clopsePart .accordionContent {
  color: #000;
  font-family: HPE Graphik;
  font-size: 16px;
  line-height: 20px;
}
.articleAccordion .accordionContainer .clopsePart .contenetInnerContainer {
  color: #000000;
  font-family: HPE Graphik;
  font-size: 16px;
  line-height: 20px;
  margin-top: 16px;
  padding-left: 0px;
  padding-right: 56px;
}
.articleAccordion .accordionContainer .clopsePart .contenetInnerContainer * {
  margin: 0;
}
.articleAccordion .accordionContainer .clopsePart .contenetInnerContainer ul {
  padding-left: 30px;
}
.articleAccordion .accordionContainer .clopsePart .contenetInnerContainer ol {
  padding-left: 24px;
}
.articleAccordion .accordionContainer .clopsePart .contenetInnerContainer ol li {
  padding-left: 6px;
}
.articleAccordion .accordionContainer .clopsePart .contenetInnerContainer b, .articleAccordion .accordionContainer .clopsePart .contenetInnerContainer strong {
  font-weight: 600;
}
.articleAccordion .accordionContainer .clopsePart a.learnMore,
.articleAccordion .accordionContainer .clopsePart a.customDownloadBtn,
.articleAccordion .accordionContainer .clopsePart .articleRedirect a {
  display: inline-flex;
  min-height: 36px;
  padding: 5px 18px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  border-radius: 9999px;
  border: 1px solid rgba(0, 0, 0, 0);
  background: rgba(0, 0, 0, 0.04);
  color: #292D3A;
  font-family: "HPE Graphik";
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s ease;
}
.articleAccordion .accordionContainer .clopsePart a.learnMore:hover, .articleAccordion .accordionContainer .clopsePart a.learnMore:focus,
.articleAccordion .accordionContainer .clopsePart a.customDownloadBtn:hover,
.articleAccordion .accordionContainer .clopsePart a.customDownloadBtn:focus,
.articleAccordion .accordionContainer .clopsePart .articleRedirect a:hover,
.articleAccordion .accordionContainer .clopsePart .articleRedirect a:focus {
  background: rgba(0, 0, 0, 0.08);
  color: #292D3A;
  text-decoration: none;
}
.articleAccordion .accordionContainer.expanded .accordion-arrow svg {
  transform: rotate(180deg);
}
.articleAccordion .accordionContainer.collapsed .accordion-arrow svg {
  transition: transform 0.3s ease;
}
.articleAccordion .clopsePart .marginTop20 {
  margin-left: 12px;
  margin-right: 12px;
  border-radius: 8px;
  overflow: hidden;
}
.articleAccordion .clopsePart .marginTop20 > .row {
  margin: 0 !important;
}
.articleAccordion .clopsePart .marginTop20 > .row > [class*=col-] {
  padding-left: 0;
  padding-right: 0;
}
.articleAccordion .clopsePart .marginTop20 > .row > .col-sm-3 {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}
.articleAccordion .clopsePart .marginTop20 > .row > .col-sm-3 .articleImg {
  display: none;
}
.articleAccordion .clopsePart .marginTop20 > .row > .col-sm-3 .articleDetail {
  overflow: visible;
  left: auto;
  right: 0;
}
.articleAccordion .clopsePart .marginTop20 > .row > .col-sm-3 .articleRedirect {
  display: flex;
  justify-content: flex-end;
}
.articleAccordion .clopsePart .marginTop20 > .row > .col-sm-3 .articleRedirect a,
.articleAccordion .clopsePart .marginTop20 > .row > .col-sm-3 .customDownloadBtn {
  display: inline-flex;
  flex: 0 0 auto;
}
.articleAccordion .clopsePart .marginTop20 > .row:first-of-type {
  border-top: 0;
}

.articlePart > .articleDownload:has(.articleAccordion):has(~ .articleDownload .articleAccordion) .articleAccordion:not(:has(~ .articleAccordion)) .accordionContainer::after,
.articlePart > .articleDownload:has(.articleAccordion):has(~ .articleDownload > .row) .articleAccordion:not(:has(~ .articleAccordion)) .accordionContainer::after {
  display: block;
}

.articlePart > .articleDownload:has(.articleAccordion) + .articleDownload .articleAccordion:first-child::after {
  display: none;
}

.articleAccordion .accordionHeader,
.articleAccordion .accordionHeader *,
.xchapter-header,
.xchapter-header > a,
.xchapter-header > span {
  cursor: pointer;
}

/* =========================================================================
   Rich text bullets - one treatment for every body copy area
   -------------------------------------------------------------------------
   Only the article body ADT carried these rules, so the same authored content
   rendered with green square bullets in an article and with the browser
   default black discs inside a tab description or a chapter.
   ========================================================================= */
.articleSubtextContainer ul,
.track-desc ul,
.mtab_desc ul,
.xchapter-desc ul,
.articleMediaText ul,
.articleAccordion .accordionContainer .clopsePart > span ul {
  list-style-type: square;
}
.articleSubtextContainer ul > li::marker,
.track-desc ul > li::marker,
.mtab_desc ul > li::marker,
.xchapter-desc ul > li::marker,
.articleMediaText ul > li::marker,
.articleAccordion .accordionContainer .clopsePart > span ul > li::marker {
  color: #01a982;
}
.articleSubtextContainer ul,
.articleSubtextContainer ol,
.track-desc ul,
.track-desc ol,
.mtab_desc ul,
.mtab_desc ol,
.xchapter-desc ul,
.xchapter-desc ol,
.articleMediaText ul,
.articleMediaText ol,
.articleAccordion .accordionContainer .clopsePart > span ul,
.articleAccordion .accordionContainer .clopsePart > span ol {
  padding-left: 20px;
}
.articleSubtextContainer li,
.track-desc li,
.mtab_desc li,
.xchapter-desc li,
.articleMediaText li,
.articleAccordion .accordionContainer .clopsePart > span li {
  padding-left: 6px;
}
.articleSubtextContainer ul ul > li,
.articleSubtextContainer ol ul > li,
.track-desc ul ul > li,
.track-desc ol ul > li,
.mtab_desc ul ul > li,
.mtab_desc ol ul > li,
.xchapter-desc ul ul > li,
.xchapter-desc ol ul > li,
.articleMediaText ul ul > li,
.articleMediaText ol ul > li,
.articleAccordion .accordionContainer .clopsePart > span ul ul > li,
.articleAccordion .accordionContainer .clopsePart > span ol ul > li {
  list-style: none;
  position: relative;
}
.articleSubtextContainer ul ul > li::before,
.articleSubtextContainer ol ul > li::before,
.track-desc ul ul > li::before,
.track-desc ol ul > li::before,
.mtab_desc ul ul > li::before,
.mtab_desc ol ul > li::before,
.xchapter-desc ul ul > li::before,
.xchapter-desc ol ul > li::before,
.articleMediaText ul ul > li::before,
.articleMediaText ol ul > li::before,
.articleAccordion .accordionContainer .clopsePart > span ul ul > li::before,
.articleAccordion .accordionContainer .clopsePart > span ol ul > li::before {
  content: "";
  position: absolute;
  left: -0.45em;
  top: 0.575em;
  width: 0.35em;
  height: 0.35em;
  border: 2px solid #01a982;
  box-sizing: border-box;
}

.xchapter-desc > a,
.xchapter-desc > p > a.xchapter-cta {
  transition: background 0.2s ease;
}
.xchapter-desc > a:hover, .xchapter-desc > a:focus,
.xchapter-desc > p > a.xchapter-cta:hover,
.xchapter-desc > p > a.xchapter-cta:focus {
  background: rgba(0, 0, 0, 0.08);
  color: #292d3a;
  text-decoration: none;
}

.articleDownload .article-col-2 {
  overflow: hidden;
}
.articleDownload .articleDownloadHeader {
  color: #292D3A;
  font-family: HPE Graphik;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 26px;
  display: block;
  margin-right: 40px;
}
.articleDownload .articleformatSize {
  color: #67686E;
  font-family: HPE Graphik;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 20px;
  width: auto !important;
  text-transform: none !important;
}
.articleDownload .articleDownloadContent {
  color: #67686E;
  font-family: HPE Graphik;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  margin-right: 40px;
}
.articleDownload .articleFormat {
  width: 40%;
  float: left;
  text-align: center;
  font-family: HPE Graphik;
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
}
.articleDownload .articleFormat span {
  display: block;
  padding-top: 10px;
}
.articleDownload .articleSize {
  width: 60%;
  float: right;
}
.articleDownload .articleSize .articleSizeRight {
  width: 50%;
  float: left;
  display: block;
  text-align: right;
}
.articleDownload .articleSize .articleSizeRight img {
  padding-right: 15px;
  padding-top: 10px;
}
.articleDownload .articleSize .articleSizeLeft {
  width: 50%;
  float: right;
  display: block;
}
.articleDownload .articleSize .articleSizeLeft .size {
  color: #666666;
  font-family: HPE Graphik;
  font-size: 14px;
  line-height: 20px;
}
.articleDownload .articleSize .articleSizeLeft .download {
  font-family: HPE Graphik;
  font-size: 17px;
  font-weight: 600;
  line-height: 24px;
  color: #333333;
}

.channelProgram .channelProgramHeader {
  color: #333333;
  font-family: HPE Graphik;
  font-size: 24px;
  font-weight: 300;
  line-height: 30px;
  display: block;
}
.channelProgram .channelProgramContent .channelProgramContentHeader a {
  display: block;
  margin-top: 24px;
  color: #068667;
  font-family: HPE Graphik;
  font-style: normal;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
}
.channelProgram .channelProgramContent a:hover {
  color: #074738;
}
.channelProgram .channelProgramContent .channelProgramContentText {
  display: block;
  margin-top: 6px;
  color: #666666;
  font-family: HPE Graphik;
  font-size: 14px;
  line-height: 20px;
}
.channelProgram .channelProgramContent .channelProgramContentText strong {
  font-weight: normal;
}

.programInnerContainer .programContentButton {
  margin: 30px 0px;
}
.programInnerContainer .programContentButton span {
  color: #FFFFFF;
  font-family: HPE Graphik;
  font-size: 19px;
  display: inline-block;
  font-weight: 600;
  line-height: 24px;
  border: 2px solid var(--hpe-color-decorative-brand);
  background-color: var(--hpe-color-decorative-brand);
  padding: 10px 18px;
}
.programInnerContainer .programHeader {
  color: #333333;
  font-family: HPE Graphik;
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 20px;
  display: block;
}

/* Fix: reduce the excessive gap between the RFB embedded form (.EBDiv) */
.articleDownload .EBDiv + #mtab_app,
.articleDownload .EBDiv + style + #mtab_app {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.articleDownload .EBDiv:has(+ #mtab_app),
.articleDownload .EBDiv:has(+ style + #mtab_app) {
  margin-bottom: 16px !important;
}

.articleContainer .articlePart .articleDownload:has(.EBDiv),
.articleContainer .articlePart .articleDownload:has(#mtab_app) {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.articleDownload .EBDiv {
  padding-left: 40px;
  padding-right: 40px;
}

.articleDownload #mtab_app {
  margin-left: 0;
  margin-right: 0;
  padding-left: 40px;
  padding-right: 40px;
  margin-bottom: 0;
  padding-bottom: 40px;
}
.articleDownload #mtab_app:has(.all-XaaSChapters) ul.navtabs {
  border-bottom: 0;
}
.articleDownload #mtab_app #div-tabs {
  margin-bottom: 12px;
}
.articleDownload #mtab_app .all-XaaSChapters {
  margin-top: 0;
  margin-bottom: 0;
}

.articleContainer .articlePart:has(.EBDiv),
.articleContainer .articlePart:has(#mtab_app) {
  background-color: #f7f7f7;
  border-radius: 0 0 12px 12px;
}

.articleDownload #mtab_app {
  background-color: transparent;
}

/* Article css end */
/* Order css start */
.order-returns {
  background: #FFF;
  padding: 20px;
}
.order-returns > .portlet-layout.row:first-child {
  height: 52px;
  position: relative;
}
.order-returns > .portlet-layout.row:first-child:before {
  content: "";
  width: 100%;
  border-bottom: solid 2px #ccc;
  position: absolute;
  left: 0;
  z-index: 1;
  bottom: 0px;
}
.order-returns > .portlet-layout.row:first-child .portlet-navigation .navbar {
  margin-bottom: 10px;
}
.order-returns .portlet-column-content.empty {
  padding: 24px;
}
.order-returns .portlet-navigation ul li {
  padding: 0px 12px;
}
.order-returns .portlet-navigation ul li a {
  color: #666666;
  font-family: HPE Graphik;
  font-size: 24px;
  font-weight: 600;
  line-height: 30px;
  padding: 11px 0px;
  background-color: transparent;
}
.order-returns .portlet-navigation ul li a:hover {
  background-color: transparent;
}
.order-returns .portlet-navigation ul li.active a {
  color: #333333;
  font-family: HPE Graphik;
  font-size: 24px;
  font-weight: 600;
  line-height: 30px;
}
.order-returns .portlet-navigation ul li.active a:before {
  content: "";
  width: 100%;
  border-bottom: 4px solid var(--hpe-color-decorative-brand);
  position: absolute;
  left: 0;
  z-index: 1;
  bottom: 0px;
}

/* Order css end */
/* Get Support css Start */
.get-support-popup-content.modal-content {
  border-radius: 0px;
}

.get-support-popup-content.modal-content .modal-header .close span {
  opacity: 1;
  font-size: 40px;
}

.get-support-popup-content.modal-content .modal-header {
  border-bottom: 0;
  padding: 0 10px;
}

.modal-open {
  overflow: auto !important;
}

.get-support-popup-content #popup-content-container .h3c-hpe-support-title {
  font-family: HPE Graphik;
  font-size: 24px;
  color: #000;
  line-height: 26px;
  font-weight: 600;
}

.get-support-popup-content #popup-content-container .hpeoverlay_description {
  Font-Family: HPE Graphik;
  Font-Size: 16px;
  Color: #000;
  Text-Align: left;
  Line-Height: 20px;
  Font-Style: Normal;
  font-weight: 400;
  margin-top: 10px;
}

.get-support-popup-content #Region_id {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-position: 97% 52%;
  background-repeat: no-repeat;
  border: 2px solid #c9c9ca;
  color: #757575;
  font-family: HPE Graphik;
  font-size: 0.94em;
  height: 40px;
  line-height: 1.82em;
  padding-left: 15px;
  padding-right: 12px;
  width: 350px !important;
  margin-top: 30px;
  margin-left: 20%;
  margin-bottom: 20px;
}

.get-support-popup-content #Country_id {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-position: 97% 52%;
  background-repeat: no-repeat;
  border: 2px solid #c9c9ca;
  color: #757575;
  font-family: HPE Graphik;
  font-size: 0.94em;
  height: 40px;
  line-height: 1.82em;
  padding-left: 15px;
  padding-right: 12px;
  width: 350px !important;
  margin-left: 20%;
  margin-bottom: 20px;
}

.get-support-popup-content #hpebuttonlabel {
  margin-left: 20%;
}

.get-support-popup-content #hpebuttonlabel input[type=button] {
  background-color: #fff;
  font-family: HPE Graphik;
  font-size: 15px;
  color: #000;
  text-align: center;
  letter-spacing: 0.03em;
  vertical-align: middle;
  border: 2px solid #00b388;
  position: absolute;
  width: 200px;
  height: 40px;
}

.get-support-popup-content .copyright {
  border-top: 1px solid #c9c9ca;
  color: #767676;
  font-size: 12px;
  margin-bottom: 0;
  margin-left: 25px;
  padding-top: 15px;
  margin-right: 25px;
  line-height: 14px;
  padding-bottom: 15px;
}

/* Get Support css End */
/* L2 Banner Start */
.PRPContainer .PRPPanel {
  height: 530px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.PRPContainer .PRPPanel .PRPHeader {
  color: #333333;
  font-family: HPE Graphik;
  font-size: 48px;
  font-weight: 300;
  line-height: 54px;
  padding: 48px 0 0 48px;
  width: 50%;
}
.PRPContainer .PRPPanel .PRPDescription {
  color: #000000;
  font-family: HPE Graphik;
  font-size: 24px;
  font-weight: 300;
  line-height: 30px;
  padding: 10px 0 0 48px;
  height: 72px;
}
.PRPContainer .PRPPanel .subContainer {
  height: 276px;
  width: 55%;
  padding-left: 48px;
}
.PRPContainer .PRPPanel .subContainer .subContainerHeader {
  background-color: #614767;
}
.PRPContainer .PRPPanel .subContainer .subContainerHeader .Icon {
  height: 22px;
  width: 22px;
  display: inline-block;
  margin: 15px 10px 15px 25px;
}
.PRPContainer .PRPPanel .subContainer .subContainerHeader .Icon img {
  height: 22px;
  width: 22px;
}
.PRPContainer .PRPPanel .subContainer .subContainerHeaderText {
  color: #FFFFFF;
  font-family: HPE Graphik;
  font-size: 24px;
  font-weight: 300;
  line-height: 30px;
  display: inline-block;
  vertical-align: middle;
}
.PRPContainer .PRPPanel .subContainer .subContainerHeaderText p {
  display: inline-block;
  margin: 0px 0 0 0;
}
.PRPContainer .PRPPanel .subContainer .subContainerDescription iframe {
  height: 222px;
  border: 0;
}

/* L2 Banner End */
/* Addvance Serach Css Start */
.withOutInput li {
  margin: 3px 0px;
}

.modified-custom-range.filterCalender {
  display: block;
  margin-top: 20px;
}
.modified-custom-range .col-md-6 {
  width: 100%;
  padding: 0;
  box-sizing: border-box;
  height: 36px;
  max-width: 252px;
  border: 2px solid #DDDDDD;
  background-color: #FFFFFF;
  background-image: url(../images/icons/Schedule.svg);
  background-repeat: no-repeat;
  background-position: 94% 50%;
  margin-bottom: 6px;
}
.modified-custom-range .col-md-6 .lfr-ddm-field-group {
  margin-bottom: 0;
  display: flex;
}
.modified-custom-range .col-md-6 .lfr-ddm-field-group .control-label {
  overflow: hidden;
  text-overflow: ellipsis;
  color: #606A70;
  font-family: "HPE Graphik";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  margin: 9px 0 0 13px;
  width: 79px !important;
}
.modified-custom-range .col-md-6 .lfr-ddm-field-group input {
  border: none;
  box-shadow: none;
  background: transparent;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #606A70;
  font-family: "HPE Graphik";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

/* Addvance Serach Css End */
/* endinject */
/* This file allows you to override default styles in one central location for easier upgrade and maintenance. */
/* Register popup window - PRPDXP-635 */
/* Register popup window */
.popup {
  font-family: "Metric Regular";
  margin: 0px auto;
  padding: 20px 50px;
  background: #fff;
  width: 40%;
  position: relative;
}

.popup h1 {
  margin: 30px 0 0 0;
  color: #333;
  font-family: "Metric Light";
  font-weight: 400;
  font-size: 3em;
}

.popup .close {
  font-family: "Metric Light";
  position: absolute;
  top: 0px;
  right: 30px;
  font-size: 4em;
  text-decoration: none;
  color: #666;
}

.popup .close:hover {
  color: var(--hpe-color-decorative-brand);
}

.popup .content {
  max-height: 50%;
  overflow: auto;
  font-family: "Metric Light";
  font-size: 24px;
  color: #666;
  line-height: 28px;
  text-align: justify;
}

.popup .content p strong {
  font-family: "Metric Semibold";
  color: #333;
  padding-top: 20px;
  display: block;
}

.overlay-reg {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}

.overlay-reg:target {
  visibility: visible;
  opacity: 1;
}

/* buttons */
.buttonRow {
  border-top: 1px solid #979797;
}

.btn-primary, .btn-secondary, .btn-tertiary {
  text-decoration: none;
  font-family: "Metric Semibold";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1.5em;
  white-space: normal;
  width: auto;
  border-radius: 0;
}

.btn-primary {
  background: var(--hpe-color-decorative-brand);
  color: #FFF;
  border: none;
  cursor: pointer;
  overflow: hidden;
  border: 2px solid #fff;
  padding: 10px 40px;
}

.btn-secondary {
  background: 0 0;
  color: #000;
  outline: 0;
  border: 2px solid var(--hpe-color-decorative-brand);
  padding: 10px 40px;
}

.btn-tertiary {
  color: #000;
  background: 0 0;
  border: 2px solid #C6C9CA;
  padding: 8px 40px;
}

.btn-primary:hover {
  background: var(--hpe-color-decorative-brand);
  border: 2px solid var(--hpe-color-decorative-brand);
  text-decoration: none;
}

.btn-secondary:hover {
  background: 0 0;
  box-shadow: none;
  color: #000;
  outline: var(--hpe-color-decorative-brand) solid 2px;
}

.btn-tertiary:hover {
  background: 0 0;
  outline: #C6C9CA solid 2px;
  outline: rgba(0, 0, 0, 0.2) solid 2px;
  color: #000;
}

.btn-primary.disabled, .btn-primary.disabled:hover {
  color: #666;
  background: #ddd;
  pointer-events: none;
}

/* End - Register popup window - PRPDXP-635 */
.publish-btn-group .btn-sm {
  padding: 5px 10px !important;
  font-size: 12px !important;
  border-radius: 0px !important;
  color: #ffffff !important;
  background: #337ab7 !important;
  margin: 0px !important;
}

/*settings Page css */
.orderDetailContainer .detailsContainer .titlePart {
  border-bottom: 0 !important;
  padding-bottom: 6px;
}

.orderDetailContainer .detailsContainer .emailPart {
  border-bottom: 0 !important;
}

#preferencesFunctiondiv select {
  box-shadow: none;
}

.detailsContainer .form-group {
  margin-bottom: 0;
}

.innerContainer .notificationHeader, .notificationInput .catTitle, .accountDescription span a {
  font-size: 18px !important;
  font-weight: 600;
}

#locmain-table thead th {
  font-size: 16px;
  font-weight: 400;
}

#locmain-table tr.details-row .details-table .title, #active-table tr.details-row .details-table .title {
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 18px;
}

#locmain-table tr.details-row .details-table .titleContent {
  line-height: 20px;
}

.detailsCol {
  margin-bottom: 12px;
}

#locmain-table thead th[aria-label="Company Name"] {
  width: 164px !important;
}

#locmain-table thead th[aria-label=BRT] {
  width: 135px !important;
}

#locmain-table thead th[aria-label=City] {
  width: 130px !important;
}

/* css for dataTables responsive icon */
.settings-page table.dataTable.dtr-inline.collapsed > tbody > tr[role=row] > td:first-child::before {
  top: 7px !important;
  left: initial !important;
  right: 4px !important;
  color: #333 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: FontAwesome !important;
  content: "\f107" !important;
  background-color: transparent !important;
  font-size: 14px;
}

.settings-page table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child::before {
  content: "\f106" !important;
}

.settings-page table.dataTable.dtr-column.collapsed > tbody > tr > td.control:before {
  right: 0;
  left: auto;
  height: 14px;
  width: 14px;
  color: #333;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  box-sizing: content-box;
  text-align: center;
  text-indent: 0 !important;
  font-family: FontAwesome;
  line-height: 14px;
  content: "\f107";
  background-color: transparent;
}

.settings-page table.dataTable.dtr-column.collapsed > tbody > tr.parent td.control:before {
  content: "\f106";
  background-color: transparent;
}

.settings-page table.dataTable > tbody > tr.child ul.dtr-details {
  width: 100%;
}

.settings-page table.dataTable table.details-table td {
  font-size: 16px;
}

.settings-page table.dataTable table.details-table tr:last-child {
  display: table-row;
}

.settings-page table.dataTable table.details-table tr:last-child td {
  display: table;
}

.Tools .toolsDetailsContainer .controlsPagination a {
  float: left;
}

.local-staging.staging-ready {
  padding-top: 124px;
}

.Tools .toolsALignment.activeList .small-content-footer .categoryName {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  margin: 9px 3px 0;
  float: right;
}

/* Onboarding css */
.Registration.modal-open {
  overflow: hidden !important;
}

#tokenSuccessmodal .prpSuccessMsgDiv {
  margin-bottom: 48px;
}

span.prpSuccessMsg {
  color: #666;
  font-size: 19px;
}

.com-search-header h1 {
  color: #333333;
  font-family: HPE Graphik;
  font-size: 48px;
  font-weight: 300;
  line-height: 54px;
}

.com-search-header h4 {
  color: #333333;
  font-family: HPE Graphik;
  font-size: 24px;
  font-weight: 300;
  line-height: 30px;
}

.col1, .com-selres {
  padding-top: 0;
}

#sidebar {
  padding-top: 10px;
}

#sidebar ul {
  padding-right: 0;
}

.master_step {
  color: #333333;
  font-family: HPE Graphik;
  font-size: 18px;
  letter-spacing: 0;
  line-height: 24px;
}

span.complete-value, .contactvalue, .dte {
  font-family: HPE Graphik;
  font-size: 12px;
  line-height: 20px;
}

#sidebar ul li > ul .secondary_step {
  font-family: HPE Graphik;
  font-size: 16px;
  line-height: 24px;
}

span#Completevalue {
  height: 20px;
  width: 288px;
  color: #666666;
  font-family: HPE Graphik;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 20px;
}

li li.active .secondary_step:before {
  background-image: url(https://hpe-rfb.itcs.hpe.com/builder/rs/forms/681/images/Edit.png);
  top: 6px;
  height: 13.83px;
  width: 13.83px;
  left: -30px;
}

#sidebar > ul > li.active:before {
  background: #FFE75E;
}

.formSearch, .com-selres, .confirm-password#Set-p {
  border-left: 2px solid #CCCCCC;
  padding-left: 48px;
}

.companySearchSelection {
  width: 100%;
  box-sizing: content-box;
  max-width: 380px;
}
.companySearchSelection .DivLanguageDD {
  padding: 8px 10px !important;
  background-position: right 10px center;
}
.companySearchSelection .DivLanguageDD .LabelLabel {
  padding: 0;
}
.companySearchSelection .DivLanguageDD .LanguageLabel {
  padding: 0 !important;
  font-size: 16px !important;
  color: #333;
}
.companySearchSelection .DivMenuDD + p {
  margin-top: 12px;
}
.companySearchSelection label.selectoneDD {
  height: 60px;
  line-height: 64px !important;
  padding: 0 30px 0 10px;
  background-color: #333 !important;
  background-position: right 10px center !important;
  user-select: none;
}
.companySearchSelection .DivMenuDD, .companySearchSelection .DivMenuDD label {
  user-select: none;
}
.companySearchSelection .DivMenuDD {
  position: absolute;
  box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.5);
  z-index: 9;
}
.companySearchSelection #searchByPartyID .companySearchField,
.companySearchSelection #searchByTaxID .companySearchField,
.companySearchSelection #searchByLocation .companySearchField {
  width: 100%;
  padding: 8px 10px !important;
}
.companySearchSelection #searchByPartyID label, .companySearchSelection #searchByTaxID label, .companySearchSelection #searchByLocation label,
.companySearchSelection #searchByPartyID input, .companySearchSelection #searchByTaxID input, .companySearchSelection #searchByLocation input,
.companySearchSelection #searchByPartyID select, .companySearchSelection #searchByTaxID select, .companySearchSelection #searchByLocation select {
  padding: 0 !important;
}
.companySearchSelection #searchByPartyID .form-group.input-text-wrapper,
.companySearchSelection #searchByTaxID .form-group.input-text-wrapper,
.companySearchSelection #searchByLocation .form-group.input-text-wrapper {
  height: auto !important;
  background-color: #fff;
  margin-bottom: 0;
  position: relative;
}
.companySearchSelection #searchByPartyID .form-group.input-text-wrapper input[type=text],
.companySearchSelection #searchByTaxID .form-group.input-text-wrapper input[type=text],
.companySearchSelection #searchByLocation .form-group.input-text-wrapper input[type=text] {
  height: 24px;
}

.company-selection p.searchBy {
  color: #333333;
  font-family: HPE Graphik;
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}

.company-selection p.searchContact {
  color: #333333;
  font-size: 14px;
  line-height: 16px;
  margin-bottom: 24px;
}

.companySearchSelection ul {
  margin-bottom: 12px;
  padding-left: 22px;
}

.company-selection ul li {
  color: #333333;
  font-family: HPE Graphik;
  font-size: 14px;
  line-height: 28px;
  padding-left: 14px;
}

.company-selection .DivLanguageDD label, #searchByPartyID .form-group label, .set-pass label, #searchByTaxID label, #searchByLocation label,
.user-registration-landing-portlet .container-fluid-1280 label {
  position: relative;
  width: 100%;
  color: #666666;
  font-family: HPE Graphik;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  padding-left: 13px;
  padding-top: 9px;
  margin: 0 !important;
}

.user-registration-landing-portlet .container-fluid-1280 label .asteric {
  color: #CA2B4E;
  margin-left: 2px;
}

#searchByPartyID .input-text-wrapper, .container-fluid-1280 .form-group.input-text-wrapper {
  padding: 0 !important;
}

.company-selection p {
  color: #666666;
  font-family: HPE Graphik;
  font-size: 14px;
  line-height: 20px;
  margin: 0 0 12px 0;
}

#searchByPartyID .form-group input[type=text], .set-pass input#password, .second-pwd #confirm_password,
#searchByTaxID input, #searchByLocation input, .companySearchField select#countryTax, .companySearchField select#countryLocation {
  background: white !important;
  color: #333333;
  font-family: HPE Graphik;
  font-size: 16px;
  padding: 0px 13px;
}

.companySearchField select#countryTax {
  padding-bottom: 6px;
  padding-top: 4px;
}

.companySearchField select#countryTax:focus, .companySearchField select#countryLocation:focus {
  outline: none;
}

.company-selection .button-holder {
  text-align: right;
  margin: 30px 0 0 0;
}

.registerMessage {
  max-height: 50%;
  overflow: auto;
  font-family: "Metric Light";
  font-size: 24px;
  color: #666666;
  line-height: 30px;
  text-align: justify;
  margin: 0 0 18px;
  padding: 0px;
}

.registerMessage .selectCompany {
  font-family: "HPE Graphik";
  color: #333333;
  padding: 48px 0px 0px;
  display: block;
  font-size: 24px;
  font-weight: 600;
}

.com-selres > .row {
  padding-left: 11px;
  border: 1px;
}

.com-selres .row .col-md-4 {
  padding-right: 0;
  width: 32%;
}

.com-selres .col-md-4 h4 {
  color: #333333;
  font-family: HPE Graphik;
  font-size: 24px;
  font-weight: 600;
  line-height: 30px;
  margin: 0;
}

.com-selres .col-md-8 {
  width: 68%;
  line-height: 30px;
  padding-left: 0;
}

.com-selres .col-md-8 p {
  margin-bottom: 0;
}

editCreteriaPrimary {
  margin-bottom: 40px;
  font-size: 14px;
}

input#customer, input#supplier, input#partner, input#carrier {
  vertical-align: baseline;
}

span#searchattvalue {
  padding: 10px;
  margin-left: 12px;
  margin-right: 0px;
  border-radius: 21px;
  background-color: #F6F6F6;
  color: #000000;
  font-family: HPE Graphik;
  font-size: 16px;
  font-weight: 400;
}

.editcreteia {
  margin-bottom: 12px;
}

.editcreteia a#edit {
  color: #333333;
  font-size: 14px;
  font-family: HPE Graphik;
  text-decoration: underline;
  font-weight: 400;
}

.editcreteia.editCreteriaPrimary {
  margin-bottom: 20px;
}

.tabbable-panel {
  padding: 0 !important;
  width: 100%;
}

.tabbable-panel ul.nav.nav-tabs li a {
  font-family: HPE Graphik;
  font-size: 19px;
  font-weight: 600;
  line-height: 24px;
  color: #666;
  padding: 10px 12px;
  border: 0;
}

.tabbable-panel ul.nav.nav-tabs li.active a {
  color: #333;
}

.tabbable-panel ul.nav.nav-tabs li a:hover {
  background-color: transparent;
  border: 0;
}

.tabbable-line > .nav-tabs {
  border-bottom: 2px solid #ccc !important;
  margin: 0p !important;
}

.tabbable-line > .tab-content {
  padding: 12px 0 0;
  margin-top: 0 !important;
}

.tabbable-line > .nav-tabs > li.active {
  border-bottom: 4px solid var(--hpe-color-decorative-brand);
  position: relative;
}

div.com-selres div.tabbable-line > .nav-tabs > li:first-child {
  padding-left: 12px;
}

div.com-selres div.tabbable-panel ul.nav.nav-tabs li a {
  padding: 2px 0px 8px;
}

div.com-selres div.tabbable-line > .nav-tabs > li {
  margin-right: 24px;
}

div.com-selres div.tabbable-line > .nav-tabs {
  padding-top: 10px;
}

div.com-selres div.tabbable-line > .nav-tabs > li.active {
  border-bottom: 0px solid var(--hpe-color-decorative-brand);
}

div.com-selres div.tabbable-panel ul.nav.nav-tabs li.active a,
div.com-selres div.tabbable-panel ul.nav.nav-tabs li.active a:hover {
  border-bottom: 4px solid var(--hpe-color-decorative-brand);
  margin-bottom: -1px;
}

#searchResultsTable td label, #searchResultsTableCustomer td label, #searchResultsTableVendor td label {
  margin: -2px 0 0 0;
  vertical-align: top;
  font-weight: 400;
  font-size: 16px;
  font-family: HPE Graphik;
  max-width: 70%;
  word-break: break-word;
  white-space: pre-wrap;
}

#searchResultsTable_length, #searchResultsTableCustomer_length, #searchResultsTableVendor_length {
  margin-bottom: 5px;
}

#searchResultsTable_length select, #searchResultsTableCustomer_length select, #searchResultsTableVendor_length select {
  width: 78px;
  height: 42px;
  padding-left: 12px;
  border: 2px solid #ddd;
  margin-left: 5px;
}

table#searchResultsTable, #searchResultsTableCustomer, #searchResultsTableVendor {
  border-top: 2px solid #ccc;
  border-bottom: 2px solid #ccc;
}

#searchResultsTable thead th, #searchResultsTableCustomer thead th, #searchResultsTableVendor thead th {
  font-family: HPE Graphik;
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  border-bottom: 2px solid #ccc;
  padding: 10px 12px;
  vertical-align: middle;
}

#searchResultsTable td.dataTables_empty, #searchResultsTableCustomer td.dataTables_empty, #searchResultsTableVendor td.dataTables_empty {
  font-size: 16px;
}

#searchResultsTable_wrapper, #searchResultsTableCustomer_wrapper, #searchResultsTableVendor_wrapper {
  border-bottom: 2px solid #ccc;
  padding-bottom: 32px;
}

#searchResultsTable_length label, #searchResultsTableCustomer_length label, #searchResultsTableVendor_length label {
  font-size: 16px;
}

.com-selres h6 {
  font-family: HPE Graphik;
  font-size: 18px;
  line-height: 24px;
  padding-left: 14px;
  margin: 24px 0;
}

#continueBtn .btn-default {
  border: 2px solid var(--hpe-color-decorative-brand);
  border-radius: 0;
}

.editcreteia, #reg {
  padding-left: 11px;
}

#reg, #reg:focus {
  background: transparent;
  border: 0;
  outline: 0;
}

.editcreteia a, #reg {
  color: #000000;
  font-family: HPE Graphik;
  font-size: 19px;
  font-weight: 600;
  line-height: 24px;
}

.editcreteia a#editBottom:hover {
  text-decoration: none;
}

.editcreteia .glyphicon-search:before {
  content: "\e003";
  font-size: 17px;
  color: #737373;
}

.editcreteia .glyphicon-search {
  top: 4px;
}

header#banner #heading.onboard .headerText {
  margin-left: 0;
}

.container header#banner #heading.onboard .headerIcons ul.nav-icons-list {
  margin: 24px 0 0 35px !important;
}

#wrapper header#banner #heading.onboard .headerIcons ul.nav-icons-list > li {
  margin-right: 0;
}

/*.user-registration-landing-portlet button.usr-regi-send-token:focus, .user-registration-landing-portlet button.usr-regi-send-token span.lfr-btn-label:focus {
    outline: none;
}*/
#_userRegistrationLandingPortlet_emailHelper, #_userRegistrationLandingPortlet_confirmationCodeHelper {
  margin-bottom: 0;
  margin-top: 0;
  line-height: 16px;
}

#p_p_id_userRegistrationLandingPortlet_ {
  margin: 0 !important;
  padding: 0 50px 50px 50px;
}

#p_p_id_userRegistrationLandingPortlet_ form {
  margin: 0 !important;
  padding: 0 !important;
}

#p_p_id_userRegistrationLandingPortlet_ form .input-text-wrapper {
  position: relative;
  max-width: 380px !important;
  padding: 8px 10px !important;
  margin: 0 !important;
  height: auto !important;
  width: 100% !important;
  border: 2px solid #ddd;
  background-color: #fff;
}

#p_p_id_userRegistrationLandingPortlet_ label {
  margin: 0 0 3px 0 !important;
  padding: 0;
}

#p_p_id_userRegistrationLandingPortlet_ input {
  margin: 0 !important;
  padding: 0 !important;
  height: 20px !important;
  box-shadow: none !important;
  color: #333333;
  font-family: HPE Graphik;
  font-size: 16px;
  border: 0px;
  background: transparent;
}

#_userRegistrationLandingPortlet_userRegistrationForm .form-group.input-text-wrapper:nth-of-type(2) {
  border-top: 0;
}

.user-registration-landing-portlet label .text-warning {
  color: #CA2B4E;
  font-family: HPE Graphik;
  font-size: 5px;
  position: absolute;
  top: -4px;
  margin-left: 2px;
}

#_userRegistrationLandingPortlet_emailAddressHelper, #_userRegistrationLandingPortlet_confirmationCodeHelper {
  display: none;
}

#_userRegistrationLandingPortlet_confirmationCodeHelper.has-error-usr-registration {
  display: block;
}

#_userRegistrationLandingPortlet_confirmationCodeHelper, #_userRegistrationLandingPortlet_emailHelper {
  position: absolute;
  top: 65px;
}

.user-registration-landing-portlet .input-tick-field {
  background-image: url("../images/inputTick.png") !important;
  background-size: 18px !important;
  background-position: right center !important;
  background-repeat: no-repeat !important;
}

#portlet_userRegistrationLandingPortlet span.icon-ok-sign {
  right: 16px;
  font-size: 20px;
  color: var(--hpe-color-decorative-brand);
  bottom: 9px;
  position: absolute;
}

#p_p_id_userRegistrationLandingPortlet_ .button-holder a#_userRegistrationLandingPortlet_resendToken {
  float: right;
  top: auto;
  line-height: 40px;
  display: inline-block;
  position: relative;
  color: #333333;
  font-family: HPE Graphik;
  font-size: 16px;
  letter-spacing: 0;
  text-decoration: underline;
}

div.DivLanguageDD {
  width: auto !important;
}

div.DivLanguageDD .LabelLabel {
  padding: 0;
}

div.DivLanguageDD .LanguageLabel {
  padding: 0 !important;
}

label.selectoneDD {
  width: auto;
  height: 60px;
  line-height: 64px !important;
  padding: 8px 10px;
  background-color: #333 !important;
  background-position: right 10px center !important;
  user-select: none;
}

div.DivMenuDD, div.DivMenuDD label {
  width: 100% !important;
  user-select: none;
}

div.DivMenuDD {
  position: absolute;
}

table#searchResultsTable thead .sorting_desc, #searchResultsTableCustomer thead .sorting_desc, #searchResultsTableVendor thead .sorting_desc {
  background-image: url(../images/sort_des.png);
}

table#searchResultsTable thead .sorting_asc, #searchResultsTableCustomer thead .sorting_asc, #searchResultsTableVendor thead .sorting_asc {
  background-image: url(../images/sort_asc.png);
}

table#searchResultsTable thead .sorting, table#searchResultsTableCustomer thead .sorting, table#searchResultsTableVendor thead .sorting {
  background-image: none;
}

div.com-selres #partyIdValues {
  position: absolute;
  top: -2px;
  left: -40px;
}

div.com-selres #partyIdValues span {
  text-align: right;
  float: right;
}

div.com-selres span#searchattvalue {
  height: 36px;
  padding: 4px 10px;
}

#searchResultsTable tr, #searchResultsTable td, #searchResultsTableCustomer tr, #searchResultsTableCustomer td, #searchResultsTableVendor tr, #searchResultsTableVendor td {
  padding: 17px 12px;
  background-color: transparent;
  font-weight: 400;
  font-size: 16px;
  font-family: HPE Graphik;
}

#searchResultsTable input[type=radio], #searchResultsTableCustomer input[type=radio], #searchResultsTableVendor input[type=radio] {
  margin-top: 0;
}

.dataTableFootersearchResults, .dataTableFooterCustomerResults, .dataTableFooterVendorResults {
  text-align: right;
  display: inline-block;
  width: 100%;
  padding-top: 32px;
  vertical-align: top;
  height: 70px;
}

#searchResultsTable_info, #searchResultsTableCustomer_info, #searchResultsTableVendor_info {
  float: none;
  display: inline-block;
  color: #666666;
  font-family: HPE Graphik;
  font-size: 14px;
  line-height: 20px;
  padding: 0;
  margin-top: 3px;
}

#continueBtnPartner, #continueBtnCustomer, #continueBtnVendor {
  position: absolute;
  bottom: 181px;
  left: 60px;
}

.editcreteia a#editBottom:hover {
  text-decoration: none;
}

.company-selection .formSearch {
  margin-bottom: 20px;
}

/* Aligned to the global HPE DataTables pagination (_hpe-datatables.scss).
   These wrappers are ID-scoped, so their values must match the HPE style
   directly (a class-based global rule cannot override an ID-scoped rule). */
#searchResultsTable_wrapper .dataTables_paginate a.paginate_button,
#searchResultsTableCustomer_wrapper .dataTables_paginate a.paginate_button,
#searchResultsTableVendor_wrapper .dataTables_paginate a.paginate_button {
  font-size: 14px;
  font-family: "HPE Graphik", "HPEGraphik", Arial, sans-serif;
  line-height: 20px;
  padding: 0;
  vertical-align: middle;
  border-radius: 50%;
}

#searchResultsTable_wrapper .dataTables_paginate a.paginate_button:active, #searchResultsTableCustomer_wrapper .dataTables_paginate a.paginate_button:active, #searchResultsTableVendor_wrapper .dataTables_paginate a.paginate_button:active,
#searchResultsTable_wrapper .dataTables_paginate a.paginate_button:focus, #searchResultsTableCustomer_wrapper .dataTables_paginate a.paginate_button:focus, #searchResultsTableVendor_wrapper .dataTables_paginate a.paginate_button:focus {
  box-shadow: none;
  outline: none;
}

#searchResultsTable_wrapper .dataTables_paginate a.paginate_button.current,
#searchResultsTableCustomer_wrapper .dataTables_paginate a.paginate_button.current,
#searchResultsTableVendor_wrapper .dataTables_paginate a.paginate_button.current {
  background: transparent !important;
  color: #006750 !important;
  font-weight: 600;
  border: 1px solid #006750 !important;
  border-radius: 50%;
}

#searchResultsTable_wrapper .dataTables_paginate,
#searchResultsTableCustomer_wrapper .dataTables_paginate,
#searchResultsTableVendor_wrapper .dataTables_paginate {
  padding: 0 !important;
  margin: 0;
  border: 0 !important;
}

#searchResultsTable_wrapper .dataTables_paginate a.paginate_button.previous, #searchResultsTable_wrapper .dataTables_paginate a.paginate_button.next,
#searchResultsTableCustomer_wrapper .dataTables_paginate a.paginate_button.previous, #searchResultsTableCustomer_wrapper .dataTables_paginate a.paginate_button.next,
#searchResultsTableVendor_wrapper .dataTables_paginate a.paginate_button.previous, #searchResultsTableVendor_wrapper .dataTables_paginate a.paginate_button.next {
  padding: 0 1em;
}

#searchResultsTable_length select:focus, #searchResultsTableCustomer_length select:focus, #searchResultsTableVendor_length select:focus {
  outline: none;
}

.editcreteia svg, #reg svg {
  box-sizing: border-box;
  height: 22px;
  width: 22px;
  position: relative;
  top: 6px;
  margin-right: 10px;
}

.editcreteia svg path {
  stroke: #666;
}

#reg svg path {
  stroke: var(--hpe-color-decorative-brand);
}

.mpro-qcont svg path {
  stroke: none;
}

.user-registration-landing-portlet .text-warning:before,
.companySearchSelection span#star:before,
.companySearchSelection .requiredClass label:after,
body.Contact #ddl-form-builder-app .lfr-ddm-form-container .lfr-ddm-form-field-container .icon-asterisk:before,
.set-pass .first-pwd label:after, .set-pass .second-pwd label:after, .denotesText:before {
  color: #CA2B4E;
  content: "*";
  font-weight: bold;
  font-size: 14px;
  font-family: "HPE Graphik";
  padding-left: 1px;
}

.companySearchSelection span#star {
  font-size: 0px;
}

.companySearchSelection #searchByLocation label#countryLabel:after {
  margin-left: 2px;
}

.user-registration-landing-portlet .text-warning svg.lexicon-icon.lexicon-icon-asterisk,
#portlet_com_liferay_site_navigation_language_web_portlet_SiteNavigationLanguagePortlet label svg,
.set-pass .first-pwd label svg, .set-pass .second-pwd label svg, .denotesText svg {
  display: none;
}

.user-registration-landing-portlet label .text-warning {
  margin-left: 0px !important;
  top: 0px !important;
}

.companySearchSelection .requiredClass label:after {
  margin-left: -2px;
}

body.Contact #ddl-form-builder-app .lfr-ddm-form-container .lfr-ddm-form-field-container .icon-asterisk {
  position: absolute;
  top: 7px;
  margin-left: 0px;
}

body.Contact #ddl-form-builder-app .lfr-ddm-form-container .lfr-ddm-form-field-container .checkbox .icon-asterisk:before {
  position: relative;
  top: 18px;
}

/* set-password page */
.set-pass {
  border: 0px;
  padding: 0px;
  border-bottom: 0px;
  max-width: 430px;
}

#Set-p.confirm-password h4 {
  font-size: 16px;
  font-family: "HPE Graphik";
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0px;
  color: #333;
  margin: 0 0 12px;
}

.set-pass .first-pwd, .set-pass .second-pwd {
  border: 2px solid #ddd;
  width: 100%;
  padding-bottom: 0px;
  height: 62px;
  padding: 8px 10px;
  margin-top: -2px;
  background: #FFF;
}

.set-pass::placeholder {
  color: #CCC;
}

.set-pass label, .set-pass input#password, .set-pass .second-pwd #confirm_password {
  padding: 0px;
  background: transparent;
}

.set-pass input#password, .set-pass input#confirm_password {
  border: 0;
  width: 90%;
}

.set-pass label svg {
  font-size: 5px;
  margin-left: 2px;
  position: absolute;
  top: 4px;
  color: #CA2B4E;
}

.set-pass input#password:active, .set-pass input#password:focus,
.set-pass .second-pwd #confirm_password:active, .set-pass .second-pwd #confirm_password:focus {
  border: 0px !important;
  outline: 0px;
}

.set-pass .footer-bt input#confirm {
  float: right;
}

.confirm-password .footer-bt {
  margin-top: 240px;
}

.custerror-field {
  display: block;
  min-height: 300px;
  border-left: 1px solid #ccc;
  padding: 0 20px;
  position: relative;
}

.custerror-field p {
  display: block;
  text-align: center;
  position: absolute;
  width: 100%;
  font-size: 20px;
}

.set-pass .first-pwd.has-error, .set-pass .second-pwd.has-error {
  border: 2px solid #CA2B4E;
  position: relative;
}

.set-pass .errorMsg {
  margin: 10px 0px;
  font-family: "HPE Graphik";
  font-size: 19px;
  line-height: 20px;
  color: #CA2B4E;
  position: absolute;
  max-width: 440px;
}

a {
  color: black;
  display: inline-block;
}

a:hover {
  color: black;
  text-decoration: none;
}

.portlet-title-text {
  margin-bottom: 12px !important;
  color: #292D3A !important;
}

/*Personal Details-Form */
body.settings-page span.portlet-title-text {
  font-family: HPE Graphik;
  font-style: normal;
  font-weight: 600;
  font-size: 28px;
  line-height: 34px;
  color: #292D3A;
  margin-bottom: 48px;
  padding: 0px;
  text-wrap: auto;
  text-align: left;
  overflow: initial !important;
}

body.settings-page .portlet-content h2 {
  margin-top: 0px;
}

.detailsContainer .form-group {
  padding: 0;
}

.detailsContainer label {
  width: 100%;
  color: #666666;
  font-family: HPE Graphik;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  padding-left: 13px;
  padding-top: 9px;
  margin: 0 !important;
  text-transform: capitalize;
}

.detailsContainer input, .detailsContainer select {
  color: #333333;
  font-family: HPE Graphik;
  font-size: 16px;
}

#portlet_PRPLocalizationPreference .alert-danger {
  width: 100%;
  top: -20px;
}

#manageUserTable thead th:first-child, #manageUserTable2 thead th:first-child {
  width: 64px !important;
  padding: 0 !important;
}

/*.portlet.OrdeStatusReturns, .portlet.PRP.Personal.Details, .portlet.prp-localization-preference, .portlet.PRP.Communication.Setting,
.portlet.PrpContractManagement, .portlet.CompanyContracts, .portlet.PrpLocationManagement, .portlet.Task,
.portlet.Manage.user {

	h2 {
		margin-bottom: 0px;
	}
	span.portlet-title-text {
		color: #333;
		font-family:HPE Graphik;
		font-size: 48px;
		font-weight: 300 !important;
		line-height: 54px;
		margin-bottom: 48px;
	}
}*/
.PRP.Personal.Details.Portlet .detailsContainer .firstNameContainer .titlePart,
.orderReturnsPart .detailsContainer .firstNameContainer .titlePart {
  width: 180px !important;
}

.orderReturnsPart #accountSettings .innerContainer .titlePart select {
  background-position: top right 10px;
  background-image: url(../images/icons/Up.svg) !important;
}

.Tools .toolsALignment.activeList .desc-content .toolsDescription {
  min-height: 60px;
}

.Tools .toolsALignment.activeList .small-content {
  min-height: auto;
}

#productMenuSidebar .nav-equal-height > li > a {
  max-width: inherit;
}

.PRP.Personal.Details.Portlet .lfr-alert-container {
  z-index: 9;
}

.PRP.Personal.Details.Portlet span.toolTipIcon {
  z-index: 8;
}

.settings-container .form-group #preferencesMobileNumber::placeholder, .settings-container .form-group #preferencesWorkNumber::placeholder {
  color: #CCCCCC !important;
}

.settings-container .form-group .MobileNumberExtension::placeholder, .settings-container .form-group .WorkNumberExtension::placeholder {
  color: #CCCCCC !important;
}

.PRP.Personal.Details.Portlet .form-group.input-text-wrapper.field-error, #directMailAddressModal .form-group.input-text-wrapper.field-error {
  border: 1px solid #CA2B4E;
  z-index: 7;
  position: relative;
  background: #fff;
}

.settings-container .form-group #preferencesMobileNumber, .settings-container .form-group #preferencesWorkNumber {
  width: 100%;
}

.PRP.Personal.Details.Portlet .container-fluid-1280.lfr-alert-wrapper {
  height: auto !important;
}

/* Global */
header#banner #heading.onboard {
  width: auto;
  max-width: 1240px;
  padding: 0 20px;
}

#p_p_id_userRegistrationLandingPortlet_ .button-holder {
  margin: 30px 0 0 0 !important;
  padding: 0 !important;
  max-width: 380px;
}

.container #main-content.columns-1-2 {
  padding: 24px 48px 48px 24px;
  background-color: #fff;
}

.primaryButton, .primaryButton:hover, .primaryButton:active, .primaryButton:focus {
  box-sizing: border-box;
  border: none !important;
  background-color: #292D3A !important;
  color: #FFFFFF !important;
  font-size: 18px;
  font-weight: 600;
  border-radius: 28px;
  margin: 0 !important;
  padding: 5px 18px !important;
  font-family: HPE Graphik !important;
  width: auto !important;
  min-width: 92px;
  height: 48px;
}

.primaryButton:hover, .primaryButton:focus {
  transition: 0.1s ease-in-out;
  outline-width: 0;
  color: #fff;
  background-color: #3E4550 !important;
  outline: none !important;
}

.primaryButton.disabled, .primaryButton.disabled:hover, .primaryButton[disabled], .primaryButton[disabled]:hover {
  border: 0 !important;
  background-color: rgba(0, 0, 0, 0.0392156863) !important;
  color: rgba(0, 0, 0, 0.2392156863) !important;
  letter-spacing: 0;
  line-height: 24px;
  text-align: center;
  margin-top: 20px;
  box-shadow: none;
}

.primaryButton:active {
  box-shadow: none;
}

.primaryButton.btn-default:focus, .primaryButton.btn-default:active {
  background-color: #292D3A;
  border: #292D3A;
  color: #fff;
}

.secondaryButton, .tertiaryButton {
  font-family: HPE Graphik;
  font-size: 18px;
  font-weight: 600 !important;
  line-height: 28px;
  text-align: center;
  color: #292D3A;
  box-sizing: border-box;
  min-width: 111px;
  background-color: #F7F7F7 !important;
  padding: 9px 24px;
  border: 0;
  border-radius: 28px;
  transition: 0.1s ease-in-out;
}

.secondaryButton {
  border: 0;
  background-color: #E6E8E9 !important;
}

.tertiaryButton {
  /*border: 2px solid #333;*/
}

.secondaryButton:hover {
  transition: 0.1s ease-in-out;
  background-color: #D4D8DB !important;
  outline-width: 0;
}

.tertiaryButton:hover, .tertiaryButton:active {
  transition: 0.1s ease-in-out;
  outline-width: 0;
  text-decoration: none;
  background-color: #E6E8E9 !important;
}

.tertiaryButton:focus, .tertiaryButton:active {
  border: 0;
  outline: 0px;
  transition: 0.1s ease-in-out;
  outline-width: 0 !important;
  text-decoration: none;
  outline: 0px !important;
  background-color: #E6E8E9 !important;
}

.secondaryButton.disabled, .secondaryButton.disabled:hover {
  font-family: HPE Graphik;
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  text-align: center;
  color: rgba(0, 0, 0, 0.2392156863);
  box-sizing: border-box;
  height: 48px;
  min-width: 111px;
  background-color: rgba(0, 0, 0, 0.0392156863) !important;
}

.denotesText svg {
  width: 5px;
  top: -7px !important;
  position: absolute !important;
  margin-left: -6px !important;
}

/* Home Page */
#carouselExampleIndicators .carousel-indicators li {
  border: 3px solid #ddd;
}

#wrapper header#banner #heading .headerIcons ul.nav-icons-list > li {
  margin-left: 24px !important;
  margin-right: 0px !important;
}

.toolHeader .accesstools {
  margin-top: 1px !important;
}

.overViewContaner_X {
  z-index: 98 !important;
}

.articleHeader_X {
  z-index: 98 !important;
}

.ShortDescPage {
  z-index: 98 !important;
}

.cubiertaPage {
  z-index: 98 !important;
}

/* Personal Details */
.nested-body-holder .container-fluid {
  padding: 0px;
}

.portlet.PRP.Personal.Details .portlet-content {
  margin: 0px;
  padding: 0px;
}

.col-md-6 .settings-container .footerButtons {
  position: relative;
  display: flex;
}

.personal-details .preferenceApply a {
  margin-left: 10px;
}

.col-md-6.settings-container {
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
  line-height: 1;
  font-size: 14px;
  font-family: HPE Graphik, Arial, Helvetica, sans-serif;
}

.personal-name:after, .state-country:after {
  content: "";
  clear: both;
  display: block;
}

.settings-container label {
  position: relative;
  width: 100%;
  color: #292D3A;
  font-family: HPE Graphik;
  font-size: 12px;
  line-height: 20px;
  font-weight: 600;
  height: auto;
  margin: 0px;
  padding-bottom: 0px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

label[for$=firstName], label[for$=lastName], label[for$=middleInitial], label[for$=email] {
  color: var(--formField-default-label-disabled-rest-textColor, rgba(0, 0, 0, 0.24));
}

label[for$=firstName] .reference-mark,
label[for$=lastName] .reference-mark, label[for$=email] .reference-mark {
  color: var(--formField-default-label-disabled-rest-textColor, rgba(0, 0, 0, 0.24)) !important;
}

label[for$=firstName] .reference-mark svg,
label[for$=lastName] .reference-mark svg, label[for$=email] .reference-mark svg {
  fill: var(--formField-default-label-disabled-rest-textColor, rgba(0, 0, 0, 0.24)) !important;
}

.settings-container .form-control {
  margin: 0 !important;
  padding: 6px 12px !important;
  height: 36px !important;
  box-shadow: none !important;
  color: #2A2D3A;
  font-family: HPE Graphik;
  font-size: 16px;
  border: 1px solid #B1B9BE;
  background: transparent;
  border-radius: 8px;
  width: 90%;
}

.settings-container .form-group {
  padding: 0px;
  margin: 0px;
  padding: 8px 0 !important;
  margin: 0 !important;
  height: auto !important;
  background-color: transparent;
}

.settings-container .form-group .MobileNumberExtension:focus, .settings-container .form-group #preferencesMobileNumber:focus, .settings-container .form-group #countryCode:focus, .settings-container .form-group #preferencesWorkNumber:focus {
  border: 0px;
  outline: none;
}

.settings-container .form-group .MobileNumberExtension, .settings-container .form-group #preferencesMobileNumber, .settings-container .form-group #countryCode, .settings-container .form-group #preferencesWorkNumber {
  margin: 0 !important;
  padding: 0 !important;
  height: 20px !important;
  box-shadow: none !important;
  color: #333333;
  font-family: HPE Graphik;
  font-size: 16px;
  border: 0px;
  background: transparent;
}

.settings-container .col-md-4, .settings-container .col-md-8 {
  padding: 0px;
  margin: 0px;
}

.settings-container .form-group select {
  background: transparent;
  background-image: url(/o/prp-theme/images/icons/Up.svg);
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px;
  text-overflow: ellipsis;
  padding-right: 14px !important;
}

.settings-container .form-group select.form-control[multiple] {
  background-image: none;
  padding-right: 0 !important;
}

.settings-container .form-group.field-error select, .settings-container .field-error .form-control {
  border-color: #CC1F1A;
  background-color: #ffecec !important;
}

.passwordContainer .heading-3 {
  color: #333333;
  font-family: HPE Graphik;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 30px;
  margin: 0px 0px 6px 0px;
}

.passwordContainer .change-or-reset-your {
  color: #333333;
  font-family: HPE Graphik;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 20px;
  margin-bottom: 24px;
}

.passwordContainer button.button-light-secondary {
  height: 40px;
  width: 188px;
  border: 2px solid var(--hpe-color-decorative-brand);
  box-sizing: border-box;
  color: #000000;
  font-family: HPE Graphik;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 24px;
  text-align: center;
  border-radius: 0px;
}

.settings-container .passwordContainer {
  padding: 48px 0px;
}

.personal-details .perferenceNotification {
  border: 6px solid var(--hpe-color-decorative-brand);
  padding: 27px 48px 27px 27px;
  background-color: #FFFFFF;
  margin-left: 20px;
}

.perferenceNotification-applied {
  border: 6px solid #CCCCCC;
  padding: 27px 48px 27px 27px;
  background-color: #FFFFFF;
  margin-left: 20px;
}

.personal-details .perferenceNotification .preferenceTitle, .preferenceTitle.PPAApplied {
  display: block;
  color: #333333;
  font-family: HPE Graphik;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 24px;
}

.personal-details .perferenceNotification .preferenceDescriptipon, .personal-details .preferenceDescriptipon.PPAApplied {
  display: block;
  color: #333333;
  font-family: HPE Graphik;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 20px;
  padding-bottom: 11px;
}

.personal-details .preferenceApply a {
  color: #000000;
  text-decoration: none;
  font-family: HPE Graphik;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 24px;
  passing-left: 10px;
}

.preferenceApply img {
  width: 24px;
  height: 24px;
}

svg.lexicon-icon.lexicon-icon-asterisk {
  color: #292D3A;
  font-family: HPE Graphik;
  font-size: 5px;
  position: absolute;
  margin: 0px;
}

.settings-container .personal-name .col-md-4 .input-select-wrapper {
  border-right: 0px;
}

.primaryButton-light {
  border: 1px solid #292D3A;
  background-color: #292D3A;
  box-shadow: none;
  color: #fff;
  font-family: HPE Graphik;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 26px;
  text-align: center;
  width: auto !important;
  min-width: 200px;
  border-radius: 0px;
  margin-right: 20px;
}

.primaryButton-light:disabled {
  border: 1px solid rgba(0, 0, 0, 0.0392156863);
  background-color: rgba(0, 0, 0, 0.0392156863);
  box-shadow: none;
  color: rgba(0, 0, 0, 0.2392156863);
  font-family: HPE Graphik;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 24px;
  text-align: center;
  width: auto !important;
  min-width: 200px;
  border-radius: 0px;
}

.primaryButton-light:disabled:hover {
  border: 1px solid rgba(0, 0, 0, 0.0392156863) !important;
  background-color: rgba(0, 0, 0, 0.0392156863) !important;
  color: rgba(0, 0, 0, 0.2392156863) !important;
}

.tertiaryButton-light:hover, .tertiaryButton-light:active {
  transition: 0.1s ease-in-out;
  box-shadow: 0px 0px 0px 2px var(--hpe-color-decorative-brand);
  outline-width: 0;
  outline: none !important;
  box-shadow: none;
}

.tertiaryButton-light, .tertiaryButton-light:hover, .tertiaryButton-light:active {
  font-family: HPE Graphik;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
  color: #000;
  box-sizing: border-box;
  height: 36px;
  min-width: 200px;
  background: #fff !important;
  border-radius: 0;
  border: 2px solid var(--hpe-color-decorative-brand);
}

.primaryButton-light:hover, .primaryButton-light:focus {
  transition: 0.1s ease-in-out;
  outline-width: 0;
  color: #fff !important;
  outline: none !important;
  background-color: var(--hpe-color-decorative-brand) !important;
  box-shadow: none !important;
  border-color: var(--hpe-color-decorative-brand) !important;
}

.settings-container .input-text-wrapper .col-md-2, .settings-container .input-text-wrapper .col-md-10 {
  padding: 0px;
}

span.toolTipIcon {
  position: absolute;
  top: 65%;
  right: 20px;
  transform: translate(0, -50%);
}

.settings-container .input-text-wrapper, .settings-container .input-select-wrapper {
  margin: 0px 0px -2px 0px !important;
  line-height: 1em;
}

svg.lexicon-icon.lexicon-icon-asterisk {
  color: #292D3A;
  font-family: HPE Graphik;
  font-size: 5px;
  position: absolute;
  margin: 0;
  padding: 0;
  top: 3px;
  bottom: 0;
}

.personal-name, .preferences-work-number, .preferences-mobile-number, .preferencesEmail, .preferencesLastName, .state-country {
  position: relative;
}

.settings-container .personal-name .col-md-4 .input-select-wrapper.has-error {
  border: 2px solid #CA2B4E;
  z-index: 7;
  position: relative;
}

.settings-container .form-group.input-select-wrapper.has-error {
  border: 2px solid #CA2B4E;
  z-index: 7;
  position: relative;
  background: #fff;
}

.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
  cursor: not-allowed;
  color: rgba(0, 0, 0, 0.2392156863) !important;
  border: 1px solid rgba(0, 0, 0, 0.1215686275);
}

.user-profile-change-container {
  text-align: left;
  padding: 40px;
  border: 1px solid #D4D8DB;
  border-radius: 12px;
}

.user-profile-change-section {
  margin-bottom: 48px;
  border-bottom: 1px solid #D4D8DB;
  padding-bottom: 48px;
}

.user-profile-change-section:last-child {
  margin-bottom: 0;
  border-bottom: 0;
  padding-bottom: 0;
}

.user-profile-change-section a {
  color: #068667;
  font-weight: 400 !important;
}

.user-profile-change-section a:hover {
  color: #074738;
}

/* Settings menu links (Account / Partnership / Preferences / Administration):
   HPE green -> HPE dark green on hover */
/*.child-tab:hover,
.child-tab:hover a,
.child-tab a:hover {
    color: #074738 !important;
}*/
.portlet.PRP.Personal.Details.Portlet .col-md-6 {
  margin: 0px;
  padding: 0px;
}

.form-group.input-text-wrapper.has-error {
  border: 2px solid #CA2B4E;
  z-index: 7;
  position: relative;
  background: #fff;
}

/*End-of-personal-details */
/*manage-users & Task*/
.manage-user-container .dt-buttons {
  display: inline;
}

.manage-user-container #inactiveUser {
  padding-left: 0px;
}

table#myTable.taskRequestTable thead th.checkboxCol, table#myTable.taskRequestTable tbody td.checkboxCol,
#manageUserTable thead th:first-child, #manageUserTable tbody td:first-child, #manageUserTable2 thead th:first-child, #manageUserTable2 tbody td:first-child {
  width: 40px !important;
  padding: 0 !important;
}

table#myTable.taskRequestTable label.checkboxContainer, #manageUserTable label.checkboxContainer,
#manageUserTable2 label.checkboxContainer {
  position: relative !important;
  width: 100%;
  height: 40px;
  padding: 0 12px;
}

/* Prevent the full-width row-height hover highlight (rgba(0,0,0,0.04) from .checkboxContainer:hover)
   from spilling out on the left/right of the actual checkbox in the manage users / task tables.
   The row/label itself must never tint on hover -- only the checkbox square should
   (see the .checkmark hover rule below), matching the terms-of-use checkbox behavior. */
table#myTable.taskRequestTable label.checkboxContainer:hover, #manageUserTable label.checkboxContainer:hover,
#manageUserTable2 label.checkboxContainer:hover {
  background: transparent !important;
}

/* HPE Design System - CheckBox (kind "default", size "medium"), light mode.
   Token values taken from hpe-design-tokens `hpe.checkbox.default.*`:
     control.width/height ............ 24px  (--hpe-base-dimension-600)
     control.borderRadius ............  6px  (--hpe-static-radius-xsmall)
     control.borderWidth .............  1px  (--hpe-borderWidth-default)
     control.rest.background ......... transparent
     control.rest.borderColor ........ #B1B9BE (color-border-default)
     control.hover.background ........ rgba(0,0,0,0.04) (color-background-hover)
     control.hover.borderColor ....... #3E4550 (color-border-strong)
     control.selected.rest.bg ........ #068667 (background-selected-primary-strong)
     control.selected.rest.border .... transparent
     control.selected.rest.iconColor . #FFFFFF, stroke-width 2px
     control.selected.hover.bg ....... #006750 (background-selected-primary-strong-hover)
     control.disabled.rest.border .... rgba(0,0,0,0.12) (color-border-disabled)
     control.disabled.rest.iconColor . rgba(0,0,0,0.24) (color-icon-disabled)
   Focus uses the global focusIndicator tokens: 2px #292D3A ring, offset 2px over
   a #FFFFFF support ring. */
table#myTable.taskRequestTable label.checkboxContainer .checkmark, #manageUserTable label.checkboxContainer .checkmark,
#manageUserTable2 label.checkboxContainer .checkmark {
  width: 24px;
  height: 24px;
  border: 1px solid #B1B9BE;
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
}

/* Hover on an unchecked control: DS control.hover.background tint applied to the
   24x24 square only. The label itself stays transparent (rule above), so the
   highlight never bleeds out on the four sides of the checkbox.
   The rest border colour is deliberately kept - hover must not darken it. */
table#myTable.taskRequestTable label.checkboxContainer:hover input:not(:checked):not(:disabled) ~ .checkmark,
#manageUserTable label.checkboxContainer:hover input:not(:checked):not(:disabled) ~ .checkmark,
#manageUserTable2 label.checkboxContainer:hover input:not(:checked):not(:disabled) ~ .checkmark {
  background-color: rgba(0, 0, 0, 0.04);
  box-shadow: none;
}

/* Selected: solid green fill, no visible border, white 2px tick. */
table#myTable.taskRequestTable label.checkboxContainer input:checked ~ .checkmark,
#manageUserTable label.checkboxContainer input:checked ~ .checkmark,
#manageUserTable2 label.checkboxContainer input:checked ~ .checkmark {
  background: #068667 !important;
  border: 1px solid transparent !important;
  box-shadow: none;
}

/* Selected + hover: the checked fill must NOT darken. The HPE DS token
   control.selected.hover.background (#006750) is deliberately not used here -
   per design review the checked checkbox keeps the same light green (#068667)
   whether it is hovered or not, so checking a row never changes its shade. */
table#myTable.taskRequestTable label.checkboxContainer:hover input:checked:not(:disabled) ~ .checkmark,
#manageUserTable label.checkboxContainer:hover input:checked:not(:disabled) ~ .checkmark,
#manageUserTable2 label.checkboxContainer:hover input:checked:not(:disabled) ~ .checkmark {
  background: #068667 !important;
  border: 1px solid transparent !important;
}

/* Selection ring: DS focusIndicator - an inner #FFFFFF gap ring plus a 2px
   #292D3A (black) outer ring.

   It must appear the moment the row checkbox is clicked (checking AND
   un-checking) and stay until focus moves somewhere else. Three selectors are
   used so this holds in every browser:
     input:active      - covers the mouse-down press itself
     input:focus       - covers the state after mouse-up / keyboard tabbing
     label:focus-within - safety net for browsers that focus the <label>
                          rather than the visually hidden <input>
   Hover deliberately does NOT draw the ring (it only tints the square). */
table#myTable.taskRequestTable label.checkboxContainer input:focus ~ .checkmark,
table#myTable.taskRequestTable label.checkboxContainer input:active ~ .checkmark,
table#myTable.taskRequestTable label.checkboxContainer:focus-within .checkmark,
#manageUserTable label.checkboxContainer input:focus ~ .checkmark,
#manageUserTable label.checkboxContainer input:active ~ .checkmark,
#manageUserTable label.checkboxContainer:focus-within .checkmark,
#manageUserTable2 label.checkboxContainer input:focus ~ .checkmark,
#manageUserTable2 label.checkboxContainer input:active ~ .checkmark,
#manageUserTable2 label.checkboxContainer:focus-within .checkmark {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #292D3A !important;
  border-radius: 6px;
}

/* The theme-wide ".checkboxContainer input:focus:not(:focus-visible)" rule
   blanks the ring for pointer interaction, which made the ring flash only while
   the mouse button was held down and disappear as soon as the box got checked.
   Re-assert the ring here so a clicked checkbox keeps it until blur. */
table#myTable.taskRequestTable label.checkboxContainer input:focus:not(:focus-visible) ~ .checkmark,
#manageUserTable label.checkboxContainer input:focus:not(:focus-visible) ~ .checkmark,
#manageUserTable2 label.checkboxContainer input:focus:not(:focus-visible) ~ .checkmark {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #292D3A !important;
}

/* Disabled: DS uses a 1px rgba(0,0,0,0.12) border and a rgba(0,0,0,0.24) tick.
   The global rule further down the file paints a 2px #D7D7D7 border/tick, so it is
   re-stated here for these tables to keep the control on the DS scale. */
table#myTable.taskRequestTable label.checkboxContainer input:disabled ~ .checkmark,
#manageUserTable label.checkboxContainer input:disabled ~ .checkmark,
#manageUserTable2 label.checkboxContainer input:disabled ~ .checkmark {
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: not-allowed;
}

table#myTable.taskRequestTable label.checkboxContainer input:disabled ~ .checkmark:after,
#manageUserTable label.checkboxContainer input:disabled ~ .checkmark:after,
#manageUserTable2 label.checkboxContainer input:disabled ~ .checkmark:after {
  border: solid rgba(0, 0, 0, 0.24) !important;
  border-width: 0 2px 2px 0 !important;
}

table#myTable.taskRequestTable thead th:last-child {
  width: 160px !important;
}

table#myTable.taskRequestTable label.radioButtonContainer {
  margin: 0 !important;
  top: 2px;
  height: 24px !important;
  position: relative;
  color: #333;
  font-weight: 600;
  width: 50%;
  float: left;
}

.customDataTableContainer .footerButtons .tertiaryButton {
  min-width: 120px;
}

.customDataTableContainer .footerButtons .tertiaryButton[disabled], .customDataTableContainer .footerButtons .tertiaryButton[disabled]:hover {
  font-family: HPE Graphik;
  font-size: 19px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
  color: #CCCCCC;
  box-sizing: border-box;
  height: 42px;
  min-width: 120px;
  border: 2px solid #CCCCCC;
}

.customDataTableContainer .footerButtons .tertiaryButton[disabled]:hover {
  box-shadow: 0px 0px 0px 2px #ccc;
}

#userTools th.custom-footer {
  font-weight: 400;
  padding-left: 52px;
}

#userTools #toolNameLoad {
  font-weight: 600;
  margin-bottom: 10px;
}

#userTools .clr-grey.userRightNameLoaded {
  color: #666;
  margin-bottom: 10px;
}

/*table#manageUserTable label.checkboxContainer span.checkmark,
table#manageUserTable2 label.checkboxContainer span.checkmark,
#myTable.taskRequestTable label.checkboxContainer span.checkmark {
	left: 50% !important;
    top: 10px !important;
	transform: translate(-50%, 0) !important;
}*/
#manageUserModal.prpModal button.close, #myModal.prpModal button.close, #capabilityaccessmodle.prpModal button.close,
#lastPPAModal.prpModal button.close {
  position: absolute;
  top: 6px;
  right: 24px;
  opacity: 0.5;
  font-size: 50px;
  font-weight: 300;
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
}

#manageUserModal ul.prpNavTabs.nav.nav-tabs {
  margin-bottom: 24px;
}

#manageUserModal .settings-container .form-group {
  margin: 0px 0px -2px 0px !important;
}

#manageUserModal .settings-container .functionPart.form-group {
  width: 100%;
}

#manageUserTable thead th:nth-child(5) {
  width: 130px !important;
}

#manageUserModal .myDropdiv {
  position: absolute;
  z-index: 4;
  left: 0px;
  width: 100%;
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
  min-width: 100%;
  font-family: HPE Graphik;
  cursor: pointer;
  background-color: #f6f6f6;
  top: 60px;
  margin-top: 0px;
  max-height: 275px;
  overflow-y: auto;
}
#manageUserModal .myDropdiv .divChild {
  font-family: HPE Graphik;
  font-size: 16px;
  color: #333;
  padding: 4px 12px;
}
#manageUserModal .hideDiv {
  display: none;
}
#manageUserModal .cursorPointer label {
  cursor: pointer;
}
#manageUserModal .cursorPointer input {
  cursor: pointer;
}
#manageUserModal .defaultColorBlack {
  color: black !important;
}
#manageUserModal .dropdown-selected {
  text-overflow: ellipsis;
  width: 85%;
  white-space: nowrap;
  overflow: hidden;
}
#manageUserModal .mg-usr-dropdown-btn {
  background: none repeat scroll 0 0 transparent;
  color: #FFF !important;
  padding: 0px 0px 0 0px;
  margin: 1px 2px;
  line-height: 18px;
  color: black !important;
}
#manageUserModal .Image-caret {
  background-image: url("../images/icons/nav_down.png") !important;
  background-repeat: no-repeat !important;
  background-size: 14px !important;
  background-position: center right 10px;
  font-size: 14px;
}
#manageUserModal .Image-up {
  background-image: url("../images/icons/nav_Up.png");
  background-repeat: no-repeat;
  background-size: 14px;
  background-position: center right 10px;
}
#manageUserModal .background_black {
  background-color: #000 !important;
  height: 60px;
  margin: 0;
}
#manageUserModal .ms-parent .selected {
  background-color: #DFDBF6;
}
#manageUserModal .ms-drop input[type=checkbox] {
  display: none;
}
#manageUserModal .ms-drop {
  cursor: pointer;
  background-color: rgb(246, 246, 246);
}
#manageUserModal .dropdown-role {
  display: block;
  height: 0px;
  padding: 0px;
}
#manageUserModal .ms-drop ul > li {
  font-family: HPE Graphik;
  font-size: 16px;
  color: #333;
  padding: 4px 12px 4px 0px;
}
#manageUserModal .ms-choice > span {
  left: 4px;
  color: black;
}
#manageUserModal .ms-parent .selected {
  background-color: #ccc;
}
#manageUserModal .ms-drop ul > li.selected label {
  font-weight: 600;
  color: #000;
}
#manageUserModal .ms-drop ul > li label {
  font-size: 16px;
}
#manageUserModal .ms-drop ul {
  padding: 0px;
}
#manageUserModal .innerContainer .notificationHeader {
  display: inline-block;
  width: 100%;
  margin-bottom: 0px;
}
#manageUserModal .innerContainer .notificationHeader .applyPPAHeader {
  float: left;
  width: 60% !important;
  color: #000000;
  font-family: HPE Graphik;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
}
#manageUserModal .innerContainer .notificationHeader .rightOne {
  float: right;
  width: 50%;
  color: #333333;
  font-family: HPE Graphik;
  font-size: 16px;
  line-height: 20px;
  padding-right: 10px;
  text-align: right;
}
#manageUserModal .innerContainer .notificationHeader .leftOne, #manageUserModal .regionContainer h2, #manageUserModal .dateAndTimeContainer h2 {
  width: 50%;
  color: #000000;
  font-family: HPE Graphik;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  margin: 0;
}
#manageUserModal .personal-name, #manageUserModal .preferences-work-number, #manageUserModal .preferences-mobile-number, #manageUserModal .preferencesEmail, #manageUserModal .preferencesLastName, #manageUserModal .state-country {
  position: relative;
}
#manageUserModal .detailsContainer .firstNameContainer {
  display: flex;
  width: 100%;
}
#manageUserModal .detailsContainer .titlePart, #manageUserModal .detailsContainer .functionContainer, #manageUserModal .detailsContainer #editTimeZoneDiv, #manageUserModal .detailsContainer #editLanguageDiv {
  display: block;
  border: 2px solid #ddd;
  position: relative;
}
#manageUserModal .detailsContainer .lastNamePart, #manageUserModal .detailsContainer .emailPart, #manageUserModal .detailsContainer .titlePart, #manageUserModal .detailsContainer .mobilePart, #manageUserModal .detailsContainer .workPart {
  position: relative;
}
#manageUserModal .innerContainer label {
  font-weight: normal;
  color: #666666;
  font-family: HPE Graphik;
  font-size: 14px;
  line-height: 20px;
  display: block;
  padding: 0;
  margin: 0;
}
#manageUserModal .innerContainer .dateAndTimeContainer label.radioButtonContainer {
  width: 100%;
  margin: 12px 5px;
  padding-left: 30px;
  position: relative;
}
#manageUserModal .innerContainer label.radioButtonContainer .customRadioButton {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
#manageUserModal .innerContainer label.radioButtonContainer .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 24px;
  width: 24px;
  background: none;
  background-color: transparent;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid #666 !important;
  cursor: pointer;
}
#manageUserModal .innerContainer label.radioButtonContainer .checkmark::after {
  top: 5px;
  left: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--hpe-color-decorative-brand);
  position: absolute;
  content: "";
  display: none;
}
#manageUserModal .innerContainer label.radioButtonContainer input:checked ~ .checkmark::after {
  display: block;
}
#manageUserModal .innerContainer ul.notificationInput {
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #ccc;
  margin: 0px;
  padding: 15px 0px 20px;
}
#manageUserModal .innerContainer ul.notificationInput li {
  display: inline-block;
  width: 100%;
}
#manageUserModal .innerContainer ul.notificationInput li .notificationLbel {
  float: left;
  color: #000000;
  font-family: HPE Graphik;
  font-size: 16px;
  line-height: 20px;
}
#manageUserModal .innerContainer ul.notificationInput li label.switch {
  float: right;
  margin-right: 10px;
  position: relative;
  display: inline-block;
  width: 48px;
  height: 24px;
}
#manageUserModal .prpRadioGroup .prpRadioButton {
  top: 0px;
  left: -33px;
}
#manageUserModal .modal-content .mg-usr-dropdown-btn {
  background: none repeat scroll 0 0 transparent;
  color: #FFF !important;
  border-top-right-radius: 4px;
  border-bottom-left-radius: 4px;
  padding: 0px 0px 0 0px;
  margin: 1px 2px;
  line-height: 18px;
  border-style: none;
  color: black !important;
}
#manageUserModal .innerContainer .Image-up label.selectLabelClass.myDropCheck {
  color: #fff !important;
  padding: 19px 10px 0px 10px !important;
}
#manageUserModal .innerContainer #editJobTitleDiv label, #manageUserModal .innerContainer .functionContainer label,
#manageUserModal .innerContainer #editTimeZoneDiv label, #manageUserModal .innerContainer #editLanguageDiv label {
  padding: 8px 10px 0px 10px;
  margin-bottom: 4px !important;
}
#manageUserModal .innerContainer #editJobTitleDiv input, #manageUserModal .innerContainer .functionContainer input,
#manageUserModal .innerContainer #editTimeZoneDiv input, #manageUserModal .innerContainer #editLanguageDiv input {
  padding: 0px 8px 12px 10px;
}

.manage-user-portlet .manage-user-container .modal .modal-dialog .modal-content .dropdown-selected {
  text-overflow: ellipsis;
  width: 85%;
  white-space: nowrap;
  overflow: hidden;
}
.manage-user-portlet .manage-user-container .modal .modal-dialog .modal-content .defaultColorBlack {
  color: black !important;
}
.manage-user-portlet .manage-user-container .modal .modal-dialog .modal-content .detailsContainer .extensionInput {
  width: 60px !important;
  float: left;
  padding: 10px;
}
.manage-user-portlet .manage-user-container .modal .modal-dialog .modal-content .innerContainer input[type=text], .manage-user-portlet .manage-user-container .modal .modal-dialog .modal-content .innerContainer input[type=tel] {
  height: 25px;
  border: none;
  width: 100%;
  color: #ddd !important;
  font-family: HPE Graphik;
  font-size: 16px;
  line-height: 24px;
  font-weight: normal;
  padding: 0px;
  background: transparent;
  box-shadow: none;
}
.manage-user-portlet .manage-user-container .modal .modal-dialog .modal-content .detailsContainer, .manage-user-portlet .manage-user-container .modal .modal-dialog .modal-content .regionContainer, .manage-user-portlet .manage-user-container .modal .modal-dialog .modal-content .dateAndTimeContainer {
  margin-bottom: 48px;
}

.manage-user-container table.dataTable.no-footer {
  border-bottom: 1px solid #ddd;
}

.manage-user-container #activeUser {
  padding-right: 0px;
}

.manage-user-container #inactiveUser {
  padding-right: 0px;
}

div#PPAUserTable_filter {
  display: inline-block;
  width: 100%;
}

div#PPAUserTable_filter label {
  float: left;
  max-width: 440px;
  position: relative;
  margin-right: 16px;
}

div#PPAUserTable_filter button.primaryButton.searchBtn {
  height: 40px;
}

#PPAUserTable_wrapper .dataTableFootersearchResults {
  position: absolute;
  right: 0px;
  width: auto !important;
  bottom: 20px;
  float: left;
}

#PPAUserTable_wrapper .dataTables_info, .dataTables_paginate {
  float: left;
  margin-left: 5px;
}

#PPAUserTable_wrapper .dataTableFooter.dataTableCustomFooter {
  float: none;
  width: 100%;
  display: inline-block;
  margin-bottom: 5px;
}

#PPAUserTable_wrapper .dataTableFooter.dataTableCustomFooter {
  float: none;
  width: 100%;
  display: inline-block;
}

#PPAUserTable_wrapper .modalFooter.footerPopupButtons {
  border-top: 0px !important;
  padding: 0px 0 !important;
}

#PPAUserTable_wrapper .modalFooter.footerPopupButtons button {
  margin-right: 12px !important;
  height: 40px;
  min-width: 140px !important;
}

#PPAUserTable_wrapper .modalFooter.footerPopupButtons button.tertiaryButton {
  margin: 0px;
  vertical-align: top;
}

.modalFooter.footerButtons.userRight-modal-footer {
  padding-top: 12px;
}

#PPAUserTable_wrapper .infoPagntncol {
  position: relative;
  top: -45px;
  float: right;
  display: flex;
  justify-content: flex-end;
}

#_userManagementPortlet_lastPPAdialog {
  display: block;
}

#manage-user-userToolsDiv .prpRadioGroup .prpRadioButton {
  top: -16px;
  left: 28px;
}

#_userManagementPortlet_lastPPAdialog.modal-hidden {
  display: none;
}

#portlet_userManagementPortlet .container-fluid-1280.lfr-alert-wrapper {
  overflow: inherit !important;
}

#myTable .prpRadioGroup {
  padding: 6px 16px 6px 32px;
  display: inline;
}

#myTable .prpRadioGroup .prpRadioButton {
  top: 3px;
  left: 0;
}

#toolUserRightDataLoad .prpRadioButton {
  top: -11px;
  left: 30px;
}

table#userTools {
  border-bottom: 0;
}

.prpModal .regionContainer {
  margin-top: 48px;
}

#toolDescriptionLoad {
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
}

#tools .tool-access-inner-container .col-sm-12 .row {
  margin-bottom: 15px;
}

#myTable .prpRadioGroup input[type=radio] {
  top: 6px;
  left: 6px;
}

/*tools-catalog */
.toolsContainer .toolsCatalog .card .card-body .tools-catalog-list .tools-catalog-list-ul li {
  font-size: 16px;
  font-family: HPE Graphik;
  font-weight: 400;
}

.Tools .small-content-footer .categoryName {
  margin: 0 6px 0 0;
  padding: 3px 6px;
  display: inline-block;
  border: 1px solid #D4D8DB;
  border-radius: 6px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0%;
  color: #3E4550;
  font-weight: 600;
}

/*tools catlog page*/
.toolsContainer .card .card-body .tools-catalog-header span {
  font-family: "Glyphicons Halflings";
}

.toolsContainer .card .card-body .tools-catalog-header .tools-catalog-header-title {
  font-size: 28px;
  font-weight: 600;
  color: #292D3A;
  font-family: HPE Graphik;
}

/*capability-access*/
.capability-access #requireApproval, .capability-access #passiveApproval {
  padding: 0px;
  margin: 0px;
}

.capability-access #approvalDataTable, .capability-access #passiveDataTable {
  padding: 0px;
  margin: 0px;
  background: #fff;
}

.capability-access #approval-table th, .capability-access #passive-table th {
  display: none;
}

.capability-access #approval-table, .capability-access #passive-table {
  padding: 24px;
}

.capability-access .required-tab-1 {
  width: 80%;
}

.capability-access .required-tab-2 {
  width: 20%;
}

.prp-custom-title {
  color: #333333;
  font-family: HPE Graphik;
  font-size: 36px;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 42px;
  padding: 24px;
  margin: 0px;
}

section#portlet_PRPCapabilityAccess {
  background: #fff;
}

.heading-1-strong {
  color: #333333;
  font-family: HPE Graphik;
  font-size: 48px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 54px;
}

.heading-2-strong {
  color: #333333;
  font-family: HPE Graphik;
  font-size: 36px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 42px;
}

.capability-access ul.nav.nav-tabs.nav-tabs-default.prpNavTabs {
  margin-bottom: 0px;
  padding: 0px 12px;
  margin-left: 24px;
  margin-right: 24px;
}

.capability-access ul.prpNavTabs li:first-child {
  padding: 0px;
}

.capability-access .table tr td:first-child, .capability-access .table tr th:first-child {
  padding: 24px 0px;
  border-top: 2px solid #CCCCCC;
}

.capability-access .table tr td:last-child, .capability-access .table tr th:last-child {
  padding: 24px 0px;
  text-align: center;
  border-top: 2px solid #CCCCCC;
}

.heading-3 {
  color: #000000;
  font-family: HPE Graphik;
  font-size: 24px;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 30px;
}

.heading-small {
  color: #292D3A;
  font-family: HPE Graphik;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 24px;
}

.heading-5 {
  color: #292D3A;
  font-family: HPE Graphik;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 26px;
}

.paragraph-16 {
  color: #3E4550;
  font-family: HPE Graphik;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 20px;
}

.paragraph-16-light {
  color: #67686E;
  font-family: HPE Graphik;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 24px;
}

.paragraph-14-light {
  color: #67686E;
  font-family: HPE Graphik;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 20px;
}

.paragraph-14 {
  color: #292D3A;
  font-family: HPE Graphik;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 20px;
}

.heading-3-strong {
  color: #292D3A;
  font-family: HPE Graphik;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 30px;
}

.heading-4-strong {
  color: #292D3A;
  font-family: HPE Graphik;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 24px;
}

.aprroval-status {
  color: #333333;
  font-family: HPE Graphik;
  font-size: 14px;
  letter-spacing: 2px;
  line-height: 20px;
  margin-top: 12px;
}

.capability-access table.dataTable.no-footer {
  border-bottom: 0px;
}

/*end of capability-access*/
/* Order Status & Returns */
.subHeader {
  color: #000000;
  font-family: HPE Graphik;
  font-size: 24px;
  font-weight: 300;
  line-height: 30px;
  padding: 24px 0px 12px 0px;
  display: block;
}

.popupContainer {
  margin-left: 8px;
}

.osvFooterButtons {
  margin-top: 20px;
}

.osvFooterButtons .footerRight {
  margin-bottom: 40px;
}

.osvFooterButtons .footerRight .osv-returns {
  color: #068667;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.OrdeStatusReturns .footerRight {
  display: inline-block;
  margin-left: 48px;
}

.osvFooterButtons #redirectionUrl {
  color: #068667;
  font-family: HPE Graphik;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  cursor: pointer;
}

.osvFooterButtons #redirectionUrl:hover, .osvFooterButtons #redirectionUrl:focus {
  text-decoration: none;
  outline: 0px;
}

.OrdeStatusReturns .portlet-content h2, .localization-preference h2 {
  margin-top: 0px;
}

.OrdeStatusReturns .portlet-content .title-text {
  color: #333;
  font-family: HPE Graphik;
  font-size: 48px;
  font-weight: 300 !important;
  line-height: 54px;
  margin-bottom: 24px;
}

.preferredContainer {
  margin: 0px;
  padding-bottom: 30px;
  border-bottom: 2px solid #ddd;
}

.OrdeStatusReturns .portlet-decorate .portlet-content {
  padding-right: 0px;
}

.footerRight #redirectionUrl span {
  margin-left: 12px;
}

.osvFooterButtons .osv-proofDelivery {
  border: 2px solid #DDDDDD;
  background-color: #DDDDDD;
  color: #666666;
  font-family: HPE Graphik;
  font-size: 19px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
  padding: 7px 35px;
}

.osvFooterButtons .footerRightOne {
  display: inline-block;
  margin-left: 40px;
}

.osvFooterButtons .footerRightOne img {
  margin-right: 10px;
  vertical-align: bottom;
}

.osvFooterButtons .footerRightOne .osv-returns {
  color: #333333;
  font-family: HPE Graphik;
  font-size: 19px;
  font-weight: 600;
  line-height: 24px;
}

.tblCustom thead {
  margin-top: 24px;
}

.tblCustom thead th, .tblCustom tbody td {
  color: #292D3A;
  font-family: HPE Graphik;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  padding-bottom: 10px;
}

.tblCustom tbody td {
  font-size: 16px;
  font-weight: normal;
  line-height: 20px;
  padding: 12px;
  border-bottom: 1px solid #ddd;
  color: #3E4550;
}

.tblCustom thead th {
  border-bottom: 1px solid #B1B9BE;
  padding: 12px;
  text-align: center;
}

.tblCustom tbody tr:first-child td {
  padding-top: 24px;
}

.tblCustom tbody tr:last-child td {
  border-bottom: 1px solid #ddd;
}

.OrdeStatusReturns .toolTipIcon {
  position: relative;
  top: 0px;
  right: 0px;
  left: 5px;
}

.OrdeStatusReturns .portlet-decorate .portlet-content, .localization-preference .portlet-content {
  padding-right: 0px !important;
}

.preferredContainer .settings-container {
  padding-left: 0px;
}

.localizationDiv .footerButtons .submit-localization {
  margin-right: 12px !important;
}

.row.regionContainer.settings-container {
  line-height: 1;
  font-size: 14px;
  font-family: HPE Graphik, Arial, Helvetica, sans-serif;
}

/*communication-page*/
.communicationContainer .col-md-6 {
  margin: 0;
  padding: 0;
}

.communicationContainer ul.notificationInput {
  overflow: auto;
}

.communicationContainer ul.notificationInput {
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #ccc;
  margin: 0px;
  padding-right: 12px;
  padding-left: 12px;
}

.communicationContainer .notificationHeader {
  display: inline-block;
  width: 100%;
  margin-bottom: 0px;
  font-size: 20px;
  font-weight: bold;
}

.notificationurl {
  line-height: 0px;
}

.notificationurl a {
  color: #068667;
  font-family: HPE Graphik;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 24px;
  text-decoration: none;
  padding-left: 12px;
}

.right-icon img {
  padding-right: 12px;
  height: 24px;
  vertical-align: sub;
}

.notificationLbel {
  color: #000000;
  font-family: HPE Graphik;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 20px;
}

.communicationContainer .col-md-12 .col-md-8 {
  padding: 0;
  margin: 0;
}

.communicationContainer p.paragraph-16.desc {
  margin-bottom: 24px;
  text-align: left;
  padding-right: 18px;
  color: #3E4550;
}

.communicationContainer p.warning-header {
  font-weight: 600;
  color: #292D3A;
}

/* Reusable "Note" / alert banner - see dxp-prp-clientExtension _common.scss */
.comm-warning,
.communicationContainer .comm-warning {
  background-color: #FFF3DD;
  padding: 6px 40px;
  background-image: url(/o/prp-theme/images/icons/status-warning.svg);
  background-repeat: no-repeat;
  background-position: left 14px top 12px;
  background-size: 16px;
  margin-bottom: 40px;
  border-radius: 6px;
}

.portlet.PRP.Communication.Setting.Portlet .portlet-content {
  padding: 40px;
}

.communicationContainer .notificationurl {
  padding: 0;
  margin-bottom: 48px;
}

.communicationContainer ul.notificationInput .col-md-4 {
  float: right;
}

.communicationContainer ul.notificationInput li label.switch {
  float: right;
  margin-right: 10px;
}

.communicationContainer ul.notificationInput li .notificationLbel {
  float: left;
  padding: 0;
  margin: 0;
}

.communicationContainer ul.notificationInput li {
  display: flex;
  border-bottom: 1px solid #ddd;
  padding: 12px 0;
}

.notificationInput .col-md-8 span.catTitle {
  font-weight: 600;
  color: #000000;
  font-family: HPE Graphik;
  font-size: 19px !important;
  letter-spacing: 0;
  line-height: 24px;
}

.communicationContainer .footerButtons {
  margin-top: 24px;
}

.checkboxContainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.checkboxContainer input:disabled ~ .checkmark:after {
  border: 2px solid #D7D7D7;
  border-width: 0 3px 3px 0;
}

.checkboxContainer input:disabled ~ .checkmark {
  border: 2px solid #D7D7D7;
}

.communicationContainer .notification-title {
  margin-left: 38px;
}

.portlet.PRP.Communication.Setting.Portlet h2 {
  margin-top: 0px;
}

.communicationContainer .desc b {
  font-weight: 600;
}

.communicationContainer .notificationInput-header {
  padding-bottom: 24px;
}

.communicationContainer .notificationInput-header span {
  font-family: HPE Graphik;
  font-style: normal;
  font-weight: 600;
  font-size: 24px;
  line-height: 30px;
}

.communicationContainer .notification-sub-title {
  font-family: HPE Graphik;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  color: #3E4550;
  width: 66.67% !important;
}

.communicationContainer .notificationLabel {
  font-size: 16px;
  font-weight: 600;
  font-family: "HPE Graphik";
  color: #333333;
}

.communicationContainer .notificationLabel:first-child {
  margin-right: 24px;
}

.communicationContainer .notification-title-head {
  margin-bottom: 26px;
}

.communicationContainer label.switch.col-md-2.notify-chk {
  float: left;
  margin-left: 10px;
}

.communicationContainer .notification-heading span {
  font-family: HPE Graphik;
  font-style: normal;
  font-weight: 600;
  font-size: 24px;
  line-height: 30px;
}

.communicationContainer ul.notification-heading {
  margin: 24px 0px;
  padding-inline-start: 0px;
}

.communicationContainer .notificationInput-header {
  padding-bottom: 24px;
}

.communicationContainer span.email-info {
  position: static;
}

.communicationContainer .notification-switch-title-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 36px;
}

.communicationContainer .notification-switch-title-container .heading-4-strong {
  width: 100%;
}

.communicationContainer .notification-switch {
  width: 100%;
  display: flex;
  justify-content: space-around;
}

.communicationContainer span.notification-title-info {
  font-weight: normal;
  font-size: 14px;
  line-height: 18px;
  color: #666666;
  position: absolute;
  width: 100%;
  height: 36px;
  left: 38px;
  top: 48px;
}

.communicationContainer .notification-global-email {
  display: flex;
  flex-wrap: wrap;
}

.communicationContainer .notification-combine-email {
  font-family: HPE Graphik;
  font-style: normal;
  font-weight: normal;
  padding: 14px 12px 12px;
  margin: 15px 0 0;
  background: #F6F6F6;
}

.communicationContainer .notification-combine-email p {
  font-size: 16px;
  line-height: 20px;
  display: inline-block;
}

.communicationContainer .notification-combine-email > span {
  font-size: 14px;
  line-height: 18px;
  width: 75%;
  display: inline-block;
}

.communicationContainer .notificationLbel span {
  text-decoration: underline;
  color: #333333;
  cursor: pointer;
}

.communicationContainer .notification-l1-heading {
  font-family: HPE Graphik;
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  line-height: 26px;
  padding: 0 !important;
  display: flex;
  justify-content: space-between;
  color: #292D3A;
  padding-bottom: 12px !important;
}

.communicationContainer .notificationHeader {
  padding: 0 10px 0 24px;
}

.communicationContainer ul.notificationInput {
  border-bottom: 0px;
  border-top: 0px;
}

.communicationContainer .notification-l1-arrow.rotate {
  -webkit-transition: transform 0.3s ease-out;
  -moz-transition: transform 0.3s ease-out;
  -o-transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

#directMailAddressModal {
  max-width: 720px;
}

#directMailAddressModal .settings-container .preferencesState .col-md-6 .input-select-wrapper {
  border-right: 0px;
}

#directMailAddressModal .settings-container .preferencesPostalCode .input-text-wrapper {
  margin-bottom: 2px !important;
}

#directMailAddressModal .notification-address-container {
  border: 2px solid #CCCCCC;
  background: #FFFFFF;
  width: 30%;
  height: 174px;
  margin-right: 24px;
  margin-bottom: 5px;
  padding: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-content: flex-start;
  overflow: hidden;
}

#directMailAddressModal .notification-address-container:last-of-type {
  text-align: center;
  margin-right: 0px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
}

#directMailAddressModal .notification-address-container.selected {
  background: #F6F6F6;
  border: 2px solid var(--hpe-color-decorative-brand);
}

#directMailAddressModal .notification-address-container.selected:hover {
  background: #F6F6F6;
  border: 2px solid var(--hpe-color-decorative-brand);
}

#directMailAddressModal .notification-address-container:hover {
  background: #FFFFFF;
  border: 4px solid var(--hpe-color-decorative-brand);
  cursor: pointer;
}

#directMailAddressModal .notification-direct-mail {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

#directMailAddressModal p.notification-address-type {
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  color: #000000;
  width: 80%;
}

#directMailAddressModal .add-address-close {
  outline: 0px;
  position: absolute;
  top: 24px;
  right: 24px;
  opacity: 0.5;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  padding: 0;
  cursor: pointer;
  background: 0 0;
  border: 0;
  float: right;
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
}

#directMailAddressModal .notification-add-icon {
  color: #666666;
  font-size: 70px;
  margin: 24px auto;
}

#directMailAddressModal .settings-container .col-md-6 {
  margin: 0;
  padding: 0;
}

#directMailAddressModal .notification-address-container:hover p.notification-add-icon {
  color: var(--hpe-color-decorative-brand);
}

#directMailAddressModal .notification-address-container:nth-last-of-type(2) {
  margin-right: 0px;
}

#directMailAddressModal .notification-address-info {
  margin-top: 40px;
  margin-left: 20px;
}

#directMailAddressModal img.selected-tick {
  height: 18px;
  width: 18px;
}

#directMailAddressModal .notification-address-container.selected img.selected-tick {
  display: block;
}

#directMailAddressModal .notification-address-container img.selected-tick {
  display: none;
}

/*end-of-communication-page*/
/* localization */
.prpRadioGroup input[type=radio][disabled] + .prpRadioButton {
  border-color: #999;
}

.tblCustom thead th:first-child {
  text-align: left;
}

.localization-preference h4.date-time-section-header {
  font-size: 18px;
  font-weight: 600;
  color: #000;
  padding: 5px 0 24px;
  margin: 0px;
  display: none;
}

.localizationDiv .prpRadioGroup label {
  color: #333333;
  font-family: HPE Graphik;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 24px;
}

.notificationText.settingsSubHeader {
  padding: 0 0px 12px 0px;
}

.localization-preference .footerButtons {
  padding-top: 24px;
  border-top: 1px solid #999;
}

.settingsSubHeader {
  color: #000000;
  font-family: HPE Graphik;
  font-size: 24px;
  font-weight: 300;
  line-height: 30px;
  padding: 24px 0px 24px 0px;
  display: block;
}

.dateFormat.settingsSubHeader {
  padding: 56px 0 35px 0px;
  font-weight: 600;
}

.localizationDiv .date-and-time-container {
  padding: 0px 0px 48px;
}

.settings-container .has-success .control-label {
  color: #666;
}

.dateFormatInfo.col-sm-12 {
  margin-top: 16em !important;
}

section#portlet_PRPLocalizationPreference .liferayalert-hidden {
  display: none;
}

section#portlet_PRPLocalizationPreference .lfr-alert-wrapper {
  width: 60vw;
  margin-left: 0px;
}

/*location & contract management */
#locmain-table tr.details-row > td[colspan="6"], #active-table tr.details-row > td {
  border-top: 2px solid #d7d7d7 !important;
  padding: 0;
  background-color: #f6f6f6;
}

table#locmain-table tr.details-row .details-table tbody tr, #active-table tr.details-row .details-table tbody tr {
  background-color: #f6f6f6 !important;
}

table#locmain-table tr.details-row .details-table ul {
  padding: 0;
  margin: 0;
}

table#locmain-table tr.details-row .details-table ul li {
  list-style: none;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

#locmain-table tr.details-row .details-table td {
  padding: 0;
}

#locmain-table tr.details-row .details-container, #active-table tr.details-row .details-container {
  padding: 10px 18px 10px 10px;
}

#locmain-table tbody tr.shown, #active-table tbody tr.shown {
  background: #f6f6f6 !important;
}

#loadingContainer, #loadingContainer1, #loadingContainerTask,
#loadingAnimation-edit-user, #loadingContainerUserTools {
  text-align: center;
}

.col-md-7.settings-container {
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
  line-height: 1;
  font-size: 14px;
  font-family: HPE Graphik, Arial, Helvetica, sans-serif;
}

.settings-page table.dataTable#active-table table.details-table tr:last-child td {
  display: table-cell;
}

#active-table table.details-table {
  width: 100%;
}

#active-table table.details-table th, #active-table table.details-table td {
  padding: 0;
}

#active-table table.details-table th {
  height: auto;
}

#editUserModalWindow .col-md-7.settings-container input {
  font-weight: 400;
  margin: 0 !important;
  padding: 0 !important;
  height: 20px !important;
  box-shadow: none !important;
  color: #333333;
  font-family: HPE Graphik;
  font-size: 16px;
  border: 0px;
  background: transparent;
  width: 100%;
}

#manageUserModal .detailsContainer .functionContainer {
  border: 0px !important;
}

#manageUserModal .innerContainer #editJobTitleDiv label, #manageUserModal .innerContainer .functionContainer label, #manageUserModal .innerContainer #editTimeZoneDiv label, #manageUserModal .innerContainer #editLanguageDiv label {
  padding: 0px !important;
  margin: 0px !important;
}

.lfr-portal-tooltip {
  display: inline-block;
}

.lfr-portal-tooltip .divider {
  margin-left: 10px !important;
}

.col-md-7.settings-container label {
  padding-bottom: 0px !important;
}

.col-md-7.settings-container .text-input.lastNamePart, .text-input.mobilePart, .text-input.workPart, .text-input.EmailPart {
  position: relative;
}

.col-md-7 .settings-container .regionContainer .input-select-wrapper {
  padding: 0px;
  margin: 0px;
  padding: 8px 10px !important;
  margin: 0 !important;
  height: auto !important;
  border: 2px solid #ddd;
  background-color: #fff;
}

.settings-container .regionContainer .input-select-wrapper {
  padding: 0px;
  margin: 0px;
  padding: 8px 10px !important;
  margin: 0 !important;
  height: auto !important;
  border: 2px solid #ddd;
  background-color: #fff;
}

.settings-container .regionContainer label {
  padding: 0;
  margin: 0;
}

.settings-container .regionContainer .input-select-wrapper {
  padding: 0px;
  margin: 0px;
  padding: 8px 10px !important;
  margin: 0 !important;
  height: auto !important;
  border: 2px solid #ddd;
  background-color: #fff;
  margin: 0px 0px -2px 0px !important;
}

.settings-container .applyPPAHeader, .notificationHeader .applyPPAHeader {
  color: #000000;
  font-family: HPE Graphik;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 20px;
  font-weight: 600;
}

.settings-container .preferencesState .col-md-6 .input-select-wrapper {
  border-right: 0px;
}

.settings-container .preferencesPostalCode .input-text-wrapper {
  margin-bottom: 2px !important;
}

.settings-container .address-container {
  display: none;
  padding: 48px 0px;
}

.settings-container .address-container .changeAddressBtn {
  margin-top: 24px;
}

.settings-container .col-md-6 .preferencesCountry .input-select-wrapper {
  border-left: 0px;
}

.settings-container input:focus-visible {
  outline: solid 2px #292d30;
  outline-offset: 2px;
  box-sizing: border-box;
}

.dateAndTimeContainer .radiogrouptitle {
  padding-top: 2px;
  padding-left: 2px;
}

#editUserModalWindow .notificationInput label.switch {
  float: right;
}

#editUserModalWindow .notificationInput {
  position: relative;
  display: inline-block;
  width: 95%;
  list-style: none;
  padding: 0px;
  border-bottom: 2px solid #ddd;
  border-top: 2px solid #ddd;
}

#editUserModalWindow .notificationInput li {
  padding: 18px 0px 18px 0px;
}

div#editMagUsrDateDiv {
  border: 0px;
}

.footerRight #redirectionUrl img {
  width: 24px;
  height: 24px;
  vertical-align: sub;
}

#editUserModalWindow .col-md-7.settings-container input:read-only {
  cursor: not-allowed;
  color: #CCCCCC !important;
}

.numberErrorDiv p {
  padding: 0px !important;
  margin: 0px;
}

.portlet.PRP.Personal.Details.Portlet .form-validator-stack {
  display: none;
}

.portlet.PRP.Personal.Details.Portlet .footerButtons {
  position: relative;
  display: flex;
}

.localizationDiv .form-validator-stack.help-block {
  display: none;
}

#profile .settings-container .dateAndTimeContainer {
  border-top: 2px solid #ddd;
  padding-top: 20px;
}

.capability-table #approval-table_filter {
  margin-bottom: 24px;
  float: left;
  text-align: left;
  position: relative;
}

.capability-table .dataTables_wrapper .dataTables_filter input {
  font-family: HPE Graphik;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 24px;
  font-weight: 600;
  color: #000;
  margin: 0 !important;
  border: 1px solid #B1B9BE;
  padding: 0 40px 0 10px;
  height: 40px;
}

.capability-table .dataTables_wrapper .dataTables_filter input, .capability-table .dataTables_wrapper .dataTables_filter label {
  width: 100%;
  margin: 0;
}

.capability-table .dataTables_wrapper .dataTables_filter .glyphicon.glyphicon-search {
  position: absolute;
  color: #666;
  font-size: 14px;
  top: 14px !important;
  cursor: pointer;
  right: 18px !important;
}

.capability-table .dataTables_wrapper .dataTables_filter {
  margin-bottom: 24px;
  float: left;
  text-align: left;
  position: relative;
  width: 50%;
}

.capability-table .dataTables_wrapper .dataTables_length {
  float: right;
}

.capability-table .dataTables_wrapper {
  width: 100%;
  overflow: hidden;
}

.capability-table #approval-table_wrapper, .capability-table #passive-table_wrapper {
  padding: 24px 24px;
}

.capability-access #approval-table, .capability-access #passive-table {
  padding: 0px !important;
}

.capability-table .dataTables_length label, .capability-table .select-user-location-filter label {
  font-family: "HPE Graphik", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #3E4550;
  letter-spacing: 0;
  line-height: 24px;
}

/* ===========================================================================
 * HPE Design System dropdowns for the capability-access page.
 * Both the "Filter by" location filter and the DataTables "Items per page"
 * select are transformed into .hpe-select markup by capabilities.js; these
 * scoped rules give them the same look as the news page (listView.jsp):
 * flush 0.8px control, dark focus/open outline, neutral hover wash, bold
 * menu options and the green selected accent bar.
 * ======================================================================== */
/* Filter by: keep existing float/alignment, only re-space label + control */
.capability-table .select-user-location-filter {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
}

.capability-table .select-user-location-filter label {
  margin: 0 !important;
  white-space: nowrap !important;
  width: auto !important;
}

.capability-table .select-user-location-filter .hpe-select {
  display: inline-block !important;
  flex: 0 0 auto !important;
  min-width: 150px !important;
  width: 150px !important;
}

.capability-table .select-user-location-filter .hpe-select .hpe-select__menu {
  min-width: 100%;
  width: max-content;
}

/* Items per page: keep DataTables float, re-space label + 83px control */
.capability-table .dataTables_length label,
.capability-table .dataTables_length label.items-per-page {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
  margin: 0 !important;
}

.capability-table .dataTables_length .hpe-select {
  position: relative;
  display: inline-block !important;
  flex: 0 0 auto !important;
  min-width: 83px !important;
  width: 83px !important;
}

.capability-table .dataTables_length .hpe-select .hpe-select__menu {
  top: auto;
  bottom: calc(100% + 4px);
}

/* Shared control look for BOTH dropdowns */
.capability-table .select-user-location-filter .hpe-select .hpe-select__control,
.capability-table .dataTables_length .hpe-select .hpe-select__control {
  min-height: 36px !important;
  height: 36px !important;
  padding: 5px 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  border-radius: 8px !important;
  border: 0.8px solid #B1B9BE !important;
  background: rgba(0, 0, 0, 0) !important;
  font-family: "HPE Graphik", Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
  color: #292D3A !important;
  cursor: pointer !important;
  outline: none !important;
  transition: background-color 0.15s ease, border-color 0.15s ease !important;
}

.capability-table .select-user-location-filter .hpe-select .hpe-select__control:hover,
.capability-table .dataTables_length .hpe-select .hpe-select__control:hover {
  background: rgba(0, 0, 0, 0.04) !important;
}

.capability-table .select-user-location-filter .hpe-select .hpe-select__control[aria-expanded=true],
.capability-table .select-user-location-filter .hpe-select .hpe-select__control:focus-visible,
.capability-table .dataTables_length .hpe-select .hpe-select__control[aria-expanded=true],
.capability-table .dataTables_length .hpe-select .hpe-select__control:focus-visible {
  outline: 2px solid #292D3A !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px #FFFFFF !important;
}

.capability-table .select-user-location-filter .hpe-select .hpe-select__control[aria-expanded=true] .hpe-select__arrow,
.capability-table .dataTables_length .hpe-select .hpe-select__control[aria-expanded=true] .hpe-select__arrow {
  transform: rotate(180deg) !important;
}

/* Closed control shows the value in normal weight (base theme forces 600). */
.capability-table .select-user-location-filter .hpe-select .hpe-select__value,
.capability-table .dataTables_length .hpe-select .hpe-select__value {
  font-weight: 400 !important;
}

/* Menu + options: bold text only inside the dropdown, green selected accent */
.capability-table .select-user-location-filter .hpe-select .hpe-select__menu,
.capability-table .dataTables_length .hpe-select .hpe-select__menu {
  padding: 6px !important;
  border-radius: 8px !important;
  background: #FFFFFF !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12) !important;
  z-index: 100 !important;
}

.capability-table .select-user-location-filter .hpe-select .hpe-select__option,
.capability-table .dataTables_length .hpe-select .hpe-select__option {
  position: relative !important;
  margin: 0 !important;
  padding: 5px 12px !important;
  min-height: 36px !important;
  display: flex !important;
  align-items: center !important;
  border-radius: 6px !important;
  font-family: "HPE Graphik", Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 24px !important;
  color: #3E4550 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: background-color 0.15s ease !important;
}

.capability-table .select-user-location-filter .hpe-select .hpe-select__option:hover,
.capability-table .dataTables_length .hpe-select .hpe-select__option:hover {
  background: rgba(0, 0, 0, 0.04) !important;
  color: #3E4550 !important;
}

.capability-table .select-user-location-filter .hpe-select .hpe-select__option[aria-selected=true],
.capability-table .dataTables_length .hpe-select .hpe-select__option[aria-selected=true] {
  background: #D1FFEE !important;
  color: #292D3A !important;
  font-weight: 600 !important;
}

.capability-table .select-user-location-filter .hpe-select .hpe-select__option[aria-selected=true]::before,
.capability-table .dataTables_length .hpe-select .hpe-select__option[aria-selected=true]::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  height: auto !important;
  transform: none !important;
  width: 6px !important;
  background: #006750 !important;
  border-radius: 6px 0 0 6px !important;
}

.capability-table .select-user-location-filter .hpe-select .hpe-select__option[aria-selected=true]:hover,
.capability-table .dataTables_length .hpe-select .hpe-select__option[aria-selected=true]:hover {
  background: #D1FFEE !important;
}

.capability-table .dataTables_wrapper .dataTables_info {
  color: #666666;
  font-family: HPE Graphik;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 20px;
  padding: 0;
  margin-top: 4px;
}

.capability-table .dataTables_wrapper .dataTables_paginate {
  padding: 0;
}

.capability-table .dataTableCustomFooter {
  display: flex !important;
  float: none !important;
  width: 100% !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 24px;
}

/* Footer right group: Items per page + pagination sit together on the right. */
.capability-table .dataTableCustomFooter .dataTableFooterRight {
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
}

.capability-table .dataTableCustomFooter .dataTables_length {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}

.capability-table .dataTableCustomFooter .dataTables_paginate {
  margin: 0 !important;
  padding: 0 !important;
}

.capability-table .dataTables_wrapper .dataTables_paginate .paginate_button, .capability-table .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  color: #333333 !important;
  font-family: HPE Graphik;
  font-size: 19px;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 24px;
  text-align: center;
  border: 0 !important;
  padding: 0;
  background: transparent;
}

.aprroval-status {
  color: #333333;
  font-family: HPE Graphik;
  font-size: 14px;
  letter-spacing: 2px;
  line-height: 20px;
  margin-top: 12px;
  text-align: center;
}

#capabilityModal .modal-content .modal-header {
  border: 0px;
  color: #333;
  font-family: HPE Graphik;
  font-size: 48px;
  font-weight: 300;
  line-height: 54px;
  margin: 0;
  padding: 0px;
}

button#_PRPCapabilityAccess_request-access-submit {
  border: 0px;
  line-height: 1.2em;
}

#capabilityModal .modal-dialog.modal-lg {
  transform: translate(55%, 0);
  border-radius: 0px;
  width: 45%;
  margin: 0;
  padding: 0;
}

#capabilityModal .modal-title {
  text-align: left;
}

#capabilityModal .close {
  font-size: 45px;
  font-weight: 300;
  margin-top: -15px;
}

#capabilityModal .modal-content {
  border-radius: 0px !important;
  border-radius: 0;
  padding: 30px 30px;
}

#capabilityModal .modal-body {
  font-family: HPE Graphik;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 20px;
  height: 200px !important;
}

#capabilityModal textarea.form-control {
  padding: 20px 10px;
  height: 140px;
}

.capability-access label.control-label {
  position: absolute;
  font-size: 14px;
  font-weight: 300;
  margin: 3px 11px;
}

.capability-table .dataTables_length label {
  width: 100%;
}

.capability-access .dataTables_wrapper .dataTables_paginate .paginate_button.current, .capability-access .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: #ddd;
  font-weight: 600;
}

.capability-access .dataTables_wrapper .dataTables_paginate .paginate_button.previous, .capability-access .dataTables_wrapper .dataTables_paginate .paginate_button.next {
  vertical-align: text-bottom;
}

.capability-access .dataTables_wrapper .dataTables_paginate .paginate_button.previous, .capability-access .dataTables_wrapper .dataTables_paginate .paginate_button.next {
  vertical-align: text-bottom;
}

.capability-access .dataTables_wrapper .dataTables_paginate .paginate_button.previous, .capability-access .dataTables_wrapper .dataTables_paginate .paginate_button.next {
  vertical-align: text-bottom;
}

.capability-access .glyphicon.glyphicon-menu-left, .capability-access .glyphicon.glyphicon-menu-right {
  top: 6px;
}

.capability-access .dataTable tbody tr:last-child td {
  border-bottom: 2px solid #CCCCCC;
}

.settings-page .nested-body-holder .portlet-decorate .portlet-content {
  padding: 40px !important;
  background-color: #F7F7F7;
  border-radius: 12px;
}

#portlet_userManagementPortlet .lfr-alert-container .liferayalert-hidden {
  display: none !important;
}

/* widget */
.widget_total.iframeWidget .widget_title .titleText {
  width: 100%;
}

/* For remove border from modal CR#352401 */
#my-content-div1 .modal-dialog .modal-content .modal-body:focus {
  outline: none;
}

#my-content-div .modal-dialog .modal-content .modal-body:focus {
  outline: none;
}

#my-content-div1 .modal-dialog:focus {
  outline: none;
}

/* 351413 - OSV Interactive tile close icon is misaligned */
.widget_total.iframeWidget .widget_title #removeIcon {
  right: 24px;
  /* Vertically centred on the drag-handle row (see the base rule above).
     Must stay in step with that rule: this selector is more specific, so a
     stale value here silently won and left iframe tiles' close icon on a
     different baseline from the drag handle. */
  top: 18px;
}

/* 352395 */
/* IE10+ */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  #carouselExampleIndicators .carouselIndicatorsPositions a {
    display: inline-flex !important;
  }
  #carouselExampleIndicators .carouselIndicatorsPositions a img {
    margin-top: 0 !important;
  }
}
.quickLinks {
  background: #fff !important;
}

#QuickSearchWidget.tools-card .card-body {
  height: 338px !important;
}

/* Navigation Menu CSS */
#wrapper .bodyContent #testFirstSideNavi .first-main-menu .spacer-menu-item {
  padding: 34px 0px;
  cursor: default;
}
#wrapper .bodyContent #testSideNavi .levelOnePages .levelSecondPage .spacer-menu-item.top-spacer-item {
  padding: 19px 0;
  cursor: default;
  border-top: 1px solid #ccc;
  border-bottom: none;
}
#wrapper .bodyContent #testSideNavi .levelOnePages .levelSecondPage .spacer-menu-item {
  padding: 19px 0;
  cursor: default;
  border: none;
}
#wrapper .bodyContent #testSideNavi .levelOnePages .levelSecondPage .spacer-associated-item {
  border-top: none;
}
#wrapper .bodyContent #testSecondSideNavi .second-main-menu .second-main-menu-item .levelOnePageslayer .spacer-menu-item {
  padding: 19px 0;
  cursor: default;
}

#portlet_com_liferay_notifications_web_portlet_NotificationsPortlet .portlet-content .portlet-body .container .management-bar-container .management-bar-default .management-bar-header .empty-notification-checkbox {
  padding-bottom: 0px;
  padding-top: 15px;
}
#portlet_com_liferay_notifications_web_portlet_NotificationsPortlet .portlet-content .portlet-body .container .management-bar-container .management-bar-default .management-bar-header .non-empty-notification-checkbox {
  padding-bottom: 0px;
  padding-top: 20px;
}
#portlet_com_liferay_notifications_web_portlet_NotificationsPortlet .portlet-content .portlet-body .container .main-content-body .user-notifications .taglib-search-iterator-page-iterator-bottom {
  margin-bottom: 7px;
}

/*355326 Notification modal is not brand aligned */
.yui3-widget.notification-ui-dialog {
  background-color: #2F4F4F;
  border: none;
  padding: 0px;
  top: 0px !important;
  width: 55% !important;
  margin: 0px auto !important;
}

.notification-ui-dialog-content .modal-body .dialog-iframe-node {
  width: 100% !important;
}

.notification-ui-dialog .notification-ui-dialog-content .modal-header h3.modal-title {
  margin: 20px 10px 0px 10px;
  padding: 0px 20px;
  text-align: left;
}

/*Defect id 355390 fix*/
.articleContainer .articleInnerContainer .articlePadding .articleContent .articleMediaText ul {
  padding-left: 10px !important;
}

.articleContainer .articleInnerContainer .articlePadding .articleContent .articleMediaText ul li::marker {
  color: var(--hpe-color-decorative-brand) !important;
}

.articleContainer .articleInnerContainer .articlePadding .articleContent .articleMediaText ul > li {
  list-style: none;
  position: relative;
  padding-left: 10px;
}

.articleContainer .articleInnerContainer .articlePadding .articleContent .articleMediaText ul > li::before {
  content: "";
  position: absolute;
  left: -0.45em;
  top: 0.575em;
  width: 0.35em;
  height: 0.35em;
  background-color: #01A982;
  box-sizing: border-box;
}

.articleContainer .articleInnerContainer .articlePadding .articleContent .articleMediaText ul ul > li::before,
.articleContainer .articleInnerContainer .articlePadding .articleContent .articleMediaText ol ul > li::before {
  background-color: transparent;
  border: 2px solid #01A982;
}

/* Body copy links only - authors can drop a learnMore/customDownloadBtn CTA
   inside the rich text, and those keep the pill treatment. */
.articleContainer .articleInnerContainer .articlePadding .articleContent .articleMediaText a:not(.learnMore):not(.customDownloadBtn):link,
.articleContainer .articleInnerContainer .articlePadding .articleContent .articleMediaText a:not(.learnMore):not(.customDownloadBtn):visited,
.articleContainer .articleInnerContainer .articlePadding .articleContent .articleMediaText a:not(.learnMore):not(.customDownloadBtn):active {
  color: #068667 !important;
  text-decoration: underline !important;
}

/* Must stay after :link/:visited - the whole block is !important, so hover only
   wins on source order. */
.articleContainer .articleInnerContainer .articlePadding .articleContent .articleMediaText a:not(.learnMore):not(.customDownloadBtn):hover,
.articleContainer .articleInnerContainer .articlePadding .articleContent .articleMediaText a:not(.learnMore):not(.customDownloadBtn):focus {
  color: #074738 !important;
  text-decoration: underline !important;
}

.eventContainer #main-content-wrapper .display-list-wrapper {
  text-align: right;
  font-size: 16px;
  font-family: HPE Graphik;
}

#notification-configModal .modal-dialog .modal-content .modal-footer button:hover {
  outline-width: 0px;
  background-color: #E6E8E9;
  transition: all 0.1s ease-in-out 0s;
  border-color: black;
}

#notification-configModal .modal-dialog {
  margin-top: 0;
  /* A.Modal writes an inline width (585) and height (220) on the dialog and on
     .modal-body, so both have to be flagged to reach the 640 card. */
  width: min(640px, 100vw - 48px) !important;
  max-width: calc(100vw - 48px) !important;
  height: auto !important;
}

#notification-configModal .modal-content {
  border-radius: 12px;
  text-align: left;
  width: auto;
  max-width: none;
  height: auto !important;
}

#notification-configModal .modal-footer {
  /* the 24px above/below sits on the button itself */
  padding: 0 24px;
  border: 0px;
  justify-content: flex-end;
}

#notification-configModal .cancelButton {
  border: 0;
  color: #292d3a;
  background-color: #f7f7f7;
  font-family: HPE Graphik;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
  padding: 5px 18px;
  margin: 24px 0;
  border-radius: 28px;
  height: 36px;
  max-height: 36px;
  outline: none;
}

#notification-configModal .modal-body {
  padding: 24px 24px 0;
  border: 0 !important;
  height: auto !important;
  max-height: none !important;
}

/* the message is injected as "<br><span class=saveErrorSubHeaderText>…",
   and that leading break added a blank line above the copy */
#notification-configModal .modal-body > br:first-child {
  display: none;
}

#notification-configModal .hiddenPart {
  display: block;
}

#notification-configModal h3 {
  color: #333;
  font-family: HPE Graphik;
  font-size: 48px;
  font-weight: 300;
  line-height: 54px;
  margin: 0;
}

#notification-configModal .saveErrorSubHeaderText {
  color: #292D3A;
  font-family: HPE Graphik;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  margin-top: 0;
  display: block;
}

.communicationContainer span.notificationLabel.core-notification {
  padding: 0px 25px;
}

.communicationContainer span.notificationLabel.core-mail {
  padding: 0px 15px;
  margin: 0px !important;
}

.communicationContainer .notification-input-main-container .notificationInput {
  overflow: visible;
}

.communicationContainer label[readonly] {
  pointer-events: none;
}

.communicationContainer label.switch[readonly] input ~ .slider.round:before {
  border: 2px solid #D7D7D7;
}

.companycontactsV2 table#main-tablecom {
  border-top: 2px solid #ddd;
}

.companycontactsV2 table#main-tablecom tbody tr td a {
  text-decoration: none;
}

.lfr-notification-container .lfr-notification-wrapper.in {
  height: auto !important;
}

/*Fix started for PRPDXP-5715*/
#portlet_com_hpe_prp_recommended_article_web .autofit-col.autofit-col-expand, #portlet_com_hpe_prp_recently_viewed_article .autofit-col.autofit-col-expand {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  position: relative;
  margin-top: 64px;
  margin-bottom: 48px;
}
#portlet_com_hpe_prp_recommended_article_web .autofit-col.autofit-col-expand:after, #portlet_com_hpe_prp_recently_viewed_article .autofit-col.autofit-col-expand:after {
  content: "";
  width: 100%;
  position: absolute;
  left: 0;
  top: 13px;
  z-index: 1;
}
#portlet_com_hpe_prp_recommended_article_web .autofit-col.autofit-col-expand h2, #portlet_com_hpe_prp_recently_viewed_article .autofit-col.autofit-col-expand h2 {
  width: auto;
  vertical-align: top;
  position: relative;
  margin: 0;
  max-width: none;
  min-width: min-content !important;
  float: left;
  display: inline !important;
  position: relative;
  z-index: 9;
  /* Figma H2 heading token (52/58, weight 500, -1.04px, #292D3A) so this
     section heading matches its siblings ("What's new" / "Top tools").
     Was 19px/600/#333333, which is not part of the Figma type scale. */
  color: #292D3A !important;
  font-family: HPE Graphik;
  font-size: 52px;
  font-weight: 600 !important;
  line-height: 58px;
  letter-spacing: -1.04px;
  position: relative;
  padding-right: 10px;
}

/*Fix ended for PRPDXP-5715*/
/*Fix started for PRPDXP-5752*/
.toolsContainer .toolsDetailsContainer .toolsInnerContainer .radio-box-list .container-radiobox span.label {
  border: none;
  margin-left: 10px !important;
}

/*Fix ended for PRPDXP-5752*/
/*Fix started for PRPDXP-5773*/
#breadcrumbs ul.breadcrumb-horizontal li + li {
  padding-left: 0px;
}

#breadcrumbs ul.breadcrumb-horizontal li + li:before {
  padding-right: 5px;
}

/*Fix ended for PRPDXP-5773*/
/* The article display page shows no breadcrumb at all, not even the home icon. */
body.hide-breadcrumb-current #breadcrumbs,
body.hide-breadcrumb-current nav[aria-label=Breadcrumb],
body.hide-breadcrumb-current .portlet-boundary[id*=BreadcrumbPortlet] {
  display: none !important;
}

/*Common default button*/
.btn-default {
  color: #292D3a;
  background-color: #F7F7F7;
}

.btn-default:active, .btn-default.active, .open > .btn-default.dropdown-toggle {
  background-image: none;
}

.btn-default:active, .btn-default.active, .open > .btn-default.dropdown-toggle {
  color: #292D3A;
  background-color: #E6E8E9;
}

.btn-default:hover {
  color: #292D3a;
  background-color: #E6E8E9;
  outline: none;
}

.btn-default:focus, .btn-default.focus {
  color: #292D3A;
  background-color: #E6E8E9;
  box-shadow: none;
}

.btn-default:active:hover, .btn-default:active:focus, .btn-default:active.focus, .btn-default.active:hover, .btn-default.active:focus, .btn-default.active.focus {
  color: #292D3A;
  background-color: #E6E8E9;
  box-shadow: none;
}

header#banner #heading .headerIcons ul.nav-icons-list li.profile-img .dropdown-menu {
  z-index: 99;
}

header#banner.linkedAccount-header #heading .headerIcons ul.nav-icons-list li.profile-img .dropdown-menu {
  top: 49px !important;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.hpe_spinner {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  border-width: 4px;
  border-style: solid;
  border-color: rgb(0, 103, 80) rgb(0, 103, 80) rgba(0, 0, 0, 0);
  border-image: initial;
  min-width: 0px;
  min-height: 0px;
  flex-direction: column;
  height: 36px !important;
  width: 36px !important;
  flex: 0 0 auto;
  padding: 0px;
  border-radius: 100%;
  animation-delay: 0s;
  animation-name: spin;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  transform: rotate(0deg);
}

#central-loader-login {
  width: 70px !important;
  height: 70px !important;
}

.search-container > .result > div:nth-of-type(3) nav {
  display: flex;
  align-items: center;
}

/* Move "1-20 of 461" to LEFT */
.search-container > .result > div:nth-of-type(3) nav > span:nth-of-type(2) {
  order: -1;
}

/* Push remaining items to RIGHT */
.search-container > .result > div:nth-of-type(3) nav > span:nth-of-type(1) {
  margin-left: auto;
}

footer .footerContainer .footerText .footerLinks ul li a {
  color: #E5E5E5;
}

footer .footerContainer .footerText .footerLinks ul li a:hover {
  text-decoration: underline;
  color: #FFFFFF;
}

footer .footerContainer .footerText .poweredBy {
  color: #E5E5E5 !important;
}

footer .footerContainer .footerText .footerLinks ul li a span {
  color: #E5E5E5 !important;
  margin-left: 10px;
}

.eventContainer .controlsPagination #disBtn {
  width: 76px;
  border: 2px solid #ddd;
  background-image: url(../images/icons/Up.svg);
  background-position: center right 10px;
  background-repeat: no-repeat;
  background-size: 14px;
  height: 40px;
  text-align: left;
  padding-top: 7px;
  outline: 0;
  margin-right: 20px;
  background-color: #f6f6f6;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 0 10px 0 10px;
  color: #333;
  font-family: HPE Graphik;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.eventContainer .clear_all_filter .closeFilterBtn {
  background-image: url(../images/icons/Close.svg);
  background-size: 10px;
  background-repeat: no-repeat;
  background-position: center;
  width: 10px;
  height: 10px;
  border: 0px;
  float: right;
  background-color: transparent;
}

footer .footerContainer .footerText .footerLinks ul li a span {
  color: #E5E5E5 !important;
  margin-left: 10px;
}

body .tooltip.clay-tooltip-top.show {
  background: #FFFFFF !important;
  border: 1px solid #D4D8DB !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12) !important;
  z-index: 2000 !important;
  cabackground: #FFFFFF !important;
  padding: 0 !important;
  max-width: 192px !important;
}

body .tooltip.clay-tooltip-top.show .tooltip-inner,
body .tooltip.clay-tooltip-bottom.show .tooltip-inner,
body .tooltip.clay-tooltip-left.show .tooltip-inner,
body .tooltip.clay-tooltip-right.show .tooltip-inner {
  background: #FFFFFF !important;
  color: #3E4550 !important;
  font-family: "HPE Graphik", sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  padding: 6px 12px !important;
  text-align: left !important;
}

body .tooltip-inner {
  background-color: #FFFFFF !important;
}

body .tooltip.clay-tooltip-top.show .arrow::before {
  border-top-color: #FFFFFF !important;
}

body .tooltip.clay-tooltip-top.show .arrow::after {
  border-top-color: #D4D8DB !important;
}

.search-filter .filterPart #clearFilter {
  float: right;
  color: #ccc;
  font-family: HPE Graphik;
  font-size: 16px;
  line-height: 24px;
  margin-top: 2px;
  border-radius: 17px;
  border: 1px solid transparent;
  padding: 4px;
  background-color: rgba(0, 0, 0, 0.0392156863);
}

/* =========================================================
   HPE Design System — Liferay Forms / Survey redesign
   Scoped to .portlet-forms-display so it only affects Liferay
   Forms pages (e.g. /group/prp/survey). Aligns the DDM form with
   the HPE Design System: card layout, HPE Graphik typography,
   HPE-green custom checkboxes/radios, green focus states and a
   green pill primary CTA. !important is used on font-family and a
   few control properties to win over the theme's higher-specificity
   `form.form legend.lfr-ddm-legend { font-family: MetricHPE }` and
   Bootstrap's `.custom-control-input { opacity:0; position:absolute }`.
   ========================================================= */
/* The form app sits in a Bootstrap .container-fluid, which brings 15px
   gutters. Every other portlet on the page - web content above the form in
   particular - starts at the column edge, so those gutters pushed the form
   card and its title 15px in on both sides and the two blocks read as
   misaligned. The class is scoped to the DDM form app, so the page's other
   .container-fluid wrappers keep their gutters. */
.container-fluid.ddm-form-builder-app {
  padding-left: 0;
  padding-right: 0;
}

/* The form card.

   !important on the box properties is deliberate. Older form pages carry a
   block of page-level Custom CSS (Page Settings > Advanced) written before the
   design system rollout, which restyles the same card - the enrollment form,
   for example, sets

       .lfr-ddm-form-container.position-relative.ddm-user-view-content
           { padding: 20px 24px 0 }

   at specificity (0,3,0) from a <style> in <head>, so it loads after the theme
   and beats this rule on both counts. Its zero bottom padding is what leaves
   the Submit/Next button sitting flush on the card's bottom edge.

   Rather than add a counter-selector per legacy page, the theme claims the
   card geometry outright so every Liferay form gets the same box. */
.lfr-ddm-form-container {
  width: 100%;
  margin: 32px auto !important;
  background: #FFFFFF !important;
  border: 1px solid #E4E4E4;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  padding: 48px 56px !important;
}

/* One content column.

   Everything inside the card - stepper, labels, controls and the button row -
   lines up on the card's own 56px padding. The wrappers between the card and
   the fields must therefore add no horizontal inset of their own. The
   enrollment page's CSS gives .ddm-field-container `padding: 0 24px
   !important`, which pushed the fields 24px right of the button row and left
   the two visibly out of line. */
:is(.portlet-forms-display, .lfr-ddm-form-container) form.form,
:is(.portlet-forms-display, .lfr-ddm-form-container) .ddm-form-page-container,
:is(.portlet-forms-display, .lfr-ddm-form-container) .ddm-field-container,
:is(.portlet-forms-display, .lfr-ddm-form-container) .ddm-row .ddm-field-container {
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
}

/* The wizard rail is an <ol>, so it starts with the browser's default list
   indent and its first step circle sits ~40px right of the field column.
   Liferay never resets it.

   The repeated class is a specificity device, not a typo. The enrollment page
   sets

       ol.ddm-wizard.multi-step-indicator-label-top.multi-step-nav.multi-step-nav-collapse-sm
           { padding: 14px 42px 0 !important }

   at (0,4,1) *and* !important, which a plain `ol.multi-step-nav` cannot beat
   however it is scoped. Repeating the class lifts this selector to (0,5,1)
   while still matching any wizard, without depending on the collapse-sm or
   label-top classes actually being present.

   Zeroing the inset is safe for the end labels: the first and last step labels
   are pinned to their circle's left/right edge further down in this file, so
   neither can hang past the card.

   margin-bottom is 0 on purpose. The step labels are absolutely positioned, so
   they hang inside the <ol>'s own box rather than adding to its height - there
   is already ~46px of slack between the last line of a label and the bottom of
   the rail. Adding a margin on top of that pushed the form's page title ~94px
   below the labels and left a conspicuous empty band under the stepper. */
:is(.portlet-forms-display, .lfr-ddm-form-container) ol.multi-step-nav.multi-step-nav.multi-step-nav.multi-step-nav {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

:is(.portlet-forms-display, .lfr-ddm-form-container) .ddm-field,
:is(.portlet-forms-display, .lfr-ddm-form-container) .form-group {
  margin-bottom: 34px;
}

:is(.portlet-forms-display, .lfr-ddm-form-container) fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

:is(.portlet-forms-display, .lfr-ddm-form-container) legend.lfr-ddm-legend,
:is(.portlet-forms-display, .lfr-ddm-form-container) .lfr-ddm-legend {
  font-family: "HPE Graphik", "HPEGraphik", Arial, sans-serif !important;
  /* !important required to win over Liferay's higher-specificity
     `form.form legend.lfr-ddm-legend { font-size:28px; font-weight:300 }`,
     which otherwise renders form questions as thin 28px text. */
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  /* HPE Design System text/strong (#292D3A) - was an off-token #333333. */
  color: var(--hpe-color-text-strong) !important;
  /* Matches `.ddm-label`'s 8px. A question prompt should sit the same
     distance above its control whichever control answers it; at 18px the
     radio and checkbox groups drifted visibly further from their question
     than the dropdown did from its own label, so Q.6 and Q.7 looked
     detached from their headings while Q.5 did not. */
  margin-bottom: 8px !important;
}

:is(.portlet-forms-display, .lfr-ddm-form-container) .ddm-label-required,
:is(.portlet-forms-display, .lfr-ddm-form-container) .icon-asterisk {
  color: #CA2B4E;
}

/* Option rows: [control] [text] */
:is(.portlet-forms-display, .lfr-ddm-form-container) fieldset label {
  display: flex !important;
  align-items: flex-start;
  margin: 0 0 14px 0;
  padding-left: 0 !important;
  font-family: "HPE Graphik", "HPEGraphik", Arial, sans-serif !important;
  font-size: 16px;
  /* HPE Design System text/default (#3E4550) - was an off-token #444444. */
  color: var(--hpe-color-text-default);
  font-weight: 400;
  cursor: pointer;
}

:is(.portlet-forms-display, .lfr-ddm-form-container) .custom-control-label {
  display: inline;
  padding-left: 0 !important;
}

:is(.portlet-forms-display, .lfr-ddm-form-container) .custom-control-label-text {
  display: inline-block;
  padding-top: 1px;
  line-height: 1.4;
}

/* Hide Bootstrap's small drawn box/check so only the HPE control shows */
:is(.portlet-forms-display, .lfr-ddm-form-container) .custom-control-label::before,
:is(.portlet-forms-display, .lfr-ddm-form-container) .custom-control-label::after {
  display: none !important;
  content: none !important;
}

/* Reveal the real (Bootstrap-hidden) input and render it as an HPE control */
:is(.portlet-forms-display, .lfr-ddm-form-container) input.custom-control-input[type=checkbox],
:is(.portlet-forms-display, .lfr-ddm-form-container) input.custom-control-input[type=radio] {
  -webkit-appearance: none;
  appearance: none;
  opacity: 1 !important;
  position: static !important;
  z-index: auto !important;
  width: 24px;
  height: 24px;
  min-width: 24px;
  margin: 0 12px 0 0 !important;
  /* HPE Design System selection controls: 24px box, transparent fill and a
     1px border/default (#B1B9BE) at rest. */
  background: transparent;
  border: 1px solid var(--hpe-color-border-default);
  cursor: pointer;
  vertical-align: middle;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* The page title sits on the same left axis as the questions below it.
 *
 * Liferay renders it inside the page's own Bootstrap row/column, so it picks
 * up a column gutter that the field wrappers above have already had removed -
 * leaving "Page 2" indented from "Q.5", its label and its control. The inset
 * is cleared here so the heading, the question numbers, the labels and the
 * controls all start on the card's own padding.
 *
 * Both the title and its immediate wrapper are covered: Liferay has shipped
 * the gutter on either depending on version, and clearing only the inner one
 * leaves the wrapper's padding still pushing it in. */
:is(.portlet-forms-display, .lfr-ddm-form-container) .lfr-ddm-form-page-title,
:is(.portlet-forms-display, .lfr-ddm-form-container) .ddm-form-page-title,
:is(.portlet-forms-display, .lfr-ddm-form-container) [class*=form-page-title],
:is(.portlet-forms-display, .lfr-ddm-form-container) .ddm-form-page-header,
:is(.portlet-forms-display, .lfr-ddm-form-container) .ddm-form-page-description {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
}

.portlet-forms .lfr-ddm-form-page-title {
  font-weight: 600;
}

:is(.portlet-forms-display, .lfr-ddm-form-container) input.custom-control-input[type=checkbox] {
  border-radius: 6px;
}

:is(.portlet-forms-display, .lfr-ddm-form-container) input.custom-control-input[type=radio] {
  border-radius: 100%;
}

:is(.portlet-forms-display, .lfr-ddm-form-container) input.custom-control-input[type=checkbox]:hover,
:is(.portlet-forms-display, .lfr-ddm-form-container) input.custom-control-input[type=radio]:hover {
  border-color: var(--hpe-color-border-strong, #3E4550);
}

/* Selected: solid primary-strong (#068667) fill, no border, white indicator. */
:is(.portlet-forms-display, .lfr-ddm-form-container) input.custom-control-input[type=checkbox]:checked {
  background-color: var(--hpe-color-background-primary-strong) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12l5 5L19 7' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-position: center !important;
  background-size: 14px !important;
  background-repeat: no-repeat !important;
  border-color: transparent !important;
}

/* Radio: white 12px dot (r=6 of a 24px box) centred on the green fill. */
:is(.portlet-forms-display, .lfr-ddm-form-container) input.custom-control-input[type=radio]:checked {
  background-color: var(--hpe-color-background-primary-strong) !important;
  background-image: radial-gradient(circle at center, #FFFFFF 0 5.75px, transparent 6.25px) !important;
  background-repeat: no-repeat !important;
  border-color: transparent !important;
}

:is(.portlet-forms-display, .lfr-ddm-form-container) input.custom-control-input[type=checkbox]:focus-visible,
:is(.portlet-forms-display, .lfr-ddm-form-container) input.custom-control-input[type=radio]:focus-visible {
  outline: 2px solid var(--hpe-color-focus);
  outline-offset: 2px;
}

/* Text inputs / textarea */
:is(.portlet-forms-display, .lfr-ddm-form-container) textarea.form-control,
:is(.portlet-forms-display, .lfr-ddm-form-container) input.form-control {
  border: 1px solid var(--hpe-color-border-default);
  border-radius: 6px;
  padding: 12px 16px;
  font-family: "HPE Graphik", "HPEGraphik", Arial, sans-serif !important;
  font-size: 16px;
  color: var(--hpe-color-text-default);
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Focus is an offset OUTLINE, not a border swap.
 *
 * This previously set `border-color: focus` plus `box-shadow 0 0 0 1px focus`
 * with `outline: none`. `--hpe-color-focus` is grey-1000 (#292D3A), so every
 * focused field drew a 2px-looking BLACK frame tight against its own edge -
 * the "black border on focus" defect. The design system draws a 2px focus ring
 * held 2px OFF the control so the field's own 1px border stays visible and the
 * box does not appear to thicken.
 *
 * The border colour is pinned to its resting value so the frame cannot darken
 * underneath the ring. */
:is(.portlet-forms-display, .lfr-ddm-form-container) textarea.form-control:focus,
:is(.portlet-forms-display, .lfr-ddm-form-container) input.form-control:focus {
  border-color: var(--hpe-color-border-default, #B1B9BE);
  box-shadow: none;
  outline: 2px solid var(--hpe-color-focus, #292D3A);
  outline-offset: 2px;
}

/* Buttons.

   Geometry and type are the Figma "Button - V2" medium tokens from the wizard
   design (node 839:9200), which are design-system variables rather than one
   page's implementation:

     --button/<variant>/medium/paddingx      19px
     --button/<variant>/medium/paddingy      6px
     --button/<variant>/medium/borderradius  9999px
     --button/<variant>/medium/borderwidth   1px
     --button/<variant>/medium/fontsize      16px
     --button/<variant>/medium/lineheight    24px
     --button/<variant>/medium/gapx          6px
     font style                      HPE Graphik Medium (500)
     height                          36px

   This replaced a 48px/18px box taken from the Settings page's
   .secondaryButton. Settings is a "large" button; the medium size above is
   what the design tokens specify for a form footer, and it matches the
   dashboard tiles and the design system's own FileInput action, so the portal
   agrees with itself at 36px.

   inline-flex + min-height rather than padding alone: it pins both variants to
   the same box regardless of their label's line-height, which is what stops
   Previous and Submit drifting apart.

   .btn-unstyled is excluded on purpose. The date picker's calendar toggle
   carries .btn and lives INSIDE the date input; sizing it here would burst the
   36px field. */
:is(.portlet-forms-display, .lfr-ddm-form-container) .btn-primary,
:is(.portlet-forms-display, .lfr-ddm-form-container) .btn-secondary:not(.btn-unstyled) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 19px;
  border: 1px solid transparent;
  border-radius: 9999px;
  font-family: "HPE Graphik", "HPEGraphik", Arial, sans-serif !important;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  box-shadow: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

:is(.portlet-forms-display, .lfr-ddm-form-container) .btn-primary {
  background: var(--hpe-color-background-neutral-xstrong);
  color: var(--hpe-color-text-onStrong, #FFFFFF);
}

:is(.portlet-forms-display, .lfr-ddm-form-container) .btn-secondary:not(.btn-unstyled) {
  background: var(--hpe-color-background-contrast, rgba(0, 0, 0, 0.04));
  color: var(--hpe-color-text-strong, #292D3A);
}

:is(.portlet-forms-display, .lfr-ddm-form-container) .btn-primary:hover {
  background: var(--hpe-color-background-neutral-xstrong-hover);
  border-color: transparent;
}

:is(.portlet-forms-display, .lfr-ddm-form-container) .btn-secondary:not(.btn-unstyled):hover {
  background: var(--hpe-color-background-contrast-hover, rgba(0, 0, 0, 0.08));
  color: var(--hpe-color-text-strong, #292D3A);
}

:is(.portlet-forms-display, .lfr-ddm-form-container) .btn-primary:focus-visible,
:is(.portlet-forms-display, .lfr-ddm-form-container) .btn-secondary:not(.btn-unstyled):focus-visible {
  outline: 2px solid var(--hpe-color-focus);
  outline-offset: 2px;
}

/* ---------------------------------------------------------
   Wizard buttons - right aligned

   Liferay puts Previous / Next / Submit in one
   .lfr-ddm-form-pagination-controls div and gives each button Bootstrap's
   .float-left, so the row sits hard against the left edge of the card while
   the design puts the actions on the right.

   Making the container a flex row is what does the work: floats are ignored
   on flex items, so .float-left stops applying without having to fight it
   per-button. The explicit float:none is only for safety if a button is ever
   rendered outside this flex context.

   justify-content keeps the group right-aligned whichever buttons are present
   - the first page shows Next alone, later pages Previous + Next, and the
   last page Previous + Submit. They stay in DOM order, so the secondary
   button sits to the left of the primary, which is the usual pairing.

   The 12px inset from the card edge is the container's own padding and is
   left alone. margin-bottom is zeroed because Liferay's 20px on the buttons
   was compensating for the float and now just skews the row.

   padding is zeroed so the row's right edge lands on the same column as the
   fields above it, and the gap to the last field is carried by margin-top
   instead. The enrollment page sets `padding: 0 !important; margin-top: 40px`
   here; this rule keeps that spacing consistent across every form. */
:is(.portlet-forms-display, .lfr-ddm-form-container) .lfr-ddm-form-pagination-controls {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 0 !important;
  margin-top: 24px !important;
  margin-bottom: 0 !important;
}

:is(.portlet-forms-display, .lfr-ddm-form-container) .lfr-ddm-form-pagination-controls > .btn,
:is(.portlet-forms-display, .lfr-ddm-form-container) .lfr-ddm-form-pagination-controls > button {
  float: none !important;
  margin-bottom: 0 !important;
}

/* =========================================================
   HPE Design System — Liferay Forms: ALL field types
   Applies to every Liferay Forms page (.portlet-forms-display):
   text/URL/email inputs, textareas, Clay selects, file-upload,
   labels, help text, required marks, buttons, spacing & icons.
   !important is used where the deployed theme forces a green rest
   border (form.form .form-control) or Clay renders its own control.
   ========================================================= */
/* Text / URL / email / number inputs, textareas and selects.

   Geometry, radius, fill and text colour are taken from the Settings page
   (.settings-container .form-control), which is the portal's established input
   style, so a Liferay form and a Settings screen no longer look like two
   different products. Values were read off the live cascade rather than the
   stylesheet, by rendering a probe .settings-container/.form-control pair in
   the page:

       height 36px | padding 6px 12px | radius 8px
       border 1px solid #B1B9BE | background transparent | colour #2A2D3A
       font 16px HPE Graphik | box-shadow none

   Three deliberate departures from that rule:
     - width. Settings sets width:90%, which is a hack for its own two-column
       layout. Copied here it would leave every field short of the card edge,
       so fields keep their full width.
     - focus. Settings has no focus style for .form-control, so focus falls
       back to the browser default. The green focus ring below is kept: losing
       a visible focus indicator on a long form is an accessibility
       regression, not a consistency win.
     - textarea height. 36px is one line. See the textarea rule below. */
:is(.portlet-forms-display, .lfr-ddm-form-container) form.form input.form-control,
:is(.portlet-forms-display, .lfr-ddm-form-container) form.form textarea.form-control,
:is(.portlet-forms-display, .lfr-ddm-form-container) form.form select.form-control,
:is(.portlet-forms-display, .lfr-ddm-form-container) .form-control {
  height: 36px !important;
  padding: 6px 12px !important;
  border: 1px solid var(--hpe-color-border-default) !important;
  border-radius: 8px !important;
  background-color: transparent !important;
  font-family: "HPE Graphik", "HPEGraphik", Arial, sans-serif !important;
  font-size: 16px !important;
  color: #2A2D3A !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* A textarea at 36px shows a single line, so the Settings height is not
   carried over here - only its border, radius, fill and padding are. */
:is(.portlet-forms-display, .lfr-ddm-form-container) form.form textarea.form-control,
:is(.portlet-forms-display, .lfr-ddm-form-container) textarea.form-control {
  height: auto !important;
  min-height: 96px;
  padding: 8px 12px !important;
}

/* Disabled and read-only fields keep the platform's grey fill: the transparent
   background above would otherwise make a locked field look editable, which is
   a real problem on these forms - several fields render disabled by design.
   The selector has to mirror the full list above, because
   `form.form input.form-control` (0,3,2) out-specifies a bare
   `.form-control:disabled` (0,3,0) and the grey silently loses. */
:is(.portlet-forms-display, .lfr-ddm-form-container) form.form input.form-control:disabled,
:is(.portlet-forms-display, .lfr-ddm-form-container) form.form textarea.form-control:disabled,
:is(.portlet-forms-display, .lfr-ddm-form-container) form.form select.form-control:disabled,
:is(.portlet-forms-display, .lfr-ddm-form-container) form.form input.form-control[readonly],
:is(.portlet-forms-display, .lfr-ddm-form-container) form.form textarea.form-control[readonly],
:is(.portlet-forms-display, .lfr-ddm-form-container) .form-control:disabled,
:is(.portlet-forms-display, .lfr-ddm-form-container) .form-control[readonly] {
  background-color: #E9ECEF !important;
}

:is(.portlet-forms-display, .lfr-ddm-form-container) form.form .form-control:focus,
:is(.portlet-forms-display, .lfr-ddm-form-container) .form-control:focus {
  border-color: var(--hpe-color-focus) !important;
  box-shadow: 0 0 0 1px var(--hpe-color-focus) !important;
  outline: none !important;
}

:is(.portlet-forms-display, .lfr-ddm-form-container) .form-control::placeholder,
:is(.portlet-forms-display, .lfr-ddm-form-container) .option-selected-placeholder {
  color: var(--hpe-base-color-grey-600) !important;
}

/* Clay select trigger -> match inputs + single HPE chevron (hide double caret).
   This is a div standing in for a <select>, so it has to be sized to the same
   36px box by hand. */
:is(.portlet-forms-display, .lfr-ddm-form-container) .select-field-trigger,
:is(.portlet-forms-display, .lfr-ddm-form-container) .form-control.select-field-trigger {
  position: relative;
  display: flex;
  align-items: center;
  height: 36px !important;
  min-height: 36px;
  border: 1px solid var(--hpe-color-border-default) !important;
  border-radius: 8px !important;
  background-color: transparent !important;
  padding: 6px 36px 6px 12px !important;
  box-shadow: none !important;
}

:is(.portlet-forms-display, .lfr-ddm-form-container) .select-field-trigger:focus,
:is(.portlet-forms-display, .lfr-ddm-form-container) .select-field-trigger:focus-within {
  border-color: var(--hpe-color-focus) !important;
  box-shadow: 0 0 0 1px var(--hpe-color-focus) !important;
  outline: none !important;
}

:is(.portlet-forms-display, .lfr-ddm-form-container) .option-selected {
  color: var(--hpe-color-text-default);
  font-family: "HPE Graphik", "HPEGraphik", Arial, sans-serif;
}

:is(.portlet-forms-display, .lfr-ddm-form-container) .select-field-trigger .lexicon-icon-caret-double {
  display: none !important;
}

:is(.portlet-forms-display, .lfr-ddm-form-container) .lfr__ddm-form-field-type-select-arrow-down {
  position: absolute !important;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  pointer-events: none;
}

:is(.portlet-forms-display, .lfr-ddm-form-container) .select-arrow-down-container {
  display: block;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23606a70' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
}

/* Form page header divider.
   .lfr-ddm__default-page-header-line is an empty 1px div that Liferay paints
   under the form title and description. The design has the card carry the
   separation instead, so the rule reads as a stray line between the heading and
   the card. The element holds no content and is purely decorative, so hiding it
   removes nothing. Its parent keeps its 32px bottom margin, so the spacing
   below the heading is unchanged. */
:is(.portlet-forms-display, .lfr-ddm-form-container) .lfr-ddm__default-page-header-line {
  display: none !important;
}

/* Field labels & required mark */
/* Field label - HPE Design System TextInput label: 12px/500, measured off the
   live component at design-system.hpe.design/components/textinput. The Settings
   page agrees on the size (12px, at weight 600), so both HPE references use a
   small caption-style label above the field rather than a heading-sized one.
   This was 18px/600, which was the single largest deviation from the standard
   on these forms. */
:is(.portlet-forms-display, .lfr-ddm-form-container) .ddm-label {
  display: inline-block;
  font-family: "HPE Graphik", "HPEGraphik", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 16px !important;
  color: var(--hpe-color-text-strong) !important;
  margin-bottom: 6px !important;
}

/* Choice labels next to a checkbox or radio are body text, not field labels:
   16px/400 in text/default. Bootstrap leaves them at its own #212529. */
:is(.portlet-forms-display, .lfr-ddm-form-container) .custom-control-label,
:is(.portlet-forms-display, .lfr-ddm-form-container) .custom-control-label-text {
  font-family: "HPE Graphik", "HPEGraphik", Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: var(--hpe-color-text-default, #3E4550) !important;
}

:is(.portlet-forms-display, .lfr-ddm-form-container) .ddm-label-required,
:is(.portlet-forms-display, .lfr-ddm-form-container) .reference-mark {
  color: var(--hpe-color-text-critical) !important;
}

:is(.portlet-forms-display, .lfr-ddm-form-container) .ddm-label-required svg {
  fill: currentColor !important;
  width: 10px;
  height: 10px;
}

/* Help / instruction text */
:is(.portlet-forms-display, .lfr-ddm-form-container) .ddm-field-help,
:is(.portlet-forms-display, .lfr-ddm-form-container) .form-text,
:is(.portlet-forms-display, .lfr-ddm-form-container) small {
  color: var(--hpe-color-text-weak) !important;
  font-family: "HPE Graphik", "HPEGraphik", Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.4;
  margin-top: 8px !important;
}

/* Consistent field spacing */
:is(.portlet-forms-display, .lfr-ddm-form-container) .ddm-field,
:is(.portlet-forms-display, .lfr-ddm-form-container) .form-group {
  margin-bottom: 30px !important;
}

/* Secondary buttons (Previous, file-upload "Select") -> HPE Design System
   "Secondary button": a subtle contrast fill (4% black) with the neutral
   xstrong label and no border; hover deepens the fill to 8%.

   Geometry and type are the Figma medium-button tokens, same as the primary
   below, so the two line up in a footer row. This rule previously forced
   15px/24px with !important and silently beat the shared button rule - that is
   why Previous and Submit rendered at different sizes. */
:is(.portlet-forms-display, .lfr-ddm-form-container) .select-button.btn-secondary,
:is(.portlet-forms-display, .lfr-ddm-form-container) .btn-secondary {
  background: var(--hpe-color-background-contrast) !important;
  border: 1px solid transparent !important;
  border-radius: 9999px !important;
  color: var(--hpe-color-text-strong) !important;
  font-family: "HPE Graphik", "HPEGraphik", Arial, sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  padding: 6px 19px !important;
  height: auto !important;
  transition: background-color 0.15s ease, color 0.15s ease;
}

:is(.portlet-forms-display, .lfr-ddm-form-container) .select-button.btn-secondary:hover,
:is(.portlet-forms-display, .lfr-ddm-form-container) .btn-secondary:hover {
  background: var(--hpe-color-background-contrast-hover) !important;
  color: var(--hpe-color-text-strong) !important;
}

/* =========================================================================
 * HPE Design System - Liferay Forms: review defect pass
 * -------------------------------------------------------------------------
 * Fixes for the 18 defects raised against the form layout and field set.
 * Everything here is scoped to a Liferay Forms surface
 * (.portlet-forms-display / .lfr-ddm-form-container) so it reaches EVERY
 * form page rather than one instance, and it is placed at the end of the
 * forms block so it wins over the earlier rules it deliberately revises.
 *
 * `!important` is used only where the rule has to beat Bootstrap/Clay's own
 * state rules, which are themselves `!important` or carry a higher
 * specificity than any sane theme selector.
 *
 * Every var() carries an explicit fallback: an undefined custom property
 * silently resolves to its fallback, so a typo would otherwise ship a wrong
 * colour with no error anywhere.
 * ========================================================================= */
/* --- Layout 1 + 3: the card sits ON the grey surface with a 24px inset and
 *     carries no drop shadow.
 *     The mock shows the white form panel inset inside the page's grey band;
 *     the card previously floated on the page with a 0 4px 16px shadow and a
 *     32px auto margin, which read as a separate floating panel. The grey and
 *     the padding are put on the form app wrapper - the nearest element that
 *     always wraps the card on every form - so the inset is identical
 *     regardless of what the page puts above the form. */
.portlet-forms-display .ddm-form-builder-app,
.portlet-forms-display .container-fluid.ddm-form-builder-app {
  background-color: #F7F7F7 !important;
  padding: 24px !important;
  border-radius: 12px;
  box-sizing: border-box;
}

.lfr-ddm-form-container {
  /* Overrides the card rule near the top of this block. */
  box-shadow: none !important;
  margin: 0 !important;
}

/* --- Layout 2: the step rail spans the card.
 *     Liferay lays the wizard out at its intrinsic width, so a 3-page form
 *     used barely half the card and an 8-page form overflowed. Making the
 *     <ol> a flex row and letting every step but the last grow distributes
 *     the connectors evenly across whatever width the card has, for any
 *     number of pages. The last step holds only its circle and label (there
 *     is no connector after it), so it must not stretch. */
:is(.portlet-forms-display, .lfr-ddm-form-container) ol.multi-step-nav.multi-step-nav.multi-step-nav.multi-step-nav {
  display: flex !important;
  width: 100% !important;
  flex-wrap: nowrap !important;
}

:is(.portlet-forms-display, .lfr-ddm-form-container) ol.multi-step-nav > li.multi-step-item {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

:is(.portlet-forms-display, .lfr-ddm-form-container) ol.multi-step-nav > li.multi-step-item:last-child {
  flex: 0 0 auto !important;
}

/* --- Field 4: the required mark is a superscript tick, not a body-size star.
 *     Liferay renders it either as an <svg> inside .reference-mark /
 *     .ddm-label-required or as an .icon-asterisk font glyph, depending on
 *     the field type, so both are covered. */
:is(.portlet-forms-display, .lfr-ddm-form-container) .reference-mark,
:is(.portlet-forms-display, .lfr-ddm-form-container) .ddm-label-required,
:is(.portlet-forms-display, .lfr-ddm-form-container) .icon-asterisk {
  font-size: 9px !important;
  line-height: 1 !important;
  vertical-align: super !important;
  margin-left: 2px !important;
}

:is(.portlet-forms-display, .lfr-ddm-form-container) .reference-mark svg,
:is(.portlet-forms-display, .lfr-ddm-form-container) .ddm-label-required svg,
:is(.portlet-forms-display, .lfr-ddm-form-container) .icon-asterisk svg {
  width: 6px !important;
  height: 6px !important;
  fill: currentColor !important;
}

/* The mark FLOWS after the label text instead of being pinned.
 *
 * Clay ships `.reference-mark` as `position: absolute` so it can be placed
 * relative to a field label. Measured live on a form, that left every label
 * mark as a 4x0 box - absolute + an <svg> with no intrinsic size collapses
 * the span entirely - with `top` resolving to 0 or auto, so the star detached
 * from the end of the question and sat at the label's top-left corner. It
 * read as a stray glyph rather than a mark on the last word.
 *
 * Static flow gives the span a real box again, and `vertical-align: super`
 * then does the superscripting relative to the text it follows, so the mark
 * tracks the label whatever size that label is - which matters now the field
 * label and the group legend are both on the 12px scale.
 *
 * Scoped to `.ddm-label-required`, i.e. marks that belong to a LABEL. The
 * standalone "Indicates Required Fields" mark is
 * `.reference-mark:not(.ddm-label-required)` and is handled separately at the
 * end of this block. */
:is(.portlet-forms-display, .lfr-ddm-form-container) .ddm-label-required {
  position: static !important;
  display: inline-block !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: auto !important;
  height: auto !important;
  /* The mark must contribute NO vertical space. Liferay ships it with
     `margin: 4px 0 32px`, which was inert while Clay had it absolutely
     positioned. Making it static to fix the alignment put those margins
     back into the line box, and the group legend grew from 17px to 45px -
     measured live, 24.8px of dead space under a single line of text, which
     read as a large gap between a question and its radio/checkbox options
     while the dropdown label beside it stayed tight. */
  margin: 0 0 0 3px !important;
  vertical-align: super !important;
}

/* The glyph sits on the span's own baseline - the span is already raised, so
   superscripting the svg as well would lift it a second time and push it
   clear of the cap height. */
:is(.portlet-forms-display, .lfr-ddm-form-container) .ddm-label-required > svg,
:is(.portlet-forms-display, .lfr-ddm-form-container) .ddm-label-required > .lexicon-icon {
  position: static !important;
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  margin: 0 !important;
  vertical-align: baseline !important;
  fill: currentColor !important;
}

/* --- Field 5: validation text is caption-sized and uses the DS critical
 *     glyph. Clay ships a filled-circle exclamation at body size; the brand
 *     mark is an outlined circle, so the Clay <svg> is hidden and the DS
 *     glyph painted on the indicator box instead. */
:is(.portlet-forms-display, .lfr-ddm-form-container) .form-feedback-group,
:is(.portlet-forms-display, .lfr-ddm-form-container) .form-feedback-item {
  font-family: "HPE Graphik", "HPEGraphik", Arial, sans-serif !important;
  font-size: 12px !important;
  line-height: 16px !important;
  color: var(--hpe-color-text-critical, #CC1F1A) !important;
}

:is(.portlet-forms-display, .lfr-ddm-form-container) .form-feedback-item {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 6px !important;
}

:is(.portlet-forms-display, .lfr-ddm-form-container) .form-feedback-item .form-feedback-indicator {
  flex: 0 0 12px !important;
  width: 12px !important;
  height: 12px !important;
  margin: 0 !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='10' stroke='%23CC1F1A' stroke-width='2'/%3E%3Cpath d='M12 7v6' stroke='%23CC1F1A' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='16.5' r='1.2' fill='%23CC1F1A'/%3E%3C/svg%3E") center/12px no-repeat !important;
}

:is(.portlet-forms-display, .lfr-ddm-form-container) .form-feedback-item .form-feedback-indicator svg {
  display: none !important;
}

/* --- Field 6 + 15: focus is an offset outline, never a heavy border.
 *     --hpe-color-focus resolves to grey-1000 (#292D3A), so the previous
 *     `border-color: focus + box-shadow 0 0 0 1px focus` painted what reads
 *     as a 2px black border tight against the field. The DS focus treatment
 *     keeps the field's own 1px border and draws a 2px outline 2px clear of
 *     it. This also gives the file-upload and select controls the focus ring
 *     they were missing. */
:is(.portlet-forms-display, .lfr-ddm-form-container) form.form .form-control:focus,
:is(.portlet-forms-display, .lfr-ddm-form-container) .form-control:focus,
:is(.portlet-forms-display, .lfr-ddm-form-container) .select-field-trigger:focus,
:is(.portlet-forms-display, .lfr-ddm-form-container) .select-field-trigger:focus-within {
  border-color: var(--hpe-color-border-default, #B1B9BE) !important;
  box-shadow: none !important;
  outline: 2px solid var(--hpe-color-focus, #292D3A) !important;
  outline-offset: 2px !important;
}

/* --- Field 7 + 8: the wizard buttons keep their palette in every state.
 *     Bootstrap's `.btn-primary:not(:disabled):not(.disabled):active` and
 *     Clay's `.btn-secondary:hover` both repaint with the portal's green,
 *     which is why Next flashed green on click and Previous picked up a green
 *     outline on hover. Those selectors are (0,4,1), so the override is
 *     matched state-for-state and forced. */
:is(.portlet-forms-display, .lfr-ddm-form-container) .btn-primary:hover,
:is(.portlet-forms-display, .lfr-ddm-form-container) .btn-primary:focus,
:is(.portlet-forms-display, .lfr-ddm-form-container) .btn-primary:active,
:is(.portlet-forms-display, .lfr-ddm-form-container) .btn-primary:not(:disabled):not(.disabled):active,
:is(.portlet-forms-display, .lfr-ddm-form-container) .btn-primary:not(:disabled):not(.disabled).active {
  background-color: var(--hpe-color-background-neutral-xstrong-hover, #3E4550) !important;
  background-image: none !important;
  border-color: transparent !important;
  color: var(--hpe-color-text-onStrong, #FFFFFF) !important;
  box-shadow: none !important;
}

:is(.portlet-forms-display, .lfr-ddm-form-container) .btn-secondary:not(.btn-unstyled):hover,
:is(.portlet-forms-display, .lfr-ddm-form-container) .btn-secondary:not(.btn-unstyled):focus,
:is(.portlet-forms-display, .lfr-ddm-form-container) .btn-secondary:not(.btn-unstyled):active,
:is(.portlet-forms-display, .lfr-ddm-form-container) .btn-secondary:not(:disabled):not(.disabled):active {
  background-color: var(--hpe-color-background-contrast-hover, rgba(0, 0, 0, 0.08)) !important;
  background-image: none !important;
  border-color: transparent !important;
  color: var(--hpe-color-text-strong, #292D3A) !important;
  box-shadow: none !important;
}

/* Keyboard focus must still be visible - the rules above deliberately kill
   Bootstrap's focus shadow, so the DS ring is put back for keyboard users. */
:is(.portlet-forms-display, .lfr-ddm-form-container) .btn-primary:focus-visible,
:is(.portlet-forms-display, .lfr-ddm-form-container) .btn-secondary:focus-visible {
  outline: 2px solid var(--hpe-color-focus, #292D3A) !important;
  outline-offset: 2px !important;
}

/* Belt and braces on the green edge.
 *
 *  Previous kept showing a green pill outline. Two separate sources:
 *
 *   1. Bootstrap paints a secondary button's EDGE from $secondary - HPE green
 *      in this portal - through a family of state selectors, and Clay adds a
 *      `.focus` CLASS on top of the `:focus` pseudo-class. Overriding
 *      hover/focus/active individually still left the combinations uncovered
 *      (`:active:focus`, `:not(:disabled):not(.disabled):focus`, `.focus`).
 *
 *   2. THE ACTUAL CULPRIT, confirmed by reading the matched rules off the live
 *      form: a legacy global rule in this very file (search
 *      `.btn-secondary:hover{background:0 0;box-shadow:none`) sets
 *
 *          outline: var(--hpe-color-decorative-brand) solid 2px
 *
 *      on hover. It is an OUTLINE, not a border or a shadow - which is why
 *      every previous fix, all of which only cleared border-color and
 *      box-shadow, left the ring untouched. It is unscoped, so it reaches
 *      these buttons from outside the forms block entirely.
 *
 *  The edge is therefore neutralised for EVERY state of a forms secondary
 *  button across all three properties - border, box-shadow AND outline. The
 *  legacy rule itself is left alone: it is portal-wide and predates this work,
 *  so it is overridden here rather than changed underneath other pages. */
:is(.portlet-forms-display, .lfr-ddm-form-container) .btn-secondary,
:is(.portlet-forms-display, .lfr-ddm-form-container) .btn-secondary.focus,
:is(.portlet-forms-display, .lfr-ddm-form-container) .btn-secondary:not(:disabled):not(.disabled):focus,
:is(.portlet-forms-display, .lfr-ddm-form-container) .btn-secondary:not(:disabled):not(.disabled):active:focus,
:is(.portlet-forms-display, .lfr-ddm-form-container) .btn-secondary:not(:disabled):not(.disabled).active:focus,
:is(.portlet-forms-display, .lfr-ddm-form-container) .lfr-ddm-form-pagination-controls .btn-secondary,
:is(.portlet-forms-display, .lfr-ddm-form-container) .lfr-ddm-form-pagination-controls .btn-secondary:hover,
:is(.portlet-forms-display, .lfr-ddm-form-container) .lfr-ddm-form-pagination-controls .btn-secondary:focus,
:is(.portlet-forms-display, .lfr-ddm-form-container) .lfr-ddm-form-pagination-controls .btn-secondary:active {
  border-color: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}

/* Previous kept its green ring even after the state sweep above, which only
 * ever matched `.btn-secondary`. Liferay does not always render the wizard's
 * back action with that class - Bootstrap's OUTLINE variants
 * (`.btn-outline-secondary` / `.btn-outline-primary`) take their edge from
 * $secondary / $primary by design, and in this portal both resolve to HPE
 * green, so an outline-variant Previous is green in its REST state and no
 * `.btn-secondary` selector can reach it.
 *
 * Rather than depend on which variant Liferay picks, the edge is cleared for
 * every button in the wizard footer and for the outline variants wherever they
 * appear on a form. The DS focus ring is unaffected: it is drawn with
 * `outline`, not with border or box-shadow. */
:is(.portlet-forms-display, .lfr-ddm-form-container) .lfr-ddm-form-pagination-controls .btn,
:is(.portlet-forms-display, .lfr-ddm-form-container) .lfr-ddm-form-pagination-controls .btn:hover,
:is(.portlet-forms-display, .lfr-ddm-form-container) .lfr-ddm-form-pagination-controls .btn:focus,
:is(.portlet-forms-display, .lfr-ddm-form-container) .lfr-ddm-form-pagination-controls .btn.focus,
:is(.portlet-forms-display, .lfr-ddm-form-container) .lfr-ddm-form-pagination-controls .btn:active,
:is(.portlet-forms-display, .lfr-ddm-form-container) [class*=btn-outline],
:is(.portlet-forms-display, .lfr-ddm-form-container) [class*=btn-outline]:hover,
:is(.portlet-forms-display, .lfr-ddm-form-container) [class*=btn-outline]:focus,
:is(.portlet-forms-display, .lfr-ddm-form-container) [class*=btn-outline].focus,
:is(.portlet-forms-display, .lfr-ddm-form-container) [class*=btn-outline]:active {
  border-color: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}

/* An outline-variant Previous also has no fill of its own, so it is given the
   same secondary treatment as the .btn-secondary variant. */
:is(.portlet-forms-display, .lfr-ddm-form-container) .btn-outline-secondary,
:is(.portlet-forms-display, .lfr-ddm-form-container) .btn-outline-primary {
  background-color: var(--hpe-color-background-contrast, rgba(0, 0, 0, 0.04)) !important;
  color: var(--hpe-color-text-strong, #292D3A) !important;
}

:is(.portlet-forms-display, .lfr-ddm-form-container) .btn-outline-secondary:hover,
:is(.portlet-forms-display, .lfr-ddm-form-container) .btn-outline-primary:hover {
  background-color: var(--hpe-color-background-contrast-hover, rgba(0, 0, 0, 0.08)) !important;
  color: var(--hpe-color-text-strong, #292D3A) !important;
}

/* The DS focus ring is re-asserted LAST so it survives the `outline: 0` sweep
   above. Placed after those rules deliberately: at equal specificity the later
   declaration wins, so a keyboard user still gets a visible ring while a mouse
   hover gets none. */
:is(.portlet-forms-display, .lfr-ddm-form-container) .btn-primary:focus-visible,
:is(.portlet-forms-display, .lfr-ddm-form-container) .btn-secondary:focus-visible,
:is(.portlet-forms-display, .lfr-ddm-form-container) .lfr-ddm-form-pagination-controls .btn:focus-visible,
:is(.portlet-forms-display, .lfr-ddm-form-container) [class*=btn-outline]:focus-visible {
  outline: 2px solid var(--hpe-color-focus, #292D3A) !important;
  outline-offset: 2px !important;
}

/* --- Field 9 + 10: the select menu.
 *
 *  IMPORTANT - THE MENU IS NOT INSIDE THE FORM PORTLET.
 *
 *  Liferay builds this field with Clay's Picker/DropDown, and Clay renders the
 *  open menu through a React PORTAL: ClayPortal creates a bare <div>, appends
 *  it to document.body and renders the menu into it. Verified on the live
 *  form - the ancestor chain of the menu is
 *
 *      div.dropdown-menu.ddm-select-dropdown > div > div > BODY
 *
 *  so it is a SIBLING of the portlet, not a descendant. Every rule here was
 *  previously written as `:is(.portlet-forms-display, ...) .dropdown-menu`,
 *  which therefore matched nothing at all - the heading and the placeholder
 *  kept rendering and none of the option styling applied even though the
 *  stylesheet was live.
 *
 *  The menu is scoped instead on `.ddm-select-dropdown`, the class Liferay
 *  puts on the DDM select's own menu. That is specific to this field type, so
 *  these rules cannot reach the header's notification/user menus or any other
 *  Clay dropdown on the page.
 *
 *  Live markup this is written against:
 *      div.dropdown-menu.ddm-btn-full.ddm-select-dropdown
 *        ul.list-unstyled[role=menu]
 *          li.dropdown-subheader              <- the field label, uppercased
 *          li > ul.list-unstyled[role=group]
 *              li[aria-selected]
 *                button.dropdown-item[role=menuitem][value=...]
 *
 *  The placeholder row is the ONLY option Liferay renders without a `value`
 *  attribute (real options carry value="aiquetwo1" and so on), which is what
 *  distinguishes it - there is no data-value and no empty-string value. */
.dropdown-menu.ddm-select-dropdown .dropdown-subheader,
.dropdown-menu.ddm-select-dropdown .dropdown-header,
.dropdown-menu.ddm-select-dropdown .dropdown-section-title {
  display: none !important;
}

/* The "Choose an Option" row. */
.dropdown-menu.ddm-select-dropdown .dropdown-item:not([value]) {
  display: none !important;
}

/* ...and the <li> wrapping it, so it leaves no gap in the 6px-gapped column.
   Kept in its own rule: a browser without :has() discards the entire selector
   list the pseudo-class appears in. */
.dropdown-menu.ddm-select-dropdown li:has(> .dropdown-item:not([value])) {
  display: none !important;
}

/* The native <select> that Liferay keeps hidden behind the Clay control, and
   any field type it still renders natively. */
:is(.portlet-forms-display, .lfr-ddm-form-container) form.form select.form-control > option[value=""] {
  display: none !important;
}

/* The menu itself - HPE Design System "Select" drop.
 *
 *  These are the same values already shipped for the Browse HPE solutions
 *  select, traced through grommet-theme-hpe to hpe-design-tokens, so the two
 *  selects in the portal render identically:
 *
 *    drop        background-floating #FFFFFF, NO border, radius 6px,
 *                shadow-medium 0 6px 12px rgba(0,0,0,.12), 6px padding,
 *                options in a 6px-gapped column
 *    option      36px row (5px + 24px line-height + 5px + 2px border),
 *                16px/24px weight 500, text-default #3E4550, radius 6px
 *    hover       background-hover rgba(0,0,0,.04)
 *    selected    background-selected-primary #D1FFEE with a 6px
 *                border-selected #006750 bar down the left edge. The Design
 *                System does NOT bold or tick the selected option - it marks
 *                it.
 *
 *  Positioning is left to Clay: it sets left/top inline from its own
 *  measurement and flips the menu above the control near the viewport bottom,
 *  so nothing here may touch top/left/width. */
.dropdown-menu.ddm-select-dropdown {
  background-color: #FFFFFF !important;
  border: none !important;
  border-radius: 6px !important;
  box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.12) !important;
  padding: 6px !important;
  box-sizing: border-box !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(0, 0, 0, 0.28) transparent !important;
}

.dropdown-menu.ddm-select-dropdown::-webkit-scrollbar {
  width: 10px;
}

.dropdown-menu.ddm-select-dropdown::-webkit-scrollbar-track {
  background: transparent;
}

.dropdown-menu.ddm-select-dropdown::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.28);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}

/* Both the outer [role=menu] list and the inner [role=group] list. */
.dropdown-menu.ddm-select-dropdown .list-unstyled {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

/* The rows are <button>s, so Bootstrap's button chrome has to be reset before
   the Design System row can be drawn on top of it. */
.dropdown-menu.ddm-select-dropdown .dropdown-item {
  box-sizing: border-box !important;
  position: relative !important;
  min-height: 36px !important;
  display: block !important;
  width: 100% !important;
  font-family: "HPE Graphik", "HPEGraphik", Arial, sans-serif !important;
  font-size: 16px !important;
  line-height: 24px !important;
  font-weight: 500 !important;
  color: #3E4550 !important;
  padding: 5px 12px !important;
  margin: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  text-align: left !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* background-hover, also on :focus so a keyboard-arrowed row reads the same as
   the one under the pointer. Clay also sets a `.hover` CLASS while arrowing. */
.dropdown-menu.ddm-select-dropdown .dropdown-item:hover,
.dropdown-menu.ddm-select-dropdown .dropdown-item:focus,
.dropdown-menu.ddm-select-dropdown .dropdown-item.hover,
.dropdown-menu.ddm-select-dropdown .dropdown-item.focus {
  background-color: rgba(0, 0, 0, 0.04) !important;
  color: #3E4550 !important;
  outline: none !important;
}

/* Liferay leaves EVERY row aria-selected="false" and adds no class, so there
   is no native hook for the chosen option - see
   js/components/ddm-select-selected.js, which adds `prp-option-selected`.
   The aria/`.active` variants are kept as well, so this still works if a
   future Liferay version starts marking the row itself. */
.dropdown-menu.ddm-select-dropdown .dropdown-item.prp-option-selected,
.dropdown-menu.ddm-select-dropdown li[aria-selected=true] > .dropdown-item,
.dropdown-menu.ddm-select-dropdown .dropdown-item[aria-selected=true],
.dropdown-menu.ddm-select-dropdown .dropdown-item.active {
  background-color: #D1FFEE !important;
  color: #292D3A !important;
  font-weight: 500 !important;
}

.dropdown-menu.ddm-select-dropdown .dropdown-item.prp-option-selected:hover,
.dropdown-menu.ddm-select-dropdown li[aria-selected=true] > .dropdown-item:hover,
.dropdown-menu.ddm-select-dropdown .dropdown-item[aria-selected=true]:hover,
.dropdown-menu.ddm-select-dropdown .dropdown-item.active:hover {
  background-color: #AAFADE !important;
}

/* The selection marker: a 6px border-selected bar pinned to the left edge,
   rounded on that side only and pulled 1px out so it hugs the row's border. */
.dropdown-menu.ddm-select-dropdown .dropdown-item.prp-option-selected::before,
.dropdown-menu.ddm-select-dropdown li[aria-selected=true] > .dropdown-item::before,
.dropdown-menu.ddm-select-dropdown .dropdown-item[aria-selected=true]::before,
.dropdown-menu.ddm-select-dropdown .dropdown-item.active::before {
  content: "" !important;
  position: absolute !important;
  top: -1px !important;
  bottom: -1px !important;
  left: -1px !important;
  width: 6px !important;
  background-color: #006750 !important;
  border-top-left-radius: 9999px !important;
  border-bottom-left-radius: 9999px !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  pointer-events: none !important;
}

/* --- MULTI-select menus.
 *
 *  A multi-select renders the same `.ddm-select-dropdown` menu, but each row
 *  carries its own checkbox and any number of rows can be chosen at once. Two
 *  things go wrong if the single-select treatment above is left to apply:
 *
 *   1. The mint fill + green marker bar is the SINGLE-select "this is the
 *      chosen option" affordance. On a multi-select the checkbox already says
 *      which rows are chosen, so the fill is redundant - and it only ever
 *      appeared on ONE row, because the trigger it is matched against shows a
 *      list of chips and only the first could match. A row that was ticked but
 *      not highlighted read as though it had not registered.
 *
 *   2. Liferay's menu is rendered through a React portal appended to <body>,
 *      so it is NOT inside `.portlet-forms-display` - the Design System
 *      checkbox drawn earlier in this block never reached these rows and they
 *      fell back to the browser's native blue control.
 *
 *  A multi-select row is identified structurally, by the checkbox it contains,
 *  so no new hook is needed on either side. */
.dropdown-menu.ddm-select-dropdown .dropdown-item:has(input[type=checkbox]) {
  background-color: transparent !important;
  color: #3E4550 !important;
}

.dropdown-menu.ddm-select-dropdown .dropdown-item:has(input[type=checkbox]):hover,
.dropdown-menu.ddm-select-dropdown .dropdown-item:has(input[type=checkbox]):focus,
.dropdown-menu.ddm-select-dropdown .dropdown-item:has(input[type=checkbox]).hover,
.dropdown-menu.ddm-select-dropdown .dropdown-item:has(input[type=checkbox]).focus {
  background-color: rgba(0, 0, 0, 0.04) !important;
}

/* No marker bar on a multi-select row. */
.dropdown-menu.ddm-select-dropdown .dropdown-item:has(input[type=checkbox])::before {
  content: none !important;
  display: none !important;
}

/* The row itself becomes the flex line so the box and its text sit together. */
.dropdown-menu.ddm-select-dropdown .dropdown-item:has(input[type=checkbox]) {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  white-space: normal !important;
}

/* Clay wraps the control as
 *     button.dropdown-item > div.custom-control > label
 *         > input.custom-control-input + span.custom-control-label
 * and draws its OWN box as `span.custom-control-label::before` while the real
 * input is left in the flow. Styling the input alone therefore produced TWO
 * controls on every row - the 24px DS box plus Clay's 16px blue one, measured
 * live at 24x24 and 15.99x15.99 side by side.
 *
 * Clay's drawn box is suppressed so the real input is the only control, which
 * is the same approach the in-form block takes (`.custom-control-label::before
 * { content: none }` earlier in this file). Scoped to rows that actually carry
 * a checkbox, so the single-select marker bar - which is itself a
 * `.dropdown-item::before` - is untouched. */
.dropdown-menu.ddm-select-dropdown .dropdown-item:has(input[type=checkbox]) .custom-control-label::before,
.dropdown-menu.ddm-select-dropdown .dropdown-item:has(input[type=checkbox]) .custom-control-label::after {
  display: none !important;
  content: none !important;
}

/* With Clay's box gone, the padding it had reserved for it would leave a gap,
   and the label must become the flex line so wrapped text hangs beside the
   box instead of falling underneath it. */
.dropdown-menu.ddm-select-dropdown .dropdown-item .custom-control {
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.dropdown-menu.ddm-select-dropdown .dropdown-item .custom-control > label {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
}

.dropdown-menu.ddm-select-dropdown .dropdown-item .custom-control-label {
  padding-left: 0 !important;
  margin: 0 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  color: #3E4550 !important;
}

/* The Design System checkbox, restated for the portal-rendered menu. Same
   values as the in-form control earlier in this block: 24px box, 6px radius,
   1px #B1B9BE at rest, #068667 fill with a white tick when checked. */
.dropdown-menu.ddm-select-dropdown .dropdown-item input[type=checkbox] {
  -webkit-appearance: none !important;
  appearance: none !important;
  opacity: 1 !important;
  position: static !important;
  flex: none !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  margin: 0 !important;
  background: transparent;
  border: 1px solid var(--hpe-color-border-default, #B1B9BE);
  border-radius: 6px !important;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.dropdown-menu.ddm-select-dropdown .dropdown-item input[type=checkbox]:hover {
  border-color: var(--hpe-color-border-strong, #3E4550);
}

.dropdown-menu.ddm-select-dropdown .dropdown-item input[type=checkbox]:checked {
  background-color: var(--hpe-color-background-primary-strong, #068667) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12l5 5L19 7' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-position: center !important;
  background-size: 14px !important;
  background-repeat: no-repeat !important;
  border-color: transparent !important;
}

.dropdown-menu.ddm-select-dropdown .dropdown-item input[type=checkbox]:focus-visible {
  outline: 2px solid var(--hpe-color-focus, #292D3A);
  outline-offset: 2px;
}

/* --- Field 11-13 + 18: selection controls gain a hover fill and a focus
 *     outline. The controls previously changed only their border on hover and
 *     relied on :focus-visible, which never fires for a mouse click - so
 *     "interacting" with a checkbox, radio or toggle gave no feedback at all.
 *     The bare input[type] selectors also pick up the rating grid's radios,
 *     which are not .custom-control-input. */
:is(.portlet-forms-display, .lfr-ddm-form-container) input.custom-control-input[type=checkbox]:hover,
:is(.portlet-forms-display, .lfr-ddm-form-container) input.custom-control-input[type=radio]:hover,
:is(.portlet-forms-display, .lfr-ddm-form-container) input[type=checkbox]:hover,
:is(.portlet-forms-display, .lfr-ddm-form-container) input[type=radio]:hover {
  background-color: var(--hpe-color-background-contrast, rgba(0, 0, 0, 0.04));
  /* Hover darkens the ring to the NEUTRAL border-strong, it does not tint it
     with the brand green. Green is the SELECTED fill, so a green ring on an
     unselected option read as if it were already chosen. This is the same
     correction already made to the Browse HPE solutions radio, measured on
     design-system.hpe.design/components/radiobuttongroup:
     rest #B1B9BE, hover #3E4550, checked #068667 with a white dot. */
  border-color: var(--hpe-color-border-strong, #3E4550) !important;
}

/* A checked control keeps its green fill on hover, one step darker. The
   checked rules earlier in this block are !important, so these must be too. */
:is(.portlet-forms-display, .lfr-ddm-form-container) input.custom-control-input[type=checkbox]:checked:hover,
:is(.portlet-forms-display, .lfr-ddm-form-container) input.custom-control-input[type=radio]:checked:hover,
:is(.portlet-forms-display, .lfr-ddm-form-container) input[type=checkbox]:checked:hover,
:is(.portlet-forms-display, .lfr-ddm-form-container) input[type=radio]:checked:hover {
  background-color: var(--hpe-color-background-primary-strong-hover, #006750) !important;
  border-color: transparent !important;
}

:is(.portlet-forms-display, .lfr-ddm-form-container) input[type=checkbox]:focus,
:is(.portlet-forms-display, .lfr-ddm-form-container) input[type=radio]:focus,
:is(.portlet-forms-display, .lfr-ddm-form-container) input[type=checkbox]:focus-visible,
:is(.portlet-forms-display, .lfr-ddm-form-container) input[type=radio]:focus-visible {
  outline: 2px solid var(--hpe-color-focus, #292D3A) !important;
  outline-offset: 2px !important;
}

/* Toggle switch (Clay: label.toggle-switch > input.toggle-switch-check +
   span.toggle-switch-bar). The bar is the painted element, so hover and
   focus have to be expressed through it. */
:is(.portlet-forms-display, .lfr-ddm-form-container) .toggle-switch-bar {
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

:is(.portlet-forms-display, .lfr-ddm-form-container) .toggle-switch:hover .toggle-switch-bar::before,
:is(.portlet-forms-display, .lfr-ddm-form-container) .toggle-switch-label:hover .toggle-switch-bar::before {
  background-color: var(--hpe-color-background-contrast-hover, rgba(0, 0, 0, 0.08));
}

:is(.portlet-forms-display, .lfr-ddm-form-container) .toggle-switch-check:focus ~ .toggle-switch-bar::before,
:is(.portlet-forms-display, .lfr-ddm-form-container) .toggle-switch-check:focus-visible ~ .toggle-switch-bar::before {
  outline: 2px solid var(--hpe-color-focus, #292D3A) !important;
  outline-offset: 2px !important;
}

/* --- Field 14: question labels follow the brand's 12px caption scale.
 *     Both `.ddm-label` (the label above a text/select/upload field) and
 *     `legend.lfr-ddm-legend` (the question above a checkbox/radio group) are
 *     12px/600, so every question prompt matches whichever control answers
 *     it. The legend rule is earlier in this block; the label rule follows. */
/* --- Field label / group label.
 *
 *  Liferay marks a question up in two different ways depending on the field
 *  type: a radio or checkbox GROUP gets `<legend class="lfr-ddm-legend">`,
 *  while a single field (select, text, upload) gets `<label class="ddm-label">`.
 *
 *  `.ddm-label` was briefly raised to 20px so that a select's question did not
 *  read smaller than the radio question beside it. That made every field
 *  caption a heading: "First Name", "Last Name", "Email" rendered at 20px/600,
 *  far heavier than the 16px value they label.
 *
 *  Both are now on the brand's 12px/600 field-label scale - the same size used
 *  for form labels elsewhere in the portal - so the two are consistent without
 *  either becoming a heading. */
:is(.portlet-forms-display, .lfr-ddm-form-container) .ddm-label {
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  margin-bottom: 8px !important;
}

/* --- A single checkbox/radio keeps its text beside the control.
 *
 *  Outside a <fieldset> the row was laid out inline: `.custom-control-label`
 *  was `display:inline` and `.custom-control-label-text` `display:inline-block`.
 *  An inline-block shrink-to-fits, so a one-line consent sentence claimed the
 *  full width and dropped ENTIRELY onto the line below the 24px box, leaving
 *  the checkbox stranded on a line of its own.
 *
 *  The row is laid out as flex instead, so the control and the text sit side
 *  by side and long text wraps inside its own column with a hanging indent.
 *  Liferay emits both DOM shapes for these fields - the Bootstrap one, where
 *  the input is a SIBLING before the label, and a nested one where the input
 *  is inside the label - so both are handled.
 *
 *  Bootstrap's 1.5rem left padding on .custom-control is for the drawn box it
 *  replaces (hidden further up), so it is removed or the row is double-inset. */
:is(.portlet-forms-display, .lfr-ddm-form-container) .custom-control {
  display: flex !important;
  align-items: flex-start !important;
  padding-left: 0 !important;
}

:is(.portlet-forms-display, .lfr-ddm-form-container) .custom-control > input.custom-control-input {
  flex: 0 0 auto !important;
}

:is(.portlet-forms-display, .lfr-ddm-form-container) .custom-control > label.custom-control-label {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* The nested shape. Kept in its own rule on purpose: a browser without :has()
   discards the WHOLE selector list a pseudo-class it cannot parse appears in,
   which would take the rules above down with it. */
:is(.portlet-forms-display, .lfr-ddm-form-container) label.custom-control-label:has(> input.custom-control-input) {
  display: flex !important;
  align-items: flex-start !important;
}

/* inline, not inline-block: the text must wrap line-by-line beside the box
   rather than being laid out as one unbreakable block. */
:is(.portlet-forms-display, .lfr-ddm-form-container) .custom-control-label-text {
  display: inline !important;
}

/* --- Multi-select chips.
 *
 *  A multi-value select renders each choice as a Clay dismissible label
 *  (.label.label-dismissible > .label-item + button.close). Clay's default is
 *  a squared-off grey box with a 1px border and a bold label, which reads as a
 *  disabled input sitting inside the field rather than a removable token.
 *  It is restyled as an HPE pill: contrast fill, no border, body-weight text
 *  and a round dismiss button that only darkens on hover.
 *
 *  Scoped to chips inside a field so it cannot reach Clay labels used as
 *  status badges elsewhere on a form. */
:is(.portlet-forms-display, .lfr-ddm-form-container) .form-control .label,
:is(.portlet-forms-display, .lfr-ddm-form-container) .select-field-trigger .label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 2px 4px 2px 12px !important;
  background-color: var(--hpe-color-background-contrast, rgba(0, 0, 0, 0.04)) !important;
  border: 0 !important;
  border-radius: 9999px !important;
  color: var(--hpe-color-text-strong, #292D3A) !important;
  font-family: "HPE Graphik", "HPEGraphik", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  text-transform: none !important;
}

:is(.portlet-forms-display, .lfr-ddm-form-container) .form-control .label .label-item,
:is(.portlet-forms-display, .lfr-ddm-form-container) .select-field-trigger .label .label-item {
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

:is(.portlet-forms-display, .lfr-ddm-form-container) .form-control .label .close,
:is(.portlet-forms-display, .lfr-ddm-form-container) .select-field-trigger .label .close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: none !important;
  color: inherit !important;
  opacity: 1 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  text-shadow: none !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease;
}

:is(.portlet-forms-display, .lfr-ddm-form-container) .form-control .label .close:hover,
:is(.portlet-forms-display, .lfr-ddm-form-container) .select-field-trigger .label .close:hover {
  background-color: var(--hpe-color-background-contrast-hover, rgba(0, 0, 0, 0.08)) !important;
}

:is(.portlet-forms-display, .lfr-ddm-form-container) .form-control .label .close:focus-visible,
:is(.portlet-forms-display, .lfr-ddm-form-container) .select-field-trigger .label .close:focus-visible {
  outline: 2px solid var(--hpe-color-focus, #292D3A) !important;
  outline-offset: 2px !important;
}

/* A field holding chips has to grow with them. The shared .form-control rule
   pins every field to a 36px box, which clipped the chip row as soon as the
   selection wrapped to a second line.
   Kept in its own rule: a browser without :has() discards the entire selector
   list the pseudo-class appears in. */
:is(.portlet-forms-display, .lfr-ddm-form-container) .form-control:has(.label),
:is(.portlet-forms-display, .lfr-ddm-form-container) .select-field-trigger:has(.label) {
  height: auto !important;
  min-height: 36px !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

/* --- Field 16 + 17: file upload actions.
 *     "Select" is the field's primary action and takes the black primary
 *     treatment (it was rendering as a secondary with a green focus ring);
 *     "Clear" stays secondary. They sat flush against each other, so the
 *     pair gets the same 12px gap the footer button row uses. */
:is(.portlet-forms-display, .lfr-ddm-form-container) .select-button,
:is(.portlet-forms-display, .lfr-ddm-form-container) .select-button.btn-secondary {
  background-color: var(--hpe-color-background-neutral-xstrong, #292D3A) !important;
  border-color: transparent !important;
  color: var(--hpe-color-text-onStrong, #FFFFFF) !important;
  margin-right: 12px !important;
}

:is(.portlet-forms-display, .lfr-ddm-form-container) .select-button:hover,
:is(.portlet-forms-display, .lfr-ddm-form-container) .select-button.btn-secondary:hover {
  background-color: var(--hpe-color-background-neutral-xstrong-hover, #3E4550) !important;
  color: var(--hpe-color-text-onStrong, #FFFFFF) !important;
}

/* Whatever Liferay renders beside Select (Clear) keeps clear of it. */
:is(.portlet-forms-display, .lfr-ddm-form-container) .select-button + .btn,
:is(.portlet-forms-display, .lfr-ddm-form-container) .select-button + button {
  margin-left: 0 !important;
}

/*HPE Marketing Pro Quick Links*/
.mpro-qcont {
  display: inline-flex !important;
  padding: 0px 22px 24px 20px !important;
  text-align: left !important;
  text-decoration: none !important;
  width: 89% !important;
  align-items: center !important;
  gap: 6px !important;
  border: none !important;
}

.mpro-qcont > a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #068667 !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

.mpro-qcont > a:hover {
  color: #074738 !important;
}

/* SVG paths carry a hard-coded fill in the web content, so darken them explicitly. */
.mpro-qcont > a:hover svg path {
  fill: #074738 !important;
}

.mpro-qpover {
  border-top: 2px solid #DDDDDD !important;
  padding: 24px 0 0 !important;
  display: inline-block !important;
  text-align: left !important;
  width: 89% !important;
  margin: 0 auto 24px !important;
}

.mpro-qpover > a {
  font-family: MetricHPE !important;
  font-style: normal !important;
  font-weight: 600 !important;
  font-size: 19px !important;
  line-height: 24px !important;
  color: #333333 !important;
  text-decoration: none !important;
}

.mpro-qcont-text {
  font-family: HPE Graphik !important;
  font-style: normal !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  text-align: left !important;
  color: inherit !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

.mpro-summary {
  display: block !important;
  color: #292D3A !important;
  font-family: HPE Graphik !important;
  font-size: 28px !important;
  font-style: normal !important;
  font-weight: 600 !important;
  line-height: 34px !important;
  width: 89% !important;
  text-align: left !important;
  padding: 40px !important;
  padding: 40px 22px 24px 40px !important;
}

.journal-content-article:has(.mpro-qcont),
.journal-content-article:has(.mpro-qpover) {
  background: #F7F7F7 !important;
  text-align: center !important;
}

.portlet-boundary:has(.mpro-qcont) {
  background: var(--color-background-card, #F7F7F7) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.portlet-boundary:has(.mpro-summary):has(.mpro-qcont) {
  border-top-left-radius: var(--radius-medium, 12px) !important;
  border-top-right-radius: var(--radius-medium, 12px) !important;
  padding-top: 0 !important;
}

.portlet-boundary:has(.mpro-qcont):not(:has(+ .portlet-boundary .mpro-qcont)),
.portlet-boundary:has(.mpro-qcont):last-child {
  border-bottom-left-radius: var(--radius-medium, 12px) !important;
  border-bottom-right-radius: var(--radius-medium, 12px) !important;
  padding-bottom: 28px !important;
}

.portlet-boundary:has(.mpro-qcont) .journal-content-article {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  text-align: left !important;
}

.portlet-boundary:has(.mpro-qcont) .portlet-content,
.portlet-boundary:has(.mpro-qcont) .portlet-content-container,
.portlet-boundary:has(.mpro-qcont) .portlet-body,
.portlet-boundary:has(.mpro-qcont) .portlet-topper,
.portlet-boundary:has(.mpro-qcont) .portlet-topper-toolbar {
  background: transparent !important;
  border: 0 !important;
}

.portlet-boundary:has(.mpro-qcont) .mpro-summary {
  padding: var(--spacing-large, 40px) var(--spacing-large, 40px) 12px var(--spacing-large, 40px) !important;
  margin: 0 !important;
  width: auto !important;
  font-size: 28px !important;
  font-weight: 600;
  line-height: 34px !important;
  color: #292D3A;
  text-align: left !important;
}

.portlet-boundary:has(.mpro-qcont) .mpro-qcont {
  display: flex !important;
  justify-content: flex-start !important;
  /* 40px horizontal (--spacing-large); 12px top/bottom so adjacent links sit
     24px apart (--spacing-small) */
  padding: 12px var(--spacing-large, 40px) !important;
  margin: 0 !important;
  width: auto !important;
  align-items: center !important;
  text-align: left !important;
  border: none !important;
}

/* =========================================================
   Sitemap page (/group/prp/sitemap) - Figma node 839:11015
   1) Center the 1600px grid to match the design. The global
      .bodyContent #content { padding-left:72px } clears the
      side-nav bar, but the Sitemap page has no side-nav, so it
      pushed the grid off-center (x232, cols ~463px, headers
      wrapped). Zero it on the Sitemap page only.
   2) Add accessible focus-visible states - the sitemap links
      rendered outline-style:none, so keyboard focus was invisible.
      Use the app on-brand dark ring plus the hover tint.
   ========================================================= */
body.Sitemap .bodyContent #content {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.child-link:focus-visible,
.navigation-link:focus-visible,
.second-child-title:focus-visible,
.second-child-title-expand:focus-visible,
.secondLevelTitle:focus-visible,
.firstLevelExpandRight:focus-visible {
  outline: 2px solid #292d3a;
  outline-offset: 2px;
  border-radius: 6px;
  background-color: rgba(0, 0, 0, 0.04);
}

/* =========================================================
   Footer (Figma node 839:11024) - applied on the Sitemap page.
   Figma legal strip: bg #1d1f27, HPE Graphik 16/24 #E5E5E5,
   single row with copyright on the left and legal links on the
   right, pipe (|) separated, plus hover (underline) and
   focus-visible states. The HPE logo is kept (per requirement).
   The live footer stacked copyright over wrapped links and had no
   separators; these rules lay them out on one row and add states.
   Scoped to body.Sitemap so other pages are unaffected.
   ========================================================= */
body.Sitemap #footer .footerContainer {
  align-items: center !important;
}

body.Sitemap #footer .footerLogo {
  flex: 0 0 auto !important;
  width: auto !important;
}

body.Sitemap #footer .footerText {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: auto !important;
  margin-top: 0 !important;
  padding-left: 24px !important;
}

body.Sitemap #footer .footerText .poweredBy {
  float: none !important;
  color: #E5E5E5 !important;
  font-family: "HPE Graphik", Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
  white-space: nowrap !important;
}

body.Sitemap #footer .footerText .footerLinks {
  float: none !important;
}

body.Sitemap #footer .footerLinks ul {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.Sitemap #footer .footerLinks ul li {
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  padding-left: 10px !important;
}

body.Sitemap #footer .footerLinks ul li:not(:last-child)::after {
  color: #E5E5E5;
  margin-left: 10px;
}

body.Sitemap #footer .footerLinks ul li a {
  color: #E5E5E5 !important;
  font-family: "HPE Graphik", Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

body.Sitemap #footer .footerLinks ul li a:hover {
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
}

body.Sitemap #footer .footerLinks ul li a:focus-visible {
  outline: 2px solid #E5E5E5 !important;
  outline-offset: 2px !important;
  border-radius: 4px !important;
}

/* =========================================================
   Concierge cards
   ========================================================= */
.journal-content-article div:has(> p > a.ConciergeButton) {
  padding: 40px !important;
  background-color: #F7F7F7 !important;
  border-radius: 12px !important;
}

.journal-content-article table:has(td img[src*="/img/s.gif"]) td,
.journal-content-article table:has(td img[src*="/img/s.gif"]) img {
  height: 40px !important;
}

.journal-content-article div:has(> p > a.ConciergeButton) > p:first-of-type {
  display: block !important;
  margin: 0 0 24px 0 !important;
  padding: 0 !important;
  font-family: "HPE Graphik", Arial, sans-serif !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  line-height: 34px !important;
  letter-spacing: -0.28px !important;
  color: #292D3A !important;
  text-align: left !important;
}

.journal-content-article div:has(> p > a.ConciergeButton) > p:not(:first-of-type):not(:has(> a.ConciergeButton)) {
  display: block !important;
  margin: 0 0 24px 0 !important;
  padding: 0 !important;
  font-family: "HPE Graphik", Arial, sans-serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 30px !important;
  letter-spacing: -0.2px !important;
  color: #67686E !important;
  text-align: left !important;
}

.journal-content-article div:has(> p > a.ConciergeButton) > p:has(> a.ConciergeButton) {
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

.journal-content-article a.ConciergeButton {
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  box-sizing: border-box !important;
  min-height: 56px !important;
  min-width: 120px !important;
  max-width: 384px !important;
  margin: 0 24px 0 0 !important;
  padding: 12px 24px !important;
  background-color: transparent !important;
  border: 3px solid #01A982 !important;
  border-radius: 9999px !important;
  color: #292D3A !important;
  font-family: "HPE Graphik", Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 24px !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

.journal-content-article a.ConciergeButton:hover {
  transition: 0.1s ease-in-out;
  box-shadow: 0 0 0 2px #01A982 inset !important;
  outline-width: 0 !important;
  text-decoration: none !important;
  color: #292D3A !important;
}

.journal-content-article a.ConciergeButton:visited {
  color: #292D3A !important;
}

/* ---------------------------------------------------------
   Forms wizard stepper - Figma "Actions / Wizard" (node 839:9200)

   The values below were measured off a 3x export of that frame rather than
   estimated, because Clay's default is a different shape entirely and a
   half-match reads worse than no change:

     circle          22px, ring only, never filled
     upcoming ring   2px  #606A70  -> --hpe-color-text-weak
     current ring    5px  #068667  -> --hpe-color-background-primary-strong
     connector       2px  #B1B9BE  -> --hpe-color-border-default
     current label        #006750  -> --hpe-color-text-primary
     other labels         #3E4550  -> --hpe-color-text-default

   Every colour in the design resolved to an HPE token that the theme already
   defines, so tokens are used throughout and no new literals are introduced.

   Clay ships close to the opposite: a 32px filled square carrying the step
   number, with the label ABOVE it (.multi-step-indicator-label-top). The
   number is painted by a ::before from data-multi-step-icon, so it has to be
   removed with `content:none` - zeroing the font alone leaves a blank box.
   --------------------------------------------------------- */
:is(.portlet-forms-display, .lfr-ddm-form-container) .multi-step-item {
  padding-top: 0 !important; /* Clay reserved this for the label above */
  padding-bottom: 44px !important; /* room for the label now sitting below */
}

/* Upcoming step - hollow ring */
:is(.portlet-forms-display, .lfr-ddm-form-container) .multi-step-icon {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  border-radius: 50% !important;
  background-color: transparent !important;
  border: 2px solid var(--hpe-color-text-weak) !important;
  box-shadow: none !important;
  font-size: 0 !important;
}

:is(.portlet-forms-display, .lfr-ddm-form-container) .multi-step-icon::before {
  content: none !important;
}

/* Current + already-completed steps.
   Both `.active` and `.complete` are matched: Clay marks the current step
   `.active` and prior steps `.complete`, and only restyling `.active` would
   leave finished steps looking untouched. The white here is the hole in the
   middle of the ring, not a panel behind it. */
:is(.portlet-forms-display, .lfr-ddm-form-container) .multi-step-item.active .multi-step-icon,
:is(.portlet-forms-display, .lfr-ddm-form-container) .multi-step-item.complete .multi-step-icon {
  border: 5px solid var(--hpe-color-background-primary-strong) !important;
  background-color: #FFFFFF !important;
}

/* Connector. The top/margin values re-centre the line on a 22px circle; Clay's
   are computed for its 32px one, and left alone they draw the line across the
   label instead of between the circles. */
:is(.portlet-forms-display, .lfr-ddm-form-container) .multi-step-divider {
  height: 2px !important;
  top: 12px !important;
  margin: -2px 6px 0 28px !important;
  background-color: var(--hpe-color-border-default) !important;
}

/* Only a segment that has been travelled turns green. Clay also greens the
   ACTIVE item's divider, but that is the line running FORWARD to a step the
   user has not reached yet - the design leaves it neutral. */
:is(.portlet-forms-display, .lfr-ddm-form-container) .multi-step-item.active .multi-step-divider {
  background-color: var(--hpe-color-border-default) !important;
}

:is(.portlet-forms-display, .lfr-ddm-form-container) .multi-step-item.complete .multi-step-divider {
  background-color: var(--hpe-color-background-primary-strong) !important;
}

/* Labels move from above the circle to below it. They stay absolutely
   positioned so that a long step name cannot widen its step, which would
   otherwise squeeze the connector and push the last circle off the card.
   Clay pins height:0 on them, hence the explicit height. */
:is(.portlet-forms-display, .lfr-ddm-form-container) .multi-step-indicator-label {
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  height: auto !important;
  width: max-content !important;
  max-width: 140px !important;
  margin: 8px 0 0 !important;
  padding: 0 !important;
  text-align: center !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  font-family: "HPE Graphik", "HPEGraphik", Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  color: var(--hpe-color-text-default) !important;
}

/* The two end labels are aligned to their circle rather than centred on it:
   centring the first one hangs it past the left edge of the card. */
:is(.portlet-forms-display, .lfr-ddm-form-container) .multi-step-item:first-child .multi-step-indicator-label {
  left: 0 !important;
  right: auto !important;
  transform: none !important;
  text-align: left !important;
}

:is(.portlet-forms-display, .lfr-ddm-form-container) .multi-step-item:last-child .multi-step-indicator-label {
  left: auto !important;
  right: 0 !important;
  transform: none !important;
  text-align: right !important;
}

:is(.portlet-forms-display, .lfr-ddm-form-container) .multi-step-item.active .multi-step-indicator-label,
:is(.portlet-forms-display, .lfr-ddm-form-container) .multi-step-item.complete .multi-step-indicator-label {
  color: var(--hpe-color-text-primary) !important;
  font-weight: 600 !important;
}

/* Keyboard focus for clickable steps */
:is(.portlet-forms-display, .lfr-ddm-form-container) .multi-step-item a:focus-visible .multi-step-icon,
:is(.portlet-forms-display, .lfr-ddm-form-container) .multi-step-icon:focus-visible {
  outline: 2px solid var(--hpe-color-focus) !important;
  outline-offset: 2px !important;
}

/* ---------------------------------------------------------
   Checkbox fields render as a toggle switch

   Liferay draws a DDM "Checkbox" field as a switch, not a tick box, and the
   default is effectively invisible: Clay builds the track and the knob out of
   .toggle-switch-bar's ::before / ::after, and both arrive as SQUARES - a 3px
   radius track and a 25px knob with only its left corners rounded, sitting
   flush against the left edge at the full height of the track. On a light
   background that reads as one plain grey rectangle with no knob at all, so
   there is no visual cue for on/off.

   Rebuilt to the HPE switch: 48x24 pill track, 12px round knob, 6px inset.
   Off is a hollow track with a grey knob; on is a solid green track with a
   white knob. The knob travels 30px = 48 - 12 - 6, which keeps the inset even
   at both ends.
   --------------------------------------------------------- */
:is(.portlet-forms-display, .lfr-ddm-form-container) .toggle-switch-bar::before {
  box-sizing: border-box !important;
  width: 48px !important;
  height: 24px !important;
  border-radius: 9999px !important;
  background-color: #FFFFFF !important;
  border: 2px solid var(--hpe-color-text-weak) !important;
  box-shadow: none !important;
}

:is(.portlet-forms-display, .lfr-ddm-form-container) .toggle-switch-bar::after {
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background-color: var(--hpe-color-text-weak) !important;
  left: 6px !important;
  top: 6px !important;
  box-shadow: none !important;
}

:is(.portlet-forms-display, .lfr-ddm-form-container) .toggle-switch-check:checked + .toggle-switch-bar::before {
  background-color: var(--hpe-color-background-primary-strong) !important;
  border-color: var(--hpe-color-background-primary-strong) !important;
}

:is(.portlet-forms-display, .lfr-ddm-form-container) .toggle-switch-check:checked + .toggle-switch-bar::after {
  background-color: #FFFFFF !important;
  left: 30px !important;
}

/* The real <input> is opacity:0 on top of the bar, so the focus ring has to be
   drawn on the track instead - without this the switch is unusable by keyboard. */
:is(.portlet-forms-display, .lfr-ddm-form-container) .toggle-switch-check:focus-visible + .toggle-switch-bar::before {
  outline: 2px solid var(--hpe-color-focus) !important;
  outline-offset: 2px !important;
}

/* ---------------------------------------------------------
   File upload fields - HPE Design System "FileInput"
   https://design-system.hpe.design/components/fileinput

   Reference measured off the live component on that page:
     container  50px tall, 8px radius, 1px #B1B9BE, transparent, padding 0 6px,
                flex row, contents vertically centred
     action     34px pill, rgba(0,0,0,0.04), 16px/500, padding 5px 18px

   Liferay renders both file fields (Image and Documents & Media) as a
   Bootstrap .input-group: a text box showing the chosen filename, with a
   separate "Select" button bolted to its right, each with its own border. The
   design system draws ONE box with the action sitting inside it, so the rules
   below move the border up to the group and strip it from the input.

   The group is matched by the Select button it contains, not by a field
   wrapper class. Both file fields and the date picker use .input-group, so
   matching that class alone would reshape the date field too; only the file
   fields carry a .btn-secondary action inside the group. This replaced a pair
   of wrapper-specific selectors that silently missed some form layouts.

   Deviation from the reference: the container's 6px left padding is dropped
   and the inset left to the inner input. See the .form-control rule below.
   --------------------------------------------------------- */
:is(.portlet-forms-display, .lfr-ddm-form-container) .input-group:has(> .input-group-item-shrink > button.btn-secondary) {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  height: 50px;
  /* Right padding only. The left edge is left to the filename input so its
     text lands on the same inset as every other field's text - see below. */
  padding: 0 6px 0 0;
  border: 1px solid var(--hpe-color-border-default, #B1B9BE);
  border-radius: 8px;
  background: transparent;
}

/* The filename box loses its own frame and becomes the label slot inside the
   container. It keeps the platform's readonly grey off, because the field is
   readonly by design here - the value only ever comes from the picker.

   Horizontal padding is deliberately NOT set. Splitting the inset between the
   container and this input made the filename start 4px left of every other
   field's text on pages that restyle .form-control padding. Leaving it alone
   lets the shared .form-control padding apply, so the file field tracks the
   text fields automatically whatever that padding is. */
:is(.portlet-forms-display, .lfr-ddm-form-container) .input-group:has(> .input-group-item-shrink > button.btn-secondary) .form-control {
  height: 46px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

:is(.portlet-forms-display, .lfr-ddm-form-container) .input-group:has(> .input-group-item-shrink > button.btn-secondary) .input-group-item {
  margin: 0 !important;
  padding: 0 !important;
}

/* The action. Sized to the design system's 34px pill rather than the 48px form
   button, because it sits INSIDE a 50px container - a full-size button would
   not fit. */
:is(.portlet-forms-display, .lfr-ddm-form-container) .input-group:has(> .input-group-item-shrink > button.btn-secondary) button.btn-secondary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  height: 34px !important;
  padding: 5px 18px !important;
  border: 0 !important;
  border-radius: 9999px !important;
  background: rgba(0, 0, 0, 0.04) !important;
  color: var(--hpe-color-text-strong, #292D3A) !important;
  font-family: "HPE Graphik", "HPEGraphik", Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  white-space: nowrap;
}

:is(.portlet-forms-display, .lfr-ddm-form-container) .input-group:has(> .input-group-item-shrink > button.btn-secondary) button.btn-secondary:hover {
  background: rgba(0, 0, 0, 0.08) !important;
}

/* Focus ring: ONE ring around the whole control.
 *
 * The design system draws the file input as a single box, so the focus ring
 * belongs to that box. The filename input inside it is borderless and only
 * part of the control, so letting it take the generic field ring drew a 2px
 * outline around the inner box alone - a rectangle floating inside the
 * container, stopping short of the Select/Clear actions. The ring is moved to
 * the container via :focus-within and suppressed on the inner input.
 *
 * `:focus-within` also covers the Select and Clear buttons, so tabbing through
 * the control keeps one ring on the whole field instead of three separate
 * ones. */
:is(.portlet-forms-display, .lfr-ddm-form-container) .input-group:has(> .input-group-item-shrink > button.btn-secondary):focus-within {
  outline: 2px solid var(--hpe-color-focus, #292D3A);
  outline-offset: 2px;
}

:is(.portlet-forms-display, .lfr-ddm-form-container) .input-group:has(> .input-group-item-shrink > button.btn-secondary) .form-control:focus,
:is(.portlet-forms-display, .lfr-ddm-form-container) .input-group:has(> .input-group-item-shrink > button.btn-secondary) button.btn-secondary:focus,
:is(.portlet-forms-display, .lfr-ddm-form-container) .input-group:has(> .input-group-item-shrink > button.btn-secondary) button.btn-secondary:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* ---------------------------------------------------------
   Date / Date-time field - HPE Design System "DateInput"
   https://design-system.hpe.design/components/dateinput

   Reference measured off the live component: a 36px box, 8px radius, 1px
   #B1B9BE, with the calendar icon sitting INSIDE the box at its right edge.

   Liferay marks the input .input-group-inset-after, which is Clay's way of
   saying "an item is overlaid on the right". That only works if the wrapper is
   a positioning context and the inset item is absolute - here the inset item
   computed to position:static, so it fell back into normal flow and the icon
   was pushed 8px PAST the input's right border, floating outside the field.
   The input also stopped short of the field width (806 of 855px) to make room
   for it.

   Restoring the intended absolute placement puts the icon back inside the box
   and lets the input span the full width. pointer-events are handed back to
   the button alone, so the overlay strip does not swallow clicks meant for the
   text box behind it.
   --------------------------------------------------------- */
:is(.portlet-forms-display, .lfr-ddm-form-container) .date-picker .input-group-item-focusable {
  position: relative;
  flex: 1 1 auto;
}

:is(.portlet-forms-display, .lfr-ddm-form-container) .date-picker input.form-control.input-group-inset-after {
  width: 100% !important;
  padding-right: 40px !important; /* keep text clear of the icon */
}

:is(.portlet-forms-display, .lfr-ddm-form-container) .date-picker .input-group-inset-item-after {
  position: absolute !important;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex !important;
  align-items: center !important;
  padding-right: 12px !important;
  pointer-events: none;
}

/* The trigger is an icon, not a button: no fill, no chrome, 14px glyph as in
   the design system. Clay ships it as a 26px .btn with its own radius. */
:is(.portlet-forms-display, .lfr-ddm-form-container) .date-picker button.date-picker-dropdown-toggle {
  pointer-events: auto;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 24px !important;
  height: 24px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: var(--hpe-color-text-default, #3E4550) !important;
}

:is(.portlet-forms-display, .lfr-ddm-form-container) .date-picker button.date-picker-dropdown-toggle .lexicon-icon {
  width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
}

/* ---------------------------------------------------------
   Grid (matrix) field - centre each control under its column heading

   A DDM "Grid" question renders a table: row labels down the left, choice
   headings across the top, and a radio (or checkbox) in every cell. Liferay
   leaves those cells left-aligned, so the controls sat hard against the left
   edge of each column while the heading above them was centred - the "Good /
   Poor / Excellent" columns were out by 78-94px.

   Everything here is keyed to .form-builder-grid-field, the class Liferay puts
   ONLY on controls inside a grid, so ordinary radios and checkboxes elsewhere
   in the form keep their normal left-aligned "control then label" layout.

   Three things have to line up, hence three rules:
     - the cell wrapper centres its contents,
     - the empty .custom-control-label span is removed: a grid cell has no
       per-control label (the heading serves that role), but Liferay still
       emits the span, and its 12px width pushed the control off-centre,
     - the control's own 12px right margin - correct when a label follows it,
       wrong when nothing does - is zeroed. That rule needs the [type] and the
       grid class together to out-specify the general radio/checkbox rule
       earlier in this file, which is why the selector looks redundant.
   --------------------------------------------------------- */
:is(.portlet-forms-display, .lfr-ddm-form-container) .custom-control:has(.form-builder-grid-field) {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
}

:is(.portlet-forms-display, .lfr-ddm-form-container) .custom-control:has(.form-builder-grid-field) > label {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

:is(.portlet-forms-display, .lfr-ddm-form-container) .custom-control:has(.form-builder-grid-field) .custom-control-label {
  display: none !important;
}

:is(.portlet-forms-display, .lfr-ddm-form-container) input.custom-control-input[type=radio].form-builder-grid-field,
:is(.portlet-forms-display, .lfr-ddm-form-container) input.custom-control-input[type=checkbox].form-builder-grid-field {
  margin: 0 !important;
}

/* Centre the headings and cells themselves. The first column holds the row
   label and stays left-aligned. */
:is(.portlet-forms-display, .lfr-ddm-form-container) table:has(.form-builder-grid-field) th:not(:first-child),
:is(.portlet-forms-display, .lfr-ddm-form-container) table:has(.form-builder-grid-field) td:not(:first-child) {
  text-align: center !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* ---------------------------------------------------------
   eService content pages (Get Support and similar)

   These pages - /group/prp/support and the other eService landing pages -
   carry their styling INSIDE the web content article as an inline <style>
   block, written against the pre-rebrand design. On /group/prp/support that
   block still sets:

     #hpebuttonlabel input    2px solid #01a982, square, 166x42 fixed,
                              MetricHPE 19px, #333 label
     .getSupprot*Description  MetricHPE 24px/300
     .getSupprotTitle:after   7px x 96px bar in rgb(1, 169, 130)

   #01a982 and rgb(1,169,130) are the OLD brand green and MetricHPE is the old
   typeface; the current standard is #068667 and HPE Graphik. The rules below
   bring the page back to the design system: primary button as a neutral
   xstrong pill on the Figma medium tokens (36px, 6px 19px, 16px/500), HPE
   Graphik throughout, and the accent bar removed.

   !important is required, and the button selector repeats the id: the article's
   own rule is `.Support .eServiceContent #hpebuttonlabel input`, which carries
   an id and sits later in the document than the theme stylesheet, so it wins
   both on specificity and on order otherwise.

   This is a workaround, not the real fix. The lasting fix is to delete the
   legacy <style> block from the web content article now that the theme styles
   these pages - see the note in the handover.
   --------------------------------------------------------- */
.eServiceContent .getSupprotTitle,
.eServiceContent .getSupprotShortDescription > p,
.eServiceContent .getSupprotMainDescription > p {
  font-family: "HPE Graphik", "HPEGraphik", Arial, sans-serif !important;
}

.eServiceContent .getSupprotTitle {
  color: var(--hpe-color-text-strong, #292D3A) !important;
  font-weight: 600 !important;
}

/* The accent bar under the title is dropped by the current branding. */
.eServiceContent .getSupprotTitle:after {
  display: none !important;
}

.eServiceContent .getSupprotShortDescription > p,
.eServiceContent .getSupprotMainDescription > p {
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 30px !important;
  color: #67686E !important;
}

/* Primary action -> HPE primary button, same medium tokens as the forms
   footer, so the portal is consistent across form and content pages. The
   fixed 166x42 is dropped so the pill sizes to its label. */
#hpebuttonlabel input,
.eServiceContent #hpebuttonlabel input {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  min-height: 36px !important;
  padding: 6px 19px !important;
  border: 1px solid transparent !important;
  border-radius: 9999px !important;
  background: var(--hpe-color-background-neutral-xstrong, #292D3A) !important;
  color: var(--hpe-color-text-onStrong, #FFFFFF) !important;
  font-family: "HPE Graphik", "HPEGraphik", Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 24px !important;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

#hpebuttonlabel input:hover,
.eServiceContent #hpebuttonlabel input:hover {
  background: var(--hpe-color-background-neutral-xstrong-hover, #3E4550) !important;
}

#hpebuttonlabel input:focus-visible,
.eServiceContent #hpebuttonlabel input:focus-visible {
  outline: 2px solid var(--hpe-color-focus, #292D3A) !important;
  outline-offset: 2px !important;
}

/* ---------------------------------------------------------
   "Indicates Required Fields" legend - hidden by default.

   Every required field already carries its own asterisk next to its label, so
   the standalone legend at the top of each page repeats information the form
   states inline. It is hidden rather than deleted so the markup, and the
   screen-reader text it carries, are left untouched.

   Matched by structure, not by a class: the paragraph is the only one that
   directly contains a STANDALONE reference mark (a required mark inside a
   label is `.ddm-label-required`, which is excluded). That is the same
   selector the overlap fix below relies on.
   --------------------------------------------------------- */
:is(.portlet-forms-display, .lfr-ddm-form-container) p:has(> .reference-mark:not(.ddm-label-required)) {
  display: none !important;
}

/* ---------------------------------------------------------
   Fieldset separator - hidden.

   A DDM fieldset renders `<div class="ddm-field-types-fieldset__nested-
   separator"><hr class="mt-1 separator"></div>` above its nested fields. On a
   numbered questionnaire that rule lands between the question number and the
   question itself, cutting each fieldset in half. The grouping is already
   carried by the question heading and spacing, so the rule is redundant.

   Both the <hr> and its wrapper are hidden: hiding only the <hr> would leave
   the wrapper's own box contributing vertical space.
   --------------------------------------------------------- */
:is(.portlet-forms-display, .lfr-ddm-form-container) .ddm-field-types-fieldset__nested-separator,
:is(.portlet-forms-display, .lfr-ddm-form-container) .ddm-field-types-fieldset__nested-separator > hr,
:is(.portlet-forms-display, .lfr-ddm-form-container) .ddm-field-types-fieldset__nested > hr.separator {
  display: none !important;
}

/* Fields inside a fieldset keep the page's left margin.
 *
 * Liferay pairs two opposing Bootstrap gutters around a fieldset:
 *     .ddm-field-types-fieldset__nested      margin-left: -12px
 *     .ddm-field-container.ddm-fieldset      margin-left:  12px
 * They are meant to cancel, and would if the column between them still
 * carried its 12px padding - but the theme removes that padding further up
 * this block, and a fieldset nests one more negative than positive, so the
 * pair left a net -12px: measured live, every field inside a fieldset hung at
 * 115.8 against the page title's 127.8.
 *
 * BOTH sides are cleared, not just the negative one. Zeroing only the
 * negative margin simply exposed the positive one and pushed the legend and
 * its options 12px the other way, to 139.8. */
:is(.portlet-forms-display, .lfr-ddm-form-container) .ddm-field-types-fieldset__nested,
:is(.portlet-forms-display, .lfr-ddm-form-container) .ddm-field-container.ddm-fieldset {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ---------------------------------------------------------
   "Indicates Required Fields" asterisk overlap
   Clay's `.reference-mark` is position:absolute so that it can be pinned
   just after a field label. In the standalone legend paragraph there is
   nothing to pin it to, so it collapsed out of flow and painted on top of
   the "I" - the live page reads "I*ndicates Required Fields".
   Restoring static flow ONLY for the paragraph variant fixes the overlap
   while leaving the label marks (.ddm-label-required, which rely on their
   computed `left`) untouched.
   --------------------------------------------------------- */
:is(.portlet-forms-display, .lfr-ddm-form-container) p > .reference-mark:not(.ddm-label-required),
:is(.portlet-forms-display, .lfr-ddm-form-container) p > .reference-mark:not(.ddm-label-required) > .lexicon-icon {
  position: static !important;
}

:is(.portlet-forms-display, .lfr-ddm-form-container) p > .reference-mark:not(.ddm-label-required) {
  display: inline-block !important;
  margin-right: 6px !important;
  vertical-align: baseline !important;
}

/* The mark inherits a 6px font-size from Clay's utility classes, which left
   the asterisk glyph rendering as a 17x9 smear. The SVG has no intrinsic size,
   so it has to be given one explicitly. */
:is(.portlet-forms-display, .lfr-ddm-form-container) p > .reference-mark:not(.ddm-label-required) > .lexicon-icon {
  width: 10px !important;
  height: 10px !important;
  vertical-align: -1px !important;
}

/* =========================================================
   New Order Request tile - fit the embedded RFB chart
   The tile is an IFrame widget whose document is served from
   hpe-rfb.it.hpe.com, a DIFFERENT ORIGIN. Nothing inside it can be read or
   restyled ("SecurityError: Blocked a frame with origin ..."), so everything
   here works on the iframe BOX, not its contents.

   Left alone the tool renders wider than the box it is given: the ring is
   clipped, the legend is cut off entirely and its own "View tool" button
   overlaps what is left.

   GEOMETRY. The frame is rendered at a FIXED 340x310 logical size and then
   scaled so that its width exactly matches the tile's content box. The logical
   size is fixed on purpose - the remote app re-flows itself from the frame's
   size, so it is the one variable that must never change:
     - at 300 logical width it draws "View tool" ON TOP of the legend
     - at 340 and wider it stacks donut / legend / "View tool", the only
       arrangement where the button can be dropped without losing the legend
     - shortening the frame re-orders it to donut / "View tool" / legend
   Holding 340x310 constant is also what makes the clip offsets below valid:
   they were measured against that exact size. Only --nor-scale varies, and
   js/components/nor-tile.js sets it from the tile's measured width.

   clip-path - trims the 38px of dead space above the ring, and everything from
   235px down, which is the gap between the bottom of the legend and the top of
   the tool's "View tool" button. That removes the button outright, so there is
   no mask to colour-match against the tile.

   translateY pulls the kept rows back up to the top of the box, and
   margin-bottom reclaims the layout height: transform and clip-path are both
   paint-time only, so without it the element would still claim its full 310px
   and stretch the tile past the other 1x1 tiles.

   mix-blend-mode - the tool paints an opaque WHITE background, which showed as
   a white panel inside the grey tile. Setting background-color on the iframe
   does nothing, because the remote document draws over it. multiply blends that
   white into the tile's grey (white x grey = grey) while dark text and the
   coloured slices survive unchanged.

   The replacement Launch button is a DOM node created in nor-tile.js: CSS
   cannot add elements, and CSS cannot change text in a cross-origin frame.

   Both dashboard tiles that embed this application share the rule. They were
   each measured at 340x310 and lay out identically - chart region 20-240,
   "View tool" 248-290 - so one set of numbers covers both:
     167503  New Order Request
     260103  As-a-Service Quote on Behalf
   ========================================================= */
#iframeWidgetId_167503,
#iframeWidgetId_260103 {
  --nor-scale: 0.8835; /* 300px tile content box / 340 logical */
  width: 340px !important;
  height: 310px !important;
  /* .widget_total.iframeWidget iframe sets flex:1 1 auto, which would grow the
     frame straight past the height above. */
  flex: 0 0 auto !important;
  transform: scale(var(--nor-scale)) translateY(-38px);
  transform-origin: left top;
  clip-path: inset(38px 0 75px 0); /* keep logical rows 38 -> 235 */
  margin: 16px 24px calc(197px * var(--nor-scale) - 310px) !important;
  border: 0 !important;
  mix-blend-mode: multiply; /* blend the tool's white into the tile */
}

/* The replacement for the tool's removed "View tool" is built in nor-tile.js
   from the dashboard's OWN button markup - div.single-go > span.btn_indicator >
   a.search_right.btn_inner > span.btn_label - so it inherits the theme's Launch
   styling wholesale: 36px pill, 16px/600 HPE Graphik label, launch.svg icon,
   and the hover/active fills. Nothing about the button is restated here, which
   is what keeps it identical to every other tile's Launch instead of a
   look-alike that drifts the next time those tokens change.

   The one thing that does not come for free is vertical placement. The other
   tiles bottom-align their Launch because their body grows to fill the tile;
   the chart here is a fixed-size iframe, so the row has to be pushed down
   explicitly. The selector has to out-specify
   `#dashboard_grid .widget_total.desktopGridster .single-go`, which sets
   margin-top:24px - hence the id in the selector. */
#dashboard_grid .widget_total.iframeWidget > .single-go.nor-go {
  margin-top: auto;
}

.large-button {
  height: unset !important;
  min-height: unset !important;
  white-space: unset !important;
  word-wrap: unset !important;
  width: unset !important;
  text-align: center !important;
  padding: 9px 24px !important;
  border-radius: 9999px !important;
}

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus,
textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, select:-webkit-autofill,
select:-webkit-autofill:hover, select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
}

input:focus, input:active, select:focus, select:active, a:focus, a:active, button:active, button:focus, table th, table td {
  outline: 0;
}

.table thead {
  background-color: #F7F7F7;
}

html body.Settings {
  padding-right: 0 !important;
}

/* radio button styling */
/* The radio-container */
#searchResultsTable td:first-child, #searchResultsTableCustomer td:first-child, #searchResultsTableCustomer td:first-child,
#searchResultsTableVendor td:first-child {
  position: relative;
  padding: 17px 12px 17px 40px;
}

/* Hide the browser's default radio button */
#searchResultsTable input[type=radio], #searchResultsTableCustomer input[type=radio], #searchResultsTableVendor input[type=radio],
.prpRadioGroup input[type=radio] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  top: 17px;
  left: 8px;
  z-index: 9;
}

.reference-mark {
  position: absolute !important;
}

.btn:active:focus, .btn:focus .btn.focus {
  box-shadow: none !important;
}

input[type=search]::-webkit-search-cancel-button {
  display: none;
}

/* Create a custom radio button */
.prpRadioButton {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 24px;
  width: 24px;
  border: 1px solid #B1B9Be;
  border-radius: 50%;
  background-color: white !important;
}

/* Showing green border circle when checked */
input[type=radio]:checked ~ .prpRadioButton {
  border: 6px solid var(--hpe-color-decorative-brand);
  background-color: #fff !important;
}

/* Create the indicator (the dot/circle - hidden when not checked) 
.prpRadioButton:after {
  content: "";
  position: absolute;
  display: none;
}
*/
.portlet-journal-content .portlet .portlet-header {
  margin-bottom: 0px;
  height: 0px;
}

/* Show the indicator (dot/circle) when checked 
input[type="radio"]:checked ~ .prpRadioButton:after {
  display: block;
}*/
/* Style the indicator (dot/circle) 
.prpRadioButton:after {
 	top:50%;
 	left:50%;
 	transform:translate(-50%, -50%);
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--hpe-color-decorative-brand);
}*/
#searchResultsTable .prpRadioButton, #searchResultsTableCustomer .prpRadioButton, #searchResultsTableVendor .prpRadioButton {
  top: 15px;
  left: 8px;
}

.prpRadioGroup {
  display: block;
  position: relative;
  padding: 6px 12px 6px 38px;
}

.prpRadioGroup .prpRadioButton {
  top: 5px;
  left: 0;
}

.prpRadioGroup label {
  cursor: pointer;
  font-weight: normal;
}

/* Modal window */
.prpModal.modal {
  font-family: HPE Graphik;
  margin: 0px auto;
  padding: 24px !important;
  background: #fff;
  max-width: 900px;
  max-height: 100vh;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  z-index: 1099;
  width: 100%;
  height: max-content;
  overflow: hidden;
  border-radius: 12px;
}

.prpModal .modal-body {
  padding: 0;
  font-family: HPE Graphik;
  font-size: 16px;
  color: #292D3A;
  text-align: left;
  line-height: 20px;
  font-style: normal;
  max-height: 72vh;
  overflow: auto;
  border: 0 !important;
}

.prpModal .modal-header {
  padding: 0;
  border: 0;
}

.prpModal .modal-header h2 {
  font-family: HPE Graphik;
  font-size: 48px;
  color: #333;
  line-height: 54px;
  font-weight: 300;
  margin: 0 0 24px;
}

.prpModal button.close {
  position: absolute;
  top: 24px;
  right: 24px;
  opacity: 0.5;
}

.prpModal .modalFooter {
  padding: 24px 0 0;
  border: 0 !important;
}

.prpModal .modalFooter button {
  margin-right: 24px !important;
}

.prpModal .modalFooter .footerButtons-right-container {
  float: right;
}

.prpModal table tbody tr.odd, .prpModal table tbody tr:hover {
  background: transparent !important;
}

.prpModal button.close {
  outline: 0px;
}

.prpModal table.no-footer {
  border-bottom: 0;
}

.prpModal .modal-dialog {
  margin: 0;
  width: 100%;
  position: relative;
}

.prpModal .modal-content {
  box-shadow: none;
  border: 0;
  scrollbar-color: #8b8b8b #f5f5f5 !important;
}

.prpModal .modal-footer {
  text-align: left;
}

.prpModal .modal-heading h3 {
  font-size: 24px;
  font-weight: 600;
  line-height: 28px;
  color: #292D3A;
}

.prpModal .modal-heading small {
  font-family: HPE Graphik;
  font-size: 20px;
  Color: #67686E;
  text-align: left;
  line-height: 26px;
  font-weight: 400;
  margin-bottom: 40px;
}

.prpModal .modal-heading {
  margin-bottom: 40px;
}

/* Radioninput css */
input[type=radio].prpRadioInput:checked, input[type=radio].prpRadioInput:not(:checked) {
  position: absolute;
  left: -9999px;
}

input[type=radio].prpRadioInput:checked + label, input[type=radio].prpRadioInput:not(:checked) + label,
input[type=radio].prpRadioInput:checked + .radioButtonLabel, input[type=radio].prpRadioInput:not(:checked) + .radioButtonLabel {
  position: relative;
  padding-left: 28px;
  cursor: pointer;
  line-height: 24px;
  display: inline-block;
  color: #666;
  font-weight: 300;
}

input[type=radio].prpRadioInput:checked + label:before, input[type=radio].prpRadioInput:not(:checked) + label:before,
input[type=radio].prpRadioInput:checked + .radioButtonLabel:before, input[type=radio].prpRadioInput:not(:checked) + .radioButtonLabel:before {
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  width: 24px;
  height: 24px;
  border: 2px solid #333;
  border-radius: 100%;
  background: #fff;
}

input[type=radio].prpRadioInput:checked + label:after, input[type=radio].prpRadioInput:not(:checked) + label:after,
input[type=radio].prpRadioInput:checked + .radioButtonLabel:after, input[type=radio].prpRadioInput:not(:checked) + .radioButtonLabel:after {
  content: "";
  width: 9px;
  height: 9px;
  background: var(--hpe-color-decorative-brand);
  position: absolute;
  top: 8px;
  left: 8px;
  border-radius: 100%;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

input[type=radio].prpRadioInput:not(:checked) + label:after,
input[type=radio].prpRadioInput:not(:checked) + .radioButtonLabel:after {
  opacity: 0;
  -webkit-transform: scale(0);
  transform: scale(0);
}

input[type=radio].prpRadioInput:checked + label:after,
input[type=radio].prpRadioInput:checked + .radioButtonLabel:after {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}

input[type=radio].prpRadioInput:checked + label:before:hover, input[type=radio].prpRadioInput:not(:checked) + label:before:hover,
input[type=radio].prpRadioInput:checked + .radioButtonLabel:before:hover, input[type=radio].prpRadioInput:not(:checked) + .radioButtonLabel:before:hover {
  border-color: #333;
}

input#customer + label, input#supplier + label, input#partner + label, input#carrier + label,
input#customer + label, input#supplier + .radioButtonLabel, input#partner + label, input#carrier + .radioButtonLabel {
  padding-bottom: 10px;
  padding-left: 30px;
}

/* nav tabs */
ul.prpNavTabs.nav.nav-tabs {
  border-bottom: 0;
  margin-bottom: 12px;
}

ul.prpNavTabs li {
  margin-right: 30px;
}

ul.prpNavTabs li:first-child {
  padding-left: 0;
}

ul.prpNavTabs.nav.nav-tabs li a {
  padding: 2px 0px 24px;
}

ul.prpNavTabs li a {
  font-family: HPE Graphik;
  font-size: 19px;
  font-weight: 600;
  line-height: 24px;
  color: #666;
  padding: 10px 12px;
  border: 0;
}

ul.prpNavTabs.nav.nav-tabs li a:hover {
  background-color: transparent;
  border: 0;
}

ul.prpNavTabs.nav.nav-tabs li.active a, ul.prpNavTabs.nav.nav-tabs li.active a:hover {
  border-bottom: 4px solid var(--hpe-color-decorative-brand);
  margin-bottom: -1px;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  color: #333;
}

/* datatables */
.customDataTableContainer {
  /* padding: Figma "dataCell/default/medium" (Partner Portal node 18011-6128) */
  /* Manage Users & Tasks tables: keep column headers on a single line and
     render the sort arrow to the right of the label instead of below it */
  /* Reserve space for the sort arrow so the header width never shrinks/jumps */
}
.customDataTableContainer .dataTables_wrapper {
  width: 100%;
}
.customDataTableContainer .table-responsive:has(#manageUserTable_filter input),
.customDataTableContainer .table-responsive:has(#manageUserTable2_filter input),
.customDataTableContainer .table-responsive:has(#myTable_filter input),
.customDataTableContainer .table-responsive:has(#processRequest_filter input),
.customDataTableContainer .table-responsive:has(#newCapReqTable_filter input),
.customDataTableContainer .table-responsive:has(#approvedCapReqTable_filter input),
.customDataTableContainer .table-responsive:has(#declinedCapReqTable_filter input),
.customDataTableContainer .table-responsive:has(#canceledCapReqTable_filter input),
.customDataTableContainer .table-responsive:has(#inactivatedCapReqTable_filter input),
.customDataTableContainer .table-responsive:has(.dataTables_filter input) {
  box-sizing: border-box;
  width: calc(100% + 8px);
  margin: -4px;
  padding: 4px;
}
.customDataTableContainer table.dataTable {
  border-bottom: 1px solid #D1D1D1 !important;
}
.customDataTableContainer table.dataTable thead, .customDataTableContainer table.dataTable thead th {
  background-color: transparent;
}
.customDataTableContainer .dataTables_wrapper .dataTables_filter input, .customDataTableContainer .dataTables_wrapper .dataTables_filter label {
  margin: 0;
  width: 100%;
}
.customDataTableContainer .dataTables_wrapper .dataTables_filter {
  margin-bottom: 12px;
  width: 50%;
  float: left;
  text-align: left;
  position: relative;
}
.customDataTableContainer .dataTables_wrapper .dataTables_filter input {
  font-family: HPE Graphik;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 24px;
  font-weight: 400;
  color: #000;
  margin: 0 !important;
  border: 1px solid #B1B9BE;
  border-radius: 8px;
  padding: 0 40px 0 10px;
  height: 36px;
}
.customDataTableContainer .dataTables_wrapper #manageUserTable_filter input:focus,
.customDataTableContainer .dataTables_wrapper #manageUserTable2_filter input:focus,
.customDataTableContainer .dataTables_wrapper #myTable_filter input:focus,
.customDataTableContainer .dataTables_wrapper #processRequest_filter input:focus,
.customDataTableContainer .dataTables_wrapper #newCapReqTable_filter input:focus,
.customDataTableContainer .dataTables_wrapper #approvedCapReqTable_filter input:focus,
.customDataTableContainer .dataTables_wrapper #declinedCapReqTable_filter input:focus,
.customDataTableContainer .dataTables_wrapper #canceledCapReqTable_filter input:focus,
.customDataTableContainer .dataTables_wrapper #inactivatedCapReqTable_filter input:focus,
.customDataTableContainer .dataTables_wrapper .dataTables_filter input:focus {
  outline: 0;
  box-shadow: 0 0 0 2px #FFF, 0 0 0 4px #292D3A;
}
.customDataTableContainer .dataTables_filter input::placeholder {
  color: #606A70;
}
.customDataTableContainer .dataTables_wrapper .dataTables_filter .glyphicon.glyphicon-search {
  position: absolute;
  color: #3E4550;
  font-size: 14px;
  top: 4px !important;
  cursor: pointer;
  right: 10px !important;
}
.customDataTableContainer .dataTables_wrapper .dataTables_length {
  float: right;
}
.customDataTableContainer .dataTables_length label select {
  border: 1px solid #B1B9BE;
  padding: 0 30px 0 10px;
  margin-left: 5px;
  color: #292D3A;
  font-family: HPE Graphik;
  font-size: 16px;
  border-radius: 8px;
  font-weight: 400;
  background-image: url(../images/icons/carot-down-new.svg);
  background-position: center right 10px;
  background-repeat: no-repeat;
  background-size: 10px;
  background-color: transparent;
  width: 70px;
  height: 40px;
}
.customDataTableContainer .user-location-filter-select {
  background-image: url(../images/icons/Up.svg);
  background-position: center right 10px;
  background-repeat: no-repeat;
  background-size: 14px;
  background-color: transparent;
  height: 36px;
  width: 100px;
  border: 1px solid #B1B9BE;
  border-radius: 8px;
  padding: 0 30px 0 10px;
  color: #292D3A;
  font-family: HPE Graphik;
  font-size: 16px;
  font-weight: 400;
}
.customDataTableContainer .dataTables_length label select:focus, .customDataTableContainer .dataTable tbody td label:focus, .customDataTableContainer user-location-filter-select:focus {
  outline: 0;
}
.customDataTableContainer .dataTables_length label, .customDataTableContainer .select-user-location-filter label {
  font-weight: 400;
  color: #3E4550;
  font-family: HPE Graphik;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 24px;
  margin: 0;
}
.customDataTableContainer .select-user-location-filter label {
  margin-right: 4px;
}
.manage-user-container #activeUser > .customDataTableContainer .dataTables_wrapper, .manage-user-container #inactiveUser > .customDataTableContainer .dataTables_wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: 22px;
}
.manage-user-container #activeUser > .customDataTableContainer .dataTables_wrapper > .dataTables_filter, .manage-user-container #inactiveUser > .customDataTableContainer .dataTables_wrapper > .dataTables_filter {
  order: 1;
  flex: 1 1 50%;
  max-width: 50%;
}
.manage-user-container #activeUser > .customDataTableContainer .dataTables_wrapper > .select-user-location-filter, .manage-user-container #inactiveUser > .customDataTableContainer .dataTables_wrapper > .select-user-location-filter {
  order: 2;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  float: none !important;
  width: auto !important;
  margin-left: auto !important;
  margin-bottom: 12px;
}
.manage-user-container #activeUser > .customDataTableContainer .dataTables_wrapper > .select-user-location-filter label, .manage-user-container #inactiveUser > .customDataTableContainer .dataTables_wrapper > .select-user-location-filter label {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  margin: 0 !important;
  white-space: nowrap !important;
}
.manage-user-container #activeUser > .customDataTableContainer .dataTables_wrapper > .select-user-location-filter .user-location-filter-select, .manage-user-container #inactiveUser > .customDataTableContainer .dataTables_wrapper > .select-user-location-filter .user-location-filter-select {
  width: 150px !important;
  margin: 0 !important;
}
.manage-user-container #activeUser > .customDataTableContainer .dataTables_wrapper > table.dataTable, .manage-user-container #inactiveUser > .customDataTableContainer .dataTables_wrapper > table.dataTable {
  order: 3;
  flex: 0 0 100%;
}
.manage-user-container #activeUser > .customDataTableContainer .dataTables_wrapper > .dataTables_length, .manage-user-container #inactiveUser > .customDataTableContainer .dataTables_wrapper > .dataTables_length {
  order: 5;
  float: none !important;
  width: auto !important;
  margin: 24px 0 0 auto !important;
}
.manage-user-container #activeUser > .customDataTableContainer .dataTableFooter.dataTableCustomFooter, .manage-user-container #inactiveUser > .customDataTableContainer .dataTableFooter.dataTableCustomFooter {
  order: 4;
  display: flex !important;
  float: none !important;
  flex: 1 1 100% !important;
  width: 100% !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  margin-top: 24px;
}
.manage-user-container #activeUser > .customDataTableContainer .dataTableFooter .dataTableFooterLeft, .manage-user-container #inactiveUser > .customDataTableContainer .dataTableFooter .dataTableFooterLeft {
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
  min-width: 0;
}
.manage-user-container #activeUser > .customDataTableContainer .dataTableFooter .dataTableFooterRight, .manage-user-container #inactiveUser > .customDataTableContainer .dataTableFooter .dataTableFooterRight {
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
  margin-left: auto !important;
}
.manage-user-container #activeUser > .customDataTableContainer .dataTableFooter .dataTables_length, .manage-user-container #activeUser > .customDataTableContainer .dataTableFooter .dataTables_paginate, .manage-user-container #inactiveUser > .customDataTableContainer .dataTableFooter .dataTables_length, .manage-user-container #inactiveUser > .customDataTableContainer .dataTableFooter .dataTables_paginate {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
.manage-user-container #activeUser > .customDataTableContainer .dataTableFooter .footerButtons, .manage-user-container #inactiveUser > .customDataTableContainer .dataTableFooter .footerButtons {
  position: static !important;
  bottom: auto !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
}
.manage-user-container #activeUser > .customDataTableContainer .dataTableFooter .footerButtons form, .manage-user-container #inactiveUser > .customDataTableContainer .dataTableFooter .footerButtons form {
  margin: 0 !important;
}
.manage-user-container #activeUser > .customDataTableContainer .dataTableFooter .footerButtons button, .manage-user-container #inactiveUser > .customDataTableContainer .dataTableFooter .footerButtons button {
  margin: 0 !important;
}
.customDataTableContainer .dataTable tbody tr, .customDataTableContainer .dataTable tbody tr td.sorting_1 {
  background: transparent !important;
}
.customDataTableContainer .dataTable thead tr th {
  border-bottom: 1px solid #B1B9BE !important;
}
.customDataTableContainer .dataTable tbody td {
  border-bottom: 1px solid #D4D8DB !important;
}
.customDataTableContainer .dataTable thead th {
  color: #292D3A;
  font-family: HPE Graphik;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 0;
  line-height: 24px;
  height: 24px;
  padding: 12px 12px 11px 12px;
  vertical-align: middle;
  text-align: left !important;
}
.customDataTableContainer .dataTable tbody td {
  color: #3E4550;
  font-family: HPE Graphik;
  font-size: 16px !important;
  font-weight: 400 !important;
  letter-spacing: 0;
  line-height: 24px;
  height: 24px;
  padding: 12px 12px 11px 12px;
  vertical-align: middle;
  text-align: left !important;
}
.customDataTableContainer .dataTable tbody td.dataTables_empty {
  text-align: center !important;
}
.customDataTableContainer .dataTable tbody td label {
  font-weight: 400;
}
.customDataTableContainer .dataTable tbody td a {
  color: #006750;
  text-decoration: underline;
  font-weight: 600;
}
.customDataTableContainer .checkboxContainer {
  margin: 0;
  padding: 0;
  height: 24px !important;
  width: 24px;
}
.customDataTableContainer .checkboxContainer span.checkmark {
  top: 0 !important;
  left: 50% !important;
  transform: translate(-50%, 0);
}
.customDataTableContainer .checkboxContainer input {
  display: none;
}
.customDataTableContainer .dataTables_wrapper .dataTables_info {
  color: #3E4550;
  font-family: HPE Graphik;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 20px;
  padding: 0;
  margin-top: 4px;
}
.customDataTableContainer .dataTables_wrapper .dataTables_paginate {
  padding: 0;
  color: #292D3A;
}
.customDataTableContainer .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background-color: rgba(0, 0, 0, 0.04) !important;
}
.customDataTableContainer .dataTables_wrapper .dataTables_paginate .paginate_button, .customDataTableContainer .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  color: #292D3A !important;
  font-family: HPE Graphik;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 20px;
  text-align: center;
  border: 0 !important;
  padding: 0;
  background: transparent;
  height: 28px;
  width: 30px;
}
.customDataTableContainer .dataTables_wrapper .dataTables_paginate .paginate_button.current, .customDataTableContainer .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  border: 1px solid #074738 !important;
  border-radius: 50%;
  background: transparent;
  padding: 3px;
}
.customDataTableContainer .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.0509803922);
  padding: 3px;
}
.customDataTableContainer .dataTables_wrapper .dataTables_paginate .paginate_button.previous, .customDataTableContainer .dataTables_wrapper .dataTables_paginate .paginate_button.next {
  vertical-align: baseline;
}
.customDataTableContainer .dataTables_wrapper .dataTables_paginate .paginate_button.disabled img {
  filter: grayscale(100%);
  opacity: 0.4;
}
.customDataTableContainer .dataTableCustomFooter {
  display: inline-block;
  float: right;
}
.customDataTableContainer .footerButtons {
  bottom: -6px;
}
.customDataTableContainer .footerButtons button {
  margin-right: 24px;
}
.customDataTableContainer .dataTable tbody td a {
  color: #006750;
}
.customDataTableContainer .dataTable thead .sorting_desc::after {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  background-image: url(../images/icons/descending.svg);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-left: 4px;
}
.customDataTableContainer .dataTable thead .sorting_asc::after {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  background-image: url(../images/icons/ascending.svg);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-left: 4px;
}
.customDataTableContainer .dataTables_scrollBody .dataTable thead .sorting_desc::after {
  content: "";
  display: none;
  background-image: none;
}
.customDataTableContainer .dataTables_scrollBody .dataTable thead .sorting_asc::after {
  content: "";
  display: none;
  background-image: none;
}
.customDataTableContainer .dataTable thead .sorting::after {
  content: "";
}
.customDataTableContainer .dataTable thead th.sorting_asc, .customDataTableContainer .dataTable thead th.sorting_desc {
  /*font-weight: 600!important;
  color: #333;*/
}
.customDataTableContainer .dataTable#manageUserList_active > thead > tr > th,
.customDataTableContainer .dataTable#manageNewRequestTable > thead > tr > th,
.customDataTableContainer .dataTable#manageProcessedRequestTable > thead > tr > th,
.customDataTableContainer .dataTable#myTable > thead > tr > th,
.customDataTableContainer .dataTable#newCapReqTable > thead > tr > th,
.customDataTableContainer .dataTable#approvedCapReqTable > thead > tr > th,
.customDataTableContainer .dataTable#declinedCapReqTable > thead > tr > th,
.customDataTableContainer .dataTable#canceledCapReqTable > thead > tr > th,
.customDataTableContainer .dataTable#inactivatedCapReqTable > thead > tr > th {
  white-space: nowrap;
}
.customDataTableContainer .dataTable#manageUserList_active > thead > tr > th.sorting::after,
.customDataTableContainer .dataTable#manageNewRequestTable > thead > tr > th.sorting::after,
.customDataTableContainer .dataTable#manageProcessedRequestTable > thead > tr > th.sorting::after,
.customDataTableContainer .dataTable#myTable > thead > tr > th.sorting::after,
.customDataTableContainer .dataTable#newCapReqTable > thead > tr > th.sorting::after,
.customDataTableContainer .dataTable#approvedCapReqTable > thead > tr > th.sorting::after,
.customDataTableContainer .dataTable#declinedCapReqTable > thead > tr > th.sorting::after,
.customDataTableContainer .dataTable#canceledCapReqTable > thead > tr > th.sorting::after,
.customDataTableContainer .dataTable#inactivatedCapReqTable > thead > tr > th.sorting::after,
.customDataTableContainer .dataTable#myCurrentRelationsTable > thead > tr > th.sorting::after {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: middle;
  margin-left: 4px;
}
.customDataTableContainer .dataTable#myCurrentRelationsTable > thead > tr > th.sorting::after {
  background-image: url(../images/icons/unsorted.svg);
  background-repeat: no-repeat;
  background-size: contain;
}
.customDataTableContainer .customDataTableContainer .dataTable tbody tr:hover td {
  background-color: #f5f5f5 !important;
}
.customDataTableContainer .dataTables_wrapper .dataTables_paginate .paginate_button:active {
  box-shadow: none;
}
.customDataTableContainer .dataTables_wrapper .dataTables_paginate .paginate_button:focus {
  outline: 0;
}
.customDataTableContainer td.addendum {
  background-image: url(../images/icons/nav_down.png) !important;
  background-repeat: no-repeat !important;
  background-size: 14px !important;
  background-position: center right 10px;
}
.customDataTableContainer tr.shown td.addendum {
  background-image: url(../images/icons/nav_Up.png) !important;
  background-repeat: no-repeat !important;
  background-size: 14px !important;
  background-position: center right 10px;
}
.customDataTableContainer .footerButtons .tertiaryButton[disabled]:hover {
  box-shadow: none;
}
.customDataTableContainer .footerButtons.removeButtonPosition {
  position: relative;
}
.customDataTableContainer .footerButtons.removeButtonPosition {
  bottom: 8px;
}

.prpLoadingIcon {
  margin: 2rem auto auto;
  width: 20rem;
}

label.switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 24px;
  font-weight: normal;
  color: #666666;
  font-family: HPE Graphik;
  font-size: 14px;
  line-height: 20px;
  display: block;
  padding: 0 12px;
  margin: 0 auto;
}

.switch input {
  display: none;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #7D8A92;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  top: 0.9px;
  left: 1px;
  bottom: 0px;
  right: 0px;
  background-color: white;
  transition: 0.4s;
}

.switch input:checked + .slider {
  background-color: #068667;
}

.switch input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

.switch input:checked + .slider:before {
  -webkit-transform: translateX(24px);
  -ms-transform: translateX(24px);
  transform: translateX(24px);
  border: 2px solid #068667;
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
  border: 2px solid #7D8A92;
}

.switch input:disabled ~ .slider.round:before {
  border: 2px solid #D7D7D7;
}

/* Make hidden toggle checkbox inputs focusable for Order Status Visibility */
.orderReturnsPart .orderTables label.switch input[type=checkbox],
.orderReturnsPart .notificationTables label.switch input[type=checkbox] {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}

/* Show black focus highlight with a white gap for all Order Status Visibility toggles */
.orderReturnsPart .orderTables label.switch:focus-within .slider.round,
.orderReturnsPart .notificationTables label.switch:focus-within .slider.round,
.orderReturnsPart .orderTables label.switch input[type=checkbox]:focus-visible + .slider.round,
.orderReturnsPart .notificationTables label.switch input[type=checkbox]:focus-visible + .slider.round {
  outline: none;
  border-color: transparent;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #000000;
}

/* 352084 - User Menu UX issues */
a.notificationEvent {
  color: #333333;
  text-decoration: underline;
  font-size: 18px;
  font-family: "HPE Graphik";
  font-weight: normal;
  line-height: 24px;
}

#portlet_UserMenuNotificationPortlet span.col-md-8 {
  font-family: "HPE Graphik";
  font-weight: normal;
  line-height: 20px;
  margin-top: 5px;
  color: #666666;
  padding-left: 0px !important;
}

#portlet_UserMenuNotificationPortlet span.col-md-4.notification-category {
  padding-right: 0px;
  font-family: "HPE Graphik";
  font-weight: normal;
  margin-top: 5px;
  color: #666666;
}

a.notificationEvent:hover {
  text-decoration: underline;
  color: #333333;
}

@media (min-width: 992px) {
  #portlet_UserMenuNotificationPortlet .col-md-1 {
    width: 11.33333%;
  }
  #portlet_UserMenuNotificationPortlet .col-md-11 {
    width: 88.66667%;
  }
}
#notificationArea.dropdown-menu .divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}

#portlet_UserMenuNotificationPortlet span.panel-notifications-count {
  font-weight: 600;
}

header#banner #heading .headerIcons ul.nav-icons-list li.profile-img .dropdown-menu .userMenu ul li.headerTitle .leftOne img {
  height: 24px;
  width: 24px;
  margin-right: 10px;
  float: left;
  margin-top: 3px;
}

header#banner #heading .headerIcons ul.nav-icons-list li.profile-img .dropdown-menu .userMenu ul li.headerTitle .rightOne img {
  height: 24px;
  width: 24px;
}

header#banner #heading .headerIcons ul.nav-icons-list li.profile-img .dropdown-menu .systemMenu ul li.settings img {
  height: 24px;
  width: 24px;
  margin-right: 5px;
}

header#banner #heading .headerIcons ul.nav-icons-list li.profile-img .dropdown-menu .systemMenu ul li.logOut img {
  height: 24px;
  width: 24px;
  margin-right: 5px;
}

.userMenuShowAll:hover {
  box-shadow: 0 0 0 2px #333333;
}

header#banner #heading .headerIcons ul.nav-icons-list li .userMenuCancelButton img {
  height: 12px;
  width: 12px;
  max-width: none;
}

header#banner #heading .headerIcons ul.nav-icons-list > li > a#closeIconImg img {
  height: 24px;
  width: 24px;
}

header#banner #heading .headerIcons ul.nav-icons-list > li > a {
  cursor: pointer;
}

/* 352378 - User Menu Notification count overlaps text */
header#banner #heading .headerIcons ul.nav-icons-list li.profile-img .dropdown-menu .userMenu ul li.headerTitle .leftOne {
  float: left;
  width: 90%;
}

header#banner #heading .headerIcons ul.nav-icons-list li.profile-img .dropdown-menu .userMenu ul li.headerTitle .rightOne {
  float: right;
  width: 10%;
}

.widget_total.iframeWidget iframe {
  border: 0;
  /* Fill the remaining tile height instead of a fixed 338px. The tile is a
     flex column (see .widget_total.iframeWidget in _common.scss), so the
     iframe stretches to whatever height the tile actually has - 1x1, 1x2 or
     2x1 - which also lets the embedded tool's Launch action sit on the
     tile's bottom edge like the footer action on every other tile. */
  flex: 1 1 auto;
  height: auto !important;
  min-height: 0;
  /* MUST stay identical to the .widget_total.iframeWidget iframe block in
     _common.scss. This file is imported AFTER _common.scss, so at equal
     specificity these declarations win: when this rule still said
     `width: 100%` it silently overrode the calc() there, and the iframe
     rendered full-tile-width while also carrying the 24px left margin -
     pushing the embedded tool 24px past the tile's right edge.
     The 48px is the tile's 24px gutter on both sides. */
  box-sizing: border-box;
  width: calc(100% - 48px);
  margin: 16px 24px 0;
}

/* MHMG R2 US 5958 css for global placeholder starts */
input::placeholder {
  color: #606A70;
}

input::-ms-input-placeholder {
  color: #606A70;
}

input::-ms-input-placeholder {
  color: #606A70;
}

#embedded-portlet-submit-btn {
  display: none;
}

/* MHMG R2 US 5958 css for global placeholder ends */
/*navbar-nav items*/
ul.navbar-blank.navbar-nav.navbar-site {
  align-items: center;
  margin-bottom: 21px;
}

/*PRPDXP-5881 : Hidden permissions menu*/
form#_com_liferay_exportimport_web_portlet_ExportImportPortlet_publishPagesFm {
  padding-bottom: 75px;
}

/*Modal Title center*/
.modal-title {
  text-align: center !important;
}

.portlet-content .autofit-float.autofit-row.portlet-header {
  margin-bottom: 0px;
}

.dropdown-menu .divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}

.component-action.portlet-options {
  color: #777 !important;
}

/* PRPDXP-8119 - Starts here */
/* Short viewports: let the content scroll inside the card instead of clamping
   it to a fixed height, which made the footer overlap the body. */
@media (max-height: 520px) {
  .prpModal .modal-content {
    max-height: calc(100vh - 140px) !important;
    overflow-y: auto;
  }
}
/* PRPDXP-8119 - Ends here */
/* inject:imports */
/* screen resolution above 1420px only */
@media only screen and (min-width: 1600px) {
  header#banner #heading {
    margin: 0 auto;
  }
  .bodyContent {
    margin: 0 auto;
    padding-top: 64px;
  }
  .home-bg {
    padding: 0px !important;
  }
  .home-bg #content {
    padding-top: 0px !important;
  }
}
.has-control-menu #wrapper {
  margin-top: 48px;
}

/* screen resolution above 768px only */
@media only screen and (min-width: 768px) {
  .has-control-menu #wrapper {
    margin-top: 0px;
    padding-left: 0;
  }
  .has-control-menu #wrapper {
    margin-top: 0px;
    padding-left: 0;
  }
}
@media screen and (max-width: 991px) {
  .row [class*=col-md] {
    padding: 0px;
    margin-bottom: 24px;
  }
  .row [class*=col-md]:first-child {
    padding: 0px;
  }
  .row [class*=col-md]:last-child {
    padding: 0px;
    margin-bottom: 0px;
  }
}
@media screen and (max-width: 767px) {
  .row [class*=col-sm] {
    padding: 0px;
    margin-bottom: 24px;
  }
  .row [class*=col-sm]:first-child {
    padding: 0px;
  }
  .row [class*=col-sm]:last-child {
    padding: 0px;
    margin-bottom: 0px;
  }
}
/* endinject */
/* Footer */
/* `margin-right: 10px` stopped the last link 10px short of the container's
 * right edge, so the footer never lined up with the header, the horizontal nav
 * or the body content - they all share that edge. */
footer .footerContainer .footerText .footerLinks {
  margin-right: 0;
}

/* The copyright and the link row were both `nowrap`, as is every link inside
 * them, while the stacked layout only started at 900px. Between 901px and
 * ~1150px the pair needed more width than the container had and ran past its
 * right edge - 92px of overflow at 1024px. Letting the two blocks wrap makes
 * the links drop onto their own line as soon as they stop fitting, which also
 * holds when a translation lengthens the row. */
footer .footerContainer .footerText {
  flex-wrap: wrap;
  row-gap: 12px;
}

footer .footerContainer .footerText .footerLinks ul {
  flex-wrap: wrap;
}

@media screen and (max-width: 1024px) {
  footer .footerContainer {
    padding: 0 24px;
  }
}
@media only screen and (min-width: 1600px) {
  footer .footerContainer {
    max-width: 1648px;
  }
}
@media screen and (max-width: 900px) {
  footer {
    min-height: auto;
    padding: 12px 0;
  }
  footer .footerContainer .footerText {
    flex-direction: column;
    align-items: flex-start;
  }
  footer .footerContainer .footerText .poweredBy {
    white-space: normal;
  }
  /* Spacing moves from the item margin to a real gap so it applies between
   * items only - `margin-right` was also indenting the end of every line. It
   * additionally made the rhythm lopsided: the divider carries 12px either
   * side, so a 24px item margin put 12px before each "|" and 36px after. */
  footer .footerContainer .footerText .footerLinks ul {
    flex-wrap: wrap;
    column-gap: 24px;
    row-gap: 4px;
  }
  footer .footerContainer .footerText .footerLinks ul li {
    padding-left: 0;
    margin-right: 0;
    white-space: normal;
  }
  /* Each "|" is markup inside the link it follows, so once the row wrapped every
   * line but the last ended with a dangling divider - three of the four lines at
   * 390px. The column gap above separates the links on its own. */
  footer .footerContainer .footerText .footerLinks ul li span.divider {
    display: none;
  }
}
/* Header */
#wrapper header#banner #heading .headerIcons ul.nav-icons-list > li {
  margin-left: 0;
  margin-right: 26px;
}

@media screen and (min-width: 641px) {
  span.boldFont.mobileHeader {
    display: none;
  }
}
@media screen and (max-width: 640px) {
  span.boldFont.desktopHeader, span.lightFont {
    display: none;
  }
  span.boldFont.mobileHeader {
    display: block;
  }
  #breadcrumbs {
    display: none;
  }
  header#banner #heading .headerIcons ul.nav-icons-list > li {
    margin-left: 15px;
  }
}
@media screen and (max-width: 360px) {
  #wrapper header#banner #heading .headerIcons ul.nav-icons-list > li {
    margin-right: 12px;
  }
}
/* Megamenu */
@media screen and (max-width: 1080px) {
  #sideNavBar {
    display: none;
  }
  .bodyContent #content {
    padding-left: 0;
  }
}
@media screen and (max-width: 1024px) and (min-width: 768px) {
  #headerNavBar.navbar-toggle {
    display: block;
  }
}
@media screen and (max-width: 1024px) {
  #wrapper .bodyContent #testFirstSideNaviMob {
    width: 346px;
    background-color: #425563;
    box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.5);
  }
  #wrapper .bodyContent #testFirstSideNaviMob .first-main-menu .first-main-menu-item .second-main-menu .top-spacer-item.spacer-menu-item {
    padding: 27px 0;
    cursor: default;
    border-bottom: none;
  }
  #wrapper .bodyContent #testFirstSideNaviMob .first-main-menu .first-main-menu-item .second-main-menu .spacer-menu-item {
    padding: 27px 0;
    cursor: default;
    border: none;
  }
  #wrapper .bodyContent #testFirstSideNaviMob .spacer-menu-item {
    height: 40px;
  }
  #navAccordian.mobileNav {
    position: absolute;
    z-index: 999;
  }
  div#navAccordian.mobileNav.collapse[aria-expanded=true] {
    display: block !important;
  }
  .first-main-menu-item ul[aria-expanded=true] {
    display: block;
  }
  #headerNavBar.desktopNav, .desktopNav {
    display: none;
  }
  #headerNavBar {
    top: 14px;
    left: 0px;
  }
  .navbar-toggle {
    display: block;
    border: none;
    background: transparent !important;
    height: 32px;
    margin-left: 18px;
    margin-top: 6px;
    padding-bottom: 0;
    padding-top: 0;
  }
  .navbar-toggle:hover {
    background: transparent !important;
  }
  .navbar-toggle:focus {
    outline: none;
  }
  .navbar-toggle .icon-bar {
    display: block;
    border-radius: 1px;
    width: 30px;
    height: 4px;
    background-color: #777;
    transition: all 0.2s;
  }
  .navbar-toggle .icon-bar + .icon-bar {
    margin-top: 4px;
  }
  .navbar-toggle .top-bar {
    transform: rotate(45deg);
    transform-origin: 10% 10%;
  }
  .navbar-toggle .middle-bar {
    opacity: 0;
  }
  .navbar-toggle .bottom-bar {
    transform: rotate(-45deg);
    transform-origin: 10% 90%;
  }
  .navbar-toggle.collapsed .top-bar {
    transform: rotate(0);
  }
  .navbar-toggle.collapsed .middle-bar {
    opacity: 1;
  }
  .navbar-toggle.collapsed .bottom-bar {
    transform: rotate(0);
  }
  #navAccordian.navbar-collapse {
    padding-left: 0;
    position: absolute;
    z-index: 99;
    top: 0;
  }
  .levelOnePageslayer {
    padding-top: 0 !important;
  }
  #testFirstSideNaviMob ul li.active a {
    font-weight: 600;
  }
  #testFirstSideNaviMob ul li.active .pageBox .pageIcon {
    background-position: -25px center;
  }
  #testFirstSideNaviMob ul li {
    display: table;
    width: 100%;
    height: 72px;
    line-height: 75px;
  }
  #testFirstSideNaviMob ul li a {
    color: #FFFFFF;
    font-family: HPE Graphik Light;
    font-size: 19px;
    font-weight: 300;
    line-height: 24px;
    text-decoration: none;
    vertical-align: middle;
    color: white;
    word-break: break-word;
    cursor: pointer;
    vertical-align: middle;
    line-height: 1.5;
    display: inline-block;
    width: -webkit-fill-available;
  }
  #testFirstSideNaviMob ul li .pageBox {
    position: relative;
    left: 14px;
    display: flex;
    margin-right: 26px;
  }
  #testFirstSideNaviMob ul li .pageBox .pageIcon {
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-size: 310%;
    display: block;
    float: left;
    margin-right: 24px;
    background-position: 0px center;
    position: absolute;
    top: 50%;
    margin-top: -12px;
    margin-left: 14px;
  }
  #testFirstSideNaviMob ul li .pageBox .pageTitle, #testFirstSideNaviMob ul.testSecondSideNavi li a {
    overflow: hidden;
    display: block;
    padding-left: 48px;
    margin-left: 14px;
    padding-right: 10px;
  }
  #testFirstSideNaviMob ul.testSecondSideNavi li ul li a {
    margin-left: 0px;
  }
  .mobHeaderdisabled {
    cursor: default;
    font-weight: bold !important;
    pointer-events: none;
  }
  #testFirstSideNaviMob ul li .pageBox .firstLevelExpandDown {
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -12px;
    opacity: 0.5;
  }
  #testFirstSideNaviMob ul.testSecondSideNavi li {
    padding: 0px;
    display: block;
    height: auto;
  }
  ul.testSecondSideNavi {
    width: 346px;
    background-color: #666;
  }
  ul.testSecondSideNaviMob li {
    display: block;
    cursor: pointer;
    height: 48px;
    padding: 12px 25px 12px 75px;
  }
  #testFirstSideNaviMob ul.testSecondSideNavi > li > a {
    padding: 15px 25px 16px 46px;
    position: relative;
    margin-right: 26px;
    left: 14px;
  }
  #testFirstSideNaviMob ul.testSecondSideNavi > li > a .secondLevelExpandDown {
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -12px;
    padding-left: 10px;
    opacity: 0.5;
  }
  #testSecondSideNaviMob ul li ul li.lineSeparator {
    border-bottom: 1px solid #d8d8d8;
  }
  #testSecondSideNaviMob ul li ul {
    display: block;
  }
  #testSecondSideNaviMob ul li ul li.active {
    background-color: #565656;
  }
  ul.testSecondSideNaviMob li a {
    color: #FFFFFF;
    font-family: HPE Graphik Light;
    font-size: 19px;
    font-weight: 300;
    line-height: 24px;
    text-decoration: none;
    display: block;
    color: white;
    height: 24px;
  }
  #testFirstSideNaviMob ul {
    margin: 0;
    padding: 0;
  }
  ul.testSideNaviMob li {
    padding: 0px;
    display: block;
  }
  ul.testSideNaviMob {
    width: 346px;
    background-color: #fff;
  }
  ul.testSideNaviMob li {
    display: block;
    padding: 7px 24px;
    cursor: pointer;
  }
  #testSideNaviMob ul li ul li ul {
    display: block;
  }
  ul.testSideNaviMob .pageImg {
    display: none;
  }
  ul.testSideNaviMob .pageTitle {
    padding: 12px 25px 12px 60px;
    border-top: 1px solid #ccc;
    display: block;
  }
  ul.testSideNaviMob .pageText {
    margin-left: 14px;
  }
  ul.testSideNaviMob .pageText .pageTitle {
    color: #333333;
    font-family: HPE Graphik Light;
    font-size: 24px;
    font-weight: 300;
    line-height: 30px;
  }
  #testFirstSideNaviMob ul.testSideNaviMob li a {
    color: #000;
    padding: 0;
    font-size: 19px;
    font-weight: 400;
  }
  ul.testSideNaviMob .pageText .pageDescription {
    color: #666666;
    font-family: HPE Graphik Light;
    font-size: 16px;
    line-height: 20px;
    display: block;
    font-weight: normal;
    margin-top: 6px;
    padding: 12px 25px 12px 60px;
  }
  #testFirstSideNaviMob ul.testSideNaviMob li {
    background-color: #f6f6f6;
    border-top: 1px solid #ccc;
    padding: 15px 25px 15px 74px;
    height: auto;
  }
  .mob_headerpage_backgrndChange {
    background-color: #fff !important;
    pointer-events: none;
  }
  ul.testSideNaviMob li:last-child {
    border-bottom: 1px solid #ccc;
  }
  a[aria-expanded=true] span.pageTitle {
    font-weight: 600;
  }
  a[aria-expanded=true] span.firstLevelExpandDown {
    opacity: 1 !important;
    transform: rotate(180deg);
  }
  a[aria-expanded=true] span.secondLevelExpandDown {
    opacity: 1 !important;
    padding-right: 10px !important;
    padding-left: 0px !important;
    transform: rotate(180deg);
  }
}
@media screen and (min-width: 1025px) {
  .mobileNav {
    display: none;
  }
}
@media screen and (max-width: 360px) {
  ul.testSideNaviMob {
    width: 340px;
  }
}
@media screen and (max-width: 359px) {
  #testFirstSideNaviMob {
    width: 310px;
  }
  #testFirstSideNaviMob .testSecondSideNavi li .spacer-menu-item {
    margin: 27px 0;
    cursor: default;
  }
  #testSecondSideNaviMob ul li ul {
    width: 310px;
  }
  #testSideNaviMob ul li ul li ul {
    width: 310px;
  }
}
@media screen and (max-width: 320px) {
  #heading ul.nav-icons-list {
    padding-inline-start: 0;
  }
  ul.testSideNaviMob {
    width: 300px;
  }
}
/* Tools and catalog */
@media screen and (max-width: 1440px) {
  .card-body .col-lg-10 {
    width: 83.3333%;
  }
  .Tools .toolsCatalog .card {
    margin-right: 33px;
  }
}
@media screen and (min-width: 1281px) { /* 353845 : dropdown adjustment */
  .toolsDetailsContainer .card-body .displa-rows {
    z-index: 99;
  }
}
@media screen and (max-width: 1280px) and (min-width: 769px) { /* #352376 : dropdown adjustment */
  .toolsDetailsContainer .card-body .displa-rows {
    left: 30px;
  }
}
@media (min-width: 768px) {
  .col-lg-4.toolsCatalog {
    width: 33.33333%;
    float: left;
  }
  .col-lg-8.toolsDetailsContainer {
    width: 66.66667%;
    float: right;
  }
  .card-body .col-lg-2 {
    width: 21.66667%;
  }
  .mobileTool {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .toolsDetailsContainer .card-body .displa-rows {
    float: left;
    left: 0;
  }
  .Tools .toolsCatalog .card {
    margin-right: 18px;
  }
  .Tools .toolsTitleHeader {
    width: 100%;
  }
  .Tools .toolsALignment .desc-content .toolsDescription {
    width: 92%;
  }
  .toolContentHoleContainer .small-content {
    padding-bottom: 70px;
    position: relative;
    margin-bottom: 20px;
  }
  .toolContentHoleContainer .viewButton {
    left: 0;
    position: absolute;
    bottom: 0;
  }
  .desc-content .icons {
    position: absolute;
    bottom: 14px;
    right: 24px;
  }
}
@media screen and (max-width: 767px) {
  .desktopTool {
    display: none;
  }
  .mobileTool {
    display: block;
  }
  #toolAccordian .glyphicon.glyphicon-menu-down {
    float: right;
    font-size: 14px;
    color: #666666;
    margin-top: 10px;
    font-weight: 300;
    transition: transform 1s ease-out;
    transform: rotate(0deg);
  }
  #toolAccordian.mobileTool .collapsed span.glyphicon.glyphicon-menu-down {
    transform: rotate(0deg);
  }
  #toolAccordian.mobileTool span.glyphicon.glyphicon-menu-down {
    transform: rotate(180deg);
  }
  .tools-catalog-header a span:focus, .tools-catalog-header a:hover {
    outline: none !important;
    text-decoration: none;
  }
  .col-lg-8.toolsDetailsContainer {
    width: 100%;
  }
  .Tools .toolsCatalog .card {
    margin-right: 0;
  }
  .card-body .col-lg-10 {
    width: 59%;
  }
  .card-body .col-lg-2 {
    width: 40%;
  }
}
@media screen and (max-width: 740px) {
  .desc-content .icons {
    right: 49px;
  }
}
@media screen and (max-width: 667px) {
  #pagination_result {
    display: none;
  }
  .desc-content .icons {
    right: 38px;
  }
}
@media screen and (max-width: 600px) {
  .desc-content .icons {
    right: 32px;
  }
}
@media screen and (max-width: 540px) {
  .desc-content .icons {
    right: 30px;
  }
  .Tools .toolsALignment.inactive {
    padding: 0px 12px 12px;
  }
}
@media screen and (max-width: 480px) {
  .desc-content .icons {
    right: 24px;
  }
  #toolsALignment .controlsPagination.pull-right {
    float: none !important;
    margin-right: 0;
  }
}
@media screen and (max-width: 450px) {
  .desc-content .icons {
    right: 16px;
  }
}
@media (min-width: 361px) and (max-width: 450px) {
  .eventContainer #main-content-wrapper #topSearchPart .col-md-8 {
    width: 35%;
  }
  .eventContainer #main-content-wrapper #topSearchPart .col-md-4 {
    width: 60%;
  }
}
@media screen and (max-width: 375px) {
  .desc-content .icons {
    right: 10px;
  }
}
@media screen and (max-width: 320px) {
  .desc-content .icons {
    right: 6px;
  }
}
/* Applies at every resolution (outside media queries) */
.toolsDetailsContainer .row.marginTop10 {
  margin-top: 24px;
}

@media screen and (min-width: 320px) {
  .toolsDetailsContainer .row.marginTop10 {
    display: flex;
    align-items: flex-end;
    margin-top: 24px;
  }
}
/* Login Page */
@media screen and (max-width: 1920px) {
  .homeLoginContent .centered {
    width: 37.5%;
    padding: 24px;
  }
}
@media screen and (max-width: 1440px) {
  .homeLoginContent .centered {
    width: 47.5%;
    padding: 24px;
  }
}
@media screen and (max-width: 999px) {
  .col-md-8 .homeLoginContent {
    margin-top: 0 !important;
  }
  #hpeslhf_legal {
    float: none !important;
  }
  #hpeslhf_site-footer {
    display: block !important;
  }
}
@media screen and (max-width: 800px) {
  #hpe_slim_footer {
    display: inline-table;
  }
}
@media screen and (max-width: 767px) {
  #hpe_slim_footer #hpeslhf_site-footer {
    height: 100%;
  }
  #hpeslhf_site-footer #hpeslhf_col2 {
    position: relative;
    margin-top: 10px;
    height: inherit;
  }
}
@media screen and (max-width: 440px) {
  #hpeslhf_legal {
    white-space: unset;
  }
}
/*Articles*/
@media screen and (max-width: 1024px) {
  .articleContainer .articleInnerContainer .articlePadding .articleContent .articleMediaContainer {
    width: 100%;
  }
}
@media screen and (min-width: 768px) {
  .article .col-md-8 {
    width: 66.66667%;
  }
  .article .col-md-4 {
    width: 33.33333%;
  }
}
@media screen and (max-width: 767px) {
  .bodyContent:has(.articleContainer) {
    padding-left: 16px;
    padding-right: 16px;
  }
}
/*Home Page*/
@media screen and (max-width: 1440px) {
  #dashboard_grid [data-sizex="1"] {
    width: 24%;
  }
  .gridster.ready {
    overflow-x: hidden !important;
  }
  #dashboard_grid [data-col="1"] {
    left: 0px;
  }
  #dashboard_grid [data-col="2"] {
    left: 340px;
  }
  #dashboard_grid [data-col="3"] {
    left: 680px;
  }
  #dashboard_grid [data-col="4"] {
    left: 1020px;
  }
  .quickLinks li {
    display: flex;
  }
  #add-quick-links > a {
    display: inline-flex;
  }
}
@media screen and (max-width: 1420px) {
  #dashboard_grid [data-col="2"] {
    left: 306px;
  }
  #dashboard_grid [data-col="3"] {
    left: 614px;
  }
  #dashboard_grid [data-col="4"] {
    left: 920px;
  }
}
@media screen and (max-width: 1419px) and (min-width: 1281px) {
  #dashboard_grid [data-col="2"] {
    left: 304px;
  }
  #dashboard_grid [data-col="3"] {
    left: 608px;
  }
  #dashboard_grid [data-col="4"] {
    left: 912px;
  }
}
@media screen and (max-width: 1280px) {
  #dashboard_grid [data-col="2"] {
    left: 302px;
  }
  #dashboard_grid [data-col="3"] {
    left: 602px;
  }
  #dashboard_grid [data-col="4"] {
    left: 902px;
  }
  .quickLinksText {
    display: inline;
    width: 100% !important;
  }
}
@media screen and (max-width: 1279px) and (min-width: 1240px) {
  #dashboard_grid [data-sizex="1"] {
    width: 24%;
  }
  #dashboard_grid [data-col="2"] {
    left: 298px;
  }
  #dashboard_grid [data-col="3"] {
    left: 596px;
  }
  #dashboard_grid [data-col="4"] {
    left: 894px;
  }
}
@media screen and (max-width: 1239px) and (min-width: 1220px) {
  #dashboard_grid [data-sizex="1"] {
    width: 23.8%;
  }
  #dashboard_grid [data-col="2"] {
    left: 289px;
  }
  #dashboard_grid [data-col="3"] {
    left: 580px;
  }
  #dashboard_grid [data-col="4"] {
    left: 870px;
  }
}
@media screen and (max-width: 1219px) and (min-width: 1211px) {
  #dashboard_grid [data-sizex="1"] {
    width: 23.8%;
  }
  #dashboard_grid [data-col="3"] {
    left: 574px;
  }
  #dashboard_grid [data-col="2"] {
    left: 287px;
  }
  #dashboard_grid [data-col="4"] {
    left: 863px;
  }
}
@media screen and (max-width: 1210px) and (min-width: 1191px) {
  #dashboard_grid [data-col="3"] {
    left: 568px;
  }
  #dashboard_grid [data-col="2"] {
    left: 284px;
  }
  #dashboard_grid [data-col="4"] {
    left: 850px;
  }
}
@media screen and (max-width: 1190px) and (min-width: 1181px) {
  #dashboard_grid [data-sizex="1"] {
    width: 23.8%;
  }
  #dashboard_grid [data-col="3"] {
    left: 560px;
  }
  #dashboard_grid [data-col="2"] {
    left: 280px;
  }
  #dashboard_grid [data-col="4"] {
    left: 840px;
  }
}
@media screen and (max-width: 1180px) and (min-width: 1170px) {
  #dashboard_grid [data-col="4"] {
    left: 830px;
  }
  #dashboard_grid [data-col="2"] {
    left: 276px;
  }
  #dashboard_grid [data-col="3"] {
    left: 554px;
  }
  #dashboard_grid [data-sizex="1"] {
    width: 23.8%;
  }
}
@media screen and (max-width: 1169px) and (min-width: 1150px) {
  #dashboard_grid [data-col="4"] {
    left: 818px;
  }
  #dashboard_grid [data-col="2"] {
    left: 272px;
  }
  #dashboard_grid [data-col="3"] {
    left: 546px;
  }
  #dashboard_grid [data-sizex="1"] {
    width: 23.6%;
  }
  .quickLinksText {
    white-space: unset !important;
    line-height: 25px !important;
  }
}
@media screen and (max-width: 1149px) and (min-width: 1140px) {
  #dashboard_grid [data-col="4"] {
    left: 810px;
  }
  #dashboard_grid [data-col="2"] {
    left: 270px;
  }
  #dashboard_grid [data-col="3"] {
    left: 540px;
  }
  #dashboard_grid [data-sizex="1"] {
    width: 23.6%;
  }
  .quickLinksText {
    white-space: unset !important;
    line-height: 25px !important;
  }
}
@media screen and (max-width: 1139px) and (min-width: 1120px) {
  #dashboard_grid [data-col="4"] {
    left: 794px;
  }
  #dashboard_grid [data-col="2"] {
    left: 264px;
  }
  #dashboard_grid [data-col="3"] {
    left: 528px;
  }
  #dashboard_grid [data-sizex="1"] {
    width: 23.6%;
  }
  .quickLinksText {
    white-space: unset !important;
    line-height: 25px !important;
  }
}
@media screen and (max-width: 1119px) and (min-width: 1081px) {
  #dashboard_grid [data-col="4"] {
    left: 774px;
  }
  #dashboard_grid [data-col="2"] {
    left: 258px;
  }
  #dashboard_grid [data-col="3"] {
    left: 516px;
  }
  #dashboard_grid [data-sizex="1"] {
    width: 23.6%;
  }
  .quickLinksText {
    white-space: unset !important;
    line-height: 25px !important;
  }
}
@media screen and (max-width: 1080px) {
  .portlet-column-content.empty {
    padding: 0;
  }
  #dashboard_grid > ul {
    height: 1225px !important;
  }
  #dashboard_grid [data-sizex="1"] {
    width: 318px;
  }
  #dashboard_grid [data-col="1"] {
    left: 18px;
  }
  #dashboard_grid [data-col="2"] {
    left: 373px;
  }
  #dashboard_grid [data-row="1"][data-col="4"] {
    left: 726px;
  }
  #dashboard_grid [data-row="1"][data-col="3"] {
    top: 416px;
    left: 726px;
  }
  #dashboard_grid [data-row="2"][data-col="4"] {
    top: 831px;
    left: 373px;
  }
  #dashboard_grid [data-row="2"][data-col="3"] {
    top: 831px;
    left: 18px;
  }
}
@media screen and (max-width: 1024px) {
  #dashboard_grid [data-col="1"], #dashboard_grid [data-row="2"][data-col="3"] {
    left: 10px;
  }
  #dashboard_grid [data-col="2"] {
    left: 350px;
  }
  #dashboard_grid [data-row="2"][data-col="4"] {
    left: 350px;
  }
  #dashboard_grid [data-row="1"][data-col="4"] {
    left: 690px;
  }
  #dashboard_grid [data-col="3"] {
    left: 691px;
  }
  #dashboard_grid [data-row="2"] {
    top: 416px;
  }
}
@media screen and (max-width: 999px) {
  #dashboard_grid [data-row="2"] {
    top: 830px;
  }
  #dashboard_grid [data-row="1"][data-col="3"] {
    left: 6px;
  }
  #dashboard_grid [data-row="1"][data-col="4"] {
    left: 484px;
    top: 416px;
  }
  #dashboard_grid [data-row="2"][data-col="3"] {
    left: 10px;
    top: 1242px;
  }
  #dashboard_grid [data-row="2"][data-col="4"] {
    top: 1242px;
    left: 484px;
  }
  #dashboard_grid [data-sizex="1"] {
    width: 48%;
  }
  #dashboard_grid ul.quickLinks li {
    width: 100%;
  }
  #dashboard_grid [data-col="2"] {
    left: 484px;
  }
  #dashboard_grid > ul {
    height: 1636px !important;
  }
  .recPromotions {
    margin-left: 10px;
  }
}
@media screen and (max-width: 900px) {
  #dashboard_grid [data-col="2"], #dashboard_grid [data-row="1"][data-col="4"], #dashboard_grid [data-row="2"][data-col="4"] {
    left: 428px;
  }
}
@media screen and (max-width: 800px) {
  #dashboard_grid [data-col="2"], #dashboard_grid [data-row="2"][data-col="4"], #dashboard_grid [data-row="1"][data-col="4"] {
    left: 402px;
  }
}
@media screen and (max-width: 768px) {
  #dashboard_grid [data-col="2"], #dashboard_grid [data-row="2"][data-col="4"], #dashboard_grid [data-row="1"][data-col="4"] {
    left: 382px;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .row [class*=col-]:last-child {
    padding-left: 6px;
  }
}
@media screen and (min-width: 768px) {
  .Home .col-md-6#column-1 {
    width: 50%;
    float: left;
  }
  .Home .col-md-6#column-2 {
    width: 50%;
    float: right;
  }
}
@media screen and (max-width: 768px) {
  #carouselExampleIndicators .carousel-inner .myCap {
    width: 100%;
  }
  #carouselExampleIndicators .carousel-inner .myCap .car-div {
    padding: 24px 24px 0 24px;
  }
  #carouselExampleIndicators .carousel-inner .myCap .car-div span.carouselMainDescription {
    padding-left: 34px;
    background-image: url("../images/right_arrow.svg");
    background-repeat: no-repeat;
    background-position-y: 8px;
  }
  .portlet-column-first .row.recentlyInnerContainer {
    margin-right: 10px;
  }
  .recentlyContainer .col-sm-6 {
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 0;
    width: 100%;
    margin-bottom: 10px;
  }
  .col-sm-6.imgContainer.ar {
    padding-left: 0;
    padding-right: 10px;
  }
  .col-md-6#column-8 {
    width: 50%;
    float: left;
  }
  .col-md-6#column-9 {
    width: 50%;
    float: right;
  }
  .cardPage-body {
    background-image: url("../images/right_arrow.svg");
    background-repeat: no-repeat;
    background-position-y: 28px;
    padding-left: 30px;
    margin-left: 20px;
  }
  .recPromotions .promotionHeader .LeftOne .heading-div span {
    display: none;
  }
  .recPromotions .promotionHeader .LeftOne .heading-div img {
    top: 5px !important;
  }
}
@media screen and (min-width: 769px) {
  .mobileGridster, .recentContentMobile {
    display: none;
  }
}
@media screen and (max-width: 769px) {
  .col-md-6#column-8, .col-md-6#column-9 {
    width: 100%;
    float: none;
  }
  .col-sm-6.imgContainer.ar {
    padding-right: 0px;
  }
  .portlet-column-first .row.recentlyInnerContainer {
    margin-right: 0px;
  }
  .Home .overviewSub.recentlyContainer .recentlyInnerContainer .col-sm-6:last-child {
    display: none;
  }
  .desktopGridster, .recentContentDesktop {
    display: none;
  }
  .mobileGridster, .recentContentMobile {
    display: block;
  }
  #dashboard_grid > ul {
    height: auto !important;
  }
  #dashboard_grid > ul > li {
    height: auto;
    width: 100% !important;
    position: initial;
    margin-bottom: 5px;
  }
  .widget_title, p.quickLinks, .widget_total.iframeWidget .widget_title {
    padding: 24px 0px 24px 24px !important;
  }
  .widget_title .titleText, .widget_total.iframeWidget .widget_title .titleText {
    padding: 0 !important;
    width: 80%;
  }
  .widget_title span.glyphicon.glyphicon-menu-down, .quickLinks .glyphicon-menu-down {
    float: right;
    font-size: 14px;
    top: 35px;
    right: 40px;
    color: #666;
    transition: transform 1s ease-out;
    transform: rotate(0deg);
    position: absolute;
  }
  [aria-expanded=true] span.glyphicon.glyphicon-menu-down {
    transform: rotate(180deg);
  }
  #removeIcon {
    right: 18px !important;
    top: 30px !important;
  }
  .widget_total.iframeWidget .widget_title #removeIcon {
    right: 8px;
    top: 25px;
  }
  .quickLinks .glyphicon-menu-down {
    position: relative;
    top: 11px;
  }
  /* The edit (pencil) affordance used to be floated to the card's right edge and
     then dragged 50px back to the left with `right: 50px`, to dodge the collapse
     chevron that sits absolutely at `right: 40px`. Because `float` + `position:
     relative` only shifts the icon VISUALLY - it keeps reserving its original
     right-edge slot - the 50px offset is a fixed guess that has no relationship
     to the title's width. On a narrow Quick Links card that offset lands the
     pencil directly on top of the "Quick links" heading.

     Match the desktop treatment instead: the icon flows inline immediately after
     the title, so its position is derived from the text rather than guessed, and
     it can never overlap. The chevron keeps its own absolute slot on the right. */
  #quickLinksHeaderIcons {
    position: static !important;
    float: none;
    top: auto !important;
    right: auto !important;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-left: 10px;
    width: auto;
    height: auto;
  }
  #quickLinksHeaderIcons img {
    width: 16px;
    height: 16px;
  }
  /* Keep the heading (title + inline pencil) clear of the absolutely positioned
     collapse chevron, which is anchored 40px from the card's right edge. */
  p.quickLinks {
    padding-right: 64px;
  }
  #dashboard_grid ul li[style="background-color: #EEEEEE"] img.plusIcon, #dashboard_grid ul li[style="background-color: #EEEEEE"] span.widgetText {
    position: relative;
  }
  #dashboard_grid ul li[style="background-color: #EEEEEE"] img.plusIcon {
    height: 25px;
    width: 25px;
    margin-right: 10px;
    top: -3px;
  }
  #dashboard_grid ul li[style="background-color: #EEEEEE"] {
    padding: 20px;
  }
}
@media screen and (max-width: 470px) {
  .recPromotions .promotionHeader .rightOne {
    width: 88%;
  }
  .recPromotions .promotionHeader .LeftOne {
    width: 10%;
  }
  .card.recPromotions {
    margin-left: 0;
  }
}
@media screen and (max-width: 360px) {
  .card.recPromotions {
    padding: 20px 10px;
  }
  .recPromotions .promotionHeader .LeftOne .heading-div img {
    right: -8px;
  }
}
/* Tools-Grid View */
@media screen and (max-width: 768px) {
  .Tools .toolsALignment.activeList #tool-name-list li {
    width: 100%;
  }
  .Tools .toolsALignment.activeList .small-content {
    margin-bottom: 0;
  }
  .Tools .toolsALignment.activeList .desc-content .icons {
    position: relative;
    bottom: 0;
    right: 14px;
  }
  .Tools .toolsALignment.activeList .small-content-footer .viewButton {
    position: inherit;
  }
  .Tools .toolsALignment.activeList .toolsTitleHeader {
    width: 95%;
  }
}
@media screen and (max-width: 767px) {
  .displa-rows > span {
    display: none;
  }
  .toolsDetailsContainer .card-body .displa-rows {
    margin-top: 15px;
  }
}
@media screen and (max-width: 480px) {
  .Tools .toolsALignment.activeList .toolsTitleHeader {
    width: 93%;
  }
}
@media screen and (max-width: 360px) {
  .Tools .toolsALignment.activeList .desc-content .icons {
    right: 4px;
  }
  .toolsALignment.activeList .toolsTitleHeader {
    width: 87%;
  }
  .Tools .activeList #tool-name-list .desc-content .toolsTitle {
    width: 80%;
    text-overflow: inherit;
    white-space: unset;
  }
}
@media screen and (max-width: 320px) {
  .Tools .toolsALignment.activeList .small-content {
    padding: 24px 15px;
  }
  .Tools .toolsALignment.activeList .small-content-footer .viewButton {
    padding-left: 15px;
    padding-right: 15px;
  }
  .Tools .toolsALignment.activeList .desc-content .icons {
    bottom: 30px;
  }
}
/*--news and events--*/
@media screen and (max-width: 1920px) {
  #main-content-list .news-list-ul li .content .content-description {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
}
@media screen and (max-width: 1440px) {
  #main-content-list .news-list-ul li .content .content-description {
    -webkit-line-clamp: 2;
  }
}
@media screen and (max-width: 1280px) {
  #main-content-list.withFilter .col-md-8, #main-content-list.withFilter .col-md-4 {
    width: 50%;
  }
  #main-content-list.withFilter #search-filter-wrapper #searchFilterList {
    width: 260px;
  }
}
@media screen and (max-width: 1080px) {
  .withFilter #news_list_view_ul li .col-md-9, .withFilter #news_list_view_ul li .col-md-3 {
    width: 100%;
  }
  .withFilter #main-content-list .news-list-ul li .remaing-things li:nth-child(3) {
    float: none;
    padding-left: 24px;
  }
}
@media screen and (max-width: 1024px) {
  #main-content-list .news-list-ul li .row .col-md-3 {
    padding-left: 0;
    margin-top: 10px;
  }
  #main-content-list .news-list-ul li {
    padding: 24px 24px 30px 24px;
  }
}
@media screen and (max-width: 999px) {
  .eventContainer #main-content-list .col-md-8, .eventContainer #main-content-wrapper .col-md-8 {
    width: 50%;
    float: left;
  }
  .eventContainer #main-content-list .col-md-4, .eventContainer #main-content-wrapper .col-md-4 {
    width: 46%;
    float: right;
  }
  #main-content-list #search-filter-wrapper #searchFilterList, .eventContainer #main-content-wrapper .searchNews {
    width: 232px;
  }
  #main-content-list.withFilter #search-filter-wrapper .searchInput {
    display: none;
  }
  #main-content-list.withFilter .col-md-8 {
    width: 20%;
  }
  #main-content-list.withFilter .col-md-4 {
    width: 76%;
  }
  #news_list_view_ul li .col-md-9 {
    width: 62%;
    float: left;
  }
  #news_list_view_ul li .col-md-3 {
    width: 33.7%;
    float: right;
    margin-top: 18px;
  }
  #main-content-list .news-list-ul li .content h5 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    width: 300px;
  }
  .rowTT [class*=columnas2]:first-child {
    margin-right: 1%;
    width: 48%;
  }
  .rowTT [class*=columnas2]:first-child .ArticleCard-body {
    width: 336px;
  }
  .rowTT [class*=columnas2]:last-child {
    margin-left: 1%;
    width: 48%;
    float: right;
  }
  .rowTT [class*=columnas2]:last-child .ArticleCard-body {
    width: 356px;
  }
  .rowTT .columnas2 .ArticleImage div:last-child {
    background-size: contain !important;
    background-repeat: no-repeat;
  }
}
@media screen and (max-width: 767px) {
  #main-content-list .news-list-ul li .content .content-description {
    -webkit-line-clamp: 3;
  }
  #main-content-list .news-list-ul li .content {
    overflow: hidden;
  }
  #news_list_view_ul li .col-md-9, #news_list_view_ul li .col-md-3 {
    width: 100%;
    float: none;
  }
  #main-content-list .news-list-ul li .content h5 {
    -webkit-line-clamp: 2;
    height: 50px;
  }
  #main-content-list .news-list-ul li .remaing-things li:nth-child(3) {
    float: none;
    padding-left: 24px;
  }
  #main-content-list .news-list-ul li .remaing-things li:nth-child(3) img {
    vertical-align: text-top;
  }
  .eventContainer #main-content-list .my-card-body .col-md-4 .display-list-wrapper span,
  .TwoTile, #main-content-list #search-filter-wrapper .searchInput {
    display: none;
  }
  #main-content-list.withOutFilter .col-md-8 {
    width: 30%;
    float: left;
  }
  #main-content-list.withOutFilter .col-md-4 {
    width: 70%;
    float: right;
  }
  #main-content-list.withFilter {
    padding-left: 0;
  }
}
@media screen and (max-width: 360px) {
  #main-content-list .display-list-wrapper #dissBtn {
    margin-right: 10px;
  }
  #main-content-list .news-list-ul li .content h5 {
    width: 100%;
  }
}
@media screen and (max-width: 320px) {
  #main-content-list .news-list-ul li {
    padding-left: 0;
    padding-right: 0;
  }
}
/*Grid view*/
@media screen and (max-width: 1280px) {
  #main-content-wrapper.gridView .col-md-8, #main-content-wrapper.gridView .col-md-4 {
    width: 50%;
  }
  .eventContainer #main-content-wrapper.gridView .searchNews {
    width: 260px;
  }
}
@media screen and (max-width: 1080px) and (min-width: 768px) {
  .gridView .child-content-shift .news-desc {
    height: 108px;
  }
}
@media screen and (max-width: 1024px) {
  .eventContainer #main-content-wrapper.gridViewFilter #content-shift,
  .eventContainer #main-content-wrapper.gridView #content-shift {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .eventContainer #main-content-wrapper.gridViewFilter #content-shift .inner-content-div,
  .eventContainer #main-content-wrapper.gridView #content-shift .inner-content-div {
    width: auto;
    min-width: 0;
  }
}
@media screen and (max-width: 999px) {
  .eventContainer #main-content-wrapper.gridView .searchInput {
    display: none;
  }
  #main-content-wrapper.gridView .col-md-8 {
    width: 30%;
  }
  #main-content-wrapper.gridView .col-md-4 {
    width: 70%;
  }
}
@media screen and (max-width: 768px) {
  .eventContainer #filter-menu #applyBtn, .eventContainer #filter-menu .clearFilterBtn {
    width: 100%;
  }
  .eventContainer #filter-menu #applyBtn {
    margin-bottom: 15px;
  }
}
@media screen and (max-width: 767px) {
  .eventContainer #main-content-wrapper.gridViewFilter #content-shift,
  .eventContainer #main-content-wrapper.gridView #content-shift {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .eventContainer #main-content-wrapper.gridViewFilter #content-shift .inner-content-div,
  .eventContainer #main-content-wrapper.gridView #content-shift .inner-content-div {
    width: auto;
    min-width: 0;
    margin: 0;
  }
  .eventContainer #main-content-wrapper #topSearchPart {
    margin-top: 0;
  }
  #topSearchPart .col-md-8 {
    width: 20%;
    float: left;
  }
  .eventContainer #main-content-wrapper .searchInput,
  .eventContainer #main-content-wrapper .display-list-wrapper span {
    display: none;
  }
  .eventContainer #filter-menu {
    z-index: 1004;
    width: 100%;
    box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.5);
    margin-top: 0;
  }
  .eventContainer #main-content-wrapper.gridView {
    padding-left: 0;
  }
  .controlsPagination.pull-right {
    float: none !important;
    text-align: center;
  }
}
@media screen and (max-width: 360px) {
  .eventContainer #main-content-wrapper .col-md-8 {
    width: 30%;
  }
  .eventContainer #main-content-wrapper .col-md-4 {
    width: 70%;
  }
}
/* Partner Program */
@media screen and (max-width: 999px) {
  .PRPContainer .PRPPanel .subContainer {
    width: 100% !important;
    padding-left: 0 !important;
    height: 300px !important;
  }
  .PRPContainer .PRPPanel {
    height: auto !important;
    background-position: 100% top !important;
    background-size: contain !important;
  }
  #programImg.pprPanner {
    background-position: 100% top !important;
    background-size: contain !important;
  }
  #programImg .subContainer {
    width: 100% !important;
    bottom: 0 !important;
    top: auto !important;
    max-width: 100% !important;
    left: auto !important;
  }
}
@media screen and (max-width: 767px) {
  .articleContainer .articleInnerContainer .articlePadding .articleTitle {
    font-size: 36px;
  }
  #programImg .subContainerHeader {
    font-size: 36px;
  }
}
@media screen and (max-width: 767px) {
  .PRPContainer .PRPPanel .PRPHeader {
    width: 76% !important;
    padding: 12px 0 0 12px !important;
  }
  .PRPContainer .PRPHeader span:first-child {
    font-size: 18px !important;
    font-weight: 600 !important;
    letter-spacing: 0;
    line-height: 24px;
  }
  .PRPContainer .PRPHeader span:last-child {
    font-size: 36px !important;
    font-weight: 300;
    letter-spacing: 0;
    line-height: 42px;
  }
  .articleSubtextContainer .flex-container.row {
    display: block !important;
  }
  .articleInnerContainer .articleSubtextContainer .col60, .articleInnerContainer .articleSubtextContainer .col40 {
    width: 100% !important;
  }
}
@media screen and (max-width: 600px) {
  #programImg.pprPanner {
    height: 392px !important;
  }
}
@media screen and (max-width: 500px) {
  #programImg.pprPanner {
    height: 368px !important;
  }
}
@media screen and (max-width: 460px) {
  .PRPContainer .PRPPanel .PRPDescription {
    height: 50px !important;
  }
  .PRPContainer .PRPPanel .PRPDescription:empty {
    display: none;
  }
  .PRPContainer .PRPPanel .PRPHeader {
    line-height: 32px !important;
  }
  .PRPContainer .PRPPanel .subContainer .subContainerHeaderText {
    font-size: 20px !important;
  }
  .PRPContainer .PRPPanel .subContainer .subContainerHeader .Icon {
    margin: 15px 10px 15px 12px !important;
  }
  .PRPContainer .PRPPanel {
    height: 190px !important;
  }
  #programImg .subContainerHeader {
    font-size: 24px !important;
    line-height: 24px !important;
  }
}
@media screen and (max-width: 430px) {
  #programImg.pprPanner {
    height: 340px !important;
  }
}
@media screen and (max-width: 380px) {
  #programImg.pprPanner {
    height: 333px !important;
  }
}
/* Global Search */
@media screen and (min-width: 768px) {
  .filterPart.searchFilterMob {
    display: none !important;
  }
}
@media screen and (max-width: 999px) and (min-width: 768px) {
  .search-layout.menu-column .col-md-9.result {
    width: 70%;
    float: right;
  }
  .search-layout.menu-column .col-md-3 {
    width: 30%;
    float: left;
  }
}
@media screen and (max-width: 999px) {
  .tabular-list-group .list-group-item {
    display: block;
    height: 100%;
    border-left: 0;
    border-right: 0;
  }
  .portlet-search .result .main-content-body .tabular-list-group li .list-group-item-content {
    width: 100%;
    max-width: 100%;
    display: block;
    border-bottom: 0;
  }
  .portlet-search .result .main-content-body .tabular-list-group li .list-group-item-field {
    text-align: left !important;
    width: 50%;
    border: 0;
  }
  .portlet-search .result .main-content-body .tabular-list-group li .list-group-item-field:-moz-only-whitespace {
    display: none;
  }
  .portlet-search .result .main-content-body .tabular-list-group li div:nth-child(2) {
    padding-left: 15px;
    text-align: left;
  }
  .main-content-body .tabular-list-group .list-group-item-content h6 {
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
  .list-group-item.headerContent .list-group-item-field {
    display: none;
  }
  .pagination-bar .dropdown.pagination-items-per-page {
    top: 56px;
  }
  header#banner #heading .searchContainer .searchPart {
    width: 80%;
  }
  header#banner #heading .searchContainer .searchIcons {
    width: 20%;
  }
  header#banner #heading .searchContainer .searchIcons .searchClose .iconText {
    margin-right: 25px;
  }
}
@media screen and (max-width: 767px) {
  .headerContent .list-group-item-content h5 {
    margin-left: 5px;
  }
  .search-layout.menu-column .col-md-9.result {
    padding-left: 0;
  }
  .pagination-results, .searchTextClass, .list-group-item.headerContent, .pagination-bar .dropdown.pagination-items-per-page {
    display: none;
  }
  .filterPart.searchFilterDesktop {
    display: none !important;
  }
  .filterPart.searchFilterMob {
    display: block !important;
  }
  .search-layout .tabular-list-group {
    border-top: 1px solid #ddd;
  }
  .search-layout .pagination-bar {
    float: none;
    display: inline-block;
    width: 100%;
    text-align: center;
  }
  .search-layout .pagination-bar ul.pagination {
    width: auto;
  }
  .portlet-search .row.search-layout .col-md-9.result {
    padding-left: 0px;
  }
  .filterPart .filterSpan {
    width: 86% !important;
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  .filterPart span.glyphicon.glyphicon-menu-down {
    top: -8px;
    left: 24px;
    color: #777;
    font-size: 12px;
    font-weight: 600;
    transition: transform 1s ease-out;
    transform: rotate(0deg);
  }
  .filterPart[aria-expanded=false] .collapsed span.glyphicon.glyphicon-menu-down {
    transform: rotate(0deg);
  }
  .filterPart[aria-expanded=true] span.glyphicon.glyphicon-menu-down {
    transform: rotate(180deg);
  }
  .filterPart.searchFilterMob #clearFilter, .filterPart.searchFilterMob[aria-expanded=false] #clearFilter {
    color: #333;
    border-bottom: 0.5px solid #333;
    padding-left: 0;
    padding-right: 0;
  }
  .filterPart.searchFilterMob[aria-expanded=true] #clearFilter {
    color: #ccc;
    border-bottom: 0;
  }
  .portlet-search .search-layout .col-md-3 .panel-default > .panel-heading {
    background-position: 92.7% center;
  }
}
@media screen and (max-width: 620px) {
  header#banner #heading .searchContainer .searchIcons .searchClose .iconText {
    display: none;
  }
  .searchOpen header#banner #heading {
    height: auto;
  }
  .searchOpen #headerNavBar {
    top: 14px;
  }
  .searchOpen header#banner #heading .searchContainer .searchPart {
    height: 48px;
    border-right: 1px solid #ddd;
  }
  header#banner #heading .searchContainer .searchIcons {
    width: 15%;
  }
  header#banner #heading .searchContainer .searchPart {
    width: 85%;
  }
  header#banner #heading .searchContainer .searchIcons {
    margin-top: 26px;
    width: 12%;
    text-align: center;
  }
  header#banner #heading .searchContainer .searchIcons .searchClose img {
    margin-right: 0;
  }
}
@media screen and (max-width: 385px) {
  header#banner #heading .searchContainer .searchPart {
    width: 80%;
  }
  header#banner #heading .searchContainer .searchIcons {
    width: 20%;
    margin-top: 0px;
  }
}
@media screen and (max-width: 620px) {
  header#banner #heading .searchContainer .searchPart {
    width: 80%;
  }
  header#banner #heading .searchContainer .searchIcons {
    width: 20%;
    margin-top: 0px;
  }
}
/* Settings Page */
@media screen and (min-width: 768px) {
  .tab-manu-wrapper .main-tab {
    background-image: url(/o/com.hpe.portal.preferences/image/nav_down.png);
    background-repeat: no-repeat;
    background-position: 90% 50%;
  }
  .tab-manu-wrapper .main-tab.menuTabActive {
    background-image: url(/o/com.hpe.portal.preferences/image/nav_Up.png);
    background-repeat: no-repeat;
    background-position: 90% 25%;
  }
  .tab-manu-wrapper .main-tab > .tab-node {
    background-repeat: no-repeat !important;
    background-size: 24px;
    background-position: 24px center !important;
  }
}
@media screen and (max-width: 1024px) {
  .tab-manu-wrapper .main-tab {
    background-position: 214px 35px;
  }
}
@media screen and (max-width: 999px) {
  .tab-manu-wrapper .main-tab > .tab-node {
    font-size: 18px;
  }
  .tab-manu-wrapper .main-tab .tab-node.child-tab {
    font-size: 16px !important;
  }
  .tab-manu-wrapper .main-tab {
    background-position: 160px 35px;
  }
}
@media screen and (max-width: 767px) {
  .nested-nav-bar {
    display: flex !important;
    width: 100% !important;
    float: none !important;
    margin-top: 15px;
    padding: 0 36px;
    margin-bottom: 10px;
    border-bottom: 1px solid #ddd;
  }
  .nested-body-holder {
    width: 100% !important;
  }
  .tab-manu-wrapper {
    border: 0 !important;
    margin-right: 16px;
    position: relative;
    min-height: 250px;
    width: 50px;
  }
  .tab-manu-wrapper:nth-child(2) {
    min-height: 212px;
  }
  .tab-manu-wrapper:nth-child(3) {
    min-height: 312px;
  }
  .tab-manu-wrapper:nth-child(4), .tab-manu-wrapper:nth-child(5) {
    min-height: 161px;
  }
  .tab-manu-wrapper .main-tab > .tab-node {
    border: 0 !important;
    background-repeat: no-repeat !important;
    background-size: 24px;
    background-position: 13px 12px !important;
    position: absolute;
    width: 50px !important;
  }
  .tab-manu-wrapper:nth-child(4) .main-tab > .tab-node.active {
    background-image: url(../images/settingspage_icons/article-white.png);
    background-color: #69506F;
  }
  .tab-manu-wrapper:nth-child(5) .main-tab > .tab-node {
    background-image: url(../images/settingspage_icons/adminstrtn.png);
  }
  .tab-manu-wrapper:nth-child(5) .main-tab > .tab-node.active {
    background-image: url(../images/settingspage_icons/adminstrtnw.png);
    background-color: #69506F;
  }
  .tab-manu-wrapper:nth-child(6) .main-tab > .tab-node {
    background-image: url(../images/settingspage_icons/adminstrtn.png);
  }
  .tab-manu-wrapper:nth-child(6) .main-tab > .tab-node.active {
    background-image: url(../images/settingspage_icons/adminstrtnw.png);
    background-color: #69506F;
  }
  .tab-manu-wrapper span.tab-node.node-with-child-tab.active {
    border-right: 0 !important;
  }
  .tab-manu-wrapper .main-tab > .tab-node {
    border-bottom: 0 !important;
    color: transparent;
    width: 50px;
    height: 50px;
    padding: 0;
    vertical-align: middle;
    overflow: hidden;
    white-space: nowrap;
  }
  .nested-nav-bar .serachDivPart {
    display: none;
  }
  .tab-node.child-tab {
    padding-left: 10px !important;
  }
  .child-tab-collection {
    position: absolute;
    top: 49px;
  }
  .main-tab .tab-node.child-tab:nth-child(1) {
    top: 0;
  }
  .main-tab .tab-node.child-tab {
    position: relative;
    margin-left: 0;
    width: 670px !important;
    z-index: 99;
  }
  .tab-manu-wrapper span.prependedTabTitle {
    position: relative;
    width: 100%;
    padding: 0 0 0 10px;
    font-size: 18px;
    font-weight: 600;
    height: 40px;
    display: table;
    background-color: #eee;
  }
  .tab-manu-wrapper:nth-child(3) .main-tab .child-tab, .tab-manu-wrapper:nth-child(3) .prependedTabTitle {
    left: -58px;
  }
  .tab-manu-wrapper:nth-child(4) .main-tab .child-tab, .tab-manu-wrapper:nth-child(4) .prependedTabTitle {
    left: -112px;
  }
  .tab-manu-wrapper:nth-child(5) .main-tab .child-tab, .tab-manu-wrapper:nth-child(5) .prependedTabTitle {
    left: -164px;
  }
  .tab-manu-wrapper:nth-child(6) .main-tab .child-tab, .tab-manu-wrapper:nth-child(6) .prependedTabTitle {
    left: -218px;
  }
}
@media screen and (max-width: 680px) {
  .main-tab .tab-node.child-tab {
    width: 600px !important;
  }
}
@media screen and (max-width: 640px) {
  .main-tab .tab-node.child-tab {
    width: 575px !important;
  }
}
@media screen and (max-width: 600px) {
  .main-tab .tab-node.child-tab {
    width: 540px !important;
  }
}
@media screen and (max-width: 568px) {
  .main-tab .tab-node.child-tab {
    width: 510px !important;
  }
}
@media screen and (max-width: 533px) {
  .main-tab .tab-node.child-tab {
    width: 475px !important;
  }
}
@media screen and (max-width: 500px) {
  .main-tab .tab-node.child-tab {
    width: 425px !important;
  }
}
@media screen and (max-width: 450px) {
  .main-tab .tab-node.child-tab {
    width: 355px !important;
  }
}
@media screen and (max-width: 385px) {
  .main-tab .tab-node.child-tab {
    width: 330px !important;
  }
}
@media screen and (max-width: 375px) {
  .main-tab .tab-node.child-tab {
    width: 320px !important;
  }
}
@media screen and (max-width: 360px) {
  .main-tab .tab-node.child-tab {
    width: 310px !important;
  }
}
@media screen and (max-width: 340px) {
  .main-tab .tab-node.child-tab {
    width: 290px !important;
  }
}
@media screen and (max-width: 320px) {
  .main-tab .tab-node.child-tab {
    width: 270px !important;
  }
}
/* settings - communications */
@media screen and (max-width: 999px) {
  .notificationInput .col-md-8, .notificationHeader .col-md-8 {
    width: 66.6%;
    float: left;
  }
  .notificationInput .col-md-4, .notificationHeader .col-md-4 {
    width: 33.3%;
    float: right;
  }
}
@media screen and (max-width: 767px) {
  .notificationHeader .col-md-8, .notificationHeader .col-md-4 {
    font-size: 18px;
  }
  .footerButtons .submitButton#saveComm {
    width: 100%;
    margin-bottom: 24px;
  }
  .footerButtons .cancelButton#cancel {
    width: 100%;
    margin-left: 0;
  }
  .notificationInput .col-md-8 span.catTitle input {
    vertical-align: bottom;
  }
  .nested-body-holder .portlet-decorate .portlet-content {
    padding-right: 0px;
  }
}
@media screen and (max-width: 480px) {
  .notificationInput .col-md-8 span.catTitle input {
    display: block;
  }
  .innerContainer ul.notificationInput li {
    display: grid;
  }
}
@media screen and (min-width: 320px) {
  .notificationInput .col-md-8 span.catTitle {
    font-family: HPE Graphik;
    font-weight: 600;
  }
  .innerContainer .headerText {
    font-size: 36px;
  }
  .notificationInput .col-md-8 {
    width: 40%;
  }
}
/* settings - personalDetails */
@media screen and (max-width: 1024px) {
  .personalDetails .col-sm-6 {
    padding-right: 0;
    display: block;
    float: none;
  }
  .detailsContainer {
    margin-left: 6px !important;
    margin-right: 0 !important;
  }
}
@media screen and (max-width: 999px) {
  .nested-nav-bar, .nested-body-holder {
    background: #fff;
  }
  .serachDivPart input {
    padding: 24px 0px 24px 40px;
    background-position: 10px 27px;
  }
}
@media screen and (max-width: 800px) {
  .personalDetails .col-sm-6 {
    width: 100%;
  }
  .personalDetails .headerText {
    font-size: 36px;
  }
}
@media screen and (max-width: 767px) {
  .detailsContainer {
    margin-left: 0 !important;
  }
  .personalDetails .passwordContainer .changePasswordBtn,
  .personalDetails .footerButtons .btn {
    width: 100%;
  }
  .personalDetails .footerButtons .submit-personal-details {
    margin-bottom: 15px;
  }
  .personalDetails .detailsContainer .firstNameContainer {
    display: block;
  }
  .personalDetails .detailsContainer .firstNameContainer .titlePart {
    width: 100%;
    border-bottom: 2px solid #ddd !important;
    padding-bottom: 8px;
  }
}
/*company contacts */
@media screen and (max-width: 768px) {
  .serachDivPart input {
    padding: 24px 0px 24px 43px !important;
    background-position: 10px 27px !important;
  }
  .nested-nav-bar {
    background: #fff;
  }
  .nested-body-holder {
    padding-top: 0 !important;
  }
}
/* settings - communications */
@media screen and (max-width: 768px) {
  .orderReturnsPart .row.innerContainer {
    padding: 10px !important;
  }
}
@media screen and (max-width: 767px) {
  .nested-body-holder .container-fluid {
    padding: 0;
  }
  .row.accountContainer.orderReturnsPart .col-sm-12 {
    width: 100%;
  }
  .osvFooterButtons .osv-proofDelivery {
    width: 100%;
  }
  .osvFooterButtons span.footerRight {
    margin-left: 0;
    margin-top: 15px;
  }
  .detailsContainer .firstNameContainer {
    display: block !important;
  }
  .detailsContainer .firstNameContainer .titlePart {
    width: 100% !important;
    border-bottom: 2px solid #ddd !important;
    border-right: 0 !important;
  }
}
@media screen and (max-width: 480px) {
  .orderTables thead th:nth-child(3) img {
    float: right;
  }
  table.orderTables tbody tr td:nth-child(3) label, table.notificationTables tbody tr td:nth-child(3) label {
    margin: 6px 10px !important;
    float: right;
  }
  .accountContainer.orderReturnsPart .headerText {
    text-align: left;
  }
  .orderReturnsPart .orderTables .popupContainer {
    float: right;
    left: 24px;
    top: -20px;
  }
  .orderTables thead th:nth-child(1) {
    width: 140px;
  }
  .orderTables thead th:nth-child(2) {
    width: 70px;
  }
  .orderTables thead th:nth-child(3) {
    width: 80px;
  }
  table.orderTables tbody tr td:nth-child(1) {
    font-size: 15px;
    text-align: left;
    width: 100px;
    float: left;
  }
  table.orderTables tbody tr td:nth-child(2) label {
    float: right;
  }
  .notificationTables th:nth-child(1) {
    width: 100%;
  }
  span.preferedDetailsText {
    text-align: left;
  }
  .notificationTables tbody td {
    text-align: left;
  }
}
@media screen and (max-width: 360px) {
  .orderReturnsPart .orderTables .popupContainer {
    top: -19px;
  }
  .orderReturnsPart .notificationTables .popupContainer {
    position: absolute;
    left: 170px;
  }
}
/* localization */
@media screen and (min-width: 320px) {
  .localizationDiv .regionContainer .Image-caret select {
    background-position: right 8px;
  }
  /*.localizationDiv .regionContainer #preferencesTimeZoneDiv .input-select-wrapper, .localizationDiv #preferencesLanguageDiv .input-select-wrapper {
  	padding-right: 10px;
  	border-left: 0 !important;
  }*/
}
@media screen and (max-width: 1024px) {
  .localizationDiv .dateTimeContainer .col-sm-6 {
    width: 100%;
  }
  .localizationDiv .date-and-time-container {
    border-bottom: 0;
  }
  .localizationDiv .dateTimeContainer .dateFormatInfo.col-sm-6 {
    width: 50%;
  }
}
@media screen and (max-width: 992px) {
  .preferredContainer .col-sm-6.settings-container {
    width: 100%;
  }
  .OrdeStatusReturns .footerRight {
    margin-left: 0px;
    display: block;
    margin-top: 10px;
  }
  .dateFormatInfo.col-sm-12 {
    margin-top: 1em !important;
  }
}
@media screen and (min-width: 992px) and (max-width: 1419px) {
  .localizationDiv .footerButtons .btn {
    min-width: 40%;
  }
}
@media (max-width: 1024px) and (min-width: 768px) {
  .settings-container .personal-name .col-md-4, .settings-container .personal-name .col-md-8 {
    padding-left: 0px;
    margin-bottom: 0px;
  }
  .settings-container .personal-name .col-md-4 .input-select-wrapper {
    border-right: 2px solid #ddd;
  }
}
@media screen and (max-width: 768px) {
  .localizationDiv .regionContainer .col-sm-6, .localizationDiv .dateTimeContainer .col-sm-6, .localizationDiv .dateTimeContainer .dateFormatInfo.col-sm-6 {
    width: 100%;
  }
  .innerContainer .headerText {
    font-size: 36px !important;
  }
}
@media screen and (max-width: 767px) {
  .localizationDiv .dateTimeContainer .dateFormatInfo.col-sm-6 {
    margin-left: 0;
  }
  .nested-content-holder .nested-body-holder, .nested-nav-bar {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  /* .localizationDiv .footerButtons .btn {
      width: 100%;
  } */
  .localizationDiv .footerButtons .btn.submit-localization {
    margin-bottom: 20px;
    margin-top: 10px;
  }
  .localizationDiv .footerButtons .btn.cancelButton {
    margin-left: 0;
    /*margin-top: 6px;*/
  }
  /* Tasks Portlet */
  .row.accountContainer .col-sm-12 {
    width: 100%;
  }
}
/* DataTables */
@media screen and (max-width: 1024px) {
  .manage-user-portlet .manage-user-container .innerContainer .dataTables_wrapper .dataTables_filter {
    width: 44%;
  }
  .manage-user-portlet .manage-user-container .innerContainer .dataTables_wrapper #select-location-filter.select-user-location-filter {
    width: 32% !important;
  }
}
@media screen and (min-width: 769px) {
  table.dataTable.dtr-column > tbody > tr > td.control:before, table.dataTable.dtr-column > tbody > tr > th.control:before {
    display: none !important;
  }
}
@media screen and (max-width: 768px) {
  .manage-user-portlet .manage-user-container .innerContainer .dataTables_wrapper #select-location-filter {
    width: 38% !important;
    float: left !important;
    margin-top: 14px;
  }
  .manage-user-portlet .manage-user-container .innerContainer .dataTables_wrapper .dataTables_filter {
    width: 100%;
    margin-top: -30px;
  }
  .manage-user-portlet .manage-user-container .innerContainer .dataTables_wrapper .dataTables_length {
    position: relative;
    top: 79px;
  }
  .settings-page table.dataTable tr.odd {
    background-color: #f6f6f6;
  }
  .settings-page table.dataTable tbody tr.odd + tr.child, .settings-page table.dataTable tbody tr.odd + tr.child td:hover {
    background-color: #f6f6f6;
  }
  .settings-page table.dataTable tbody tr td {
    padding-left: 10px !important;
  }
  .settings-page table.dataTable > tbody > tr.child ul.dtr-details > li {
    border-bottom: 0 !important;
    padding: 0 !important;
    line-height: 20px;
  }
  .settings-page table.dataTable > tbody > tr.child span.dtr-title, table.dataTable > tbody > tr.child span.dtr-data {
    font-size: 12px;
    font-weight: normal !important;
    display: inline-flex;
  }
  .settings-page table.dataTable > tbody > tr.child span.dtr-title {
    margin-right: 15px;
  }
  table#myTable thead th .checkmark, table#myTable tbody td .checkmark {
    left: 16px !important;
  }
  table#manageUserTable thead th .checkmark, table#manageUserTable tbody td .checkmark {
    left: 14px;
  }
  table#myTable.dataTable.dtr-inline.collapsed > tbody > tr[role=row] > td:first-child::before {
    left: -1px !important;
    top: 22px !important;
  }
  table#manageUserTable.dataTable.dtr-inline.collapsed > tbody > tr[role=row] > td:first-child::before {
    left: -1px !important;
    top: 11px !important;
  }
  .settings-page table thead th:first-child {
    padding-left: 4px;
  }
  .settings-page table.dataTable.collapsed tbody tr td {
    background-color: transparent;
  }
  table.dataTable.dtr-column > tbody > tr.child ul.dtr-details {
    padding: 0 0 0 17px;
  }
}
@media screen and (max-width: 767px) {
  .manage-user-portlet .manage-user-container .innerContainer .dataTables_wrapper .dataTables_filter {
    width: 96%;
    margin-left: 12px;
  }
  .settings-page .dataTableFootercom .dataTables_info, .settings-page .dataTableFootertask .dataTables_info,
  .settings-page .dataTableFooterprocess .dataTables_info {
    display: none;
  }
  .settings-page .dataTables_length label {
    width: 100px;
    color: #fff !important;
    margin-top: -11px !important;
  }
  .settings-page .dataTables_length select {
    height: 40px !important;
  }
  .settings-page .dataTables_wrapper .dataTables_paginate {
    float: none !important;
    text-align: center !important;
    display: block;
  }
  table#myTable {
    padding-left: 6px;
  }
  .footerButtons.tbl_footerButtons button {
    width: 100%;
    margin-left: 0;
    margin-bottom: 18px;
  }
  .dataTables_wrapper #myTable_filter {
    margin-left: 10px;
  }
}
@media screen and (max-width: 360px) {
  .manage-user-portlet .manage-user-container .innerContainer .dataTables_wrapper #select-location-filter {
    width: 60% !important;
  }
  .manage-user-portlet .manage-user-container .innerContainer .dataTables_wrapper .dataTables_length {
    top: 84px;
  }
  .manage-user-portlet .manage-user-container .innerContainer .dataTables_wrapper #select-location-filter select {
    height: 40px;
  }
  .manage-user-portlet .manage-user-container .innerContainer .dataTables_wrapper .dataTables_filter {
    width: 93%;
    margin-left: 12px;
  }
}
@media screen and (max-width: 320px) {
  #myTable_filter {
    width: 56%;
  }
}
/* Pop Ups */
/* Tools Catalog, Manage-Users, ESM Error Modal */
@media screen and (max-width: 999px) {
  #my-content-div #dialogId {
    /* Only the width narrows on small screens - see the note on the rule below.
       The old `left: 0 !important; margin: 0 auto !important; top: 10px` could
       not centre a fixed box and cancelled the base centring, which is why the
       pin dialog still sat off-centre (and clipped) on narrow screens. */
    width: 96% !important;
    max-width: 96% !important;
  }
  /* #manageUserModal is a separate dialog with NO base positioning rule of its
     own - this media query is the only thing that places it - so it keeps the
     original declarations. */
  #manageUserModal .modal-dialog {
    width: 96% !important;
    left: 0px !important;
    margin: 0 auto !important;
    top: 10px !important;
  }
  #_esmErrorPopup .modal-dialog, #my-content-div1 .modal-dialog {
    /* Only the width narrows on small screens. Positioning is left to the base
       rules, which centre the dialog horizontally with `left: 50%` +
       `translateX(-50%)` and anchor it to the top.

       `left: 0 !important; margin: 0 auto !important` cannot centre anything
       here - `margin: auto` is ignored on a fixed box unless BOTH `left` and
       `right` are set - so it pinned the dialog to the left edge with all the
       slack on the right AND cancelled the base centring, which left the popup
       off-centre again on every screen under 999px. */
    width: 96% !important;
    max-width: 96% !important;
  }
  #my-content-div #dialogId .modal-body {
    top: 0;
    padding: 0 25px !important;
  }
  #my-content-div #dialogId.modal-dialog .modal-content .modal-body h3, #manageUserModal .modal-dialog h3 {
    font-size: 36px;
  }
  #my-content-div #dialogId.modal-dialog .modal-content .modal-body .toolSubHeaderText {
    margin-top: 10px;
  }
  #my-content-div #dialogId.modal-dialog .modal-content .modal-footer {
    padding: 0 25px 25px;
  }
  #my-content-div #dialogId.modal-dialog .modal-content .modal-footer .sucessButton, #my-content-div #dialogId.modal-dialog .modal-content .modal-footer .cancelButton {
    width: 100%;
  }
  #manageUserModal .modal-dialog .modal-footer.footerButtons {
    background: #fff;
    padding: 0px 15px !important;
  }
}
/* Dashboard widget */
@media screen and (max-width: 1420px) and (min-width: 1279px) {
  [data-sizex="2"] {
    max-width: 593px;
  }
}
@media screen and (max-width: 1279px) and (min-width: 1262px) {
  [data-sizex="2"] {
    max-width: 585px;
  }
  .quickLinksText {
    white-space: unset !important;
    line-height: 32px !important;
    width: 100% !important;
  }
  .quickLinks {
    background: #fff !important;
  }
}
@media screen and (max-width: 1262px) and (min-width: 1259px) {
  [data-sizex="2"] {
    max-width: 582px;
  }
  .quickLinksText {
    white-space: unset !important;
    line-height: 25px !important;
    width: 100% !important;
  }
  .quickLinks {
    background: #fff !important;
  }
}
@media screen and (max-width: 1259px) and (min-width: 1239px) {
  [data-sizex="2"] {
    max-width: 582px;
  }
  .quickLinksText {
    white-space: unset !important;
    line-height: 22px !important;
    width: 100% !important;
  }
  .quickLinks {
    background: #fff !important;
  }
}
@media screen and (max-width: 1239px) and (min-width: 1220px) {
  [data-sizex="2"] {
    max-width: 565px;
  }
  .quickLinksText {
    white-space: unset !important;
    line-height: 22px !important;
    width: 100% !important;
  }
  .quickLinks {
    background: #fff !important;
  }
}
@media screen and (device-width: 1219px) {
  #dashboard_grid [data-col="4"] {
    left: 870px;
  }
  #dashboard_grid [data-col="3"] {
    left: 580px;
  }
  [data-sizex="2"] {
    max-width: 565px;
  }
  #dashboard_grid [data-col="2"] {
    left: 288px;
  }
  .quickLinksText {
    white-space: unset !important;
    line-height: 22px !important;
    width: 100% !important;
  }
  .quickLinks {
    background: #fff !important;
  }
}
@media screen and (max-width: 1219px) and (min-width: 1211px) {
  [data-sizex="2"] {
    max-width: 560px;
  }
  .quickLinksText {
    white-space: unset !important;
    line-height: 22px !important;
    width: 100% !important;
  }
  .quickLinks {
    background: #fff !important;
  }
}
@media screen and (max-width: 1211px) and (min-width: 1189px) {
  [data-sizex="2"] {
    max-width: 556px;
  }
  .quickLinksText {
    white-space: unset !important;
    line-height: 22px !important;
    width: 100% !important;
  }
  .quickLinks {
    background: #fff !important;
  }
}
@media screen and (device-width: 1210px) {
  #dashboard_grid [data-col="4"] {
    left: 863px;
  }
  #dashboard_grid [data-col="3"] {
    left: 574px;
  }
  [data-sizex="2"] {
    max-width: 558px;
  }
  #dashboard_grid [data-col="2"] {
    left: 287px;
  }
  .quickLinksText {
    white-space: unset !important;
    line-height: 22px !important;
    width: 100% !important;
  }
  .quickLinks {
    background: #fff !important;
  }
}
@media screen and (device-width: 1190px) {
  #dashboard_grid [data-col="4"] {
    left: 850px;
  }
  #dashboard_grid [data-col="3"] {
    left: 568px;
  }
  [data-sizex="2"] {
    max-width: 556px;
  }
  #dashboard_grid [data-col="2"] {
    left: 284px;
  }
  .quickLinksText {
    white-space: unset !important;
    line-height: 22px !important;
    width: 100% !important;
  }
  .quickLinks {
    background: #fff !important;
  }
}
@media screen and (device-width: 1189px) {
  [data-sizex="2"] {
    max-width: 545px;
  }
  .quickLinksText {
    white-space: unset !important;
    line-height: 22px !important;
    width: 100% !important;
  }
  .quickLinks {
    background: #fff !important;
  }
}
@media screen and (max-width: 1189px) and (min-width: 1181px) {
  [data-sizex="2"] {
    max-width: 542px;
  }
  .quickLinksText {
    white-space: unset !important;
    line-height: 22px !important;
    width: 100% !important;
  }
  .quickLinks {
    background: #fff !important;
  }
}
@media screen and (max-width: 1181px) and (min-width: 1169px) {
  [data-sizex="2"] {
    max-width: 540px;
  }
  .quickLinksText {
    white-space: unset !important;
    line-height: 22px !important;
    width: 100% !important;
  }
  .quickLinks {
    background: #fff !important;
  }
}
@media screen and (device-width: 1169px) {
  #dashboard_grid [data-col="4"] {
    left: 830px;
  }
  #dashboard_grid [data-col="3"] {
    left: 554px;
  }
  [data-sizex="2"] {
    max-width: 540px;
  }
  #dashboard_grid [data-col="2"] {
    left: 276px;
  }
  .quickLinksText {
    white-space: unset !important;
    line-height: 22px !important;
    width: 100% !important;
  }
  .quickLinks {
    background: #fff !important;
  }
}
@media screen and (max-width: 1169px) and (min-width: 1148px) {
  [data-sizex="2"] {
    max-width: 530px;
  }
  .quickLinksText {
    white-space: unset !important;
    line-height: 22px !important;
    width: 100% !important;
  }
  .quickLinks {
    background: #fff !important;
  }
}
@media screen and (device-width: 1149px) {
  #dashboard_grid [data-sizex="1"] {
    width: 23.6%;
  }
  #dashboard_grid [data-col="4"] {
    left: 818px;
  }
  #dashboard_grid [data-col="3"] {
    left: 546px;
  }
  [data-sizex="2"] {
    max-width: 530px;
  }
  #dashboard_grid [data-col="2"] {
    left: 272px;
  }
  .quickLinksText {
    white-space: unset !important;
    line-height: 22px !important;
    width: 100% !important;
  }
  .quickLinks {
    background: #fff !important;
  }
  .quickLinksContainer .nextLink {
    margin-top: 8px;
  }
}
@media screen and (max-width: 1148px) and (min-width: 1139px) {
  [data-sizex="2"] {
    max-width: 524px;
  }
  .quickLinksText {
    white-space: unset !important;
    line-height: 22px !important;
    width: 100% !important;
  }
  .quickLinks {
    background: #fff !important;
  }
}
@media screen and (device-width: 1139px) {
  #dashboard_grid [data-sizex="1"] {
    width: 23.6%;
  }
  #dashboard_grid [data-col="4"] {
    left: 810px;
  }
  #dashboard_grid [data-col="3"] {
    left: 540px;
  }
  [data-sizex="2"] {
    max-width: 525px;
  }
  #dashboard_grid [data-col="2"] {
    left: 270px;
  }
  .quickLinksText {
    white-space: unset !important;
    line-height: 22px !important;
    width: 100% !important;
  }
  .quickLinks {
    background: #fff !important;
  }
}
@media screen and (max-width: 1139px) and (min-width: 1120px) {
  [data-sizex="2"] {
    max-width: 514px;
  }
  .quickLinksText {
    white-space: unset !important;
    line-height: 22px !important;
    width: 100% !important;
  }
  .quickLinks {
    background: #fff !important;
  }
}
@media screen and (device-width: 1119px) {
  #dashboard_grid [data-sizex="1"] {
    width: 23.6%;
  }
  #dashboard_grid [data-col="4"] {
    left: 794px;
  }
  #dashboard_grid [data-col="3"] {
    left: 528px;
  }
  [data-sizex="2"] {
    max-width: 515px;
  }
  #dashboard_grid [data-col="2"] {
    left: 264px;
  }
  .quickLinksText {
    white-space: unset !important;
    line-height: 22px !important;
    width: 100% !important;
  }
  .quickLinks {
    background: #fff !important;
  }
}
@media screen and (device-width: 1118px) {
  [data-sizex="2"] {
    max-width: 504px;
  }
  .quickLinksText {
    white-space: unset !important;
    line-height: 22px !important;
    width: 100% !important;
  }
  .quickLinks {
    background: #fff !important;
  }
}
@media screen and (max-width: 1118px) and (min-width: 1100px) {
  [data-sizex="2"] {
    max-width: 504px;
  }
  .quickLinksText {
    white-space: unset !important;
    line-height: 22px !important;
    width: 100% !important;
  }
  .quickLinks {
    background: #fff !important;
  }
}
@media screen and (max-width: 1100px) and (min-width: 1090px) {
  [data-sizex="2"] {
    max-width: 500px;
  }
  .quickLinksText {
    white-space: unset !important;
    line-height: 22px !important;
    width: 100% !important;
  }
  .quickLinks {
    background: #fff !important;
  }
}
@media screen and (max-width: 1090px) and (min-width: 1081px) {
  [data-sizex="2"] {
    max-width: 495px;
  }
  .quickLinksText {
    white-space: unset !important;
    line-height: 22px !important;
    width: 100% !important;
  }
  .quickLinks {
    background: #fff !important;
  }
}
@media screen and (max-width: 1081px) and (min-width: 1025px) {
  #dashboard_grid [data-col="2"] {
    left: 358px;
  }
  #dashboard_grid [data-sizex="1"] {
    width: 325px;
  }
  #dashboard_grid [data-row="1"][data-col="4"] {
    left: 700px;
  }
  #dashboard_grid [data-row="1"][data-col="3"] {
    top: 416px;
    left: 700px;
  }
  #dashboard_grid [data-col="1"] {
    left: 20px;
  }
  [data-sizex="2"] {
    max-width: 660px;
  }
  .quickLinksText {
    white-space: unset !important;
    line-height: 38px !important;
    width: 100% !important;
  }
  .quickLinks {
    background: #fff !important;
  }
}
@media screen and (max-width: 1025px) and (min-width: 999px) {
  [data-sizex="2"] {
    max-width: 658px;
  }
  #dashboard_grid [data-row="1"][data-col="3"] {
    top: 416px;
    left: 694px;
  }
  #dashboard_grid [data-col="1"], #dashboard_grid [data-row="2"][data-col="3"] {
    left: 18px;
  }
  #dashboard_grid [data-col="2"] {
    left: 355px;
  }
  .quickLinksText {
    white-space: unset !important;
    width: 100% !important;
  }
}
@media screen and (max-width: 999px) and (min-width: 768px) {
  [data-sizex="2"] {
    width: 99% !important;
  }
  .quickLinksText {
    white-space: unset !important;
    line-height: 40px !important;
    width: 100% !important;
  }
}
@media screen and (max-width: 992px) {
  #Selectondiv .DivLanguageDD {
    border-right: 2px solid #ddd !important;
  }
}
@media screen and (min-width: 1281px) {
  header#banner #heading .headerIcons ul.nav-icons-list li.profile-img .dropdown-menu {
    z-index: 100 !important;
  }
}
@media screen and (max-width: 768px) {
  .recentlyInnerContainer .cardPage-body {
    background-image: none;
  }
  .overviewSub.recentlyContainer .recentlyInnerContainer .col-sm-6:last-child {
    display: none;
  }
  .carousel-caption.d-md-block.myCap {
    display: block !important;
  }
}
@media screen and (max-width: 1024px) {
  .has-control-menu #wrapper {
    margin-left: 10px;
    margin-right: 10px;
  }
}
/* ==========================================================================
   HPE Partner Portal home page — responsive across all devices
   Sections: hero carousel, "What's new", Browse HPE Solutions, Top Tools
   dashboard, and "Recommended for you". These fragments/portlets live in the
   Liferay CMS (their markup is not in the repo), so the layout is corrected
   here with global, class-scoped responsive rules. Validated live on
   partner-stg2 at desktop/tablet/mobile widths (no horizontal overflow, each
   section stacks cleanly).
   ========================================================================== */
/* Prevent any single fixed-width fragment from forcing horizontal scroll on
   small screens.
   `overflow-x` is applied to <html> only: on <body> it also forces
   `overflow-y: auto`, making <body> a scroll container and silently disabling
   `position: sticky` on the header and horizontal nav (see the note in
   _common.scss). <body> keeps the width cap, which is what actually prevents
   the overflow. */
html,
body {
  max-width: 100%;
}

html {
  overflow-x: hidden;
}

/* "Recommended for you" portlet uses a fixed 0 160px inset that is far too
   wide on tablet/mobile; scale it down with the viewport. */
@media screen and (max-width: 1200px) {
  #portlet_com_hpe_prp_recommended_article_web {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}
/* The section heading uses the Figma H2 token (52/58) at desktop; step it
   down through H3 and H4 on smaller screens so it stays in proportion,
   mirroring the "Top tools" heading breakpoints. */
@media screen and (max-width: 900px) {
  #portlet_com_hpe_prp_recommended_article_web .autofit-col.autofit-col-expand h2 {
    font-size: 36px;
    line-height: 42px;
    letter-spacing: -0.36px;
  }
}
@media screen and (max-width: 560px) {
  #portlet_com_hpe_prp_recommended_article_web .autofit-col.autofit-col-expand h2 {
    font-size: 28px;
    line-height: 34px;
    letter-spacing: -0.28px;
  }
}
/* "What's new" cards are a fixed 4x280px grid; make the column count fluid. */
@media screen and (max-width: 1024px) {
  .wn-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media screen and (max-width: 767px) {
  .wn-grid {
    grid-template-columns: 1fr !important;
  }
  #portlet_com_hpe_prp_recommended_article_web {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* Browse HPE Solutions: the Type/Market/Solution/Browse row is a nowrap
     flex row (inline-styled by the React widget). Let it wrap and stack so
     each control is full width and legible on phones. */
  .search-explorer-inner-container {
    flex-wrap: wrap !important;
  }
  .search-explorer-inner-container > * {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
  /* Top Tools heading gutter matches the surrounding mobile inset. */
  .toolHeader {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}
.opt-srch {
  padding: 24px;
}

.opr-role-section {
  margin-top: 48px;
}

.opt-personal .error-message-title {
  font-family: HPE Graphik;
  font-style: normal;
  font-weight: 600;
  font-size: 24px;
  line-height: 30px;
  color: #FFFFFF;
  padding-bottom: 12px;
}

/* `.error-message-field-extended` belongs to other modules
   (opr-extended-details-web view.jsp, opr-okta-details-web details.jsp) and
   deliberately keeps the legacy solid #CA2B4E band. `.error-message-field`
   used to be grouped here too; it has been split out into the inline
   notification block below. */
.opt-personal .error-message-field-extended {
  margin-bottom: 24px;
  background: #CA2B4E;
  font-family: HPE Graphik;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 20px;
  padding: 20px 60px;
  color: #fff;
  background-image: url(../images/icons/error-close.png);
  background-repeat: no-repeat;
  background-position: 24px 24px;
  border-radius: 12px;
}

/* =========================================================================
   Settings error banners - HPE inline notification
   -------------------------------------------------------------------------
   Reproduces `overlay_red_tools` from prp-react/prp-tool-catalog-web
   (css/index.css) so these banners are identical to the tool-catalog critical
   notification. The component is reproduced here rather than imported because
   that stylesheet belongs to a React module and is not loaded on Settings
   pages.

   Two banners share the treatment. They keep their own inner hook names
   because each is rendered by a different module:

     * `.opt-communication .error-message-field-comm` - inner hooks
       `comm-error__*`, rendered by prp-communication-setting-portlet
       (jsp/opsui.jsp, jsp/manage_user_view.jsp).
     * `.opt-personal .error-message-field` - inner hooks `pd-error__*`,
       rendered by opr-personal-details-web (view.jsp, setting-view.jsp,
       manage_user/edit_user.jsp).

   Both used to sit in the `.opt-personal`/`.opt-communication` groups above,
   which painted the solid #CA2B4E band with white 24px copy. They have been
   split out so ONLY these two banners change - `.error-message-field-extended`
   and `.global-error-message-field` keep their existing treatment.
   ========================================================================= */
/* The outer element is only the wrapper and must stay a plain block: the
   scripts toggle it with jQuery .show()/.hide() (personal-details.js:322,
   edit-user-personal-details.js:295, setting-view.jsp:2594,
   custom_script_opsui.jsp:707, custom_script_manage_user.jsp:1052,
   prp-user-management-global-save-web view.jsp:172), which writes
   `display: block`/`none` INLINE and would beat a `display: flex` declared
   here. The flex row therefore lives on the inner `*-error__content`, exactly
   as the reference keeps the row on `.overlay_Content_downtime_tools` rather
   than on `.overlay_red_tools`. The legacy band's paint properties are
   explicitly reset because a stale copy of the old grouped rule may still ship
   in another stylesheet. */
.opt-communication .error-message-field-comm,
.opt-personal .error-message-field {
  box-sizing: border-box;
  width: 100%;
  margin: 12px 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  background-image: none;
  color: inherit;
  font-family: "HPE Graphik", Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
}

/* `.overlay_red_tools .overlay_Content_downtime_tools`: the notification
   surface plus the flex row that lays the banner out. */
.opt-communication .error-message-field-comm .comm-error__content,
.opt-personal .error-message-field .pd-error__content {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--fig-notification-inline-medium-gap, 12px);
  padding: var(--fig-notification-inline-medium-paddingY, 6px) var(--fig-notification-inline-medium-paddingX, 12px);
  min-height: 60px;
  box-sizing: border-box;
  width: 100%;
  border-radius: var(--fig-notification-inline-medium-borderRadius, 6px);
  border: var(--fig-notification-inline-medium-borderWidth, 0) solid var(--fig-notification-inline-critical-rest-border, rgba(0, 0, 0, 0));
  background: var(--fig-notification-inline-critical-rest-background, #FFECEC);
}

/* `.overlay_Content_downtime_tools .status-icon` + the critical variant.
   The reference points at its own `images/status-critical.svg` (#CC1F1A); that
   asset lives in the React module, and the theme's `status-red.svg` is the same
   diamond in a brighter #EC3331 - so the reference icon is inlined here to
   match it exactly without introducing a new asset or a cross-module URL. */
.opt-communication .error-message-field-comm .comm-error__icon,
.opt-personal .error-message-field .pd-error__icon {
  flex: none;
  display: block;
  width: 15px;
  height: 25px;
  margin: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M7.23182 0.318191C7.65607 -0.106064 8.34393 -0.106064 8.76818 0.318191L15.6818 7.23182C16.1061 7.65607 16.1061 8.34393 15.6818 8.76818L8.76818 15.6818C8.34393 16.1061 7.65607 16.1061 7.23182 15.6818L0.318191 8.76818C-0.106064 8.34393 -0.106064 7.65607 0.318191 7.23182L7.23182 0.318191Z' fill='%23CC1F1A'/%3E%3C/svg%3E");
}

/* `.overlay_Content_downtime_tools .overlay_text`: title and message stack
   directly on top of each other (6 + 24 + 24 + 6 = the 60px banner). */
.opt-communication .error-message-field-comm .comm-error__text,
.opt-personal .error-message-field .pd-error__text {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1 1 auto;
  min-width: 0;
}

/* `.overlay_header h4` - Figma "Title" (text/medium/medium): weight 500.
   `.error-message-title` is kept on the element (it is the class the markup
   has always carried) and is reset here, so nothing is left of the white
   24px/30px heading the old grouped rule gave it. The `.error-message-field`
   in the selector is what outranks `.opt-personal .error-message-title`
   above - (0,3,0) beats (0,2,0). */
.opt-communication .error-message-field-comm .error-message-title,
.opt-communication .error-message-field-comm .comm-error__title,
.opt-personal .error-message-field .error-message-title,
.opt-personal .error-message-field .pd-error__title {
  min-height: 24px;
  margin: 0;
  padding: 0;
  background: none;
  font-family: var(--base-fontFamily-primary, "HPE Graphik");
  font-size: var(--text-medium-fontSize, 16px);
  font-style: normal;
  font-weight: var(--fontWeight-medium, 500);
  line-height: var(--text-medium-lineHeight, 24px);
  color: var(--fig-notification-inline-critical-rest-title-textColor, #292D3A);
}

/* `.overlay_message` - Figma "Message and link" (text/medium/regular). */
.opt-communication .error-message-field-comm .comm-error__message,
.opt-personal .error-message-field .pd-error__message {
  margin: 0;
  padding: 0;
  background: none;
  font-family: var(--base-fontFamily-primary, "HPE Graphik");
  font-size: var(--text-medium-fontSize, 16px);
  font-style: normal;
  font-weight: var(--font-weight-normal, 400);
  line-height: var(--text-medium-lineHeight, 24px);
  color: var(--fig-notification-inline-neutral-rest-message-textColor, #3E4550);
}

.opt-communication .error-message-field-comm .comm-error__message p,
.opt-personal .error-message-field .pd-error__message p {
  margin: 0;
  font: inherit;
  color: inherit;
}

.global-error-message-field {
  background: #CA2B4E;
  font-family: HPE Graphik;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 20px;
  padding: 20px 60px;
  color: #fff;
  background-image: url(../images/icons/error-close.png);
  background-repeat: no-repeat;
  background-position: 24px 24px;
}

.global-error-message-field .global-error-message-title {
  font-family: HPE Graphik;
  font-style: normal;
  font-weight: 600;
  font-size: 24px;
  line-height: 30px;
  color: #FFFFFF;
  padding-bottom: 12px;
}

.mdcp-service-success-message {
  padding: 20px 60px;
  background: var(--hpe-color-decorative-brand) -webkit-linear-gradient(bottom, var(--hpe-color-decorative-brand) 0%, var(--hpe-color-decorative-brand) 100%);
  font-family: HPE Graphik;
  font-size: 16px;
  color: white;
  padding-left: 12px !important;
}

/* --- Task approve / decline confirmation ---------------------------------- *
 * Restyled to match the notifications toast — SuccessToast.jsx and
 * `.prp-notification-success-toast` in prp-notitfication-web/css/index.css:
 * mint background, brand-green dot, dark text, dismiss button.
 *
 * SCOPED to the two task banners on purpose. `.mdcp-service-success-message`
 * is shared by several modules (company relationship, marketing campaigns,
 * user management, ...), so the solid-brand base rule above has to keep
 * working unchanged for all of them. Specificity here is (0,2,0) vs the
 * base's (0,1,0), so these win without !important.
 *
 * Deliberately NOT copying the toast's `position: fixed` + `min-width: 360px`
 * / `max-width: 540px`: this stays an in-flow, full-width banner inside
 * `.task-container`, which is the width it already has. Only the skin changes.
 * The base `padding: 20px 60px` is inherited for the same reason — keeping it
 * leaves the block's footprint identical.                                     */
.mdcp-service-success-message.success-message-task,
.mdcp-service-success-message.success-message-task-decline {
  background: #C2F5E0;
  color: #333333;
  font-family: "HPE Graphik", sans-serif;
  font-size: 16px;
  border-radius: 8px;
}

/* The flex row sits on the inner wrapper, never on the banner itself: jQuery
 * `.show(500)` / `.slideUp(500)` write inline `display` on the banner, so a
 * `display: flex` there would be clobbered by the animation. */
.mdcp-service-success-message.success-message-task .task-success-body,
.mdcp-service-success-message.success-message-task-decline .task-success-body {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

/* --- Manage user > Personal details save confirmation --------------------- *
 * Same toast as the two task banners above, so the "user details saved"
 * confirmation on Settings > Manage users > Personal details reads identically
 * to Settings > Administration > Tasks.
 *
 * Scoped with `.opt-personal` - the wrapper edit_user.jsp already uses for its
 * error banner - because `.success-message-field` is shared with
 * opr-marketing-campign-web (view.jsp `.success-message-field.mc-success-block`),
 * which must keep the legacy band. (0,2,0) here beats the legacy (0,1,0)
 * `.success-message-field` rule further down this file, so ordering does not
 * matter and no !important is needed.
 *
 * The legacy paint properties are reset explicitly: `height: 48px` would clip a
 * wrapped message and status_good.png would double up with the brand dot. The
 * `padding: 20px 60px` of the `.mdcp-service-success-message` base is adopted so
 * the block matches the task banner's footprint. As there, `display` is left
 * alone on the wrapper - it is animated with jQuery `.show()` / `.slideUp()`,
 * which write it inline - and the flex row lives on `.pd-success__body`. */
.opt-personal .success-message-field {
  box-sizing: border-box;
  height: auto;
  padding: 20px 60px;
  border-radius: 8px;
  background: #C2F5E0;
  background-image: none;
  color: #333333;
  font-family: "HPE Graphik", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
}

.opt-personal .success-message-field .pd-success__body {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

/* Matches .prp-notification-success-toast-circle */
.mdcp-service-success-message .task-success-icon,
.opt-personal .success-message-field .pd-success__icon {
  flex-shrink: 0;
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-top: 3px; /* optical align with the 16px/1.4 first line */
  border-radius: 50%;
  background-color: #01a982;
}

.mdcp-service-success-message .task-success-text,
.opt-personal .success-message-field .pd-success__text {
  flex: 1;
  line-height: 1.4;
}

/* Matches .prp-notification-success-toast-close */
.mdcp-service-success-message .task-success-close,
.opt-personal .success-message-field .pd-success__close {
  flex-shrink: 0;
  margin-left: 8px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  color: #333333;
}

.mdcp-service-success-message .task-success-close:hover,
.opt-personal .success-message-field .pd-success__close:hover {
  color: #000000;
}

.opt-srch .row .col-md-3, .opt-srch .row .col-md-2, .opt-srch .row .col-md-8 {
  padding: 0px;
  margin: 0px;
}

.opt-srch span.glyphicon.glyphicon-search {
  position: absolute;
  color: #3E4550;
  font-size: 16px;
  top: 18px !important;
  cursor: pointer;
  right: 15px !important;
}

.opt-srchbox, .opt-srchby {
  height: 48px;
  width: 100%;
  left: 0px;
  top: 0px;
  border: 2px solid #DDDDDD;
  box-sizing: border-box;
  border-radius: 0px;
  padding: 5px 12px;
  background-color: transparent;
  font-size: 16px;
  color: #3E4550;
}

.opt-srchbox:focus, .opt-srchby:focus {
  box-shadow: none;
  border-color: #ddd;
}

.opt-srch .secondaryButton {
  height: 36px;
  margin-left: 16px;
  background-image: url(../images/icons/user_setting.svg) !important;
  background-repeat: no-repeat !important;
  background-size: 24px !important;
  background-position: left 25px top 10px !important;
  padding: 12px 24px 12px 60px;
  transition: 0.1s ease-in-out;
}

.opt-srchby {
  border-right: 0px;
  font-family: HPE Graphik;
  font-style: normal;
  font-weight: normal;
  font-size: 19px;
  line-height: 24px;
  color: #333333;
}

.heading-3 {
  color: #333333;
  font-family: HPE Graphik;
  font-size: 24px;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 30px;
}

.secondaryButton:focus, .secondaryButton.focus, .secondaryButton:active:focus, .secondaryButton:active.focus,
.secondaryButton.active:focus, .secondaryButton.active.focus {
  outline: 0px;
  box-shadow: none;
}

#Selectondiv .DivLanguageDD {
  display: block;
  padding: 4px 12px;
  width: 140px;
  height: 36px;
  background-image: url(../images/icons/Up.svg) !important;
  background-size: 12px;
  background-position: right 10px top 17px !important;
  background-repeat: no-repeat !important;
  border: 1px solid #B1B9BE;
  border-radius: 8px;
}

.opt-srch .clearable-input {
  position: absolute;
  right: 0px;
  top: 0px;
  cursor: pointer;
}

#Selectondiv label.selectoneDD {
  width: 100%;
  height: 48px;
  padding: 24px 12px;
  user-select: none;
  font-weight: 600 !important;
  line-height: 0px !important;
}

#Selectondiv .DivLanguageDD .LabelLabel {
  font-family: HPE Graphik;
  font-style: normal;
  font-weight: normal;
  font-size: 19px;
  line-height: 24px;
  color: #333333;
  text-overflow: ellipsis;
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
}

.campaingn-list #Selectondiv .DivLanguageDD .LabelLabel {
  font-size: 16px;
}

#Selectondiv .selectoneDD {
  margin: 0 !important;
  padding: 14px;
  color: #FFFFFF !important;
  font-family: HPE Graphik !important;
  font-size: 19px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
  background-color: #000000 !important;
  position: relative;
  background-image: url(../images/icons/nav-up-white.png) !important;
  background-size: 14px;
  background-position: right 10px top 20px !important;
  background-repeat: no-repeat;
  display: block;
}

#Selectondiv .DivMenuDD {
  width: 100%;
  position: absolute;
  z-index: 9;
  filter: drop-shadow(0px 12px 24px rgba(51, 51, 51, 0.25));
}

#Selectondiv .DivMenuDD, #Selectondiv .DivMenuDD label {
  user-select: none;
}

#Selectondiv .language-entry-long-text {
  width: 140px;
  min-height: 48px;
  display: block;
  z-index: 5;
  position: relative;
  padding: 8px 24px;
  color: #333333;
  font-family: HPE Graphik;
  font-size: 19px;
  line-height: 22px;
  background-color: #F6F6F6;
  font-weight: 400;
  margin: 0px;
  cursor: pointer;
}

#Selectondiv .language-entry-long-text:hover {
  background-color: #e7e7e7;
}

#Selectondiv .hidding {
  display: none;
}

.opt-personal {
  margin-top: 24px;
}

.multiobj .multi-sel {
  height: 58px !important;
  margin-bottom: 4px !important;
}

.personal-field .Sal-field .col-md-2 .input-select-wrapper {
  border-right: 0px;
}

.mid-field .col-md-2 .input-text-wrapper {
  border-left: 0px;
}

.heading-1-default {
  color: #000000;
  font-family: HPE Graphik;
  font-size: 48px;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 54px;
}

.paragraph-16 {
  color: #000000;
  font-family: HPE Graphik;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 24px;
}

.heading-4-strong-black {
  color: #000000;
  font-family: HPE Graphik;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 24px;
}

.heading-3-strong-black {
  font-family: HPE Graphik;
  font-style: normal;
  font-weight: 600;
  font-size: 24px;
  line-height: 30px;
  color: #000000;
}

.paragraph-16 {
  color: #000000;
  font-family: HPE Graphik;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 24px;
}

.opt-personal .organization-data {
  background: #F6F6F6;
  padding: 24px;
}

table.organization-data-table {
  line-height: 60px;
  width: 100%;
}

.opt-personal .organization-data-table td {
  font-family: HPE Graphik;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  color: #666666;
  line-height: 20px;
  padding-right: 30px;
}

.opt-personal .row.accountContainer .prpNavTabs.nav.nav-tabs.nav-tabs-default {
  font-family: HPE Graphik;
  font-style: normal;
  font-weight: 600;
  font-size: 19px;
  line-height: 24px;
  color: #333333;
  padding-top: 24px;
  margin-bottom: 0px;
}

.opt-personal .accountContainer .tab-content .tab-pane table#activeTable th {
  padding: 12px;
  font-family: HPE Graphik;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 20px;
  color: #333333;
}

.row .accountContainer .tab-content .tab-pane {
  padding-right: 0px;
}

.nested-body-holder .portlet-title-text {
  font-family: HPE Graphik;
  font-style: normal;
  font-weight: 600;
  font-size: 28px;
  line-height: 34px;
  color: #292D3A;
  margin-bottom: 48px;
  padding: 0px;
  text-wrap: auto;
  text-align: left;
  overflow: initial !important;
}

.nested-body-holder .portlet-content, .nested-body-holder .portlet-content h2 {
  padding: 0;
  margin: 0;
}

.opt-personal .settings-container .dynamicDivSalutation .input-select-wrapper {
  border-right: 0px;
}

.dynamicDivMiddleInitial .input-text-wrapper label.control-label {
  clear: both;
  display: inline-block;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  height: 24px;
}

.dynamicDivMiddleInitial .form-group.input-text-wrapper {
  border-left: 0px;
}

.dynamicDivCountry .form-group.input-select-wrapper {
  border-right: 0px;
}

.dynamicDivState .form-group.input-select-wrapper {
  border-right: 0px;
}

.opt-personal .settings-container .col-md-6 {
  padding-left: 0px;
}

.global-save-cancel {
  padding: 24px 48px;
  content: "";
  clear: both;
  display: block;
  background: #fff;
  border-top: 2px solid #CCCCCC;
  text-align: right;
  width: 100%;
}

.global-save-cancel-button #global-action-cancel {
  margin-right: 24px;
}

.nested-body-holder .portlet-decorate .portlet-content {
  padding-right: 0px;
}

.opt-personal .settings-container .maindiv {
  padding: 0px 40px 40px 0px;
}

.opt-personal .errormsg, .opt-srch .errormsg {
  display: none;
  position: absolute;
  top: 64px;
  left: 0;
  font-family: HPE Graphik;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 24px;
  color: #CC1F1A !important;
  padding-top: 6px;
}

.opt-personal .errormsg img {
  margin: 0px 4px 1px 0;
  width: 12px;
  height: 12px;
}

.opt-personal .settings-container .form-group.input-text-wrapper.field-error, .opt-personal .settings-container .form-group.input-select-wrapper.field-error,
.opt-srch .settings-container .form-group.input-text-wrapper.field-error {
  position: relative;
  z-index: 1;
  background: transparent;
  height: auto;
  min-height: 90px !important;
}

.opt-personal .multiobj .errormsg {
  top: 165px;
}

.opt-personal .multiobj.fieldVisibilityjobTitle .form-group.input-select-wrapper.field-error {
  min-height: 195px !important;
}

.opt-personal .multiobj .form-group.input-select-wrapper.field-error {
  border: 1px solid #CA2B4E;
  position: relative;
  z-index: 1;
  background: transparent;
  height: auto;
  min-height: 128px !important;
  padding: 8px 10px 20px !important;
}

iframe#opr-profile-search-iframe {
  border: 0px;
  border-top: 2px solid #ddd;
}

#opr-profile-search-table-iframeHolder iframe#opr-profile-search-table-iframe {
  border: none;
}

#opr-profile-search-table-iframeHolder {
  border: 2px solid #ddd;
  box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.5);
}

.lfLKwR {
  overflow-y: hidden;
}

.edTgaw {
  font-weight: 400;
  text-align: left;
}

.bqmFHi {
  position: static !important;
}

.opt-personal .accountContainer ul.prpNavTabs.nav.nav-tabs {
  border-bottom: 0px !important;
}

.manage-profile-container ul.prpNavTabs.nav.nav-tabs {
  margin-bottom: 5px;
}

#manageActiveProfileTable.dataTable thead th {
  padding-bottom: 12px;
}

#manageActiveProfileTable tbody tr td {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 170px;
}

div#opr-profile-search-table-iframeHolder {
  white-space: normal;
}

.sc-bdnxRM.bNKKRu.rdt_Table {
  border-bottom: 2px solid #ccc;
  border-top: 2px solid #ccc;
}

.coiTDV.rdt_TableRow.expanded {
  background: #F6F6F6;
}

.rdt_TableBody .rdt_ExpanderRow {
  background-color: #F6F6F6;
}

.expandable-data input.radio-active ~ label {
  margin-left: 36px;
  margin-top: 6px;
}

.expandable-data input[type=radio] {
  position: absolute;
}

.expandable-data .form-control[readonly] {
  color: #333333 !important;
  font-weight: 400;
}

.rdt_TableBody .rdt_ExpanderRow .settings-container .input-text-wrapper {
  background-color: #F6F6F6;
}

.opt-personal .accountContainer .tab-content .rdt_Table .rdt_TableBody .rdt_ExpanderRow .date-container {
  border: 2px solid #CCCCCC;
  background: #F6F6F6;
}

.opt-personal .accountContainer .tab-content .rdt_Table .rdt_TableBody .rdt_ExpanderRow .date-container:first-child {
  border-bottom: 1px solid #CCCCCC;
}

.settings-container .input-select-wrapper select option:hover, .settings-container .input-select-wrapper select option:checked {
  background: var(--hpe-color-decorative-brand) -webkit-linear-gradient(bottom, var(--hpe-color-decorative-brand) 0%, var(--hpe-color-decorative-brand) 100%);
  color: #fff !important;
}

.sc-hKFxyN.sc-eCApnc.sc-iqAclL.gfJhjm.gVVxwh.jFwrzr.rdt_TableCol #column-1 .sc-dIsUp.hkcGBu {
  font-weight: 600;
}

.sc-hKFxyN.sc-eCApnc.sc-iqAclL.gfJhjm.csacee.jFwrzr.rdt_TableCol #column-1 .sc-dIsUp.hkcGBu {
  font-weight: 600;
}

.sc-dIsUp.hkcGBu {
  font-family: HPE Graphik;
  font-style: normal;
  font-weight: 300;
  font-size: 16px;
  line-height: 20px;
  display: contents;
}

.opt-personal .rdt_TableCol_Sortable i {
  margin-left: 7px !important;
}

#_com_hpe_prp_object_indexing_web_PrpObjectIndexingWebPortlet_INSTANCE_PB4A0XrAunw4_fm .button-holder.dialog-footer,
form#_com_hpe_prp_object_indexing_web_PrpObjectIndexingWebPortlet_INSTANCE_lflxR3EXcP4t_fm .button-holder.dialog-footer {
  position: relative !important;
}

#cell-5-undefined input.brt-button {
  line-height: 1.5em;
  height: 3em;
  overflow: hidden;
  white-space: normal;
  text-overflow: ellipsis;
  text-align: left;
}

/* overlay for datatables processing */
.opt-overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: 1035;
  background-color: black;
  zoom: 1;
  -ms-filter: "alpha(opacity=25)";
  filter: alpha(opacity=25);
  opacity: 0.25;
}

/* css for opr datatables */
.manage-epi-container, .opt-main-container {
  background: #fff;
  padding: 24px 24px 48px 24px;
  margin-bottom: -20px;
}

/* PRPDXP: Capability Access Request page only - rounds the container corners
   without affecting the other .opt-main-container based pages (compound
   selector, so it only matches elements carrying both classes). */
.opt-main-container.settings-cap-container {
  border-radius: 12px;
}

#manageActiveEpiTable thead th:first-child, #manageInactiveEpiTable thead th:first-child {
  width: 64px !important;
  padding: 0 !important;
}

.customDataTableContainer #manageActiveEpiTable .checkboxContainer, .customDataTableContainer #manageInactiveEpiTable .checkboxContainer {
  margin: 11.5px;
}

.customDataTableContainer .footerButtons.epiActionbuttons, .customDataTableContainer .footerButtons.optActionbuttons {
  bottom: 13px;
}

.manage-epi-container .dataTableFooter.dataTableCustomFooter.epiCustomFooter, .opt-main-container .dataTableFooter.dataTableCustomFooter.optCustomFooter {
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: space-between;
}

.manage-epi-container .dataTableFooter.dataTableCustomFooter.epiCustomFooter > div, .opt-main-container .dataTableFooter.dataTableCustomFooter.optCustomFooter > div {
  margin: 15px;
  margin-top: 0px;
}

.manage-epi-container #epiDropdownMenu, .manage-campgn-container #campgnDropdownMenu, .manage-campgn-container #campgnDropdownMenu,
.manage-campgn-assgnmnt-container #campgnDropdownMenu, .extended-container #extendedDropdownMenu {
  border: none;
  background: #FFFFFF;
  color: #333333;
}

.manage-epi-container #epiDropdownMenu:focus, .manage-epi-container #epiDropdownMenu:active, .manage-campgn-container #campgnDropdownMenu:focus,
.manage-campgn-container #campgnDropdownMenu:active, .manage-campgn-assgnmnt-container #campgnDropdownMenu:focus,
.manage-campgn-assgnmnt-container #campgnDropdownMenu:active, .extended-container #extendedDropdownMenu:focus, .extended-container #extendedDropdownMenu:active {
  background: #333333;
  color: #FFFFFF;
  border-radius: 0;
  outline: 0;
}

.manage-epi-container .dropdown.open ul.epi-dropdown-menu, .manage-epi-container .dropdown.open-epi-actionlist ul.epi-dropdown-menu,
.manage-campgn-container .dropdown.open ul.campgn-dropdown-menu, .manage-campgn-container .dropdown.open-campgn-actionlist ul.campgn-dropdown-menu,
.extended-container .dropdown.open ul.extended-dropdown-menu, .extended-container .dropdown.open-extended-actionlist ul.extended-dropdown-menu {
  background-color: #EEEEEE;
  border-radius: 0;
  padding: 8px 8px !important;
  font-size: 19px;
  font-family: "HPE Graphik";
  font-weight: normal;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* min-height: 70px; */
  min-width: 140px;
  left: auto;
}

.manage-epi-container #manageActiveEpiTable .epi-action-dropdown, .manage-campgn-container #manageActiveCampgnTable .campgn-action-dropdown,
.manage-campgn-assgnmnt-container .campgn-action-dropdown, .extended-container .extended-action-dropdown {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: flex-start;
}

.manage-epi-container #manageActiveEpiTable .epi-action-dropdown li, .extended-container #extendedDropdownMenu .extended-action-dropdown li {
  cursor: pointer;
}

.manage-epi-container #manageActiveEpiTable .epi-code a {
  cursor: pointer;
}

.campgn-action-dropdown li {
  cursor: pointer;
}

.epi-action-dropdown .epi-dropdown-menu li a, .campgn-action-dropdown .campgn-dropdown-menu li a, .manage-campgn-assgnmnt-container .campgn-dropdown-menu li a,
.extended-container .extended-dropdown-menu li a {
  text-decoration: none !important;
  padding: 4px 16px;
  background-color: #EEEEEE;
}

.epi-action-dropdown .epi-dropdown-menu li a:hover, .campgn-action-dropdown .campgn-dropdown-menu li a:hover,
.manage-campgn-assgnmnt-container .campgn-dropdown-menu li a:hover, .extended-container .extended-dropdown-menu li a:hover {
  background-color: #e7e7e7;
  cursor: pointer;
}

table#manageActiveEpiTable tbody th:last-child, table#manageActiveCampgnTable tbody th:last-child {
  min-width: 140px;
}

.opr-epi, .opr-campgn {
  top: 0 !important;
}

.opr-epi.dialog-iframe-modal .opr-epi-content div.modal-header, .opr-campgn.dialog-iframe-modal .opr-campgn-content div.modal-header {
  display: none !important;
}

.opr-epi .opr-epi-content, .opr-campgn .opr-campgn-content {
  border-radius: 0px;
}

.opt-srch .secondaryButton.create-epi-btn {
  background-position: left 35px top 7px !important;
}

.opt-srch .secondaryButton.downloadUserBtn {
  cursor: pointer;
  background-image: none !important;
  height: 36px;
  padding: 4px 18px;
}

.opt-srch .secondaryButton.create-epi-btn, .opt-srch .secondaryButton.create-new-btn {
  background-image: url(../images/icons/core-doc.svg) !important;
  background-size: 18px 22px !important;
}

.opt-srch .epi-search-container, .opt-srch .opt-search-container {
  display: flex;
}

.opt-srch .epi-search-container .epi-search-box, .opt-srch .opt-search-container .opt-search-box-div {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  border: 1px solid #B1B9BE;
  border-radius: 8px;
  height: 36px;
}

.opt-search-box-div {
  padding-left: 3px;
}

.opt-srch .epi-search-container .epi-search-box input, .opt-srch .opt-search-container .opt-search-box-div input {
  border: none;
  height: 36px;
  text-overflow: ellipsis;
  padding: 0 32px 0 12px;
}

/* Focus ring belongs on the WRAPPER, not on the input.
 *
 * In these search boxes the element the user sees as "the field" is the
 * wrapper (.epi-search-box / .opt-search-box-div) - it owns the 1px #B1B9BE
 * border and the 12px radius above. The <input> inside is deliberately
 * `border: none`, so the global `input:focus-visible` ring from
 * _hpe-foundation.scss was being drawn around an invisible, square-cornered
 * box that does not line up with the visible field. That is why this looked
 * different from Personal Details, where the input IS the bordered control
 * and the ring therefore hugs it exactly.
 *
 * It also explains the ring "shifting" while typing: #clear-ppa-input flips
 * from display:none to display:block once the field is non-empty, becoming a
 * flex sibling that consumes width. The input is a shrinking flex item, so it
 * narrows and drags its outline inward, leaving the clear and search icons
 * stranded outside the ring. Anchoring the ring to the wrapper makes it
 * immune to any layout change inside the box.
 *
 * Values are copied from `.settings-container input:focus-visible` so the
 * indicator is pixel-identical to the Personal Details fields, and the
 * outline inherits the wrapper's 12px radius so it renders rounded. */
.opt-srch .epi-search-container .epi-search-box:focus-within,
.opt-srch .opt-search-container .opt-search-box-div:focus-within {
  outline: solid 2px #292d30;
  outline-offset: 2px;
  box-sizing: border-box;
}

/* Restrict the ring to keyboard focus, matching Personal Details' use of
 * :focus-visible. Browsers without :has() drop this rule as invalid and simply
 * keep the :focus-within ring above, so the field is never left with no
 * indicator at all. */
.opt-srch .epi-search-container .epi-search-box:focus-within:not(:has(input:focus-visible)),
.opt-srch .opt-search-container .opt-search-box-div:focus-within:not(:has(input:focus-visible)) {
  outline: none;
}

/* Suppress the inner ring so the two do not stack. */
.opt-srch .epi-search-container .epi-search-box input:focus,
.opt-srch .epi-search-container .epi-search-box input:focus-visible,
.opt-srch .opt-search-container .opt-search-box-div input:focus,
.opt-srch .opt-search-container .opt-search-box-div input:focus-visible {
  outline: none;
}

/* Stop the focus ring being clipped when the filter bar sits INSIDE a
 * `.table-responsive` (Manage Users / activeusers.jsp).
 *
 * Bootstrap's `.table-responsive` is `overflow-x: auto`, i.e. a scroll
 * container, and a scroll container clips everything at its PADDING box. The
 * geometry inside it lands the field exactly on that edge:
 *
 *     .table-responsive   content/padding box starts at        X
 *     .opt-srch.row       margin-left: -15px           ->      X - 15
 *     .col-md-5           padding-left:  15px          ->      X
 *
 * so `.opt-search-box-div` begins at X, the clip edge. The ring is drawn with
 * `outline-offset: 2px` + a 2px outline, so it needs to paint from X-4 to X-2
 * and the whole left segment gets cut off - the ring looks like it runs down
 * the inside of the field. Only the left is affected: the row is
 * `justify-content: space-between`, so the box never reaches the right edge.
 * The PPA search (settingsPPAsearchFilters) has no `.table-responsive`
 * ancestor, which is why the identical CSS renders correctly there.
 *
 * The fix moves the CLIP edge outward without moving the CONTENT: a -4px
 * margin pulls the padding box 4px wider on each side, the matching 4px
 * padding puts the content back exactly where it was, and `calc(100% + 8px)`
 * restores the border-box width the two negative margins would otherwise take
 * off (needed because `width: 100%` is border-box here - without it the table
 * inside would come out 8px narrower). Net effect: nothing moves, the table
 * still scrolls horizontally, and the ring now has 4px of room to paint in.
 *
 * Scoped with :has() so it only touches the one layout that nests a search box
 * inside the scroll container. Browsers without :has() drop the rule and simply
 * keep today's clipped ring, so there is no regression. */
.table-responsive:has(.opt-search-box-div),
.table-responsive:has(.epi-search-box) {
  box-sizing: border-box;
  width: calc(100% + 8px);
  margin-left: -4px;
  margin-right: -4px;
  padding-left: 4px;
  padding-right: 4px;
}

.opt-srch .epi-search-container .epi-search-box img, .opt-srch .opt-search-container .opt-search-box-div img {
  height: 15px !important;
  width: 15px !important;
}

.opt-srch .opt-search-container .opt-search-box-div .search-input-contract img {
  height: 16px;
  width: 16px;
  margin-right: 8px;
}

.opt-srch .epi-search-container .epi-search-btn, .opt-srch .opt-search-container .opt-search-btn {
  min-width: 141px;
  height: 36px;
  transition: 0.1s ease-in-out;
}

.opt-srch .epi-search-container .epi-search-box .clearable-input, .opt-srch .opt-search-container .opt-search-box-div .clearable-input {
  position: static;
  margin-right: 27px;
}

#updateEpiModal.prpModal .modal-heading, #updateCampgnModal.prpModal .modal-heading {
  margin-bottom: 0;
}

#updateEpiModal .modalFooter, #updateCampgnModal .modalFooter {
  border-top: none;
}

#updateEpiModal .epi-add-on-fly {
  position: absolute;
  left: 100%;
  margin: 11px;
  bottom: 0;
  min-width: 100px;
  display: none;
}

#updateEpiModal .epi-add-on-fly.active-btn {
  display: block;
}

#updateEpiModal .epiCategory, #updateEpiModal .epiSubCategory {
  position: relative;
}

#updateEpiModal.field-Error, #updateCampgnModal.field-Error {
  padding-top: 75px !important;
}

#updateEpiModal.field-Error button.close, #updateCampgnModal.field-Error button.close {
  top: 50px;
}

#updateEpiModal .settings-container .epiCategory .yui3-aclist, #updateEpiModal .settings-container .epiSubCategory .yui3-aclist {
  z-index: 9;
}

#updateEpiModal .settings-container .epiCategory .yui3-aclist-item-active, #updateEpiModal .settings-container .epiSubCategory .yui3-aclist-item-active {
  background: #4573f1;
}

#updateEpiModal .settings-container .epiCategory .yui3-aclist-item, #updateEpiModal .settings-container .epiSubCategory .yui3-aclist-item {
  padding: 5px;
}

#updateEpiModal .settings-container .epiDates input {
  padding: 12px 26px 12px 12px;
  background-image: url(../images/icons/datepicker.png) !important;
  background-repeat: no-repeat !important;
  background-size: 12px 14px !important;
  background-position: right 10px top 48% !important;
}

.task-warningModal.modal-dialog .modal-content .modal-footer button.sucessButton:hover {
  border: 0 !important;
}

#epi-warningModal .modal-dialog .modal-content .modal-footer button.sucessButton:hover, #campgn-warningModal .modal-dialog .modal-content .modal-footer button.sucessButton:hover,
.opr-iframe-warningModal.modal-dialog .modal-content .modal-footer button.sucessButton:hover, .task-warningModal.modal-dialog .modal-content .modal-footer button.sucessButton:hover,
.settings-warningModal.modal-dialog .modal-content .modal-footer button.sucessButton:hover {
  background-color: #3E4550 !important;
  border: 0 !important;
}

.settings-warningModal.modal-dialog {
  position: fixed !important;
}

.settings-warningModal.modal-dialog,
.settings-warningModal.modal-dialog .modal-content {
  height: auto !important;
}

#epi-warningModal .modal-dialog .modal-content .modal-footer button.cancelButton:hover, #campgn-warningModal .modal-dialog .modal-content .modal-footer button.cancelButton:hover,
.opr-iframe-warningModal.modal-dialog .modal-content .modal-footer button.cancelButton:hover, .settings-warningModal.modal-dialog .modal-content .modal-footer button.cancelButton:hover,
.task-warningModal.modal-dialog .modal-content .modal-footer button.cancelButton:hover {
  text-decoration: none;
  background-color: #E6E8E9 !important;
  border: 0;
}

#epi-warningModal .modal-dialog .modal-content .modal-footer button:hover, #campgn-warningModal .modal-dialog .modal-content .modal-footer button:hover,
.opr-iframe-warningModal.modal-dialog .modal-content .modal-footer button:hover, .settings-warningModal.modal-dialog .modal-content .modal-footer button:hover,
.task-warningModal.modal-dialog .modal-content .modal-footer button:hover {
  outline-width: 0px;
  background-color: rgb(255, 255, 255);
  transition: all 0.1s ease-in-out 0s;
}

#epi-warningModal .modal-dialog, #campgn-warningModal .modal-dialog, .opr-iframe-warningModal.modal-dialog,
.settings-warningModal.modal-dialog, .task-warningModal.modal-dialog {
  margin-top: 0;
  max-width: 720px;
}

#epi-warningModal .modal-dialog {
  top: 0 !important;
}

#epi-warningModal .modal-content, #campgn-warningModal .modal-content, .task-warningModal.modal-dialog .modal-content {
  border-radius: 12px;
  border: 0;
  top: 30%;
  position: fixed;
  width: 45rem;
  height: 19rem;
}

#epi-warningModal .modal-footer, #campgn-warningModal .modal-footer, .opr-iframe-warningModal.modal-dialog .modal-footer,
.settings-warningModal.modal-dialog .modal-footer, .task-warningModal.modal-dialog .modal-footer {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  padding: 0 24px 24px;
  border: 0px;
}

#epi-warningModal .modal-footer .btn-toolbar, #campgn-warningModal .modal-footer .btn-toolbar,
.opr-iframe-warningModal.modal-dialog .modal-footer .btn-toolbar,
.settings-warningModal.modal-dialog .modal-footer .btn-toolbar,
.task-warningModal.modal-dialog .modal-footer .btn-toolbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 0;
}

.opr-iframe-warningModal .modal-footer {
  border: 0 !important;
  justify-content: flex-end;
}

.opr-iframe-warningModal .modal-body {
  border: 0 !important;
}

.task-warningModal.modal-dialog .sucessButton {
  background-color: #292D3A !important;
  color: #FFFFFF !important;
}

#epi-warningModal .modal-footer button, #campgn-warningModal .modal-footer button, .opr-iframe-warningModal.modal-dialog .modal-footer button,
.settings-warningModal.modal-dialog .modal-footer button, .task-warningModal.modal-dialog .modal-footer button {
  color: #292D3a;
  font-family: HPE Graphik;
  /* Figma "button/secondary/medium": 16/24 text, 36px min-height,
     padding 5px 18px, fully rounded.
     `!important` on padding/min-width: the global `.primaryButton` rule in
     _common.scss sets `padding: 9px 24px !important`. */
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
  height: 36px;
  min-height: 36px;
  padding: 5px 18px !important;
  margin: 0;
  float: none;
  align-self: center;
  border-radius: 9999px;
  outline: none;
  min-width: 0 !important;
  border: 0 !important;
}

#epi-warningModal .modal-body, #campgn-warningModal .modal-body, .opr-iframe-warningModal .modal-body,
.settings-warningModal .modal-body, .task-warningModal .modal-body {
  padding: 24px;
  border: none;
  border-top: 0;
  margin-top: 0;
  height: auto !important;
  max-height: none !important;
  overflow: visible;
}

#epi-warningModal .modal-body > br, #campgn-warningModal .modal-body > br,
.opr-iframe-warningModal .modal-body > br,
.settings-warningModal .modal-body > br, .task-warningModal .modal-body > br {
  display: none;
}

#epi-warningModal h3, #campgn-warningModal h3, .opr-iframe-warningModal.modal-dialog h3, .settings-warningModal.modal-dialog h3, .task-warningModal.modal-dialog h2 {
  color: #333;
  font-family: HPE Graphik;
  font-size: 48px;
  font-weight: 300;
  line-height: 54px;
  margin: 0;
}

.task-warningModal.modal-dialog h2 {
  margin-top: 28px;
  padding: 20px 0;
}

.task-warningModal.modal-dialog p {
  margin: 8px 0 28px;
  font-size: 24px;
  line-height: 30px;
  color: #666666;
}

#epi-warningModal .alertConfigPopup .modal-dialog-content .modal-body .warningSubHeaderText,
#campgn-warningModal .alertConfigPopup .modal-dialog-content .modal-body .warningSubHeaderText,
.opr-iframe-warningModal .modal-dialog-content .modal-body .warningSubHeaderText,
.settings-warningModal .modal-dialog-content .modal-body .warningSubHeaderText {
  color: #67686E;
  font-family: HPE Graphik;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  display: block;
}

#epi-warningModal .alertConfigPopup .modal-dialog-content .modal-body div.selected-epi-name,
#campgn-warningModal .alertConfigPopup .modal-dialog-content .modal-body div.selected-campgn-name,
.opr-iframe-warningModal .modal-dialog-content .modal-body div.selected-campgn-name,
.settings-warningModal .modal-dialog-content .modal-body div.selected-campgn-name {
  margin-top: 5px;
  max-height: 72px;
  overflow-y: auto;
}

#epi-warningModal .alertConfigPopup .modal-dialog-content .modal-body span.selected-epi-name,
#campgn-warningModal .alertConfigPopup .modal-dialog-content .modal-body span.selected-campgn-name,
.opr-iframe-warningModal .modal-dialog-content .modal-body span.selected-campgn-name,
.settings-warningModal .modal-dialog-content .modal-body span.selected-campgn-name {
  display: inline-block;
  font-size: 14px;
  font-style: normal;
  font-family: "HPE Graphik";
  padding: 4px;
  margin-bottom: 5px;
  margin-right: 5px;
  background: #ddd;
}

.settings-warningModal .modal-body {
  border: 0 !important;
}

#updateCampgnModal .campaign-details .campaignDates .col-md-6, #updateEpiModal .epiDates .col-md-6 {
  padding: 0 !important;
}

#updateCampgnModal .campaign-details .campaignDates .col-md-6 .campaignStartDate .input-text-wrapper {
  border-right: 0;
}

#activeEpi #manageActiveEpiTable td.dt-body-center, #inactiveEpi #manageInactiveEpiTable td.dt-body-center, #activeCampgn #manageActiveCampgnTable td.dt-body-center,
#inactiveCampgn #manageInActiveCampgnTable td.dt-body-center {
  min-width: 5px !important;
  max-width: 5px !important;
}

.manage-epi-container .col-sm-12.tab-pane.fade.active.in {
  padding-left: 0px !important;
}

#manageActiveEpiTable_wrapper #manageActiveEpiTable .dt-body-center a {
  cursor: pointer;
}

.manage-profile-container .search-rslt-basic {
  background-color: #F6F6F6;
  padding: 12px 24px 24px;
  margin-bottom: 24px;
}

.manage-profile-container #manageActiveProfileTable tbody tr.expanded {
  background-color: #666666 !important;
}

.manage-profile-container #manageActiveProfileTable tbody tr.expanded td, .manage-profile-container #manageActiveProfileTable tbody tr.expanded td a {
  color: #FFFFFF;
}

.manage-profile-container #manageActiveProfileTable tbody tr.expanded td label .checkmark {
  border: 2px solid #FFFFFF;
  background-color: #666666 !important;
}

.manage-profile-container #manageActiveProfileTable tbody tr td.user-email, .manage-profile-container #manageActiveProfileTable tbody tr td.first-name {
  cursor: pointer;
}

.epiDates .form-control[readonly] {
  color: #333333 !important;
  cursor: pointer;
}

.epiDates .form-control[disabled] {
  color: #CCCCCC !important;
  cursor: not-allowed;
}

/* loading for iframe */
.iframe-loading img.loading-img, img.datatable-loading-img {
  margin: auto;
  left: 45%;
  top: 40%;
  position: fixed;
  display: flex;
  justify-content: center;
  z-index: 1;
}

.relation-confirmation-close:hover {
  background: #E6E8E9;
  border-radius: 100%;
}

.loading-img.hpe_spinner {
  margin: auto;
  left: 45%;
  top: 50%;
  position: fixed;
  display: flex;
  justify-content: center;
  z-index: 1;
  width: 48px;
  height: 48px;
}

.datatable-loading-img.hpe_spinner {
  margin: auto;
  left: 45%;
  top: 50%;
  position: fixed;
  display: flex;
  justify-content: center;
  z-index: 1;
  width: 50px;
  height: 50px;
}

.iframe-loading.opr-overlay-ws-call img.loading-img {
  top: 40%;
}

/* Marketing Campaign Assignment CSS */
.manage-campgn-assgnmnt-container .dataTables_empty p.no-data-cmpgn {
  font-family: HPE Graphik;
  font-style: normal;
  font-weight: 600 !important;
  font-size: 24px !important;
  line-height: 30px;
  padding: 24px;
  margin: 0;
}

.manage-campgn-assgnmnt-container .opt-srch .opt-search-container .opt-search-box-div {
  height: 42px;
}

.manage-campgn-assgnmnt-container .opt-srch .opt-search-container .opt-search-box-div input {
  height: 38px;
  color: #333333;
  font-family: HPE Graphik;
  font-size: 16px;
  font-weight: normal;
  line-height: 20px;
}

.manage-campgn-assgnmnt-container .opt-srch .opt-search-container .opt-search-box-div img {
  height: 12px;
  width: 12px;
}

.manage-campgn-assgnmnt-container .opt-srch span.glyphicon.glyphicon-search {
  font-size: 12px;
  top: 8px !important;
}

.manage-campgn-assgnmnt-container .dataTables_length label select, .campaingn-list .dataTables_length label select, .task-container .dataTables_length label select {
  border: 1px solid #B1B9BE;
  padding: 0 30px 0 10px;
  color: #292D3A;
  font-family: HPE Graphik;
  font-size: 16px;
  font-weight: 400;
  background-image: url(../images/icons/Up.svg);
  background-position: center right 10px;
  background-repeat: no-repeat;
  background-size: 14px;
  width: 64px;
  height: 40px;
}

.manage-campgn-assgnmnt-container .dataTables_length label, .campaingn-list .dataTables_length label, .task-container .dataTables_length label {
  font-weight: 400;
  color: #3E4550;
  font-family: HPE Graphik;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 20px;
  margin: 0;
}

.manage-campgn-assgnmnt-container .dataTables_length, .campaingn-list .dataTables_length, .task-container .dataTables_length {
  float: right;
}

.manage-campgn-assgnmnt-container .dataTableFooter.dataTableCustomFooter.optCustomFooter {
  padding: 16px 0;
}

.manage-campgn-assgnmnt-container #manageActiveCampgnAssgnmtTable tbody tr td.campaign-code {
  cursor: pointer;
}

.manage-campgn-assgnmnt-container #manageActiveCampgnAssgnmtTable tbody tr td.campaign-code {
  cursor: auto;
}

.manage-campgn-assgnmnt-container #manageActiveCampgnAssgnmtTable tbody tr.editedTr td .campaign-start-date,
.manage-campgn-assgnmnt-container #manageActiveCampgnAssgnmtTable tbody tr.editedTr td .campaign-end-date {
  height: 104%;
  width: 100%;
  border: 2px solid #ddd;
  background-color: transparent;
  padding: 12px 26px 12px 12px;
  background-image: url(../images/icons/datepicker.png) !important;
  background-repeat: no-repeat !important;
  background-size: 12px 14px !important;
  background-position: right 10px top 48% !important;
  cursor: pointer;
}

.extended-container tbody tr.editedTr td .start-date, .extended-container tbody tr.editedTr td .end-date {
  height: 104%;
  max-width: 113px;
  min-width: 111px;
  border: 2px solid #ddd;
  background-color: transparent;
  padding: 12px 20px 12px 12px;
  background-image: url(../images/icons/datepicker.png) !important;
  background-repeat: no-repeat !important;
  background-size: 12px 14px !important;
  background-position: right 5px top 48% !important;
  cursor: pointer;
}

.extended-container tbody tr.editedTr td.extended-scope select {
  height: 104%;
  border: 2px solid #ddd;
  background-color: transparent;
  padding: 12px 24px 12px 10px;
  background-image: url(../images/icons/Up.svg) !important;
  background-repeat: no-repeat !important;
  background-size: 12px 14px !important;
  background-position: right 10px top 48% !important;
  width: 125%;
}

.settings-contract-container.contract-container .contract-info {
  width: 24%;
}

.party-list-container .contract-info-block .contract-info {
  width: 32%;
}

.manage-campgn-assgnmnt-container #manageActiveCampgnAssgnmtTable tbody tr.editedTr td.campaign-code,
.manage-campgn-assgnmnt-container #manageActiveCampgnAssgnmtTable tbody tr.editedTr td.campaign-name {
  max-width: 65px;
}

.manage-campgn-assgnmnt-container #manageActiveCampgnAssgnmtTable tbody tr.editedTr td .campaign-end-date,
.extended-container tbody tr.editedTr td .campaign-end-date {
  margin-left: -2px;
}

.manage-campgn-assgnmnt-container #manageActiveCampgnAssgnmtTable tr.editedTr, .extended-container #extendedActiveTable tr.editedTr,
.extended-container #extendedInActiveTable tr.editedTr, .extended-container #extendedFutureTable tr.editedTr {
  background-color: #FBFBFB !important;
}

.manage-campgn-assgnmnt-container .opt-srch .opt-search-container .opt-search-box-div .clearable-input,
.campaingn-list .opt-srch .opt-search-container .opt-search-box-div.simple-search .clearable-input, .opt-srch .opt-search-container .opt-search-box-div .clearable-input {
  padding: 10px;
}

.manage-campgn-assgnmnt-container .dropdown.open ul.campgn-dropdown-menu, .manage-campgn-assgnmnt-container .dropdown.open-campgn-actionlist ul.campgn-dropdown-menu {
  background-color: #EEEEEE;
  border-radius: 0;
  padding: 8px 8px !important;
  font-size: 19px;
  display: flex;
  flex-direction: column;
  min-width: 140px;
}

.manage-campgn-assgnmnt-container .editedTr #campgnDropdownMenu, .extended-container .editedTr #extendedDropdownMenu {
  background: #FBFBFB;
}

.manage-campgn-assgnmnt-container .editedTr #campgnDropdownMenu:active, .manage-campgn-assgnmnt-container .editedTr #campgnDropdownMenu:focus,
.extended-container .editedTr #extendedDropdownMenu:active, .extended-container .editedTr #extendedDropdownMenu:focus {
  background: #333333;
}

.manage-campgn-assgnmnt-container .editedTr .campgn-dropdown-menu li.edit-link, .extended-container .editedTr .extended-dropdown-menu li.edit-link {
  display: none;
}

.manage-campgn-assgnmnt-container .campgn-dropdown-menu li.remove-link {
  display: none;
}

.manage-campgn-assgnmnt-container .editedTr.newAddedTr .campgn-dropdown-menu li.remove-link {
  display: block;
}

.manage-campgn-assgnmnt-container .editedTr.newAddedTr .campgn-dropdown-menu li.expire-link {
  display: none;
}

.campaingn-list .opt-srch .opt-search-container .opt-search-box-div .clearable-input img {
  height: 14px;
  width: 14px;
}

#addCampgnModal.prpModal .modal-heading {
  margin-bottom: 0;
}

#addCampgnModal .campaingn-list .opt-srch {
  padding-left: 0px;
  padding-bottom: 24px;
  border-bottom: 2px solid #ccc !important;
  margin-bottom: 0px;
}

.modal-heading {
  margin-bottom: 0px;
}

#addCampgnModal .prpModal .modalFooter {
  border-top: none;
}

#addCampgnModal #findCampgnAssgnmtTable tr.selected {
  background-color: #F6F6F6 !important;
}

#contractActiveTable, table#contractInActiveTable {
  border-top: 2px solid #ddd;
  margin-top: 20px;
}

div#activeContrct, div#inactiveContrct, div#manageContrctAccess {
  padding: 0px;
}

#contractActiveTable tbody tr td.dt-body-center, #contractInActiveTable tbody tr td.dt-body-center {
  padding: 0px;
  text-align: center !important;
}

#contractActiveTable tbody tr td, #contractInActiveTable tbody tr td {
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#contractActiveTable tbody tr.expanded td, #contractInActiveTable tbody tr.expanded td {
  white-space: normal;
}

.oprclearbutton input.btn.opr-clear-btn {
  border: 2px solid #ddd;
  background: #fff;
  width: 85px;
  height: 40px;
  font-family: HPE Graphik;
  font-style: normal;
  font-weight: 600;
  font-size: 19px;
  line-height: 24px;
  color: #333333;
  margin-top: 13px;
  border-radius: 0;
}

.oprclearbutton input.btn.opr-clear-btn:focus,
.oprclearbutton input.btn.opr-clear-btn:active,
.oprclearbutton input.btn.opr-clear-btn:hover {
  outline: 0px;
  outline-offset: 0px;
  box-shadow: none;
  border: 2px solid var(--hpe-color-decorative-brand);
  background: #fff;
}

#cell-5-undefined input.brt-button {
  line-height: 1.5em;
  height: 3em;
  overflow: hidden;
  white-space: normal;
  text-overflow: ellipsis;
  text-align: left;
}

.EPIsearch .EPIsearchfield {
  width: 38%;
  border: 2px solid #ddd;
  padding: 0 40px 0 10px;
  height: 40px;
  margin: 20px 0px;
}

.EPIsearch select#epiSearchBy {
  width: 12%;
  border: 2px solid #ddd;
  padding: 0 20px 0 10px;
  height: 40px;
  margin: 20px 0;
  border-right: 0;
  background: transparent;
  background-image: url(/o/prp-theme/images/icons/Up.svg);
  background-repeat: no-repeat;
  background-position: right 8px top 16px;
  background-size: 12px;
  text-overflow: ellipsis;
}

.epiSearchError {
  border: 2px solid #ca2b4e !important;
}

.opt-personal .brt-details .rdt_Table .rdt_TableBody .rdt_TableRow h3#EPImodalLabel {
  text-align: left;
  font-family: HPE Graphik;
  font-style: normal;
  font-weight: 400;
  font-size: 48px;
  line-height: 54px;
}

.opt-personal .brt-details .rdt_Table .rdt_TableBody .rdt_TableRow button.EPI-modal-close {
  background-color: #FFFFFF;
  float: right;
  position: relative;
  border: 0px;
  font-size: 48px;
  line-height: 14px;
}

.EPIsearch span.glyphicon.glyphicon-search {
  position: absolute;
  color: #666;
  font-size: 14px;
  top: 4px;
  cursor: pointer;
  display: block;
  left: 45%;
}

#EPImodalallocation .EPIsearch span.glyphicon.glyphicon-search {
  top: 24px;
}

.EPIsearch {
  font-family: HPE Graphik;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 24px;
  font-weight: 400;
  color: #000;
  margin: 0;
  position: relative;
}

nav.sc-iJCRrE.jmxzRk.rdt_Pagination {
  border: 0px;
  font-family: HPE Graphik;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 20px;
  color: #333333;
}

.rdt_Pagination select.sc-cxNHIi.jelNoK {
  border: 2px solid #333;
}

.ReactModalPortal .jMeWFj .iQTtKS .rdt_Table .rdt_TableBody .rdt_TableRow .rdt_TableCell input[type=checkbox]:before {
  content: "";
  display: block;
  position: absolute;
  width: 25px;
  height: 25px;
  border: 2px solid #666666;
  background-color: white;
}

.ReactModalPortal .jMeWFj .iQTtKS .rdt_Table .rdt_TableBody .rdt_TableRow .rdt_TableCell input[type=checkbox]:checked:after {
  content: "";
  display: block;
  width: 8px;
  height: 16px;
  border: solid var(--hpe-color-decorative-brand);
  border-width: 0 4px 4px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  margin-left: 8px;
  margin-top: 3px;
}

.iQTtKS .rdt_Table .rdt_TableBody .rdt_TableRow .rdt_TableCell input[type=checkbox] {
  width: 18px;
  height: 18px;
}

.supportpagemdcp .panel-heading[data-toggle=collapse]:after {
  right: 0px !important;
  margin-top: 8px;
}

.supportpagemdcp #collapsesupport .row {
  margin-top: 48px;
}

.supportpagemdcp {
  border-top: 2px solid #CCCCCC;
}

.row.Synchronize-tab .settings-container .col-md-6 {
  padding: 0px !important;
  margin: 0px;
}

.row.Synchronize-tab .settings-container .input-text-wrapper {
  margin: 0px -2px -2px 0px !important;
}

.personal-field .maindiv a.paBtn {
  text-decoration: none;
  color: black;
  display: block;
}

.personal-field .maindiv a#paEditbtn {
  display: inline-block;
  float: right;
}

.personal-field .maindiv a#paRemovebtn {
  float: left;
}

.personal-field .maindiv a#paDonebtn {
  float: right;
}

.manage-profile-container #manageActiveProfileTable tr.row-disabled td span, .manage-profile-container #manageActiveProfileTable tr.row-disabled td span a {
  color: #CCCCCC !important;
}

.profile-warning-inactive {
  background: #FFE75E;
  font-family: HPE Graphik;
  font-style: normal;
  font-weight: 600;
  font-size: 24px;
  line-height: 30px;
  padding: 20px 96px;
  color: #333;
  background-image: url(../images/icons/24.png);
  background-repeat: no-repeat;
  background-position: 50px 24px;
}

.label-medium-normal, .profile-warning-inactive span#inactivemsg {
  font-family: HPE Graphik;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 20px;
}

.global-syncronization-error-field {
  background: #FFE75E;
  font-family: HPE Graphik;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 20px;
  padding: 20px 60px;
  color: #333333;
  background-image: url(../images/icons/24.png);
  background-repeat: no-repeat;
  background-position: 24px 24px;
}

.global-syncronization-message-title {
  font-family: HPE Graphik;
  font-style: normal;
  font-weight: 600;
  font-size: 24px;
  line-height: 30px;
  color: #333333;
  padding-bottom: 12px;
}

.tertiaryButton.modal-button {
  min-width: 140px !important;
  margin-left: 24px;
}

.secondaryButton.modal-button {
  min-width: 140px !important;
}

.primaryButton.modal-button {
  min-width: 140px !important;
}

#iframeModalDiv .modal-dialog {
  border-radius: 0px;
}

.iframeModalpopup {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 120;
}

div#iframeModalDiv {
  top: 350px;
  left: 15%;
}

#EPImodalallocation #iframeModalDiv .modal-dialog {
  width: 960px;
}

#iframeModalDiv .modal-content {
  border-radius: 0px;
  padding: 24px;
}

div#rfbModal, div#primaryModal, div#infoModal, div#promoteuserModal, div#userModal, .opr-relation-popup-modal {
  top: 40%;
  left: 24%;
}

.expandable-data input#puser, .expandable-data input#user-flag {
  position: absolute;
  left: 12px;
}

.expandable-data input#puser ~ label {
  margin-left: 46px !important;
}

.nested-content-holder .nested-nav-bar .tab-manu-wrapper .main-tab .child-tab-collection span.child-tab.hiddenTab {
  display: none !important;
}

#dashboard_grid .overlay_yellow, #dashboard_grid .overlay_red {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 10;
  font-family: HPE Graphik;
  display: flex;
  align-items: center;
}

.overlay_Content_downtime {
  padding: 18px 24px;
  width: 100%;
  position: relative;
}

.overlay_yellow .overlay_Content_downtime {
  border-radius: var(--fig-notification-inline-medium-borderRadius, 6px);
  border: var(--fig-notification-inline-medium-borderWidth, 0) solid var(--fig-notification-inline-warning-rest-border, rgba(0, 0, 0, 0));
  background: var(--fig-notification-inline-warning-rest-background, #FFF3DD);
}

.overlay_red .overlay_Content_downtime {
  border-radius: var(--fig-notification-inline-medium-borderRadius, 6px);
  border: var(--fig-notification-inline-medium-borderWidth, 0) solid var(--fig-notification-inline-critical-rest-border, rgba(0, 0, 0, 0));
  background: var(--fig-notification-inline-critical-rest-background, #FFECEC);
}

.overlay_yellow .overlay_header {
  border-bottom: 1px solid #333333;
  padding-bottom: 10px;
  margin-bottom: 6px;
}

.overlay_red .overlay_header {
  border-bottom: 1px solid #333333;
  padding-bottom: 10px;
  margin-bottom: 6px;
}

.overlay_Content_downtime .overlay_header h4 {
  color: var(--fig-notification-inline-warning-rest-title-textColor, #292D3A);
  /* text/medium/medium */
  font-family: var(--base-fontFamily-primary, "HPE Graphik");
  font-size: var(--text-medium-fontSize, 16px);
  font-style: normal;
  font-weight: var(--fontWeight-medium, 500);
  line-height: var(--text-medium-lineHeight, 24px); /* 150% */
}

.overlay_Content_downtime .overlay_close_btn {
  position: absolute;
  top: 8%;
  left: 90%;
  background: none;
  border: 0;
  flex-wrap: wrap;
  font-size: 16px;
  font-weight: bold;
}

.overlay_Content_downtime .overlay_desc {
  color: var(--fig-notification-inline-warning-rest-message-textColor, #3E4550);
  /* text/medium/regular */
  font-family: var(--base-fontFamily-primary, "HPE Graphik");
  font-size: var(--text-medium-fontSize, 16px);
  font-style: normal;
  font-weight: var(--fontWeight-regular, 400);
  line-height: var(--text-medium-lineHeight, 24px); /* 150% */
}

.overlay_Content_downtime .overlay_body p {
  color: var(--fig-notification-inline-warning-rest-message-textColor, #3E4550);
  /* text/medium/regular */
  font-family: var(--base-fontFamily-primary, "HPE Graphik");
  font-size: var(--text-medium-fontSize, 16px);
  font-style: normal;
  font-weight: var(--fontWeight-regular, 400);
  line-height: var(--text-medium-lineHeight, 24px); /* 150% */
}

.opt-search-box-div .search-input-ext img {
  position: absolute;
  margin-left: -30px;
  top: 17px;
  width: 16px;
  height: 16px;
}

#Selectondiv.error-field .DivLanguageDD {
  border: 2px solid #CA2B4E;
}

.opr-sync-filter, .opr-sync-table {
  background: #fff;
  padding: 32px 24px;
  border-top: 20px solid #f6f6f6;
}

.opr-sync-filter-section ul.nav.nav-tabs {
  border-bottom: 2px solid #CCCCCC;
}

.opr-sync-filter-section .nav-tabs > li.active > a, .opr-sync-filter-section .nav-tabs > li.active > a:hover, .opr-sync-filter-section.nav-tabs > li.active > a:focus {
  border-bottom: 3px solid var(--hpe-color-decorative-brand) !important;
  border: 0px;
  margin-bottom: 10px;
  font-family: HPE Graphik;
  font-style: normal;
  font-weight: 600;
  font-size: 19px;
  line-height: 24px;
}

.opr-sync-filter-section .nav-tabs > li > a {
  font-family: HPE Graphik;
  font-style: normal;
  font-weight: 600;
  font-size: 19px;
  line-height: 24px;
  color: #333333;
}

.opr-sync-filter-section .nav-tabs > li > a:hover {
  border-color: #fff;
  background: #fff;
}

.opr-sync-filter-section .opr-sync-type-list {
  list-style: none;
  padding: 0;
  margin: 16px 0px;
  border-bottom: 2px solid #CCCCCC;
}

.opr-sync-filter-section .opr-sync-type-list li {
  margin-bottom: 16px;
}

.opr-sync-filter p.clear.paragraph-16 {
  color: #979797;
  float: right;
  cursor: pointer;
}

.selected-check-value {
  display: inline-flex;
}

.selected-check-value .opr-clear-tag {
  font-family: HPE Graphik;
  font-style: normal;
  font-weight: 600;
  font-size: 19px;
  line-height: 24px;
  color: #333333;
  background: #DDDDDD;
  border-radius: 8px;
  align-items: center;
  padding: 4px 4px 4px 4px;
  width: max-content;
  margin: 0px 5px;
}

.selected-check-value .opr-clear-tag span#close-tag img {
  width: 18px;
  vertical-align: middle;
  margin-bottom: 2px;
  padding: 0px 5px;
  cursor: pointer;
}

.sync-list-icon img {
  width: 18px;
  height: 18px;
  margin: 0px 5px 5px 5px;
  vertical-align: middle;
}

.oprsynbtn.secondaryButton {
  height: 48px;
  margin-left: 16px;
  background-image: url(../images/icons/Chapter-previous.svg) !important;
  background-repeat: no-repeat !important;
  background-size: 24px !important;
  background-position: left 25px top 10px !important;
  padding: 12px 24px 12px 24px;
}

.disabledProfile {
  pointer-events: none;
  color: gray;
}

.disable-search-widget {
  pointer-events: none;
  color: gray;
}

.opr-sync .opr-sync-content {
  width: 40%;
  height: 40%;
  left: 30%;
}

.opr-sync-reprocess-action {
  display: inline-flex;
}

#ResyncTable td#object-id {
  cursor: pointer;
}

div#futureExtended, div#activeExtended, div#inactiveExtended {
  padding: 0px;
}

.opt-main-container.extended-container {
  padding: 24px 0px;
}

.extended-container .tab-content .search-filters, .contract-container .tab-content .search-filters {
  margin-bottom: 2rem;
}

.opt-personal .accountContainer .jMeWFj {
  overflow: visible;
}

.opt-personal .accountContainer .rdt_Table .lfLKwR {
  overflow-y: visible;
}

.opt-personal .accountContainer #partner .rdt_Table .lfLKwR,
.opt-personal .accountContainer #customer .rdt_Table .lfLKwR, .opt-personal .accountContainer #vendor .rdt_Table .lfLKwR {
  overflow-y: auto;
}

.rdt_Table .rdt_TableRow .csacee, .rdt_Table .rdt_TableHeadRow .csacee {
  min-width: 120px;
}

#EPImodalallocation #iframeModalDiv .rdt_Table .rdt_TableRow .csacee:last-child, .rdt_Table .rdt_TableHeadRow .csacee:last-child {
  min-width: 20px;
}

#EPImodalallocation #iframeModalDiv .rdt_Table .rdt_TableRow .csacee:nth-last-child(2), .rdt_Table .rdt_TableHeadRow .csacee:nth-last-child(2) {
  min-width: 20px;
}

#EPImodalallocation .sc-hKFxyN.sc-eCApnc.sc-iqAclL.gfJhjm.csacee.jFwrzr.rdt_TableCol.csacee:nth-child(7) {
  margin-left: 0px !important;
}

#EPImodalallocation #iframeModalDiv .modal-content .modal-body {
  overflow: hidden;
}

.party-brt-info .rdt_Table .rdt_TableRow .kBxIia:last-child, .party-brt-info .rdt_Table .rdt_TableHeadRow .kBxIia:last-child {
  display: none;
}

.sc-hKFxyN.sc-eCApnc.sc-iqAclL.gfJhjm.csacee.jFwrzr.rdt_TableCol.csacee:nth-child(7) {
  margin-left: 45px;
}

.data-loader-container .opt-srch .opt-search-container .opt-search-box-div, .data-loader-container .opt-srch .opt-search-container .opt-search-status-filter {
  height: 40px;
}

.data-loader-container .opt-srch .opt-search-container .opt-search-box-div input, .data-loader-container .opt-srch .opt-search-container .opt-search-status-filter select {
  height: 36px;
}

.data-loader-container .opt-srch .opt-search-container .opt-search-status-filter label {
  padding: 0 0 0 24px;
  width: 100%;
}

.data-loader-container .opt-srch .opt-search-container .opt-search-status-filter select,
.data-loader-container .templates-table .innerContainer .template-download #dwnTemplate {
  border: 2px solid #ddd;
  padding: 0 30px 0 10px;
  color: #333;
  font-family: HPE Graphik;
  font-size: 16px;
  font-weight: normal;
  background-image: url(../images/icons/Up.svg);
  background-position: center right 10px;
  background-repeat: no-repeat;
  background-size: 14px;
  width: 80%;
  height: 40px;
}

.data-loader-container .opt-srch span.glyphicon.glyphicon-search {
  top: 16px !important;
  font-size: 12px;
}

.data-loader-container #dataLoaderTable img.download-img {
  padding: 5px;
}

.data-loader-container .templates-table .innerContainer {
  background-color: #F6F6F6;
  margin-left: 50px;
  padding: 12px;
}

.data-loader-container #dataLoaderTable tbody tr td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 250px;
}

.data-loader-container .templates-table .innerContainer .template-download {
  font-family: HPE Graphik;
  font-style: normal;
  font-weight: normal;
  font-size: 19px;
  line-height: 24px;
  color: #333333;
  padding: 10px;
}

.data-loader-container #manageTemplateTable tbody .download-link a {
  cursor: pointer;
}

.data-loader-container .fileUploadContainer {
  display: flex;
}

.data-loader-container .fileUploadContainer .select-file input {
  border: none;
  outline: none;
  width: 100%;
  height: 48px;
  padding: 10px;
  z-index: 2;
  background-color: transparent;
  color: transparent;
  position: relative;
}

.data-loader-container .fileUploadContainer .select-file input.file-seleted {
  font-family: HPE Graphik;
  font-style: normal;
  font-weight: normal;
  font-size: 19px;
  line-height: 24px;
  color: #333333;
  padding-right: 110px;
}

.data-loader-container .fileUploadContainer .select-file span {
  position: absolute;
  top: 0;
  padding: 10px;
  font-family: HPE Graphik;
  font-style: normal;
  font-weight: normal;
  font-size: 19px;
  line-height: 24px;
  color: #666666;
  z-index: 1;
}

.data-loader-container .fileUploadContainer .select-file span.select-file-text {
  right: 0;
  font-weight: 600;
  color: #333333;
}

.data-loader-container .fileUploadContainer .select-file span.clearable-input {
  right: 0;
  z-index: 10;
  margin-right: 86px;
}

.data-loader-container .fileUploadContainer .select-file {
  width: 100%;
  border: 2px dashed #CCCCCC;
  box-sizing: border-box;
  margin-right: 24px;
  height: 48px;
  position: relative;
}

.data-loader-container .fileUploadContainer .select-file ::file-selector-button {
  display: none;
}

.data-loader-container .fileUploadContainer button {
  width: 194px;
  height: 48px;
  line-height: 24px;
}

.data-loader-container .upload-info-div {
  padding: 24px 10px;
  font-family: HPE Graphik;
  border-bottom: 2px solid #DDDDDD;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 18px;
  color: #000000;
}

.data-loader-container .file-info {
  padding: 24px 10px;
}

.data-loader-container .file-info .file-info-inner {
  padding: 3px 10px;
  font-family: HPE Graphik;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 20px;
  color: #333333;
}

.data-loader-container .file-info .file-info-inner label {
  font-weight: normal;
  margin-bottom: 0;
}

.data-loader-container .file-info .file-info-inner span {
  font-weight: 600;
  padding: 6px;
}

.data-loader-container .file-info .file-info-inner.file-error {
  color: #CA2B4E;
}

.data-loader-container .file-info .progressBar.file-info-inner.file-error {
  color: #333333;
}

.data-loader-container .file-info .progressBar progress {
  width: 100%;
  height: 12px;
  border-radius: 0px;
  background: #EEEEEE;
  color: #EEEEEE;
}

.data-loader-container .file-info .progressBar progress::-moz-progress-bar {
  background: #EEEEEE;
}

.data-loader-container .file-info .progressBar progress::-webkit-progress-value {
  background: #32DAC8;
}

.data-loader-container .file-info .progressBar.file-error progress::-webkit-progress-value {
  background: #CA2B4E;
}

.data-loader-container .file-info .progressBar progress::-webkit-progress-bar {
  background: #EEEEEE;
}

.data-loader-container .file-info .progressBar.file-info-inner {
  padding: 5px 0;
}

.data-loader-container .file-info .upload-success {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.data-loader-container .file-info .upload-success img {
  height: 40px;
  width: 40px;
}

.data-loader-container .file-info .upload-success span {
  font-weight: 600;
}

/* contract page css start*/
.contract-container img.pdfImage {
  width: 18px;
  height: 22px;
  cursor: pointer;
}

.contract-container table tbody tr.expanded {
  background-color: #F6F6F6 !important;
}

table#contractInnerActiveTable tbody tr.expanded:hover td, table#contractInnerInactiveTable tbody tr.expanded:hover td {
  background-color: rgba(0, 0, 0, 0.0392156863) !important;
}

table#contractInnerActiveTable tbody tr.expanded:hover, table#contractInnerInactiveTable tbody tr.expanded:hover {
  background-color: transparent !important;
}

table#contractInnerActiveTable tbody tr.expanded, table#contractInnerInactiveTable tbody tr.expanded {
  background-color: rgba(0, 0, 0, 0.0392156863) !important;
}

span.expand-contract-arrow:hover {
  background-color: rgba(0, 0, 0, 0.0392156863);
}

span.expand-contract-arrow {
  display: inline-block;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  padding: 2px 10px;
}

.contract-container table tbody tr div#opr-contract-info, .party-list-container table tbody tr div#opr-contract-info {
  height: 200px;
  background-color: rgba(0, 0, 0, 0.0392156863);
  margin: -10px -18px -10px -10px;
  padding: 12px;
}

.contract-container.settings-contract-container table tbody tr div#opr-contract-info {
  margin: 0;
}

.contract-container .contract-info, .party-list-container .contract-info {
  display: inline-block;
  width: 19%;
  padding: 12px 24px 0 0;
  font-family: HPE Graphik;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 22px;
  color: #292D3A;
  white-space: normal;
  font-weight: 600;
}

.contract-container .contract-info-block, .party-list-container .contract-info-block {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: flex-start;
}

.contract-container .contract-info ul li, .party-list-container .contract-info ul li {
  list-style: none;
  font-size: 16px;
  line-height: 20px;
  color: #67686E;
  font-weight: 400;
}

.contract-container .contract-info ul, .party-list-container .contract-info ul {
  padding-left: 0;
  margin-top: 12px;
}

.contract-container .dataTables_length, .extended-container .dataTables_length, .settings-cap-container .dataTables_length {
  float: right;
}

.contract-container .dataTables_length label, .extended-container .dataTables_length label, .settings-cap-container .dataTables_length label {
  font-weight: 400;
  color: #292d3a;
  font-family: HPE Graphik;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 20px;
  margin: 0;
}

.opt-search-box-div .clearable-input-contract img, .opt-search-box-div .clearable-input-ext img, .opt-search-box-div .clearable-input-cap img {
  margin-right: 40px;
  height: 12px !important;
  width: 12px !important;
}

.opt-search-box-div .clearable-input-contract img, .opt-search-box-div .clearable-input img {
  margin-right: 10px !important;
}

.contract-container .dataTables_length label select, .extended-container .dataTables_length label select, .settings-cap-container .dataTables_length label select {
  border: 1px solid #B1B9BE;
  padding: 0 30px 0 10px;
  color: #292D3A;
  font-family: HPE Graphik;
  font-size: 16px;
  border-radius: 8px;
  font-weight: 400;
  background-color: transparent;
  background-image: url(../images/icons/Up.svg);
  background-position: center right 10px;
  background-repeat: no-repeat;
  background-size: 14px;
  width: 64px;
  height: 40px;
}

#EPImodalallocation .epi-scope {
  border: 2px solid #ddd;
  color: #292d3a;
  font-family: HPE Graphik;
  font-size: 14px;
  font-weight: 400;
  background-image: url(../images/icons/Up.svg);
  background-position: center right 10px;
  background-repeat: no-repeat;
  background-size: 14px;
  width: 101px;
  height: 35px;
  border-radius: 0;
  box-shadow: none;
}

.contract-container .opt-srch span.glyphicon.glyphicon-search, .extended-container .opt-srch span.glyphicon.glyphicon-search {
  top: 2px !important;
  right: 6px !important;
}

.contract-info-block .contract-info.list-data ul {
  max-height: 100px;
  overflow: auto;
  white-space: normal;
}

/* contract page css end*/
#ResyncTable .dropdown.reprocess-action {
  display: inline-flex;
}

#ResyncTable .dropdown.reprocess-action img {
  padding-right: 12px;
}

#manageActiveEpiTable tbody tr td, #manageInactiveEpiTable tbody tr td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 20px;
}

#manageActiveEpiTable tbody tr td:first-child, #manageInactiveEpiTable tbody tr td:first-child {
  overflow: visible;
}

/* sync recovery process*/
#opr-sync-table-data.yui3-widget.modal-dialog {
  height: 800px;
  width: 800px;
  left: 359px;
  z-index: 1204 !important;
  top: 0 !important;
}

#opr-sync-table-data {
  position: absolute;
  max-width: 800px;
}

.pull-right {
  float: right !important;
  position: absolute;
  right: 5px;
}

.yui3-widget-bd.modal-body {
  overflow: auto;
}

#opr-sync-confitable td.opr-sync-datatitle {
  border-right: 2px solid #DDDDDD;
  padding: 12px;
  border-bottom: 2px solid #DDDDDD;
  width: 30%;
  font-family: HPE Graphik;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: #333333;
}

#opr-sync-confitable td.opr-sync-datadsync {
  border-bottom: 2px solid #DDDDDD;
  padding: 12px;
  width: 70%;
  font-family: HPE Graphik;
  font-size: 16px;
  color: #333333;
  line-height: 20px;
}

#opr-sync-table-data .yui3-widget-bd.modal-body {
  height: 620px !important;
  max-height: 620px !important;
}

#opr-sync-table-data.yui3-widget.modal-dialog {
  height: 700px !important;
  width: 800px;
  left: 359px;
  z-index: 1204 !important;
  top: 0 !important;
  margin: 0;
}

table#opr-sync-confitable {
  border: 2px solid #DDDDDD;
  margin-bottom: 20px;
  width: 100%;
}

#ResyncTable .dropdown.reprocess-action p.reprocess-action-text {
  font-family: "HPE Graphik";
  font-style: normal;
  font-weight: 600;
  font-size: 19px;
  line-height: 24px;
  margin: 0;
  color: #333333;
}

.opr-sync-detail-table .heading-4-strong-black {
  margin-bottom: 20px;
}

#opr-sync-confitable td.opr-sync-datatitle-header {
  border-right: 2px solid #DDDDDD;
  padding: 12px;
  border-bottom: 2px solid #DDDDDD;
  width: 30%;
  font-family: HPE Graphik;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: #333333;
}

#opr-sync-confitable td.opr-sync-datadsync-body {
  border-right: 2px solid #DDDDDD;
  padding: 12px;
  width: 30%;
  font-family: HPE Graphik;
  font-size: 16px;
  color: #333333;
  line-height: 20px;
}

#ResyncTable td.objectid {
  cursor: pointer;
  text-decoration: underline;
}

.reprocessInitiated {
  margin-bottom: 20px;
  margin-left: 40px;
  font-size: 16px;
  color: #333333;
  line-height: 20px;
  font-family: "HPE Graphik";
}

.dataTableFooter.dataTableCustomFooter.epiCustomFooter.ResyncTableFooter {
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: space-around;
}

div#ResyncTable_length {
  margin: 15px;
}

#ResyncTable .dropdown.reprocess-action {
  cursor: pointer;
}

.syncmessage {
  text-align: center;
  font-size: 16px;
  color: #333333;
  line-height: 20px;
  font-family: "HPE Graphik";
}

.syncmessageerror {
  text-align: center;
  font-size: 16px;
  color: red;
  line-height: 20px;
  font-family: "HPE Graphik";
}

.opt-overlay.resync {
  text-align: center;
}

/* sync recovery process end*/
.brt-expandable #parties .rdt_Table .rdt_TableHead {
  display: none;
}

.brt-expandable #parties #EPImodalallocation .rdt_Table .rdt_TableHead {
  display: block;
}

.brt-expandable #parties .rdt_Table .rdt_TableBody .rdt_TableRow {
  padding-top: 6px;
  padding-bottom: 6px;
}

.brt-expandable #parties .rdt_Table .rdt_TableBody .rdt_TableRow.new-selected-epi {
  background-color: #eee;
}

.data-loader-container .opt-srch .opt-search-container {
  padding: 0 0 24px 0;
}

.data-loader-container .opt-srch .customDataTableContainer {
  border-top: 2px solid #ddd;
}

.settings-container .form-control.multiSelJob, .settings-container .form-control.multiSelHpe {
  min-height: 60px;
}

.global-save-cancel .global-save-cancel-button .global-link-div span.global-link {
  font-family: "HPE Graphik";
  font-style: normal;
  font-weight: 600;
  font-size: 19px;
  line-height: 24px;
  color: #333;
  padding: 20px 25px 20px 50px;
  background-repeat: no-repeat !important;
  background-size: 20px !important;
  background-position: left 25px top 20px !important;
}

.global-save-cancel .global-save-cancel-button .global-link-div span.global-link a {
  color: #333333;
}

.global-save-cancel .global-save-cancel-button .global-link-div {
  display: inline-block;
  width: 50%;
  clear: both;
  text-align: left;
}

.global-save-cancel .global-save-cancel-button .global-link-deactivate {
  background-image: url(../images/icons/Keymaster.png);
}

.global-save-cancel .global-save-cancel-button .global-link-promote {
  background-image: url(../images/icons/subtract-circle.png);
}

.global-save-cancel .global-save-cancel-button input {
  min-width: 150px;
  color: white;
}

.profile-warning-inactive-lastppa {
  background: #FFE75E;
  font-family: HPE Graphik;
  font-style: normal;
  font-weight: 600;
  font-size: 24px;
  line-height: 30px;
  padding: 20px 96px;
  color: #333;
  background-image: url(../images/icons/24.png);
  background-repeat: no-repeat;
  background-position: 50px 24px;
}

.opt-personal .toolTipIcon {
  display: none;
}

.task-container {
  font-family: "HPE Graphik";
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
}

.task-container .opt-srch {
  padding-left: 0;
  padding-top: 0;
}

.task-container #newRequest, .task-container #processedRequest {
  padding: 0;
}

.task-container .opt-srch span.glyphicon.glyphicon-search {
  top: 10px !important;
}

#manageNewRequestTable .prpRadioGroup {
  display: inherit;
}

#manageNewRequestTable .prpRadioGroup input[type=radio] {
  top: 0px;
  left: 0px;
  width: 24px;
  height: 24px;
}

.task-warningModal img {
  float: right;
  cursor: pointer;
  width: 12px;
}

.UserManagementV2 #campgnDropdownMenu {
  border: none;
  background: #FFFFFF;
  color: #333333;
}

.UserManagementV2 #campgnDropdownMenu:active, .UserManagementV2 #campgnDropdownMenu:focus {
  background: #333333;
  color: #FFFFFF;
  border-radius: 0;
  outline: 0;
}

.UserManagementV2 .dropdown-menu.campgn-dropdown-menu {
  background-color: #EEEEEE;
  border-radius: 0;
  padding: 8px 8px;
  font-size: 19px;
  font-family: "HPE Graphik";
  font-weight: normal;
  flex-direction: column;
  justify-content: space-between;
  min-height: 70px;
  min-width: 140px;
  left: auto;
}

.UserManagementV2 table#manageUserList {
  border-top: 2px solid #ddd;
}

.UserManagementV2 div#manageUserList_filter {
  margin-bottom: 24px;
}

.alertConfigPopup-content .modal-heading-small {
  font-family: HPE Graphik;
  font-size: 24px;
  Color: #666;
  text-align: left;
  line-height: 30px;
  font-weight: 400;
  margin-bottom: 48px;
}

.alertConfigPopup-content .modal-heading-header {
  font-size: 28px;
  font-weight: 400;
  font-family: "HPE Graphik";
  line-height: 34px;
  color: #292d3a;
  margin: 0 0 12px;
}

.UserManagementV2 .mdcp-service-success-message-mg-user, #global-error-section .mdcp-service-success-message-mg-user {
  background: var(--hpe-color-decorative-brand) -webkit-linear-gradient(bottom, var(--hpe-color-decorative-brand) 0%, var(--hpe-color-decorative-brand) 100%);
  font-family: HPE Graphik;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 20px;
  padding: 20px 60px;
  color: #fff;
  background-image: url(../images/inputTick.png);
  background-repeat: no-repeat;
  background-position: 24px 24px;
}

/* `:not(.comm-error-message)` - see the base rule near the top of this file.
   Manage User embeds the Notification Preferences portlet, so this selector
   would otherwise repaint that banner's legacy red band over the inline
   notification (both would be (0,2,0), and this rule comes later). */
.UserManagementV2 .global-error-message-field:not(.comm-error-message) {
  background: #CA2B4E;
  font-family: HPE Graphik;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 20px;
  padding: 20px 60px;
  color: #fff;
  background-image: url(../images/icons/error-close.png);
  background-repeat: no-repeat;
  background-position: 24px 24px;
}

/* Figma token "heading/large": HPE Graphik 24/32, weight 500, #292D3A */
.manage-user-edit-v2 .modal-title {
  float: left !important;
  text-align: left !important;
  font-family: "HPE Graphik" !important;
  font-style: normal !important;
  font-weight: 500 !important;
  font-size: 24px !important;
  line-height: 32px !important;
  padding: 10px 0 0 16px !important;
  color: #292D3A !important;
}

.manage-user-edit-v2 .modal-header {
  border: 0px !important;
}

/* Same cross treatment as the other pop-ups: 36x36 round hit area, contrast
   fill on hover. The `.btn-toolbar-button` selector and the flagged radius are
   needed because clay.css loads after main.css and re-squares the button. */
.manage-user-edit-v2 .modal-header .close,
.manage-user-edit-v2 button.close.btn-toolbar-button,
.manage-user-edit-v2-content button.close.btn-toolbar-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  padding: 0 !important;
  border: 0;
  border-radius: 50% !important;
  background-color: transparent;
  box-shadow: none;
  opacity: 1;
  text-shadow: none;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out;
}

.manage-user-edit-v2 .modal-header .close:hover,
.manage-user-edit-v2 .modal-header .close:focus,
.manage-user-edit-v2 button.close.btn-toolbar-button:hover,
.manage-user-edit-v2 button.close.btn-toolbar-button:focus,
.manage-user-edit-v2-content button.close.btn-toolbar-button:hover,
.manage-user-edit-v2-content button.close.btn-toolbar-button:focus {
  background-color: rgba(0, 0, 0, 0.08) !important;
  border-radius: 50% !important;
  opacity: 1;
  outline: none;
}

.manage-user-edit-v2 .modal-header .close:active,
.manage-user-edit-v2 button.close.btn-toolbar-button:active,
.manage-user-edit-v2-content button.close.btn-toolbar-button:active {
  background-color: rgba(0, 0, 0, 0.12) !important;
}

.manage-user-edit-v2 .modal-header .close:focus-visible {
  outline: 2px solid #292D3A;
  outline-offset: 2px;
}

.manage-user-edit-v2 .manage-user-edit-v2-content {
  border-radius: 0px !important;
}

button.ppaaccess img {
  height: 18px;
  width: 18px;
}

button.demoteToPpa {
  background-image: url(../images/icons/user.svg) !important;
  background-size: 18px 23px !important;
}

.last-ppa-warning-popup h2 {
  font-weight: 400;
  font-size: 28px;
  line-height: 34px;
  margin-bottom: 40px;
}

.last-ppa-warning-popup h5 {
  font-weight: 400;
  font-size: 24px;
  line-height: 30px;
  color: #67686e;
  margin-bottom: 16px;
}

.last-ppa-warning-popup p {
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  color: #67686e;
  margin-bottom: 48px;
}

.last-ppa-warning-popup .modal-footer {
  border-top: 2px solid #ddd !important;
  margin: 0 35px;
  padding-right: 0 !important;
}

.last-ppa-warning-popup .modal-footer .btn-toolbar {
  float: right;
}

.last-ppa-warning-popup.modal-dialog .modal-footer .sucessButton {
  background: var(--hpe-color-decorative-brand) !important;
  border: 2px solid var(--hpe-color-decorative-brand);
  color: #FFFFFF;
  margin-right: 0;
}

.last-ppa-warning-popup.modal-dialog .modal-content .modal-footer button.sucessButton:hover {
  background-color: var(--hpe-color-decorative-brand);
}

.manage-user-edit-v2 .dialog-iframe-bd .dialog-iframe-node {
  padding: 0px;
}

/* ---------------------------------------------------------
   Edit user pop-up: scroll the tab panel, not the whole card

   The iframe BODY was the scroller, so the track ran the full height of the
   card - its top hidden behind the fixed tab strip and its bottom behind the
   pinned Save/Cancel row. `.nested-body-holder` takes the scroll instead.

   `:has(.edit-user-global-save)` keeps this to the Edit user page only: the
   tab shell (prp-settings-v2-tab) and the 1_column_b layout are shared with
   the ordinary Settings pages, which must keep their current spacing.
   180px = 76px tab strip + 32px clearance + the 72px action-row band.
   --------------------------------------------------------- */
.portal-popup:has(.edit-user-global-save) .nested-body-holder {
  margin-top: 32px;
  padding-top: 0;
  height: calc(100vh - 180px);
  max-height: calc(100vh - 180px);
  overflow-y: auto;
  /* track sits 24px in from the card edge */
  margin-right: 24px;
  padding-bottom: 24px;
}

/* the layout template ships `padding: 24px 0px 24px 24px !important` */
.portal-popup:has(.edit-user-global-save) #main-content {
  padding-right: 24px !important;
}

.global-save-cancel-personal-button #inactiveGlobal a.global-link-deactivate-text {
  color: #CC1F1A;
  text-decoration: none;
  /* same box as Save/Cancel so the three actions share one baseline */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 5px 18px;
  border-radius: 9999px;
}

.global-save-cancel-personal-button #inactiveGlobal a.global-link-deactivate-text:hover,
.global-save-cancel-personal-button #inactiveGlobal a.global-link-deactivate-text:focus {
  background-color: rgba(0, 0, 0, 0.04);
  text-decoration: none;
}

.global-save-cancel-personal-button #inactiveGlobal {
  display: inline-block;
  margin-top: 10px;
  font-family: "HPE Graphik";
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  text-decoration: none;
  min-width: 18%;
}

/* Figma "button/secondary/medium": 16/24 text, 36px min-height, 5px 18px.
   `!important` on padding: the global `.primaryButton` rule in _common.scss
   sets `padding: 9px 24px !important`. */
.global-save-cancel-personal-button #manage-user-cancel, .global-save-cancel-personal-button #manage-user-save {
  font-size: 16px;
  line-height: 24px;
  height: 36px;
  min-height: 36px;
  padding: 5px 18px !important;
}

.edit-user-global-save .global-save-cancel-personal-button {
  padding: 24px 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  position: fixed;
  bottom: 0;
  width: calc(100% - 48px);
  background-color: #fff;
  z-index: 9;
}

#inactiveGlobal img.global-link-deactivate-icon {
  margin-right: 10px;
}

.support-action h2 {
  font-family: "HPE Graphik";
  font-weight: 600;
  font-size: 24px;
  line-height: 30px;
}

div.support-action-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-bottom: 24px;
}

.support-action-holder {
  width: 50%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.support-action button.ppaaccess {
  top: auto;
  margin-top: 12px;
  border: 2px solid var(--hpe-color-decorative-brand);
  padding: 8px;
  padding-left: 64px;
  padding-right: 24px;
  background-position: left 27px top 10px !important;
}

.profile-syncFailed a {
  cursor: pointer;
  text-underline-offset: 1px;
}

.manage-user-container .opt-srch {
  padding: 12px 0;
}

.manage-user-container ul.prpNavTabs.nav.nav-tabs li a {
  padding: 5px 18px;
  border-radius: 16px;
  background-color: rgba(0, 0, 0, 0.04);
}

.manage-user-container > ul.prpNavTabs.nav.nav-tabs.manage-user-status-tabs li a {
  padding: 2px 0px 24px;
  border-radius: 0;
  background-color: transparent;
}

.manage-user-container > ul.prpNavTabs.nav.nav-tabs.manage-user-status-tabs li.active a,
.manage-user-container > ul.prpNavTabs.nav.nav-tabs.manage-user-status-tabs li.active a:hover {
  border-bottom: 4px solid var(--hpe-color-decorative-brand, #01A982);
  margin-bottom: -1px;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  color: #333;
}

.manage-user-container ul.prpNavTabs.nav.nav-tabs {
  border-bottom: 0;
  margin-bottom: 0px;
}

.manage-user-container > ul.prpNavTabs.nav.nav-tabs.nav-tabs-default {
  margin-bottom: 22px;
}

.manage-user-container .opt-srch span.glyphicon.glyphicon-search {
  top: 10px !important;
  right: 5px !important;
}

.manage-user-container .opt-srch .opt-search-container .opt-search-box-div img, .task-container .opt-srch .opt-search-container .opt-search-box-div img {
  height: 14px;
  width: 14px;
}

.supportpagemdcp .field-error .form-group {
  border: 2px solid #CA2B4E;
  position: relative;
  z-index: 1;
}

.nested-content-holder .nested-nav-bar .tab-manu-wrapper .main-tab span.node-with-out-child-tab.hiddenTab {
  display: none !important;
}

.edit-user-global-save .global-save-cancel-personal-button .ppaaccess {
  top: 0;
  margin: 0 48px 0 10px;
}

button.ppaaccessRetrive, button.ppaaccessApply {
  height: auto;
  min-height: 48px;
  white-space: normal;
  word-wrap: break-word;
  text-align: center;
  padding: 9px 24px;
}

.edit-user-global-save .global-save-cancel-personal-button .global-link#inactiveGlobal {
  margin: 0px !important;
}

.opt-personal .manage-user-container .dynamicDivMiddleInitial {
  padding-left: 0 !important;
}

/*.opt-personal .manage-user-container .dynamicDivCountry{
	padding-left: 6px !important;
}
.opt-personal .manage-user-address-container .dynamicDivState{
	padding-left: 6px !important;
}*/
.tools-settingv2 #manage-user-userToolsDiv .manageuser-filter label {
  display: inline;
  color: #333333;
  font-weight: 400;
  font-size: 16px;
}

.tools-settingv2.customDataTableContainer #manage-user-userToolsDiv .dataTables_length label {
  font-weight: 400;
  font-size: 16px;
}

.tools-settingv2 #manageUserToolsTable .fw-600 {
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
}

.tools-settingv2 #manageUserToolsTable .fs-point9em, #taskNewPartyToolsTable .fs-point9emk {
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
}

.tools-settingv2 #manageUserToolsTable td.vertical-top, #taskNewPartyToolsTable td.vertical-top {
  padding: 0px 10px 0px 0px !important;
}

.tools-settingv2 #manageUserToolsTable .clr-grey.userRightHover, .tools-settingv2 #manageUserToolsTable .edit-tool-obj {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
}

.tools-settingv2 #manage-user-userToolsDiv .prpRadioGroup .prpRadioButton, #taskNewPartyToolsTable .prpRadioGroup .prpRadioButton {
  top: 0;
  left: 90px;
}

.tools-settingv2 #manageUserToolsTable td.fs-point9em, #taskNewPartyToolsTable td.fs-point9em {
  padding-left: 80px !important;
}

.tools-settingv2.customDataTableContainer #manage-user-userToolsDiv #manageUserToolsTable {
  border-top: 2px solid #d8d8d8 !important;
}

.tools-settingv2.customDataTableContainer #manage-user-userToolsDiv .dataTables_wrapper #manageUserToolsTable_length {
  margin-bottom: 24px !important;
}

.tools-settingv2 #manageUserToolsTable td.pd-left-18px.vertical-top {
  width: 10%;
}

span.tab-node.node-with-out-child-tab.opr-tab-support {
  background-image: url(../images/icons/Floatation.png) !important;
}

.register-new-company {
  cursor: pointer;
}

.opt-personal .fieldVisibilitymobileNumber .col-md-3.dynamicDivDialingCode, .opt-personal .fieldVisibilityworkNumber .col-md-3.dynamicDivDialingCode {
  padding: 0;
}

.opt-personal .settings-container .maindiv .fieldVisibilitymobileNumber .col-md-3.dynamicDivDialingCode .input-select-wrapper,
.opt-personal .settings-container .maindiv .fieldVisibilityworkNumber .col-md-3.dynamicDivDialingCode .input-select-wrapper {
  border-right: 0px;
}

.opt-personal .settings-container .maindiv .fieldVisibilitymobileNumber .col-md-9.dynamicDivPhoneNumber,
.opt-personal .settings-container .maindiv .fieldVisibilityworkNumber .col-md-9.dynamicDivPhoneNumber {
  padding: 0px;
}

.manageuser-personal-header {
  margin-bottom: 20px;
}

/*.opt-personal .manage-user-container .fieldVisibilitymobileNumber .col-md-3.dynamicDivDialingCode, 
.opt-personal .manage-user-container .fieldVisibilityworkNumber .col-md-3.dynamicDivDialingCode  {
    padding-left: 6px;
}*/
.settingsv2searchFilters div#manageUserList_active_length {
  float: right;
  margin-bottom: 25px;
}

.settingsv2searchFilters .manageuser-filter {
  display: inline;
  margin-left: 12px;
  float: left;
}

.settingsv2searchFilters .user-search-criteria {
  display: flex;
  flex-direction: column;
}

.settingsv2searchFilters .manageuser-filter label {
  font-weight: 600;
  line-height: 20px;
  color: #292d3a;
  font-family: HPE Graphik;
  font-size: 16px;
  display: inline;
}

div#extendedActiveTable_wrapper, div#extendedInActiveTable_wrapper, div#extendedFutureTable_wrapper {
  /*overflow: hidden;*/
}

td.extended-code, td.extended-name {
  word-break: break-all;
}

table#extendedActiveTable, #extendedInActiveTable, #extendedFutureTable {
  table-layout: fixed;
  word-break: break-all;
  margin-top: 15px;
}

.opt-personal .settings-container .input-select-wrapper select option:hover, .settings-container .input-select-wrapper select option:checked {
  background: #EEEEEE -webkit-linear-gradient(bottom, #EEEEEE 0%, #EEEEEE 100%);
  color: #333333 !important;
  -webkit-text-fill-color: #333333;
}

.secondaryButton:focus, .secondaryButton.focus, .secondaryButton:active:focus, .secondaryButton:active.focus, .secondaryButton.active:focus, .secondaryButton.active.focus {
  outline: 0;
}

ul.more-count-exceed {
  overflow-y: scroll;
  max-height: 75px !important;
}

span.toolTipIcon.toolTipfirstName, span.toolTipIcon.toolTipmiddleInitial, span.toolTipIcon.toolTiplastName, span.toolTipIcon.toolTipemail {
  display: block;
}

span.toolTipIcon.toolTiproles {
  display: block;
  position: absolute;
  top: 3%;
  right: 0px;
  transform: translate(0, -45%);
}

img.personalicon {
  padding: 10px 5px;
}

/* Header labels are translated (9+ locales) and the sortable headers carry an
   18px sort arrow, so a hard max-width here made long labels + the arrow overflow
   into the next column. Keep a comfortable minimum and let the column grow. */
.task-container .customDataTableContainer .task-date {
  min-width: 120px;
}

.task-container .customDataTableContainer td.task-req-type {
  word-break: break-word;
}

.task-container .customDataTableContainer td.task-decision {
  white-space: nowrap;
}

.opt-srch .row.adv-srch {
  padding-top: 24px;
}

.opt-srch .adv-srch-button {
  float: right;
}

.opt-srch .adv_search_inner_container:first-child {
  padding-left: 0px !important;
}

.opt-srch .adv_search_inner_container {
  padding: 12px !important;
}

.opt-srch .adv_search_inner_container:last-child {
  padding-right: 0px !important;
}

.opt-srch .profile-mgmt-optn-btn .secondaryButton {
  background-size: 24px !important;
  background-position: left 22px top 8px !important;
  padding: 12px 18px 12px 55px;
  min-width: 140px;
  margin: 0;
}

.opt-srch .profile-mgmt-optn-btn {
  padding-left: 0;
}

button.advSearchbtn {
  height: 36px !important;
  background-image: url(../images/icons/advSearch.png) !important;
  background-repeat: no-repeat !important;
  background-size: 21px !important;
  background-position: left 22px top 8px !important;
  padding: 10px 18px 11px 55px !important;
  margin-left: 24px !important;
}

.adv-srch-button button.advSearchbtn {
  background-image: url(../images/icons/advSearch_white.png) !important;
}

button.advSearchbtn:hover, button.advSearchbtn:active, button.advSearchbtn:focus {
  padding: 10px 18px 11px 55px !important;
  margin-left: 24px !important;
}

.adv-srch-button button.advSearchbtn[disabled] {
  background-image: url(../images/icons/advSearch.png) !important;
  height: 48px;
  color: #666;
}

.adv-srch-button button.advSearchbtn {
  background-image: url(../images/icons/advSearch_white.png) !important;
}

.adv-srch-button button {
  min-width: 180px;
  height: 48px;
  margin-left: 24px !important;
}

.multi-search-error-message p {
  background: #CA2B4E;
  color: white;
  padding: 8px;
}

.settings-container .opr-form-field-custom-select .options {
  position: relative;
  min-width: 92%;
  max-height: 150px;
  overflow-y: scroll !important;
  z-index: 100;
  font-family: HPE Graphik;
  cursor: pointer;
  background-color: #f6f6f6;
  margin-left: 0;
  width: 100%;
  font-weight: 400;
  font-size: 19px;
  font-style: normal;
  color: #333333;
}

.settings-container .opr-form-field-custom-select {
  position: relative;
}

.settings-container .opr-form-field-custom-select .custom-option, .settings-container .opr-form-field-custom-select .custom-option-multi {
  padding: 6px 24px;
}

.settings-container .opr-form-field-custom-select .custom-option-multi {
  padding: 6px 48px;
}

.settings-container .opr-form-field-custom-select .custom-option:hover {
  background-color: #ddd;
}

.settings-container .opr-form-field-custom-select .optionsContainer {
  box-shadow: 0px 12px 24px rgba(51, 51, 51, 0.25);
  position: absolute;
  width: 100%;
  z-index: 100;
}

.settings-container .form-control.optionSearch {
  height: 40px !important;
  border-radius: 0px;
  border: 2px solid #ddd;
  background-color: white;
  border-width: 2px 0;
  padding: 12px !important;
  background-image: url(/o/prp-theme/images/icons/search.svg);
  background-repeat: no-repeat;
  background-position: right 18px top 14px;
  background-size: 14px;
  text-overflow: ellipsis;
  padding-right: 25px !important;
}

.opr-dropdown-hideDiv {
  display: none;
}

.settings-container .opr-form-field-custom-select .opr-form-field-text input[readonly] {
  cursor: default;
  color: #333333 !important;
}

.custom-option-multi.multi-selected {
  background-image: url(../images/icons/checkMark.png) !important;
  background-size: 12px;
  background-position: left 18px top 15px !important;
  background-repeat: no-repeat !important;
}

.settings-container .opr-form-field-select-caret input.select-caret {
  background: transparent;
  background-image: url(/o/prp-theme/images/icons/Up.svg);
  background-repeat: no-repeat;
  background-position: right;
  background-size: 14px;
  text-overflow: ellipsis;
  padding-right: 14px !important;
}

.settings-container .opr-form-field-custom-select .opr-form-field-text input::placeholder {
  color: #333333;
  opacity: 1;
}

.settings-container .opr-form-field-custom-select .opr-form-field-text input:-ms-input-placeholder {
  color: #333333;
}

.settings-container .opr-form-field-custom-select .opr-form-field-text input::-ms-input-placeholder {
  color: #333333;
}

ul.dropdown-menu.audit-info-menu {
  float: right;
  left: auto;
  min-width: 250px !important;
}

div.audit-info-dropdown {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-end !important;
  align-items: flex-end !important;
}

.newAddedTr .audit-info-dropdown {
  display: none !important;
}

.opt-personal .settings-container .audit-div {
  position: absolute;
  left: 50%;
  top: 50%;
}

.audit-info-dropdown span.audit-info {
  font-weight: 600;
}

#activeCampgn .customDataTableContainer .footerButtons.optActionbuttons {
  bottom: 13px;
  position: absolute;
}

.manage-campgn-assgnmnt-container .dataTables_wrapper, .extended-container .dataTables_wrapper {
  padding-bottom: 50px;
}

.audit-info-dropdown li {
  font-size: 16px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tool-activity-search-container .col-md-6.search_date_inner_container, .col-md-6.search_date_inner_container {
  padding: 0;
}

.tool-activity-search-container div#Selectondiv {
  position: absolute;
  width: 100%;
}

.tool-activity-search-container #Selectondiv .DivMenuDD {
  max-height: 215px;
  overflow-y: auto !important;
}

.tool-activity-container .customDataTableContainer .footerButtons.optActionbuttons {
  bottom: 70px;
  position: relative;
  display: inline-block;
}

.tool-activity-search-container .fieldVisibilityFromDate .form-group.input-text-wrapper, .fieldVisibilityFromDate .form-group.input-text-wrapper {
  border-right: 0;
}

.tool-activity-search-container #Selectondiv .DivLanguageDD .LabelLabel {
  text-overflow: ellipsis;
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
}

.tool-activity-search-container #Selectondiv label.selectoneDD.date-range-search, #Selectondiv label.selectoneDD.date-range-search {
  background-position: right 10px top 29px !important;
  padding: 32px 12px;
}

.tool-activity-search-container #Selectondiv .DivLanguageDD.date-range-search, #Selectondiv .DivLanguageDD.date-range-search {
  background-position: right 10px top 29px !important;
  padding: 18px 12px;
}

.tool-activity-search-container .date-range-search, .date-range-search {
  height: 64px !important;
}

.tool-activity-search-container .tool-activity-info-text {
  font-family: "HPE Graphik";
  font-size: 18px;
  line-height: 24px;
}

.campaign-details .campaignDates .campaignEndDate .col-md-12 {
  padding-left: 0 !important;
}

.prpModal#updateCampgnModal .modalFooter button {
  min-width: 140px;
}

#updateCampgnModal .global-error-message-field {
  height: 66px;
  margin: 48px 0 24px;
}

#updateCampgnModal span.toolTipIcon {
  z-index: 10;
}

/* Legacy band, kept for the other consumers of this class - currently
   opr-marketing-campign-web (view.jsp `.success-message-field.mc-success-block`).
   Settings > Manage users > Personal details no longer uses it: it is
   overridden by `.opt-personal .success-message-field` near the top of this
   file, which paints the same toast as the task approve / decline banners. */
.success-message-field {
  height: 48px;
  background: rgba(1, 169, 130, 0.44);
  font-family: "HPE Graphik";
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  padding: 12px 60px;
  background-image: url(../images/icons/status_good.png);
  background-repeat: no-repeat;
  background-position: 26px 14px;
  background-size: 20px;
}

#updateCampgnModal input {
  width: 95%;
}

#updateCampgnModal .campaign-details .col-md-12 {
  padding-left: 0 !important;
}

.customDataTableContainer .footerButtons .secondaryButton {
  min-width: 120px;
  transition: 0.1s ease-in-out;
}

.manage-campgn-container .table-responsive {
  padding-bottom: 10px;
}

.manage-campgn-container .tab-content .tab-pane {
  padding: 0 !important;
}

span.toolTipMCSearch {
  position: relative;
  top: 25%;
}

.opt-search-date-div span.clearable-input-date {
  position: absolute;
  right: 0px;
  top: 0;
  cursor: pointer;
  padding: 10px 15px;
}

.opt-search-date-div span.clearable-input-date img {
  width: 15px;
  height: 15px;
}

#manageInActiveCampgnTable td, #manageActiveCampgnTable td {
  max-width: 20px;
}

#licensedToolActivityTable td.tool-date-td, #toolAcivityNonLicensedTable td.tool-date-td {
  max-width: 80px;
  min-width: 78px;
}

#licensedToolActivityTable td.tool-userRight-td, #toolAcivityNonLicensedTable td.tool-userRight-td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 20px;
}

span.toolTipUserRightName {
  position: relative;
  top: 0;
  right: auto;
}

span.toolTipKeyUserRightName {
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.opt-srch .opt-search-container .opt-search-box-div.field-error {
  border: 1px solid #ca2b4e !important;
}

.settings-container.notes-container textarea.form-control {
  height: auto !important;
  resize: none;
}

.row.notes-section, .row.mhmg-user-section {
  padding-top: 30px;
}

.notes-container .notes-history-section, .mhmg-container .mhmg-linked-account-section {
  padding: 30px 0 0;
}

table#notesHistory, table#mhmgLinkedAccounts {
  border-top: 2px solid #ddd;
}

.notes-history-section p, .mhmg-linked-account-section p {
  padding: 10px 0;
}

table#notesHistory {
  white-space: pre-wrap;
}

.customDataTableContainer .dataTable tbody td.task-req-opt {
  display: table-cell !important;
  visibility: visible !important;
  opacity: 1;
  width: 140px;
  min-width: 140px;
  max-width: 140px;
}

.task-container .customDataTableContainer td.task-req-opt .user-location-filter-select {
  box-sizing: border-box;
  width: 140px;
  min-width: 140px;
  max-width: 140px;
}

#licensedTool, #nonLicensedTool {
  padding: 0;
}

#capabilityModal textarea.businessreason-error-msg-red {
  border: 2px solid #CA2B4E;
  z-index: 7;
  position: relative;
  background: #fff;
}

#osvToolAccess span.tool-title {
  width: 50%;
  font-size: 20px;
  font-family: "HPE Graphik";
}

#osvToolAccess span.tool_container {
  display: flex;
  margin: 16px 0;
}

#osvToolAccess .access-granted-btn, #osvToolAccess .access-granted-btn:hover, #osvToolAccess .access-granted-btn:focus, #osvToolAccess .access-granted-btn:active {
  border-color: #ccc;
  box-shadow: none;
  color: #ccc;
}

div#osvToolAccess {
  padding: 30px;
}

.modal-title .os-tool-access {
  font-weight: 400;
  font-family: "HPE Graphik";
}

.settings-cap-container .customDataTableContainer .dataTables_length {
  display: none;
}

.capabilityRequestSearchContainer .opt-search-date-div span.clearable-input-date {
  right: 30px;
}

.capabilityRequestSearchContainer .opt-srch .search_date_inner_container span.glyphicon.glyphicon-search {
  top: 5px !important;
}

.row.capabilityRequestSearchContainer {
  margin-bottom: 30px;
}

.capabilityRequestSearchContainer .opt-srch span.glyphicon.glyphicon-search {
  top: 10px !important;
  right: 8px !important;
}

.opr-relation-popup-modal.fade.in {
  opacity: 1 !important;
}

.opr-relation-popup-modal.modal.fade .modal-dialog {
  transform: none !important;
  margin: 0.5rem !important;
}

.opr-iframe-warningModal.modal-dialog:not(.dialog-iframe-modal):not(.modal-full-screen) {
  position: fixed !important;
  left: 0px !important;
  right: 0px !important;
  margin: auto;
  bottom: 10px !important;
}

.custom-icon {
  width: 22px;
  height: 22px;
  cursor: pointer;
  vertical-align: text-top;
}

div#MHMGUserdata, div#linkedAccountData, div#revisedNotiArea {
  left: inherit;
  right: 15px;
  width: 350px;
  max-width: 350px;
  border-radius: 0px;
  border: none;
  overflow: hidden;
  padding: 24px;
  font-family: "HPE Graphik";
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  max-height: 660px;
  overflow-y: auto;
}

div#revisedNotiArea {
  right: -12px;
  top: 47px;
  height: auto;
  max-height: none;
  padding: 24px;
  width: 300px;
  border-radius: 16px;
  border: 1px solid #E5E5E5;
  box-shadow: 0 2px 25px 0 rgba(0, 0, 0, 0.05);
}

/* Align the MHMG eyeball flyout chrome with the profile flyout (rounded corners, subtle border and soft shadow) */
div#MHMGUserdata {
  border-radius: 16px;
  border: 1px solid #E5E5E5;
  background: #FFF;
  box-shadow: 0 2px 25px 0 rgba(0, 0, 0, 0.05);
  /* the lists below are the scroll containers; the shared rule's
     `max-height: 660px; overflow-y: auto` only left a scrollbar gutter here,
     which ate into the right-hand 24px padding */
  max-height: none;
  overflow-y: hidden;
}

/* On desktop, open the flyout beside the eyeball icon (one header-icon pitch left of the profile flyout) */
@media screen and (min-width: 1025px) {
  div#MHMGUserdata {
    right: 45px;
    margin-right: 0 !important;
  }
}
/* Profile-style label / value pairs inside the eyeball flyout (typography per Figma) */
#MHMGUserdata .MHMGuserheader .MHMG-info-label {
  display: block;
  color: #292D3A;
  font-family: "HPE Graphik";
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
}

#MHMGUserdata .MHMGuserheader .MHMGprimaryrelationship .MHMGselbrtname,
#MHMGUserdata .MHMGuserheader .MHMGlocationinfo .MHMGcountryname {
  display: block;
  color: #292D3A;
  font-family: "HPE Graphik";
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

#MHMGUserdata .MHMGuserheader .MHMGprimaryrelationship,
#MHMGUserdata .MHMGuserheader .MHMGlocationinfo,
#MHMGUserdata .MHMGuserheader .MHMG_signedBy {
  margin-bottom: 24px;
}

/* "Signed by" and "Markets" are laid out inline by the shared relationship-list
   styles; inside the flyout header they follow the profile label/value rhythm. */
#MHMGUserdata .MHMGuserheader {
  font-size: 16px;
  line-height: 24px;
  /* the generic .MHMGuserheader adds `padding-left: 38px` on top of the card's
     own 24px, which is what made the left and right insets unequal */
  padding-left: 0;
  margin: 24px 0;
}

#MHMGUserdata .MHMGuserheader .MHMG_other_info {
  display: block;
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}

#MHMGUserdata .MHMGuserheader .MHMG_other_infoContainer {
  padding-right: 0;
  line-height: inherit;
}

#MHMGUserdata .MHMGuserheader .MHMG_signedBy,
#MHMGUserdata .MHMGuserheader .MHMG_sim .MHMG_sim_info {
  display: block;
  color: #292D3A;
  font-family: "HPE Graphik";
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
}

#MHMGUserdata .MHMGuserheader .MHMG_signedBy .MHMG_signedBy_info {
  display: block;
  margin-left: 0;
  font-weight: 400;
  line-height: 24px;
}

#MHMGUserdata .MHMGuserheader .MHMG_sim {
  flex-wrap: wrap;
  row-gap: 8px;
}

#MHMGUserdata .MHMGuserheader .MHMG_sim .MHMG_sim_info {
  flex: 0 0 90%;
  margin-right: 0;
}

#MHMGUserdata .MHMGuserheader .MHMG_sim .MHMG-Markets-direct,
#MHMGUserdata .MHMGuserheader .MHMG-Markets-collapse,
#MHMGUserdata .MHMGuserheader .MHMG-Markets-expand {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 24px;
}

/* Party names and markets can be long single tokens, so let them wrap instead
   of widening the flyout. */
#MHMGUserdata .MHMGuserheader .MHMGselbrtname,
#MHMGUserdata .MHMGuserheader .MHMGASIDname,
#MHMGUserdata .MHMGuserheader .MHMGcountryname,
#MHMGUserdata .MHMGuserheader .MHMG_signedBy_info {
  overflow-wrap: anywhere;
}

@media screen and (max-width: 480px) {
  div#MHMGUserdata {
    width: calc(100vw - 30px);
    max-width: calc(100vw - 30px);
  }
}
/* Keep the eyeball icon persistent and never swap it for the close (cross) icon, matching the profile icon behaviour */
li.MHMG-USericon #MHMG-usereye {
  display: inline-block !important;
}

li.MHMG-USericon #MHMG-close {
  display: none !important;
}

div#linkedAccountData {
  position: absolute;
  left: auto;
  right: 0;
  width: 270px;
  top: 47px;
  border-radius: 16px;
  border: 1px solid #E5E5E5;
  background: #FFF;
  box-shadow: 0 2px 25px 0 rgba(0, 0, 0, 0.05);
}

.linked-account-menu-header {
  font-size: 24px;
  font-weight: 600;
  line-height: 30px;
  margin-bottom: 14px;
  padding-top: 10px;
}

.linked-account-menu-header-desc {
  font-weight: 400;
}

.linked-account-menu-header-desc span {
  font-weight: 600;
  word-break: break-all;
}

.linked-account-signintoPrimary .signintoPrimaryBtn img {
  height: 24px;
  width: 24px;
  filter: brightness(0) invert(1);
}

.linked-account-signintoPrimary .signintoPrimaryBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: HPE Graphik !important;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  min-height: 40px;
  padding: 8px 18px !important;
  border-radius: 9999px;
  text-decoration: none;
  background-color: #292D3A !important;
  color: #FFFFFF;
  border: none !important;
  box-shadow: none;
  outline: none;
  margin: 24px 0 0 0 !important;
  box-sizing: border-box;
  width: auto !important;
  height: auto;
}

.linked-account-signintoPrimary .signintoPrimaryBtn:hover,
.linked-account-signintoPrimary .signintoPrimaryBtn:focus {
  background-color: #3E4550 !important;
  color: #FFFFFF;
  border: none !important;
  outline: none;
}

.linked-account-menu div {
  margin-bottom: 24px;
}

.linked-account-menu div.linked-support-container {
  margin-bottom: 0;
  display: flex;
}

.linked-support-container a, .linked-support-container a:focus {
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  color: #068667;
  text-decoration: underline;
  margin-left: 12px;
  -webkit-line-clamp: 1;
  width: 85%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.linked-support-container a:hover {
  color: #074738;
}

.linked-account-partner-warning {
  background: #7630EA;
  color: #fff;
  padding: 12px 24px 12px 60px;
  font-family: HPE Graphik;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  background-image: url(../images/icons/linked_info.svg);
  background-repeat: no-repeat;
  background-position: 20px 22px;
  background-size: 24px 24px;
  margin-bottom: 24px;
  border-radius: 6px;
}

#my-content-div1 .modal-dialog.linkedWarningModal {
  width: 720px;
}

#my-content-div1 .modal-dialog.linkedWarningModal .modal-content .modal-body {
  padding: 48px;
}

#my-content-div1 .modal-dialog.linkedWarningModal .modal-content .modal-body .toolSubHeaderText {
  margin-top: 24px;
}

#my-content-div1 .modal-dialog.linkedWarningModal .modal-content .modal-footer {
  padding: 0 48px 48px;
}

#my-content-div1 .modal-dialog.linkedWarningModal .modal-content .modal-footer .btn-toolbar {
  /* Lay the two CTAs out as a right-aligned row.

     This used to be `float: right; margin-left: 50%`, which reserved only
     half of the footer's 624px content box (312px) for the toolbar. The two
     buttons need ~335px together (min-width 140px each, plus their 20px
     gaps), so they never fitted on one line and wrapped - which is why
     "Weiter" and "Abbrechen" rendered stacked on top of each other instead of
     side by side. A flex row sized to the full width keeps them on one line
     and still right-aligned, and `flex-wrap` lets them stack only when the
     card is genuinely too narrow (small screens). */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  float: none;
  position: static;
  width: 100%;
  height: auto;
  margin-left: 0 !important;
}

#my-content-div1 .modal-dialog.linkedWarningModal .modal-content .modal-footer button {
  /* Spacing now comes from the row's `gap`; the old per-button margin also
     applied to the first button and pushed the row off the content edge.

     The vertical margin is normalised too: "Continue" inherited
     `margin-top: 24px` while "Cancel" inherited `0`, and because a flex row
     centres the *margin* box that left the two pills on visibly different
     baselines (12px apart) and misaligned their right edges when the row
     wrapped. Identical margins keep them on one baseline. */
  margin: 24px 0 0 0 !important;
  min-width: 140px;
  white-space: nowrap;
}

#my-content-div1 .modal-dialog.linkedWarningModal button.popupCloseSubscribe {
  right: 22px;
  top: 16px;
}

#MHMGUserdata .MHMGuserdescrp {
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  line-height: 26px;
  color: #292D3A;
  font-family: "HPE Graphik";
  border-bottom: 1px solid #D1D1D1;
}

.MHMG-user-info-icon {
  width: 24px;
  height: 24px;
  margin-right: 6px;
}

.MHMGuserheader {
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  padding-left: 38px;
  margin: 24px 0px 14px 0px;
  color: #333333;
}

#MHMGUserdata span.MHMGparty {
  display: inline-block;
  width: 80%;
}

/* Row: icon + label + chevron. The chevron is pushed to the content's right
   edge so it lands on the flyout's 24px inset instead of the label's 80%. */
#MHMGUserdata .MHMGpartydetails > #Otherlocations,
#MHMGUserdata .MHMGpartydetails > #Otherrelationship {
  display: flex;
  align-items: center;
  gap: 10px;
}

#MHMGUserdata .MHMGpartydetails > div > span.MHMGparty {
  flex: 1 1 auto;
  width: auto;
}

#MHMGUserdata .MHMGpartydetails .custom-icon-group {
  margin: 0;
}

#MHMGUserdata .MHMGpartydetails img.MHMGpartyicon {
  display: block;
  margin: 0;
}

.custom-icon-group {
  width: 24px;
  height: 24px;
  margin: 0px 10px 2px 0px;
}

#MHMGUserdata .MHMGpartydetails {
  line-height: 28px;
  font-weight: 600;
  font-size: 18px;
  padding-top: 24px;
  cursor: pointer;
  flex-direction: column;
}

#MHMGUserdata .MHMGpartydetails > #Otherlocations {
  margin-bottom: 8px;
}

.detailsofMHMG .Header img.backtodetails.custom-icon {
  margin: 0px 10px 20px 0px;
}

.detailsofMHMG ul {
  list-style: none;
  padding: 20px 0px 0px 0px;
  margin: 0px;
}

.detailsofMHMG {
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 40px;
  color: #333333;
}

.detailsofMHMG ul li {
  cursor: pointer;
  padding: 5px 0 5px 38px;
  line-height: 24px;
  font-weight: 600 !important;
}

/* HPE Design System Menu: the hovered/selected row is a rounded 6px surface,
   not a square full-bleed band (design-system.hpe.design/components/menu).
   An 8px side inset is needed for the rounding to be visible, since the list
   item itself runs edge to edge inside the panel. */
.detailsofMHMG ul li:hover,
.detailsofMHMG ul li.active {
  background-color: rgba(0, 0, 0, 0.04);
  border-radius: 6px;
  padding-left: 30px;
}

.detailsofMHMG ul li .brInfo {
  font-size: 14px;
  color: #666666;
  padding-right: 0;
}

.detailsofMHMG ul li.active .brInfo {
  color: #333333;
}

.detailsofMHMG ul li.relationshiplist {
  padding-left: 25px !important;
}

.detailsofMHMG ul li .brImgContainer {
  width: 8%;
}

.detailsofMHMG ul li.active {
  background-repeat: no-repeat !important;
  background-size: 14px;
  background-position: 4px center;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.2618 4.83813C19.6341 4.43028 20.266 4.40145 20.6739 4.77368C21.0817 5.14598 21.1106 5.77789 20.7383 6.18579L9.75591 18.218C9.57161 18.4199 9.3124 18.5382 9.03911 18.5442C8.76568 18.5501 8.50159 18.4431 8.30864 18.2493L3.29106 13.2092C2.90146 12.8178 2.90354 12.1848 3.29497 11.7952C3.68641 11.4056 4.31942 11.4067 4.70903 11.7981L8.9854 16.095L19.2618 4.83813Z' fill='%233E4550'/%3E%3C/svg%3E") !important;
}

.relationshiplist > div.brlistContainer {
  display: flex;
  align-items: center;
}

.MHMGcountryname {
  font-size: 16px;
  line-height: 20px;
}

.MHMG_other_info {
  font-size: 14px;
  line-height: 18px;
  margin: 8px 0;
  display: flex;
  align-items: center;
}

.MHMG_other_info .MHMG_signedBy {
  margin-bottom: 5px;
}

.MHMG_sim, .MHMG_sim span {
  overflow: hidden;
}

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

.MHMG_sim.brInfo {
  justify-content: flex-start;
}

.MHMG_other_infoContainer {
  width: 100%;
  overflow: hidden;
  line-height: 1em;
  padding-right: 8px;
}

.MHMG_other_infoContainer.selectedInfo {
  line-height: 1.3em;
  max-height: none;
}

span.simHolder {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 3px 9px;
  margin: 2px;
  display: inline-block;
  font-family: HPE Graphik;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  color: #3E4550;
}

span.simHolder.simCountHolder {
  float: right;
  cursor: pointer;
}

.MHMG-Markets-direct, .br-Markets-expand {
  line-height: 12px;
}

.detailsofMHMG ul li .MHMG_other_infoContainer {
  padding-right: 0px;
}

.MHMG_other_infoContainer.expanded, .MHMG_other_infoContainer.selectedInfo.expanded {
  max-height: none;
}

.MHMG_other_info > span {
  display: block;
  line-height: 1;
}

.MHMG_sim span {
  /*width: 100%;
     display: inline-block;
     display: -webkit-box;
     -webkit-box-orient: vertical;*/
}

.MHMG_sim_info.displayOneLine {
  -webkit-line-clamp: 1;
}

.MHMG_sim_info.displayTwoLine {
  -webkit-line-clamp: 2;
}

span.MHMG_sim img {
  height: 30px;
  width: 30px;
  padding: 5px;
}

.MHMGExpandIcon.expanded, #brtListTable .brtMarketsExpandIconContainer.expanded, #myPendingRequestTable .brtMarketsExpandIconContainer.expanded,
#manageContractAccessTable .contractMarketsExpandIconContainer.expanded, .simExpandIconContainer.expanded {
  webkit-transition: transform 0.3s ease-out;
  -moz-transition: transform 0.3s ease-out;
  -o-transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.MHMGExpandIcon, #brtListTable .brtMarketsExpandIconContainer, #manageContractAccessTable .contractMarketsExpandIconContainer,
#myPendingRequestTable .brtMarketsExpandIconContainer, .simExpandIconContainer {
  webkit-transition: transform 0.3s ease-out;
  -moz-transition: transform 0.3s ease-out;
  -o-transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
}

.MHMG_sim.expanded, .MHMG_sim.expanded span {
  max-height: none !important;
}

.brInfoContainer:hover {
  background-color: #f6f6f6;
  border-left: 3px solid var(--hpe-color-decorative-brand);
}

.brInfoContainer:hover {
  background-color: #f6f6f6;
  border-left: 3px solid var(--hpe-color-decorative-brand);
}

.relationshiplist.active .brInfoContainer:hover {
  background-color: #fff;
  border-left: 3px solid #fff;
}

li.locationsBRlist:hover {
  background-color: #f6f6f6;
}

li.locationsBRlist.active:hover {
  background-color: #fff;
}

.brInfoContainer {
  padding: 0 8px;
  border-left: 3px solid #fff;
  width: 92%;
}

a.tool_request_btn.disabled .search_right.btn_inner {
  border: 2px solid #ccc;
}

a.tool_request_btn.disabled .search_right.btn_inner .btn_label {
  color: #ccc;
}

.MHMG_signedBy_info {
  font-weight: 400;
  /* The JSP emits the label and this span with no separator between them. */
  margin-left: 4px;
}

.MHMG_signedBy {
  font-weight: 600;
}

.MHMG_sim .MHMG_sim_info b {
  font-weight: 600;
}

.MHMG_sim .MHMG_sim_info {
  margin-right: 6px;
}

#MHMGUserdata .detailsofMHMG {
  font-size: 16px;
  line-height: 24px;
  color: #292D3A;
}

#MHMGUserdata .detailsofMHMG .Header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  font-weight: 600;
  line-height: 26px;
  color: #292D3A;
  padding-bottom: 24px;
}

#MHMGUserdata .detailsofMHMG .Header img.backtodetails.custom-icon {
  width: 20px;
  height: 20px;
  margin: 0;
}

#MHMGUserdata .detailsofMHMG ul {
  padding: 8px 0 0;
  max-height: 580px;
  overflow-y: auto;
}

/* Row shell. The padding moves onto .brlistContainer so the leading bar can be
   drawn edge to edge on the <li>, and background-image:none clears the
   checkmark the generic .detailsofMHMG ul li.active rule sets with !important. */
#MHMGUserdata .detailsofMHMG ul li.relationshiplist,
#MHMGUserdata .detailsofMHMG ul li.locationsBRlist {
  position: relative;
  overflow: hidden;
  margin: 0 0 4px;
  padding: 0 !important;
  border-radius: 8px;
  background-color: transparent;
  background-image: none !important;
}

#MHMGUserdata .detailsofMHMG ul li.locationsBRlist {
  padding: 8px 8px 8px 16px !important;
  font-size: 16px;
  line-height: 24px;
  color: #292D3A;
}

#MHMGUserdata .detailsofMHMG ul li.relationshiplist > .brlistContainer {
  align-items: flex-start;
  padding: 6px 6px 6px 16px;
  border-radius: 8px;
}

#MHMGUserdata .detailsofMHMG .brInfoContainer,
#MHMGUserdata .detailsofMHMG .brInfoContainer:hover,
#MHMGUserdata .detailsofMHMG .relationshiplist.active .brInfoContainer:hover {
  flex: 1 1 auto;
  width: auto;
  padding: 0;
  border-left: 0;
  background-color: transparent;
}

#MHMGUserdata .detailsofMHMG ul li .brImgContainer {
  flex: 0 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  cursor: pointer;
}

/* Rest / hover / selected / selected-hover */
#MHMGUserdata .detailsofMHMG ul li.relationshiplist:hover > .brlistContainer,
#MHMGUserdata .detailsofMHMG ul li.locationsBRlist:hover {
  background-color: #F7F7F7;
}

#MHMGUserdata .detailsofMHMG ul li.relationshiplist.active > .brlistContainer,
#MHMGUserdata .detailsofMHMG ul li.locationsBRlist.active {
  background-color: #D1FFEE;
}

#MHMGUserdata .detailsofMHMG ul li.relationshiplist.active:hover > .brlistContainer,
#MHMGUserdata .detailsofMHMG ul li.locationsBRlist.active:hover {
  background-color: rgb(170, 250, 222);
}

#MHMGUserdata .detailsofMHMG ul li.relationshiplist.active::before,
#MHMGUserdata .detailsofMHMG ul li.locationsBRlist.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: 6px;
  background: #1D6750;
  border-radius: 8px 0 0 8px;
}

#MHMGUserdata .detailsofMHMG .brHeading {
  margin-bottom: 4px;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: #292D3A;
}

#MHMGUserdata .detailsofMHMG ul li .brInfo,
#MHMGUserdata .detailsofMHMG ul li.active .brInfo {
  padding-right: 0;
  font-size: 14px;
  line-height: 20px;
  color: #3E4550;
}

/* Tag - V2 token: white pill so the chips stay legible on the mint selected row */
#MHMGUserdata span.simHolder {
  margin: 0 4px 4px 0;
  padding: 3px 9px;
  border: 1px solid #D4D8DB;
  border-radius: 6px;
  background: #FFFFFF;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: #3E4550;
}

/* Scrolling of the relationship / location lists, per the HPE Design System
   DataTable guidance (design-system.hpe.design/components/datatable):
   restrict the height on the list itself and set `overflow: auto` there, and
   pin the header so the user keeps context while scrolling.

   Previously the whole flyout was the scroll container (`div#MHMGUserdata`,
   max-height 660px), so with several business relationships the back arrow and
   the "Select business relationship" heading scrolled out of view and the rows
   ran under the panel's rounded top edge. Capping the <ul> instead keeps the
   heading fixed and leaves the panel itself unscrolled. The height is
   viewport-bound so the flyout can never grow past the window. */
#MHMGUserdata #Otherrelationshipdetails ul#MHMGBRLIst,
#MHMGUserdata #Otherlocationsdetails ul#MHMGBRcountries {
  max-height: min(600px, 100vh - 210px);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* the 6px bar overlays the row's own right padding, so the rows keep the
     flyout's 24px inset on both sides */
  padding-right: 0;
  /* the platform scrollbar is 15px with stepper arrows - far too heavy for a 350px flyout */
  scrollbar-width: thin;
  scrollbar-color: #C6C9CC transparent;
}

#MHMGUserdata #Otherrelationshipdetails ul#MHMGBRLIst::-webkit-scrollbar,
#MHMGUserdata #Otherlocationsdetails ul#MHMGBRcountries::-webkit-scrollbar {
  width: 6px;
}

#MHMGUserdata #Otherrelationshipdetails ul#MHMGBRLIst::-webkit-scrollbar-track,
#MHMGUserdata #Otherlocationsdetails ul#MHMGBRcountries::-webkit-scrollbar-track {
  background: transparent;
}

#MHMGUserdata #Otherrelationshipdetails ul#MHMGBRLIst::-webkit-scrollbar-thumb,
#MHMGUserdata #Otherlocationsdetails ul#MHMGBRcountries::-webkit-scrollbar-thumb {
  background: #C6C9CC;
  border-radius: 3px;
}

#dialogId .tool-partyId-container {
  border: 2px solid #CCCCCC;
  background: #FFFFFF;
  width: 23%;
  height: 160px;
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 5px 24px 30px;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-content: center;
  overflow: hidden;
  position: relative;
}

#dialogId .tool-choose-partyId-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  max-height: 340px;
  overflow: auto;
}

#dialogId .toolsInnerContainer .heading-4-strong .toolTipKeyUserRightName {
  margin-bottom: 10px;
  width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#dialogId .toolsInnerContainer img.selected-party-tick {
  height: 16px;
  width: 16px;
  position: relative;
  outline: none;
  margin-right: 8px;
}

#dialogId .toolsInnerContainer .tool-partyId-container.selected img.selected-party-tick {
  display: inline-block;
}

#dialogId .toolsInnerContainer .tool-partyId-container img.selected-party-tick {
  display: none;
}

#dialogId .toolsInnerContainer .tool-partyId-container.selected {
  background: #F6F6F6;
  border: 4px solid var(--hpe-color-decorative-brand);
}

#dialogId .toolsInnerContainer .tool-partyId-container.selected:hover {
  background: #F6F6F6;
  border: 4px solid var(--hpe-color-decorative-brand);
}

#dialogId .toolsInnerContainer .tool-partyId-container:hover {
  background: #FFFFFF;
  border: 2px solid var(--hpe-color-decorative-brand);
  cursor: pointer;
}

#my-content-div .modal-dialog .modal-content .modal-footer #party-view-tool-btn.sucessButton.disabled {
  border: 2px solid #eee !important;
  background-color: #eee;
  box-shadow: none;
  color: #666;
}

#dialogId .toolsInnerContainer .tool-partyId-container .tool-primary-party {
  position: absolute;
  bottom: 14px;
}

#dialogId .toolsInnerContainer .tool-partyId-container.primary .tool-party-info {
  max-height: 72px;
  overflow: hidden;
}

#dialogId .toolsInnerContainer .tool-partyId-container .tool-party-info {
  max-height: 96px;
  overflow: hidden;
}

#dialogId .toolsInnerContainer .tool-partyId-container .tool-party-info b {
  font-weight: 600;
}

.extended-container button.advSearchbtn {
  float: right;
}

td.extended-date, td.extended-date {
  min-width: 80px;
}

#extendedInActiveTable .extended-primary, #extendedActiveTable .extended-primary, #extendedInActiveTable .extended-hibernate, #extendedActiveTable .extended-hibernate {
  text-align: center !important;
}

/*PRPDXP-2718*/
.company-relation-page-info {
  font-family: HPE Graphik;
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: 0px;
  text-align: left;
  margin-bottom: 24px;
  color: #67686E;
  width: 700px;
}

.settings-company-relation-container {
  padding: 0;
  margin-top: 40px;
  background-color: #F7F7F7;
}

.row.brt-info-container {
  text-align: left;
  font-size: 16px;
}

.brt-title-container {
  font-size: 20px;
  font-weight: 600;
  padding-right: 32px !important;
}

.company-details-container span.toolTipIcon.toolTipBRTInfo {
  top: 45%;
  right: 10px;
}

.brt-title-container span.brt-title {
  padding-right: 5px;
  width: 100%;
  display: inline-block;
}

.company-details-container span.brt-title {
  font-size: 20px;
  font-weight: 600;
  line-height: 26px;
  color: #292D3A;
  white-space: nowrap;
}

button.brt-data {
  color: #333;
  background-color: #fff;
  width: 100%;
  font-size: 18px;
  border: 0;
  padding: 10px 0;
  margin-bottom: 15px;
}

button.brt-data.active {
  color: #fff;
  background-color: #0D5265;
}

span.brt-data-details {
  font-weight: 600;
}

.brt-data-ppa {
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  height: auto;
  float: right;
  padding: 5px 18px !important;
}

.party-details-label {
  display: flex;
  flex-wrap: nowrap;
}

#myCurrentRelationsTable tbody tr.expanded, #myCurrentRelationsTable tbody tr.country-child-row {
  background-color: #f6f6f6 !important;
}

#partyDetailsTable thead {
  display: none;
}

#partyDetailsTable tbody tr td.party-details-info {
  padding: 5px 0 !important;
}

#partyDetailsTable_wrapper {
  background: #fff;
}

table#partyDetailsTable {
  border-bottom: 0 !important;
  border-spacing: 20px 2px;
}

.party-details-data {
  font-weight: 400;
  line-height: 16px;
  color: #67686e;
}

.party-details-label {
  font-size: 16px;
  font-weight: 600;
  color: #292d3a;
  line-height: 22px;
}

.party-details-expand-arrow:hover, .country-expand-arrow:hover {
  background: rgba(0, 0, 0, 0.0392156863);
}

.party-details-expand-arrow, .country-expand-arrow {
  border-radius: 50%;
  display: inline-block;
  height: 28px;
  width: 28px;
  padding: 3px 8px;
}

.opt-main-container #myCurrentRelationsTable .dataTableFooter, .opt-main-container #myCurrentRelationsTable_wrapper .dataTableFooter {
  justify-content: space-between;
  width: 100%;
}

#myCurrentRelationsTable .brt-data-locations, #myCurrentRelationsTable .brt-data-locations :hover {
  font-size: 16px;
  font-weight: 600;
  margin-top: 4px !important;
}

#myCurrentRelationsTable .party-details-container {
  background-color: #fff;
  padding: 32px;
  border-radius: 12px;
  margin-bottom: 16px;
}

#myCurrentRelationsTable td.noBottomBorder {
  border: 0 !important;
}

#myCurrentRelationsTable .party-details-container .row.col-md-12.col-sm-12.party-details-data {
  padding: 0;
  line-height: 24px;
}

.row.brt-details-container > div {
  padding-left: 0;
}

.primary-relation-container {
  font-size: 14px;
  font-family: "HPE Graphik";
  font-weight: 400;
  color: #068667;
  position: absolute;
  top: 55%;
}

.primary-relation-container img {
  padding: 0 20px 0 5px;
}

#myCurrentRelationsTable .expand-country div {
  text-align: center;
  width: fit-content;
  padding: 0 5px;
}

#myCurrentRelationsTable .expanded .expand-country div {
  webkit-transition: transform 0.3s ease-out;
  -moz-transition: transform 0.3s ease-out;
  -o-transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.customDataTableContainer .disabled #partyDropdownMenu:active, .customDataTableContainer .disabled #partyDropdownMenu:focus {
  background: transparent;
  color: #DDDDDD;
  border-radius: 50%;
  outline: 0;
}

.customDataTableContainer .dropdown.open-actionlist ul.dataTable-dropdown-menu {
  background-color: #EEEEEE;
  border-radius: 0;
  padding: 8px 8px !important;
  font-size: 16px;
  font-family: "HPE Graphik";
  font-weight: normal;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  min-width: 140px;
  left: auto;
  top: 35px;
}

.party-details-container .customDataTableContainer .dropdown.open-actionlist ul.dataTable-dropdown-menu {
  top: 34px;
}

.customDataTableContainer #partyDropdownMenu {
  background: transparent;
  color: #292D3A;
  font-size: 16px;
  position: relative;
  height: 36px;
  width: 36px;
  border: 1px solid #006750;
  border-radius: 50%;
  padding-top: 2px;
}

.customDataTableContainer .disabled #partyDropdownMenu {
  color: #333333;
  opacity: 25%;
}

.customDataTableContainer .dataTable .dataTable-action-dropdown {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: flex-start;
}

.customDataTableContainer .dataTable .dataTable-action-dropdown li {
  cursor: pointer;
}

.customDataTableContainer .dataTable-dropdown-menu li {
  width: 100%;
}

/* block so the hover surface spans the whole row; the menu already supplies the
   other 8px, keeping the label at the same 16px inset as before */
.customDataTableContainer .dataTable-dropdown-menu li a {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-decoration: none !important;
  padding: 4px 8px;
  color: #068667 !important;
}

.customDataTableContainer .dataTable-dropdown-menu li a:hover {
  background-color: #e7e7e7;
  cursor: pointer;
  border-radius: 6px !important;
}

.settings-company-relation-container .dataTableFooter.dataTableCustomFooter.optCustomFooter {
  display: flex !important;
}

.customDataTableContainer #ppaListTable_wrapper #ppaListTable_filter .glyphicon.glyphicon-search {
  top: 14px !important;
}

#myCurrentRelationsTable_length label, #partyDetailsTable_length label {
  font-weight: 400;
}

#ppaListTable .ppa-phone {
  min-width: 150px;
}

#ppaListTable .ppa-name {
  word-break: break-all;
}

.company-ppa-dialog-iframe {
  background: #fff;
}

.companyrelationship-btn-div {
  position: relative;
  top: 36px;
  height: 85px;
  justify-content: flex-end;
}

#reqNewRelations .searchby-details-container {
  position: relative;
  top: 40px;
}

.hide-link-container a, .show-link-container a {
  float: right;
  color: #333;
  font-weight: 600;
  font-family: "HPE Graphik";
  font-size: 19px;
}

.hide-link-container a img, .show-link-container a img {
  margin: -2px 12px 0;
}

table.brt-info-table th {
  font-weight: 600;
  color: #67686E;
  width: 25%;
}

table.brt-info-table td {
  font-weight: 400;
  width: 25%;
}

table.brt-info-table td {
  font-size: 16px;
  color: #333333;
}

table.brt-info-table {
  color: #666666;
  line-height: 20px;
  width: 100%;
  font-family: "HPE Graphik";
  font-size: 14px;
  margin-bottom: 36px;
}

.new-company-radio-btn input[type=radio] {
  border-radius: 50%;
  cursor: pointer;
  display: inline-block;
  position: relative;
  -webkit-appearance: none;
  box-sizing: border-box;
  height: 24px;
  width: 24px;
  border: 1px solid #B1B9Be;
  outline: none !important;
}

.new-company-radio-btn input[type=radio]:checked {
  border: 6px solid var(--hpe-color-decorative-brand);
  background-color: #fff !important;
}

/*.new-company-radio-btn input[type="radio"]:after {
    border-radius: 25px;
    content: '';
    display: block;
    position: relative
}

.new-company-radio-btn input[type="radio"]:checked:after {
    background-color: var(--hpe-color-decorative-brand);
    box-sizing: border-box;
    height: 12px;
    width: 12px;
    margin: auto;
    margin-top: 5px
}*/
#requestRelationsTable {
  border-top: 2px solid #ddd;
  margin-bottom: 0;
}

.modal-content .party-brt-request-success {
  padding: 0;
}

.modal-content .party-brt-request-success > h2 {
  font-weight: 600;
  color: #292D3A;
  font-size: 24px;
}

.modal-content .party-brt-request-success p {
  padding: 24px 0 0;
  color: #67686E;
  font-size: 16px;
}

.party-brt-request-success {
  padding: 30px 0 0;
}

.party-brt-request-success p {
  padding: 30px 0;
}

.settings-relation-company-info {
  background: #f6f6f6;
  padding: 18px 24px;
}

.settings-relation-company-info .heading-4-strong-black {
  margin: 0 0 20px;
}

.show-link-container {
  padding: 10px;
}

p.no-data-pending-relation {
  background-color: #f6f6f6;
  min-height: 148px;
  padding: 75px 0;
  font-size: 18px;
  font-weight: 600;
  color: #666666;
}

.customDataTableContainer .dataTable#myPendingRequestTable tbody td a {
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.0392156863);
  min-width: 110px;
  text-align: center;
  color: #292D3A;
  border-radius: 28px;
  height: 24px;
  text-decoration: none;
  font-size: 12px;
  line-height: 16px;
  padding: 5px 12px;
}

#myPendingRequestTable span.toolTipIcon.toolTipBRTInfo {
  top: 50%;
}

.new-req-search-container .col-md-6 {
  padding: 0;
}

.new-req-search-container {
  margin-bottom: 50px;
}

.new-party-req-details .task-requestor-details .row {
  margin-bottom: 10px;
}

.settings-container .new-req-search-container .searchby-details-container .col-md-4 {
  padding-right: 10px;
}

.settings-container .new-req-search-container .searchby-details-container .form-group {
  margin-right: -2px !important;
}

.settings-container .new-req-search-container .searchby-details-container label {
  padding-left: 3px !important;
}

.task-request-details-header {
  font-weight: 600;
  margin-top: 30px;
  font-size: 18px;
}

#tool-access-modal .task-request-details .col-md-6 .row, #ppa-access-modal .task-request-details .col-md-6 .row {
  margin-bottom: 16px;
}

#tool-access-modal .task-request-details, #ppa-access-modal .task-request-details {
  margin-bottom: 24px;
}

#tool-access-modal .task-ppa-approval-msg {
  font-weight: 600;
  font-size: 18px;
}

#tool-access-modal .row .col-md-3 {
  padding-right: 0 !important;
}

.customDataTableContainer .dataTable#manageNewRequestTable thead th, .customDataTableContainer .dataTable#manageNewRequestTable tbody td,
.customDataTableContainer .dataTable#manageProcessedRequestTable thead th, .customDataTableContainer .dataTable#manageProcessedRequestTable tbody td {
  padding: 10px 11px 10px 10px;
}

div.grantedtoollist {
  font-size: 16px;
  max-height: 62px;
  overflow-y: auto;
}

#newPartRequestModal h4.new-party-tool-header {
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  color: #67686E;
}

table#taskNewPartyToolsTable {
  border: 1px solid #B1B9BE;
  border-radius: 12px;
  padding: 12px;
  margin: 20px 12px 0 0;
  width: auto !important;
}

#newPartRequestModal .modal-heading {
  margin-bottom: 0;
}

.prpModal#newPartRequestModal .modalFooter button {
  float: right;
  padding: 5px 18px;
  height: unset;
  font-size: 16px;
}

.prpModal#newPartRequestModal .modalFooter {
  border-top: 2px solid #ddd;
  padding: 24px 0;
  position: static;
  float: none;
}

#newPartRequestModal .task-requestor-details .user-img img {
  height: 48px;
  width: 48px;
}

#newPartRequestModal .task-requestor-details .user-img {
  padding: 10px 0;
}

#newPartRequestModal .task-requestor-details .col-md-11 {
  padding: 10px 0;
}

span#task-requestor-name {
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  color: #67686E;
}

span#task-requestor-email {
  font-size: 16px;
  font-weight: 400;
  color: #3E4550;
}

.task-requestor-details .col-md-11 .col-md-12 {
  margin-top: 5px;
}

.row.task-request-details-header {
  padding: 12px;
  border-bottom: 2px solid #ddd;
  border-left: 0;
  border-right: 0;
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  color: #292D3A;
  font-weight: 600;
}

.task-request-details .row .col-md-6 {
  margin-top: 12px;
}

.task-request-details .col-md-6 .col-md-12, .task-request-details .col-md-4 .col-md-12 {
  padding: 3px 0;
}

.task-request-details-label {
  font-size: 16px;
  font-weight: 600;
  color: #292D3A;
  line-height: 22px;
}

.task-request-details-info {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #67686E;
}

.grantedtoollist .col-md-6.granted-tool-name {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  background-repeat: no-repeat !important;
  background-size: 24px;
  background-position: 4px top;
  background-image: url(../images/icons/status_good.png) !important;
  padding-left: 40px !important;
  margin-bottom: 12px;
  word-break: break-word;
}

.tools-granted-msg-body p {
  font-size: 24px;
  font-weight: 300;
  padding: 10px 0;
}

.tools-granted-msg-body h2 {
  font-size: 48px;
  font-weight: 300;
}

.tools-granted-msg-body {
  padding: 20px 0;
  border-bottom: 2px solid #ddd;
}

button.tools-granted-close {
  float: right !important;
}

.task-new-party-tools-granted.modal-dialog .modal-body {
  padding: 0 55px;
}

table#taskNewPartyToolsTable .fw-600 {
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
}

table#activeContractCountryTable .contract-country-child-row, table#inactiveContractCountryTable .contract-country-child-row {
  background-color: #f6f6f6 !important;
}

table#activeContractCountryTable .contract-country-child-row td, table#inactiveContractCountryTable .contract-country-child-row td {
  padding: 10px 10px;
}

span.expand-country-contract-arrow {
  padding: 0 5px;
  display: block;
}

/*.contractInnerTableContainer {
    padding: 0 10px;
}*/
div#contractInnerInactiveTable_wrapper, div#contractInnerActiveTable_wrapper {
  padding-bottom: 5px;
}

table#inactiveContractCountryTable, table#activeContractCountryTable {
  border-top: 2px solid #ddd;
  margin-top: 40px;
}

#addAccountModal h4.add-account-desc {
  margin-bottom: 36px;
}

#addAccountModal .add-account-label label {
  font-size: 16px;
  font-family: "HPE Graphik";
  font-weight: 400;
  color: #67686E;
}

#addAccountModal .add-account-input input {
  border-radius: 8px;
  border: none;
  box-shadow: none;
  font-size: 16px;
  color: #292D3A;
}

#addAccountModal .add-account-input .input-text-wrapper {
  border-radius: 12px;
  border: 1px solid #b1b9be;
  margin-bottom: 0;
}

.row.add-account-row {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

#addAccountModal .add-account-user-details .row {
  margin-bottom: 20px;
}

.col-md-2.user-profile-change-btn-holder {
  padding-left: 0;
}

#addAccountModal .modalFooter {
  border-top: 1px solid #c9c9ca;
  padding: 24px 0;
  position: static;
  float: none;
  border: 0 !important;
}

#addAccountModal .modalFooter button {
  float: right;
}

#addAccountModal .add-account-input .input-text-wrapper.field-error {
  border: 1px solid #ca2b4e;
}

#addAccountModal .add-account-input .input-text-wrapper.field-error input {
  background-color: #FFECEC !important;
}

.secondaryButton.disabled, .secondaryButton.disabled:hover {
  box-shadow: none;
}

.opr-iframe-warningModal .btn-toolbar .btn.error-alert-btn, .settings-warningModal .btn-toolbar .btn.error-alert-btn {
  float: right !important;
}

.opr-iframe-warningModal h2.errorAlertheader, .settings-warningModal h2.errorAlertheader {
  font-weight: 600;
  color: #292D3A;
  font-size: 24px;
  line-height: 32px;
  font-family: HPE Graphik;
}

#addAccountModal .input-field-error, #addAccountModal .add-account-error-desc {
  color: #ca2b4e;
}

.errorAlertNote {
  background: #FFE75E;
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  font-family: "HPE Graphik";
  position: absolute;
  left: 0;
  bottom: 40px;
  width: 100%;
  padding: 10px;
}

.settings-warningModal.modal-dialog .modal-footer button.primaryButton {
  color: #fff;
  margin: 0 !important;
}

.personal-details-required-field-note {
  padding-bottom: 20px;
}

.personal-details-required-field-note {
  font-size: 16px;
  font-weight: 400;
  font-family: "HPE Graphik";
  line-height: 20px;
  padding: 5px 0 15px;
}

/* Edit user > Personal details note - reuses the `comm-warning` banner. */
.edit-user-info-note.comm-warning {
  font-family: "HPE Graphik";
  margin-bottom: 16px;
}

.edit-user-info-note.comm-warning p {
  margin-bottom: 0;
  color: #3E4550;
}

#manageUserList_active .editUserLink {
  cursor: pointer;
}

#customUserToolTable_length {
  float: right;
}

#customUserToolTable_length label {
  font-weight: 300;
  color: #333;
  font-family: HPE Graphik;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 20px;
  margin: 0;
}

#customUserToolTable_length label select {
  border: 2px solid #ddd;
  padding: 0 30px 0 10px;
  color: #333;
  font-family: HPE Graphik;
  font-size: 16px;
  font-weight: 600;
  background-image: url(../images/icons/Up.svg);
  background-position: center right 10px;
  background-repeat: no-repeat;
  background-size: 14px;
  width: 64px;
  height: 40px;
}

.tools-country-child-containner, .tools-brt-child-containner {
  display: none;
}

.tools-country-child-containner.show, .tools-brt-child-containner.show {
  display: block;
}

div#manage-users-userToolsDiv .dataTables_length {
  /*display: none;*/
}

.tools-settingv2 .dataTables_filter {
  display: none;
}

#manage-users-userToolsDiv table thead {
  display: table-header-group;
}

.tool-userrights, .tool-userrights.single-userright.selectedTool {
  display: none;
}

.tool-userrights.selectedTool {
  display: block;
}

.tools-settingv2 #manage-users-userToolsDiv .tool-userrights .prpRadioGroup .prpRadioButton {
  left: 0;
}

.customDataTableContainer .dataTable tbody td.tool-access-checkbox-td {
  vertical-align: top;
  padding-top: 18px;
  width: 10% !important;
}

.expand-brt-tools-arrow, .expand-country-tools-arrow {
  padding: 10px;
}

table.userRightsTable {
  width: 100%;
}

table.userRightsTable tr {
  border-bottom: 2px solid #ddd;
}

td.vertical-top.pd-top-15px {
  width: 5%;
}

table#manageUserToolsBrtTable tr {
  border-bottom: 2px solid #ddd;
}

table#manageUserToolsCountryTable tr.expanded {
  background-color: transparent !important;
}

table#manageUserToolsBrtTable tr.expanded {
  background-color: #fff !important;
}

table#manageUserToolsCountryTable tr.expanded span.country-name {
  padding: 16px;
  display: inline-block;
}

table#manageUserToolsBrtTable {
  background-color: #fff;
}

/* Divider removed - Edit user > Tool access only. */
div#manage-users-userToolsDiv {
  border-top: none;
}

.span.brt-name {
  padding: 10px 16px;
  display: inline-block;
}

h4.tool-confirmation-desc {
  font-family: HPE Graphik;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0px;
  color: #67686E;
}

div#toolSaveConfirmationModal .prpModal {
  max-width: 950px;
  top: 5% !important;
  max-height: 90vh;
}

.tool-confirmation-details-container {
  background-color: #F6F6F6;
  padding: 5px;
}

table#toolSaveConfirmationTable tr {
  border-top: 2px solid #ccc;
  border-bottom: 2px solid #ccc;
}

.tool-confirmation-table-container {
  background-color: #F6F6F6;
  padding: 8px;
  max-height: 200px;
  overflow-y: auto;
}

table#toolSaveConfirmationTable thead th {
  font-weight: 600 !important;
  font-size: 16px;
  line-height: 20px;
}

table#toolSaveConfirmationTable tr td, table#toolSaveConfirmationTable tr th {
  padding: 12px;
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0em;
  text-align: left;
  vertical-align: top;
}

table#toolSaveConfirmationTable tr td .confirm-tool-country {
  font-weight: 600;
}

table#toolSaveConfirmationTable tr td .confirm-tool-name {
  margin-bottom: 5px;
}

/* PRPDXP-8119 - Starts here */
@media (max-height: 420px) {
  div#toolSaveConfirmationModal .prpModal .modal-body {
    max-height: 20vh !important;
  }
}
@media (min-height: 440px) and (max-height: 620px) {
  div#toolSaveConfirmationModal .prpModal .modal-body {
    max-height: 35vh !important;
  }
}
div#toolSaveConfirmationModal .prpModal .modal-body {
  max-height: 45vh;
  margin-bottom: 0px;
}

div#toolSaveConfirmationModal .prpModal .modal-heading h3 {
  margin: 0 0 24px;
}

div#toolSaveConfirmationModal .prpModal .modalFooter {
  float: right;
  border-top: 0;
}

.manage-user-relations-container #myCurrentRelationsCountryTable tbody tr.expanded,
.manage-user-relations-container #myCurrentRelationsCountryTable tbody tr.country-child-row,
.manage-user-relations-container #myCurrentRelationsCountryTable .current-relations-country-child {
  background-color: #fff !important;
}

.manage-user-relations-container table.partyDetailsTable {
  border-bottom: 0 !important;
  /*border-spacing: 20px 2px;*/
}

.manage-user-relations-container .partyDetailsTable tbody tr td.party-details-info {
  /*border-bottom: 2px solid #ddd !important;
  padding: 0 18px 2px 10px !important;*/
  min-height: 80px;
}

.manage-user-relations-container table.partyDetailsTable .row.party-details-container div > div {
  padding: 0;
}

.manage-user-relations-container .primary-relation-container img {
  padding: 0 20px 0 0px;
}

.manage-user-relations-container .primary-relation-container {
  margin-top: 10px;
  margin-bottom: 10px;
  position: relative;
}

.manage-user-relations-container table.partyDetailsTable .row.party-details-container div > div {
  padding: 0;
}

.manage-user-relations-container .partyDetailsTable tbody tr td.party-details-info .party-details-container {
  /*min-height: 80px;*/
}

.manage-user-relations-container table.partyDetailsTable thead {
  display: none;
}

.manage-user-tools-container, .manage-user-relations-container {
  background-color: #fff;
}

.opt-personal.manage-user-personal-details,
.manage-user-notification-preferences-wrapper,
.manage-user-relations-container {
  margin-left: 0;
  padding-left: 0;
}

.opt-personal.manage-user-personal-details > .row,
.manage-user-notification-preferences-row,
.row.communicationContainer.manage-user-notification-preferences {
  margin-left: 0;
  margin-right: 0;
}

.opt-personal.manage-user-personal-details > .row > .settings-container,
.opt-personal.manage-user-personal-details .settings-container > .maindiv,
.opt-personal.manage-user-personal-details .personal-field,
.opt-personal.manage-user-personal-details .personal-field > .settings-container,
.manage-user-notification-preferences-wrapper,
.row.communicationContainer.manage-user-notification-preferences > .col-md-12,
.row.communicationContainer.manage-user-notification-preferences .notification-input-main-container,
.row.communicationContainer.manage-user-notification-preferences .portal-notifications-desc,
.row.communicationContainer.manage-user-notification-preferences .promotional,
.row.communicationContainer.manage-user-notification-preferences .promotional-communications-container,
.row.communicationContainer.manage-user-notification-preferences .promotional-communications-inner-container {
  padding-left: 0 !important;
}

.manage-user-relations-container,
.manage-user-relations-container > .row.innerContainer.customDataTableContainer.tools-settingv2,
.manage-user-relations-container #manage-user-userCountryDiv,
.manage-user-relations-container #myCurrentRelationsCountryTable_wrapper {
  margin-left: 0;
  padding-left: 0;
}

.manage-user-relations-container > .row.innerContainer.customDataTableContainer.tools-settingv2 {
  margin-right: 0;
}

.manage-user-relations-container #myCurrentRelationsCountryTable {
  margin-left: 0 !important;
}

.manage-user-relations-container #myCurrentRelationsCountryTable > tbody > tr > td.p-2 {
  padding-left: 0 !important;
}

.manage-user-relations-container #myCurrentRelationsCountryTable > thead > tr > th:first-child,
.manage-user-relations-container #myCurrentRelationsCountryTable > tbody > tr > td:first-child {
  padding-left: 0 !important;
}

.manage-user-relations-container #myCurrentRelationsCountryTable .myCurrentRelations-country-parent,
.manage-user-relations-container #myCurrentRelationsCountryTable .current-relations-country-child {
  padding-left: 0;
}

.manage-user-relations-container #myCurrentRelationsCountryTable span.expand-country-current-relations-arrow {
  padding-left: 0;
}

.manage-user-relations-container #myCurrentRelationsCountryTable .row.brt-details-container,
.manage-user-relations-container #myCurrentRelationsCountryTable .row.innerContainer.customDataTableContainer {
  margin-left: 0;
  margin-right: 0;
}

.manage-user-relations-container #myCurrentRelationsCountryTable .row.brt-details-container > .col-md-12,
.manage-user-relations-container #myCurrentRelationsCountryTable .row.brt-details-container > .col-sm-12,
.manage-user-relations-container #myCurrentRelationsCountryTable .partyDetailsTable > tbody > tr > td.party-details-info {
  padding-left: 0;
}

.manage-user-tools-container .opt-srch {
  padding: 0 0 24px 0;
}

.manage-user-tools-container .opt-srch .opt-search-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 0;
}

.manage-user-tools-container #manageUserToolsCountryTable > tbody > tr > td.p-2 {
  padding-left: 0 !important;
}

.manage-user-tools-container #manage-user-userBrtDiv,
.manage-user-tools-container #manageUserToolsBrtTable > tbody > tr > td,
.manage-user-tools-container table[id^=manageUserToolsTable] thead th:first-child,
.manage-user-tools-container table[id^=manageUserToolsTable] tbody td:first-child {
  padding-left: 0;
}

.manage-user-tools-container #manageUserToolsCountryTable > tbody > tr > td.p-2 {
  padding-top: 0 !important;
}

.manage-user-tools-container #manageUserToolsBrtTable > tbody > tr > td {
  padding-top: 0;
}

.manage-user-tools-container #manage-users-userToolsDiv {
  border-top: 0;
}

.manage-user-tools-container .opt-srch .opt-search-container label {
  font-size: 12px;
  font-weight: 600;
  color: #292D3A;
  margin-bottom: 0;
  white-space: nowrap;
}

.manage-user-relations-container .brt-data-info {
  padding: 0 6px;
}

.customDataTableContainer table#manageUserToolsCountryTable.dataTable thead th, .customDataTableContainer table#manageUserToolsCountryTable.dataTable tbody td {
  font-weight: 400 !important;
}

.manage-user-tools-container .opt-srch .tool-search-icon {
  position: absolute;
  top: 26px !important;
  right: 15px;
  cursor: pointer;
}

.manage-user-relations-container .brt-details-container .customDataTableContainer {
  padding: 32px;
  border-radius: 12px;
  background-color: #f7f7f7;
  margin-bottom: 16px;
}

.manage-user-relations-container table.partyDetailsTable tr:first-child td .row.party-details-container {
  padding-top: 0;
}

.manage-user-relations-container table.partyDetailsTable tr:last-child td .row.party-details-container {
  /* border-bottom: 0;
   padding-bottom: 0;*/
}

.tools-settingv2 > .col-md-12, .tools-settingv2 > .col-sm-12 {
  padding-left: 0 !important;
}

div#manage-user-userBrtDiv {
  padding: 0 10px;
  background-color: #fff;
}

table#manageUserToolsCountryTable #manage-user-userBrtDiv {
  padding: 12px;
  border: solid 1px #d4d8db;
  border-radius: 12px;
}

table#manageUserToolsCountryTable #manage-user-userBrtDiv span.brt-name {
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  color: #292d3a;
  white-space: nowrap;
}

.expand-brt-tools-arrow, .expand-country-tools-arrow {
  min-height: 42px;
  display: inline-block;
  position: relative;
  height: 42px;
  padding: 12px !important;
}

table#manageUserToolsCountryTable tr.expanded span.country-name {
  padding: 16px 16px 16px 0;
}

table#manageUserToolsCountryTable #manage-user-userBrtDiv tr.expanded .tools-brt-child-containner.show {
  margin-top: 12px;
}

.manage-user-tools-container #manageUserToolsBrtTable > tbody > tr > td,
.manage-user-tools-container #manageUserToolsBrtTable > tbody > tr {
  border: 0 !important;
}

.errorAlertNote div {
  display: inline-block;
  vertical-align: middle;
}

.errorAlertNote .note-img {
  width: 7%;
}

.errorAlertNote .note-msg {
  width: 93%;
}

.disable-deactivate-link.global-link-deactivate {
  cursor: not-allowed;
  opacity: 0.5;
}

div#manage-user-NoDataFoundDiv {
  font-family: "HPE Graphik";
  text-align: center;
  font-weight: 400;
  background-color: #F6F6F6;
  padding: 18px;
}

.col-sm-12.manage-user-NoDataFound-container {
  padding-left: 0 !important;
}

.support-user-main-container {
  background-color: #ffffff;
  padding: 32px;
}

span.user-name-initials-text {
  color: #fff;
  font-family: "HPE Graphik";
  font-size: 44px;
  font-weight: 400;
  line-height: 56px;
  text-align: center;
}

.user-name-initials {
  background-color: #0D5265;
  height: 96px;
  width: 96px;
  border-radius: 50%;
  display: flex;
  align-content: center;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.support-user-info-text {
  font-family: HPE Graphik;
  font-size: 36px;
  font-weight: 300;
  line-height: 42px;
  text-align: left;
  margin-bottom: 48px;
}

#support-user-name {
  font-family: HPE Graphik;
  font-size: 36px;
  font-weight: 600;
  line-height: 42px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

span.support-user-all-details {
  font-family: HPE Graphik;
  font-size: 19px;
  font-weight: 600;
  line-height: 24px;
  text-align: left;
  margin-left: 14px;
}

.support-user-info {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.support-user-details {
  width: 70%;
  padding: 25px 0;
}

.support-user-preferences {
  width: 22%;
  background-color: #F6F6F6;
  padding: 25px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 8px;
}

.support-user-details-container > .col-md-12, .support-user-preferences > .col-md-12 {
  padding-left: 0 !important;
}

span#support-user-preferences-text {
  font-family: HPE Graphik;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  text-align: left;
}

span.support-user-label {
  font-family: HPE Graphik;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  text-align: left;
  color: #666666;
}

span.support-user-data {
  font-family: HPE Graphik;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  text-align: left;
  color: #333333;
}

.support-user-tab-container {
  padding-top: 30px;
}

table#partnerUserTable thead th, table#customerUserTable thead th {
  border-bottom: 0 !important;
  /*text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;*/
}

#partnerUserTable tfoot th, #customerUserTable tfoot th {
  border-top: 0;
  border-bottom: 2px solid #d7d7d7 !important;
  padding-top: 0;
}

.customDataTableContainer .dataTable tfoot th {
  color: #333;
  font-family: HPE Graphik;
  font-size: 16px !important;
  font-weight: 300 !important;
  letter-spacing: 0;
  line-height: 24px;
  height: 24px;
  padding: 10px 18px 10px 10px;
  vertical-align: middle;
  text-align: left !important;
}

table#partnerUserTable thead th, table#partnerUserTable tbody td, table#customerUserTable thead th, table#customerUserTable tbody td {
  border-bottom: 0 !important;
  /*text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;*/
  max-width: 74px;
  padding: 10px 10px 0px 10px;
}

table#customerUserTable thead th, table#customerUserTable tbody td {
  max-width: 105px;
}

table#partnerUserTable tbody td, table#customerUserTable tbody td {
  padding-bottom: 10px;
}

#partnerUserTable tfoot th input, #customerUserTable tfoot th input {
  border: none;
  min-width: 20px;
  width: 64px;
  padding: 0;
  background-image: url(../images/icons/formSearch.png);
  background-repeat: no-repeat;
  text-indent: 20px;
  background-position: 0px 6px;
}

#partnerUserTable tfoot, #customerUserTable tfoot {
  display: table-header-group;
}

#customerUserTable tfoot th input {
  width: 105px;
}

#partnerUserTable tfoot th input:active, #partnerUserTable tfoot th input:focus, #customerUserTable tfoot th input:active, #customerUserTable tfoot th input:focus {
  background-image: none;
  text-indent: 0px;
}

#partnerUserTable tfoot th input.active-search, #customerUserTable tfoot th input.active-search {
  background-image: none;
  text-indent: 0px;
}

.support-user-column-search span.clearable-input img {
  height: 12px;
  width: 12px;
}

.support-user-column-search {
  display: flex;
}

#support-user-status {
  background-color: #17EBA0;
  border-radius: 6px;
  padding: 1px 5px;
  font-weight: 600;
  margin: 10px 5px;
  position: absolute;
  bottom: 20px;
  font-size: 14px;
  display: inline-block;
}

table#partnerUserTable thead th.support-partyid, table#partnerUserTable tbody td.support-partyid {
  min-width: 85px;
}

table#partnerUserTable thead th.support-small, table#partnerUserTable tbody td.support-small {
  min-width: 52px !important;
  max-width: 52px !important;
}

table#partnerUserTable thead th.support-id, table#partnerUserTable tbody td.support-id {
  min-width: 75px !important;
}

.clear-partner-table, .clear-customer-table {
  float: right;
  margin: 8px 20px !important;
  font-family: HPE Graphik;
  font-size: 19px;
  font-weight: 600;
  line-height: 24px;
  cursor: pointer;
}

.clear-partner-table img, .clear-customer-table img {
  height: 24px;
  width: 24px;
  margin-right: 10px;
}

.clear-partner-table span, .clear-customer-table span {
  vertical-align: middle;
}

.support-view-all {
  display: inline-block;
  cursor: pointer;
}

table#partnerUserTable, table#customerUserTable {
  border-bottom: 2px solid #ddd !important;
  border-top: 2px solid #ddd;
}

.communicationContainer {
  margin-top: 5px !important;
}

.contract-container, .communicationContainer, .manage-campgn-assgnmnt-container {
  margin-top: 24px;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .manage-user-container .row [class*=col-]:last-child, .manage-user-address-container .row [class*=col-]:last-child, .opt-personal .row [class*=col-]:last-child {
    padding-left: 0px;
  }
}
div#editUserDialog .yui3-resize-handles-wrapper, .opr-campgn .yui3-resize-handles-wrapper {
  display: none;
}

/* MHMG R2 US 5958 css starts */
.customDataTableContainer #manage-user-userCountryDiv .customDataTableContainer .dataTable tbody tr:hover td,
.customDataTableContainer #myCurrentRelationsTable .customDataTableContainer .dataTable tbody tr:hover td {
  background-color: #fff !important;
}

.customDataTableContainer #manage-user-userCountryDiv #myCurrentRelationsCountryTable .customDataTableContainer table.dataTable,
.customDataTableContainer #myCurrentRelationsTable .customDataTableContainer table.dataTable {
  margin-bottom: 0;
}

#manage-user-userCountryDiv .party-details-info {
  padding: 0 !important;
  border-bottom: 0 !important;
}

.modal-backdrop.in {
  opacity: 0.4;
  filter: alpha(opacity=40);
}

.yui3-skin-sam .yui3-widget-mask {
  -ms-filter: "alpha(opacity=40)";
  filter: alpha(opacity=40);
  opacity: 0.4;
}

label#oprContractSearchBy, #Selectondiv .selectoneDD.contractSelectoneDD, #Selectondiv .contractDivMenuDD .language-entry-long-text, input#opr-contract-search {
  font-size: 16px !important;
}

.tooltip-inner {
  border: 1px solid #ddd !important;
  box-shadow: 0px 0px 6px 0px rgba(153, 153, 153, 0.6117647059) !important;
  max-width: 200px;
  padding: 3px 8px;
  color: #000 !important;
  text-align: center !important;
  background-color: #fff !important;
  border-radius: 4px !important;
}

.customDataTableContainer .dataTable tbody tr.current-relations-country-child td {
  padding: 12px;
}

/* MHMG R2 US 5958 css ends */
/*#ppaListModal {
    height: 100vh;
    padding: 24px !important;
}
#ppaListModal .modal-dialog {
    height: 100%;
}
#ppaListModal .modalFooter {
    border-top: 2px solid #DDD;
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #fff;
    padding-bottom: 0;
}
#ppaListModal button.close{
	z-index: 9;
}*/
/* US 5434 CSS OPS UI Surrort page*/
.opr-support-container {
  font-family: "HPE Graphik";
}

.user-info-container {
  border: 2px solid #ddd;
  min-height: 45px;
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 10px;
  margin-top: 10px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}

.row.user-main-info.user-info {
  padding-top: 12px;
  display: flex;
}

.row.user-info {
  padding-bottom: 24px;
  display: block;
}

.Synchronizebdcp-button {
  display: flex;
  justify-content: flex-end;
}

.Synchronizebdcp-button #synchronizebtn {
  background-image: url(../images/icons/Loop_white.png) !important;
  background-repeat: no-repeat !important;
  background-position: left 6px top 7px !important;
  min-width: 150px;
  padding-left: 42px !important;
  margin-right: 10px !important;
}

.Synchronizebdcp-button input {
  min-width: 150px !important;
}

.row.user-info .heading-3 {
  margin-bottom: 18px;
}

span#support-new-info {
  background-color: #CA2B4E;
  border-radius: 6px;
  padding: 1px 5px;
  font-weight: 600;
  margin: 10px;
  font-size: 14px;
  color: #fff;
}

.user-info-container:hover {
  -webkit-box-shadow: 0 0 12px 0 #ccc;
  -moz-box-shadow: 0 0 12px 0 #ccc;
  box-shadow: 0 0 12px 0 #ccc;
}

.user-info-container.expanded {
  -webkit-box-shadow: 0 0 12px 0 #ccc;
  -moz-box-shadow: 0 0 12px 0 #ccc;
  box-shadow: 0 0 12px 0 #ccc;
}

.section-header.heading-4-strong {
  display: inline-block;
}

.row.user-info-header {
  border-bottom: 2px solid #ddd;
  font-family: "HPE Graphik";
  font-size: 14px;
  color: #666;
  line-height: 18px;
  padding: 20px 0 10px 10px;
}

.row.user-contact-info-header .col-md-2 {
  font-weight: 600;
}

.row.user-contact-info-header .col-md-5 {
  color: #666666;
}

.row.user-info-header .col-md-2 {
  font-size: 16px;
  font-weight: 600;
}

.row.user-contact-info-details .col-md-2 {
  color: #666666;
  font-size: 14px;
}

.row.user-contact-info-details {
  font-size: 16px;
  padding-left: 10px;
}

.row.user-contact-info-details div {
  line-height: 28px;
  margin-bottom: 10px;
}

.user-info-container.expanded .section-info {
  display: block;
}

.user-info-container .section-info {
  display: none;
}

.row.user-contact-info-details .error {
  border: 2px solid #CA2B4E;
  min-height: 32px;
  background-color: rgba(202, 43, 78, 0.2392156863);
}

.user-business-info-container .brt-details {
  display: inline-block;
  font-size: 16px;
  padding: 0 25px 0 0;
}

.user-business-info-container .brt-details span {
  padding: 0 5px;
}

.user-business-info-container span.brt-details-label {
  color: #666666;
  font-size: 14px;
}

.user-business-info-container span.brt-details-info {
  font-weight: 600;
  font-size: 16px;
}

.row.user-business-info-nav {
  margin-bottom: 16px;
}

.primary-brt {
  font-size: 16px;
  font-weight: 600;
  color: var(--hpe-color-decorative-brand);
}

.user-business-info-container.expanded .section-header {
  margin-bottom: 20px;
}

.label.support-label {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

select#country {
  border: 2px solid #ddd;
  width: 74%;
  height: 36px;
  padding: 0 5px;
  border-radius: 5px;
  line-height: 24px;
  font-weight: 600;
}

table#supportBRTable thead {
  display: none;
}

table#supportBRTable td {
  padding: 0;
  border: none;
}

span.multi-select-box {
  display: inline-block;
  border: 2px solid #ddd;
  height: 24px;
  width: 24px;
  margin: 2px;
}

span.multi-select-text {
  display: inline-block;
  margin-bottom: 2px;
  height: 24px;
  position: relative;
  bottom: 7px;
  padding-left: 2px;
}

.settings-container .opr-form-field-custom-select #supportBrtCountrySelect .custom-option-multi {
  padding: 0px 6px;
  height: 30px;
  color: #555555;
  font-weight: 600;
  font-size: 19px;
  margin: 8px 0;
}

input#supportBrtCountry {
  color: #444444 !important;
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
}

#supportBrtCountrySelect .custom-option-multi.multi-selected {
  background-position: left 13px top 9px !important;
}

.settings-container .opr-form-field-custom-select #supportBrtCountrySelect .options {
  background-color: #ffffff;
}

.settings-container.countryFilter {
  width: 74%;
  display: inline-block;
}

table#supportBRTable {
  border-bottom: none !important;
}

#supportBRTable td.dataTables_empty {
  font-size: 20px !important;
  background-color: #ddd;
  padding: 20px;
}

.row.user-business-info.user-info {
  padding-bottom: 10px;
}

table#supportBRTable tbody td {
  font-weight: 400 !important;
}

#supportBRTable .user-info-container span.expand-arrow {
  font-size: 18px;
}

.row.user-contact-info-details.no-userRights {
  padding: 24px;
  text-align: center;
  color: #666666;
}

.user-main-info .col-md-7 {
  display: flex;
  padding-right: 45px;
}

.link-account-btn-container button {
  margin-right: 20px;
}

div#linkedAccountsListTable_length {
  margin-left: 0;
}

.linked-account-list-container.opt-main-container {
  padding: 0;
}

.customDataTableContainer table#linkedAccountsListTable.dataTable tbody td, .customDataTableContainer #linkedAccountsListTable_length label {
  font-weight: 400 !important;
}

.opt-main-container #linkedAccountsListTable_wrapper .dataTableFooter.dataTableCustomFooter.optCustomFooter {
  width: 100%;
  justify-content: space-between;
}

#linkedAccountsListModal .linked-account-list-container.opt-main-container {
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  padding-top: 2px;
}

#linkedAccountsListModal .customDataTableContainer #linkedAccountsListTable.dataTable thead tr th {
  border-top: 2px solid #ddd;
}

#linkedAccountsListModal .modal-heading {
  margin-bottom: 24px;
}

#linkedAccountsListModal button#closeLinkedAccountListModal {
  margin-right: 0 !important;
}

.settings-relation-company-info .row.legend-container {
  margin-bottom: 12px;
}

.settings-relation-company-info .row.legend-container div img {
  padding-right: 12px !important;
}

#searchRelation {
  height: 36px;
  padding: 5px 18px !important;
  font-size: 16px;
}

#brtListTable span.toolTipIcon.toolTipBRTInfoNewRequest {
  position: relative;
  right: 0;
  left: 5%;
  top: 0;
}

table#brtListTable {
  border-top: 2px solid #ddd;
}

table#brtListTable.no-footer {
  border-top: 0;
}

#brtListModal .modalFooter {
  padding: 12px 0;
}

#brtListModal .modal-heading {
  margin-bottom: 24px;
}

#brtListModal #brtListTable td.brt, #brtListModal #brtListTable td.markets {
  position: relative;
}

.brtMarketsExpandIconContainer, .contractMarketsExpandIconContainer, .simExpandIconContainer {
  position: absolute;
  right: 0;
  top: 0;
  padding: 5px 0;
}

.brtList-Markets-expand, .company-Markets-expand, .MHMG-Markets-expand, .br-Markets-expand, .ppa-Markets-expand {
  max-height: 200px;
  overflow: auto;
  margin-right: 2px;
}

#myPendingRequestTable .brtMarketsExpandIconContainer {
  top: 32%;
}

#myPendingRequestTable .brtMarketsExpandIconContainer.expanded {
  top: 0;
}

.contractMarketsExpandIconContainer {
  top: 0;
}

table#brtListTable p.no-data-cmpgn.no-brt-available-brtList, .no-data-table {
  padding: 48px 120px;
  font-family: HPE Graphik;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  text-align: center;
  color: #666666;
}

#brtListModal #brtListTable td.markets .brtList-Markets-collapse, #manageContractAccessTable .markets-details .company-Markets-collapse {
  /*-webkit-line-clamp: 1;
  width: 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;*/
}

.settings-company-relation-container .prpModal .modalFooter button:last-child {
  margin-right: 0 !important;
}

.brt-list-container div#requestAccessErrorDiv {
  background: #ca2b4e;
  font-family: HPE Graphik;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 20px;
  padding: 20px;
  color: #fff;
}

#contractAccessRequestModal.prpModal .modal-heading p {
  font-size: 16px;
  font-weight: 400;
  color: #67686E;
}

#contractAccessRequestModal.prpModal .modal-heading {
  margin-bottom: 0;
}

#contractAccessRequestModal.prpModal .modal-heading h3 {
  margin-bottom: 24px;
}

#contractAccessRequestModal .task-request-details.col-md-12 {
  padding: 10px 5px 0;
  border-top: 2px solid #ccc;
}

.prpModal#contractAccessRequestModal .modalFooter button:last-child {
  margin-right: 2px !important;
}

#manageContractAccessTable .company-details-label {
  margin-right: 12px;
}

#manageContractAccessTable .col-md-12.company-details-container,
#myCurrentRelationsTable .company-details-container,
#myCurrentRelationsCountryTable .company-details-container {
  display: flex;
  font-family: HPE Graphik;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  align-items: center;
  justify-content: flex-start;
}

#manageContractAccessTable .company-details-data {
  font-size: 16px;
  font-weight: 600;
}

#manageContractAccessTable button#contractAccessbtn {
  float: right;
  padding: 5px 18px !important;
  height: auto;
  font-size: 16px;
}

#manageContractAccessTable .row.company-details-container {
  background-color: #fff;
  padding: 32px;
  border-radius: 12px;
  margin-bottom: 16px;
}

.company-details-container .primary-relation-container img {
  padding: 0;
}

.company-details-container .primary-relation-container {
  padding-left: 0;
  margin-left: 24px;
  position: relative;
}

.company-details-container .primary-relation-container .primary-relation-btn {
  background-color: color-mix(in srgb, var(--hpe-color-decorative-brand) 10%, transparent);
  padding: 4px 12px !important;
  display: inline-block;
  border-radius: 28px;
}

#manageContractAccessTable .row.company-details-container > .col-md-12 {
  padding-left: 0;
}

#manageContractAccessTable button.brt-data {
  padding: 15px 0 15px 10px;
}

#manageContractAccessTable .expanded .contract-country-parent, #myCurrentRelationsCountryTable .expanded .myCurrentRelations-country-parent {
  padding-bottom: 16px;
  padding-top: 16px;
}

#manageContractAccessTable .contract-country-parent, #myCurrentRelationsCountryTable .myCurrentRelations-country-parent {
  padding-bottom: 16px;
  padding-top: 16px;
}

#manageContractAccessTable span.expand-country-current-relations-arrow, #myCurrentRelationsCountryTable span.expand-country-current-relations-arrow {
  padding: 0 15px 0 5px;
}

#manageContractAccessTable .col-md-12.task-request-details {
  padding-top: 10px;
}

#manageContractAccessTable .task-request-details-info, .partyDetailsTable .task-request-details-info {
  font-weight: 400;
  line-height: 24px;
  color: #67686E;
}

#partyDetailsTable .task-request-details-label {
  color: #67686E;
}

table#manageContractAccessTable tbody td {
  padding: 10px;
}

#manageContractAccessTable .task-request-details .markets-details {
  padding-right: 20px;
}

/*.customDataTableContainer .dataTable#manageContractAccessTable thead .sorting_desc, .customDataTableContainer .dataTable#myCurrentRelationsTable thead .sorting_desc,
.customDataTableContainer .dataTable#myCurrentRelationsCountryTable thead .sorting_desc, .customDataTableContainer .dataTable#activeContractCountryTable thead .sorting_desc,
.customDataTableContainer .dataTable#inactiveContractCountryTable thead .sorting_desc, .customDataTableContainer .dataTable#manageUserToolsCountryTable > thead .sorting_desc {
    background: url(../images/sort_des.png) no-repeat left center;
    padding-left: 54px;
    background-position: 15px;
}

.customDataTableContainer .dataTable#manageContractAccessTable thead .sorting_asc, .customDataTableContainer .dataTable#myCurrentRelationsTable thead .sorting_asc,
.customDataTableContainer .dataTable#myCurrentRelationsCountryTable thead .sorting_asc, .customDataTableContainer .dataTable#activeContractCountryTable thead .sorting_asc,
.customDataTableContainer .dataTable#inactiveContractCountryTable thead .sorting_asc, .customDataTableContainer .dataTable#manageUserToolsCountryTable > thead .sorting_asc {
    background: url(../images/sort_asc.png) no-repeat left center;
    padding-left: 54px;
    background-position: 15px;
}*/
.customDataTableContainer .dataTable#manageContractAccessTable thead th, .customDataTableContainer .dataTable#manageContractAccessTable tbody td,
.customDataTableContainer .dataTable#myCurrentRelationsTable thead th, .customDataTableContainer .dataTable#myCurrentRelationsTable tbody td,
.customDataTableContainer .dataTable#myCurrentRelationsCountryTable thead th, .customDataTableContainer .dataTable#myCurrentRelationsCountryTable tbody td,
.customDataTableContainer .dataTable#activeContractCountryTable thead th, .customDataTableContainer .dataTable#activeContractCountryTable tbody td,
.customDataTableContainer .dataTable#inactiveContractCountryTable thead th, .customDataTableContainer .dataTable#inactiveContractCountryTable tbody td,
.customDataTableContainer .dataTable#manageUserToolsCountryTable > thead th {
  padding: 15px 10px 15px 18px;
}

.customDataTableContainer .dataTable#manageContractAccessTable thead th, .customDataTableContainer .dataTable#myCurrentRelationsTable thead th,
.customDataTableContainer .dataTable#myCurrentRelationsCountryTable thead th, .customDataTableContainer .dataTable#activeContractCountryTable thead th,
.customDataTableContainer .dataTable#inactiveContractCountryTable thead th, .customDataTableContainer .dataTable#manageUserToolsCountryTable > thead th {
  padding-right: 54px;
}

#activeContractCountryTable thead th.country-header,
#inactiveContractCountryTable thead th.country-header {
  text-align: left !important;
  text-indent: -5.263%;
  padding: 0px !important;
}

#activeContractCountryTable tbody tr.expanded > td,
#inactiveContractCountryTable tbody tr.expanded > td {
  border-bottom: 0 !important;
}

#activeContractCountryTable tbody tr.contract-country-child-row > td,
#inactiveContractCountryTable tbody tr.contract-country-child-row > td {
  border-bottom: 0 !important;
  border-top: 0 !important;
}

#myCurrentRelationsTable thead th.country-header {
  text-align: left;
  text-indent: -5.263%;
  padding: 0px !important;
}

#myCurrentRelationsTable tbody tr.expanded > td {
  border-bottom: 0 !important;
}

#myCurrentRelationsTable tbody tr.country-child-row > td {
  border-bottom: 0 !important;
  border-top: 0 !important;
}

.customDataTableContainer .dataTable#contractInnerActiveTable thead th,
.customDataTableContainer .dataTable#contractInnerActiveTable tbody td {
  padding: 10px 18px 10px 10px !important;
  padding-right: 3px !important;
}

.customDataTableContainer .dataTable#contractInnerActiveTable tbody td:has(.opr-contract-info) {
  padding: 0 !important;
}

/*.customDataTableContainer .dataTable#contractInnerActiveTable thead .sorting_desc{
    background: url(../images/sort_des.png) no-repeat right center !important;
}
.customDataTableContainer .dataTable#contractInnerActiveTable thead .sorting_asc{
    background: url(../images/sort_asc.png) no-repeat right center !important;
}
*/
.customDataTableContainer .dataTable#contractInnerInactiveTable thead th, .customDataTableContainer .dataTable#contractInnerInactiveTable tbody td {
  padding: 10px 18px 10px 10px !important;
}

.customDataTableContainer .dataTable#contractInnerInactiveTable thead .sorting_desc {
  background: url(../images/icons/descending.svg) no-repeat right center !important;
}

.customDataTableContainer .dataTable#contractInnerInactiveTable thead .sorting_asc {
  background: url(../images/icons/ascending.svg) no-repeat right center !important;
}

#editUserDialog #mhmg-linked-account-oblong:hover, #editUserDialog #mhmg-linked-account-oblong:focus {
  text-decoration: none !important;
}

#editUserDialog #mhmg-linked-account-oblong {
  min-width: 72px !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  padding: 0 8px !important;
  color: #fff !important;
  cursor: pointer !important;
  align-items: center !important;
  font-size: 14px !important;
}

#editUserDialog .custom-icon {
  width: 12px !important;
  height: 12px !important;
}

#editUserDialog .mhmg-linked-account {
  min-width: 78px !important;
  display: inline-block !important;
  font-size: 14px !important;
  line-height: 1.42857 !important;
  padding: 0 16px !important;
  position: relative !important;
  bottom: 5px !important;
}

#editUserDialog #mhmg-linked-oblong-container {
  background: #7630ea !important;
  border-radius: 64px !important;
}

.opr-iframe-warningModal h2.errorAlertheader.linkedAccoountToolWarning {
  font-size: 48px;
  font-weight: 300;
}

/* Linked accounts > "secondary account" note - same treatment as the
   `.comm-warning` banner in prp-communication-setting-portlet.
   The amber background, warning icon, padding, radius and bottom margin all
   come from `.comm-warning` (_common.scss), so this block must NOT re-declare
   padding or a border: those live on an ID selector (1,1,1) and would silently
   beat `.comm-warning` (0,1,0), leaving the banner unpadded with the icon
   sitting on top of the copy. Typography only here. */
.linked-account-list-container div#linked-secondary-note {
  margin-top: 30px;
  font-family: "HPE Graphik";
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.linked-account-list-container div#linked-secondary-note p {
  margin-bottom: 0;
  color: #3E4550;
}

.opr-iframe-warningModal h2.errorAlertheader.secondaryToolsSave {
  font-size: 48px;
  font-weight: 300;
  margin: 24px 0;
}

.errorAlertNote.secondaryToolsSave {
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  padding: 10px 35px;
}

.linked-account-list-container #linked-secondary-note img {
  /* The note no longer ships an inline <img>; the icon is the
     `.comm-warning` background-image. Kept only so any cached/older markup
     does not show a stray un-spaced icon. */
  margin-right: 5px;
}

.prpModal .modalFooter .footerButtons-right-container button:last-child {
  margin-right: 0 !important;
}

#removeUserModal, #deactivateprimaryUserModal {
  max-width: 950px;
  padding: 48px 0 !important;
  top: 1% !important;
  max-height: 98vh;
}

#removeUserModal .errorAlertNote .note-msg, #deactivateprimaryUserModal .errorAlertNote .note-msg {
  width: 90%;
}

#removeUserModal .errorAlertNote, #deactivateprimaryUserModal .errorAlertNote {
  bottom: auto;
  padding: 10px 48px;
}

.prpModal#removeUserModal .modal-body, .prpModal#deactivateprimaryUserModal .modal-body {
  padding: 0 48px;
  text-align: left;
  max-height: 74vh;
  margin-bottom: 0;
}

.prpModal#removeUserModal .modal-body .table-responsive.custimized-ul-checkboxes,
.prpModal#deactivateprimaryUserModal .modal-body .table-responsive.custimized-ul-checkboxes {
  margin-bottom: 0;
}

.prpModal#removeUserModal .modalFooter, .prpModal#deactivateprimaryUserModal .modalFooter {
  margin: 0 48px;
}

.prpModal#removeUserModal .modal-heading h3, .prpModal#removeUserModal .modal-heading h3,
.prpModal#deactivateprimaryUserModal .modal-heading h3, .prpModal#deactivateprimaryUserModal .modal-heading h3 {
  margin-bottom: 16px;
}

.prpModal#removeUserModal .modal-heading, .prpModal#deactivateprimaryUserModal .modal-heading {
  margin-bottom: 24px;
}

.prpModal#removeUserModal .modal-heading p, .prpModal#deactivateprimaryUserModal .modal-heading p {
  font-size: 20px;
  color: #67686E;
  font-weight: 400;
  line-height: 30px;
}

#linkedSecondaryAccountsListTable, #linkedSecondaryAccountsListTable1 {
  border-top: 1px solid #ddd;
}

#linkedSecondaryAccountsListTable tbody td input[type=checkbox], #linkedSecondaryAccountsListTable1 tbody td input[type=checkbox] {
  font-size: 18px;
  cursor: pointer;
  padding: 0px;
  margin-top: 1px;
  vertical-align: top;
  position: relative;
}

#linkedSecondaryAccountsListTable tbody td input[type=checkbox]:before, #linkedSecondaryAccountsListTable1 tbody td input[type=checkbox]:before {
  content: "";
  display: block;
  position: absolute;
  width: 25px;
  height: 25px;
  border: 2px solid #666;
  background-color: white;
}

#linkedSecondaryAccountsListTable tbody td input[type=checkbox]:checked:after, #linkedSecondaryAccountsListTable1 tbody td input[type=checkbox]:checked:after {
  content: "";
  display: block;
  width: 8px;
  height: 16px;
  border: solid var(--hpe-color-decorative-brand);
  border-width: 0 4px 4px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 3px;
  left: 8px;
}

table#linkedSecondaryAccountsListTable tbody td, table#linkedSecondaryAccountsListTable1 tbody td {
  border-top: 1px solid #ddd !important;
}

table#linkedSecondaryAccountsListTable tbody tr:first-child td, table#linkedSecondaryAccountsListTable1 tbody tr:first-child td {
  border-top: none !important;
}

.customDataTableContainer .dataTables_scrollHeadInner .table.company-contact.dataTable.no-footer {
  margin-bottom: 0;
  border-bottom: 0 !important;
}

.customDataTableContainer .dataTable#allPpaList thead tr th {
  border-bottom: 0 !important;
}

.customDataTableContainer table.dataTable#allPpaList {
  margin-bottom: 0;
}

#allPpaList_wrapper .dataTables_scrollBody {
  border-bottom: 0;
}

.customDataTableContainer.company-contact-datatable .dataTable thead th, .customDataTableContainer.company-contact-datatable .dataTable tbody td {
  white-space: nowrap;
}

.customDataTableContainer.company-contact-datatable tbody tr td.ppa-full-name, .customDataTableContainer.company-contact-datatable thead tr th.ppa-full-name {
  position: sticky;
  z-index: 1;
  left: 0;
  background-color: #F7F7F7 !important;
}

.customDataTableContainer .optCustomFooter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 16px;
}

.optCustomFooter .datatablePagination {
  display: flex;
  align-items: center;
}

.optCustomFooter .datatablePagination .dataTables_length {
  margin-bottom: 0px;
}

.settingsPPAsearchFilters .opt-srch.row {
  padding: 0;
  padding-bottom: 40px;
  display: flex;
  align-items: flex-end;
  flex-wrap: nowrap;
  gap: 16px;
}

/* `#ppa-user-search` renders search_new.svg as an <img> sized to 14px inline in
   companyContacts.jsp, so the old `#ppa-user-search svg` half of this selector
   (it used to be a Clay <svg>) no longer matches anything. Only the clear ("x")
   icon is sized here. */
.settingsPPAsearchFilters .opt-srch.row .clearable-input img {
  height: 12px;
  width: 12px;
}

#ppa-user-search {
  top: 5px !important;
  right: 6px !important;
  position: absolute;
  color: #3E4550;
  font-size: 14px;
  margin-right: 7px;
}

.settingsPPAsearchFilters label, .task-search label, .settingsv2searchFilters .user-search-criteria label {
  font-family: HPE Graphik;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  color: #292D3A;
}

.settingsPPAsearchFilters .opt-srch .opt-search-container .opt-search-box-div {
  height: 36px;
  position: relative;
}

.settingsPPAsearchFilters .opt-srch .opt-search-container {
  flex: 0 1 auto;
  min-width: 200px;
  max-width: 380px;
  position: relative;
}

.settingsPPAsearchFilters .opt-srch .opt-search-container .opt-search-box-div input {
  height: 36px;
  box-sizing: border-box;
  text-overflow: ellipsis;
  padding: 0 32px 0 12px;
}

.customDataTableContainer.company-contact-datatable .dataTable tbody td.ppa-markets .ppa-Markets-expand {
  white-space: normal;
  min-width: 215px;
}

.ppa-Markets-collapse .simHolder.simCountHolder {
  float: none;
}

#clear-ppa-filters img {
  height: 24px;
  width: 24px;
}

.ppa-filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ppa-filter-group label {
  font-size: 14px;
  font-weight: 600;
  color: #272833;
  margin-bottom: 0;
  white-space: nowrap;
}

.ppa-filter-group select.user-location-filter-select {
  height: 36px;
  border: 1px solid #B1B9BE;
  border-radius: 8px;
  padding: 5px 30px 5px 10px;
  font-size: 16px;
  font-weight: 400;
  color: #272833;
  background-color: transparent;
  background-image: url(../images/icons/Up.svg);
  background-repeat: no-repeat;
  background-position: center right 10px;
  background-size: 14px;
  min-width: 160px;
  width: auto;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Let the PPA filter dropdown grow wider than its (narrow) control so long
   labels like "T2 Solution Provider" stay on one line instead of wrapping with
   awkward gaps. Stays position:absolute, so the filter row alignment is kept. */
.ppa-filter-group .hpe-select__menu {
  min-width: 100%;
  width: max-content;
  max-width: 320px;
}

.ppa-filter-group .hpe-select__option {
  white-space: nowrap;
}

.ppa-filter-group.ppa-filter-clear {
  justify-content: flex-end;
}

.ppa-filter-group .clearPPAFilter {
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  top: auto;
  right: auto;
  transform: none;
  padding: 8px 8px 8px 8px;
  border: none;
  background: transparent;
  font-size: 16px;
  font-weight: 600;
  color: #272833;
  white-space: nowrap;
}

button#clear-ppa-filters:hover {
  border-radius: 6px;
  background-color: rgba(0, 0, 0, 0.04);
  box-sizing: border-box;
  font-weight: 600;
  color: #292d3a;
}

table#allPpaList .dataTables_empty {
  white-space: normal;
}

.ppa-desc {
  font-family: HPE Graphik;
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  text-align: left;
  margin-bottom: 24px;
  color: #67686E;
  width: 740px;
}

/* Figma "Edit User" card is a fixed 1200x900. `height: 100%` tracked the
   viewport instead, so zooming out stretched the card while the tab content
   stayed the same size - the surplus showed as empty scroll box above the
   pinned Save/Cancel row. `max-height` still shrinks it on short screens. */
div#editUserDialog {
  height: 900px !important;
  max-height: 90% !important;
}

iframe#editUserDialog_iframe_ {
  height: 100% !important;
}

/* The card is a % of the viewport, so zooming out makes it taller, but AUI's
   fillHeight writes a one-off pixel height on `.modal-body` when the dialog
   opens and never recomputes - the iframe stayed short and the leftover card
   height showed as white space under the fixed Save/Cancel row. Let the body
   flex instead of trusting that inline height. */
div#editUserDialog .modal-content {
  height: 100%;
  display: flex;
  flex-direction: column;
}

div#editUserDialog .modal-body {
  height: auto !important;
  max-height: none !important;
  flex: 1 1 auto;
  min-height: 0;
}

div#editUserDialog .dialog-iframe-node {
  height: 100%;
}

table#taskNewPartyToolsTable .vertical-top {
  z-index: 1000;
}

/* =========================================================================
   Notification Preferences (prp-communication-setting-portlet) - save banners
   -------------------------------------------------------------------------
   Covers BOTH screens of that portlet, which render identical markup:
     * jsp/settings_v2.jsp      - the standalone Settings page
     * jsp/manage_user_view.jsp - the same form embedded in Manage User

   Deliberately placed at the END of this file rather than merged into the
   blocks above. Both outer classes are shared with other modules, so these
   rules have to out-rank the legacy ones without disturbing them:

     * `.global-error-message-field` also styles banners in six other modules
       (opr-sync-recovery-support, opr-marketing-campign-web,
       opr-profile-search-web, ...). `.comm-error-message` is the opt-in hook,
       giving (0,2,0) against the legacy base rule's (0,1,0).
       `.UserManagementV2 .global-error-message-field` is ALSO (0,2,0) and
       matches here (Manage User embeds this portlet), so the tie is broken by
       source order - which is exactly why this block sits last.
     * `.mdcp-service-success-message` is shared with company relationship,
       marketing campaigns and user management. `.save-success-message` scopes
       the toast skin to this portlet only, (0,2,0) over the base (0,1,0).
   ========================================================================= */
/* --- 1. Save FAILURE - HPE inline notification ---------------------------- *
 * Reproduces `overlay_red_tools` from prp-react/prp-tool-catalog-web, reusing
 * the `comm-error__*` hooks already defined for `.error-message-field-comm`
 * near the top of this file, so the two error banners in this portlet are
 * pixel-identical.
 *
 * The outer element stays a plain block: custom_scriptV2.jsp shows it with
 * jQuery `.show()`, which writes `display` INLINE and would beat a
 * `display: flex` declared here. The flex row lives on `.comm-error__content`,
 * exactly as the reference keeps it on `.overlay_Content_downtime_tools`
 * rather than on `.overlay_red_tools`. The legacy band's paint properties are
 * reset explicitly because the base rule still matches this element.        */
.global-error-message-field.comm-error-message {
  box-sizing: border-box;
  width: 100%;
  margin: 12px 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  background-image: none;
  color: inherit;
  font-family: "HPE Graphik", Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
}

/* `.overlay_red_tools .overlay_Content_downtime_tools` */
.global-error-message-field.comm-error-message .comm-error__content {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--fig-notification-inline-medium-gap, 12px);
  padding: var(--fig-notification-inline-medium-paddingY, 6px) var(--fig-notification-inline-medium-paddingX, 12px);
  min-height: 60px;
  box-sizing: border-box;
  width: 100%;
  border-radius: var(--fig-notification-inline-medium-borderRadius, 6px);
  border: var(--fig-notification-inline-medium-borderWidth, 0) solid var(--fig-notification-inline-critical-rest-border, rgba(0, 0, 0, 0));
  background: var(--fig-notification-inline-critical-rest-background, #FFECEC);
}

/* `.overlay_Content_downtime_tools .status-icon`, critical variant - the
   reference's own status-critical.svg (#CC1F1A) inlined, as above. */
.global-error-message-field.comm-error-message .comm-error__icon {
  flex: none;
  display: block;
  width: 15px;
  height: 25px;
  margin: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M7.23182 0.318191C7.65607 -0.106064 8.34393 -0.106064 8.76818 0.318191L15.6818 7.23182C16.1061 7.65607 16.1061 8.34393 15.6818 8.76818L8.76818 15.6818C8.34393 16.1061 7.65607 16.1061 7.23182 15.6818L0.318191 8.76818C-0.106064 8.34393 -0.106064 7.65607 0.318191 7.23182L7.23182 0.318191Z' fill='%23CC1F1A'/%3E%3C/svg%3E");
}

/* `.overlay_Content_downtime_tools .overlay_text` */
.global-error-message-field.comm-error-message .comm-error__text {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1 1 auto;
  min-width: 0;
}

/* `.overlay_header h4` - Figma "Title" (text/medium/medium): weight 500.
   `.global-error-message-title` is kept on the element (it is the class the
   markup has always carried) and is reset here, so nothing survives of the
   white 24px/30px heading the legacy rule gives it. */
.global-error-message-field.comm-error-message .global-error-message-title,
.global-error-message-field.comm-error-message .comm-error__title {
  min-height: 24px;
  margin: 0;
  padding: 0;
  background: none;
  font-family: var(--base-fontFamily-primary, "HPE Graphik");
  font-size: var(--text-medium-fontSize, 16px);
  font-style: normal;
  font-weight: var(--fontWeight-medium, 500);
  line-height: var(--text-medium-lineHeight, 24px);
  color: var(--fig-notification-inline-critical-rest-title-textColor, #292D3A);
}

/* `.overlay_message` - Figma "Message and link" (text/medium/regular). */
.global-error-message-field.comm-error-message .comm-error__message {
  margin: 0;
  padding: 0;
  background: none;
  font-family: var(--base-fontFamily-primary, "HPE Graphik");
  font-size: var(--text-medium-fontSize, 16px);
  font-style: normal;
  font-weight: var(--font-weight-normal, 400);
  line-height: var(--text-medium-lineHeight, 24px);
  color: var(--fig-notification-inline-neutral-rest-message-textColor, #3E4550);
}

/* The body is built in JS as one <p> per validation error
   (custom_scriptV2.jsp), so the paragraphs must inherit rather than bring
   their own block styling. The inline `background:#CA2B4E;color:white` those
   <p> tags used to carry has been removed from the script - being inline it
   would have beaten this rule and repainted the old red block on top of the
   light-red surface. */
.global-error-message-field.comm-error-message .comm-error__message p {
  margin: 0;
  font: inherit;
  color: inherit;
}

/* --- 2. Save SUCCESS - notifications toast -------------------------------- *
 * Matches `.mdcp-service-success-message.success-message-task` in
 * prp-task-portlet-v2 (jsp/tasks.jsp), which mirrors SuccessToast.jsx in
 * prp-react/prp-notitfication-web: mint surface, brand-green dot, dark text,
 * dismiss button.
 *
 * Only the container skin is declared here. The markup reuses the same
 * `.task-success-*` inner hooks, and the icon / text / close rules for those
 * are keyed on the shared `.mdcp-service-success-message` BASE class further
 * up this file, so they already apply - no duplication needed.
 *
 * As in the task portlet, `position: fixed` and the toast's min/max width are
 * deliberately NOT copied: this stays an in-flow, full-width banner at the top
 * of the form, and the base `padding: 20px 60px` is inherited so the block's
 * footprint is unchanged. Only the skin differs.                            */
.mdcp-service-success-message.save-success-message {
  background: #C2F5E0;
  color: #333333;
  font-family: "HPE Graphik", sans-serif;
  font-size: 16px;
  border-radius: 8px;
}

/* The flex row sits on the inner wrapper, never on the banner itself: jQuery
   `.show()` / `.slideUp()` write inline `display` on the banner, so a
   `display: flex` there would be clobbered by the animation. */
.mdcp-service-success-message.save-success-message .task-success-body {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

body.nav-horizontal {
  /* Only the navigation bar stays on screen; the branding header scrolls away
     with the page.

     The header carries the logo, search, help, notifications and profile -
     none of which are needed while reading down a page - and at 80px it was
     costing a fixed slice of every viewport. The nav bar is the part worth
     pinning, so the header is left in normal flow and `.horizontal-nav`
     (below) pins at the very top instead of beneath it.

     `position: static` rather than sticky, deliberately: this rule exists
     only to opt out of the sticky behaviour. Scoped to `body.nav-horizontal`,
     so the side-nav layouts keep the `position: relative` that
     `_common.scss` gives them.

     The header keeps `z-index: 1000` (above the nav's 600). That only matters
     at the top of the page where both are on screen, and there it behaves
     exactly as before - an open dropdown passes behind the header. */
  /* Liferay's admin bars scroll away too, so the nav bar really is the only
     thing that stays.

     `.control-menu-container` holds the control menu and, on a staged site,
     the staging bar beneath it - measured together at 198px here. Liferay
     pins it with `position: sticky; top: 0`, so with the branding header
     already scrolling the nav would still have parked 198px down the page
     under a strip of admin chrome.

     `!important` is needed: Liferay's own rule wins otherwise. Verified on
     the page - `position: static` alone and the same selector scoped to
     `body.nav-horizontal` both computed `sticky`; only `!important` took.

     No layout shift comes with it. The container is in normal flow either
     way, so at the top of the page the bars still occupy their 198px and the
     header still starts directly beneath them.

     `--hpe-nav-top` needs no change: mega-menu.js only counts bars whose
     computed position is `fixed` or `sticky`, so once this is `static` the
     container drops out of that measurement and the variable resolves to 0 -
     which is exactly where the nav should now pin. Verified: the routine
     returned 198 before and 0 after. Anything Liferay leaves genuinely fixed
     is still measured and still cleared. */
  /* The hamburger toggles `#navAccordian`, which is only rendered by
     test_navigation.ftl under `isMobileView`. In horizontal-nav mode that
     template is never used, so the target element does not exist and
     Bootstrap's collapse has nothing to open - verified live: the button is
     visible at 375px, data-target="#navAccordian", and
     document.querySelector('#navAccordian') is null, so clicking it does
     nothing at all. Hide the dead control; it also reclaims 42px of header
     width, which is what pushed the icon row off the right edge on phones.
     The .horizontal-nav bar itself remains the navigation on every width. */
}
body.nav-horizontal .sideNavBar {
  display: none !important;
}
body.nav-horizontal .bodyContent #content {
  padding-left: 0;
}
body.nav-horizontal .navButton.desktopNav {
  display: none !important;
}
body.nav-horizontal header#banner {
  position: static;
}
body.nav-horizontal .cadmin.control-menu-container {
  position: static !important;
}
body.nav-horizontal .navButton.mobileNav {
  display: none !important;
}
body.nav-horizontal header#banner #heading .headerText {
  margin-left: 0;
}
body.nav-horizontal header#banner {
  border-bottom: none;
}

.horizontal-nav {
  display: none;
}

/* `position: sticky` needs an unbroken chain to the viewport's scrollport.
   The theme sets `body { overflow-x: hidden }` (_common.scss) and, below
   1024px, `html { overflow-x: hidden }` (_responsive.scss). `overflow-x:
   hidden` with `overflow-y: visible` forces overflow-y to compute to `auto`,
   which turns <body> into its own scroll container - and when <html> is ALSO
   non-visible the overflow no longer propagates to the viewport, so the sticky
   header/nav anchor to a box that never scrolls and simply scroll away.

   Measured, scrolled to y=1200 with an 80px header:
     html hidden + body hidden  -> header top -1200  (sticky dead)
     html hidden + body visible -> header top 0      (sticky OK)
     html clip   + body clip    -> header top 0      (sticky OK)

   `clip` clips exactly like `hidden` but is NOT a scroll container, so
   overflow-y stays `visible` and the sticky chain survives - while still
   suppressing horizontal scrolling (verified with a 3000px child: document
   scrollWidth stayed at clientWidth).

   Scoped to the horizontal-nav layout so side-nav pages are untouched. If a
   browser does not support `clip` the declaration is simply dropped and the
   lower-specificity `hidden` rules still apply, i.e. today's behaviour. */
html:has(body.nav-horizontal) {
  overflow-x: clip;
}

body.nav-horizontal {
  overflow-x: clip;
}

body.nav-horizontal .horizontal-nav {
  display: block;
  position: sticky;
  /* Pins to the very top: the header above it is in normal flow and scrolls
     away, so there is no header height to clear.

     `--hpe-nav-top` is still honoured - it is the measured bottom of
     Liferay's control/staging bars (published by mega-menu.js), which ARE
     fixed - so in admin views the nav pins below them, and at 0 for everyone
     else. The header's measured height is no longer part of this offset: it
     only existed to clear the header while the header was sticky. */
  top: var(--hpe-nav-top, 0px);
  width: 100%;
  /* Figma `color/background/card` (node 1144-39588). */
  background-color: #292d3a;
  z-index: 600;
}

.horizontal-nav-inner {
  margin: 0 auto;
  padding: 0 var(--spacing-4xlarge, 160px);
  display: flex;
  align-items: stretch;
  /* Figma bar height. The 38px item pill is centred inside it, so the bar height
     is set here rather than being derived from the links' vertical padding. */
  min-height: 80px;
  /* Anchor for the scroll arrows and edge fades below, which are positioned
     against the bar rather than the scrolling list (a child of a scroll
     container scrolls away with the content). */
  position: relative;
}

/* --- Overflow affordance -------------------------------------------------
   `.horizontal-nav-list` is `flex-wrap: nowrap` with `overflow-x: auto`, so
   once the items stop fitting the row scrolls rather than wrapping. That part
   worked, but the scrollbar is deliberately hidden (above), so there was no
   signal at all that more items existed: on a 1280px screen at 120% zoom the
   row needs 1164px in a 988px box and "Get Help" was simply sliced off at the
   viewport edge, looking broken rather than scrollable.

   The bar keeps its full 16px type at every width - shrinking it to fit was
   the alternative and made the labels progressively smaller - and instead
   gains the standard affordance: a fade at whichever edge has more content,
   plus prev/next arrows. Everything here is driven by `data-overflow-start` /
   `data-overflow-end` on `.horizontal-nav-inner`, set by
   `updateHorizontalNavOverflow()` in mega-menu.js, so when the row fits the
   arrows and fades are simply absent and the bar looks exactly as before. */
.horizontal-nav-scroll {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 3;
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #ffffff;
  cursor: pointer;
  /* The bar is the dark secondary nav, so the control is a white glyph on a
     subtle scrim rather than a light pill. */
  /* Same technique as the sub-nav chevron above: mask a tracked SVG rather
     than rely on the legacy icon font, so the glyph takes `currentColor` and
     stays white on the dark bar. `chevron-right.svg` hard-codes its own
     stroke colour, which a background-image would paint literally.
     Both directions reuse the one asset - the prev arrow is it, flipped - so
     there is no second file that could go missing. */
}
.horizontal-nav-scroll:hover {
  background: rgba(255, 255, 255, 0.08);
}
.horizontal-nav-scroll:focus-visible {
  outline: 2px solid var(--hpe-color-decorative-brand, #01A982);
  outline-offset: -2px;
}
.horizontal-nav-scroll i {
  display: inline-block;
  width: 20px;
  height: 20px;
  font-size: 0;
  line-height: 1;
  background-color: currentColor;
  -webkit-mask: url("../images/icons/chevron-right.svg") center/contain no-repeat;
  mask: url("../images/icons/chevron-right.svg") center/contain no-repeat;
  pointer-events: none;
}

.horizontal-nav-scroll--prev i {
  transform: scaleX(-1);
}

.horizontal-nav-scroll--prev {
  left: 0;
}

.horizontal-nav-scroll--next {
  right: 0;
}

.horizontal-nav-inner[data-overflow-start=true] .horizontal-nav-scroll--prev,
.horizontal-nav-inner[data-overflow-end=true] .horizontal-nav-scroll--next {
  display: flex;
}

/* Fade masks sit just inside the arrows and only paint on the side that has
   hidden content. `pointer-events: none` keeps the items underneath clickable.
   The colour matches the secondary nav bar so the fade reads as the row
   dissolving, not as a separate element. */
.horizontal-nav-inner::before,
.horizontal-nav-inner::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 48px;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.horizontal-nav-inner::before {
  left: 0;
  background: linear-gradient(to right, #292D3A 30%, rgba(41, 45, 58, 0));
}

.horizontal-nav-inner::after {
  right: 0;
  background: linear-gradient(to left, #292D3A 30%, rgba(41, 45, 58, 0));
}

.horizontal-nav-inner[data-overflow-start=true]::before,
.horizontal-nav-inner[data-overflow-end=true]::after {
  opacity: 1;
}

/* The arrows overlay the row's ends, so reserve room for them - otherwise the
   first/last item sits underneath the control the user is trying to click. */
.horizontal-nav-inner[data-overflow-start=true] .horizontal-nav-list {
  padding-left: 32px;
}

.horizontal-nav-inner[data-overflow-end=true] .horizontal-nav-list {
  padding-right: 32px;
}

/* When the row scrolls it must start at the left edge: the base rule below
   right-aligns it with `margin-left: auto` on the first item, and an auto
   margin on an overflowing flex line pushes the content into unreachable
   negative scroll space (scrollLeft cannot go below 0). */
.horizontal-nav-inner[data-overflow-end=true] .horizontal-nav-list > .horizontal-nav-item:first-child,
.horizontal-nav-inner[data-overflow-start=true] .horizontal-nav-list > .horizontal-nav-item:first-child {
  margin-left: 0;
}

.horizontal-nav-current {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  color: #ffffff;
  font-family: "HPE Graphik";
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  white-space: nowrap;
  margin-right: 48px;
  cursor: default;
  user-select: none;
}

.horizontal-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/legacy Edge */
}
.horizontal-nav-list::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Edge */
}
.horizontal-nav-list > .horizontal-nav-item:first-child {
  margin-left: auto;
}

.horizontal-nav-item {
  position: relative;
  display: flex;
  align-items: center;
}
.horizontal-nav-item::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 38px;
  transform: translateY(-50%);
  border-radius: 100px;
  background: transparent;
  transition: background-color 0.18s ease;
  pointer-events: none;
}

.horizontal-nav-link {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  position: relative;
  /* Figma `spacing/xsmall` (16px) on both sides. The bar's 80px height comes
     from `.horizontal-nav-inner`, so the link carries no vertical padding and
     instead stretches to keep the full bar height clickable. */
  padding: 0 var(--spacing-xsmall, 16px);
  color: #FFF;
  font-family: HPE Graphik;
  font-size: 16px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  background: transparent;
  border-radius: 0;
}
.horizontal-nav-link:hover, .horizontal-nav-link:focus, .horizontal-nav-link:active {
  color: #FFF;
  text-decoration: none;
  background: transparent !important;
}

/* With a chevron the right-hand spacing belongs to the toggle, and the 4px gap
   between label and chevron is Figma `spacing/4xsmall`. */
.horizontal-nav-item:has(.horizontal-nav-toggle) .horizontal-nav-link {
  padding-right: 0;
}

.horizontal-nav-toggle {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  position: relative;
  background: transparent;
  border: 0;
  /* 4px gap after the label, 8px (`spacing/3xsmall`) to the pill's right edge. */
  padding: 0 var(--spacing-3xsmall, 8px) 0 var(--spacing-4xsmall, 4px);
  margin: 0;
  color: #ffffff;
  cursor: pointer;
}
.horizontal-nav-toggle i {
  /* The markup ships `<i class="icon-angle-down">`, a legacy icon-font
     glyph. Render the Figma "Chevron Down" (node 1144-39588) instead,
     sourced from images/icons/chevron-down.svg: `font-size: 0` hides the
     original glyph and `currentColor` keeps the chevron the same colour
     as the label through every state.
     Done in CSS so mega-menu.js keeps emitting the same element.

     NOTE: this asset MUST ship with the theme. A mask whose image 404s
     renders nothing at all - there is no CSS fallback for a missing mask
     source - so the chevron would silently disappear rather than degrade.
     The file was previously named "Chevron Down.svg" and was untracked,
     which is why /o/prp-theme/images/icons/ served a 404 for it while
     its space-free siblings returned 200.

     Kept as a MASK rather than a background-image on purpose: the file
     hard-codes `stroke="#676767"`, so painting it directly would put a
     grey chevron on the dark nav bar. A mask keys off the path's alpha
     only, so the colour still comes from `background-color`. */
  display: inline-block;
  width: 24px;
  height: 24px;
  font-size: 0;
  line-height: 1;
  background-color: currentColor;
  -webkit-mask: url("../images/icons/chevron-down.svg") center/contain no-repeat;
  mask: url("../images/icons/chevron-down.svg") center/contain no-repeat;
}
.horizontal-nav-toggle:hover, .horizontal-nav-toggle:focus, .horizontal-nav-toggle:active {
  color: #ffffff;
  background: transparent !important;
}

/* Hover / focus / open / current page -> dark pill, text stays white (no green) */
.horizontal-nav-item:hover::before,
.horizontal-nav-item:focus-within::before,
.horizontal-nav-item.open::before,
.horizontal-nav-item.active::before {
  background: #21242E;
}

.horizontal-nav-item.active > .horizontal-nav-link,
.horizontal-nav-item.active > .horizontal-nav-toggle {
  color: #FFF;
  font-weight: 600;
}

.horizontal-nav-item.open {
  /* The chevron deliberately does NOT flip to point up when the panel opens.
     Figma (node 1144-39588) ships a single "Chevron Down" for every state of
     the Sub Nav item - there is no up variant in the design - so the open
     state is communicated by the dark pill and the panel itself, not by
     rotating the icon. The `transform` transition on the icon was removed
     with this rule; nothing else animates it. */
}
.horizontal-nav-item.open > .horizontal-nav-link,
.horizontal-nav-item.open > .horizontal-nav-toggle {
  color: #FFF;
}

/* --- Responsive fit --------------------------------------------------------*/
/* The Figma item row is 1244px wide, so the full 16px type still fits inside the
   1600px container down to ~1366px. Below that only the horizontal padding is
   tightened; the type size is held at the Figma value for as long as possible
   and the list scrolls (see `overflow-x: auto`) rather than shrinking. */
@media only screen and (max-width: 1599px) {
  .horizontal-nav-current {
    margin-right: 24px;
  }
  .horizontal-nav-link {
    padding: 0 12px;
  }
  .horizontal-nav-toggle {
    padding: 0 8px 0 4px;
  }
}
@media only screen and (max-width: 1366px) {
  .horizontal-nav-current {
    margin-right: 16px;
  }
  .horizontal-nav-link {
    padding: 0 9px;
  }
  .horizontal-nav-toggle {
    padding: 0 6px 0 4px;
  }
}
.horizontal-dropdown-container {
  position: relative;
  width: 100%;
}

.horizontal-dropdown {
  display: block;
  position: absolute;
  /* Small gap between the bar and the panel. Without it the panel falls back
     to its static position and butts straight up against the nav bar. */
  top: 8px;
  left: 0;
  width: auto;
  background: transparent;
  z-index: 499;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}
.horizontal-dropdown[aria-hidden=false] {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.horizontal-dropdown-inner {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
}

.horizontal-dropdown-rail {
  list-style: none;
  margin: 0;
  padding: 8px;
  width: 300px;
  max-width: 450px;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 16px;
  box-shadow: 0 2px 25px rgba(0, 0, 0, 0.05);
}

.horizontal-rail-item {
  list-style: none;
  /* The rail item is now the single element carrying `lineSeparator` for a
     second-level page (buildHorizontalPanel unwraps the leaf instead of
     nesting another <li> inside it), so this is the ONLY rule that draws the
     divider - exactly one line per page configured with the `Line_separator`
     custom field. */
}
.horizontal-rail-item.lineSeparator {
  border-bottom: 1px solid #e6e6e6;
  margin-bottom: 4px;
  padding-bottom: 4px;
}

.horizontal-rail-link,
.horizontal-rail-item > .horizontal-dropdown-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  /* The chevron is a 16px glyph centred in a 24px slot, so it already carries a
     4px inset on top of this 6px. */
  padding: 8px 6px 8px 12px;
  border-radius: 8px;
  font-family: "HPE Graphik";
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #292d3a;
  text-decoration: none;
  /* `:focus-visible`, NOT `:focus`.

     Clicking a row with the mouse leaves it as document.activeElement, so a
     plain `:focus` kept this background painted on it long after the row was
     deselected and its third-level column had closed - the row went on
     looking chosen, indistinguishable from `.active` below (#f7f7f7 against
     #f2f2f2, both with a brand-coloured chevron), and nothing but clicking
     elsewhere would clear it.

     `:focus-visible` matches only when the browser judges the focus worth
     showing - keyboard tabbing - so keyboard users keep the exact same
     affordance while a mouse click leaves nothing behind. */
}
.horizontal-rail-link i,
.horizontal-rail-item > .horizontal-dropdown-link i {
  /* Row that OPENS another level -> ">" chevron-right, from
     images/icons/chevron-right.svg (Figma node 1144:39607). This used to
     be the L1 "Chevron Down" artwork rotated -90deg, which is a DIFFERENT
     shape: the down chevron is a 1.5px stroked polyline, so rotating it
     gave a thin outlined arrow instead of Figma's solid one. The file
     holds the real asset, already placed at Figma's inset inside a 16x16
     icon; the 24x24 slot around it is Figma's icon container.

     Setting `mask-size` explicitly (rather than `contain`) keeps the
     glyph at exactly 16px no matter how big the slot is. */
  display: inline-block;
  width: 24px;
  height: 24px;
  font-size: 0;
  line-height: 1;
  flex: 0 0 24px;
  background-color: currentColor;
  -webkit-mask: url("../images/icons/chevron-right.svg") center no-repeat;
  mask: url("../images/icons/chevron-right.svg") center no-repeat;
  -webkit-mask-size: 16px 16px;
  mask-size: 16px 16px;
}
.horizontal-rail-link:hover, .horizontal-rail-link:focus-visible,
.horizontal-rail-item > .horizontal-dropdown-link:hover,
.horizontal-rail-item > .horizontal-dropdown-link:focus-visible {
  background: #f7f7f7;
  text-decoration: none;
}
.horizontal-rail-link:hover i, .horizontal-rail-link:focus-visible i,
.horizontal-rail-item > .horizontal-dropdown-link:hover i,
.horizontal-rail-item > .horizontal-dropdown-link:focus-visible i {
  color: var(--hpe-color-decorative-brand);
}

.horizontal-dropdown-link::after {
  margin-right: 5px;
}

.horizontal-rail-item.active > .horizontal-rail-link {
  background: #f2f2f2;
  color: var(--color-text-header, #292D3A);
}
.horizontal-rail-item.active > .horizontal-rail-link i {
  color: var(--hpe-color-decorative-brand);
}

/* A second-level row whose page is not clickable.

   Rail rows had no disabled styling at all, so a row that had been made inert
   still looked exactly like a live one - same colour, same pointer - and the
   only clue was that clicking it did nothing.

   `headerdisabled` here means "does not navigate", NOT "does nothing":
   mega-menu.js still gives a non-clickable ordinary page its `has-children`
   class and `data-detail`, so the row keeps opening its third-level column on
   hover. That case therefore keeps the hover background and the chevron; a
   fully inert heading (a non-clickable HEADER page) carries neither class and
   so loses the hover feedback, which is the visual difference between "opens
   something" and "does nothing".

   No `pointer-events: none` - it would suppress the very hover event that
   opens the third level. */
.horizontal-rail-link.headerdisabled {
  cursor: default;
}
.horizontal-rail-link.headerdisabled:not(.has-children):hover, .horizontal-rail-link.headerdisabled:not(.has-children):focus {
  background: transparent;
}

/* `.headerdisabled` is a GLOBAL legacy rule (_common.scss) that also sets
   `pointer-events: none`. That is right for a row that does nothing, but it
   would also swallow the events that REVEAL a branch, so a non-clickable page
   would silently lose its sub-pages:

     - the rail opens its third level on `mouseenter` of the row itself;
     - a top-level dropdown opens on CLICK of the label (the
       `.horizontal-nav-link` handler finds the sibling toggle and opens the
       panel instead of navigating).

   Both are restored only where something is actually there to open - a rail row
   carrying `has-children`, and a top-level item that owns a toggle. Neither
   becomes navigable by this: the rail row is a <span>, and the top-level link
   is rendered without an `href`, so the click handler can only open the panel.
   A page with nothing to open keeps `pointer-events: none` and stays inert. */
.horizontal-rail-link.headerdisabled.has-children,
.horizontal-nav-item:has(.horizontal-nav-toggle) > .horizontal-nav-link.headerdisabled {
  pointer-events: auto;
}

/* Bold is reserved for a page disabled OUTRIGHT - `clickable` off on a header
   page - where the emphasis reads as a grouping label.

   The global legacy rule (`.headerdisabled { font-weight: bold !important }`
   in _common.scss) applies it to every disabled row, including an ordinary
   page that merely has `clickable` turned off. That row is not a heading - it
   may still open its sub-pages - so it was being emphasised more than the live
   rows around it. mega-menu.js marks the header-page case with
   `headerpagedisabled`, so the weight is reset for everything else.

   `!important` is required only because the declaration being undone uses it. */
.horizontal-nav-link.headerdisabled:not(.headerpagedisabled),
.horizontal-rail-link.headerdisabled:not(.headerpagedisabled),
.horizontal-dropdown-link.headerdisabled:not(.headerpagedisabled) {
  font-weight: 400 !important;
}

.horizontal-dropdown-detail {
  position: relative;
}

li.horizontal-dropdown-item {
  list-style: none;
}

.horizontal-detail-pane {
  display: none;
  width: 300px;
  max-width: 450px;
  background: #F7F7F7;
  border: 1px solid #e5e5e5;
  border-radius: 16px;
  border-radius: 16px;
  box-shadow: 0 2px 25px rgba(0, 0, 0, 0.05);
  opacity: 0;
  /* CLOSING only.

     A transition is read from the state being animated TO, so this 0.5s sits
     on the hidden state: it is what runs when `is-visible` comes off and the
     column is dismissed - by clicking outside it, or by clicking its own row
     a second time. `.is-visible` below turns the transition off, so a column
     still appears the instant its row is clicked.

     `display` cannot be transitioned, which is why the fade is carried by
     `opacity`/`.is-visible` while `[aria-hidden]` handles the layout:
     mega-menu.js holds `aria-hidden="false"` for the full 500ms
     (HNAV_DETAIL_FADE_MS) so the pane is still laid out while it fades, and
     only then lets it go back to `display: none`. */
  transition: opacity 0.5s ease;
}
.horizontal-detail-pane[aria-hidden=false] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.horizontal-detail-pane.is-visible {
  opacity: 1;
  transition: none;
}

.horizontal-detail-feature-highlight {
  padding: 16px;
  border-radius: 16px 16px 0 0;
}

.horizontal-detail-feature {
  display: flex;
  flex-direction: column;
}

li.horizontal-dropdown-item {
  list-style: none;
}

.horizontal-detail-img {
  width: 100%;
  height: 160px;
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  margin-bottom: 12px;
}

.horizontal-detail-title {
  font-family: "HPE Graphik";
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  color: #292d3a;
  margin-bottom: 4px;
}

.horizontal-detail-desc {
  align-self: stretch;
  color: var(--color-text-header, #292D3A);
  /* paragraph/disclaimer */
  font-family: var(--heading-font, "HPE Graphik");
  font-size: var(--paragraph-disclaimer-fontSize, 14px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--paragraph-disclaimer-lineHeight, 20px); /* 142.857% */
  letter-spacing: var(--paragraph-disclaimer-letterSpacing, 0);
}

.horizontal-detail-list {
  padding: 8px;
  background: #FFFFFF;
  margin-bottom: 0px !important;
  border-radius: 0 0 16px 16px;
}

/* Blank row from the page's "Spacer" custom field. The existing
   `.spacer-menu-item` rules in _common.scss are sized for the vertical side
   menu (34px/19px padding); inside the horizontal dropdown a spacer only needs
   to be a small gap, so it is sized here and kept out of hit-testing. */
.horizontal-dropdown-rail .spacer-menu-item,
.horizontal-detail-list .spacer-menu-item {
  display: block;
  height: 12px;
  padding: 0;
  margin: 0;
  border: 0;
  list-style: none;
  pointer-events: none;
}

.horizontal-dropdown-link {
  /* Flex (not block) so the hover arrow can be pinned to the right edge.
     `justify-content: space-between` keeps the label left-aligned and pushes
     the arrow to the far side of the row. */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px;
  border-radius: 8px;
  font-family: "HPE Graphik";
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
  color: #292D3A;
  text-decoration: none;
  /* Icon rule for dropdown rows:
       - has children  -> ">"  chevron-right, from the `<i>` mega-menu.js
                               emits (styled on .horizontal-rail-link above)
       - no children   -> "->" right arrow, this `::after`

     The arrow means "this navigates somewhere"; the chevron means "this opens
     another level". Third-level rows are always leaves, so they always get
     the arrow.

     Geometry matches the rail chevron so the two levels line up: a 16x16
     glyph centred in a 24x24 slot. This previously combined `flex: 0 0 24px`
     with `width: 16px`, but in a flex row the flex-basis wins, so the box
     resolved to a NON-SQUARE 24x16 - measured live on every L2 link - and
     `mask: ... / contain` then letterboxed the artwork into that oblong.
     Squaring the slot and pinning `mask-size` keeps both levels identical.

     A mask keys off the path's alpha, so the fill in the source SVG is
     irrelevant - the colour comes from `background-color`. Needs no markup or
     JS change in mega-menu.js. */
  /* A row that has children already carries the chevron `<i>`. Without this
     guard the arrow `::after` is drawn as well, so hovering a parent row
     showed TWO icons side by side. One icon per row: chevron or arrow. */
  /* `:focus-visible` for the same reason as the rail rows above: a mouse click
     leaves the link focused, and many third-level links open in a NEW TAB, so
     the menu is still sitting there afterwards with the clicked row shaded and
     its arrow stuck at full opacity. Keyboard focus still shows both. */
}
.horizontal-dropdown-link::after {
  content: "";
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  background-color: #068667;
  -webkit-mask: url("../images/icons/arrow-right.svg") center no-repeat;
  mask: url("../images/icons/arrow-right.svg") center no-repeat;
  -webkit-mask-size: 16px 16px;
  mask-size: 16px 16px;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.horizontal-dropdown-link:has(i)::after {
  content: none;
}
.horizontal-dropdown-link:hover, .horizontal-dropdown-link:focus-visible {
  background: #f7f7f7;
  color: var(--color-text-header, #292D3A);
  text-decoration: none;
}
.horizontal-dropdown-link:hover::after, .horizontal-dropdown-link:focus-visible::after {
  opacity: 1;
}
.horizontal-dropdown-link.headerdisabled {
  color: #777777;
  font-weight: 600;
  cursor: default;
  /* A disabled column heading is not a destination, so it never shows the
     arrow - not even on hover. */
}
.horizontal-dropdown-link.headerdisabled::after {
  content: none;
}
.horizontal-dropdown-link.headerdisabled:hover {
  background: transparent;
  color: #777777;
}

.horizontal-nav-link:focus-visible,
.horizontal-nav-toggle:focus-visible,
.horizontal-dropdown-heading:focus-visible,
.horizontal-dropdown-link:focus-visible {
  outline: 2px solid var(--hpe-color-decorative-brand);
  outline-offset: 2px;
}

@media screen and (max-width: 1024px) {
  .horizontal-nav-inner,
  .horizontal-dropdown-inner {
    padding-left: 16px;
    padding-right: 16px;
  }
  .horizontal-nav-inner {
    min-height: 64px;
  }
  .horizontal-nav-link {
    padding: 0 10px;
    font-size: 14px;
  }
  /* `justify-content: flex-end` is right on desktop, where the items fit and
     sit to the right of the logo. Once they no longer fit it pushes the
     overflow to the LEFT - and left overflow is unreachable in LTR, because
     scrollLeft cannot go below 0. Measured at 375px: the eight items need
     1154px in a 328px box, so the first four ("Products, Services, &
     Solutions", "Partner Programs", "Tools", "Certification & Enablement")
     sat at x = -810..-154 with scrollLeft: 0 and scrollWidth == clientWidth.
     Half the primary navigation was permanently unreachable on a phone, and
     the `overflow-x: auto` above could do nothing about it.

     Start-aligning moves the overflow to the right-hand side, which is
     exactly what that existing `overflow-x: auto` (plus the hidden
     scrollbar) was written to handle. */
  .horizontal-nav-list {
    justify-content: flex-start;
    /* Momentum scrolling on iOS, and snap items to a sensible rest
       position so a nav item is never left half-scrolled off the edge. */
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  /* The base rule right-aligns the row with an auto margin. Below 1024 the
     row must stay start-aligned even in the short-label locales where it
     happens to fit (ko/zh/ru), which is what this block was written for. */
  .horizontal-nav-list > .horizontal-nav-item:first-child {
    margin-left: 0;
  }
  .horizontal-nav-list > li {
    scroll-snap-align: start;
  }
}
/* =============================================================================
   HPE DESIGN SYSTEM — FOUNDATION WIRING
   Applies the HPE design tokens (see _hpe-tokens.scss) to the portal's global
   foundations. Imported LAST so it can layer on top of the existing theme.
   Kept intentionally foundational (typography base, focus, brand tokens) to
   adopt the token system portal-wide without destabilising page layouts.
   ============================================================================= */
/* Base typography — HPE Graphik primary stack from tokens */
body,
button,
input,
select,
textarea {
  font-family: var(--hpe-fontStack-primary);
}

/* HPE Design System accessible focus indicator */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: var(--hpe-focusIndicator-outline);
  outline-offset: var(--hpe-focusIndicator-outlineOffset);
}

/* Primary / secondary / tertiary buttons wired to brand + radius tokens.
   Brand green value is unchanged (token green-600 == #01A982); this makes the
   theme reference the token instead of a hardcoded hex. */
.btn-primary {
  background: var(--hpe-color-decorative-brand);
  border-color: var(--hpe-color-decorative-brand);
  color: var(--hpe-color-text-onPrimaryStrong);
}

.btn-primary:hover {
  background: var(--hpe-color-background-primary-strong-hover);
  border-color: var(--hpe-color-background-primary-strong-hover);
}

.btn-secondary {
  border-color: var(--hpe-color-decorative-brand);
  color: var(--hpe-color-text-strong);
}

/* =============================================================================
   HPE DESIGN SYSTEM — DATATABLES PAGINATION (global, all tables)
   One consistent HPE-standard pagination for EVERY jQuery DataTable across the
   portal, regardless of wrapper. Promotes the styling previously scoped to
   `.customDataTableContainer` to a global layer and normalises tables that
   otherwise showed the raw DataTables default or older per-table overrides.

   Imported last so it layers over class-scoped legacy rules. `!important` is
   used on the visual properties because the deployed DataTables base CSS and a
   few legacy blocks set these with high specificity. (ID-scoped legacy blocks,
   e.g. #searchResultsTable*_wrapper, are neutralised separately in _common.scss.)

   Prev/next are unified into a single CSS chevron so tables render identically
   whether their JS injected an <img> arrow or the default "Previous"/"Next"
   text — the inner content is hidden and a themed chevron icon is painted on.
   ============================================================================= */
/* Footer row: info (left) + pagination (right) */
.dataTables_wrapper .dataTables_info {
  color: var(--hpe-color-text-default, #3E4550) !important;
  font-family: "HPE Graphik", "HPEGraphik", Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 20px !important;
  padding-top: 4px !important;
}

.dataTables_wrapper .dataTables_paginate {
  padding: 0 !important;
  color: var(--hpe-color-text-strong, #292D3A) !important;
}

/* Page number buttons — ghost by default */
.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  min-width: 32px !important;
  height: 32px !important;
  margin: 0 2px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--hpe-color-text-strong, #292D3A) !important;
  font-family: "HPE Graphik", "HPEGraphik", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
  text-align: center !important;
  text-decoration: none !important;
  vertical-align: middle !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* Hover on a page number — subtle filled circle */
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--hpe-base-color-black-opacity4, rgba(0, 0, 0, 0.04)) !important;
}

/* Current page — HPE green outlined circle */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  border: 1px solid var(--hpe-color-foreground-primary, #074738) !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--hpe-color-foreground-primary, #074738) !important;
  font-weight: 600 !important;
}

/* Hovering the current page gets the same neutral wash as any other page
   number - the green outline and text colour above are kept. This rule comes
   after the block above so it wins on background alone. */
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--hpe-base-color-black-opacity4, rgba(0, 0, 0, 0.04)) !important;
}

/* Disabled page buttons */
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
  background: transparent !important;
  color: var(--hpe-color-text-disabled, rgba(0, 0, 0, 0.24)) !important;
  cursor: default !important;
  opacity: 1 !important;
}

/* Ellipsis */
.dataTables_wrapper .dataTables_paginate .ellipsis {
  padding: 0 6px !important;
  color: var(--hpe-color-text-weak, #606a70) !important;
}

/* Previous / Next — unified themed chevron (works for <img> OR text buttons) */
.dataTables_wrapper .dataTables_paginate .paginate_button.previous,
.dataTables_wrapper .dataTables_paginate .paginate_button.next {
  position: relative !important;
  font-size: 0 !important; /* hide "Previous" / "Next" text */
  color: transparent !important;
  vertical-align: middle !important;
}

/* Hide any JS-injected arrow <img> so the CSS chevron is the single source */
.dataTables_wrapper .dataTables_paginate .paginate_button.previous img,
.dataTables_wrapper .dataTables_paginate .paginate_button.next img,
.dataTables_wrapper .dataTables_paginate .paginate_button.previous span,
.dataTables_wrapper .dataTables_paginate .paginate_button.next span {
  display: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.previous::before,
.dataTables_wrapper .dataTables_paginate .paginate_button.next::before {
  content: "" !important;
  display: block !important;
  width: 14px !important;
  height: 14px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 14px 14px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.previous::before {
  background-image: url(../images/icons/previous.svg) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.next::before {
  background-image: url(../images/icons/next1.svg) !important;
}

/* Dim the chevron on disabled prev/next */
.dataTables_wrapper .dataTables_paginate .paginate_button.previous.disabled::before,
.dataTables_wrapper .dataTables_paginate .paginate_button.next.disabled::before {
  opacity: 0.35 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:focus,
.dataTables_wrapper .dataTables_paginate .paginate_button:active {
  outline: 0 !important;
  box-shadow: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:focus-visible {
  outline: 2px solid var(--hpe-color-focus, #292D3A) !important;
  outline-offset: 2px !important;
}

/* Page-size ("Show N entries") selector — HPE styled */
.dataTables_wrapper .dataTables_length label {
  font-family: "HPE Graphik", "HPEGraphik", Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: var(--hpe-color-text-default, #3E4550) !important;
  line-height: 24px !important;
}

.dataTables_wrapper .dataTables_length label select,
.dataTables_wrapper .dataTables_length select {
  height: 40px !important;
  min-width: 70px !important;
  margin: 0 5px !important;
  padding: 0 30px 0 10px !important;
  border: 1px solid var(--hpe-color-border-default, #B1B9BE) !important;
  border-radius: 8px !important;
  background-color: transparent !important;
  background-image: url(../images/icons/carot-down-new.svg) !important;
  background-position: center right 10px !important;
  background-repeat: no-repeat !important;
  background-size: 10px !important;
  color: var(--hpe-color-text-strong, #292D3A) !important;
  font-family: "HPE Graphik", "HPEGraphik", Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* React data table (react-data-table-component) — the custom HpePagination
   reuses the DataTables class names above, so it inherits the identical HPE
   pagination styling. This only adds the row layout (info left, pages right). */
.dataTables_wrapper.hpe-rdt-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 0;
}

.dataTables_wrapper.hpe-rdt-pagination .dataTables_paginate {
  display: flex;
  align-items: center;
}

.simulateduserinfo {
  background: #FD9A69;
  padding: 10px;
}

.img-user {
  padding: 10px;
}

.deSimulateURLDiv {
  text-align: right;
  font-size: 16px;
  text-decoration: underline;
  margin-top: 10px;
}

.deSimulateURLLink {
  color: black !important;
  text-decoration: underline;
}

.h-fit-content {
  height: fit-content !important;
}

.custom-notification-count {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: -8px;
  bottom: -8px;
  width: 18px;
  height: 18px;
  padding: 1px 3px;
  border-radius: 12px;
  background: var(--hpe-color-decorative-brand);
  font-family: "HPE Graphik", MetricHPE;
  font-size: 10px;
  font-weight: 700;
  line-height: 10px;
  letter-spacing: 0;
  color: #292D3A;
  box-sizing: border-box;
}

#user-notification-events-count:empty {
  display: none;
}

.portlet-content.portlet-content-editable > .portlet-header .autofit-section {
  z-index: 1000000;
}

/* ESM punch-out interception page (/group/{site}/{esm|jump}/-/link/{id}).

   That URL is a resolve-and-punch-out step, not a readable page. portal_normal.ftl
   tags <html> and <body> with `esm-punchout-page` server-side and renders
   #esmPunchoutLoader as the first child of <body>, so the loading card paints
   with the first frame and everything else is hidden.

   Without this the full portal page (header, mega-menu, portlets, footer)
   renders for the seconds the punch-out takes — highly visible when the link is
   loaded inside a Web Content iframe such as the PPA "Registration" tab under
   Settings, where it looks like a full page reload followed by a white screen.
   Legacy rendered a bare spinner page; this restores that behaviour. */
html.esm-punchout-page {
  background: #ffffff;
}

html.esm-punchout-page,
html.esm-punchout-page body {
  height: 100%;
  overflow: hidden;
}

/* Hide the whole portal without depending on where the loading card sits in the
   DOM. Liferay's SPA layer (Senna) re-parents the original <body> children into
   its surface <div> shortly after load, so a `body > *:not(#esmPunchoutLoader)`
   rule would end up hiding the card along with the portal — a blank screen, the
   exact symptom being fixed. `visibility` is inherited and can be switched back
   on for a nested descendant, so the card stays visible wherever it is moved. */
html.esm-punchout-page body {
  visibility: hidden;
}

/* The ESM debug panel (esm-config) and the shared error popup intentionally
   replace the punch-out, so they must stay readable on this page. */
html.esm-punchout-page #esmPunchoutLoader,
html.esm-punchout-page #esmPunchoutLoader *,
html.esm-punchout-page #_esmLoadingOverlay,
html.esm-punchout-page #_esmLoadingOverlay *,
html.esm-punchout-page #_esmDebugPanel,
html.esm-punchout-page #_esmDebugPanel *,
html.esm-punchout-page #_esmErrorPopup,
html.esm-punchout-page #_esmErrorPopup * {
  visibility: visible;
}

#esmPunchoutLoader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: #ffffff;
}

/* Punch-out rendered inside a Web Content / DAM iframe.

   The opaque white sheet above exists only to mask the portal that
   `html.esm-punchout-page body { visibility: hidden }` leaves behind on a
   STANDALONE punch-out page. Inside an iframe there is no portal to mask - the
   host web content owns the surface - so the sheet shows up as a white block in
   the middle of the article (the tile is #F7F7F7, the card was #FFFFFF).

   Transparent rather than a hard-coded grey so the card inherits whatever
   background the embedding content uses and cannot drift from it later. An
   iframe's canvas renders transparent when the embedded document's html/body
   are transparent, so the host page simply shows through.

   `.esm-punchout-framed` is set on <html> during head parse by portal_normal.ftl
   (window.self !== window.top), so the tool-catalog punch-out page - which is
   top-level - keeps its opaque sheet and is completely unaffected.

   Same approach as `html.prp-dashboard-iframe` in _common.scss, which solves the
   identical "white block inside a #F7F7F7 tile" problem for dashboard widgets. */
html.esm-punchout-page.esm-punchout-framed,
html.esm-punchout-page.esm-punchout-framed body,
html.esm-punchout-page.esm-punchout-framed #esmPunchoutLoader {
  background: transparent;
}

/* ==========================================================================
   ESM debug panel (esm-config) — brand styling
   The panel is injected by _showEsmDebugPanel() in main.js. It used to carry
   hard-coded inline styles (legacy #0096d6 blue, 13px type, square controls),
   which no longer matched the rebranded portal. All presentation now lives
   here so the panel picks up the HPE type ramp, colour tokens and pill
   buttons used everywhere else in the theme.
   ========================================================================== */
#_esmDebugPanel {
  color: var(--hpe-color-text-strong, #292D3A);
  background: #ffffff;
  border-top: 3px solid var(--hpe-color-icon-primary, #01A982);
  margin: 0;
  padding: 0;
}

/* Typeface: HPE Graphik is the current brand face (see _fonts.scss). Buttons,
   inputs and tables do NOT inherit font-family from their container, and Clay's
   base stylesheet loads after the theme, so the family is asserted on the panel
   and every descendant. Only weights that exist as real Graphik web fonts are
   used (100/400/500/600/700) so nothing is synthetically emboldened. */
#_esmDebugPanel,
#_esmDebugPanel * {
  font-family: "HPE Graphik", "MetricHPE", Helvetica, Arial, sans-serif !important;
}

#_esmDebugPanel .esm-dbg-toolbar {
  padding: 12px 24px;
  border-bottom: 1px solid var(--hpe-color-border-weak, #DDDDDD);
}

/* Shared button base — pill shaped, matching the theme's primary/secondary CTAs */
#_esmDebugPanel .esm-dbg-btn {
  font-size: var(--hpe-base-fontSize-200, 0.875rem);
  font-weight: var(--hpe-fontWeight-bold, 700);
  line-height: 1.25;
  border-radius: 100px;
  padding: 8px 28px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

#_esmDebugPanel .esm-dbg-btn--secondary {
  color: var(--hpe-color-text-strong, #292D3A);
  background: transparent;
  border: 1px solid var(--hpe-color-border-strong, #292D3A);
}

#_esmDebugPanel .esm-dbg-btn--secondary:hover {
  background: var(--hpe-color-background-hover, #F2F2F2);
}

#_esmDebugPanel .esm-dbg-btn--primary {
  color: #ffffff;
  background: var(--hpe-color-icon-primary, #01A982);
  border: 1px solid var(--hpe-color-icon-primary, #01A982);
}

#_esmDebugPanel .esm-dbg-btn--primary:hover {
  background: var(--hpe-color-background-brand-hover, #008567);
  border-color: var(--hpe-color-background-brand-hover, #008567);
}

#_esmDebugPanel .esm-dbg-btn:focus-visible {
  outline: 2px solid var(--hpe-color-icon-primary, #01A982);
  outline-offset: 2px;
}

/* Tabs */
#_esmDebugPanel .esm-dbg-tabs {
  display: flex;
  gap: 8px;
  padding: 0 24px;
  border-bottom: 1px solid var(--hpe-color-border-weak, #DDDDDD);
}

#_esmDebugPanel .esm-dbg-tab {
  font-size: var(--hpe-base-fontSize-200, 0.875rem);
  font-weight: var(--hpe-fontWeight-medium, 500);
  color: var(--hpe-color-text-weak, #5A5A5A);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 12px 16px;
  cursor: pointer;
}

#_esmDebugPanel .esm-dbg-tab.is-active {
  color: var(--hpe-color-text-strong, #292D3A);
  font-weight: var(--hpe-fontWeight-bold, 700);
  border-bottom-color: var(--hpe-color-icon-primary, #01A982);
}

#_esmDebugPanel .esm-dbg-body {
  padding: 24px;
  max-height: 60vh;
  overflow-y: auto;
  /* Don't hand the scroll on to the page once this list hits its end. */
  overscroll-behavior: contain;
}

/* Collapsed state for the Hide/Show toggle.
   Expressed as a CLASS rather than an inline `display` so that expanding
   restores the original cascade-driven layout (same rationale as the legacy
   .esm-debug-content--collapsed in eService-logger/tab.jsp). */
#_esmDebugPanel .esm-dbg-collapsible--collapsed {
  display: none;
}

/* Two-column layout: request parameters first, "Other details" (ESM metadata)
   second — same grouping as the legacy esm_config.jsp panel. */
#_esmDebugPanel .esm-dbg-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: flex-start;
}

/* `display: flex` above would otherwise beat the [hidden] attribute the tab
   switcher toggles, so the inactive pane must be forced out explicitly. */
#_esmDebugPanel [hidden] {
  display: none !important;
}

#_esmDebugPanel .esm-dbg-col {
  flex: 1 1 420px;
  min-width: 0;
}

#_esmDebugPanel .esm-dbg-heading {
  margin: 0 0 16px;
  font-size: var(--hpe-base-fontSize-300, 1rem);
  font-weight: var(--hpe-fontWeight-bold, 700);
  color: var(--hpe-color-text-strong, #292D3A);
}

/* Field rows */
#_esmDebugPanel .esm-dbg-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

#_esmDebugPanel .esm-dbg-label {
  flex: 0 0 200px;
  width: 200px;
  font-size: var(--hpe-base-fontSize-200, 0.875rem);
  font-weight: var(--hpe-fontWeight-normal, 400);
  color: var(--hpe-color-text-weak, #5A5A5A);
  margin: 0;
  word-break: break-word;
}

#_esmDebugPanel .esm-dbg-input {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--hpe-base-fontSize-200, 0.875rem);
  color: var(--hpe-color-text-strong, #292D3A);
  background: #ffffff;
  border: 1px solid var(--hpe-color-border-weak, #DDDDDD);
  border-radius: 4px;
  padding: 8px 12px;
  height: 40px;
  box-sizing: border-box;
}

#_esmDebugPanel .esm-dbg-input:focus {
  outline: none;
  border-color: var(--hpe-color-icon-primary, #01A982);
  box-shadow: 0 0 0 1px var(--hpe-color-icon-primary, #01A982);
}

#_esmDebugPanel .esm-dbg-input[readonly] {
  background: var(--hpe-color-background-weak, #F7F7F7);
  color: var(--hpe-color-text-weak, #5A5A5A);
}

#_esmDebugPanel .esm-dbg-actions {
  margin-top: 24px;
}

/* Permissions tab table */
#_esmDebugPanel .esm-dbg-table {
  border-collapse: collapse;
  font-size: var(--hpe-base-fontSize-200, 0.875rem);
  margin-top: 8px;
}

#_esmDebugPanel .esm-dbg-table th {
  text-align: left;
  font-weight: var(--hpe-fontWeight-bold, 700);
  color: var(--hpe-color-text-strong, #292D3A);
  padding: 12px 32px 12px 0;
  border-bottom: 1px solid var(--hpe-color-border-weak, #DDDDDD);
}

#_esmDebugPanel .esm-dbg-table td {
  padding: 12px 32px 12px 0;
  border-bottom: 1px solid var(--hpe-color-border-weak, #F0F0F0);
}

#_esmDebugPanel .esm-dbg-table__name {
  color: var(--hpe-color-text-strong, #292D3A);
  font-weight: var(--hpe-fontWeight-medium, 500);
}

#_esmDebugPanel .esm-dbg-table__empty {
  color: var(--hpe-color-text-weak, #5A5A5A);
}

/* Stack the two columns once there is no room for them side by side. */
@media screen and (max-width: 900px) {
  #_esmDebugPanel .esm-dbg-row {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  #_esmDebugPanel .esm-dbg-label {
    flex-basis: auto;
    width: auto;
  }
}
#esmPunchoutLoader .esm-punchout-loader__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  max-width: 520px;
  text-align: center;
}

#esmPunchoutLoader .esm-punchout-loader__label {
  font-family: "MetricHPE", Helvetica, Arial, sans-serif;
  font-size: var(--hpe-base-fontSize-500, 1.5rem);
  font-weight: var(--hpe-fontWeight-bold, 700);
  color: var(--hpe-color-text-strong, #292D3A);
  margin: 0;
  letter-spacing: 0.5px;
}

#esmPunchoutLoader .esm-punchout-loader__spinner {
  width: 48px;
  height: 48px;
  border: 4px solid transparent;
  border-right-color: var(--hpe-color-icon-primary, #01A982);
  border-bottom-color: var(--hpe-color-icon-primary, #01A982);
  border-left-color: var(--hpe-color-icon-primary, #01A982);
  border-radius: 50%;
  animation: _esmSpin 0.8s linear infinite;
}

/* Error state — the spinner is replaced by an actionable message so a failed
   punch-out never leaves the partner staring at a blank screen. */
#esmPunchoutLoader.has-error .esm-punchout-loader__spinner {
  display: none;
}

#esmPunchoutLoader.has-error .esm-punchout-loader__label {
  font-size: var(--hpe-base-fontSize-300, 1rem);
  font-weight: var(--hpe-fontWeight-normal, 400);
  line-height: 1.5;
}

#esmPunchoutLoader .esm-punchout-loader__retry {
  font-family: "MetricHPE", Helvetica, Arial, sans-serif;
  font-size: var(--hpe-base-fontSize-200, 0.875rem);
  font-weight: var(--hpe-fontWeight-bold, 700);
  color: #ffffff;
  background: var(--hpe-color-icon-primary, #01A982);
  border: 0;
  border-radius: 100px;
  padding: 8px 28px;
  cursor: pointer;
}

/* The punch-out page must never animate when the partner prefers reduced motion. */
@media (prefers-reduced-motion: reduce) {
  #esmPunchoutLoader .esm-punchout-loader__spinner {
    animation-duration: 3s;
  }
}
/* ESM Loading Overlay — View Tool spinner (theme level) */
#_esmLoadingOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 0;
}

#_esmLoadingOverlay .esm-overlay-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 24px 48px 32px;
  width: 30%;
  max-width: 30%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}

#_esmLoadingOverlay .esm-overlay-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid transparent;
  border-right-color: var(--hpe-color-icon-primary);
  border-bottom-color: var(--hpe-color-icon-primary);
  border-left-color: var(--hpe-color-icon-primary);
  border-radius: 50%;
  animation: _esmSpin 0.8s linear infinite;
}

#user-notification-events-count:empty {
  display: none;
}

#_esmLoadingOverlay .esm-overlay-label {
  font-family: "MetricHPE", Helvetica, Arial, sans-serif;
  font-size: var(--hpe-base-fontSize-500, 1.5rem);
  font-weight: var(--hpe-fontWeight-bold, 700);
  color: var(--hpe-color-text-strong, #292D3A);
  margin: 0;
  letter-spacing: 0.5px;
}

@keyframes _esmSpin {
  to {
    transform: rotate(360deg);
  }
}
/* ESM Error Popup — mirrors the branded PinToolModal / AlertPopupModal design
 * (#my-content-div1 in the dxp-prp-clientExtension theme CSS): 12px rounded card,
 * HPE Graphik, 28px title and pill buttons.
 *
 * These values are duplicated here rather than shared with #my-content-div1
 * because the rules below are scoped through #modalBody (an id), so they
 * outrank the client extension's class-scoped selectors. Adding #_esmErrorPopup
 * to the client extension alone has no effect — the old declarations here win.
 * Keep this block in step with #my-content-div1 in
 * client-extensions/dxp-prp-clientExtension/src/css/main.css.
 */
#_esmErrorPopup .yui3-widget-mask {
  background-color: rgb(51, 51, 51);
  opacity: 0.7;
}
#_esmErrorPopup .modal-dialog {
  /* Centre the dialog horizontally and anchor it to the top of the
     viewport, so it sits against the top navigation like every other ESM
     error popup.

     This popup is injected with `document.body.appendChild(...)` by
     _showEsmErrorModal() in the theme's main.js, so it has no positioned
     ancestor and no layout context of its own. The rule used to set
     `top: 0` and never set `left`, and a fixed box with `left: auto`
     falls back to its *static* position - i.e. wherever the container
     happens to sit in the DOM. Appended to <body> that is the left
     content edge, which is why the popup rendered flush against the left
     edge of the window on both the Tools Catalog page and on ESM
     punch-out URLs.

     `left: 50%` + `translateX(-50%)` centres it from its real rendered
     width, so it stays centred however long the error message is and
     wherever it is mounted, while `top: 0` keeps the original vertical
     anchoring. */
  position: fixed;
  outline: none;
  top: 0 !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateX(-50%);
  margin: 0 !important;
  width: 750px;
  /* Never exceed the viewport. `overflow: hidden` used to silently clip
     the footer on short windows with no way to reach the buttons; cap the
     height and scroll inside the card instead. */
  max-width: calc(100vw - 32px);
  max-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  /* The 12px radius lives on .modal-content, but the overflow above turns
     THIS element into a clipping box - and a clip box with no radius
     shears the child's rounded corners off, so the card renders square.
     Match the radius here so the clip follows the card's shape. */
  border-radius: 12px;
  z-index: 1035 !important;
}
#_esmErrorPopup .modal-dialog .modal-content {
  border-radius: 12px;
  border: 0;
}
#_esmErrorPopup .modal-dialog .modal-content #modalBody {
  padding: 0 35px;
  /* Keep the title clear of the absolutely positioned close "X"
     so a long title wraps before it instead of running under it. */
  position: relative;
}
#_esmErrorPopup .modal-dialog .modal-content #modalBody h3 {
  color: #292d3a;
  font-family: HPE Graphik;
  font-size: 28px;
  font-weight: 400;
  line-height: 34px;
  margin: 35px 0 0 0;
  padding-right: 40px;
}
#_esmErrorPopup .modal-dialog .modal-content #modalBody .toolSubHeaderText {
  color: #292d3a;
  font-family: HPE Graphik;
  font-size: 18px;
  font-weight: 300;
  line-height: 26px;
  margin-top: 5px;
  display: block;
}
#_esmErrorPopup .modal-dialog .modal-content #modalBody .toolsInnerContainer {
  border-bottom: 1px solid #979797;
  /* This container is only a message plus the rule beneath it.
     The inherited 240px floor was sized for the pin-tool
     dialog's tile grid and left ~190px of empty white between
     the message and the rule here, which is what made the
     popup read as broken. Let it size to its content and use
     a normal 24px gap above the rule instead. */
  min-height: 0;
  padding-top: 16px;
  padding-bottom: 24px;
}
#_esmErrorPopup .modal-dialog .modal-content .modal-footer {
  padding: 0 35px 35px;
  border: 0px;
  /* The single Close button sits on the right, as on every other
     branded dialog. `.btn-toolbar` is absolutely positioned to the
     card's top-right corner by a global rule (it is reused as the
     close-icon holder elsewhere), so it is reset to normal flow
     here - otherwise the footer collapses and the button lands on
     top of the title. */
}
#_esmErrorPopup .modal-dialog .modal-content .modal-footer .btn-toolbar {
  position: static;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  width: 100%;
  height: auto;
}
#_esmErrorPopup .modal-dialog .modal-content .modal-footer .sucessButton,
#_esmErrorPopup .modal-dialog .modal-content .modal-footer .primaryButton {
  border: 1px solid #292D3A;
  background-color: #292D3A;
  color: #fff;
  font-family: HPE Graphik;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  text-align: center;
  padding: 7px 35px;
  /* Spacing between buttons comes from the toolbar's `gap`.
     The old `margin-right: 24px` also applied to the last
     button, pushing it 24px inside the card's 35px content
     edge so it no longer lined up with the title or the rule
     above it. */
  margin: 24px 0 0 0 !important;
  border-radius: 28px;
  outline: none;
  /* Never let a label break inside its pill on a narrow card;
     the toolbar wraps the buttons onto separate lines instead. */
  white-space: nowrap;
}
#_esmErrorPopup .modal-dialog .modal-content .modal-footer .sucessButton:hover,
#_esmErrorPopup .modal-dialog .modal-content .modal-footer .primaryButton:hover {
  transition: 0.1s ease-in-out;
  outline-width: 0;
  background-color: #3E4550;
  border: 1px solid #3E4550;
}
#_esmErrorPopup .modal-dialog .modal-content .modal-footer .cancelButton {
  border: 0;
  color: #292d3a;
  background-color: #f7f7f7;
  font-family: HPE Graphik;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  text-align: center;
  padding: 7px 35px;
  margin: 24px 0 0 0;
  border-radius: 28px;
  outline: none;
  white-space: nowrap;
}
#_esmErrorPopup .modal-dialog .modal-content .modal-footer .cancelButton:hover {
  transition: 0.1s ease-in-out;
  outline-width: 0;
  background-color: #ededed;
}
#_esmErrorPopup button.popupCloseSubscribe.toolpopupclose {
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  position: absolute;
  /* Centred on the title's own text box (35px margin-top + half of the
     34px line-height, less half the 24px icon), so the "X" sits on the
     title baseline instead of floating above it. */
  top: 40px;
  right: 35px;
  z-index: 11;
  line-height: 0;
}

/* =========================================================================
  * Home page responsive fixes
  * -------------------------------------------------------------------------
  * The Home page ("/home") was tuned for ~1920 CSS px and broke at other
  * widths (it only looked correct at ~80% browser zoom). Root causes:
  *
  *  1. "Top tools" (CPPMyDashBoard / jQuery Gridster) is hard-coded to a
  *     1600px, fixed 4-column grid (see cpp-dashboard-widget mydashboard.js).
  *     Below ~1620 CSS px the 4th tile ("Quick links") was clipped.
  *  2. "What's new" (page fragment) used a fixed 160px side padding and a
  *     fixed `280px 280px 280px 280px` grid that did not reflow.
  *  3. "Browse HPE solutions" search row did not wrap between the widget's
  *     own 480px/768px breakpoints, causing horizontal overflow near ~500px.
  *
  * The "What's new" and carousel styles live in Liferay page fragments (stored
  * in the DB, not in the repo), so they are corrected here from the global
  * theme-CSS client extension, which cascades over the fragment styles.
  * ========================================================================= */
/* --- Top tools ("My tools" / Gridster) --------------------------------- */
/* Keep the dashboard tiles on the designed 370px x 258px card grid as the
 * browser zooms in. The previous fallback below ~75% zoom used `1fr` tracks;
 * once the Quick Links column stacked under the tools, those tracks became
 * wider/narrower with every zoom step and the tiles visibly changed size.
 * Instead, keep fixed card tracks while there is room and wrap from 3 columns
 * to 2/1 columns only when the available width demands it. */
.home-bg .prp-tools-grid #dashboard-home #dashboard_grid.gridster > ul > li {
  box-sizing: border-box !important;
}

.home-bg .prp-tools-grid #dashboard-home #dashboard_grid.gridster {
  overflow: visible !important;
}

@media screen and (min-width: 830px) {
  .home-bg .prp-tools-grid #dashboard-home #dashboard_grid.gridster > ul > li > .widgetInnerContainer,
  .home-bg .prp-tools-grid #dashboard-home #dashboard_grid.gridster > ul > li > .widgetInnerContainer > .widget_total {
    height: 100% !important;
  }
}
@media screen and (min-width: 1266px) {
  .home-bg .prp-tools-grid #dashboard-home #dashboard_grid.gridster > ul {
    display: grid !important;
    grid-template-columns: repeat(3, 370px) !important;
    grid-auto-rows: minmax(258px, auto) !important;
    gap: 40px !important;
    justify-content: start !important;
    align-items: stretch !important;
    width: 1190px !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    overflow: visible !important;
  }
  .home-bg .prp-tools-grid #dashboard-home #dashboard_grid.gridster > ul > li:not(.player):not(.dragging) {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 370px !important;
    max-width: 370px !important;
    height: auto !important;
    min-height: 258px;
    margin: 0 !important;
  }
  .home-bg .prp-tools-grid #dashboard-home #dashboard_grid.gridster > ul > li[data-sizex="2"] {
    width: 780px !important;
    max-width: 780px !important;
  }
  .home-bg .prp-tools-grid #dashboard-home #dashboard_grid.gridster > ul > li[data-sizex="3"] {
    width: 1190px !important;
    max-width: 100% !important;
  }
}
@media screen and (min-width: 830px) and (max-width: 1265px) {
  .home-bg .prp-tools-grid #dashboard-home #dashboard_grid.gridster > ul {
    display: grid !important;
    grid-template-columns: repeat(2, 370px) !important;
    grid-auto-rows: minmax(258px, auto) !important;
    grid-auto-flow: row dense !important;
    gap: 40px !important;
    justify-content: start !important;
    align-items: stretch !important;
    width: 780px !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    overflow: visible !important;
  }
  .home-bg .prp-tools-grid #dashboard-home #dashboard_grid.gridster > ul > li:not(.player):not(.dragging) {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    grid-column-start: auto !important;
    grid-row-start: auto !important;
    width: 370px !important;
    max-width: 370px !important;
    height: auto !important;
    min-height: 258px;
    margin: 0 !important;
  }
  .home-bg .prp-tools-grid #dashboard-home #dashboard_grid.gridster > ul > li[data-sizex="2"],
  .home-bg .prp-tools-grid #dashboard-home #dashboard_grid.gridster > ul > li[data-sizex="3"] {
    grid-column: span 2 !important;
    width: 780px !important;
    max-width: 100% !important;
  }
}
@media screen and (max-width: 829px) {
  .home-bg .prp-tools-grid #dashboard-home #dashboard_grid.gridster > ul {
    display: grid !important;
    grid-template-columns: minmax(0, 370px) !important;
    grid-auto-rows: minmax(258px, auto) !important;
    grid-auto-flow: row dense !important;
    gap: 24px !important;
    justify-content: start !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 370px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    overflow: visible !important;
  }
  .home-bg .prp-tools-grid #dashboard-home #dashboard_grid.gridster > ul > li:not(.player):not(.dragging) {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    grid-column: 1/-1 !important;
    grid-row-start: auto !important;
    width: 100% !important;
    max-width: 370px !important;
    height: auto !important;
    min-height: 258px;
    margin: 0 !important;
  }
}
@media screen and (max-width: 1265px) {
  .home-bg .prp-tools-grid #dashboard-home #dashboard_grid.gridster > ul > li[data-sizey="2"] {
    grid-row-end: span 2 !important;
  }
  .home-bg .prp-tools-grid #dashboard-home #dashboard_grid.gridster > ul > li[data-sizey="3"] {
    grid-row-end: span 3 !important;
  }
}
/* Final zoom-safe placement. Keep exactly three equal columns on the desktop
 * home page, including the 75% browser-zoom viewport. The earlier fixed-width
 * attempt prevented tile resizing but could either clip or collapse to two
 * columns. This keeps the layout in three columns and lets each row's tiles
 * share the available width evenly, matching the 67% / 85% screenshots. */
.home-bg .prp-tools-grid #dashboard-home #dashboard_grid.gridster > ul {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(258px, auto) !important;
  gap: 40px !important;
  justify-content: start !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  overflow: visible !important;
}

.home-bg .prp-tools-grid #dashboard-home #dashboard_grid.gridster > ul > li:not(.player):not(.dragging) {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  min-height: 258px;
  margin: 0 !important;
  order: 99;
}

.home-bg .prp-tools-grid #dashboard-home #dashboard_grid.gridster > ul > li[data-row="1"][data-col="1"] {
  order: 1;
}

.home-bg .prp-tools-grid #dashboard-home #dashboard_grid.gridster > ul > li[data-row="1"][data-col="2"] {
  order: 2;
}

.home-bg .prp-tools-grid #dashboard-home #dashboard_grid.gridster > ul > li[data-row="1"][data-col="3"] {
  order: 3;
}

.home-bg .prp-tools-grid #dashboard-home #dashboard_grid.gridster > ul > li[data-row="2"][data-col="1"] {
  order: 4;
}

.home-bg .prp-tools-grid #dashboard-home #dashboard_grid.gridster > ul > li[data-row="2"][data-col="2"] {
  order: 5;
}

.home-bg .prp-tools-grid #dashboard-home #dashboard_grid.gridster > ul > li[data-row="2"][data-col="3"] {
  order: 6;
}

.home-bg .prp-tools-grid #dashboard-home #dashboard_grid.gridster > ul > li[data-row="3"][data-col="1"] {
  order: 7;
}

.home-bg .prp-tools-grid #dashboard-home #dashboard_grid.gridster > ul > li[data-row="3"][data-col="2"] {
  order: 8;
}

.home-bg .prp-tools-grid #dashboard-home #dashboard_grid.gridster > ul > li[data-row="3"][data-col="3"] {
  order: 9;
}

.home-bg .prp-tools-grid #dashboard-home #dashboard_grid.gridster > ul > li[data-sizex="2"] {
  grid-column: span 2 !important;
  width: auto !important;
  max-width: none !important;
}

.home-bg .prp-tools-grid #dashboard-home #dashboard_grid.gridster > ul > li[data-sizex="3"] {
  grid-column: 1/-1 !important;
  width: auto !important;
  max-width: none !important;
}

@media screen and (max-width: 767px) {
  .home-bg .prp-tools-grid #dashboard-home #dashboard_grid.gridster > ul {
    grid-template-columns: minmax(0, 370px) !important;
    gap: 24px !important;
    max-width: 370px !important;
  }
  .home-bg .prp-tools-grid #dashboard-home #dashboard_grid.gridster > ul > li:not(.player):not(.dragging),
  .home-bg .prp-tools-grid #dashboard-home #dashboard_grid.gridster > ul > li[data-sizex="2"],
  .home-bg .prp-tools-grid #dashboard-home #dashboard_grid.gridster > ul > li[data-sizex="3"] {
    grid-column: 1/-1 !important;
    width: 100% !important;
    max-width: 370px !important;
  }
}
/* --- Home page content column ------------------------------------------ */
/* The page wrapper (.bodyContent / #content) is capped at 1600px AND set to
 * overflow:hidden, which clips anything trying to break out to full width.
 * So on the home page the wrapper is released to the full viewport and the
 * 1600px grid is applied to the individual sections instead. That lets the
 * carousel and "What's new" span the whole viewport while every other
 * section stays on the shared 1600px column.
 * Scoped to .home-bg so other pages keep their existing widths. */
.home-bg,
.home-bg #content {
  max-width: none !important;
  overflow-x: visible !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0px !important;
}

/* --- Shared 1600px page grid -------------------------------------------- */
/* The header, every home content section and the footer share one 1600px
 * column so their left and right edges line up at any viewport width or
 * browser zoom level. Above the crossover the column is capped at 1600px and
 * centred; below it the column fills the viewport minus a side gutter.
 *
 * That gutter used to be a flat 24px, which meant every zoom level below the
 * crossover rendered effectively edge-to-edge: on a 1280px screen at 100%
 * zoom the page had 24px of margin where the same page at 67% zoom (a 1895px
 * viewport, so the 1600px cap applies) has 147px. The result read as two
 * different designs - "proper" when zoomed out, cramped at 100-120%.
 *
 * The gutter is now proportional (3vw) so the margin scales with the zoom
 * level instead of collapsing:
 *
 *     zoom   viewport   gutter        content
 *      67%     1895px   147px (cap)    1600px   <- unchanged
 *      80%     1585px    48px          1490px
 *      90%     1407px    42px          1322px
 *     100%     1265px    38px          1189px
 *     110%     1149px    34px          1080px
 *     120%     1052px    32px           989px
 *
 * 1702px is the crossover, not 1648px: 3vw of 1702 is 51px, and
 * 1702 - 2 x 51 = 1600, so the fluid column meets the capped one exactly and
 * the transition stays seamless. (With a flat 24px gutter that crossover was
 * 1600 + 2 x 24 = 1648.) `max()` keeps the old 24px as a floor for very
 * narrow viewports, where 3vw would be less than that.
 *
 * `#content` is in this list so EVERY page - not just the home page, whose
 * sections are enumerated individually above - starts on the same line as the
 * HPE logo in the header. Interior pages previously had no shared gutter at
 * all: their wrappers ran edge to edge (measured L=0 on Certification &
 * Enablement) while the header sat at 24px, so the page content and the
 * masthead visibly disagreed.
 *
 * The home page is deliberately NOT affected, and needs no `:not()` to be
 * excluded: `.home-bg #content` above is (1,1,0) with `!important` and so
 * outranks this (1,0,0) rule, keeping home released to full width for its
 * full-bleed carousel. Anything that must break out of the column on an
 * interior page needs the same treatment - a selector more specific than a
 * bare id, not a plain `#content` override. */
header#banner #heading,
nav.horizontal-nav .horizontal-nav-inner,
.home-bg .prp-home-title,
.home-bg .prp-tools-grid,
.home-bg #portlet_com_hpe_prp_recommended_article_web,
.home-bg .wn-container,
nav#breadcrumbs,
.internal-bg .recentlyContainer,
#content,
footer .footerContainer {
  /* .wn-container is a flex item: without an explicit width the auto side
   * margins make it shrink-to-fit its content instead of filling 1600px. */
  width: 100% !important;
  max-width: 1600px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

@media screen and (max-width: 1702px) {
  header#banner #heading,
  nav.horizontal-nav .horizontal-nav-inner,
  .home-bg .prp-home-title,
  .home-bg .prp-tools-grid,
  .home-bg #portlet_com_hpe_prp_recommended_article_web,
  .home-bg .wn-container,
  nav#breadcrumbs,
  .internal-bg .recentlyContainer,
  #content,
  footer .footerContainer {
    padding-left: max(24px, 3vw) !important;
    padding-right: max(24px, 3vw) !important;
  }
}
@media screen and (max-width: 767px) {
  header#banner #heading,
  nav.horizontal-nav .horizontal-nav-inner,
  .home-bg .prp-home-title,
  .home-bg .prp-tools-grid,
  .home-bg #portlet_com_hpe_prp_recommended_article_web,
  .home-bg .wn-container,
  nav#breadcrumbs,
  .internal-bg .recentlyContainer,
  #content,
  footer .footerContainer {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}
#portlet_com_hpe_prp_recommended_article_web .recentlyContainer {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* The slide caption and the prev/next controls are absolutely positioned
 * inside the full-bleed carousel, so they need the grid's left edge computed
 * rather than inherited: half the leftover space above the crossover, the
 * fluid gutter below it. The controls previously used their own fixed
 * 160/120/80/24 gutters, which left them a few pixels off the "Learn more"
 * button above. These values must track the shared grid gutter exactly, or
 * the hero copy stops lining up with the sections beneath it. */
.home-bg .prp-slide__caption,
.home-bg .prp-carousel__controls {
  left: calc(50% - 800px) !important;
}

.home-bg .prp-slide__caption {
  max-width: min(100% - 48px, 1600px) !important;
}

@media screen and (max-width: 1702px) {
  .home-bg .prp-slide__caption,
  .home-bg .prp-carousel__controls {
    left: max(24px, 3vw) !important;
  }
  .home-bg .prp-slide__caption {
    max-width: calc(100% - max(48px, 6vw)) !important;
  }
}
@media screen and (max-width: 767px) {
  .home-bg .prp-slide__caption,
  .home-bg .prp-carousel__controls {
    left: max(16px, 50% - 784px) !important;
  }
  .home-bg .prp-slide__caption {
    max-width: calc(100% - 32px) !important;
  }
}
/* The internal site's pages sit 64px below the fixed internal header.
 *
 * ONE exception: the internal HOST's home page
 * (internal-stg2.it.hpe.com/group/prp). It opens on the full-bleed carousel,
 * which is designed to meet the header with no gap, so the inset leaves a band
 * of empty page above it.
 *
 * Two different "internal" markers are in play, and they are not the same
 * thing (see portal_normal.ftl):
 *   .internal-bg       the internal UI - either the internal HOST (an
 *                      "internal-" / "internal." domain, or /web/internal)
 *                      OR the Liferay site whose friendly URL is /internal.
 *                      Host alone was not enough: the /internal site is also
 *                      reachable from partner-stg3, and there it must look
 *                      exactly the same as it does on internal-stg3.
 *   .internal-site-bg  the Liferay SITE whose friendly URL is /internal
 *
 * So the padding is kept everywhere EXCEPT the host's home page:
 *   - internal, not home                        -> 64px  (first selector)
 *   - the /internal SITE's home page            -> 64px  (second selector)
 *   - the internal HOST's home page             -> 0     (matches neither)
 *
 * The second selector is (0,3,0) + !important, so it outranks
 * `.home-bg { padding-top: 0 !important }` (0,1,0) further up this file. */
.bodyContent.internal-bg:not(.home-bg),
.bodyContent.internal-site-bg.home-bg {
  padding-top: 64px !important;
}

/* The carousel band breaks out with width:100vw / margin-left:-50vw. 100vw
 * includes the classic scrollbar gutter, so the band ended up ~17px wider
 * than the page and sat a few pixels off-centre. The home wrapper is already
 * released to the full viewport above, so the break-out is redundant. */
.home-bg .prp-carousel-section {
  width: 100% !important;
  left: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Tablet: the theme insets the whole page by 10px and adds another 6px to the
 * content column. That pushed the content out of line with the header and
 * stopped the full-bleed bands reaching the viewport edges. */
@media screen and (max-width: 1024px) {
  #wrapper:has(.home-bg) {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .home-bg .row [class*=col-]:last-child {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
/* The logo-plus-"Partner" lockup carried an inline display, which beat the
 * `@media (max-width: 640px) { display: none }` rule in _responsive.scss — so
 * phones rendered the desktop AND the mobile wordmark side by side and the
 * header overflowed. The inline display now lives here, above the phone
 * breakpoint only. */
@media screen and (min-width: 641px) {
  span.boldFont.desktopHeader {
    display: inline-flex;
    /* Centres the wordmark on the logo's optical centre. This used to be an
     * inline `align-items`/`gap` pair WITHOUT a display, so both were inert and
     * the text was nudged down with `margin-top: 14px` instead.
     * 16px is the logo-to-wordmark gap specified in the mockup. */
    align-items: baseline;
    gap: 16px;
  }
}
/* Below 1024px the theme swaps in the hamburger toggle, which is absolutely
 * positioned at the left of #heading. With the header now on the shared page
 * grid that toggle sat on top of the wordmark, and the icon rail no longer
 * fitted so it wrapped onto a second row. Laying #heading out as a flex row
 * with the toggle as a real in-flow item keeps everything on one line and
 * keeps the header's left edge exactly on the page grid. */
@media screen and (max-width: 1024px) {
  header#banner #heading {
    display: flex !important;
    align-items: center;
    gap: 12px !important;
  }
  header#banner #heading .navButton.mobileNav {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    margin: 0 !important;
    flex: 0 0 auto;
    order: -1;
  }
  header#banner #heading .headerText {
    float: none !important;
    margin: 0 !important;
    height: auto !important;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
  }
  header#banner #heading .headerIcons {
    float: none !important;
    flex: 0 0 auto;
    width: auto !important;
  }
  header#banner #heading .headerIcons ul.nav-icons-list {
    padding-left: 0 !important;
    width: auto !important;
  }
  #wrapper header#banner #heading .headerIcons ul.nav-icons-list > li,
  header#banner #heading .headerIcons ul.nav-icons-list > li {
    margin-left: 16px !important;
    margin-right: 0 !important;
  }
}
@media screen and (max-width: 640px) {
  header#banner #heading .headerText {
    font-size: 20px !important;
    line-height: 24px !important;
  }
}
@media screen and (max-width: 400px) {
  header#banner #heading {
    gap: 8px !important;
  }
  header#banner #heading .headerText {
    font-size: 16px !important;
  }
  #wrapper header#banner #heading .headerIcons ul.nav-icons-list > li,
  header#banner #heading .headerIcons ul.nav-icons-list > li {
    margin-left: 8px !important;
  }
}
/* --- What's new -------------------------------------------------------- */
/* Full-viewport dark band; its content sits on the 1600px grid via
 * .wn-container above, so the heading keeps the same left edge as
 * "Top tools" and "Recommended for you". */
.wn-section {
  position: relative;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.wn-grid {
  width: 100% !important;
  justify-content: start !important;
  /* The ADT that renders this section ships `gap: 26px` in an inline <style>,
   * which paints after the theme stylesheet. The mockup uses 40px, matching
   * the tools catalog and "Recommended for you", so it is restated here with
   * the same `!important` the sibling `.wn-grid` overrides already rely on. */
  gap: 40px !important;
}

/* Keep the ADT's tighter mobile gap; 40px between stacked cards is too loose
 * once the grid collapses to a single column. */
@media screen and (max-width: 767px) {
  .wn-grid {
    gap: 16px !important;
  }
}
@media screen and (max-width: 1100px) {
  .wn-grid {
    grid-template-columns: repeat(3, minmax(0, 280px)) !important;
  }
}
@media screen and (max-width: 820px) {
  .wn-grid {
    grid-template-columns: repeat(2, minmax(0, 280px)) !important;
  }
}
@media screen and (max-width: 560px) {
  .wn-grid {
    grid-template-columns: 1fr !important;
  }
}
/* Section gutters are handled by the shared 1600px page grid above. */
/* The carousel caption is a fixed-height box (350/280/216/180px per
 * breakpoint) holding a fixed-height text block plus the CTA. Both were
 * `flex-shrink: 0`, so on slides with a long headline or description the text
 * overflowed its box and was cut mid-word, and the CTA was pushed past the
 * caption and clipped (most visible at 120-150% browser zoom, where the
 * smaller breakpoints' shorter boxes kick in).
 *
 * Let the text block absorb whatever height the CTA leaves, and clamp its
 * paragraphs to the number of lines that actually fit so overlong copy ends
 * in an ellipsis instead of being sliced. */
.home-bg .prp-slide__caption {
  min-height: 0 !important;
}

.home-bg .prp-slide__text-block {
  height: auto !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* The CTA is capped at a hard `max-width: 213px` with `white-space: nowrap`
 * and `overflow: visible`, so a longer label (e.g. the German "Weitere
 * Informationen", which needs 228px) spilled out of the pill and, because the
 * button centres its content, was sliced on BOTH sides — the leading letter
 * disappeared under the caption's `overflow: hidden`. Let the pill size to
 * its label, bounded by the caption, and ellipsise only if it truly cannot
 * fit. */
.home-bg .prp-slide__cta {
  flex: 0 0 auto !important;
  width: fit-content !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.home-bg .prp-slide__text-block > p {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-height: 0 !important;
}

/* Headline: 2 lines at every size (matches the designed 2-line box). */
.home-bg .prp-slide__title {
  height: auto !important;
  -webkit-line-clamp: 2 !important;
}

/* Description: as many lines as the remaining space allows at each
 * breakpoint (text block height minus the 2-line headline). */
.home-bg .prp-slide__text-block > p:not(.prp-slide__title) {
  -webkit-line-clamp: 3 !important;
}

.home-bg .prp-slide__text-block > p.prp-slide__desc:empty {
  display: none !important;
}

@media screen and (max-width: 1440px) {
  .home-bg .prp-slide__text-block > p:not(.prp-slide__title) {
    -webkit-line-clamp: 2 !important;
  }
}
/* --- Recommended for you ------------------------------------------------ */
/* The section ends flush with the bottom edge of the cards -- it carries no
 * bottom padding or margin, so the next portlet (an alert banner on the home
 * page) starts on the SAME pixel as the card. Measured: heading has 20px of
 * clearance above it, cards have 0px below. With nothing beneath them the
 * cards' 12px bottom corners butt straight into the next block and read as if
 * the tile had been sliced off. Give the section the same breathing room
 * below that it has above. */
.home-bg .recentlyContainer {
  padding-bottom: 48px;
}

/* Card surface: the mockup uses the light grey #F7F7F7, STG3 rendered #FFFFFF.
 * Measured live on the home page: `.card_X` is the element that paints the
 * card (370x422, 12px radius) - the wrappers above it (.col-sm-3.imgContainer,
 * .TileTemp_X) are all transparent.
 *
 * Scoped to `.home-bg .recentlyInnerContainer` on purpose: `.card_X` is shared
 * with the tile templates on other pages, which keep their white surface.
 * Deliberately does NOT touch `.articleTagWrapper` (the content-type tag) -
 * that must stay. */
.home-bg .recentlyInnerContainer .card_X {
  background-color: #F7F7F7;
}

/* `.portlet-title-text` carries a global `margin-bottom: 12px !important`
 * (_common.scss), which the mockup does not have under "Recommended for you".
 * Scoped to this portlet so every other portlet title keeps the 12px. */
#portlet_com_hpe_prp_recommended_article_web .portlet-title-text {
  margin-bottom: 0 !important;
}

/* The .col-sm-3 columns already stretch to the tallest card, but every
 * wrapper inside them was content-height, so the four cards ended up at four
 * different heights. Make the whole chain fill the column and push the
 * "Learn more" / tag row to the bottom so the cards line up.
 *
 * The widths were uneven too: the theme zeroes the outer gutter on the first
 * and last column of a .row, which made those two cards 12px wider than the
 * middle pair. Replacing the Bootstrap gutters with a grid gives four
 * identical columns.
 *
 * NOTE: this must be a *grid*, not `flex: 1 1 0` on the children. With a
 * zero flex-basis every child's hypothetical size is 0, so `flex-wrap` never
 * triggers and ALL items are forced onto a single line -- fine for the 4-card
 * partner row, but the internal portal (internal-stg3 /web/prp) renders 16
 * tiles in the same container and they collapsed to ~74px each with their
 * titles clipped to 3-4 characters. A grid divides each row exactly *and*
 * wraps to a new row after every 4th tile. */
@media screen and (min-width: 576px) {
  .home-bg .recentlyInnerContainer {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    /* Mockup gap between cards is 40px, matching "What's new" and the tools
     * catalog so the three home sections share one rhythm. */
    gap: 40px;
    /* .row supplies -15px side margins for Bootstrap gutters; the columns no
     * longer carry those gutters, so the negative margins would bleed the
     * grid outside its container. */
    margin-left: 0;
    margin-right: 0;
  }
  .home-bg .card-body_X {
    background: #F7F7F7 !important;
  }
  .home-bg .recentlyInnerContainer > [class*=col-] {
    /* Grid tracks own the sizing now; neutralise the Bootstrap column
     * flex/width so a track can never be forced wider than 1fr. */
    flex: none !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    padding-left: 0 !important;
    padding-right: 0 !important;
    /* Below 991px the theme gives every column a 24px bottom margin except
     * :last-child. Because a flex line stretches the margin box, that made
     * the last card exactly 24px taller than the other three. */
    margin-bottom: 0 !important;
  }
  .home-bg .recentlyInnerContainer > [class*=col-] > div,
  .home-bg .recentlyInnerContainer .TileTemp_X,
  .home-bg .recentlyInnerContainer .card_X {
    height: 100%;
  }
  .home-bg .recentlyInnerContainer .card-bottom-row_X {
    margin-top: auto;
  }
}
/* --- Browse HPE solutions ---------------------------------------------- */
/* The search row is `flex-wrap: nowrap` and the widget only wraps it below
 * 768px, but the panel itself narrows well before that (the tools grid gives
 * it ~350-480px between roughly 768px and 1100px). The fields kept their
 * intrinsic widths and spilled out of the panel by up to 248px. Allowing the
 * row to wrap at any width fixes it without changing the wide layout, since
 * flex only wraps once the items no longer fit. */
.browse-hpe-solutions-prp .search-explorer-inner-container {
  flex-wrap: wrap !important;
}

/* The ROW may wrap; the FIELD must not. This container holds the text input
 * plus its trailing status icon, and it was previously included in the
 * wrap rule above. On the full Browse page the input is ~574px wide, so it
 * filled the flex line on its own and pushed the icon onto a second line -
 * which the container's fixed 40px height could not show, leaving the icon
 * stranded 25px BELOW the field and hard against its left edge.
 * Keeping the field on one line and letting the input shrink instead gives
 * the same protection at narrow widths (verified down to 472px with no
 * overflow) without ever breaking the field apart. */
.browse-hpe-solutions-prp .search-explorer-input-box-container {
  flex-wrap: nowrap;
}

.browse-hpe-solutions-prp .search-explorer-input-box-container > input.search-explorer-input {
  flex: 1 1 auto;
  min-width: 0;
}

/* Trailing adornments (status icon) must keep their intrinsic size rather
 * than being shrunk by the input beside them. The suggestions popup is also
 * a child of this container but is absolutely positioned - it is therefore
 * not a flex item and is excluded so this can never affect its layout. */
.browse-hpe-solutions-prp .search-explorer-input-box-container > div:not([class*=custom-scrollbar]) {
  flex: 0 0 auto !important;
}

.browse-hpe-solutions-prp .search-explorer-inner-container > * {
  min-width: 0;
}

/* The four controls in the search row were all vertically centred but each
 * had its own height - radio group 42px, input 40px, Browse button 36px,
 * Market 36px - so their borders never lined up. HPE Design System medium
 * form controls are 36px, which the button and Market field already used. */
.browse-hpe-solutions-prp .radio-button-outer-container,
.browse-hpe-solutions-prp .search-explorer-input-box-container {
  height: 36px !important;
  min-height: 36px !important;
  box-sizing: border-box !important;
}

.browse-hpe-solutions-prp .search-explorer-type-radio-option {
  gap: 12px !important;
}

/* HPE Design System selection control, sized from the Figma spec
 * (Partner Portal Vision 2026, node 522-8661 "Quote Tool"):
 *   control   24x24, radius 9999px
 *   rest      transparent fill, 1px border-default #B1B9BE
 *   checked   #068667 fill, no border, white centre circle of radius 6px
 *             (12px across) - taken from the exported control SVG:
 *             <path fill="#068667"/><circle cx=12 cy=12 r=6 fill="white"/>
 * The native control used the decorative brand green (#01A982) as
 * accent-color, and the box was previously 20px with a 10px dot. */
.browse-hpe-solutions-prp .search-explorer-type-radio-option input[type=radio] {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  min-width: 24px;
  margin: 0;
  background: transparent;
  border: 1px solid var(--hpe-color-border-default, #B1B9BE);
  border-radius: 100%;
  cursor: pointer;
  vertical-align: middle;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.browse-hpe-solutions-prp .search-explorer-type-radio-option input[type=radio]:hover {
  /* HPE Design System RadioButtonGroup: hover darkens the ring to the
   * neutral #3E4550, it does NOT tint it with the brand green. This rule
   * previously reused `--hpe-color-background-primary-strong` (#068667),
   * which is the SELECTED fill colour, so hovering an unselected option
   * drew a green ring and read as if the option were already active.
   * Measured on design-system.hpe.design/components/radiobuttongroup:
   * rest #B1B9BE, hover #3E4550, checked #068667 with a white dot. */
  border-color: var(--hpe-color-border-strong, #3E4550);
}
.browse-hpe-solutions-prp .search-explorer-type-radio-option input[type=radio]:checked {
  background-color: var(--hpe-color-background-primary-strong, #068667) !important;
  /* The inner dot: Figma specifies r=6px, i.e. 12px across in the 24px
   * control. The stops are deliberately NOT identical - ending white and
   * beginning transparent at the same radius leaves the browser no
   * sub-pixel band to anti-alias and renders the dot as a visibly faceted
   * polygon rather than a circle. The 0.5px band straddling 6px keeps the
   * specified diameter while restoring a smooth edge. `circle` is stated
   * explicitly so the shape can never resolve to the `ellipse` default if
   * the control is ever sized non-square. */
  background-image: radial-gradient(circle at center, #FFFFFF 0 5.75px, transparent 6.25px) !important;
  background-repeat: no-repeat !important;
  border-color: transparent !important;
}
.browse-hpe-solutions-prp .search-explorer-type-radio-option input[type=radio]:focus-visible {
  outline: 2px solid var(--hpe-color-focus, #292D3A);
  outline-offset: 2px;
}

/* The Browse HPE solutions PAGE renders a different control from the home
 * widget: `prp-react/browse-hpe-solutions-web` uses Grommet's
 * RadioButtonGroup, where the <input> is visually hidden and the ring is the
 * <div> immediately after it. The rules above only match the home widget's
 * plain <input type="radio">, so the page kept Grommet's own palette -
 * measured rgba(0,0,0,0.15) at rest and #555A63 on hover, neither of which is
 * an HPE Design System value. The module's own stylesheet tries to tame this
 * but only sets `border-color`/`outline` on a wildcard, so it never reaches
 * the ring's own state colours. Restate the DS ramp here (the theme is the
 * one stylesheet guaranteed to load on both surfaces) so the page and the
 * home widget agree: rest #B1B9BE, hover #3E4550, checked #068667. */
.browse-hpe-solutions-prp .radio-button-inner-container input[type=radio] + div {
  border-color: var(--hpe-color-border-default, #B1B9BE) !important;
}

.browse-hpe-solutions-prp .radio-button-inner-container label:hover input[type=radio]:not(:checked) + div,
.browse-hpe-solutions-prp .radio-button-inner-container input[type=radio]:not(:checked):hover + div {
  border-color: var(--hpe-color-border-strong, #3E4550) !important;
}

.browse-hpe-solutions-prp .radio-button-inner-container input[type=radio]:checked + div {
  border-color: var(--hpe-color-background-primary-strong, #074738) !important;
}

/* --- Browse HPE solutions: Figma type scale ------------------------------
 * Two portlets ship a stylesheet scoped to `.browse-hpe-solutions-prp`:
 * `pqe-modules/browse-hpe-solutons-widget` (the home widget, already on the
 * Figma values) and `prp-react/browse-hpe-solutions-web` (the Browse page,
 * reverted in 00f29c68d and still on the pre-rebrand values 24px/#333333).
 * Whichever loads last wins, so on the home page the header/description/label
 * render at the old sizes. Restate the Figma values here — the theme is the
 * one stylesheet guaranteed to load on every page — rather than re-editing
 * the reverted Browse page module. */
.browse-hpe-solutions-prp .search-explorer-header-text {
  font-size: 28px !important;
  font-weight: 600 !important;
  line-height: 34px !important;
  letter-spacing: -0.28px !important;
  color: var(--hpe-color-text-strong, #292D3A) !important;
}

.browse-hpe-solutions-prp .search-explorer-description-text {
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
  color: #67686E !important;
}

.browse-hpe-solutions-prp .search-explorer-field-label {
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 16px !important;
  color: var(--hpe-color-text-strong, #292D3A) !important;
}

/* The "Solution" label is a child of the bordered input box and was laid out
 * on top of the field itself (pulled left by a -10px margin), so it read as
 * text inside the box overlapping the placeholder, while "Type" and "Market"
 * label their controls from above. Lift it out of the box's flow and park it
 * on the same baseline and left edge as the other two labels. */
.browse-hpe-solutions-prp .search-explorer-input-box-container {
  position: relative !important;
}

.browse-hpe-solutions-prp .search-explorer-input-box-container > .search-explorer-field-label {
  position: absolute;
  top: -23px;
  left: -1px;
  width: auto;
  /* Still `!important`: the home widget sets a margin on this label inline. */
  margin: 0 !important;
}

/* -------------------------------------------------------------------------
 * "Browse" CTA -> HPE Design System primary button.
 *
 * The button is rendered by the browse-hpe-solutions-web React app with
 * Grommet's `color="#01a982"` (the legacy bright green) and `pad="none"`.
 * Styling it from the theme keeps that module untouched.
 *
 * Values measured on https://design-system.hpe.design/components/button:
 *   rest  : bg #292D3A, colour #FFFFFF, 1px solid transparent,
 *           radius 9999px, padding 5px 18px, 16px/24px weight 500,
 *           min-height 36px, cursor pointer
 *   hover : bg #3E4550
 * ------------------------------------------------------------------------- */
.browse-hpe-solutions-prp button.search-explorer-browse-button-container {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box;
  /* `min-height` and `font-size` stay `!important`: the Browse PAGE module
   * sets both from an id-scoped rule (40px / 16px) that would otherwise win. */
  min-height: 36px !important;
  padding: 5px 18px !important;
  border: 1px solid transparent !important; /*
background-color: #292D3A !important;
border-radius: 9999px !important; */
  color: #FFFFFF !important;
  font-family: "HPE Graphik", Arial, sans-serif;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 24px;
  text-align: center;
  text-decoration: none;
  box-shadow: none;
  cursor: pointer !important;
  transition: background-color 0.1s ease-in-out, border-color 0.1s ease-in-out;
}

/* Grommet renders the label in a nested <span>, which carries its own colour. */
.browse-hpe-solutions-prp button.search-explorer-browse-button-container span,
.browse-hpe-solutions-prp button.search-explorer-browse-button-container div {
  color: #FFFFFF !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 24px !important;
}

.browse-hpe-solutions-prp button.search-explorer-browse-button-container:hover,
.browse-hpe-solutions-prp button.search-explorer-browse-button-container:focus {
  background-color: #3E4550 !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.browse-hpe-solutions-prp button.search-explorer-browse-button-container:active {
  background-color: #292D3A !important;
}

.browse-hpe-solutions-prp button.search-explorer-browse-button-container:focus-visible {
  outline: 2px solid #01A982 !important;
  outline-offset: 2px !important;
}

/* Disabled follows the DS "primary disabled" token, not a dimmed green. */
.browse-hpe-solutions-prp button.search-explorer-browse-button-container:disabled,
.browse-hpe-solutions-prp button.search-explorer-browse-button-container[disabled] {
  background-color: rgba(0, 0, 0, 0.04) !important;
  border-color: transparent !important;
  cursor: default !important;
}

.browse-hpe-solutions-prp button.search-explorer-browse-button-container:disabled span,
.browse-hpe-solutions-prp button.search-explorer-browse-button-container[disabled] span {
  color: rgba(0, 0, 0, 0.24) !important;
}

/* -------------------------------------------------------------------------
 * "Market" select -> HPE Design System.
 *
 * Rendered by browse-hpe-solutions-web; styled from the theme so that module
 * stays untouched. Measured live on the home page:
 *   field : background #FFFFFF, border 1px rgba(0,0,0,.36)
 *           -> the other controls (.search-explorer-type-radio-group) are
 *              transparent with a #B1B9BE border, so Market read as a white
 *              patch on the grey section.
 *   menu  : 1px rgba(0,0,0,.36) border, shadow 0 2px 8px rgba(0,0,0,.15)
 *   option: 40px tall, padding 8px 12px, weight 400, colour #212529,
 *           border-radius 0 -> square corners on every row.
 *
 * Design System values (design-system.hpe.design/components/select):
 *   menu   radius 6px, shadow rgba(0,0,0,.12) 0 6px 12px, no border,
 *          padding 6px 6px 0, 6px between options
 *   option 36px, padding 5px 12px, radius 6px, 16px/24px weight 500,
 *          colour #3E4550, hover rgba(0,0,0,.04), selected #D1FFEE
 * ------------------------------------------------------------------------- */
/* The widget fixes this control at 157px, which left the trigger only 131px -
 * too narrow for a 12px text inset, so the value sat 1px off the border on
 * both sides. Sizing to content lets the field carry DS padding without
 * clipping the value. */
.browse-hpe-solutions-prp .search-explorer-market-select-container-wrapper,
.browse-hpe-solutions-prp .search-explorer-market-select-container {
  width: auto !important;
}

/* The widget draws a border on the CONTAINER as well as on the field inside
 * it, so the control rendered with two nested rounded rectangles - a 1px
 * rgba(0,0,0,.36) 6px-radius box around the theme's own 1px #B1B9BE 8px-radius
 * field. Only the inner one belongs to the design; the outer is dropped.
 * The container's `6px 12px` padding is deliberately KEPT: the dropdown menu
 * is positioned with `right: 12px` against this box, so zeroing the padding
 * would inset the menu 12px from the field it belongs to. */
.browse-hpe-solutions-prp .search-explorer-market-select-container {
  border: none !important;
  border-radius: 0 !important;
}

/* "Market" sat 4px below the centre of the field it labels: the widget pads
 * its container 8px at the top and then bottom-aligns the text inside it. */
.browse-hpe-solutions-prp .search-explorer-market-text-container {
  padding: 0 !important;
  align-items: center !important;
}

.browse-hpe-solutions-prp .search-explorer-market-text {
  align-self: center !important;
}

/* The rest state. This previously used the *error* tokens
 * (`...-error-rest-borderColor` / `...-error-rest-background`) for the base
 * rule. None of those custom properties are defined anywhere in the portal, so
 * the declaration always fell through to its hardcoded fallbacks - #CC1F1A and
 * #FFECEC - and every Market select rendered with a red border on a pink fill
 * even with a market selected.
 *
 * It went unnoticed on the home page because that widget sets the field's
 * border and background as INLINE styles, which outrank this rule. The Browse
 * page module sets no inline style, so the error colours showed through. Both
 * surfaces now start from the rest tokens, and the error appearance is applied
 * only when the widget actually flags the error state (below).
 *
 * Deliberately NOT `!important`: the home widget's inline styles must stay
 * able to switch this field to its error colours. */
.browse-hpe-solutions-prp .search-explorer-market-select {
  border-radius: var(--formField-default-medium-input-container-borderRadius, 8px);
  border: var(--formField-default-medium-input-container-borderWidth, 1px) solid var(--formField-default-input-container-rest-borderColor, #B1B9BE);
  background: var(--formField-default-input-container-rest-background, transparent);
  box-sizing: border-box !important;
  min-height: 36px !important;
  /* The container defaulted to `align-items: normal`, so the value stretched
   * instead of centring and sat 5px above the middle of the field. */
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 12px !important;
}

/* The error state, applied only when the widget marks the row as having no
 * available market. `.dropDownDisabled` is the class both surfaces put on the
 * search row in that case. */
.browse-hpe-solutions-prp .search-explorer-inner-container.dropDownDisabled .search-explorer-market-select,
.browse-hpe-solutions-prp .search-explorer-market-container-dropDownDisabled .search-explorer-market-select {
  border-color: var(--formField-default-input-container-error-rest-borderColor, #CC1F1A);
  background: var(--formField-default-input-container-error-rest-background, #FFECEC);
}

.browse-hpe-solutions-prp .search-explorer-market-select:hover {
  border-color: #7A8288 !important;
}

/* Keyboard focus. The Design System's focus indicator is two-colour: a 2px
 * #292D3A outline held 2px off the control, with a 2px #FFFFFF "support" ring
 * filling that gap so the indicator stays legible on any surface.
 *
 * This used to hang off `.search-explorer-market-select-container:focus-within`
 * - a class no element in the widget's markup carries - so the control had a
 * hover border but no focus treatment whatsoever. */
.browse-hpe-solutions-prp .search-explorer-market-select:focus-visible,
.browse-hpe-solutions-prp .search-explorer-market-select:focus-within {
  border-color: #292D3A !important;
  outline: 2px solid #292D3A !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px #FFFFFF !important;
}

/* The chevron is icon-default, not the Bootstrap body colour it was
 * inheriting (#212529). */
.browse-hpe-solutions-prp .search-explorer-market-select .browse-hpe-solutions-prp-formDownSvg,
.browse-hpe-solutions-prp .search-explorer-market-select .browse-hpe-solutions-prp-formUpSvg,
.browse-hpe-solutions-prp .search-explorer-market-select .browse-hpe-solutions-prp-formDownSvg svg,
.browse-hpe-solutions-prp .search-explorer-market-select .browse-hpe-solutions-prp-formUpSvg svg {
  color: #3E4550;
  /* `fill` keeps `!important`: the module paints these icons brand green. */
  fill: currentColor !important;
}

.browse-hpe-solutions-prp .search-explorer-market-select-selected-value {
  font-family: "HPE Graphik", Arial, sans-serif !important;
  font-size: 16px !important;
  line-height: 24px !important;
  /* Same weight as the options in the menu it opens, so the closed field and
   * the open list read as one control. */
  font-weight: 400 !important;
  color: #292D3A !important;
}

/* ---------------------------------------------------------------------------
 * Market select - HPE Design System "Select".
 *
 * Values are the resolved light-mode tokens behind the Design System's Select
 * (grommet-theme-hpe -> hpe-design-tokens), medium size:
 *   drop      background-floating #FFFFFF, radius-xsmall 6px, 6px padding,
 *             6px row gap, shadow-medium 0 6px 12px rgba(0,0,0,.12),
 *             6px offset from the control, z-index 110
 *   option    36px min-height, 5px/12px padding, 16px/24px, weight 500,
 *             text-default #3E4550, radius 6px, 1px transparent border
 *   hover     background-hover rgba(0,0,0,.04)
 *   selected  background-selected-primary #D1FFEE (hover #AAFADE),
 *             text-onSelectedPrimary #292D3A, weight 500 (NOT bolder),
 *             plus a 6px border-selected #006750 marker bar on the left edge
 * (design-system.hpe.design/components/select)
 * ------------------------------------------------------------------------- */
.browse-hpe-solutions-prp .search-explorer-market-dropdown-options {
  /* background-floating. This is a floating layer, so the Design System puts
   * it on white and separates it from the panel with shadow-medium rather
   * than by tinting it to match the surface underneath. */
  background-color: #FFFFFF !important;
  border: none !important;
  border-radius: 6px !important;
  box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.12) !important;
  padding: 6px !important;
  box-sizing: border-box !important;
  /* The option rows are a 6px-gapped column, per the drop's gapY token. */
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  align-items: stretch !important;
  z-index: 110 !important;
  /* Geometry: the menu is positioned against .search-explorer-market-container,
   * which carries no padding and is exactly the field's box.
   *
   * It used to be right-anchored (`width: max-content`) on the assumption that
   * the containing block was .search-explorer-market-select-container and
   * brought 6px 12px of padding with it. No element in the widget's markup
   * carries that class, so the inset simply made the menu NARROWER than the
   * field, and `max-content` made it far WIDER as soon as the real market list
   * loaded - measured 408px against a 292px field, starting 128px to its left.
   *
   * Both edges are pinned to the control instead, and long market names
   * ellipsize in the row, because the menu lining up with its field was
   * raised specifically as the defect to fix. */
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  /* drop.margin - the Design System floats the menu 6px clear of the control;
   * this used to overlap it by 2px. The widget also sets an inline
   * `margin-top: 4px` on this element, which stacked on top of the offset and
   * made the real gap 10px, so it is zeroed here. */
  top: calc(100% + 6px) !important;
  margin-top: 0 !important;
  /* A default scrollbar paints an opaque track over the menu's rounded right
   * corners and squares them off. A transparent track lets the menu's own
   * background and radius show through. */
  scrollbar-width: thin !important;
  scrollbar-color: rgba(0, 0, 0, 0.28) transparent !important;
}

.browse-hpe-solutions-prp .search-explorer-market-dropdown-options::-webkit-scrollbar {
  width: 10px;
}

.browse-hpe-solutions-prp .search-explorer-market-dropdown-options::-webkit-scrollbar-track {
  background: transparent;
}

.browse-hpe-solutions-prp .search-explorer-market-dropdown-options::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.28);
  border-radius: 999px;
  /* Inset the thumb so it floats clear of the menu's rounded edge. */
  border: 3px solid transparent;
  background-clip: content-box;
}

.browse-hpe-solutions-prp .search-explorer-market-dropdown-option {
  box-sizing: border-box !important;
  position: relative !important;
  min-height: 36px !important;
  /* Laid out as a block rather than a flex row: the label is a bare text node,
   * and `text-overflow` has no effect on the anonymous flex item a flex
   * container would wrap it in. 5px + 24px line-height + 5px + 2px border =
   * the 36px option row the Design System specifies. */
  display: block !important;
  font-family: "HPE Graphik", Arial, sans-serif !important;
  font-size: 16px !important;
  line-height: 24px !important;
  font-weight: 500 !important;
  color: #3E4550 !important;
  padding: 5px 12px !important;
  margin: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  background-color: transparent !important;
  cursor: pointer !important;
  /* Now that the menu is pinned to the field's width, a long market name has
   * to truncate here instead of stretching the menu out from under it. */
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* background-hover. Also applied on :focus so the row a keyboard user has
 * arrowed onto is as obvious as the one under the pointer. */
.browse-hpe-solutions-prp .search-explorer-market-dropdown-option:hover,
.browse-hpe-solutions-prp .search-explorer-market-dropdown-option:focus {
  background-color: rgba(0, 0, 0, 0.04) !important;
  outline: none !important;
}

/* The option the field is currently showing. Nothing in the list said which
 * one that was. background-selected-primary, with text-onSelectedPrimary and
 * the SAME 500 weight as every other row - the Design System does not bold
 * the selected option, it colours it. */
.browse-hpe-solutions-prp .search-explorer-market-dropdown-option--selected,
.browse-hpe-solutions-prp .search-explorer-market-dropdown-option[aria-selected=true] {
  background-color: #D1FFEE !important;
  color: #292D3A !important;
  font-weight: 500 !important;
}

.browse-hpe-solutions-prp .search-explorer-market-dropdown-option--selected:hover,
.browse-hpe-solutions-prp .search-explorer-market-dropdown-option[aria-selected=true]:hover {
  background-color: #AAFADE !important;
}

/* The selected row's marker: a 6px border-selected bar pinned to the left
 * edge, rounded on that side only and pulled 1px out on three sides so it
 * hugs the row's own rounded border. This is the Design System's actual
 * selection indicator - a Select does not render a checkmark by default. */
.browse-hpe-solutions-prp .search-explorer-market-dropdown-option--selected::before,
.browse-hpe-solutions-prp .search-explorer-market-dropdown-option[aria-selected=true]::before {
  content: "" !important;
  position: absolute !important;
  top: -1px !important;
  bottom: -1px !important;
  left: -1px !important;
  width: 6px !important;
  background-color: #006750 !important;
  border-top-left-radius: 9999px !important;
  border-bottom-left-radius: 9999px !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  pointer-events: none !important;
}

.browse-hpe-solutions-prp .search-explorer-market-dropdown-option-value {
  font-family: "HPE Graphik", Arial, sans-serif !important;
  font-size: 16px !important;
  line-height: 24px !important;
  /* Same weight as the trigger's selected value above, so the closed field
   * and the open list match. Never wrapped - the menu grows to fit instead;
   * when the menu was pinned to the field's width this label wrapped onto a
   * second line and pushed the row to 60px. */
  font-weight: 600 !important;
  white-space: nowrap !important;
  color: #3E4550 !important;
}

/* -------------------------------------------------------------------------
 * Remaining Browse HPE solutions details, all styled from the theme so the
 * browse-hpe-solutions-web module stays untouched.
 * ------------------------------------------------------------------------- */
/* Radio hover: the Grommet default paints a green focus/hover ring. The HPE
 * Design System RadioButtonGroup uses a dark grey border on hover and keeps
 * green for the CHECKED state only.
 * (design-system.hpe.design/components/radiobuttongroup) */
.browse-hpe-solutions-prp .search-explorer-type-radio-group label:hover input[type=radio] + div,
.browse-hpe-solutions-prp input[type=radio]:hover + div,
.browse-hpe-solutions-prp input[type=radio]:focus + div {
  border-color: #555A63 !important;
  box-shadow: none !important;
  outline: none !important;
}

.browse-hpe-solutions-prp input[type=radio]:checked + div {
  border-color: #00A982 !important;
}

.browse-hpe-solutions-prp .search-explorer-input::placeholder,
.browse-hpe-solutions-prp input.search-explorer-input::placeholder {
  font-weight: 400 !important;
  color: #B1B9BE !important;
  opacity: 1 !important;
  /* The widget sizes the placeholder independently of the control it sits
   * in: `.search-explorer-input-sim-active::placeholder` is 19px and the
   * inactive variant 18px, while the input's own text is 16px. So the hint
   * "Enter a 'Buy' or 'as a Service' solution to get started" rendered
   * LARGER than the value the user then types over it (452px of text in a
   * field sized for 381px). Those widget rules carry no `!important`, but
   * they match at the same specificity as this one and the block above sets
   * no font-size at all, so nothing here was overriding them - pin the
   * placeholder to the input's own 16px/24px. */
  font-size: 16px !important;
  line-height: 24px !important;
}

.browse-hpe-solutions-prp .search-explorer-input,
.browse-hpe-solutions-prp input.search-explorer-input {
  font-family: "HPE Graphik", Arial, sans-serif;
  /* `font-size`, `font-weight` and `color` stay `!important`: the Browse PAGE
   * module sets 18px / 400 / #000 on the same element. */
  font-size: 16px !important;
  line-height: 24px;
  font-weight: 400 !important;
  color: #292D3A !important;
}

/* Result tooltip / "no offers found" panel: was white, mockup uses the grey
 * surface token, and its link rendered heavier than body text and turned
 * black on hover instead of staying green. */
.browse-hpe-solutions-prp .browse-hpe-solutions-prp-dropdown-content,
.browse-hpe-solutions-prp .search-explorer-no-results,
.browse-hpe-solutions-prp {
  background-color: #F7F7F7 !important;
}

.browse-hpe-solutions-prp .browse-hpe-solutions-prp-dropdown-content a,
.browse-hpe-solutions-prp .search-explorer-no-results a {
  font-weight: 600 !important;
  color: #006750 !important;
  text-decoration: underline !important;
}

.browse-hpe-solutions-prp .browse-hpe-solutions-prp-dropdown-content a:hover,
.browse-hpe-solutions-prp .search-explorer-no-results a:hover {
  color: #004A3B !important;
  text-decoration: underline !important;
}

/* --- Browse HPE solutions: tablet / mobile ------------------------------
 * The widget sizes the search row with a hard `height: 40px` (66px in the
 * dropDownDisabled variant) and gives the panel and its inner box
 * `height: 100%`. That only holds while the row is a single line. The theme
 * lets the row wrap (see `flex-wrap: wrap` above), so from roughly 1100px
 * down it becomes two to four lines of ~180-230px, and the fields spilled out
 * of the grey panel and landed on top of the tool tiles underneath. Let every
 * box in the chain size to its content instead. */
.browse-hpe-solutions-prp .search-explorer-outer-container,
.browse-hpe-solutions-prp .search-explorer-inner-box,
.browse-hpe-solutions-prp .search-explorer-inner-container,
.browse-hpe-solutions-prp .search-explorer-inner-container-dropDownDisabled {
  height: auto !important;
}

/* Once the row wraps, each wrapped line needs headroom for the label that the
 * block above pulls out of flow: the "Solution" label is parked 23px above its
 * box (see the rule further up). The inherited 16px gap left it sitting on the
 * control on the previous line, so widen the row gap only - `row-gap` has no
 * effect while the row is a single line, so the desktop layout is untouched. */
.browse-hpe-solutions-prp .search-explorer-inner-container {
  row-gap: 30px !important;
}

/* The Market validation message ships as `position: absolute; bottom: -40%`,
 * which hangs it into the gap below the row. Once the row wraps it landed on
 * the "Solution" label on the next line.
 *
 * It used to be forced back into flow only below 1439px. That threshold was
 * the bug: the row is a single line until roughly 1280px, so between 1280px
 * and 1439px - 90% browser zoom on a 1280px screen lands at ~1422px, exactly
 * in that band - the message took up space in a column that was still sitting
 * beside the others. The row is `align-items: flex-end` (inline style), so the
 * message's height pushed the Market label and field 20.5px ABOVE the Type,
 * Solution and Browse controls.
 *
 * The message is now in flow at every width, which is what makes it reserve
 * its own space and never collide, however tall it grows (it wraps to two
 * lines below ~340px, and translations may be longer again). The alignment is
 * handled by the block below instead of by guessing a viewport width. */
.browse-hpe-solutions-prp .search-explorer-market-error {
  position: static !important;
  bottom: auto !important;
}

/* With the message in flow the Market column is taller than its neighbours,
 * and bottom-aligning the row would push its control up. In the error state
 * the row therefore aligns to the TOP, and the two columns whose control is
 * not preceded by an in-flow label are pushed down to meet the others:
 *
 *   Type    label + control          -> control starts 22px down
 *   Market  label + control + error  -> control starts 22px down
 *   Solution  control only           -> its label is absolutely parked above
 *   Browse    control only           -> no label at all
 *
 * 22px is the label block: 16px line-height + 6px margin-bottom. Aligning on
 * the control rather than the column bottom means the message can be any
 * height without moving anything. Scoped to `.dropDownDisabled`, which the
 * widget puts on the row only while the market list is unavailable, so the
 * normal layout keeps its existing bottom alignment untouched. */
.browse-hpe-solutions-prp .search-explorer-inner-container.dropDownDisabled {
  align-items: flex-start !important;
}

.browse-hpe-solutions-prp .search-explorer-inner-container.dropDownDisabled > .search-explorer-input-box-container,
.browse-hpe-solutions-prp .search-explorer-inner-container.dropDownDisabled > .search-explorer-browse-button-wrapper {
  margin-top: 22px !important;
}

/* The Browse column carries no class of its own in the shipped widget bundle;
 * `.search-explorer-browse-button-wrapper` only appears once that module is
 * rebuilt. The theme and the widget deploy separately, so this matches the
 * column by the button it contains and keeps the row correct when the theme
 * ships on its own. Kept as its own rule: a browser without `:has()` support
 * discards the whole selector list it appears in, which would take the
 * class-based rule above down with it. */
.browse-hpe-solutions-prp .search-explorer-inner-container.dropDownDisabled > *:has(> .search-explorer-browse-button-container) {
  margin-top: 22px !important;
}

/* `white-space: nowrap` on the heading forced the panel wider than the phone
 * viewport. */
.browse-hpe-solutions-prp .search-explorer-header-text {
  white-space: normal !important;
}

/* Below 768px the fields and button also go full width. */
@media screen and (max-width: 767px) {
  /* 40px of panel padding leaves under     260px for the controls on a 390px
   * phone; the Figma mobile inset is 24px. */
  .browse-hpe-solutions-prp .search-explorer-outer-container {
    padding: 24px !important;
  }
  .browse-hpe-solutions-prp .search-explorer-input-box-container {
    min-width: 0 !important;
    width: 100% !important;
  }
  .browse-hpe-solutions-prp .search-explorer-field-label,
  .browse-hpe-solutions-prp .search-explorer-input {
    width: 100% !important;
    box-sizing: border-box;
  }
  .browse-hpe-solutions-prp .search-explorer-browse-button-container,
  .browse-hpe-solutions-prp .search-explorer-browse-button-container-box {
    width: 100% !important;
  }
}
/* =========================================================================
 * Browse HPE solutions PAGE - align to the ITG reference
 * -------------------------------------------------------------------------
 * Two different portlets render the same `.browse-hpe-solutions-prp` markup:
 *
 *   portlet_browsehpesolutionswidget      the HOME page widget   (pqe-modules)
 *   portlet_com_hpe_browse_solutions_web  the BROWSE PAGE        (prp-react)
 *
 * Everything here is scoped to the PAGE portlet id, so the home widget keeps
 * its current rebranded look untouched - verified live on stg3: the home
 * widget renders the heading at 28px/600 #292D3A and must stay that way.
 *
 * Values measured on the reference,
 * https://partner-itg2.it.hpe.com/browsehpesolutions#category, against
 * https://partner-stg3.it.hpe.com/browsehpesolutions.
 *
 * `font-family` is deliberately NOT set: stg3 keeps its own faces (the search
 * input and Browse button use "HPE Graphik", the rest MetricHPE). Only weight,
 * size, line-height, colour and control geometry are aligned. */
#portlet_com_hpe_browse_solutions_web {
  /* Description: same 16px on both, but ITG uses a 20px line-height and the
     darker #333333; stg3 had 24px/#67686E. */
  /* Search input value/placeholder: ITG 18px, stg3 16px. */
  /* Control geometry. ITG draws a 0.8px hairline; stg3 had thickened it to
     1.2px, and its boxes were 36px against ITG's 42px radio group / 40px
     field, so the row sat shorter and the borders read heavier. */
  /* Radio ring: ITG is a neutral 1.6px rgba(0,0,0,0.15) at 24px. The ring is
     the <div> after the visually-hidden input (Grommet RadioButtonGroup), so
     it is targeted through the adjacent-sibling combinator. The label text is
     already 18px/400 on both and is left alone. */
  /* Market: ITG puts the value in a bordered 38px control; on stg3 it had no
     box at all and stood 48px tall, so it did not line up with the row. */
  /* Browse CTA: ITG is the legacy square green button at 19px. */
}
#portlet_com_hpe_browse_solutions_web .search-explorer-description-text {
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  color: #333333 !important;
}
#portlet_com_hpe_browse_solutions_web .search-explorer-input,
#portlet_com_hpe_browse_solutions_web input.search-explorer-input {
  font-size: 18px !important;
}
#portlet_com_hpe_browse_solutions_web .search-explorer-type-radio-group,
#portlet_com_hpe_browse_solutions_web .radio-button-outer-container {
  border: 0.8px solid rgba(0, 0, 0, 0.36) !important;
  border-radius: 6px !important;
  height: 42px !important;
  box-sizing: border-box !important;
}
#portlet_com_hpe_browse_solutions_web .search-explorer-input-box-container {
  border: 0.8px solid rgba(0, 0, 0, 0.36) !important;
  border-radius: 6px !important;
  height: 40px !important;
  box-sizing: border-box !important;
}
#portlet_com_hpe_browse_solutions_web .radio-button-inner-container input[type=radio] + div {
  width: 24px !important;
  height: 24px !important;
  border: 1.6px solid rgba(0, 0, 0, 0.15) !important;
  border-radius: 100% !important;
}
#portlet_com_hpe_browse_solutions_web .search-explorer-market-select-container {
  border: 0.8px solid rgba(0, 0, 0, 0.36) !important;
  border-radius: 6px !important;
  height: 38px !important;
  box-sizing: border-box !important;
}
#portlet_com_hpe_browse_solutions_web button.search-explorer-browse-button-container {
  background-color: #01A982 !important;
  color: #FFFFFF !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  border-radius: 0 !important;
  padding: 6px 18px !important;
  min-height: 36px !important;
}
#portlet_com_hpe_browse_solutions_web button.search-explorer-browse-button-container span,
#portlet_com_hpe_browse_solutions_web button.search-explorer-browse-button-container div {
  font-size: 19px !important;
  font-weight: 600 !important;
}

/* =========================================================================
 * Widget admin controls (portlet-topper "3 dots" + web-content "+"/pencil)
 * -------------------------------------------------------------------------
 * Context: on pages using the "PRP Carousal V2 ADT" an Administrator could not
 * reach the widget controls. Three independent causes were found:
 *
 *  1. portlet.ftl only emitted the `portlet_header_*` dynamic include (the
 *     "+" / ellipsis for editing web content) for the Journal Content portlet,
 *     so Asset Publisher widgets never rendered one. -> fixed in portlet.ftl.
 *
 *  2. Master-layout fragments inject `.portlet-header { display: none; }`,
 *     hiding the row that carries those icons.
 *
 *  3. The ADT blankets every slide with a full-size clickable overlay:
 *         .myCapV2 { height:100%!important; width:100%!important;
 *                    z-index:1000!important; }   <-- wrapped in <a href>
 *         .LeftArrowCarrouselV2 / .RightArrowCarrouselV2
 *                  { position:absolute; top:0; height:100%; z-index:1000; }
 *     `.carousel-caption` is absolutely positioned, so these paint ABOVE the
 *     portlet-topper and swallow every pointer event.
 *
 * NOTE: `:has()` selectors are kept in their own standalone rules on purpose.
 * A selector list is discarded wholesale by browsers that do not understand
 * one of its members, so mixing them with the core rules would silently
 * disable the controls (which is exactly what happened before).
 * ========================================================================= */
/* -- 1. Confine the carousel's z-index:1000 layers ------------------------ *
 * Giving the carousel root its own stacking context at `z-index: 0` keeps all
 * of those 1000-level overlays INSIDE the widget, so they can no longer paint
 * over - or steal hover from - the admin toolbar. No layout change.          */
#carouselExampleIndicators,
.carouselExampleIndicators,
.portlet-content-editable .carousel {
  position: relative;
  z-index: 0;
  isolation: isolate;
}

/* Keep the overlays below the widget chrome inside that context. */
.myCapV2,
.carousel-caption.myCapV2,
.LeftArrowCarrouselV2,
.RightArrowCarrouselV2,
.carouselIndicatorsPositionsV2 {
  z-index: 1 !important;
}

/* -- 2. Widget topper: always visible, in-flow, never overlapped ---------- *
 * The topper is only rendered by portlet.ftl when the user actually has
 * configuration icons/menus, so showing it permanently is safe - and it
 * removes the hover dead-zone that made the bar flicker away.               */
.portlet-topper {
  display: flex !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;
  pointer-events: auto !important;
  transition: none !important;
  /* Only has to beat the widget's own content. The ADT overlays that used to
     cover it are confined by the `isolation: isolate` in section 1 above, so
     this no longer needs a four-digit value - and must stay well below the
     Liferay/YUI dialog layer (mask + dialog land at ~1135), otherwise the
     topper paints over any open modal. */
  z-index: 20 !important;
}

.portlet-topper-toolbar,
.portlet-title-menu {
  position: relative;
  z-index: 21 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.portlet-topper *,
.portlet-topper-toolbar * {
  pointer-events: auto !important;
}

/* -- 3. Web-content controls row ("+" / pencil / ellipsis) ---------------- *
 * Beats the `.portlet-header { display:none }` injected by page fragments and
 * the `height:0` coming from _global.scss.                                   */
.portlet-content-editable > .portlet-header,
.master-layout-fragment .portlet-content-editable > .portlet-header,
.portlet-journal-content .portlet .portlet-content-editable > .portlet-header {
  display: flex !important;
  position: relative;
  /* Kept below the ~1135 Liferay/YUI dialog layer - see .portlet-topper. */
  z-index: 20;
  min-height: 32px !important;
  height: auto !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.portlet-content-editable > .portlet-header .autofit-col-end,
.portlet-content-editable > .portlet-header .autofit-section,
.portlet-content-editable > .portlet-header .dropdown,
.portlet-content-editable > .portlet-header .dropdown-toggle,
.portlet-content-editable > .portlet-header .component-action {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Existing rule at the top of this file already raises the autofit-section;
   give the trigger a real hit area so the cursor cannot slip off it. */
.portlet-content-editable > .portlet-header .autofit-section .dropdown-toggle,
.portlet-content-editable > .portlet-header .autofit-section .component-action {
  min-width: 32px;
  min-height: 32px;
}

/* Pages built from master-layout fragments deliberately hide the widget title.
 * Keep that look: float the controls row over the top-right corner instead of
 * letting it push the carousel down, and keep the title column hidden. */
.master-layout-fragment .portlet-content-editable > .portlet-header {
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
  width: auto;
  margin: 0 !important;
  background: transparent;
}

.master-layout-fragment .portlet-content-editable > .portlet-header > .autofit-col-expand,
.master-layout-fragment .portlet-content-editable > .portlet-header .portlet-title-text {
  display: none !important;
}

.master-layout-fragment .portlet-content-editable {
  position: relative;
}

/* -- 4. Stacking: hovered/active widget wins over its neighbours ---------- *
 * The carousel banner is full-bleed, so an adjacent widget could paint over
 * the toolbar of the one being edited.
 *
 * GATING: every lift below is gated on `:has(.portlet-topper)`. portlet.ftl
 * only emits `.portlet-topper` when the user actually has configuration icons
 * or title menus, so the gate matches exactly the admin/edit-mode case this
 * section exists for - and never a regular user's page. These rules used to be
 * unscoped, so ANY widget that was hovered, focused, or merely contained an
 * element with `aria-expanded="true"` (Bootstrap tabs and accordions set it)
 * was lifted to z-index 3000/4000. That out-ranked the Liferay/YUI dialog
 * layer (mask + dialog at ~1135) and let page content paint over open modals -
 * e.g. Settings > Company relationships covering its own Success dialog.
 *
 * MAGNITUDES: the old 3000/4000 values existed to beat the carousel ADT's
 * `z-index: 1000` overlays. Section 1 above now confines those inside the
 * carousel's own stacking context (`isolation: isolate; z-index: 0`), so a
 * two-digit scale is enough to beat a neighbouring widget - and can never
 * reach the dialog layer even if a gate misfires.                            */
.portlet-boundary {
  /* `position: relative` with `z-index: auto` does NOT create a stacking
     context, so on its own this cannot affect dialogs. */
  position: relative;
}

.portlet-boundary:has(.portlet-topper):hover,
.portlet-boundary:has(.portlet-topper):focus-within {
  z-index: 30;
}

/* -- 5. Never clip an open dropdown -------------------------------------- *
 * Scoped deliberately: a blanket `overflow: visible !important` on .portlet /
 * .portlet-content-editable broke components that rely on clipping (the
 * sign-in / sign-out cards and modal bodies), so it is applied only to the
 * widget boundary, and only while a menu is actually open.
 *
 * The menu selectors are anchored to the widget chrome (.portlet-topper /
 * .portlet-header). A bare `:has(.dropdown-menu.show)` or
 * `:has([aria-expanded="true"])` also matches ordinary page content, which is
 * what pinned the Company relationships widget above the Success dialog.     */
.portlet-boundary:has(.portlet-topper .dropdown-menu.show),
.portlet-boundary:has(.portlet-topper [aria-expanded=true]),
.portlet-boundary:has(.portlet-content-editable > .portlet-header .dropdown-menu.show),
.portlet-boundary:has(.portlet-content-editable > .portlet-header [aria-expanded=true]) {
  overflow: visible !important;
  z-index: 31;
}

.portlet-boundary:has(.portlet-topper .dropdown-menu.show) > .portlet,
.portlet-boundary:has(.portlet-topper [aria-expanded=true]) > .portlet,
.portlet-boundary:has(.portlet-content-editable > .portlet-header .dropdown-menu.show) > .portlet,
.portlet-boundary:has(.portlet-content-editable > .portlet-header [aria-expanded=true]) > .portlet {
  overflow: visible !important;
}

/* -- 6. Open dropdown must paint above the carousel ----------------------- *
 * The carousel widget is full-bleed and usually sits AFTER the widget being
 * edited in the DOM, so with equal (auto) stacking it always won. Pinning the
 * carousel boundary to `z-index: 0` and lifting the active widget above it
 * makes the outcome independent of document order.                           */
.portlet-boundary:has(.carouselExampleIndicators),
.portlet-boundary:has(#carouselExampleIndicators),
.portlet-boundary:has(.carousel-inner) {
  z-index: 0;
}

/* Portal-level menu: Liferay renders this as a direct child of <body>, so it
 * escapes the topper's stacking context and competes with dialogs directly.
 * Bootstrap's own dropdown layer (1000) keeps it above page content and below
 * the ~1135 dialog layer. */
.portlet-options-dropdown,
.dropdown-menu.portlet-options-dropdown,
body > .dropdown-menu.portlet-options-dropdown {
  z-index: 1000 !important;
}

/* These live INSIDE .portlet-topper, which is a stacking context of its own
 * (position: relative + z-index: 20), so the value is clamped within the
 * topper and cannot escape over a dialog. Left as-is deliberately. */
.portlet-topper .dropdown-menu,
.portlet-topper-toolbar .dropdown-menu,
.portlet-title-menu .dropdown-menu,
.portlet-content-editable > .portlet-header .dropdown-menu,
.portlet-content-editable > .portlet-header .autofit-section .dropdown-menu {
  z-index: 5000 !important;
}

/* The widget whose menu is open must out-rank the carousel boundary. */
.portlet-boundary:has(.portlet-topper .dropdown-menu.show),
.portlet-boundary:has(.portlet-topper [aria-expanded=true]) {
  z-index: 40 !important;
}

.portlet-topper:has([aria-expanded=true]) {
  z-index: 41 !important;
}

/* NOTE: the previous `:has()`-free fallback
 *     .portlet-boundary:focus-within { z-index: 4000; }
 * was removed. It was completely unscoped, so it fired on every form submit
 * and was the main reason dialogs ended up behind page content. `:has()` has
 * been baseline since Firefox 121 (Dec 2023); in a browser without it these
 * gated rules are simply dropped, which degrades the admin-control lift but
 * leaves modals working correctly.                                           */
/* =========================================================================
 * Opt-out: contexts that must NOT get the admin-control treatment
 * -------------------------------------------------------------------------
 * The sign-in / sign-out screens centre the login card with flexbox
 * (`#portlet_loginPortlet { display:flex; align-items:center; }`), and modal
 * bodies rely on their own overflow. Forcing an always-visible topper/header
 * row inside them added a stray flex child and broke the popup layout.
 * ========================================================================= */
.bodyContent.sign-in-bg .portlet-topper,
.bodyContent.sign-in-bg-external .portlet-topper,
#portlet_loginPortlet .portlet-topper,
.modal .portlet-topper,
.modal-dialog .portlet-topper,
.modal-content .portlet-topper {
  display: none !important;
}

.bodyContent.sign-in-bg .portlet-content-editable > .portlet-header,
.bodyContent.sign-in-bg-external .portlet-content-editable > .portlet-header,
#portlet_loginPortlet .portlet-content-editable > .portlet-header,
.modal .portlet-content-editable > .portlet-header,
.modal-dialog .portlet-content-editable > .portlet-header,
.modal-content .portlet-content-editable > .portlet-header {
  display: none !important;
}

/* Restore native stacking/clipping inside dialogs. */
.modal,
.modal-dialog,
.modal-content,
.modal-body {
  overflow: revert;
}

.modal .portlet-boundary,
.modal-dialog .portlet-boundary,
.modal-content .portlet-boundary {
  position: static;
  z-index: auto;
}

.internal-bg .card-body_X {
  background: #f7f7f7 !important;
}

/* Card surface */
.internal-bg .recentlyContainer .recentlyInnerContainer .card {
  background-color: #F7F7F7;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.25s ease;
}

/* Hover lift */
.internal-bg .recentlyContainer .recentlyInnerContainer .card:hover {
  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.12);
}

/* Body Color */
.internal-bg .recentlyContainer .recentlyInnerContainer .card .card-body {
  background: #F7F7F7;
}

/* Vertical spacing. */
@media screen and (min-width: 768px) {
  .internal-bg .recentlyContainer .recentlyInnerContainer {
    row-gap: 40px;
    margin-bottom: 40px;
  }
  .internal-bg .recentlyContainer .recentlyInnerContainer:last-child {
    margin-bottom: 0;
  }
  .internal-bg .recentlyContainer .recentlyInnerContainer > [class*=col-] > div,
  .internal-bg .recentlyContainer .recentlyInnerContainer > [class*=col-] .card {
    height: 100%;
  }
}
/* Aspect-ratio preservation. */
.internal-bg .recentlyContainer .recentlyInnerContainer .card .card-hero {
  position: relative;
  height: auto;
  aspect-ratio: 16/9;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  flex-shrink: 0;
}

.internal-bg .recentlyContainer .recentlyInnerContainer .card .card-hero-empty {
  background-color: #F2F4F5;
}

.internal-bg .recentlyContainer .recentlyInnerContainer .card .card-hero-empty .noneimage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.internal-bg .recentlyContainer .recentlyInnerContainer .card > img {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  object-position: center;
  display: block;
}

/*# sourceMappingURL=main.css.map */
/*# sourceMappingURL=main.css.map */