/* ------------------------------------------------------------ START GENERAL ------------------------------------------------------------ */

.bring-to-middle {
  justify-content: center;
}

.button1,
.button2,
.btn-primary {
  padding: .75rem 2rem !important;
}

html {
  scroll-behavior: smooth;
}


/* ------ Hide Nav Menu ------ */
ul.nav.navbar-nav.weblinks {
  display: none;
}

/* ------------------------------------------------------------ END GENERAL ------------------------------------------------------------ */



/* ------------------------------------------------------------ START MERCAHNT FEEDBACK PAGE ------------------------------------------------------------ */

legend.section-title h3 {
  font-size: 18px;
  line-height: 1.5em;
}

.crmEntityFormView,
.entitylist,
.modal-content,
.popover-content {
  background-color: #fef7ee00;
  color: #171717;
  border: none !important;
}

.crmEntityFormView .cell {
  padding: 0;
}

.form-control {
  color: #171717 !important;
  border: 1px solid #ea580c;
  border-radius: 30px;
  padding: 20px 20px !important;
}

.form-control:focus {
  border-color: #ea580c;
  outline: 0;
  box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(234 88 12 / 60%);
}

fieldset[aria-label="Was the issue you've reported resolved on the first contact with our PayNuts customer support team?"] {
  display: inline-flex;
  align-items: center;
}

fieldset[aria-label="Case ID"] {
  display: none;
}

.crmEntityFormView .actions {
  border-top: none;
  margin: 0 0 40px 0;
  padding: 0;
}

div#PcfControl_b690920e610b4b929339e00187f18f86 {
  float: right;
}

/* Toggle = Yes */
.pill-126 {
  background-color: #00B46E !important;
  padding: 12px 3px !important;
  border-radius: 20px !important;
  width: 50px !important;
}

.thumb-127 {
  width: 20px !important;
  height: 20px !important;
}

/* Toggle = No */
.pill-129,
.pill-112 {
  padding: 12px 3px !important;
  border-radius: 20px !important;
  width: 50px !important;
}

.thumb-130,
.thumb-113 {
  width: 20px !important;
  height: 20px !important;
}

/* Toggle Labels */
.text-128, .text-115 {
  font-family: 'Inter', sans-serif;
  margin-top: 4px !important;
  font-size: 12px;
  font-weight: 600 !important;
}

.Fic\.EnergyEfficiencyRatingControl .energy-class {
  display: none;
}

.Fic\.EnergyEfficiencyRatingControl .slider,
.Fic\.EnergyEfficiencyRatingControl .slider:hover {
  opacity: 1 !important;
}


input[type="range"],
.form-range,
.slider {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 100% !important;
  height: 6px !important;
  border-radius: 9999px !important;
  outline: none !important;
  box-shadow: none !important;
  transition: background .15s ease !important;
}

/* WebKit track transparent so our background shows */
input[type="range"]::-webkit-slider-runnable-track,
.form-range::-webkit-slider-runnable-track,
.slider::-webkit-slider-runnable-track {
  height: 6px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 9999px !important;
}

/* Thumb — orange small dot */
input[type="range"]::-webkit-slider-thumb,
.form-range::-webkit-slider-thumb,
.slider::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  height: 25px !important;
  width: 25px !important;
  border-radius: 50% !important;
  background: #E85A24 !important;
  border: none !important;
  margin-top: -10px !important;
  /* center on 6px track */
  cursor: pointer !important;
}

/* Firefox track/progress */
input[type="range"]::-moz-range-track,
.form-range::-moz-range-track,
.slider::-moz-range-track {
  height: 6px !important;
  background: #D7DBDF !important;
  border-radius: 9999px !important;
  border: none !important;
}

input[type="range"]::-moz-range-progress,
.form-range::-moz-range-progress,
.slider::-moz-range-progress {
  height: 6px !important;
  background: #E85A24 !important;
  border-radius: 9999px !important;
  border: none !important;
}

/* Firefox thumb */
input[type="range"]::-moz-range-thumb,
.form-range::-moz-range-thumb,
.slider::-moz-range-thumb {
  height: 14px !important;
  width: 14px !important;
  border-radius: 50% !important;
  background: #E85A24 !important;
  border: none !important;
  cursor: pointer !important;
}

/* Optional focus halo */
input[type="range"]:focus-visible {
  box-shadow: 0 0 0 4px rgba(232, 90, 36, .18) !important;
  border-radius: 12px !important;
}

/* Slider tag design */
.slider-wrap {
  position: relative;
  padding: 22px 0 18px;
}

/* fixed edge labels */
.slider-label {
  position: absolute;
  top: 0;
  font-size: 12px;
  line-height: 1;
  color: #979797;
  user-select: none;
  pointer-events: none;
}

.slider-label.left {
  left: 0;
}

.slider-label.right {
  right: 0;
  color: #00B46E;
}

/* labels row under the slider */
.slider-scale {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin-top: 8px;
  user-select: none;
  pointer-events: none;
}

.slider-scale span {
  color: #8a8a8a;
  transition: color .18s ease, transform .18s ease;
}

.slider-scale span.past {
  color: #E85A24;
}

.slider-scale span.active {
  color: #E85A24;
  font-weight: 700;
  transform: translateY(-1px);
}

.slider-scale span.excellent-on {
  color: #00B46E;
  font-weight: 700;
  transform: translateY(-1px);
}

/* emphasize ends */
/* Bad */
.slider-scale span:first-child {
  /* color: #E85A24;
  font-weight: 600; */
}

/* Excellent */
.slider-scale span:last-child {
  /* color: #00B46E;
  font-weight: 600; */
}

/* floating tag that follows the thumb */
.slider-tag {
  position: absolute;
  top: -25px;
  transform: translateX(-50%);
  background: #ffffff;
  border: 1px solid #E85A24;
  color: #E85A24;
  font-weight: 700;
  font-size: 14px;
  padding: 7px 20px 6px 20px;
  border-radius: 9999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
  white-space: nowrap;
  pointer-events: none;
  font-family: 'Inter', sans-serif;
}

/* tiny pointer */
.slider-tag::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -5px;
  width: 8px;
  height: 8px;
  background: #fff;
  border-left: 1px solid #E85A24;
  border-bottom: 1px solid #E85A24;
  transform-origin: center;
  transform: translateX(-50%) rotate(316deg);
}


/* ------------------------------------------------------------ END MERCAHNT FEEDBACK PAGE ------------------------------------------------------------ */



/* ------------------------------------------------------------ START STATUS PAGE ------------------------------------------------------------ */

/* ---------------------------- Start Status Legend ---------------------------- */

.status-bar {
  display: flex;
  gap: 3em;
  align-items: center;
  font-family: 'Inter', 'Arial', sans-serif;
  font-size: 14px;
  flex-wrap: wrap;
  /* Optional: wrap on small screens */
  text-align: center;
  justify-content: center;
}

.status-label::before {
  font-family: "FontAwesome";
  margin-right: 8px;
}

td[data-attribute="statuscode"]::after {
  font-family: "FontAwesome";
  margin-right: 8px;
  font-size: 20px;
}

.status-icon {
  font-family: "FontAwesome";
  font-size: 16px;
  text-align: center;
}

.status-label.operational::before,
td[data-attribute="statuscode"][aria-label="Operational"]::after {
  color: #16a34a;
  content: "\f00c";
  /* check */
}

.status-label.degraded::before,
td[data-attribute="statuscode"][aria-label="Degraded Performance"]::after {
  color: #f59e0b;
  content: "\f146";
  /* minus-circle */
}

.status-label.partial::before,
td[data-attribute="statuscode"][aria-label="Partial Outage"]::after {
  color: #eab308;
  content: "\f071";
  /* exclamation-triangle */
}

.status-label.major::before,
td[data-attribute="statuscode"][aria-label="Major Outage"]::after {
  color: #dc2626;
  content: "\f00d";
  /* times */
}

.status-label.maintenance::before,
td[data-attribute="statuscode"][aria-label="Maintenance"]::after {
  color: #405eff;
  content: "\f0ad";
  /* wrench */
}


/* ------- Hide Status text on table ------- */

.systems-list-table td[aria-label="Operational"],
.systems-list-table td[aria-label="Degraded Performance"],
.systems-list-table td[aria-label="Partial Outage"],
.systems-list-table td[aria-label="Major Outage"],
.systems-list-table td[aria-label="Maintenance"] {
  color: transparent !important;
  text-align: right;
}


/* ---------------------------- End Status Legend ---------------------------- */


/* ---------------------------- Start Status Table ---------------------------- */

.table-striped,
.table-info,
.table-striped>tbody>tr:nth-of-type(odd)>*,
.dropdown-menu,
.datepicker button {
  color: #171717;
  font-family: 'Inter', 'Arial', sans-serif;
  font-size: 15px;
  font-weight: bold;
}

.systems-list-table .table>:not(caption)>*>* {
  padding: 15px 20px;
}

.systems-list-table .table {
  --bs-table-color: var(--bs-body-color);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--bs-border-color);
  --bs-table-accent-bg: transparent;
  --bs-table-striped-color: var(--bs-body-color);
  --bs-table-striped-bg: rgb(232 90 36 / 0%);
  --bs-table-active-color: var(--bs-body-color);
  --bs-table-active-bg: rgba(0, 0, 0, 0.1);
  --bs-table-hover-color: var(--bs-body-color);
  --bs-table-hover-bg: rgba(0, 0, 0, 0.075);
  width: 100%;
  margin-bottom: 1rem;
  color: var(--bs-table-color);
  vertical-align: middle;
  border-color: #dee2e6;
}

.systems-list-table thead,
.systems-list-table .table>thead>tr>th:nth-child(3),
.systems-list-table .table-responsive>.table>tbody>tr>td:nth-child(3) {
  display: none;
}

.entitylist {
  border: none;
}

.systems-list-table tr {
  border-color: #d5d5d5;
  border-style: solid;
  border-width: thin;
}

.systems-list-table {
  margin-bottom: 20px !important;
}

.list-table-left {
  padding-right: 0px !important;
}

.list-table-right {
  padding-left: 0px !important;
}

/* ---------------------------- End Status Table ---------------------------- */




/* ---------------------------- Start Overview ---------------------------- */

.alert {
  padding: 12px 20px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 8px;
  margin: 10px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.alert i {
  font-size: 18px;
  margin-right: 10px;
}

.alert.alert-operational h5,
.alert.alert-partial h5,
.alert.alert-major h5 {
  color: #ffffff !important;
}

.alert.alert-degraded h5 {
  color: black !important;
}

/* Alert Types */
.alert-operational {
  background-color: #16a34a;
  /* Green */
}

.alert-degraded {
  background-color: #f59e0b;
  /* Yellow */
  color: black;
}

.alert-partial {
  background-color: #eab308;
  /* Orange */
}

.alert-major {
  background-color: #dc2626;
  /* Red */
}

/* ---------------------------- End Overview ---------------------------- */




/* ---------------------------- Start Bulletin Points ---------------------------- */


.bulletin-point thead {
  display: none;
}

.bulletin-point .table {
  --bs-table-color: var(--bs-body-color);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--bs-border-color);
  --bs-table-accent-bg: transparent;
  --bs-table-striped-color: var(--bs-body-color);
  --bs-table-striped-bg: rgb(232 90 36 / 0%);
  --bs-table-active-color: var(--bs-body-color);
  --bs-table-active-bg: rgba(0, 0, 0, 0.1);
  --bs-table-hover-color: var(--bs-body-color);
  --bs-table-hover-bg: rgba(0, 0, 0, 0.075);
  width: 100%;
  margin-bottom: 1rem;
  color: var(--bs-table-color);
  vertical-align: middle;
  border-color: transparent;
}


.bulletin-point table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.bulletin-point tr {
  border-color: transparent;
  border-style: none;
  border-width: 0;
}

.bulletin-point table tr {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.bulletin-point table td {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}


/*---- border bottom & spacing on the last td ----*/
.bulletin-point .table-responsive>.table>tbody>tr>td:nth-last-child(1) {
  border-bottom: 2px solid #dee2e6;
  margin-bottom: 20px;
  padding-bottom: 20px;
}

.bulletin-point .table-responsive>.table>tbody>tr>td:nth-last-child(1),
.bulletin-point .table-responsive>.table>tbody>tr>td:nth-child(3) {
  font-size: 14px;
  font-weight: normal;
  color: #a3a3a3;
}

td[data-attribute="createdon"]:before {
  content: 'Created: ';
}

td[data-attribute="modifiedon"]:before {
  content: 'Last updated: ';
}

/*---- Font Style for System Status ----*/
.bulletin-point .table-responsive>.table>tbody>tr>td:nth-child(1) {
  font-size: 22px;
}

/*---- Font Style for System ----*/
.bulletin-point .table-responsive>.table>tbody>tr>td:nth-child(2) {
  font-size: 12px;
  padding: 10px 13px 9px 13px;
  border-radius: 15px;
  text-transform: uppercase;
  font-weight: bold;
  margin-left: 5px;
  letter-spacing: 0.05em;
  line-height: normal;
  width: fit-content;
  color: #171717 !important;
  background-color: #d0d0d0;
}

/*---- Font Style for Title ----*/
.bulletin-point .table-responsive>.table>tbody>tr>td:nth-child(4) {
  font-size: 18px;
  padding-bottom: 0px;
  color: #ea580c;
}

/*---- Font Style for Affected Date ----*/
.bulletin-point .table-responsive>.table>tbody>tr>td:nth-child(5) {
  font-weight: bold;
  padding-bottom: 0px;
}

td[data-attribute="new_affecteddate"]:before {
  content: 'Affected Date: ';
}

/*---- Font Style for Description ----*/
.bulletin-point .table-responsive>.table>tbody>tr>td:nth-child(6) {
  font-weight: normal;
  padding-bottom: 0px;
}

.details-link {
  display: none;
  margin-top: 15px;
  margin-left: 15px;
  text-align: left;
}

/*---- Hide text when there are no Bulletin Points ----*/
.view-empty.message {
  display: none !important;
}

/* ---------------------------- End Bulletin Points ---------------------------- */

/* ------------------------------------------------------------ END STATUS PAGE ------------------------------------------------------------ */



/* ------------------------------------------------------------ START RESPONSIVENESS ------------------------------------------------------------ */

@media screen and (max-width: 768px) {

  .mob-image {
    width: 15% !important;
  }  

  div#PcfControl_b690920e610b4b929339e00187f18f86 {
    float: none !important;
  }

  .crmEntityFormView .tab .tab-column:last-child, .crmEntityFormView .tab fieldset:last-child, .crmEntityFormView .tab:last-child {
    margin-bottom: 10px !important;
  }

  .crmEntityFormView fieldset {
    margin-bottom: 0px !important;
  }

  .mob-no-space-below {
    margin-bottom: 0px !important;
  }

}

@media screen and (max-width: 1199px) {

  button.navbar-toggler.collapsed.custom-navbar-toggler {
    display: none;
  }

  /*--------------- Start Font Sizes ---------------*/

  h1,
  .h1,
  .profile-intro .table-striped tr td {
    font-size: 44px !important;
    line-height: 1em;
  }

  h1.siteTitle,
  .static-top.navbar-dark .navbar-brand a h1.siteTitle,
  .static-top.navbar-dark .navbar-brand a h1.siteTitle>span {
    font-size: 28px !important;
  }

  h2,
  .h2,
  .profile-view-with-card a.details-link.has-tooltip.launch-modal,
  .profile-view-no-card a.details-link.has-tooltip.launch-modal {
    font-size: 28px !important;
    line-height: 1em;
  }

  h3,.h3 {
    font-size: 24px !important;
    line-height: 1.3em
  }

  legend.section-title h3 {
    font-size: 18px !important;
  } 

  /*--------------- End Font Sizes ---------------*/


  /* ---------------------------- Start Status Table ---------------------------- */


  .systems-list-table {
    margin-bottom: 0px !important;
  }

  .list-table-left {
    padding-right: 15px !important;
    margin-bottom: -47px !important;
  }

  .list-table-right {
    padding-left: 15px !important;
  }

  /* ---------------------------- End Status Table ---------------------------- */


  /* ---------------------------- Start Status Legend ---------------------------- */

  .status-bar {
    display: grid;
    gap: 1em;
    text-align: left;
    justify-content: left;
    padding-left: 10px;
  }

  /* ---------------------------- End Status Legend ---------------------------- */


  /* ---------------------------- Start Bulletin Points ---------------------------- */

  .bulletin-point .entity-grid .view-grid>table {
    table-layout: fixed;
  }

  #system-alert-container:not(:has(.alert-operational[style*="display: flex"])) .details-link {
    display: block;
  }

  /* ---------------------------- Start Bulletin Points ---------------------------- */


}

/* ------------------------------------------------------------ END RESPONSIVENESS ------------------------------------------------------------ */