html #layers2 .lu-app,
html #layers2 .lu-body {
  font-family: "Gotham-Light", Helvetica, sans-serif;
}

html #layers2 .lu-app-main__body .modulesgarden-app-main-container .h4 {
  font-family: "Gotham-Medium", Helvetica, Arial, sans-serif;

  .product-details-tab-container & {
    text-align: start;
  }
}

html #layers2 .lu-widget:has(.custom-widget) {
  border-radius: 8px;
}

html #layers2 .lu-widget__top .lu-top__title {
  font-weight: 700;
  font-size: 14px !important;
}

/* Service Actions */
#serviceActions {
  flex-wrap: nowrap;
}

#serviceActions .lu-col-sm-20p {
  flex: 0 0 auto;
}

/* Tile & Widget Base */
html #layers2 .lu-tile,
html #layers2 .lu-widget {
  box-shadow: none;
}

html #layers2 .lu-tile:not(.lu-widget .lu-tile) {
  flex-direction: row;
  gap: 12px;
  border-radius: 8px;
  background: #f9fafb;
  color: #0071BC;
  justify-content: flex-start;
  padding: 12px 18px;
}

html #layers2 .lu-tile:hover:not(.lu-widget .lu-tile:hover) {
  background: #0071BC;
}

html #layers2 .lu-widget .lu-tile {
  flex-direction: column;
  gap: 20px;
  border-radius: 8px;
  background: #f9fafb;
  color: #0071BC;
}

html #layers2 .lu-widget .lu-tile:hover {
  background: #0071bc15;
  border: solid 2px #0071bc;
  transition: none;
}

html #layers2 .lu-tile:hover:not(.lu-widget .lu-tile:hover) .lu-i-c-6x,
html #layers2 .lu-tile:hover:not(.lu-widget .lu-tile:hover) .lu-tile__title {
  color: #fff;
}

html #layers2 .lu-tile--btn {
  font-size: 11px;
}

html #layers2 .lu-tile:not(.lu-widget .lu-tile) .lu-tile__title {
  margin-top: 0;
  font-size: 15px;
  color: #374151;
}

html #layers2 .lu-widget .lu-tile .lu-tile__title {
  margin: 0;
  font-size: 12px;
  font-weight: bold;
}

/* Tile Icon */
html #layers2 .lu-tile .lu-i-c-6x {
  width: auto;
  height: auto;
  min-width: 0;
  color: #0071BC;
}

html #layers2 .lu-tile:not(.lu-widget .lu-tile) img {
  display: none;
  height: 28px;
  width: auto;
}

html #layers2 .lu-widget .lu-tile img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

html #layers2 .lu-tile:has(img) .lu-i-c-6x::before {
  font-family: "Font Awesome 6 Pro";
  font-weight: 900;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: inherit;
}

#layers2 .lu-tile--btn .lu-tile__title {
  min-height: auto !important;
  font-size: 14px;
}

/* Icon Mapping */
.lu-tile:has(img[alt*="Start"]) .lu-i-c-6x::before {
  content: "\f04b";
}

.lu-tile:has(img[alt*="Reboot"]) .lu-i-c-6x::before {
  content: "\f01e";
}

.lu-tile:has(img[alt*="Stop"]) .lu-i-c-6x::before {
  content: "\f04d";
}

.lu-tile:has(img[alt*="Shut Down"]) .lu-i-c-6x::before {
  content: "\f011";
}

.lu-tile:has(img[alt*="Reconfigure Network"]) .lu-i-c-6x::before {
  content: "\f6ff";
}

.lu-tile:has(img[alt*="Backups"]) .lu-i-c-6x::before {
  content: "\f187";
}

.lu-tile:has(img[alt*="Backup Collection"]) .lu-i-c-6x::before {
  content: "\f468";
}

.lu-tile:has(img[alt*="Backup Jobs"]) .lu-i-c-6x::before {
  content: "\f274";
}

.lu-tile:has(img[alt*="Backup Schedules"]) .lu-i-c-6x::before {
  content: "\f017";
}

.lu-tile:has(img[alt*="Disks"]) .lu-i-c-6x::before {
  content: "\f0a0";
}

.lu-tile:has(img[alt*="Firewall Options"]) .lu-i-c-6x::before {
  content: "\f1de";
}

.lu-tile:has(img[alt*="Firewall"]) .lu-i-c-6x::before {
  content: "\f3ed";
}

.lu-tile:has(img[alt*="Graphs"]) .lu-i-c-6x::before {
  content: "\f201";
}

.lu-tile:has(img[alt*="Network"]) .lu-i-c-6x::before {
  content: "\f542";
}

.lu-tile:has(img[alt*="Console"]) .lu-i-c-6x::before {
  content: "\f120";
}

.lu-tile:has(img[alt*="Reinstallation"]) .lu-i-c-6x::before {
  content: "\f2f1";
}

.lu-tile:has(img[alt*="Resource Notifications"]) .lu-i-c-6x::before {
  content: "\f0f3";
}

.lu-tile:has(img[alt*="VM Power Tasks"]) .lu-i-c-6x::before {
  content: "\f233";
}

.lu-tile:has(img[alt*="Snapshots"]) .lu-i-c-6x::before {
  content: "\f030";
}

.lu-tile:has(img[alt*="Task History"]) .lu-i-c-6x::before {
  content: "\f1da";
}

.lu-tile:has(img[alt*="Server Monitoring"]) .lu-i-c-6x::before {
  content: "\f080";
}

.lu-tile:has(img[alt*="Change Password"]) .lu-i-c-6x::before {
  content: "\f023";
}

.lu-tile:has(img[alt*="Delete Virtual Machine"]) .lu-i-c-6x::before {
  content: "\f2ed";
}

.lu-tile:has(img[alt*="Reinstall"]) .lu-i-c-6x::before {
  content: "\f2f1";
}

#layers2 .lu-widget__body.custom-widget,
#layers2 .lu-widget__body.custom-widget .lu-vtabs__sidebar {
  min-width: 220px;
  padding: 0;
  margin: 0;
}

#layers2 .lu-widget__body.custom-widget .lu-vtabs__nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-block: 12px;
}

#layers2 .lu-widget__body.custom-widget .lu-vtabs__nav-item {
  border-radius: 0;
  margin: 0;
  padding: 12px;
  padding-left: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
}

#layers2 .lu-widget__body.custom-widget .lu-vtabs__nav-item.is-active {
  border-left: solid 4px #0071bc;
  background: #0071bc15;
  font-weight: bold;
}

.mg-back-btn {
  font-family: "Gotham-Medium", Helvetica, sans-serif;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.mg-back-btn:hover,
.mg-back-btn:active,
.mg-back-btn:focus {
  text-decoration: none;
}

.product-details-tab-container .modulesgarden-app-main-container {
  padding: 0px 15px;
}