@import url("open-iconic/font/css/open-iconic-bootstrap.min.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --body-bg: #ffffff;
  --white-clr: #ffffff;
  --black-clr: #000000;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

html,
body {
  /*font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;*/
  background: var(--body-bg) !important;
}

h1:focus {
  outline: none;
}

/*:is(h3, h4, h5, h6, p) {
  font-family: sans-serif;
}*/

a,
.btn-link {
  color: #0071c1;
}

.btn-primary {
  color: var(--white-clr);
  background: #1b6ec2;
  border-color: #1861ac;
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.valid.modified:not([type="checkbox"]) {
  outline: 1px solid #26b050;
}

.invalid {
  outline: 1px solid red;
}

.validation-message {
  color: red;
}

#blazor-error-ui {
  background: lightyellow;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

  #blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
  }

.blazor-error-boundary {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
  padding: 1rem 1rem 1rem 3.7rem;
  color: var(--white-clr);
}

  .blazor-error-boundary::after {
    content: "An error has occurred.";
  }

.custom-data-grid {
  height: auto;
  max-height: 200px;
  overflow-y: auto;
}

/* #### Custom CSS #### */
/* ==== Custom Scrollbar ==== */
::-webkit-scrollbar {
  /*width: 7px;*/
  /*height: 7px;*/
}

/*::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}*/

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  /*--scrollbar-bg: rgba(40, 116, 198, 1);*/
  --scrollbar-bg: rgb(139,139,139);
  /*--scrollbar-hover-bg: rgba(40, 116, 198, 0.925);*/
  --scrollbar-hover-bg: rgb(99,99,99);
  background: var(--scrollbar-bg);
  border-radius: 10px;
}

  ::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-hover-bg);
  }
/* Buttons */
::-webkit-scrollbar-button:single-button {
  background-color: transparent;
  display: block;
  background-size: 10px;
  background-repeat: no-repeat;
}
  /* Up */
  ::-webkit-scrollbar-button:single-button:vertical:decrement {
    height: 12px;
    width: 16px;
    background-position: center 4px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='50,00 0,50 100,50'/></svg>");
  }

    ::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(112, 112, 112)'><polygon points='50,00 0,50 100,50'/></svg>");
    }
  /* Down */
  ::-webkit-scrollbar-button:single-button:vertical:increment {
    height: 12px;
    width: 16px;
    background-position: center 2px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='0,0 100,0 50,50'/></svg>");
  }

    ::-webkit-scrollbar-button:single-button:vertical:increment:hover {
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(112, 112, 112)'><polygon points='0,0 100,0 50,50'/></svg>");
    }


/* ==== Sidebar scrollbar ==== */
.fluent-nav-items::-webkit-scrollbar {
  width: 7px;
}

.fluent-nav-items::-webkit-scrollbar-track {
  background-color: transparent;
}

.fluent-nav-items::-webkit-scrollbar-thumb {
  --scrollbar-bg: rgba(0, 201, 255, 1);
  --scrollbar-hover-bg: rgba(0, 201, 255, 0.625);
  background: var(--scrollbar-bg);
  border-radius: 10px;
}

  .fluent-nav-items::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-hover-bg);
  }
/* Buttons */
.fluent-nav-items::-webkit-scrollbar-button:single-button {
  display: none;
}

/* ==== Variables ==== */
.light {
  --header-bg-clr: linear-gradient( 90deg, rgba(40, 116, 198, 1) 23%, rgba(0, 201, 255, 1) 50%, rgba(14, 129, 205, 1) 76% );
  --heading-bg-clr: #1c8cd624;
  --callout-bg-clr: var(--white-clr);
  --heading-txt-clr: #212529;
  --body-txt-clr: var(--black-clr);
  --fluent-nav-menu-bg-clr: linear-gradient( to bottom, rgba(40, 116, 198, 1) 53%, rgba(0, 201, 255, 1) 119%, rgba(14, 129, 205, 1) 48% );
  --fluent-nav-menu-submenu-bg-clr: linear-gradient( to bottom, rgba(40, 116, 198, 1));
  --fluent-nav-menu-bx-shadow: rgba(40, 116, 198, 1);
  --fluent-nav-item-hover-bg: #00c9ff3b;
  --fluent-nav-item-hover-clr: #000000;
  --fluent-data-grid-row-header-bg: #8aaded;
  --fluent-card-bg-icon: #ffffff;
  --fluent-card-bg: #ffffff;
  --fluent-card-bg-clr-1: #dce0e724;
  --header-accent-btn-bg-clr: #0000002b;
  --profile-bx-bg-clr: #d5e0f4;
  --profile-bx-txt-clr: #5a6a85;
  --profile-bx-btn-txt-clr: #046bbc;
  --profile-bx-hyperlink-hover-bg-clr: #35547224;
  --profile-bx-hyperlink-hover-txt-clr: #2a3547;
  --fluent-dialog-bx-bg-clr: #e3e8f3;
  --fluent-dialog-bx-head-clr: #212529;
  --fluent-dialog-bx-para-clr: var(--black-clr);
  --fluent-dialog-bx-data-grid-txt-clr: #1a1a1a;
  --fluent-dialog-data-grid-bg-clr: #d5e0f4ad;
  --paginator-txt-clr: #212529;
  --footer-bg-clr: #2874c6;
  --fluent-card-txt: var(--black-clr);
  --cta-border-clr: rgba(40, 116, 198, 1);
  --cta-txt-clr: rgba(14, 129, 205, 1);
  --apexchart-toolbar-icons-clr: #6e8192;
  --apexchart-toolbar-icons-hover-clr: #aab5be;
  --banner-txt-clr: #1a1a1a;
  --tech-item-box-bg-clr: var(--white-clr);
  --tech-item-box-txt-clr: var(--black-clr);
  --tech-footer-bg-clr: var(--white-clr);
  --tech-footer-box-bg-clr: #f4f4f4;
  --apexchart-menu-box-bg-clr: var(--white-clr);
  --apexchart-menu-box-txt-clr: #212121;
  --apexchart-menu-item-bg-hover-clr: #eee;
  --border-clr: rgba(4, 32, 69, 0.14);
  --border-clr-1: rgba(4, 32, 69, 0.085);
  --fluent-data-grid-row-sticky-header-bg: #bacedc;
  --search-bx-bg-clr: padding-box linear-gradient(#fff, #fff), border-box linear-gradient(#efefef calc(100% - 1px), #929292 calc(100% - 1px), #929292);
  --skeleton-bg-clr: #f8f8f8;
}

.dark {
  --dark-bg-clr: #151f2c;
  --header-bg-clr: #182433;
  --heading-bg-clr: #182433;
  --callout-bg-clr: #182433;
  --heading-txt-clr: #ffffff !important;
  --body-txt-clr: var(--white-clr) !important;
  --fluent-nav-menu-bg-clr: #182433;
  --fluent-nav-menu-bx-shadow: rgba(24, 36, 51, 1);
  --fluent-nav-item-hover-bg: #0081eb2b;
  --fluent-data-grid-row-header-bg: #202936;
  --fluent-card-bg-icon: #fff;
  --fluent-card-bg: #182433;
  --fluent-card-bg-clr-1: #20293645;
  --header-accent-btn-bg-clr: #0054a6;
  --profile-bx-bg-clr: #182433;
  --profile-bx-txt-clr: var(--white-clr);
  --profile-bx-btn-txt-clr: var(--white-clr);
  --profile-bx-hyperlink-hover-bg-clr: #355472;
  --profile-bx-hyperlink-hover-txt-clr: var(--white-clr);
  --fluent-dialog-bx-bg-clr: #182433;
  --fluent-dialog-bx-head-clr: var(--white-clr);
  --fluent-dialog-bx-para-clr: var(--white-clr);
  --fluent-dialog-bx-data-grid-txt-clr: var(--white-clr);
  --fluent-dialog-data-grid-bg-clr: #2c3644ad;
  --paginator-txt-clr: var(--white-clr);
  --footer-bg-clr: #182433;
  --fluent-card-txt: var(--white-clr);
  --cta-border-clr: rgba(40, 116, 198, 0.625);
  --cta-txt-clr: rgba(14, 129, 205, 1);
  --apexchart-toolbar-icons-clr: #aab5be;
  --apexchart-toolbar-icons-hover-clr: #028dff;
  --banner-txt-clr: var(--white-clr);
  --tech-item-box-bg-clr: #182433;
  --tech-item-box-txt-clr: var(--white-clr);
  --tech-footer-bg-clr: #182433;
  --tech-footer-box-bg-clr: var(--white-clr);
  --apexchart-menu-box-bg-clr: #202936;
  --apexchart-menu-box-txt-clr: var(--white-clr);
  --apexchart-menu-item-bg-hover-clr: #3f4c5e;
  --border-clr: rgba(72, 110, 149, 0.14);
  --border-clr-1: rgba(72, 110, 149, 0.085);
  --fluent-data-grid-row-sticky-header-bg: #182433;
  --search-bx-bg-clr: var(--heading-bg-clr);
  --skeleton-bg-clr: #151f2c;
  background: var(--dark-bg-clr);
}


/* ==== Styles ==== */
p {
  color: var(--body-txt-clr);
}

div.block-txt {
  display: inline-block;
  color: var(--body-txt-clr);
}

.stack-horizontal.main {
  gap: 0rem !important;
}

/* ==== Dark Theme Styles ==== */
.dark .card {
  background: var(--heading-bg-clr) !important;
}

.dark .apexcharts-legend-text {
  color: var(--white-clr) !important;
}

.dark :is(.apexcharts-title-text, .apexcharts-xaxis-label > tspan, .apexcharts-yaxis-label > tspan, #main-menu-expander .positioning-region .content-region svg, .profile-button .btn:hover svg) {
  fill: var(--white-clr) !important; /* SVG Icon */
}

.dark :is(.apexcharts-tooltip.apexcharts-theme-light, .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title) { /* Tooltip */
  background: var(--fluent-card-bg);
  color: var(--fluent-card-txt);
  border: solid 1px var(--border-clr);
}

.dark .compact-total .bi {
  color: var(--white-clr) !important;
}
/* ==== Dark Theme Button ==== */
.dark fluent-button[class*="accent"]::part(control) {
  color: #fff !important;
  background: var(--header-accent-btn-bg-clr);
  opacity: 1;
}

  .dark fluent-button[class*="accent"]::part(control):hover {
    opacity: 0.8;
  }

.dark fluent-button[appearance="accent"] svg {
  fill: #fff !important;
}
/* ==== Dark Theme Fluent Select Option ==== */
.dark fluent-select::part(control) {
  background: var(--heading-bg-clr) !important;
  border: solid 1px var(--border-clr) !important;
}

.dark form-select {
  background: var(--heading-bg-clr) !important;
  color: var(--body-txt-clr) !important;
}

.dark fluent-select::part(control):hover {
  background: #1e2d3f !important;
}

.dark fluent-select::part(listbox) {
  background: var(--heading-bg-clr) !important;
  border: solid 1px var(--border-clr) !important;
}

.dark fluent-select fluent-option {
  background: var(--heading-bg-clr) !important;
  border-color: var(--fluent-card-bg-clr-1) !important;
  margin-block: 1px 0px;
}

  .dark fluent-select fluent-option[aria-selected="true"] {
    background: var(--fluent-nav-item-hover-bg) !important;
  }

  .dark fluent-select fluent-option:hover {
    background: var(--fluent-nav-item-hover-bg) !important;
  }
/* ==== Dark Theme Fluent Dialog ==== */
.dark fluent-dialog {
  color: var(--white-clr) !important;
}
/* ==== Dark Theme Tables ==== */
.dark fluent-data-grid-row {
  border-bottom: solid 1px var(--border-clr-1) !important;
}

.light fluent-data-grid-row {
  border-bottom: solid 1px var(--border-clr-1) !important;
}

.dark .custom-heading {
  color: var(--white-clr);
}
/* ==== Datepicker ==== */
.date-picker {
  margin-inline: 0 1rem;
  gap: 0.25rem;
}

.fluent-datepicker::part(root) {
  background: none;
  border: solid 2px var(--border-clr);
}

.fluent-datepicker-popup {
  background: #182433 !important;
}

/* ==== Variables ==== */
.light {
  --fluent-tab-panel-brd-clr: #cacaca;
  --vm-details-item-brd-clr: #dadada;
  --vm-details-item-hover-clr: #00b1eb1c;
  /*--vm-details-list-item-hover-clr: #202934a1;*/
  --vm-details-list-item-hover-clr: #00b1eb1c;
  --list-group-item-bg-clr: #d5e0f4ad;
  --clr-1: #333;
  --action-btn-fill-clr: var(--black-clr);
  --enduser-txt-clr: #595959;
  --subtitle-txt-clr: #7f7f7f;
  --line-clr: rgba(0, 0, 0, 0.275);
  --homepage-banner-img: url(/images/light__banner__img.png);
}

.dark {
  --fluent-tab-panel-brd-clr: #373737;
  --vm-details-item-brd-clr: #323232;
  --vm-details-item-hover-clr: #0081eb2b;
  --vm-details-list-item-hover-clr: #202934;
  --list-group-item-bg-clr: #182433;
  --clr-1: #fff;
  --action-btn-fill-clr: var(--white-clr);
  --enduser-txt-clr: #f8f8ff;
  --subtitle-txt-clr: #f8f8ff;
  --line-clr: rgba(255, 255, 255, 0.275);
  --homepage-banner-img: url(/images/dark__banner__img.png);
}

/* :host() -- It will work inside the shadow context */

/* ==== Sidebar ==== */
.fluent-nav-menu {
  height: 100%;
  position: fixed;
  left: 0;
  padding: 0px !important;
  background: var(--fluent-nav-menu-bg-clr) !important;
  transition: width 600ms ease;
  z-index: 100;
}

  .fluent-nav-menu.collapsed {
    width: 45px !important;
    min-width: 45px !important;
  }

  .fluent-nav-menu::before {
    content: "";
    position: absolute;
    top: 0px;
    right: -30px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    box-shadow: -15px -15px 0px var(--fluent-nav-menu-bx-shadow);
    z-index: -1;
  }

.fluent-nav-items {
  height: 100%;
  padding: 0px 0px 150px 0px;
  overflow: auto;
}
/* ==== Hamburger ==== */
.fluent-nav-group .fluent-nav-menu {
  position: relative;
  display: inline;
}

#main-menu-expander {
  margin-block-end: 1.5rem !important;
  padding: 0 !important;
}

  #main-menu-expander:hover {
    background: none !important;
  }

  #main-menu-expander:focus {
    border: none !important;
    outline: none !important;
  }

  #main-menu-expander.expander .positioning-region .content-region {
    margin-inline-start: 0px !important;
    padding-inline-start: 0.6rem !important;
  }

  #main-menu-expander .positioning-region .content-region svg {
    fill: var(--white-clr) !important;
  }
/* ==== Nav Item ==== */
.fluent-nav-item {
  margin: 0 !important;
}

  .fluent-nav-item .positioning-region {
    background: none !important;
  }

    .fluent-nav-item .positioning-region .content-region {
      position: absolute !important;
    }

  .fluent-nav-item a.active .positioning-region::before {
    display: none !important;
  }

.fluent-nav-link .positioning-region .content-region .fluent-nav-text {
  font-weight: 600;
  color: var(--white-clr);
}

.fluent-nav-item:hover,
.fluent-nav-link.active {
  background: var(--fluent-nav-item-hover-bg) !important;
  color: var(--fluent-nav-item-hover-clr) !important;
}

  .fluent-nav-link.active:hover {
    background: none !important;
  }

.fluent-nav-link .positioning-region {
  margin-block: 0.7rem;
}

  .fluent-nav-link .positioning-region .content-region {
    font-size: 14px;
    font-weight: 400;
    line-height: 25px;
    display: flex;
    align-items: center;
    margin: 0 0 2px !important;
    padding: 10px !important;
    border-radius: 5px;
  }

    .fluent-nav-link .positioning-region .content-region svg {
      fill: var(--fluent-card-bg-icon) !important;
      opacity: 1;
    }

.fluent-nav-link:hover .positioning-region .content-region svg,
.fluent-nav-link.active .positioning-region .content-region svg {
  fill: var(--white-clr) !important;
  opacity: 1;
}
/* ==== Header ==== */
/*.header {
  background: var(--header-bg-clr) !important;
}*/
.header {
  background: var(--header-bg-clr) !important;
}
/* ==== Logo ==== */
.header-gutters span#logo {
  color: var(--white-clr);
  font-size: 24px;
  font-weight: 600;
  padding: 10px;
}

span#logo h6 {
  color: var(--white-clr) !important;
}
/* ==== Buttons ==== */
/* ==== Theme Button ==== */
.theme-btn {
  display: flex;
  align-items: center;
}

#theme-btn {
  width: 35px !important;
  height: 35px;
  padding: 0.3rem;
  border-radius: 50%;
  fill: var(--white-clr) !important;
  margin-inline: 0.725rem;
}

  #theme-btn:hover {
    background: rgba(230, 202, 252, 0.325);
    border-radius: 50%;
  }
/* ==== Button ==== */
.header-gutters fluent-button[class*="accent"]::part(control):hover {
  opacity: 0.8;
}

.header-gutters fluent-button[class*="accent"]::part(control) {
  background: var(--header-accent-btn-bg-clr);
  padding: 1.1rem 0.725rem;
  opacity: 1;
  border: solid 1px var(--border-clr);
  border-radius: inherit;
}

fluent-data-grid-cell:not([type="button"]) {
  grid-gap: 0.325rem;
}
/* ==== Sort Button ==== */
.col-sort-button::part(control) {
  background: none;
}

.neutral::part(control) {
  /* All the neutral button */
  border: solid 1px #106ebe;
  background: padding-box linear-gradient(#046bbc, #046bbc), border-box linear-gradient(#1d7ac3 90%, #034980 100%);
  color: var(--white-clr);
  opacity: 1
}

  .neutral::part(control):hover {
    /*background: padding-box linear-gradient(#0475c6, #0475c6), border-box linear-gradient(#1b81cb 90%, #03538d 100%);*/
    opacity: 0.9;
  }

.neutral svg {
  fill: var(--white-clr) !important;
}

.column-header .col-options-button.stealth::part(control) {
  background: none !important;
  border: none !important;
  margin: 0px !important;
  padding: 0px !important;
  width: 24px !important;
}

.col-sort-button::part(control) {
  padding-inline: 0px;
  color: #667382 !important;
  font-size: 13px !important;
}

.col-sort-button svg[aria-hidden="true"] {
  width: 18px !important;
  fill: #667382 !important;
  padding-inline: 0px !important;
}
/* ==== Sort Icon ==== */
.column-header .col-options-button.stealth svg {
  --svg-icon-clr: #667382;
  fill: var(--svg-icon-clr) !important;
}

  .column-header .col-options-button.stealth svg:hover {
    fill: #667382e3 !important;
  }

.col-options-button svg {
  width: 20px !important;
}
/* ==== Bootstrap Custom Styles ==== */
.py-8 {
  padding-block: 5px;
}

.pbs-6 {
  padding-block-start: 2rem;
}

.px-7 {
  padding-inline: 20px;
}

.mt-8 {
  margin-top: 10px;
}

.mt-13 {
  margin-top: 45px;
}

.p-6 {
  padding: 12px;
}

.fw-semibold {
  font-weight: 400;
}

.black-clr-1 {
  color: #2a3547;
}

.mb-7 {
  margin-bottom: calc(1rem * 5);
}

.my-8 {
  margin-block: 0.5rem !important;
}

.fs-7 {
  font-size: 0.875rem;
}

.fs-9 {
  font-size: 0.75rem;
}

.max-w-100 {
  max-width: 100px !important;
}
/* ==== Content ==== */
#content {
  position: relative;
  width: 100%;
  /*left: 260px;*/
  transition: all 600ms ease;
  /*padding-inline: 1rem 0.35rem;*/
  /*margin-bottom: 2rem;*/
  /*border-radius: 15px;*/ /* Adjust the value as needed */
}

.fluent-nav-menu.collapsed ~ #content {
  width: calc(100% - 45px) !important; /* Sidebar Width */
  left: 45px !important;
}

.fluent-nav-menu ~ #content {
  width: calc(100% - 260px) !important; /* Sidebar Width */
  left: 260px !important;
}
/*#content :is(h1:not([class]):first-child, h3:not([class]):first-child) {
    background: var(--heading-bg-clr) !important;
    color: var(--heading-txt-clr) !important;
    padding: 8px 15px;
    border-radius: 2px;
    border: solid 1px var(--border-clr);
    margin-top: 0.5rem;
    height: 50px;
    font-size: 26px;
    font-weight: 400;
    text-align: left;
}*/
/* ==== Dialog Box ==== */
fluent-dialog[class~="right"]::part(control) {
  width: 100% !important;
  max-width: 400px !important;
  background: var(--fluent-dialog-bx-bg-clr) !important;
}
/* ==== Tabs ==== */
/*fluent-tab {
    border: solid 1px var(--border-clr);
    border-bottom: 0px;
    background: var(--heading-bg-clr);
    border-radius: 0px;
    grid-gap: 5px !important;
}
fluent-tab[aria-selected="true"] {
    --fluent-tab-txt-clr: #ffffff;
    border-radius: 0px;
    box-shadow: none;
    outline: none;
    background: var(--fluent-card-bg);
    border: solid 1px var(--border-clr);
    position: relative;
    background: var(--fluent-tab-bg-clr);
    color: var(--fluent-tab-txt-clr);
}
fluent-tab[aria-selected="true"] svg.fluent-tab-icon {
    fill: white !important;
}
fluent-tab-panel {
    padding: 0 !important;*/
/*margin-block-start: 1rem;*/ /* Need Use*/
/*border: solid 1px var(--border-clr);
}*/
/* ==== Paginator ==== */
.paginator {
  color: var(--paginator-txt-clr);
  margin-top: 0.3rem !important;
}

  .paginator .summary {
    font-size: 15px;
  }
/* ==== Tables ==== */
fluent-data-grid {
  border-radius: 4px;
  border: solid 1px var(--border-clr);
}

fluent-data-grid-cell {
  /* Using Position Absoulte... Text overflow work */
  display: flex;
  align-items: center;
  text-overflow: ellipsis;
  width: auto !important;
}

fluent-data-grid-row.header > fluent-data-grid-cell,
fluent-data-grid-row.sticky-header > fluent-data-grid-cell {
  font-size: 16px !important;
  font-weight: 600 !important;
}

fluent-data-grid-row.sticky-header {
  background: var(--fluent-data-grid-row-sticky-header-bg) !important;
  top: 0rem !important;
}

fluent-data-grid-row[row-type="header"] {
  background: var(--heading-bg-clr) !important;
}

fluent-data-grid-row[row-type="default"]:last-child {
  border-bottom: none !important;
}

fluent-data-grid-row:last-child {
  border-bottom: none;
}

.hover:not( [row-type="header"], [row-type="sticky-header"]):hover,
fluent-data-grid-row:not([class]):hover {
  /* data grid row hover */
  background: #0095ff26 !important;
}

.fluent-data-grid-row.sticky-header {
  top: -1rem !important;
  background: #d5e0f4ad !important;
}

fluent-data-grid > fluent-data-grid-row:first-child > * {
  color: #667382 !important;
  font-size: 13px !important;
}

fluent-data-grid > fluent-data-grid-row:last-child {
  border-bottom: solid 0px var(--border-clr) !important;
}
/*If want use this styles*/
/*fluent-data-grid-cell {
    padding: 0px !important;
}*/
fluent-data-grid-cell .col-title {
  padding: 0px !important;
  height: 32px !important;
}

fluent-data-grid fluent-data-grid-row fluent-data-grid-cell:not([class*="header"]):first-child {
  /* Padding space for first child in data grid */
  /* padding-inline-start: 0.725rem !important; */
}

fluent-data-grid fluent-data-grid-row fluent-data-grid-cell {
  /* Data grid inside the each cell*/
  /*If want use this style*/
  /*margin: 0.125rem 0.1rem;*/
  border-radius: 1px;
}

fluent-data-grid-row fluent-data-grid-cell:first-child {
  /* Data grid First Column */
  margin-left: 0rem;
}

fluent-data-grid fluent-data-grid-row[class*="header"] fluent-data-grid-cell:last-child {
  display: flex !important;
  align-items: center;
}

fluent-data-grid-cell .col-options {
  background: var(--search-bx-bg-clr) !important;
  border: solid 1px var(--border-clr) !important;
  box-shadow: 0px 0px 3px -1px var(--fluent-nav-menu-bx-shadow) !important;
}

fluent-data-grid fluent-data-grid-row fluent-data-grid-cell:last-child {
  /* If want use this style */
  /*margin: 0.125rem 0rem !important;*/
  border-radius: 1px;
}
/*==== Fluent Label ====*/
.fluent-input-label {
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  font-weight: 500 !important;
  font-family: 'Inter', sans-serif !important;
  color: rgb(55 65 81 / 1) !important;
  margin-top: 0.25rem;
  margin-bottom: 0.25rem !important;
}

.label-title {
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  font-weight: 500 !important;
  font-family: 'Inter', sans-serif !important;
  color: rgb(55 65 81 / 1);
}

.form-group .form-text {
  /*padding: 5px;*/
  color: var(--neutral-foreground-rest) !important;
}

.form-text {
  margin-top: 0 !important;
}

.form-select {
  border: inherit !important;
  border-radius: 2px !important;
  background-color: white;
  color: var(--body-txt-clr) !important;
}

  .form-select:hover {
    cursor: pointer !important;
    border-color: #d1d5db;
    background: white;
  }

  .form-select:focus {
    outline: none !important;
    box-shadow: none !important;
  }

  .form-select option {
    color: var(--form-option-txt-clr) !important;
    background-color: var(--form-option-bg-clr) !important;
    border-radius: 3px !important;
    border: solid 1px var(--border-clr) !important;
    box-shadow: none !important;
  }

    .form-select option:hover {
      /*background-color: var(--form-option-hover-bg-clr) !important;*/
      background-color: #f00 !important;
    }
/* ==== Features ==== */
.section-pad {
  padding-inline: 100px;
}

.custom-card {
  width: 100%;
  height: 220px !important;
  transition: all 400ms ease;
}

  .custom-card:hover {
    transform: translateY(-5px);
  }

:is(#feat .container) :is(h1, h3, hr, p) {
  color: var(--body-txt-clr) !important;
}

#feat {
  /*background: url(https://www.vantage.sh/images/hero-bg-repeat.svg);*/
  /*background-color: #FBFCFA;*/
  padding-block: 1rem;
  margin-block: 2rem;
}

.dark #feat {
  background: none;
}
/* ==== Footer ==== */
footer.footer {
  width: 100%;
  height: 25px;
  padding-top: 0.25rem;
  position: fixed;
  bottom: 0;
  font-size: 12px;
  font-weight: 600;
  margin-top: 0.25rem;
  color: var(--white-clr) !important;
  z-index: 1;
}

.copy {
  left: 50%;
  transform: translateX(-50%);
}

.policy-content {
  position: absolute;
  right: 0.5rem;
  display: flex;
  gap: 20px;
}

  .policy-content a {
    position: relative;
  }

    .policy-content a:not(:last-child)::after {
      content: '';
      position: absolute;
      width: 1px;
      height: 100%;
      background-color: #e9e9e9;
      margin-inline: 5px;
    }

    /*#footer a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  color: #e1e1e1;
}*/
    .policy-content a:not(:last-child)::after {
      content: '';
      position: absolute;
      width: 1px;
      height: 100%;
      background-color: #e9e9e9;
      margin-inline: 5px;
    }

/*#footer a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  color: #e1e1e1;
}*/
/* ==== Common Styles ==== */
/*#footer a {
  text-decoration: none;
  color: var(--white-clr);
}*/

#footer a {
  text-decoration: none;
  color: var(--white-clr);
}

.display-7 {
  font-size: 2.5rem !important;
  font-weight: 400 !important;
}

.display-8 {
  font-size: 1.25rem !important;
  font-weight: 400 !important;
}

.card-1 {
  max-height: 100%;
  height: auto;
}

.bg-clr-1 {
  background: var(--fluent-card-bg-clr-1) !important;
  /*border-color: var(--fluent-card-bg-clr-1) !important;*/
  border-color: var(--border-clr) !important;
}

.bg-clr-anil {
  background: padding-box linear-gradient(#0d6efd45, #fbfbfb), border-box var(--neutral-stroke-control-rest) !important;
}

.datagrid-dropdown {
  overflow: visible;
}

.col-width-draghandle {
  height: 30px !important;
}

.light .col-width-draghandle {
  border-left: calc(var(--stroke-width)* 1px) solid #667382 !important;
}

/* ==== Variables ==== */
.light {
  --vm-dialog-bx-label-clr: #555;
  --vm-dialog-bx-value-clr: #333;
  --fluent-tab-bg-clr: padding-box linear-gradient(#046bbc, #046bbc), border-box linear-gradient(#1d7ac3 90%, #034980 100%);
  --fluent-txt-field-bg-clr: padding-box linear-gradient(#ffffff, #ffffff), border-box linear-gradient( #efefef calc(100% - 1px), #929292 calc(100% - 1px), #929292 );
  --fluent-txt-field-bg-hover-clr: padding-box linear-gradient(#f7f7f7, #f7f7f7), border-box linear-gradient( #e5e5e5 calc(100% - 1px), #8a8a8a calc(100% - 1px), #8a8a8a );
  --form-option-bg-clr: #fbfbfb;
  --form-option-txt-clr: #1a1a1a;
  --form-option-hover-bg-clr: #f3f3f3;
  --head-level-txt-clr: #595959;
}

.dark {
  --vm-dialog-bx-label-clr: #f8f8f8;
  --vm-dialog-bx-value-clr: #f0f8ff;
  --fluent-tab-bg-clr: #0054a6;
  --fluent-txt-field-bg-clr: #182433;
  --fluent-txt-field-bg-hover-clr: #1e2d3f;
  --form-option-bg-clr: var(--heading-bg-clr);
  --form-option-txt-clr: var(--white-clr);
  --form-option-hover-bg-clr: var(--fluent-card-bg-clr-1);
  --head-level-txt-clr: #F8F8FF;
}

/* */
.list-group-item {
  background: var(--list-group-item-bg-clr) !important;
  border: none !important;
}

span.vm-details-label {
  color: var(--vm-dialog-bx-label-clr) !important;
}

span.vm-details-value {
  color: var(--vm-dialog-bx-value-clr) !important;
}

fluent-dialog[b-dsxskpj5rr]::part(control) {
  height: fit-content !important;
  background: #FFFFFF !important;
  padding: 0 !important;
}

fluent-dialog[b-dsxskpj5rr] .fluent-dialog-footer {
  right: 25px;
  bottom: 25px;
}

.vm-details-section {
  /*border: solid 1px var(--vm-details-item-brd-clr);*/
}

.list-group {
  margin-block: 0.5rem 0.4rem;
  border-radius: 0px !important;
}

.icon {
  background: none !important;
}

.button {
  padding-inline-start: 2rem !important;
}

element.style {
  width: 20px;
  fill: #fff !important;
}

.control {
  background: orange !important;
}

:is(.carousel-control-prev, .carousel-control-next):where(:hover) {
  transform: scale(1.05);
}

.wrapped-header {
  white-space: normal !important;
  word-break: break-word !important;
}

.select-container {
  position: relative;
}

.calendar-popup {
  position: absolute;
  top: 100%; /* Position it below the select element */
  left: 0;
  z-index: 1000; /* Ensure it overlaps other content */
  background: var(--fluent-card-bg);
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  padding: 5px;
  border-radius: 4px;
}

.select-icon {
  position: relative;
  display: inline-block;
  width: 100%;
  font-size: 12px;
  color: var(--body-txt-clr);
  /*background: padding-box linear-gradient(#fff, #fff), border-box linear-gradient(#efefef 90%, #d6d6d6 100%) !important;*/
}

  .select-icon:hover {
    /*background: padding-box linear-gradient(#f7f7f7, #f7f7f7), border-box linear-gradient(#e5e5e5 90%, #cecece 100%) !important;*/
  }

  .select-icon .bi-calendar-event {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 16px; /* Adjust size as needed */
    fill: var(--body-txt-clr);
  }

  .select-icon select {
    padding-left: 2.125rem; /* Adjust padding to make space for the icon */
    border-radius: 0.5rem !important;
    border: solid 1px #e5e7eb !important;
  }

.select-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.col-justify-center .col-title[b-pxhtqoo8qd] {
  justify-content: start !important;
}

/* ==== Accordion ==== */
fluent-accordion-item::part(region) {
  padding: 0 !important;
  background: #e3e8f3 !important;
}

fluent-accordion-item::part(button) {
  padding: 0 5px;
  margin: 0 !important;
  color: var(--clr-1);
}

fluent-accordion-item::part(icon) {
  background: none !important;
}

fluent-accordion-item:host(.expanded)::part(region) {
  border-top: none !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  background: orange !important;
}

fluent-accordion-item .list-group {
  margin-block-start: 0 !important;
}
/* ==== ApexCharts Icons ==== */
.apexcharts-toolbar [class^="icon"] svg {
  color: var(--apexchart-toolbar-icons-clr);
}

  .apexcharts-toolbar [class^="icon"] svg:hover {
    color: var(--apexchart-toolbar-icons-hover-clr);
  }
/* ==== Hero ==== */
.hero__section {
  position: relative;
  overflow: hidden;
  z-index: 1;
  padding-block-end: 2rem;
}

.dark .hero__bg__img {
  display: none;
}

.hero__bg__img {
  position: absolute;
  display: block;
  inset: 0;
  width: 100%;
  height: 450px;
  opacity: 0.275;
  z-index: -1;
}

  .hero__bg__img .cloud-image-left {
    filter: blur(5px);
  }

.hero__layout {
  /* Hero Layout and Hero Image */
  max-width: 1440px;
  position: relative;
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 100% 20%;
  grid-auto-columns: 1fr;
  align-items: start;
  margin-top: 75px;
  margin-inline: auto;
  justify-items: center;
}

.hero__content {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: initial;
  flex-direction: column;
  flex: 1 1 auto;
  align-self: auto;
  z-index: 10;
}

  .hero__content .hero__head {
    font-size: 50px;
    font-weight: 500;
    line-height: 2;
    text-align: center;
    color: var(--banner-txt-clr) !important;
  }

  .hero__content [class^="hero"] span {
    --txt-bg-gradient-clr: -webkit-linear-gradient( 45deg, rgba(40, 116, 198, 1) 53%, rgba(0, 201, 255, 1) 119%, rgba(14, 129, 205, 1) 48% );
    background: var(--txt-bg-gradient-clr);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .hero__content .hero__subhead {
    width: 50%;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    color: var(--banner-txt-clr) !important;
  }

  .hero__content .hero__cta__btn {
    display: flex;
    grid-gap: 1rem;
  }

  .hero__content .hero__cta .hero__cta__primary {
    --fluent-nav-menu-bg-clr: linear-gradient( 45deg, rgba(40, 116, 198, 1) 53%, rgba(0, 201, 255, 1) 119%, rgba(14, 129, 205, 1) 48% );
    display: flex;
    justify-content: center;
    align-items: center;
    grid-gap: 10px;
    margin-block: 1.5rem 3rem;
    padding: 0.5rem 1rem;
    border: solid 2px var(--cta-border-clr);
    border-radius: 50px;
    font-size: 16px;
    transition: all 600ms ease;
    color: var(--cta-txt-clr) !important;
    text-decoration: none;
  }

    .hero__content .hero__cta .hero__cta__primary:is(:hover) {
      background: var(--fluent-nav-menu-bg-clr);
    }

    .hero__content .hero__cta .hero__cta__primary:hover :is(div, .bi) {
      color: var(--white-clr);
    }

    .hero__content .hero__cta .hero__cta__primary .bi {
      font-size: 14px;
    }

.hero__section .right-bg-img {
  position: absolute;
  top: 70%;
  left: 0;
  transform: translateY(-70%);
  z-index: -1;
  width: 300px;
}

.hero-image {
  width: 100%;
  height: 100vh;
  background-image: url('/images/light__banner__img.png');
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
  border-radius: 0.325rem;
}

.technology-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 4rem 12px 2rem 12px;
  position: relative;
  margin-block-end: 0.425rem;
}

  .technology-container > :is(h1, h2, h3, h4, h5, h6, p) {
    background-color: transparent;
  }

.left-bg-img {
  position: absolute;
  top: 5rem;
  right: 0;
  z-index: -1;
}

.right-bg-img {
  position: absolute;
  top: 5rem;
  left: 0;
  z-index: -1;
  width: 270px;
}

.technology-header {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  max-width: 700px;
  color: var(--banner-txt-clr) !important;
}

  .technology-header h1 {
    font-size: 40px;
    font-weight: 400;
  }

  .technology-header p {
    font-size: 18px;
    font-weight: 400;
    text-align: center;
    line-height: 1.65;
  }

  .technology-header .block-100 {
    width: 100%;
    background: lightblue;
    margin-block: 1rem 2rem;
  }

.technology-grid {
  max-width: 1280px;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}

.technology-item {
  background: var(--tech-item-box-bg-clr) !important;
  color: var(--tech-item-box-txt-clr) !important;
  border: solid 1px rgba(0, 0, 0, 0.12);
  border-radius: 0.25rem;
  display: flex;
  gap: 1rem;
  padding: 1.5rem;
  transition: all 450ms ease;
  position: relative;
}

  .technology-item:hover {
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.25), -2px -2px 6px rgba(0, 0, 0, 0.25);
  }

.technology-logo img {
  width: 50px;
  height: 50px;
}

.block-120 h3 {
  font-size: 21px;
  font-weight: 400;
}

.block-120 p {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.75;
}

.technology-footer {
  width: 100%;
  max-width: 1280px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-block-start: 1.725rem;
  color: var(--banner-txt-clr);
  background: var(--tech-footer-bg-clr) !important;
  padding-block: 1rem;
}

  .technology-footer h5 {
    font-size: 18px;
    font-weight: 400;
    text-transform: capitalize;
    margin-block-end: 1rem;
  }

  .technology-footer .box-120 {
    max-width: 600px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 0.725rem;
  }

    .technology-footer .box-120 div {
      background: var(--tech-footer-box-bg-clr);
      border: solid 2px var(--border-clr-1);
      width: 80px;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 2rem;
    }
/* ==== Apexchart Menu ==== */
.apexcharts-menu {
  background: var(--apexchart-menu-box-bg-clr) !important;
  color: var(--apexchart-menu-box-txt-clr) !important;
  border: solid 1px var(--border-clr) !important;
}

.apexcharts-menu-item:hover {
  background: var(--apexchart-menu-item-bg-hover-clr) !important;
}

.apexcharts-menu-icon svg {
  fill: var(--apexchart-toolbar-icons-clr) !important;
}

  .apexcharts-menu-icon svg:hover {
    fill: var(--apexchart-toolbar-icons-hover-clr) !important;
  }
/* ==== Fluent Card Graphical Chart ==== */
.apexcharts-graphical .apexcharts-pie {
  width: 300px !important;
  height: 300px !important;
}
/* ==== Search Box ==== */
.search-box fluent-search::part(root) {
  border: solid 2px var(--border-clr);
}
/* ==== Volume type dropdown ==== */
.volume-select {
  width: 150px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f8f8f8;
  font-size: 14px;
  appearance: none; /* Remove default arrow */
  background-image: url('data:image/svg+xml;utf8,<svg fill="none" height="24" stroke="gray" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><polyline points="6 9 12 15 18 9"></polyline></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px;
}

  .volume-select:focus {
    border-color: #999;
    outline: none;
    box-shadow: 0 0 3px 0 #bbb;
  }

  .volume-select option {
    padding: 10px;
    font-size: 14px;
  }

.vm-details-item {
  padding: 10px 5px;
  border-bottom: 1px solid var(--vm-details-item-brd-clr);
}

  .vm-details-item:hover {
    background: var(--vm-details-item-hover-clr) !important;
  }

.list-group-item:hover {
  background: var(--vm-details-list-item-hover-clr) !important;
}

.vm-details-label {
  font-weight: bold;
  color: #555;
  background: transparent !important;
  border: none;
  padding: 0px;
}

.vm-details-value {
  color: #333;
}

.custom-data-grid fluent-data-grid-row[row-type="default"] {
  height: auto !important;
}

fluent-data-grid-row[row-type="default"] {
  align-content: center;
}

fluent-data-grid-cell .virtual-machine-name {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  /*justify-content: center;*/
  flex: 1;
  gap: 0.175rem;
}

  fluent-data-grid-cell .virtual-machine-name span fluent-button {
    transform: translateY(0px) !important;
  }

:is( fluent-dialog[class~="right"], fluent-dialog[class~="left"] )[b-dsxskpj5rr]::part(control) {
  height: calc(var(--dialog-height) - 2 * var(--dialog-padding)) !important;
}
/* ==== Dialog Last Child Data Grid ==== */
fluent-dialog fluent-data-grid fluent-data-grid-row fluent-data-grid-cell:last-child {
  overflow: auto;
}

.right fluent-data-grid fluent-data-grid-row:not([row-type="header"]) fluent-data-grid-cell:last-child {
  padding-left: calc(2rem * 2) !important;
}
/* ==== Dialog Vertical Scrollbar ==== */
fluent-dialog fluent-data-grid fluent-data-grid-row fluent-data-grid-cell:last-child::-webkit-scrollbar {
  height: 5px !important;
}

fluent-data-grid fluent-data-grid-row fluent-data-grid-cell:last-child::-webkit-scrollbar-thumb {
  background: var(--scrollbar-bg);
}
/* ==== EULA ==== */
.end-user {
  width: 100%;
  min-width: 580px;
  margin-top: 0.5rem;
}

.end-user__container {
  margin: 0px auto;
  padding: 0px calc((10px * 1) + 3px);
}

  .end-user__container .header {
    line-height: 150%;
    background: none !important;
  }

.title {
  line-height: 1.5;
  margin-block-end: 1.25rem;
  font-size: 26px;
}

.subtitle {
  margin-block-end: 2.5rem;
  line-height: 17.25px;
  font-size: 15px;
  font-weight: 600;
  color: var(--subtitle-txt-clr);
}

.banner {
  line-height: 150%;
}

.body__text {
  font-size: 15px;
  /*font-family: Arial;*/
  line-height: 1.5;
  color: var(--enduser-txt-clr);
  text-align-last: left;
  margin-block-end: 0.725rem;
}

:is(.toc, .wrapper) {
  margin-block: 2rem 2.5rem;
}

.wrapper {
  margin-block-end: 0rem;
}

.toc__header {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  margin-block-end: 1rem;
  color: var(--enduser-txt-clr);
}

.toc__list {
  font-size: 15px;
  line-height: 1.5;
  margin-block: 0.125rem;
  list-style: decimal-leading-zero;
}

  .toc__list::marker {
    color: var(--enduser-txt-clr);
    font-weight: 500;
  }

  .toc__list a {
    text-decoration: none;
    color: var(--enduser-txt-clr);
    font-weight: 500;
  }

    .toc__list a:hover {
      color: initial;
      text-decoration: underline;
      text-underline-offset: 3px;
      text-decoration-color: var(--line-clr);
    }

.dark .toc__list a:hover {
  color: #e1e1e1;
}

.toc__list a:focus-visible {
  border: none;
  outline: none;
}

.toc__content:not(:last-child) {
  margin-block: 2rem;
  /*padding-block: 0.75rem;*/
  /*padding-inline: 0.25rem;*/
  border: solid 1px transparent;
}

.toc__content .body__text:last-child {
  margin-block-end: 0rem;
}

.toc__contents [data-custom-class="heading_1"] {
  line-height: 1.5;
  font-size: 17px;
  font-weight: 600;
  margin-block-end: 0.825rem;
}

  .toc__contents [data-custom-class="heading_1"] span {
    border-bottom: solid 1px var(--line-clr);
    padding-bottom: 0.25rem;
    user-select: none;
  }

h4.toc__title {
  color: var(--enduser-txt-clr) !important;
}

.body__text :is(ul.list__items, ol.list__items) {
  margin-top: 0.5rem;
  margin-left: 1rem;
  padding-left: 0px;
  padding-bottom: 0px;
  margin-bottom: 0px;
}

.body__text .mail__link {
  text-decoration: none;
  color: #0d6efd;
}

  .body__text .mail__link:hover {
    text-decoration: underline;
    text-underline-offset: 5px;
    color: #0d6efd;
  }

.body__text ul.list__items {
  list-style: disc;
}

.body__text ul.sqr {
  list-style: circle;
}

.body__text ol.list__items {
  list-style: decimal;
  margin-left: 1.5rem;
}

ul.list__items li.list__item {
  /*font-family: "Arial";*/
  margin-block: 0.05rem;
}
/* ==== Navmenu Subitems ==== */
.fluent-nav-link .content-region .expand-collapse-button:hover {
  background: none !important; /* Change dropdown arrow background color */
}

.fluent-nav-item .fluent-collapsible-region-container .fluent-nav-menu .fluent-nav-item {
  background: var(--fluent-nav-menu-submenu-bg-clr) !important; /* Change Submenu background color */
}

  .fluent-nav-item .fluent-collapsible-region-container .fluent-nav-menu .fluent-nav-item .fluent-nav-link {
    padding-left: 1.5rem; /* Adjust Padding Space */
  }

.fluent-nav-group .fluent-collapsible-region-container.items .fluent-nav-menu {
  background: rgba(40, 116, 198, 1) !important;
  /*background: purple !important;*/
}

  .fluent-nav-group .fluent-collapsible-region-container.items .fluent-nav-menu::before {
    content: '';
    position: absolute;
    box-shadow: none;
  }

.fluent-collapsible-region-container .fluent-nav-menu .fluent-nav-item:hover,
.fluent-collapsible-region-container .fluent-nav-menu .fluent-nav-item .fluent-nav-link.active {
  background: var(--fluent-nav-item-hover-bg) !important;
  color: var(--fluent-nav-item-hover-clr) !important;
}


/* ==== Text Field ==== */
fluent-text-field.outline::part(root),
.search-box fluent-search::part(root) {
  background: var(--fluent-txt-field-bg-clr) !important;
  border: solid 1px var(--border-clr);
}

  fluent-text-field.outline::part(root):is(:hover, :focus-within),
  .search-box fluent-search::part(root):is(:hover, :focus-within) {
    background: var(--fluent-txt-field-bg-hover-clr) !important;
  }


/* ==== Variables ==== */
.light {
  --card-boder-clr: rgba(229, 231, 235, 1);
  --dropdown-bg-clr: padding-box linear-gradient(#fff, #fff), border-box linear-gradient(#efefef 90%, #d6d6d6 100%) !important;
  --dropdown-bg-hover-clr: padding-box linear-gradient(#f7f7f7, #f7f7f7), border-box linear-gradient(#e5e5e5 90%, #cecece 100%) !important;
  --fluent-calendar-bg-clr: #fff;
  --txt-muted-clr: rgba(33, 37, 41, 0.75);
  --cookie-label-txt-clr: #19243c;
  --cookie-data-txt-clr: #8b93a7;
}

.dark {
  --card-boder-clr: rgba(55, 65, 81, 1);
  --dropdown-bg-clr: #182433;
  --dropdown-bg-hover-clr: #1e2d3f;
  --fluent-calendar-bg-clr: #182433;
  --txt-muted-clr: rgba(255, 255, 255, 0.75);
  --cookie-label-txt-clr: #fff;
  --cookie-data-txt-clr: #888;
}

/* ==== Fluent Card ==== */
/*fluent-tab-panel fluent-card {
    border-radius: 0px;
}*/
fluent-card {
  /*--bx-shadow: 0px 0px #000;*/
  /*--bx-shadow-clr: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);*/
  /*background: var(--fluent-card-bg);
    border: solid 1px var(--card-boder-clr);*/
  border-radius: 0 0 8px 8px;
  box-shadow: var(--bx-shadow, none), var(--bx-shadow, none), var(--bx-shadow-clr, none);
  /*gap: 1rem;*/
}

  fluent-card .avatar {
    /*padding: 0.25rem 0.5rem;*/
    border: solid 1px var(--hover-clr);
    border-radius: 0.325rem;
    position: relative;
    overflow: hidden;
  }

    fluent-card .avatar::before {
      content: '';
      position: absolute;
      top: -20px;
      left: -2px;
      width: 3px;
      height: 42px;
      background: var(--hover-clr);
      border-radius: 0.325rem;
      transition: all 0.65s ease;
      transform: rotate(45deg);
      z-index: -1;
    }

    fluent-card .avatar .avatar-initial {
      background: var(--hover-clr);
      color: var(--white-clr);
      padding: 0.25rem 0.5rem;
    }

  fluent-card .card-info {
    text-align: left;
  }

  fluent-card:hover .avatar::before {
    top: 10px;
    left: 32px;
  }

.card-info-head {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 0px;
  color: var(--heading-txt-clr);
}

.card-info-body {
  font-size: 13px;
  font-weight: 400;
}

.graph-card {
  width: 100% !important;
  height: 100% !important;
  padding: 10px !important;
}

  .graph-card .apexcharts-canvas {
    min-width: 400px !important;
    width: 100% !important;
    min-height: 260px !important;
    height: 260px !important;
  }

/*.apexcharts-canvas .apexcharts-svg,
.apexcharts-canvas .apexcharts-svg foreignObject {
    height: 260px;
}*/

.apexcharts-legend {
  overflow: visible !important;
}

.apexcharts-svg foreignObject g.apexcharts-graphical {
  display: none;
}

.apexcharts-title-text {
  font-size: 15px;
  font-weight: 500;
  margin-block-end: 3rem;
}

/* ==== Dropdown ==== */
/*fluent-select[aria-haspopup="listbox"]::part(control) {
    border-radius: 2px;
}*/

/* ==== Calendar ==== */
.fluent-calendar {
  background: var(--fluent-calendar-bg-clr) !important;
  border: solid 1px var(--border-clr);
  border-radius: 5px;
  position: absolute;
  top: 1px;
  height: 265px !important;
}

  .fluent-calendar .title {
    border-block-end: solid 1px var(--border-clr);
    height: 45px !important;
    margin-block-end: 0.5rem;
  }

    .fluent-calendar .title .label {
      font-size: 20px;
    }

  .fluent-calendar[b-bgn9u4guxz] .change-period > .previous {
    position: absolute;
    top: 10px;
    right: 40px;
    display: grid;
    place-items: center;
  }

  .fluent-calendar[b-bgn9u4guxz] .change-period > .next {
    position: absolute;
    top: 10px;
    right: 5px;
    display: grid;
    place-items: center;
  }

    .fluent-calendar[b-bgn9u4guxz] .change-period > .previous:not([disabled]):hover,
    .fluent-calendar[b-bgn9u4guxz] .change-period > .next:not([disabled]):hover {
      background: var(--neutral-fill-stealth-hover);
      border-radius: 50%;
    }

  .fluent-calendar .days {
    overflow: hidden;
  }

.calendar-popup .fluent-calendar {
  position: relative;
}

.centered {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 45vh; /* Full height of the viewport */
}

/* ==== Privacy-Policy ==== */
#privacy-policy {
  padding-inline: calc((10px * 1) + 3px);
  margin-top: 0.5rem;
}

.toc__content h2 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  margin-block-end: 0.825rem;
}

  .toc__content h2 span.toc__title {
    color: var(--enduser-txt-clr) !important;
    border-bottom: solid 1px var(--line-clr);
    padding-bottom: 0.125rem;
    user-select: none;
  }

#privacy-policy .toc__content .main h3:first-child {
  background: none !important;
  border: none;
  font-size: 17px;
  font-weight: 500;
  color: var(--head-level-txt-clr) !important;
  margin-block: 1.25rem 0.325rem;
  height: inherit;
  line-height: 1.2;
  border-radius: 0px;
  padding: 0px;
}

.toc__content h3 {
  font-size: 17px;
  font-weight: 500;
  color: var(--head-level-txt-clr);
  margin-block: 1.275rem 0.325rem;
}

.toc__content a {
  text-decoration: none;
}

  .toc__content a:hover {
    color: #0D6EFD;
    text-decoration: underline;
    text-underline-offset: 5px;
  }

#privacy-policy .toc__content ul.list__items {
  list-style: disc;
}

#privacy-policy .toc__content :is(ul.list__items, ol.list__items) {
  margin-top: 0.5rem;
  margin-left: 1rem;
  padding-left: 0px;
  padding-bottom: 0px;
  margin-bottom: 0px;
  color: var(--head-level-txt-clr);
}

#privacy-policy .toc__contents p[data-custom-class="heading-2"] {
  margin-block-start: calc(2rem * 1.25);
  font-size: 15px;
  color: var(--enduser-txt-clr);
  margin-block-end: 0.35rem;
}

.kubernetes-cluster-name,
.virtual-machine-name,
.managed-instance-name {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /*flex: 1;*/
}

:is(.kubernetes-cluster-name, .virtual-machine-name, .managed-instance-name) span {
  display: flex;
}

p.text-muted {
  color: var(--txt-muted-clr) !important;
}

/*Dialog*/
.fluent-dialog-body > fluent-select.collapsible {
  margin-block-end: 1.5rem;
}

/* ==== Carousel Slider ==== */
.carousel {
  display: flex;
  justify-content: center;
  margin-inline: auto;
}

.carousel-inner {
  width: calc(100% - 100px) !important;
  padding: 2.25rem;
}

.carousel-control-prev,
.carousel-control-next {
  width: 30px !important;
  height: 30px;
}

.carousel-control-prev {
  top: 50% !important;
  left: 55px !important;
}

.carousel-control-next {
  top: 50% !important;
  right: 55px !important;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: #888;
  border: solid 1px #888;
  padding: 25px;
}

/*Resizable*/
fluent-data-grid-cell:last-child fluent-divider {
  display: none;
}

/* ==== Dialog Box ==== */

.footer-btn::part(control) {
  background: transparent !important;
  color: var(--white-clr) !important;
  border: none !important;
  position: absolute;
  right: 0px;
  font-size: 12px;
}

  .footer-btn::part(control):hover {
    color: #e1e1e1 !important;
  }

.carousel-indicators {
  bottom: -0.5rem !important;
}

.light .carousel-indicators [data-bs-target] {
  border-top: solid 10px transparent !important;
  border-bottom: solid 10px transparent !important;
  background-color: var(--border-clr) !important;
}

.adj-width::part(control) {
  width: calc(var(--dialog-width) - 2 * 0px) !important;
}

fluent-dialog.adj-height::part(control) {
  --dialog-height: 500px;
  height: calc(var(--dialog-height) - 2 * 24px) !important;
}

fluent-dialog.adj-height .fluent-dialog-body fluent-data-grid {
  width: 100%;
  max-height: calc(var(--dialog-height) - 2 * 85px);
}

fluent-dialog:not([class*="right"]) .fluent-dialog-header {
  padding-bottom: 0px !important;
}

/* ==== Callout ==== */
#myPopoverButtonF::part(control) {
  background: transparent;
  border: none;
}

fluent-anchored-region .stack-vertical {
  position: absolute;
  top: 0.85rem;
  right: 0rem;
  max-width: 350px;
}

.fluent-popover-content {
  display: grid;
  grid-gap: 0px;
  background: var(--callout-bg-clr) !important;
  border: solid 1px var(--border-clr);
}

  .fluent-popover-content div[part="header"] {
    height: calc(100px - 1rem);
    margin-bottom: 2px !important;
  }

.profile-box,
.profile-container {
  padding-inline: 0px;
}

.profile-details {
  display: flex;
  align-items: center;
  grid-gap: 15px;
  border-bottom: solid 1px #5a6a8525;
  padding-bottom: 0.6rem;
}

.fluent-persona .initials {
  padding: 0.15rem;
}

.profile-content {
  color: var(--body-txt-clr);
  display: flex;
  align-items: start;
  flex-direction: column;
}

.profile-details .profile-content h5 {
  font-size: 0.875rem;
  margin-bottom: 5px;
}

.profile-details .profile-content h6 {
  font-size: 0.825rem;
  font-weight: 400;
  margin-bottom: 0px;
}

.profile-details .profile-content p {
  font-size: 0.825rem;
  font-weight: 400;
  margin-bottom: 0px;
}

  .profile-details .profile-content p svg {
    fill: var(--body-txt-clr) !important;
  }

.profile-body {
  margin-block: 0.5rem;
  display: flex;
  align-items: center;
}

  .profile-body ul {
    padding: 0px;
    margin: 0px;
    width: 100%;
  }

  .profile-body a {
    margin: 0px;
    padding: 0px;
    text-decoration: none;
    grid-gap: 10px;
    width: 100%;
  }

    .profile-body a:hover {
      background: var(--profile-bx-hyperlink-hover-bg-clr);
      /*background: #3554720f;*/
    }

      .profile-body a:hover span {
        border: solid 1px var(--profile-bx-hyperlink-hover-bg-clr);
      }

    .profile-body a span {
      border: solid 1px rgb(158, 158, 158);
      border-radius: 50% !important;
      opacity: 0.5;
      padding: 10px;
    }

      .profile-body a span svg {
        width: 25px !important;
        height: 25px !important;
        fill: var(--body-txt-clr) !important;
      }

    .profile-body a div {
      color: var(--body-txt-clr);
      /*opacity: 0.5;*/
    }

      .profile-body a div h6 {
        font-size: 14px;
      }

.profile-button {
  display: grid;
  margin-block: 15px 5px;
}

  .profile-button a {
    color: var(--profile-bx-btn-txt-clr);
  }

  .profile-button:focus {
    outline: none;
  }

  .profile-button .btn:is(:hover, :focus) {
    color: var(--white-clr) !important;
  }

    .profile-button .btn:is(:hover, :focus) svg {
      fill: var(--white-clr) !important;
    }

.compact-totals {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  font-size: 14px;
  padding: 5px 10px;
  background-color: #f5f5f5;
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.compact-total {
  display: flex;
  align-items: center;
  gap: 5px; /* Add space between icon and text */
  margin-right: 15px; /* Add space between total items */
}

  .compact-total:last-child {
    margin-right: 0; /* Remove margin from the last item */
  }

  .compact-total i {
    font-size: 18px;
    color: #007bff;
  }

  .compact-total .total-value {
    font-weight: bold;
    margin-left: 5px;
  }

  .compact-total.savings .total-value {
    color: green;
  }

.dark .compact-totals {
  background-color: #0081eb2b;
}

/* Custom Properties */
.dark .fluent-persona .initials {
  background: var(--header-accent-btn-bg-clr) !important;
  color: var(--white-clr) !important;
}

.custom-heading {
  border-radius: 2px;
  padding: 10px 25px 10px 25px;
  border-bottom: 2px solid #ebebeb;
  margin: 0;
  color: #374151
}

.dark fluent-checkbox::part(control) {
  background: var(--fluent-dialog-bx-bg-clr) !important;
  color: var(--white-clr) !important;
}

.dark fluent-checkbox.checked::part(control) {
  background: var(--header-accent-btn-bg-clr) !important;
}

.dark :host(.checked) :is(slot[name="checked-indicator"], slot[name='indeterminate-indicator']) {
  fill: var(--white-clr) !important;
}

fluent-data-grid-row fluent-data-grid-cell[cell-type="columnheader"] {
  margin: 0rem;
}

  fluent-data-grid-row fluent-data-grid-cell[cell-type="columnheader"]:focus-visible {
    outline: solid 0px transparent !important;
  }

fluent-data-grid-cell[cell-type="columnheader"] fluent-button.col-options-button {
  min-width: 20px !important;
  height: 20px !important;
}

fluent-data-grid-cell[cell-type="columnheader"]:first-child {
  /*margin-left: 0.5rem;*/
  padding-inline: 0.5rem !important;
}
/*If want use this style*/
/*fluent-data-grid-cell:first-child:not([cell-type="columnheader"]) {
    padding-inline-start: 0.5rem !important;
}*/
/*fluent-button[type="button"]::part(control) {
    border-radius: 2px !important;
}*/
.keycapture .col-sort-container fluent-button {
  padding-inline-end: 0px !important;
}

fluent-divider {
  margin-inline: 0rem;
  min-width: 4px !important;
  width: 4px !important;
}
/* ==== Cookie Styles ==== */
/* Reuse Styles */
/*.link, .cookie-link {
  color: #0d6efd;
}*/

/*:is(.link, .cookie-link):hover {
  text-decoration: underline;
  text-underline-offset: 5px;
  color: #0d6efd;
}*/

.ff-arial {
  /*font-family: Arial;*/
}

.ff-basker {
  /*font-family: 'Baskerville Old Face';*/
}
/* Content */
/*.link, .cookie-link {
  text-decoration: none;
  color: #0d6efd;
}*/

/*:is(.link, .cookie-link):hover {
  text-decoration: underline;
  text-underline-offset: 5px;
  color: #0d6efd;
}*/

.body__text > p {
  margin-block: 0.5rem;
  color: var(--enduser-txt-clr) !important;
}

.wrapper :is(.content, .subcontent) {
  margin-block: 0.75rem;
  padding-block: 0.75rem;
  padding-inline: 0.25rem;
}

.heading-1 {
  font-size: 16px;
  line-height: 1.5;
  color: var(--head-level-txt-clr);
  margin-block-end: 0.5rem;
}

.heading-2 {
  font-size: 15px;
  font-weight: bold;
  color: var(--head-level-txt-clr);
  margin-block-end: 0.35rem;
}

.paragraph {
  font-size: 15px;
  line-height: 1.5;
  margin-block-end: 0.725rem;
  color: var(--enduser-txt-clr);
}
/* Table */
.cookie-table {
  width: 100%;
  margin: 0 0 10px;
}

.cookie-table-content {
  padding: 10px;
}

  .cookie-table-content table {
    border-collapse: collapse;
  }

    .cookie-table-content table td {
      border: solid 1px #c4c4c4;
      padding: 5px;
    }

.cookie-row {
  font-size: 13px;
  line-height: 1.67;
  vertical-align: middle;
}

.cookie-label {
  text-align: right;
  color: var(--cookie-label-txt-clr);
  min-width: 80px;
}

.cookie-data {
  color: var(--cookie-data-txt-clr);
  word-break: break-all;
}
/* List Items */
.list__items {
  list-style: disc;
  margin-left: 1.5rem;
  margin-block-end: 0.725rem;
}

.list__item {
  font-size: 15px;
  margin-block: 0.5rem;
}

  .list__item a {
    color: inherit;
  }

    .list__item a:hover {
      text-decoration: none;
    }

fluent-badge.neutral::part(control) {
  background: var(--badge-fill-somevalue);
  color: var(--badge-color-somevalue);
  border: solid 1px transparent;
}

.dialog-wh .fluent-dialog-body {
  overflow: hidden scroll;
}

.dialog-wh::part(control) {
  width: var(--dialog-width) !important;
  max-height: var(--dialog-height) !important;
}

#footer-dialog::part(control) {
  --dialog-height: 500px;
  height: calc(var(--dialog-height) - 2 * 24px) !important;
}

#footer-dialog :is(.end-user, #privacy-policy) {
  width: 100%;
  height: calc(var(--dialog-height) - 2 * 75px);
  overflow: hidden scroll;
}

.border-bottom-1 {
  border-bottom: solid 1px var(--border-clr) !important;
  border-bottom-right-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
}

fluent-accordion-item.vm-details-label.expanded::part(region) {
  border-top: solid 1px var(--border-clr) !important;
  border-bottom-right-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
}

fluent-accordion-item span[slot="heading"] {
  color: var(--vm-dialog-bx-label-clr) !important;
}

fluent-accordion-item p.clr-4 {
  color: var(--vm-dialog-bx-value-clr) !important;
}

.right-view {
  display: inline-block;
  text-align: right;
}

/*If want use this styles*/
fluent-data-grid-cell[cell-type="columnheader"] {
  padding-inline: 0.5rem !important;
  /*border: solid 1px black;*/
}

.inline-block fluent-data-grid-cell[cell-type="default"].col-justify-start {
  display: inline-block !important;
}

fluent-data-grid-cell[cell-type="default"] {
  padding-inline: 0.5rem !important;
  margin: 0rem !important;
  /*border: solid 1px black;*/
}

  fluent-data-grid-cell[cell-type="default"].right-view {
    padding-inline-end: calc(1rem + 50px) !important;
  }

fluent-data-grid-row[row-type="default"] fluent-data-grid-cell:last-child {
  /*background: red;*/
}

.dark .dropdown-accordian .accordion-body {
  background-color: var(--fluent-card-bg);
  border: solid 1px var(--border-clr) !important;
}

.dark .dropdown-accordian .accordion-item {
  border: solid 0px transparent !important;
  border-radius: 0px !important;
}

.centered {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 45vh; /* Full height of the viewport */
}


fluent-data-grid-cell[cell-type="columnheader"] fluent-divider[aria-orientation="vertical"] {
  margin-inline: 0.3rem;
}

fluent-data-grid-cell[cell-type="columnheader"] span.keycapture {
  display: inline-block !important;
  text-overflow: ellipsis !important;
  overflow: hidden;
}

.btn-primary-clr-1 {
  background: padding-box linear-gradient(#046bbc, #046bbc), border-box linear-gradient(#1d7ac3 90%, #034980 100%);
  color: var(--white-clr) !important;
}

.fz-2 {
  font-size: 12px !important;
}
/*.list-bx #people-listbox:hover::part(control) {
    background: red;
}*/

.fluent-dialog-body fluent-data-grid {
  margin-bottom: 16px;
}

.custom-display {
  display: inline-block;
}
/* Custom Select Styling */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.custom-select-wrapper {
  position: relative;
}

.custom-select {
  position: relative;
  background: white;
  border-radius: 0.5rem;
  cursor: pointer;
}

  .custom-select select {
    width: 100%;
    padding: 0.625rem 1rem;
    background: transparent;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    outline: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    cursor: pointer;
  }

    .custom-select select:focus {
      border-color: #3b82f6;
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

/* Dropdown Styles */
select option {
  padding: 12px;
  background: white;
  color: #1f2937;
  border: none;
}

  select option:checked,
  select option:hover {
    background: #60a5fa !important;
    color: white !important;
  }

/* Custom arrow */
.custom-select::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #6b7280;
  pointer-events: none;
}

@media (forced-colors: active) {
  .custom-select::after {
    border-top-color: CanvasText;
  }
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    align-items: stretch;
    padding: 1rem;
  }

    .header-content > div {
      margin-bottom: 1rem;
    }

  .search-section {
    width: 100%;
  }

    .search-section input {
      width: 100%;
    }

  .dashboard-controls {
    flex-direction: column;
    gap: 1rem;
  }

    .dashboard-controls > div {
      width: 100%;
    }

  .chart-container {
    min-height: 300px;
  }

  .metric-card {
    margin-bottom: 1rem;
  }
}

/* Modern Dropdown Styles */
.modern-dropdown {
  position: relative;
  width: 100%;
  height: 44px;
  min-width: inherit !important;
}

.modern-dropdown-btn {
  width: 100%;
  /*padding: 8px 16px;*/
  background: white;
  /*border: 1px solid #e5e7eb;*/
  border-radius: 8px;
  text-align: left;
  font-size: 1rem;
  color: #374151;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.2s;
}

  .modern-dropdown-btn:hover {
    border-color: #d1d5db;
  }

  /*.modern-dropdown-btn:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  }*/

.modern-dropdown-content {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s;
}

.modern-dropdown.active .modern-dropdown-content {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.modern-dropdown-item {
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
}

  .modern-dropdown-item:first-child {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }

  .modern-dropdown-item:last-child {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
  }

  .modern-dropdown-item:hover {
    background: #60a5fa;
    color: white;
  }

  .modern-dropdown-item.selected {
    background: #60a5fa;
    color: white;
  }

  .modern-dropdown-item i {
    margin-right: 8px;
    opacity: 0;
  }

  .modern-dropdown-item.selected i {
    opacity: 1;
  }

body {
  font-family: 'Inter', sans-serif !important;
}

#container .stack-horizontal {
  gap: 0rem !important;
  align-items: unset !important;
}

  #container .stack-horizontal.fluent-dialog-footer {
    gap: 0.5rem !important;
  }

/* Data Grid */
:is(#tw-data-grid, #tw-panel-data-grid) {
  background: rgba(255 255 255 / 1);
}

  :is(#tw-data-grid, #tw-panel-data-grid) th {
    height: 52px !important;
  }

#tw-data-grid td {
  height: 62px !important;
}

:is(#tw-data-grid, #tw-panel-data-grid) th.column-header {
  display: flex;
  font-size: 0.875rem !important;
  /*font-family: 'Inter', sans-serif;*/
  font-weight: 600;
  color: rgb(55 65 81 / 1);
  text-align: left;
  text-transform: uppercase;
  line-height: 1.25rem;
  letter-spacing: 0.05em;
  background-color: rgb(249 250 251 / 1) !important;
  padding-block: 0.6rem;
  padding-inline: 1rem 0.1rem;
  white-space: nowrap;
  box-shadow: inherit !important;
}

:is(#tw-data-grid, #tw-panel-data-grid) tbody tr:hover td {
  background-color: rgb(249 250 251 / 1);
}

:is(#tw-data-grid, #tw-panel-data-grid) th.column-header .col-sort-button::part(control) {
  font-size: 0.875rem !important;
  font-weight: 600;
  color: rgb(55 65 81 / 1) !important;
  text-align: left;
  text-transform: uppercase;
  line-height: 1.25rem;
  letter-spacing: 0.05em;
}

:is(#tw-data-grid, #tw-panel-data-grid) td.col-justify-start {
  font-size: 0.875rem;
  color: rgb(107 114 128 / 1);
  line-height: 1.25rem;
  padding-inline: 1.5rem;
  white-space: nowrap;
}

#tw-panel-data-grid td.col-justify-start {
  overflow-y: auto;
}

#tw-data-grid td.col-justify-start:first-of-type {
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

/* Buttons */
fluent-button {
  /*font-family: 'Inter', sans-serif;*/
}
/*:is(#neutralBtn, #dataGridNeutralBtn) {
  background: rgb(37 99 235 / 1);
}*/
:is(#neutralBtn, #dataGridNeutralBtn) {
  background: rgb(29 78 216 / 1);
}

  :is(#neutralBtn, #dataGridNeutralBtn)::part(control) {
    background: rgb(37 99 235 / 1);
    transition-duration: 150ms;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    color: rgb(255 255 255 / 1);
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding-block: 0.25rem;
    padding-inline: 0.75rem;
    border-radius: 0.25rem;
  }

  :is(#neutralBtn, #dataGridNeutralBtn)::part(control) {
    background: rgb(37 99 235 / 1);
    transition-duration: 150ms;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    color: rgb(255 255 255 / 1);
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding-block: 0.25rem;
    padding-inline: 0.75rem;
    border-radius: 0.25rem;
  }

    :is(#neutralBtn, #dataGridNeutralBtn)::part(control):hover {
      background: transparent;
    }


  :is(#neutralBtn, #dataGridNeutralBtn)::part(control) {
    background: rgb(37 99 235 / 1);
    transition-duration: 150ms;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    color: rgb(255 255 255 / 1);
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding-block: 0.25rem;
    padding-inline: 0.75rem;
    border-radius: 0.25rem;
  }

  :is(#neutralBtn, #dataGridNeutralBtn)::part(control) {
    background: rgb(37 99 235 / 1);
    transition-duration: 150ms;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    color: rgb(255 255 255 / 1);
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding-block: 0.25rem;
    padding-inline: 0.75rem;
    border-radius: 0.25rem;
  }

    :is(#neutralBtn, #dataGridNeutralBtn)::part(control):hover {
      background: transparent;
    }

:is(#editBtn, #deleteBtn)::part(control) {
  background: transparent;
}

:is(#neutralBtn, #dataGridNeutralBtn)::part(control) {
  background: rgb(37 99 235 / 1);
  transition-duration: 150ms;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  color: rgb(255 255 255 / 1);
  font-size: 0.875rem;
  line-height: 1.25rem;
  padding-block: 0.25rem;
  padding-inline: 0.75rem;
  border-radius: 0.25rem;
}

:is(#neutralBtn, #dataGridNeutralBtn)::part(control) {
  background: rgb(37 99 235 / 1);
  transition-duration: 150ms;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  color: rgb(255 255 255 / 1);
  font-size: 0.875rem;
  line-height: 1.25rem;
  padding-block: 0.25rem;
  padding-inline: 0.75rem;
  border-radius: 0.25rem;
}

  :is(#neutralBtn, #dataGridNeutralBtn)::part(control):hover {
    background: transparent;
  }

:is(#editBtn, #deleteBtn, #viewBtn)::part(control) {
  background: transparent;
}

#editBtn svg {
  fill: rgb(37 99 235 / 1) !important;
}

  #editBtn svg:hover {
    fill: rgb(30 64 175 / 1) !important;
  }

#deleteBtn svg {
  fill: rgb(220 38 38 / 1) !important;
}

  #deleteBtn svg:hover {
    fill: rgb(153 27 27 / 1) !important;
  }

/* Sidebar Scrollbar */
#sidebar nav::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

#sidebar nav::-webkit-scrollbar-thumb {
  background: rgb(51 65 85 / 1);
}

#hd-heading {
  font-size: 0.975rem;
  color: #374151;
  text-align: left;
  line-height: 1.25rem;
  letter-spacing: 0.02em;
  padding-inline: 1rem;
  white-space: nowrap;
}

#mng-user-btn::part(control) {
  background: unset;
}

.btn-application {
  width: 13rem; /* Keeps button size consistent */
}

@media (min-width: 2560px) { /* For 4K Screens */
  .btn-application {
    margin-left: auto;
    margin-right: 45%; /* Centers button within div */
  }
}

@media (min-width: 1441px) {
  .tw-data-grid-5 {
    grid-template-columns: repeat(5, 1fr) !important;
  }
}

#tw-data-grid th.column-header:last-of-type fluent-divider {
  display: none;
}

#tw-data-grid th .keycapture .col-sort-button {
  width: inherit !important;
}

.fluent-autocomplete-multiselect #hide-column-select-popup[role=listbox] fluent-option:not([disabled])[selectable] {
  border: none;
}
.fluent-autocomplete-multiselect div[role=listbox] fluent-option:not([disabled])[selectable] {
    border: none !important;
}

#hide-column-select::part(root) {
  border: solid 1px transparent !important;
  margin-block: 0.25rem;
  padding-inline: 1rem;
  background: transparent !important;
  border: solid 0px;
  margin-block: 0.25rem;
  padding-inline: 1rem;
  background: transparent !important;
  border: solid 1px transparent !important;
  margin-block: 0.25rem;
  padding-inline: 1rem;
  background: transparent !important;
}

#hide-column-select:not(:focus-within):hover::part(root) {
  background: transparent;
}

#daterange-select.form-select {
  background-image: none;
}

/*#daterange-select:hover {
  background: rgb(249 250 251 / 1);
}*/

#down-arrow-icon {
  position: absolute;
  top: 50%;
  right: 5%;
  transform: translate(-5%, -50%);
}

#calendar-icon {
  position: absolute;
  top: 50%;
  transform: translate(-5%, -50%);
  z-index: 100;
}


.custom-logs-grid .col-title {
  width: auto !important;
  max-width: 100% !important;
}

@media (max-width: 1660px) {
  .tw-data-grid-9 {
    grid-template-columns: 230px 200px 220px 220px 180px 150px 170px 170px 160px !important;
  }
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
  .vm-card {
    margin-bottom: 0.75rem;
  }

  /* Make schedule buttons more visible on mobile */
  .schedule-edit-btn,
  .schedule-override-btn {
    padding: 0.5rem !important;
    margin: 0 0.25rem !important;
  }

    .schedule-edit-btn i,
    .schedule-override-btn i {
      font-size: 1.25rem !important;
    }

  /* Add a more visible schedule section on mobile */
  .vm-card .schedule-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    background-color: #f9fafb;
    border-radius: 0.5rem;
    margin-top: 0.5rem;
  }

  /* Make schedule buttons container more prominent */
  .vm-card .schedule-buttons {
    display: flex !important;
    justify-content: flex-end;
    gap: 0.75rem !important;
    padding: 0.5rem;
    background-color: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  }

  /* Style individual schedule buttons */
  .schedule-buttons button {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  }

    /* Make icons larger and more visible */
    .schedule-buttons button i {
      font-size: 1.5rem;
    }

  /* Ensure schedule section is visible when card is expanded */
  .vm-card.expanded .vm-details {
    display: block !important;
  }

  /* Reduce overall card padding */
  .vm-card .p-4 {
    padding: 0.75rem 0.75rem 0.5rem 0.75rem !important;
  }

  /* Remove bottom margin from last element in card */
  .vm-card > div:last-child {
    margin-bottom: 0;
  }

  /* Adjust main content area */
  .vm-card .flex.items-center.justify-between {
    margin-bottom: 0;
  }

  /* Remove excess margins from status and buttons container */
  .vm-card .flex.items-center.gap-3:last-child {
    margin-top: 0.375rem;
    margin-bottom: 0;
  }

  /* Adjust VM info spacing */
  .vm-card .flex.items-center.gap-3:first-child {
    margin-bottom: 0.25rem;
  }

  /* Tighten metrics spacing */
  .vm-card .flex.items-center.gap-4 {
    margin-top: 0.25rem;
    margin-bottom: 0;
  }

  /* Remove any bottom padding from the last element */
  .vm-card > div:last-child,
  .vm-card .flex:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
  }

  /* Adjust expand icon container */
  .vm-card .expand-icon {
    margin-bottom: 0;
  }

  /* Remove bottom margin from buttons */
  .vm-card .action-buttons,
  .vm-card .schedule-btn,
  .vm-card .start-vm-main-btn,
  .vm-card .stop-vm-btn {
    margin-bottom: 0;
  }

  /* Ensure no padding at bottom of card when collapsed */
  .vm-card:not(.expanded) {
    padding-bottom: 0;
  }

  /* Remove bottom margin from status badge */
  .vm-card .rounded-full {
    margin-bottom: 0;
  }

  /* Adjust the bottom chevron icon */
  .vm-card .ri-arrow-down-s-line {
    margin-bottom: 0;
  }

  /* Remove any bottom spacing from the card footer */
  .vm-card .border-t {
    margin-bottom: 0;
    padding-bottom: 0;
  }

  /* Fix bottom line and space issue */
  .vm-card .expand-icon {
    display: none; /* Hide the expand icon in mobile view when card is not expanded */
  }

  .vm-card.expanded .expand-icon {
    display: block; /* Show only when card is expanded */
  }

  /* Remove any borders that might be showing */
  .vm-card > div:last-child {
    border-bottom: none;
  }

  .vm-card .vm-details {
    border-top: none;
  }

  /* Ensure the button container has no extra space */
  .vm-card .inline-flex.rounded-lg {
    margin-bottom: 0;
    border-bottom: none;
  }

  /* Remove any bottom borders from the main content area */
  .vm-card .p-4 {
    border-bottom: none;
  }

  /* Ensure the card itself has no bottom border when not expanded */
  .vm-card:not(.expanded) {
    border-bottom: none;
  }

  /* Fix button container spacing */
  .vm-card .flex.items-center.gap-3:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
  }

  /* Adjust the main content wrapper */
  .vm-card > div:first-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
  }
}

@media (max-width: 768px) {
  .vm-card {
    margin-bottom: 1rem;
  }

    .vm-card .flex {
      flex-wrap: wrap;
    }

    .vm-card .gap-3 {
      gap: 0.5rem !important;
    }

    .vm-card .gap-3 {
      gap: 0.5rem !important;
      ;
    }

    .vm-card .flex.items-center.gap-3 {
      width: 100%;
      /*justify-content: flex-end;*/
      justify-content: space-between;
      margin-top: 0.5rem;
    }

    .vm-card .flex.items-center.space-x-2 {
      flex-wrap: nowrap;
    }

    .vm-card .vm-details {
      padding: 1rem;
    }

      .vm-card .vm-details .grid {
        grid-template-columns: 1fr;
        gap: 1rem;
      }

    .vm-card .flex.items-center.justify-between {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.5rem;
    }

      .vm-card .flex.items-center.justify-between > div:last-child {
        width: 100%;
        justify-content: space-between;
      }

    .vm-card .quick-metrics {
      flex-wrap: wrap;
      gap: 0.5rem;
    }

    .vm-card .action-buttons {
      flex-direction: row;
      gap: 0.5rem;
      margin-top: 0.5rem;
    }

    .vm-card .schedule-btn {
      margin-left: 0.5rem;
    }

  .modern-dropdown {
    width: 100%;
  }

  .modern-dropdown-content {
    max-width: calc(100vw - 2rem);
  }
}

.fluent-menubutton-container {
  position: static !important;
}

  .fluent-menubutton-container > fluent-button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: 1px
  }

    .fluent-menubutton-container > fluent-button::part(control) {
      padding-left: 0;
    }

.fluent-start-button {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  margin-top: 1.7px;
}

  .fluent-start-button.neutral::part(control) {
    background: rgb(37,99,235 );
  }

.fluent-menubutton-container > fluent-button.accent::part(control) {
  background: rgb(37,99,235 );
}

#dialog-footer-btn-container {
  justify-content: end !important;
  ;
}

:is(#startTime-input, #stopTime-input)::part(control) {
  cursor: pointer;
}

:is(#startTime-input, #stopTime-input)::part(root) {
  cursor: pointer;
}

/* ManageApp Resources Azure */
/* Selection */
/*:is(#landingZoneSelect, #applicationSelect)::part(control) {
  width: 100%;
  padding: 8px 16px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  text-align: left;
  font-size: 0.875rem;
  color: #374151;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.2s;
}*/

/* Tabs */
.tab-container {
  border-radius: 0 0 0.5rem 0.5rem;
  background-color: #f9fafb;
  margin: 0;
  overflow-x: auto;
}

.tab-list {
  scrollbar-width: none;
  -ms-overflow-style: none;
  max-width: 100%;
}

  .tab-list::-webkit-scrollbar {
    display: none;
  }
/* Tabs Head */
#tab-1 {
  margin-left: 1.5rem;
}

:is(#tab-1, #tab-2, #tab-3, #tab-4, #tab-5, #tab-6) {
  padding: 1rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #6b7280;
  border-bottom: solid 2px transparent;
  white-space: nowrap;
  display: flex;
  align-items: center;
  position: relative;
  transition: all 0.2s ease;
  height: inherit;
}

  :is(#tab-1, #tab-2, #tab-3, #tab-4, #tab-5, #tab-6):hover {
    color: #4b5563;
    background-color: rgba(243, 244, 246, 0.8);
  }

  :is(#tab-1, #tab-2, #tab-3, #tab-4, #tab-5, #tab-6)[aria-selected="true"] {
    color: #2563eb;
    font-weight: 600;
  }

  :is(#tab-1, #tab-2, #tab-3, #tab-4, #tab-5, #tab-6) i {
    margin-right: 0.5rem;
    font-size: 1.125rem;
  }

  :is(#tab-1, #tab-2, #tab-3, #tab-4, #tab-5, #tab-6)::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: transparent;
    transition: background-color 0.2s ease;
  }

  :is(#tab-1, #tab-2, #tab-3, #tab-4, #tab-5, #tab-6):hover::after {
    background-color: #d1d5db;
  }

  :is(#tab-1, #tab-2, #tab-3, #tab-4, #tab-5, #tab-6)[aria-selected="true"]::after {
    background-color: #2563eb;
  }
/* Tabs Body */
.tab {
  padding: 0;
  border-top: 1px solid #e5e7eb;
}

.resource-content {
  padding: 0;
  background-color: white;
  width: 100%;
}

.resource-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1rem 1rem 1.5rem;
  border-bottom: 1px solid #e5e7eb;
  background-color: white;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.add-resource-container {
  padding: 1rem 1.5rem;
  background-color: white;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

:is(#tabBtn-1, #tabBtn-2, #tabBtn-3, #tabBtn-4, #tabBtn-5, #tabBtn-6) {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
}

  :is(#tabBtn-1, #tabBtn-2, #tabBtn-3, #tabBtn-4, #tabBtn-5, #tabBtn-6)::part(control) {
    background: #2563eb;
    color: white;
    box-shadow: 0 1px 3px 0 rgba(0 0 0 / 0.1), 0 1px 2px 0 rgba(0 0 0 / 0.06);
    border: solid 1px transparent;
    opacity: 1;
    padding: 0.625rem 1.25rem;
    border-radius: 0.375rem;
  }

  :is(#tabBtn-1, #tabBtn-2, #tabBtn-3, #tabBtn-4, #tabBtn-5, #tabBtn-6) .icon {
    margin-right: 0.5rem;
    font-size: 1rem;
  }

:is(#tabBtn-1, #tabBtn-2, #tabBtn-3, #tabBtn-4, #tabBtn-5, #tabBtn-6, #dialog-panel-ec2-addBtn, #dialog-panel-rds-addBtn, #dialog-panel-vm-addBtn,#dialog-panel-vm-optionalBtn, #dialog-panel-kc-addBtn, #dialog-panel-sql-addBtn, #dialog-panel-web-addBtn, #dialog-panel-func-addBtn, #dialog-panel-log-addBtn).disabled::part(control) {
  opacity: 0.3;
}

:is(#tabBtn-1, #tabBtn-2, #tabBtn-3, #tabBtn-4, #tabBtn-5, #tabBtn-6, #dialog-panel-ec2-addBtn, #dialog-panel-rds-addBtn, #dialog-panel-vm-addBtn, #dialog-panel-kc-addBtn, #dialog-panel-sql-addBtn, #dialog-panel-web-addBtn, #dialog-panel-func-addBtn, #dialog-panel-log-addBtn).disabled::part(control) {
  opacity: 0.3;
}

.search-sort-container {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
}

.search-bx {
  position: relative;
  flex: 1;
  max-width: 300px;
}

  .search-bx input {
    width: 100%;
    padding: 0.5rem 2.5rem 0.5rem 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    font-size: 0.875rem;
  }

  .search-bx i {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #6b7280;
  }

.animate-fade-in-1s {
  animation: fade-in 1s ease-in-out;
}

.animate-fade-in-2s {
  animation: fade-in 2s ease-in-out;
}

.animate-fade-in-3s {
  animation: fade-in 3s ease-in-out;
}

.animate-slide-in-right-1s {
  animation: fade-in-right 1s ease-in-out;
}

.animate-slide-in-right-2s {
  animation: fade-in-right 2s ease-in-out;
}

.animate-slide-in-right-3s {
  animation: fade-in-right 3s ease-in-out;
}

.animate-scale-in-1s {
  animation: scale-in 1s ease-in-out;
}

.animate-scale-in-2s {
  animation: scale-in 2s ease-in-out;
}

.animate-scale-in-3s {
  animation: scale-in 3s ease-in-out;
}

.animate-glow-1s {
  animation: glow 1s ease-in-out infinite alternate;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in-right {
  from {
    opacity: 0;
    transform: translateX(50px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scale-in {
  from {
    opacity: 0;
    transform: translateX(50px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes glow {
  from {
    box-shadow: 0 0 20px rgba(59 130 246 / 0.5);
  }

  to {
    box-shadow: 0 0 30px rgba(59 130 246 / 0.5);
  }
}

/* Resource Card */
.resource-cards-container {
  padding: 1.5rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.resource-card {
  width: 100%;
  background-color: white;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease-in-out;
}

  .resource-card:last-child {
    margin-bottom: 0;
  }

  .resource-card:hover {
    background-color: #f9fafb;
    border-color: #d1d5db;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
  }

.resource-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.resource-card-title {
  font-size: 1rem;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.resource-card-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
}


.resource-card-info {
  display: flex;
  gap: 1.5rem;
}

.resource-card-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #6b7280;
  font-size: 0.875rem;
}

  .resource-card-group i {
    font-size: 1rem;
    color: #6b7280;
  }

.resource-card-actions {
  display: flex;
  gap: 0.5rem;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  gap: 0.375rem;
}

  .status-badge i {
    font-size: 1rem;
  }

  .status-badge.running {
    background-color: #dcfce7;
    color: #15803d;
  }

  .status-badge.deallocated {
    background-color: #fee2e2;
    color: #b91c1c;
  }

:is(#resource-card-vm-deleteBtn, #resource-card-kc-deleteBtn, #resource-card-sql-deleteBtn, #resource-card-web-deleteBtn, #resource-card-func-deleteBtn, #resource-card-log-deleteBtn, #resource-card-ec2-deleteBtn, #resource-card-rds-deleteBtn).neutral::part(control) {
  background: none !important;
}

:is(#resource-card-vm-deleteBtn, #resource-card-kc-deleteBtn, #resource-card-sql-deleteBtn, #resource-card-web-deleteBtn, #resource-card-func-deleteBtn, #resource-card-log-deleteBtn, #resource-card-ec2-deleteBtn, #resource-card-rds-deleteBtn)::part(control) {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.375rem;
  border: 1px solid #e5e7eb;
  background-color: white;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

  :is(#resource-card-vm-deleteBtn, #resource-card-kc-deleteBtn, #resource-card-sql-deleteBtn, #resource-card-web-deleteBtn, #resource-card-func-deleteBtn, #resource-card-log-deleteBtn, #resource-card-ec2-deleteBtn, #resource-card-rds-deleteBtn)::part(control):hover {
    background: #fee2e2 !important;
    border-color: #fecaca;
    color: #dc2626;
  }

  :is(#resource-card-vm-deleteBtn, #resource-card-kc-deleteBtn, #resource-card-sql-deleteBtn, #resource-card-web-deleteBtn, #resource-card-func-deleteBtn, #resource-card-log-deleteBtn, #resource-card-ec2-deleteBtn, #resource-card-rds-deleteBtn)::part(control) i {
    font-size: 1rem;
  }

:is(#tabCard, #tabCard-2, #tabCard-3, #tabCard-4, #tabCard-5, #tabCard-6) {
  padding: 0;
}

.resource-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: #6b7280;
  font-size: 0.875rem;
  flex-wrap: wrap;
}

.resource-meta-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

  .resource-meta-item i {
    color: #4b5563;
    font-size: 1.125rem;
  }

.resource-meta-label {
  color: #6b7280;
}

.resource-meta-value {
  font-weight: 500;
  color: #374151;
}

.resource-meta-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

@media (max-width: 768px) {
  .resource-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

    /* Keep resource-meta horizontal for App Service details */
    .resource-header-enhanced .resource-meta-enhanced {
        flex-direction: row !important;
        align-items: center !important;
        gap: 0.5rem !important;
        flex-wrap: wrap !important;
    }

  .tab-list {
    padding: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .tab {
    padding: 0.75rem 1rem;
    font-size: 0.813rem;
  }

  .add-resource-container {
    flex-direction: column;
    gap: 1rem;
  }

  .search-sort-container {
    flex-direction: column;
    width: 100%;
  }

  .search-bx {
    max-width: 100%;
  }

  .sort-dropdown {
    width: 100%;
  }

  .action-button {
    width: 100%;
  }

  .resource-card-body {
    flex-direction: column;
    gap: 1rem;
  }

  .resource-card-info {
    flex-direction: column;
    gap: 0.5rem;
  }

  .resource-card-actions {
    justify-content: flex-start;
  }

  .resource-details-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .modern-dropdown {
    width: 100%;
  }

  .resource-meta-item {
    width: 100%;
  }
    /* Ensure App Service and Location stay horizontal even on very small screens */
    .resource-header-enhanced .resource-meta-enhanced {
        flex-direction: row;
        align-items: center;
        gap: 0.25rem;
        flex-wrap: nowrap;
        font-size: 0.75rem;
    }

    .resource-header-enhanced.resource-meta-enhanced .resource-type,
    .resource-header-enhanced.resource-meta-enhanced .resource-separator,
    .resource-header-enhanced.resource-meta-enhanced .resource-location {
        white-space: nowrap;
    }
}

.tw-modal-container {
  position: relative;
  z-index: 102;
  width: 90%;
  max-width: 500px;
  margin: 1rem auto;
}

.tw-modal-content {
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

:is(#tw-modal-header-vm, #tw-modal-header-kc, #tw-modal-header-sql, #tw-modal-header-web, #tw-modal-header-func, #tw-modal-header-log, #tw-modal-header-ec2, #tw-modal-header-rds, #tw-modal-header-viewScaler, #tw-modal-header-addScaler) {
  display: flex;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 1rem 1.5rem;
  padding-bottom: 1rem !important;
  border-bottom: 1px solid #e5e7eb;
}

  :is(#tw-modal-header-vm, #tw-modal-header-kc, #tw-modal-header-sql, #tw-modal-header-web, #tw-modal-header-func, #tw-modal-header-log, #tw-modal-header-ec2, #tw-modal-header-rds, #tw-modal-header-viewScaler, #tw-modal-header-addScaler) h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #111827;
    margin: 0;
  }

.tw-modal-body {
  padding: 1.5rem !important;
  max-height: 80vh;
  overflow-y: auto;
}

#tw-modal-body-viewScaler {
  padding: 0 !important;
}

:is(#tw-modal-footer-vm, #tw-modal-footer-kc, #tw-modal-footer-sql, #tw-modal-footer-web, #tw-modal-footer-func, #tw-modal-footer-log, #tw-modal-footer-ec2, #tw-modal-footer-rds, #tw-modal-footer-viewScaler, #tw-modal-footer-addScaler) {
  display: flex;
  justify-content: flex-end !important;
  padding: 1rem 1.5rem;
  border-top: 1px solid #e5e7eb;
  gap: 0.75rem;
}

:is(#dialog-panel-vm-addBtn, #dialog-panel-vm-optionalBtn,#dialog-panel-kc-addBtn, #dialog-panel-sql-addBtn, #dialog-panel-web-addBtn, #dialog-panel-func-addBtn, #dialog-panel-log-addBtn, #dialog-panel-ec2-addBtn, #dialog-panel-rds-addBtn).neutral::part(control) {
  color: rgb(255, 255, 255);
  background: rgb(37 99 235 / 1);
  border: solid 1px transparent;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
}

:is(#dialog-panel-vm-delBtn, #dialog-panel-kc-delBtn, #dialog-panel-sql-delBtn, #dialog-panel-web-delBtn, #dialog-panel-func-delBtn, #dialog-panel-log-delBtn, #dialog-panel-ec2-delBtn, #dialog-panel-rds-delBtn, #dialog-panel-scaler-viewBtn).neutral::part(control) {
  color: rgb(55, 65, 81);
  background: rgb(255, 255, 255);
  border: solid 1px rgb(209 213 219 / 1);
  border-radius: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
}

  :is(#dialog-panel-vm-delBtn, #dialog-panel-kc-delBtn, #dialog-panel-sql-delBtn, #dialog-panel-web-delBtn, #dialog-panel-func-delBtn, #dialog-panel-log-delBtn, #dialog-panel-ec2-delBtn, #dialog-panel-rds-delBtn, #dialog-panel-scaler-viewBtn).neutral::part(control):hover {
    background: rgb(249 250 251 / 1);
  }

#users-btn {
  display: inline-flex;
  align-items: center;
  padding: 1.25rem 0.425rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #2563eb;
  background: white;
  border: 2px solid #2563eb;
  border-radius: 0.5rem;
  transition: all 0.2s;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.05);
}

  #users-btn:hover {
    color: white;
    background: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(37, 99, 235, 0.1);
  }

  #users-btn i {
    margin-right: 0.5rem;
    font-size: 1.125rem;
  }

  #users-btn.neutral::part(control) {
    background: transparent;
    border: solid 1px transparent;
    color: inherit;
  }

:is(#multi-select-vm, #multi-select-kc, #multi-select-sql, #multi-select-web, #multi-select-func, #multi-select-log, #multi-select-ec2, #multi-select-rds) {
  min-width: 100%;
}

  :is(#multi-select-vm, #multi-select-kc, #multi-select-sql, #multi-select-web, #multi-select-func, #multi-select-log, #multi-select-ec2, #multi-select-rds)::part(listbox) {
    width: 100%;
    padding-block: 0.5rem;
    padding-inline: 0.75rem;
    border: solid 1px;
    border-color: rgb(209, 213, 219);
    border-radius: 0.375rem;
    box-shadow: inherit;
    position: relative;
  }

    :is(#multi-select-vm, #multi-select-kc, #multi-select-sql, #multi-select-web, #multi-select-func, #multi-select-log, #multi-select-ec2, #multi-select-rds)::part(listbox):focus {
      outline: solid 2px transparent;
      outline-offset: 2px;
      border-color: rgb(59, 130, 246);
    }

  :is(#multi-select-vm, #multi-select-kc, #multi-select-sql, #multi-select-web, #multi-select-func, #multi-select-log, #multi-select-ec2, #multi-select-rds) fluent-option {
    background: inherit;
    margin-block: 2px;
  }

    :is(#multi-select-vm, #multi-select-kc, #multi-select-sql, #multi-select-web, #multi-select-func, #multi-select-log, #multi-select-ec2, #multi-select-rds) fluent-option:hover:not([disabled]) {
      background: #eff6ff;
    }

    :is(#multi-select-vm, #multi-select-kc, #multi-select-sql, #multi-select-web, #multi-select-func, #multi-select-log, #multi-select-ec2, #multi-select-rds) fluent-option[disabled] {
      background: rgb(249, 250, 251);
      color: rgb(107, 114, 128);
      cursor: not-allowed;
      margin-block: 2px;
    }

:is(#delete-vm-dialog-body, #delete-aks-dialog-body, #delete-sql-dialog-body, #delete-web-dialog-body, #delete-ec2-dialog-body, #delete-rds-dialog-body, #delete-scaler-dialog-body) {
  padding: 1rem;
}

:is(#delete-vm-dialog-footer, #delete-aks-dialog-footer, #delete-sql-dialog-footer, #delete-web-dialog-footer, #delete-ec2-dialog-footer, #delete-rds-dialog-footer, #delete-scaler-dialog-footer) {
  display: flex;
  justify-content: flex-end !important;
  padding: 1rem 1.5rem;
  gap: 0.75rem;
}

:is(#delete-vm-dialog-noBtn, #delete-aks-dialog-noBtn, #delete-sql-dialog-noBtn, #delete-web-dialog-noBtn, #delete-ec2-dialog-noBtn, #delete-rds-dialog-noBtn, #delete-scaler-dialog-noBtn).neutral::part(control) {
  color: rgb(55, 65, 81);
  background: rgb(255, 255, 255);
  border: solid 1px rgb(209 213 219 / 1);
  border-radius: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
}

  :is(#delete-vm-dialog-noBtn, #delete-aks-dialog-noBtn, #delete-sql-dialog-noBtn, #delete-web-dialog-noBtn, #delete-ec2-dialog-noBtn, #delete-rds-dialog-noBtn, #delete-scaler-dialog-noBtn).neutral::part(control):hover {
    background: rgb(249 250 251 / 1);
  }

:is(#delete-vm-dialog-yesBtn, #delete-aks-dialog-yesBtn, #delete-sql-dialog-yesBtn, #delete-web-dialog-yesBtn, #delete-ec2-dialog-yesBtn, #delete-rds-dialog-yesBtn, #delete-scaler-dialog-yesBtn).neutral::part(control) {
  color: rgb(255, 255, 255);
  background: rgb(37 99 235 / 1);
  border: solid 1px transparent;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
}

span.loading-button {
  opacity: 0.3;
}

.user-list {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.2rem;
}

.user-card {
  display: flex;
  align-items: center;
  padding: 1rem;
  background-color: #f8fafc;
  border-radius: 0.5rem;
  transition: all 0.2s;
  border: 1px solid #e5e7eb;
  gap: 1rem; /* Consistent spacing between elements */
}

  .user-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    background-color: white;
  }

.user-avatar {
  width: 2.5rem !important;
  height: 2.5rem !important;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.875rem;
  flex-shrink: 0; /* Prevent avatar from shrinking */
}

.user-info {
  flex: 1;
  min-width: 0; /* Prevent text overflow issues */
}

.user-name {
  font-weight: 600;
  color: #1f2937;
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
}

.user-email {
  color: #6b7280;
  font-size: 0.813rem;
}

.side-panel-content {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.fluent-persona .initials[b-n7zog0zvqi] {
  background: none !important;
  color: #1e40af !important;
}

fluent-dialog[class~="right"][b-dsxskpj5rr]::part(control) {
  padding: 0 !important;
}

.sp-btn.neutral::part(control) {
  background: unset;
  border: none;
}

.sp-btn {
  white-space: nowrap; /* Keeps text from wrapping weirdly */
}

fluent-dialog[class~="right"][b-dsxskpj5rr]::part(control) {
  --dialog-height: 106dvh !important;
  overflow-y: auto;
  background: #ffffff !important;
  overflow-x: unset !important;
}

#custom-panel > .fluent-dialog-header {
  max-width: 50rem;
  width: auto !important;
  margin-bottom: 0.7rem;
  padding: 1.5rem;
  background: linear-gradient(to right, #2563eb, #3b82f6);
}

#custom-panel > .fluent-dialog-footer {
  display: none !important;
}

#custom-panel::part(positioning-region) {
  overflow: hidden;
}

#custom-panel > .fluent-dialog-header .fluent-typography[typo='pane-header'] {
  color: white;
  font-size: 1.75rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

#dialog-persona::part(persona) {
  background-color: transparent !important;
}

#dialog-persona::part(initials) {
  display: none !important;
}

#dialog_close::part(control) {
  background: transparent;
}

#dialog_close svg {
  fill: white !important;
}

#tabBtn-1.addBtn {
  margin-top: 1.5rem;
}

  #tabBtn-1.addBtn::part(control) {
    padding-block: 1.25rem;
  }

    #tabBtn-1.addBtn::part(control):hover {
      background: rgb(29 78 216 / 1);
    }

/* Auto Scaler */
#viewBtn svg {
  fill: rgb(37 99 235 / 1) !important;
}

  #viewBtn svg:hover {
    fill: rgb(30 64 175 / 1) !important;
  }

#tw-panel-data-grid.tw-panel-data-grid-2 td.col-justify-start {
  overflow-y: auto;
  height: 64px !important;
  padding: 0.5rem 1rem;
}

#editScaleSetName::part(root) {
  background: transparent !important;
  border: solid 1px transparent !important;
  font-weight: 600;
}

.scaler #hide-column-select {
  border: solid 1px rgb(229 231 235 / 1);
  border-radius: 0.375rem;
  padding: 0.25rem 0.5rem;
}

#tw-panel-data-grid th.column-header {
  text-transform: inherit;
  margin-top: 0 !important;
}

  #tw-panel-data-grid th.column-header .col-sort-button::part(control) {
    text-transform: inherit;
  }

  #tw-panel-data-grid th.column-header .col-title-text {
    font-size: 16px;
    color: #4b5563;
  }

:is(#dialog-panel-scaler-saveBtn, #dialog-panel-scaler-createBtn).neutral::part(control) {
  color: rgb(255, 255, 255);
  background: rgb(37 99 235 / 1);
  border: solid 1px transparent;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
}

#dialog-panel-scaler-cancelBtn.neutral::part(control) {
  color: rgb(55, 65, 81);
  background: rgb(255, 255, 255);
  border: solid 1px rgb(209 213 219 / 1);
  border-radius: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
}

  #dialog-panel-scaler-cancelBtn.neutral::part(control):hover {
    background: rgb(249 250 251 / 1);
  }

#checkbx-apply-to-all.checked::part(control) {
  background: #2563EB;
}

#checkbx-apply-to-all span {
  color: rgb(55 65 81 / 1);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

:is(#dataGridEditBtn, #dataGridDeleteBtn)::part(control) {
  background: transparent;
}

#dataGridEditBtn::part(control) {
  border: solid 1px transparent !important;
}

#dataGridEditBtn svg {
  fill: rgb(37 99 235 / 1) !important;
}

  #dataGridEditBtn svg:hover {
    fill: rgb(30 64 175 / 1) !important;
  }

#dataGridDeleteBtn svg {
  fill: rgb(220 38 38 / 1) !important;
}

  #dataGridDeleteBtn svg:hover {
    fill: rgb(153 27 27 / 1) !important;
  }

#tw-panel-data-grid.scaler-dialog-dataGrid td.col-justify-start {
  height: 15ch !important;
  overflow: hidden;
  display: flex;
  align-items: center;
}

:is(#scheduleBtn, #editScheduleBtn) {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
}

  :is(#scheduleBtn, #editScheduleBtn)::part(control) {
    background: #2563eb;
    color: white;
    box-shadow: 0 1px 3px 0 rgba(0 0 0 / 0.1), 0 1px 2px 0 rgba(0 0 0 / 0.06);
    border: solid 1px transparent;
    padding: 0.625rem 1.25rem;
    border-radius: 0.375rem;
  }

  :is(#scheduleBtn, #editScheduleBtn) .icon {
    margin-right: 0.5rem;
    font-size: 1rem;
  }

#timeZoneSelect {
  margin-top: 0;
  width: 100%;
}

.details-content {
  padding: 10px;
}

.details-table {
  width: 100%;
  border-collapse: collapse;
}

  .details-table td {
    padding: 10px;
    vertical-align: middle;
  }

.detail-key {
  font-weight: bold;
  text-align: left;
  width: 30%;
  background-color: #f4f4f4;
}

.detail-value {
  text-align: left;
  width: 70%;
  background-color: #ffffff;
  word-break: break-word;
}

.details-table tr:nth-child(even) .detail-value {
  background-color: #f9f9f9;
}

.cost-analysis-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
}

.summary-cards {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.summary-card {
  flex: 1;
  background: #f8f9fa;
  padding: 12px;
  border-radius: 8px;
  text-align: center;
}

  .summary-card .title {
    font-size: 14px;
    color: #6c757d;
  }

  .summary-card .value {
    font-size: 22px;
    font-weight: bold;
    color: #212529;
  }

  .summary-card .subtitle {
    font-size: 12px;
    color: #6c757d;
  }

  .summary-card.savings {
    background: #e6f4ea;
    color: #0f5132;
  }

.increase {
  color: #d63384;
}

.savings-column {
  color: #198754;
  font-weight: bold;
}

.right-view {
  text-align: right;
}

#tw-panel-data-grid.scaler-dialog-dataGrid {
  margin-bottom: 0.875rem;
}

#timeZoneSelect::part(control) {
  padding: 8px 16px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  text-align: left;
  font-size: 0.875rem;
  color: #374151;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.2s;
}

#selectedDays {
  flex-wrap: wrap;
  padding: 5px 10px;
}

  #selectedDays fluent-checkbox {
    margin: 10px 0;
  }

:is(#startTimePicker, #stopTimePicker) {
  background: white;
  border-radius: 0.375rem;
}

  :is(#startTimePicker, #stopTimePicker)::part(root) {
    background: white !important;
    border: 1px solid #e5e7eb !important;
    cursor: pointer;
  }

  :is(#startTimePicker, #stopTimePicker)::part(control) {
    cursor: pointer;
  }

:is(#startTimeClearBtn, #stopTimeClearBtn)::part(control) {
  background: #2563EB;
  border: solid 1px transparent;
}

fluent-text-field.outline::part(root),
.search-box fluent-search::part(root),
#custom-user-select::part(root) {
  background: var(--fluent-txt-field-bg-clr) !important;
  border: solid 1px var(--border-clr) !important;
  padding: 0 !important;
  margin: 0 !important;
}

#custom-user-select::part(root) {
  width: 100% !important;
  border-radius: 0.375rem !important;
  border: 1px solid var(--border-clr) !important;
  background: var(--fluent-txt-field-bg-clr) !important;
  padding: 0.5rem 0.75rem !important;
  height: 2.5rem !important;
  box-sizing: border-box;
}

#custom-user-select-popup {
  width: 24rem !important;
  padding-left: 0.5rem;
}

#myPopoverButton::part(control) {
  background: transparent;
  border: solid 1px transparent;
  padding: 0;
}

#myPopover .fluent-popover-content {
  background-color: white !important;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border: solid 1px rgb(229 231 235 / 1);
}

  #myPopover .fluent-popover-content [part="header"] {
    margin-bottom: 0.75rem !important;
    height: inherit;
  }

#avatarPic2 .fluent-presence-badge div {
  font-size: 20px;
}

#myPopover .fluent-popover-content .profile-body {
  margin-block: 0.75rem 0.25rem;
}

#myPopover ul[role="list"] {
  width: 100%;
}

  #myPopover ul[role="list"] li {
    width: 100%;
  }

    #myPopover ul[role="list"] li a {
      height: 35px;
      padding: 1.5rem 0.35rem;
      border-radius: 0.5rem;
      color: rgb(115 115 115 / 1);
    }

      #myPopover ul[role="list"] li a:hover {
        background: var(--neutral-fill-stealth-hover);
        color: rgb(38 38 38 / 1);
      }

#myPopover .dropdown-arrow {
  display: flex;
  justify-content: end;
  margin-left: auto;
  transition: all ease 1s;
}

#custom-user-select-popup {
  width: 24rem !important;
  padding-left: 0.5rem;
}
#custom-user-select-popup {
  width: 24rem !important;
  padding-left: 0.5rem;
}

#selectedDays fluent-checkbox.checked::part(control) {
  background: #2563EB;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columns for larger screens */
  gap: 20px;
  padding: 20px;
}

@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr; /* 1 column on small screens */
  }
}

.chart-item {
  flex: 1 1 calc(50% - 20px); /* Two charts per row with spacing */
  min-width: 300px; /* Minimum width for each chart */
}

/* For smaller screens: one chart per row */
@media screen and (max-width: 900px) {
  .chart-item {
    flex: 1 1 100%;
  }
}

.chart-item {
  flex: 1 1 100%;
}

.fluent-dialog-body > fluent-select.collapsible#custom-user-select {
  width: 100% !important;
  border-radius: 0.375rem !important;
  /*border: 1px solid var(--border-clr) !important;*/
  background: var(--fluent-txt-field-bg-clr) !important;
  height: 2.5rem !important;
  box-sizing: border-box;
}

#custom-user-select::part(listbox) {
  z-index: 9995;
}

#ScheduleDatePicker .tw-modal-body {
  overflow: visible;
}

.header-logo {
  height: 2.6rem;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.2));
}

  #header.fixed {
    background: white;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }

/*  #header a {
    color: #4b5563;
  }

    #header a:hover {
      color: #2563eb;
    }*/

.footer-logo {
  height: 2.6rem;
  max-width: 100%;
  object-fit: contain;
}

#footer {
  background: #f8fafc;
  color: #4b5563;
  border-top: 1px solid #e5e7eb;
}

  #footer h4 {
    color: #1f2937;
  }

  #footer ul a {
    color: #4b5563;
    transition: color 0.2s ease;
  }

    #footer ul a:hover {
      color: #2563eb;
    }

  #footer .border-t {
    border-color: #e5e7eb;
  }

.bg-grid-pattern {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.alternating-light {
  background-color: #ffffff;
  color: #1f2937;
}

/* Add floating style elements */
@keyframes blob {
  0% {
    transform: scale(1);
  }

  33% {
    transform: scale(1.1);
  }

  66% {
    transform: scale(0.9);
  }

  100% {
    transform: scale(1);
  }
}

.animate-blob {
  animation: blob 7s infinite;
}

.animation-delay-2000 {
  animation-delay: 2s;
}

.animation-delay-3000 {
  animation-delay: 3s;
}

.section-lazy {
  position: relative;
  overflow: hidden;
}

.hero-pattern {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%234b5563' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.cb-btn-primary {
  --primary-btn-clr: #2563eb;
  background: var(--primary-btn-clr);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.cb-btn-primary:hover {
  --primary-btn-clr: #1d4ed8;
  color: white;
  transform: translateY(-2px);
}

.cb-shadow {
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

.cb-shadow-sm {
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.cb-shadow-lg {
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.cb-text-white {
  color: rgb(255 255 255 / 1);
}

.cb-text-left {
  text-align: left !important;
}

.cb-p-1 {
  padding: 0.25rem;
}
.cb-p-2 {
  padding: 0.5rem;
}
.cb-p-3 {
  padding: 0.75rem;
}
.cb-p-4 {
  padding: 1rem;
}
.cb-p-5 {
  padding: 1.25rem;
}

.cb-pt-1 {
  padding-top: 0.25rem;
}
.cb-pt-2 {
  padding-top: 0.5rem;
}
.cb-pt-3 {
  padding-top: 0.75rem;
}
.cb-pt-4 {
  padding-top: 1rem;
}
.cb-pt-5 {
  padding-top: 1.25rem;
}

.cb-pb-1 {
  padding-bottom: 0.25rem;
}
.cb-pb-2 {
  padding-bottom: 0.5rem;
}
.cb-pb-3 {
  padding-bottom: 0.75rem;
}
.cb-pb-4 {
  padding-bottom: 1rem;
}
.cb-pb-5 {
  padding-bottom: 1.25rem;
}

.cb-pl-1 {
  padding-left: 0.25rem;
}
.cb-pl-2 {
  padding-left: 0.5rem;
}
.cb-pl-3 {
  padding-left: 0.75rem;
}
.cb-pl-4 {
  padding-left: 1rem;
}
.cb-pl-5 {
  padding-left: 1.25rem;
}

.cb-pr-1 {
  padding-right: 0.25rem;
}
.cb-pr-2 {
  padding-right: 0.5rem;
}
.cb-pr-3 {
  padding-right: 0.75rem;
}
.cb-pr-4 {
  padding-right: 1rem;
}
.cb-pr-5 {
  padding-right: 1.25rem;
}

.cb-py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.cb-py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.cb-py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.cb-py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.cb-py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.cb-px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.cb-px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.cb-px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.cb-px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.cb-px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.cb-m-1 {
  margin: 0.25rem;
}
.cb-m-2 {
  margin: 0.5rem;
}
.cb-m-3 {
  margin: 0.75rem;
}
.cb-m-4 {
  margin: 1rem;
}
.cb-m-5 {
  margin: 1.25rem;
}

.cb-mt-1 {
  margin-top: 0.25rem;
}
.cb-mt-2 {
  margin-top: 0.5rem;
}
.cb-mt-3 {
  margin-top: 0.75rem;
}
.cb-mt-4 {
  margin-top: 1rem;
}
.cb-mt-5 {
  margin-top: 1.25rem;
}

.cb-mb-1 {
  margin-bottom: 0.25rem;
}
.cb-mb-2 {
  margin-bottom: 0.5rem;
}
.cb-mb-3 {
  margin-bottom: 0.75rem;
}
.cb-mb-4 {
  margin-bottom: 1rem;
}
.cb-mb-5 {
  margin-bottom: 1.25rem;
}

.cb-ml-1 {
  margin-left: 0.25rem;
}
.cb-ml-2 {
  margin-left: 0.5rem;
}
.cb-ml-3 {
  margin-left: 0.75rem;
}
.cb-ml-4 {
  margin-left: 1rem;
}
.cb-ml-5 {
  margin-left: 1.25rem;
}

.cb-mr-1 {
  margin-right: 0.25rem;
}
.cb-mr-2 {
  margin-right: 0.5rem;
}
.cb-mr-3 {
  margin-right: 0.75rem;
}
.cb-mr-4 {
  margin-right: 1rem;
}
.cb-mr-5 {
  margin-right: 1.25rem;
}

.cb-my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.cb-my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.cb-my-3 {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}
.cb-my-4 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.cb-my-5 {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}
.cb-my-8 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.cb-mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.cb-mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.cb-mx-3 {
  margin-left: 0.75rem;
  margin-right: 0.75rem;
}
.cb-mx-4 {
  margin-left: 1rem;
  margin-right: 1rem;
}
.cb-mx-5 {
  margin-left: 1.25rem;
  margin-right: 1.25rem;
}

.cb-gap-1 {
  gap: 0.25rem;
}
.cb-gap-2 {
  gap: 0.5rem;
}
.cb-gap-3 {
  gap: 0.75rem;
}
.cb-gap-4 {
  gap: 1rem;
}
.cb-gap-5 {
  gap: 1.25rem;
}



.stat-value {
  display: inline-block;
  position: relative;
}

.stat-value::after {
  background: #93c5fd;
}

.stat-value::after {
  content: '';
  position: absolute;
  bottom: -25px;
  left: 0;
  width: 100%;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
}

.stat-container:hover .stat-value::after {
  transform: scaleX(1);
}

.image-container {
  position: relative;
  transition: all 0.5s ease;
}

.image-container img {
  transform: scale(1);
  transition: transform 0.5s ease;
}

.image-container:hover img {
  transform: scale(1.02);
}

.image-container::before {
  content: '';
  position: absolute;
  inset: -10px;
  background: linear-gradient(45deg, #f3f4f6 0%, #e5e7eb 100%);
  border-radius: 1rem;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.image-container:hover::before {
  opacity: 1;
}

.video-container {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  background-color: #1e293b;
  /* dark slate background */
  border: 1px solid #334155;
}

.video-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.95;
  border-radius: 8px;
}

.hover-play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(37, 99, 235, 0.9);
  border-radius: 50%;
  padding: 1rem;
  opacity: 0;
  transition: all 0.3s ease;
}

.video-container:hover .hover-play-button {
  opacity: 0.95;
}

.play-button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

/* Video overlay for better text contrast */
.video-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 100%);
  z-index: 5;
  opacity: 0.8;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

/* Video title bar */
.video-title {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 0.75rem 1rem;
  background-color: rgba(15, 23, 42, 0.9);
  color: white;
  font-weight: 500;
  font-size: 0.875rem;
  z-index: 10;
  border-bottom: 1px solid #334155;
}

/* Update video controls styling */
video::-webkit-media-controls-panel {
  background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
}

video::-webkit-media-controls-play-button {
  background-color: rgba(59, 130, 246, 0.9);
  border-radius: 50%;
}

.testimonial-card {
  transition: all 0.3s ease;
  border-left: 3px solid transparent;
}

.testimonial-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  border-left-color: #2563eb;
}

#cost-provider-select {
  appearance: auto;
}

.section-transition::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, transparent, #2563eb, transparent);
}

.alternating-light {
  background: #FFFFFF;
  color: #1f2937;
}

.faq-item {
  transition: all 0.3s ease;
  border: solid 1px transparent;
}

.faq-item:hover {
  transform: translateY(-2px);
  border-color: #e5e7eb;
}

.listbox::part(control) {
  background: white;
  border: solid 1px #e5e7eb;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  color: #374151;
  transition: all 0.2s;
}

.listbox:not([disabled]):not([open]):hover::part(control) {
  border-color: #d1d5db;
  background: white;
}

.listbox::part(selected-value) {
  font-family: 'Inter', sans-serif;
}

.select-icon select:hover {
  background-image: var(--bs-form-select-bg-img);
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  border: solid 1px #d1d5db !important;
}

.modern-dropdown::part(listbox) {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  position: absolute;
  /*top: calc(100% + 4px);
  bottom: 0;
  left: 0;*/
  width: 100%;
  height: fit-content;
  max-height: 12rem;
  background: white;
  border-radius: 0.5rem;
  z-index: 50;
  transition: all 0.2s;
  border: solid 1px #e5e7eb;
  padding: 0;
}

.dropdown-list [role="option"] {
  border-radius: 0;
  font-size: inherit;
}

.dropdown-list [aria-selected="true"] {
  background: #60a5fa;
  color: white;
}

.dropdown-list :not([disabled]):not([aria-selected="true"]):hover {
  background: #60a5fa;
  color: white;
}

.dropdown-list [aria-selected="true"]::before {
  background: transparent;
}

.modern-dropdown [role="option"]:not([disabled]):not([aria-selected="true"])::before {
  background: inherit;
}

.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 40;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  backdrop-filter: blur(4px);
}

.mobile-menu-overlay.open {
  opacity: 1;
  visibility: visible;
}

.mobile-menu {
  position: fixed;
  top: 0;
  right: -300px;
  width: 300px;
  height: 100%;
  background-color: #ffffff !important;
  z-index: 50;
  padding: 2rem 1rem;
  overflow-y: auto;
  transition: right 0.3s ease;
  box-shadow: -5px 0 25px rgba(0, 0, 0, 0.1);
}

.mobile-menu.open {
  right: 0;
}

/* Responsive Landing Screen */
@media (max-width: 640px) {
  .stat-container {
    text-align: center;
  }

  .hero-section .grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Better spacing for small screens */
  .py-20 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  /* Fix any text that might be too large on mobile */
  h1.text-4xl {
    font-size: 2.5rem;
  }

  /* Ensure buttons are full-width on the smallest screens */
  @media (max-width: 400px) {
    .btn-primary,
    .rounded-lg {
      width: 100%;
      /*margin-bottom: 0.5rem;*/
    }
  }

  /* Center align text on mobile */
  .container h1,
  .container h2,
  .container h3,
  .container h4,
  .container p,
  .container .flex-col,
  section div > p,
  section > div > div > p,
  .stat-container div,
  .feature-card,
  .testimonial-card p,
  .grid div p,
  footer div h4,
  footer div ul,
  footer div ul li {
    text-align: center;
  }

  /* Footer specific mobile improvements */
  footer .md\:grid-cols-4 {
    text-align: center;
  }

  footer ul.space-y-2 {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Fix feature section alignment on mobile */
  .flex.items-start {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .flex.items-start > div {
    text-align: center;
  }

  /* Ensure icons are centered on mobile */
  .flex-shrink-0 {
    margin-left: auto;
    margin-right: auto;
    /*margin-bottom: 1rem;*/
  }

  /* Add proper spacing for flex items on mobile */
  .gap-6,
  .gap-4 {
    gap: 1.5rem;
  }

  /* Center description lists on mobile */
  ul.space-y-2 li {
    text-align: center;
  }

  /* Mobile menu improvements */
  .mobile-menu {
    text-align: center;
    background-color: #0f172a;
    /* Match header color */
  }

  .mobile-menu a {
    display: block;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    margin: 0.25rem 0;
    transition: background-color 0.2s ease;
  }

  .mobile-menu a:hover {
    background-color: rgba(59, 130, 246, 0.1);
  }

  /*.mobile-menu .flex.justify-between {
    margin-bottom: 1.5rem;
  }*/

  /*.mobile-menu nav.flex.flex-col.space-y-4 {
    margin-top: 2rem;
  }*/

  .mobile-menu .pt-4.border-t {
    padding-top: 1.5rem;
    margin-top: 1.5rem;
  }

  .mobile-menu .block.mt-2 {
    margin-top: 1rem;
    padding: 0.75rem 1.5rem;
  }

  .customer-journey-icon {
    text-align: center;
  }

  /* Bootstrap Styles */
  .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }
}

#hide-column-select {
  padding-block: 4px;
}

#hide-column-select-popup {
  padding: 0;
  border: solid 1px #e5e7eb;
  border-radius: 0.375rem;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

#hide-column-select-popup fluent-option {
  border-radius: 0;
  font-size: inherit;
}

#hide-column-select-popup [aria-selected="true"] {
  background: #60a5fa;
  color: white;
}

#hide-column-select-popup :not([disabled]):not([aria-selected="true"]):hover {
  background: #60a5fa;
  color: white;
}

#hide-column-select-popup [aria-selected="true"]::before {
  background: transparent;
}

#hide-column-select-popup :not([disabled]):not([aria-selected="true"])::before {
  background: inherit;
}

#hide-column-select-scroll fluent-badge span {
  color: rgb(33 37 41 / 1);
  font-size: 16px;
}

#hide-column-select-scroll fluent-badge span svg {
  visibility: hidden;
}

#hide-column-select::part(control) {
  font-size: 1rem;
  color: rgb(33 37 41 / 1);
}

:is(input, textarea):focus-visible {
  outline: none;
}

/* Privacy */
#privacy a:not([class]) {
  transition: all 0.3s ease;
}

#privacy a:not([class]):hover {
  color: #256ffa;
}

:is(ul, ol)[role="list"] {
  list-style: disc;
  padding-left: 1.5rem;
}

#myPopover :is(ul, ol)[role="list"] {
  list-style: none;
  padding-left: 0;
}

:is(ul, ol)[role="list"] li {
  padding-block: 0.0875rem;
}

:is(ul, ol).none {
  list-style: none;
}

:is(ul, ol).square {
  list-style: square;
}

:is(ul, ol).circle {
  list-style: circle;
}

:is(ul, ol).disc {
  list-style: disc;
}

:is(ul, ol).number {
  list-style: decimal;
}

.toc-item {
  margin-block: 0.125rem;
}

.block-content {
  margin-block: 1.5rem;
}

a.link {
  color: #256ffa;
  text-decoration: none;
  transition: all 0.3s ease;
}

a.link:hover {
  color: rgb(29 78 216 / 1);
}

:is(#privacy, #service, #cookie) :is(.toc-items a, .hover-link) {
  transition: all 0.3s ease;
}

:is(#privacy, #service, #cookie) :is(.toc-items a, .hover-link):hover {
  color: #256ffa;
}

.calculator-container {
  max-width: 1240px;
  margin: 0 auto;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

#calc-header {
  background: linear-gradient(135deg, #163a5f 0%, #1e5999 100%) !important;
  padding: 30px;
  color: white;
  text-align: center;
  position: relative;
  overflow: hidden;
}

#calc-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('/images/cloudoberry-logo.png');
  background-size: cover;
  background-position: center;
  mix-blend-mode: soft-light;
  opacity: 0.2;
  z-index: 0;
}

.calculator-container .logo-container {
  background: white;
  display: inline-block;
  padding: 15px 25px;
  border-radius: 8px;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

.logo-container .logo {
  height: 40px;
}

#calc-header h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

#calc-body {
  padding: 30px;
}

.input-section {
  margin-bottom: 30px;
}

.section-title {
  font-size: 18px;
  color: #163a5f;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #6ec1e4;
}

.calc-input-group {
  margin-bottom: 20px;
}

.calc-input-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #163a5f;
}

.calc-input-group input[type="number"] {
  /*width: calc(100% - 24px);*/
  width: 100%;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 16px;
  margin-bottom: 5px;
  transition: border-color 0.3s;
}

.calc-input-group input[type="number"]:focus {
  outline: none;
  border-color: #6ec1e4;
  box-shadow: 0 0 0 2px rgba(110, 193, 228, 0.2);
}

.calc-input-group .help-text {
  font-size: 12px;
  color: #718096;
}

.calc-input-group input[type="range"] {
  width: 100%;
  margin: 10px 0;
}

.calc-input-group .range-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #718096;
}

.results-section {
  background: #f8fafc;
  padding: 25px;
  border-radius: 8px;
  margin-top: 30px;
}

.result-card {
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 15px;
  border: 1px solid #e2e8f0;
  transition: transform 0.3s, box-shadow 0.3s;
}

.result-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05);
}

.result-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.result-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #6ec1e4 0%, #1e5999 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}

.result-icon i {
  color: white;
  font-size: 20px;
}

.result-title {
  font-weight: 600;
  color: #163a5f;
  margin: 0;
}

.result-value {
  font-size: 28px;
  font-weight: 700;
  color: #2cbc63;
  margin: 10px 0;
}

.result-description {
  font-size: 14px;
  color: #718096;
  margin: 0;
}

.savings-breakdown {
  margin-top: 30px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  overflow: hidden;
}

.breakdown-header {
  padding: 15px 20px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  font-weight: 600;
  color: #163a5f;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.breakdown-header i {
  transition: transform 0.3s;
}

.breakdown-content {
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out, padding 0.3s ease;
}

.breakdown-content.active {
  padding: 20px;
  max-height: 500px;
}

.savings-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #e2e8f0;
}

.savings-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.savings-label {
  color: #4a5568;
}

.savings-value {
  font-weight: 600;
  color: #2cbc63;
}

.assumptions {
  margin-top: 30px;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.assumptions h3 {
  font-size: 16px;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 1rem;
  color: #163a5f;
}

.assumptions ul {
  list-style: disc;
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
  color: #718096;
}

.calc-cta-section {
  text-align: center;
  margin-top: 30px;
  padding: 30px;
  background: linear-gradient(to right, #f0f9ff, #f8fafc);
  border-radius: 8px;
}

.calc-cta-button {
  display: inline-block;
  background: linear-gradient(135deg, #163a5f, #1e5999);
  color: white;
  text-decoration: none;
  padding: 12px 30px;
  border-radius: 30px;
  font-weight: 600;
  font-size: 16px;
  border: none;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 6px rgba(30, 89, 153, 0.2);
}

.calc-cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 14px rgba(30, 89, 153, 0.3);
}

@media (max-width: 768px) {
  .contact-cards {
    text-align: inherit;
  }
}

#problem-listbox::part(selected-value) {
    background-color: white !important; 
    padding: 0.5rem 0.45rem !important; 
    font-size: 1rem !important;
    color: #9ca3af !important;
    font-weight: 500;
}
#issue-description {
    border: 1px solid #e5e7eb;  
    background-color: white;  
    resize: none;  
    font-size: 1rem; 
    height: 15rem;
    padding: 1rem;
    border-radius: 0.5rem;
}
#issue-footer{
    display:flex;
    justify-content:space-between;
}

    #issue-description::placeholder {
        text-align: left;
    }
    #issue-description:focus {
        outline: none;
        box-shadow: none;
    }
.uploadBtn::part(control) {
    background: none;
    color: #2563eb;
    font-weight: 500;
    font-size: 1.1rem;
    margin-top: 2rem;
}


#submitBtn::part(control) {
    border-radius: 3rem;
    font-size: 1.3rem;
    font-weight: 500;
    padding: 1.2rem;
}
#shareBtn::part(control) {
    border-radius: 3rem;
    font-size: 1.3rem;
    font-weight: 500;
    padding: 1.2rem;
}
#feedback-description::placeholder {
    text-align: left;
}
#feedback-description:focus {
    outline: none;
    box-shadow: none;
}
#feedback-description {
    border: 1px solid #e5e7eb; 
    background-color: white;  
    resize: none;  
    font-size: 1rem; 
    height: 15rem;
    width: 25rem !important;
    padding: 1rem;
    border-radius: 0.5rem;
}

 .input-error::placeholder {
        color: #dc2626 !important;  
        font-weight: 400;
 }

#problem-listbox:not(:has([slot="selected-value"]:empty))::part(selected-value) {
    color: #212529 !important;
    font-weight: 500;
}

.outer-container {
    margin: 1rem auto;
    padding: 1rem;
    padding-left: 3rem;
    max-width: 100%;
    display: flex;
}

.form-container {
    width: 100%;
    max-width: 980px;
}

#issue-description,
input[type="text"],
#problem-listbox {
    width: 98% !important;
}

/* Upload & Submit Footer */
.issue-footer {
    flex-wrap: wrap;
    gap: 1rem;
}

.submit-btn,
.file-upload {
    flex: 1 1 100%;
}

/* Mobile tweaks */
@media screen and (max-width: 768px) {
    #submitBtn::part(control),
    #shareBtn::part(control) {
        font-size: 1rem;
        padding: 0.8rem;
    }

    #issue-description,
    #feedback-description {
        height: 12rem;
    }
}

.scroll {
  width: 100%;
}

.discover-card {
  box-shadow: 0px 0px 3px 0px rgb(52, 72, 5, 0.15);
}
.discover-card:hover {
  box-shadow: 0px 0px 9px 0px rgb(52, 72, 5, 0.25);
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.25);
  z-index: 998;
  pointer-events: none;
}

.tooltip-container {
  z-index: 999;
  transition: opacity 0.3s ease;
  pointer-events: auto;
}

.tooltip-box {
  position: relative;
  padding: 1rem;
  width: max(280px, 500px);
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.tooltip-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
}

.tooltip-box:is(.top,.bottom,.left,.right)::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}

/*Arrow pointing from the top*/
.tooltip-box.top::after {
  top: -8px;
  left: 20px;
  border-width: 10px 10px 0 10px;
  border-color: white transparent transparent transparent;
}
/*Arrow pointing from the bottom*/
.tooltip-box.bottom::after {
  top: -8px;
  left: 20px;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent white transparent;
}
/*Arrow pointing from the left*/
.tooltip-box.left::after {
  top: 20px;
  left: -8px;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
}
/*Arrow pointing from the right*/
.tooltip-box.right::after {
  top: 20px;
  right: -8px;
  border-width: 10px 0px 10px 10px;
  border-color: transparent transparent transparent white;
}

.tooltip-buttons button[disabled] {
  cursor: not-allowed;
}

.scroll-nojump {
  width: 100%;
}

@media screen and (min-width: 1536px) {
  .scroll-nojump {
    margin-left: var(--scrollbar-width);
    margin-right: 0;
    width: calc(100% - var(--scrollbar-width));
  }

  body:has(.page-full-width) .scroll-nojump {
    margin-left: 0;
    width: 100%;
  }
}

.gutter-stable {
  scrollbar-gutter: stable;
}

@media (min-width: 1024px) {
  .gutter-stable {
    scrollbar-gutter: stable;
  }
}

.border-tint-subtle {
  border-color: rgb(226, 231, 228);
}

.border-tint-subtle::after {
  content: "";
  border-color: rgb(226, 231, 228);
}

.text-primary-subtle {
  color: rgba(73, 193, 137, 1);
}

.bg-tint-base {
  background-color: rgb(255, 255, 255);
}

.text-tint-strong {
  color: rgb(28, 29, 29);
}

.text-tint-strong\/7 {
  color: rgba(28, 29, 29, 0.64);
}
.flip-card {
    background-color: transparent;
    height: 140px;
    perspective: 1000px;
    margin: 0;
    padding: 0;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: left;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 0.5rem;
}

.flip-card-front {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

    .flip-card-front .flex {
        margin-bottom: 0.5rem;
    }

.flip-card-back {
    transform: rotateY(180deg);
    padding: 0.75rem;
    overflow-y: auto;
}

.flip-card-back h4 {
        font-size: 0.75rem;
        font-weight: 600;
        color: #1f2937;
        margin-top: 0;
        margin-bottom: 0.5rem;
    }

    .flip-card-back ul {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .flip-card-back li {
        display: flex;
        justify-content: space-between;
        font-size: 0.7rem;
        line-height: 1.4;
        margin-bottom: 0.25rem;
    }

        /* Make the list items wrap properly */
        .flip-card-back li span:first-child {
            flex: 1;
            padding-right: 0.25rem;
        }

        .flip-card-back li span:last-child {
            text-align: right;
            font-weight: 500;
        }

@media (max-width: 768px) {
  .sidebar-text {
    text-align: left;
    display: flex;
  }
}

.disabled-feature-message {
    margin-top: 1rem;
    padding: 1rem;
    background-color: #f3f3f3;
    border: 2px solid #888;
    border-radius: 4px;
}

.animate-spin {
    animation: animate-spin 1s infinite linear;
}
@keyframes animate-spin {
    to {
        transform: rotate(1turn);
    }
}
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

/* Ensure exactly 3 cards per row on larger screens */
@media (min-width: 1200px) {
    .metrics-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 2 cards per row on medium screens */
@media (min-width: 768px) and (max-width: 1199px) {
    .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 1 card per row on mobile */
@media (max-width: 767px) {
    .metrics-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}

.metric-card {
    background: white;
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08), 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    border: 1px solid #f1f5f9;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.metric-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6, #06b6d4);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.metric-card:hover::before {
    opacity: 1;
}

.metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px 0 rgba(0, 0, 0, 0.15), 0 4px 10px 0 rgba(0, 0, 0, 0.1);
}

.metric-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.metric-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

.metric-icon {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 600;
}

.metric-value {
    font-size: 1.75rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.metric-change {
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.metric-subtitle {
    font-size: 0.6875rem;
    color: #94a3b8;
    font-weight: 500;
}

.change-positive {
    color: #059669;
}

.change-negative {
    color: #dc2626;
}

.change-warning {
    color: #d97706;
}

.change-neutral {
    color: #6b7280;
}

.provider-icons {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.provider-icon {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 4px;
    background-size: cover;
    background-position: center;
}

.provider-icon.aws {
    background-color: #ff9900;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M6.763 10.036h1.144l.72-2.24h.036l.72 2.24h1.144l-1.476-4.08h-1.288l-1.476 4.08zm1.144-3.024l.432 1.344.432-1.344h-.864zm3.24 3.024h1.08v-4.08h-1.08v4.08zm3.24 0h1.144l.72-2.24h.036l.72 2.24h1.144l-1.476-4.08h-1.288l-1.476 4.08zm1.144-3.024l.432 1.344.432-1.344h-.864zm3.24 3.024h1.08v-4.08h-1.08v4.08z"/></svg>');
}

.provider-icon.azure {
    background-color: #0089d6;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M13.5 2.5L9 9.5l4.5 7h-9L1 9.5 5.5 2.5h8z"/></svg>');
}

.metric-card-clickable {
    cursor: pointer;
}

.metric-card-clickable:hover {
    background-color: #f8fafc;
}

/* Chart Section Styles */
.chart-section {
    background: white;
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    border: 1px solid #e5e7eb;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.chart-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6, #06b6d4);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.chart-section:hover::before {
    opacity: 1;
}

.chart-section:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-color: #d1d5db;
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f3f4f6;
}

.chart-title-section h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 0.25rem 0;
    line-height: 1.3;
}

.chart-title-section p {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0;
    font-weight: 500;
}

.chart-toggle-btn {
    padding: 0.75rem;
    color: #6b7280;
    background: transparent;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}

.chart-toggle-btn:hover {
    color: #3b82f6;
    background: #eff6ff;
    border-color: #3b82f6;
    transform: scale(1.05);
}

.chart-toggle-btn.active {
    color: #3b82f6;
    background: #eff6ff;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.chart-container {
    position: relative;
    margin-bottom: 1rem;
}

.chart-container canvas {
    border-radius: 8px;
}

/* Modern Table Styles */
.modern-table-container {
    margin-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
    padding-top: 1.5rem;
}

.modern-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    background: white;
}

.modern-table thead {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.modern-table th {
    padding: 1rem 1.25rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 700;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid #e5e7eb;
    white-space: normal;
    word-wrap: break-word;
    hyphens: auto;
    min-width: 80px;
}

.modern-table th:first-child {
    border-top-left-radius: 12px;
}

.modern-table th:last-child {
    border-top-right-radius: 12px;
}

.modern-table td {
    padding: 1rem 1.25rem;
    font-size: 0.875rem;
    color: #374151;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
}

.modern-table tbody tr {
    transition: all 0.2s ease-in-out;
}

.modern-table tbody tr:hover {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    transform: scale(1.001);
}

.modern-table tbody tr:last-child td {
    border-bottom: none;
}

.modern-table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 12px;
}

.modern-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 12px;
}

.table-scroll-container {
    max-height: 400px;
    overflow-y: auto;
    border-radius: 12px;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
}

.table-scroll-container::-webkit-scrollbar {
    width: 8px;
}

.table-scroll-container::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

.table-scroll-container::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.table-scroll-container::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .chart-section {
        padding: 1rem;
        margin-bottom: 1rem;
    }
    
    .chart-header {
        margin-bottom: 1rem;
        padding-bottom: 0.75rem;
    }
    
    .chart-title-section h3 {
        font-size: 1.125rem;
    }
    
    .chart-toggle-btn {
        padding: 0.5rem;
        min-width: 40px;
        min-height: 40px;
    }
    
    .modern-table th,
    .modern-table td {
        padding: 0.75rem 1rem;
        font-size: 0.8125rem;
    }
    
    .metric-card {
        padding: 1rem;
    }
    
    .metric-value {
        font-size: 1.5rem;
    }
    
    .metric-icon {
        width: 1.5rem;
        height: 1.5rem;
        font-size: 0.75rem;
    }
}
.breakdown-value {
    font-weight: 700;
    color: #1e293b;
    font-size: 0.875rem;
    font-family: sans-serif;
    transition: color 0.2s ease;
}
.breakdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    margin-bottom: 0.5rem;
}

/* Modern Dialog Styling */
.breakdown-section {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.breakdown-section:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.breakdown-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #e2e8f0;
    position: relative;
}

.breakdown-title::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    border-radius: 1px;
}

.breakdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.breakdown-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.breakdown-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: #3b82f6;
}

.breakdown-item:hover::before {
    opacity: 1;
}

.breakdown-item:last-child {
    margin-bottom: 0;
}

.breakdown-label {
    font-weight: 600;
    color: #374151;
    font-size: 0.875rem;
    transition: color 0.2s ease;
}

.breakdown-value {
    font-weight: 700;
    color: #1e293b;
    font-size: 0.875rem;
    font-family: "sans-serif";
    transition: color 0.2s ease;
}

.breakdown-item:hover .breakdown-label,
.breakdown-item:hover .breakdown-value {
    color: #3b82f6;
}

/* Optimization Resource Items */
.optimization-resource {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.optimization-resource::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #ef4444, #f97316);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.optimization-resource:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    border-color: #ef4444;
}

.optimization-resource:hover::before {
    opacity: 1;
}

/* Cost Summary Cards */
.cost-summary-card {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border: 1px solid #10b981;
    border-radius: 16px;
    padding: 1.5rem;
    text-align: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.cost-summary-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #10b981, #059669);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cost-summary-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(16, 185, 129, 0.2);
}

.cost-summary-card:hover::before {
    opacity: 1;
}

.cost-summary-value {
    font-size: 2rem;
    font-weight: 800;
    color: #065f46;
    margin-bottom: 0.5rem;
    font-family: sans-serif;
}

.cost-summary-label {
    font-size: 0.875rem;
    color: #047857;
    font-weight: 600;
}

/* Resource Details Grid */
.resource-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.resource-info-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

.resource-info-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.resource-info-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.resource-info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f1f5f9;
}

.resource-info-item:last-child {
    border-bottom: none;
}

.resource-info-label {
    font-weight: 600;
    color: #64748b;
    font-size: 0.875rem;
}

.resource-info-value {
    font-weight: 700;
    color: #1e293b;
    font-size: 0.875rem;
    font-family: sans-serif;
}

/* Loading States */
.dialog-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: #64748b;
    font-weight: 600;
}

.dialog-loading::before {
    content: '';
    width: 2rem;
    height: 2rem;
    border: 3px solid #e2e8f0;
    border-top: 3px solid #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: 1rem;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Responsive Dialog Improvements */
@media (max-width: 768px) {
    .fluent-dialog-body {
        padding: 1.5rem;
        max-height: 60vh;
    }
    
    .fluent-dialog-header {
        padding: 1.25rem 1.5rem;
    }
    
    .fluent-dialog-footer {
        padding: 1.25rem 1.5rem;
        flex-direction: column;
    }
    
    .breakdown-section {
        padding: 1rem;
        margin-bottom: 1.5rem;
    }
    
    .breakdown-item {
        padding: 0.875rem 1rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .resource-details-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .cost-summary-card {
        padding: 1.25rem;
    }
    
    .cost-summary-value {
        font-size: 1.5rem;
    }
}

/* Enhanced Hover Effects */
.breakdown-item.enhanced-hover {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.breakdown-item.enhanced-hover::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s ease, height 0.3s ease;
}

.breakdown-item.enhanced-hover:hover::after {
    width: 200px;
    height: 200px;
}

/* Focus States for Accessibility */
.breakdown-item:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

.optimization-resource:focus-visible {
    outline: 2px solid #ef4444;
    outline-offset: 2px;
}

/* Dialog Heading Fixes */

/* Carousel */
/* Image Carousel Styles */
.carousel-container {
  position: relative;
  width: 100%;
  height: 400px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.carousel-slides {
  width: 100%;
  height: 100%;
  position: relative;
}

.carousel-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.carousel-slide.active {
  opacity: 1;
}

.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 768px) {
  .carousel-container {
    height: 300px;
  }
}

/* Testimonial Carousel Styles */
.testimonial-carousel {
  position: relative;
  overflow: hidden;
  margin-bottom: 2rem;
}

.testimonial-slides {
  display: flex;
  transition: transform 0.5s ease-in-out;
  gap: 1.5rem;
}

.testimonial-slide {
  flex: 0 0 100%;
  box-sizing: border-box;
}

.testimonial-slide.multi-slide {
  flex: 0 0 calc(33.333% - 1rem);
}

@media (max-width: 1024px) {
  .testimonial-slide.multi-slide {
    flex: 0 0 calc(50% - 0.75rem);
  }
}

@media (max-width: 768px) {
  .testimonial-slide.multi-slide {
    flex: 0 0 100%;
  }
}

.testimonial-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid #e5e7eb;
  cursor: grab;
  user-select: none;
}

.testimonial-card:active {
  cursor: grabbing;
}

.testimonial-header {
  flex-shrink: 0;
}

/* Navigation Styles */
.testimonial-navigation {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
}

.nav-button {
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1.2rem;
}

.nav-button:hover:not(:disabled) {
  background: #2563eb;
  transform: scale(1.1);
}

.nav-button:disabled {
  background: #9ca3af;
  cursor: not-allowed;
  transform: none;
}

.carousel-dots {
  display: flex;
  gap: 0.5rem;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  background: #d1d5db;
  cursor: pointer;
  transition: all 0.3s ease;
}

.dot.active {
  background: #3b82f6;
  transform: scale(1.2);
}

.dot:hover {
  background: #6b7280;
}

/* Auto Play Controls */
.auto-play-toggle {
  background: transparent;
  border: 2px solid #3b82f6;
  color: #3b82f6;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.auto-play-toggle:hover {
  background: #3b82f6;
  color: white;
}

.auto-play-toggle.playing {
  background: #3b82f6;
  color: white;
}

/* Touch feedback */
.carousel-container,
.testimonial-carousel {
  touch-action: pan-y;
}

.dragging {
  transition: none !important;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .testimonial-navigation {
    gap: 0.5rem;
  }

  .nav-button {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }

  .auto-play-toggle {
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
  }
}

/* Contact */
.glass-effect {
  backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0px 0px 2px 0px rgba(0 0 0 / 0.35);
}

/*.gradient-bg {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}*/

.contact-us-card {
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.input-focus:focus {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(37, 99, 235, 0.2);
}

.btn-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 30px rgba(37, 99, 235, 0.4);
}

/* New Resources Dialog Styles */
.loading-spinner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem;
}

.loading-spinner .spinner {
  width: 2rem;
  height: 2rem;
  border: 2px solid #e5e7eb;
  border-top: 2px solid #f59e0b;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Dialog Heading Fixes */

.tab-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 120vh;
    overflow-y: auto;
}

/* Status Badge */
.status-badge-container {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 1rem;
}


.status-indicator {
    width: 0.5rem;
    height: 0.5rem;
    background-color: #ef4444;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* Cards */
.info-card-details {
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
    background: white;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.2s;
}

    .info-card-details:hover {
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    }

.identity-card {
    border-left: 4px solid #3b82f6;
}

.config-card {
    border-left: 4px solid #10b981;
}

.cloud-card {
    border-left: 4px solid #8b5cf6;
}

.disk-card {
    border-left: 4px solid #f59e0b;
}

.details-card-heads {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #f3f4f6;
}

.details-card-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.125rem;
    font-weight: 600;
}

.card-icon {
    font-size: 1.25rem;
}

.card-content {
    padding: 1.5rem;
}

/* Field Layouts */
.field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.disk-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.field-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

    .field-item.full-width {
        grid-column: 1 / -1;
    }

    .field-item label {
        font-size: 0.75rem;
        font-weight: 500;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

.field-value {
    font-size: 0.875rem;
    font-weight: 500;
    color: #111827;
    background: #f9fafb;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
}

.field-value-with-copy {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #f9fafb;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
}

    .field-value-with-copy .field-value {
        background: transparent;
        padding: 0;
        flex: 1;
    }

.break-all {
    word-break: break-all;
}

.data-disks-section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #f3f4f6;
}

    .data-disks-section h4 {
        font-size: 1rem;
        font-weight: 600;
        color: #374151;
        margin-bottom: 1rem;
    }

:is(#tab-general, #tab-disks,#tab-volumes) {
    padding: 1rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #6b7280;
    border-bottom: solid 2px transparent;
    white-space: nowrap;
    display: flex;
    align-items: center;
    position: relative;
    transition: all 0.2s ease;
    height: inherit;
}

:is(#tab-general, #tab-disks,#tab-volumes):hover {
    color: #4b5563;
    background-color: rgba(243, 244, 246, 0.8);
}

    :is(#tab-general, #tab-disks, #tab-volumes)[aria-selected="true"] {
        color: #2563eb;
        font-weight: 600;
    }

    :is(#tab-general, #tab-disks,#tab-volumes)::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: transparent;
        transition: background-color 0.2s ease;
    }

    :is(#tab-general, #tab-disks):hover::after {
        background-color: #d1d5db;
    }

    :is(#tab-general, #tab-disks)[aria-selected="true"]::after {
        background-color: #2563eb;
    }
/*.pattern-bg {
  background-image: radial-gradient(circle at 25% 25%, rgba(59, 130, 246, 0.1) 0%, transparent 50%), radial-gradient(circle at 75% 75%, rgba(168, 85, 247, 0.1) 0%, transparent 50%);
}*/


/* Resource Header Styles */
.resource-header-enhanced {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e2e8f0;
    border-radius: 0.75rem 0.75rem 0 0;
    margin-bottom: 0.5rem;
    flex-shrink: 0;
}

.resource-info-enhanced {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex: 1;
}

.resource-icon-enhanced {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    border-radius: 0.5rem;
    color: white;
    font-size: 1rem;
    flex-shrink: 0;
}

.resource-details-enhanced {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.resource-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
    line-height: 1.2;
}

.resource-meta-enhanced {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #6b7280;
    flex-wrap: nowrap;
}

.resource-type {
    font-weight: 500;
    color: #3b82f6;
}

.resource-separator {
    color: #d1d5db;
}

.resource-location {
    color: #6b7280;
}

.resource-status {
    display: flex;
    align-items: center;
}

/* Status Badge Styles */
.status-badge-details {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: capitalize;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

/* Responsive status badge sizing for small mobile screens */
@media (max-width: 475px) {
    .resource-header-enhanced .status-badge-details {
        font-size: 0.625rem;
        padding: 0.25rem 0.5rem;
        border-radius: 0.375rem;
    }

        .resource-header-enhanced .status-badge-details i {
            font-size: 0.5rem;
        }
}

@media (max-width: 400px) {
    .resource-header-enhanced .status-badge-details {
        font-size: 0.5rem;
        padding: 0.125rem 0.375rem;
        border-radius: 0.25rem;
    }

        .resource-header-enhanced .status-badge-details i {
            font-size: 0.375rem;
        }
}

@media (max-width: 350px) {
    .resource-header-enhanced .status-badge-details {
        font-size: 0.4375rem;
        padding: 0.125rem 0.25rem;
        border-radius: 0.1875rem;
    }

        .resource-header-enhanced .status-badge-details i {
            font-size: 0.3125rem;
        }
}

.status-running {
    background-color: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.status-running .status-indicator {
    background-color: #22c55e;
}

.status-stopped {
    background-color: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.status-stopped .status-indicator {
    background-color: #ef4444;
}

.status-starting {
    background-color: #fef3c7;
    color: #92400e;
    border: 1px solid #fed7aa;
}

.status-starting .status-indicator {
    background-color: #f59e0b;
}

.status-stopping {
    background-color: #fef3c7;
    color: #92400e;
    border: 1px solid #fed7aa;
}

.status-stopping .status-indicator {
    background-color: #f59e0b;
}

.status-failed {
    background-color: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.status-failed .status-indicator {
    background-color: #ef4444;
}

.status-unknown {
    background-color: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
}

    .status-unknown .status-indicator {
        background-color: #6b7280;
    }

/* Metrics Filter Styles */
.metrics-filter-container {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border: 1px solid #cbd5e1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.metrics-filter-button {
  position: relative;
  overflow: hidden;
}

.metrics-filter-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.metrics-filter-button:hover::before {
  left: 100%;
}

.metrics-filter-button.active {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  transform: translateY(-1px);
}

.metrics-filter-icon {
  transition: transform 0.2s ease-in-out;
}

.metrics-filter-button:hover .metrics-filter-icon {
  transform: scale(1.1);
}

.metrics-filter-button.active .metrics-filter-icon {
  transform: scale(1.05);
}
/* Only applies to x-axis labels inside .service-chart */
.chart-label-clickable .apexcharts-xaxis text {
    cursor: pointer;
}
.chart-label-clickable .apexcharts-series path,
.chart-label-clickable .apexcharts-series rect {
    cursor: pointer;
}
.table-export-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background-color: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    border-radius: 0.5rem 0.5rem 0 0;
}

.table-export-title {
    font-weight: 600;
    color: #374151;
    font-size: 0.875rem;
}

.export-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    background-color: white;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.875rem;
}

    .export-btn:hover {
        background-color: #f3f4f6;
        color: #374151;
        border-color: #9ca3af;
    }

    .export-btn:active {
        background-color: #e5e7eb;
        transform: scale(0.95);
    }

    .export-btn i {
        font-size: 1rem;
    }

.copy-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 0.25rem;
    transition: all 0.2s ease;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    position: relative;
}

    .copy-btn:hover {
        background: #e5e7eb;
        color: #374151;
    }

    .copy-btn.copied {
        background: #10b981;
        color: white;
    }

        .copy-btn.copied i {
            color: white;
        }

    .copy-btn .copy-text {
        position: absolute;
        top: -35px;
        left: 50%;
        transform: translateX(-50%);
        background: #10b981;
        color: white;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 500;
        white-space: nowrap;
        opacity: 0;
        transition: opacity 0.2s ease;
        pointer-events: none;
        z-index: 9999;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }

        .copy-btn .copy-text::after {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            border: 4px solid transparent;
            border-top-color: #10b981;
        }

    .copy-btn.copied .copy-text {
        opacity: 1;
    }