@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%;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  z-index: 100;
  background: #FFFFFF;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  max-height: 240px;
  overflow-y: auto;
}

.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 pinned to the top of the open menu ---------------------- *
 * 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. It lives INSIDE the scrolling <ul> as an <li>, so
 * `position: sticky` is what keeps it in view while the options scroll
 * underneath — no extra wrapper element.
 *
 * `top: 0` paired with the menu's `padding-top: 0` below is deliberate, and is
 * what makes this work in every context. Cancelling the padding with a
 * negative offset instead (`top: -4px`) only holds while the menu padding IS
 * 4px — components/login.css sets `padding: 6px 0` on the support popup's
 * menu, which would leave a 2px sliver of options scrolling into view above
 * the pinned field, and it also makes the row jump by the padding amount on
 * the first scroll. Zeroing the padding removes the variable entirely.
 *
 * 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__menu` scrolls (`overflow-y: auto`,
 * which forces `overflow-x` to compute to `auto` as well), so anything past the
 * padding box would be clipped.                                               */
.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, and no top
 * padding so the sticky row above can sit flush from the start. */
.hpe-select .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);
  /* ---------- 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;
}

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

.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: 12px;
}
.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: url("../images/sign-in-bg.svg");
}

.bodyContent.sign-in-bg-external {
  background-image: 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;
}
#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-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;
  /* 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 .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: #333;
  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: #333;
  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: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:hover input ~ .checkmark {
  border-color: #B1B9BE;
  box-shadow: 0 0 0 2px #FFF, 0 0 0 4px #292D3A;
}
.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 .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 {
  border-color: #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: #444444;
  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: 400;
}
.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;
}
.articleContainer .articleInnerContainer .articlePadding .articleContent .articleMediaContainer video,
.articleContainer .articleInnerContainer .articlePadding .articleContent .articleMediaContainer iframe {
  display: block;
  width: 100%;
  height: 100%;
}
.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: 24px;
}
.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 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;
}
.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;
}
.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;
  height: 48px;
  border: none !important;
  background-color: #292D3A !important;
  color: #FFFFFF;
  font-size: 18px;
  font-weight: 600;
  border-radius: 28px;
  margin: 0 !important;
  padding: 9px 24px !important;
  font-family: HPE Graphik !important;
  width: auto !important;
  min-width: 92px;
}

.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);
  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;
  height: 48px;
  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-position: right 12px top 12px;
}

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

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

#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: 15px;
}

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

.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: 300;
  color: #aaa;
  margin: 0 !important;
  border: 2px solid #ddd;
  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: 30px !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;
}

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

.articleContainer .articleInnerContainer .articlePadding .articleContent .articleMediaText a:link {
  color: #333333 !important;
  text-decoration: underline !important;
}

.articleContainer .articleInnerContainer .articlePadding .articleContent .articleMediaText a:hover, .articleContainer .articleInnerContainer .articlePadding .articleContent .articleMediaText a:active, .articleContainer .articleInnerContainer .articlePadding .articleContent .articleMediaText a:visited, .articleContainer .articleInnerContainer .articlePadding .articleContent .articleMediaText a:focus {
  color: #333333 !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;
}

#notification-configModal .modal-content {
  border-radius: 12px;
  text-align: left;
  width: 116%;
  max-width: 590px;
}

#notification-configModal .modal-footer {
  padding: 0 35px 35px;
  border: 0px;
  justify-content: flex-end;
}

#notification-configModal .cancelButton {
  border: 0;
  color: #292d3a;
  background-color: #f7f7f7;
  font-family: HPE Graphik;
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  text-align: center;
  padding: 7px 35px;
  margin: 20px 20px 0 0;
  border-radius: 28px;
  height: 48px;
  outline: none;
}

#notification-configModal .modal-body {
  padding: 0 35px;
  border: 0 !important;
}

#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: #333;
  font-family: HPE Graphik;
  font-size: 24px;
  font-weight: 300;
  line-height: 30px;
  margin-top: 5px;
  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: #00E0AF;
}

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: 20px !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;
  margin-bottom: 18px;
}

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

.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-background-primary-strong);
}

/* 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(#FFFFFF 0 6px, transparent 6px) !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;
}

: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-focus);
  box-shadow: 0 0 0 1px var(--hpe-color-focus);
  outline: none;
}

/* 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 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;
}

/* ---------------------------------------------------------
   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 on the primary-strong token.

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

.eServiceContent .getSupprotTitle:after {
  background-color: var(--hpe-color-background-primary-strong, #068667) !important;
  height: 4px !important;
  width: 64px !important;
  border-radius: 2px !important;
}

.eServiceContent .getSupprotShortDescription > p,
.eServiceContent .getSupprotMainDescription > p {
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
  color: var(--hpe-color-text-default, #3E4550) !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" 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: 48px !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;
  margin-bottom: 24px;
  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;
  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;
}

.prpModal .modal-footer {
  text-align: left;
}

.prpModal .modal-heading h3 {
  font-size: 28px;
  font-weight: 600;
  font-family: "HPE Graphik";
  line-height: 54px;
  color: #292D3A;
  margin: 0 0 12px;
}

.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 {
  /* 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.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: 300;
  color: #3E4550;
  margin: 0 !important;
  border: 1px solid #B1B9BE;
  border-radius: 8px;
  padding: 0 40px 0 10px;
  height: 36px;
}
.customDataTableContainer .dataTables_filter input:focus {
  outline: 0;
}
.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;
}
.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: 10px 18px 10px 10px;
  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: 10px 18px 10px 10px;
  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 {
  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#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;
}

/* 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 */
@media (max-height: 520px) {
  .prpModal .modal-content {
    max-height: 100px !important;
  }
}
/* 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;
}

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

#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-footer,
.settings-warningModal.modal-dialog .modal-footer, .task-warningModal.modal-dialog .modal-footer {
  padding: 0 35px 35px;
  border: 0px;
}

.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-footer button,
.settings-warningModal.modal-dialog .modal-footer button, .task-warningModal.modal-dialog .modal-footer button {
  color: #292D3a;
  font-family: HPE Graphik;
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  text-align: center;
  padding: 7px 35px;
  margin: 20px 20px 0 0;
  border-radius: 28px;
  outline: none;
  min-width: 110px;
  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: 0 35px;
  border: 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: #292d3a;
  font-family: HPE Graphik;
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  margin-top: 5px;
  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;
  padding: 14px 0;
  /*  padding: 25px 0; */
  cursor: pointer;
}

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

.manage-user-edit-v2 .modal-title {
  float: left !important;
  text-align: left !important;
  font-family: "HPE Graphik" !important;
  font-style: normal !important;
  font-weight: 600 !important;
  font-size: 24px !important;
  line-height: 54px !important;
  padding: 10px 0 0 16px !important;
  color: #292D3A !important;
}

.manage-user-edit-v2 .modal-header {
  border: 0px !important;
}

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

.global-save-cancel-personal-button #inactiveGlobal a.global-link-deactivate-text {
  color: #CC1F1A;
  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%;
}

.global-save-cancel-personal-button #manage-user-cancel, .global-save-cancel-personal-button #manage-user-save {
  font-size: 16px;
  padding: 0px 24px !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 {
  border-bottom: 0;
  margin-bottom: 0px;
}

.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;
  width: 100%;
  text-align: center;
  padding: 9px 8px;
}

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

.task-container .customDataTableContainer .task-date {
  min-width: 90px;
  max-width: 90px;
}

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

/* 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;
}

#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);
  }
  #MHMGUserdata .MHMGuserheader {
    padding-left: 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;
}

#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%;
}

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

/* 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;
  padding-right: 4px;
  /* 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: 2px 12px !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;
  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 a {
  text-decoration: none !important;
  padding: 4px 16px;
  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, 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;
}

.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, #ppa-access-modal .task-ppa-approval-msg {
  font-weight: 600;
  font-size: 18px;
}

.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: 24px;
  font-weight: 300;
  line-height: 30px;
}

table#taskNewPartyToolsTable {
  border-top: 2px solid #ddd;
  margin-top: 20px;
  border-bottom: none !important;
}

#newPartRequestModal .modal-heading {
  margin-bottom: 0;
}

#newPartRequestModal .new-party-req-details {
  margin-top: 20px;
}

.prpModal#newPartRequestModal .modalFooter button {
  float: right;
}

.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: 24px;
  font-weight: 300;
  color: #333333;
  padding: 12px;
}

span#task-requestor-email {
  font-size: 18px;
  font-weight: 400;
  color: #666666;
  padding: 5px 0;
}

.task-requestor-details .col-md-11 .col-md-12 {
  margin-top: 5px;
}

.row.task-request-details-header {
  padding: 15px 12px;
  border: 2px solid #ddd;
  border-left: 0;
  border-right: 0;
  margin: 0;
  font-size: 16px;
  color: #292D3A;
  font-weight: 400;
}

.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;
  margin: 30px 0;
  color: #292d3a;
  font-size: 28px;
  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;
}

.opr-iframe-warningModal.modal-dialog .modal-footer button.primaryButton, .settings-warningModal.modal-dialog .modal-footer button.primaryButton {
  color: #fff;
  margin: 20px 20px 0 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;
}

div#manage-users-userToolsDiv {
  border-top: 2px solid #ddd;
}

.span.brt-name {
  padding: 10px 16px;
  display: inline-block;
}

h4.tool-confirmation-desc {
  font-family: HPE Graphik;
  font-size: 24px;
  font-weight: 300;
  line-height: 30px;
  letter-spacing: 0px;
  color: #666666;
}

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: 400;
  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 20px;
}

div#toolSaveConfirmationModal .prpModal .modalFooter {
  float: right;
  border-top: 0;
}

div#toolSaveConfirmationModal .prpModal .modalFooter button {
  min-width: 160px;
}

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

.manage-user-tools-container .opt-srch {
  padding: 0 0 40px 0;
}

.manage-user-tools-container .opt-srch .opt-search-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

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

.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;
  margin-top: -24px;
}

.customDataTableContainer table#linkedAccountsListTable.dataTable thead th, .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;
  min-width: 150px;
}

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

#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: 24px;
  font-weight: 300;
  color: #666666;
}

#contractAccessRequestModal.prpModal .modal-heading {
  margin-bottom: 24px;
}

#contractAccessRequestModal.prpModal .modal-heading h3 {
  margin-bottom: 24px;
}

#contractAccessRequestModal .task-request-details {
  padding: 10px 5px 0;
}

#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;
  min-width: 150px;
  padding: 8px 24px !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 {
  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: 7px !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;
}

.ppa-filter-group.ppa-filter-trash {
  justify-content: flex-end;
}

.ppa-filter-group .clearPPAFilter {
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  top: auto;
  right: auto;
  transform: none;
  padding-bottom: 8px;
}

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

div#editUserDialog {
  height: 100% !important;
  max-height: 90% !important;
}

iframe#editUserDialog_iframe_ {
  height: 100% !important;
}

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: -4px;
  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;
}

/* ==========================================================================
   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;
}

/* 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 native, drag-and-drop Gridster where it already fits (>=1620px).
 * Below that, override its absolute positioning with a fluid CSS grid so the
 * tiles reflow instead of being clipped. (Drag/drop relies on the absolute
 * layout, so it stays active only at the wide widths where Gridster fits.) */
@media screen and (max-width: 1619px) {
  #dashboard-home .gridster > ul {
    width: 100% !important;
    height: auto !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 20px !important;
    padding: 0 !important;
  }
  #dashboard-home .gridster > ul > li {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
    min-height: 402px;
    margin: 0 !important;
  }
}
@media screen and (max-width: 1100px) {
  #dashboard-home .gridster > ul {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media screen and (max-width: 620px) {
  #dashboard-home .gridster > ul {
    grid-template-columns: 1fr !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;
  }
}
.bodyContent.internal-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;
}

@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 !important;
}

.browse-hpe-solutions-prp .search-explorer-input-box-container > input.search-explorer-input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* 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: transparent with a 1px default border
 * at rest, primary-strong (#068667) fill with a white dot when selected. The
 * native control used the decorative brand green (#01A982) as accent-color. */
.browse-hpe-solutions-prp .search-explorer-type-radio-option input[type=radio] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  margin: 0 !important;
  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;
  background-image: radial-gradient(#FFFFFF 0 5px, transparent 5px) !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 !important;
  top: -23px !important;
  left: -1px !important;
  width: auto !important;
  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 !important;
  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 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 24px !important;
  text-align: center !important;
  text-decoration: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: background-color 0.1s ease-in-out, border-color 0.1s ease-in-out !important;
}

/* 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;
}

.browse-hpe-solutions-prp .search-explorer-market-select {
  background-color: transparent !important;
  border: 1px solid #B1B9BE !important;
  border-radius: 8px !important;
  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;
}

.browse-hpe-solutions-prp .search-explorer-market-select:hover {
  border-color: #7A8288 !important;
}

.browse-hpe-solutions-prp .search-explorer-market-select-container:focus-within .search-explorer-market-select {
  border-color: #292D3A !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;
}

.browse-hpe-solutions-prp .search-explorer-market-dropdown-options {
  /* Grey surface, not white: the menu sat as a white patch against the widget's
   * #F7F7F7 panel and the transparent controls around it. */
  background-color: #F7F7F7 !important;
  border: none !important;
  border-radius: 6px !important;
  box-shadow: rgba(0, 0, 0, 0.12) 0 6px 12px !important;
  /* 4px here + 8px on each option puts the option label on the same left
   * edge as the trigger's own value (12px + the field's 1px border). They
   * were 18px apart, so the selected value and the list it came from did
   * not line up. */
  padding: 4px !important;
  box-sizing: border-box !important;
  /* Geometry: the widget positions this menu with `top: calc(100% + 7px)`,
   * `left: 0` and an explicit width, all resolved against
   * .search-explorer-market-select-container - which carries 6px 12px of
   * padding. The menu therefore spanned the container's padding box and
   * came out 26px wider than the field it belongs to, overhanging it by
   * 13px on each side, and opened a 13px gap below it (6px of container
   * padding + the 7px offset).
   *
   * Anchored on the RIGHT rather than the left. Pinning the left edge and
   * letting the menu grow rightward pushed it off-screen for longer market
   * names (a 35-character name measured 301px against a 151px field and ran
   * past the viewport), because this is the right-most control in the row.
   * Growing leftward from the field's right edge keeps every width on
   * screen. `min-width` keeps the menu at least as wide as the field, so
   * for names that already fit both edges still line up exactly with it. */
  left: auto !important;
  right: 12px !important;
  width: max-content !important;
  min-width: calc(100% - 24px) !important;
  max-width: calc(100vw - 32px) !important;
  top: calc(100% - 2px) !important;
}

.browse-hpe-solutions-prp .search-explorer-market-dropdown-option {
  box-sizing: border-box !important;
  min-height: 36px !important;
  align-items: center !important;
  padding: 6px 8px !important;
  margin: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  background-color: transparent !important;
  cursor: pointer !important;
}

.browse-hpe-solutions-prp .search-explorer-market-dropdown-option:hover {
  background-color: rgba(0, 0, 0, 0.04) !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 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  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: 400 !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 row is a single line down to ~1440px and wraps from ~1280px, where the
 * Market validation message - `position: absolute; bottom: -40%` - starts
 * hanging into the row gap and collided with the "Solution" label on the line
 * below. In flow it simply sits under the Market field and lets that column
 * grow. Scoped to the wrapping widths so the single-line desktop layout keeps
 * the message in the panel's padding exactly as before. */
@media screen and (max-width: 1439px) {
  .browse-hpe-solutions-prp .search-explorer-market-error {
    position: static !important;
    bottom: auto !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 {
  /* Heading: ITG 24/30 weight 300 #333333. stg3 rendered 28/34 weight 600
     #292D3A, which also made the block 68px tall instead of 30px because the
     larger type wrapped onto a second line. */
  /* 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-header-text {
  font-size: 24px !important;
  font-weight: 300 !important;
  line-height: 30px !important;
  color: #333333 !important;
}
#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 */