/* Common */
/* width */
/* ::-webkit-scrollbar { */
  /* width: 12px; */
/* } */

/* Track */
/* ::-webkit-scrollbar-track { */
  /* border-radius: 100vh; */
  /* background: #ebebeb; */
/* } */

/* Handle */
/* ::-webkit-scrollbar-thumb { */
  /* background: #a3a3a3; */
/* } */

/* General Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
/* Track (Vertical & Horizontal) */
::-webkit-scrollbar-track {
    border-radius: 100vh;
    background: #f1f3f7;
}
/* Thumb (Vertical) */
::-webkit-scrollbar-thumb {
    background: #a3a3a3;
    border-radius: 5px;
}
/* Thumb (Horizontal) */
::-webkit-scrollbar-thumb:horizontal {
    background: #a3a3a3;
    border-radius: 5px;
}
/* Horizontal Scroll */
::-webkit-scrollbar:horizontal {
    height: 8px;
}

/* Custom scroll bar */

.text-red {
  color: #ff0000;
}

.text-left {
  text-align: left;
}

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

.top-profile-section {
  position: absolute;
  right: 0px;
}

.finops-modal-medium .modal-dialog {
  max-width: 80% !important;
  height: calc(100vh - 56px);
}

.finops-modal-medium .modal-content {
  min-height: calc(100vh - 56px);
}

.toast-box {
  display: flex;
  min-width: 50px;
  position: fixed;
  bottom: 30px;
  border-radius: 5px;
  padding: 10px;
  box-shadow: 0 6px 20px -5px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  z-index: 9999;
}

.toast-box-success,
.toast-box-success .toast-box-progress {
  background-color: #008000;
}

.toast-box-error,
.toast-box-error .toast-box-progress {
  background-color: red;
}

.toast-box .toast-box-content {
  display: flex;
  align-items: center;
}

.toast-box .toast-box-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 100%;
}

.toast-box .toast-box-progress:before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background-color: #ffffff;
}

.toast-box-progress.toast-box-active:before {
  animation: progress 3s linear forwards;
}

@keyframes progress {
  100% {
    right: 100%;
  }
}

.page-navbar-header .dropdown {
  margin-left: 20px;
}

#ceOverviewTopNavForm .dropdown.perspective-dropdown {
  margin: 0px 10px !important;
}

.page-default-card {
  min-height: calc(100vh - 130px);
}

.finops-nav-tabs {
  position: sticky;
  top: 95px;
  background-color: #f1f3f7;
  z-index: 999;
}

.finops-nav-tabs li {
  display: inline-block;
}

.finops-nav-tabs a {
  padding: 10px 20px 13px 20px;
  font-size: 16px;
}

.finops-nav-tabs a:not(.active) {
  border: 0px !important;
  color: #737373;
}

.finops-nav-tabs a.active {
  border-bottom: 3px solid !important;
  border-top: 0px;
  border-right: 0px;
  border-left: 0px;
  color: #2760ea;
}

.page-filters select {
  float: left;
  display: inline-block;
  width: 185px;
  margin-right: 20px;
  padding: 0.47rem 0.75rem;
  color: #545965;
  border: 1px solid #e2e5e8;
  cursor: pointer;
}

.page-filter-select-custom {
  float: left;
  display: inline-block;
  position: relative;
  cursor: pointer;
  border: 1px solid #e2e5e8;
  padding: 0.4rem 0.75rem;
  margin-right: 20px;
  width: 200px;
}

.page-filter-select-custom opt {
  width: 90%;
  display: block;
  overflow: hidden;
  white-space: nowrap;
}

.page-filter-select-custom i {
  position: absolute;
  right: 5px;
  color: #545965;
  top: 13px;
  font-size: 10px;
}

.custom-select-cbox input[type="checkbox"] {
  border-radius: 0px !important;
  width: 17px;
  height: 17px;
  margin-left: -25px !important;
  margin-top: 8px;
}

.custom-select-cbox label {
  font-size: 15px;
  float: left;
  margin-top: 5px;
  cursor: pointer;
}

.custom-select-radio input[type="radio"] {
  width: 20px;
  height: 20px;
}

.custom-select-radio input[type="radio"] + label {
  cursor: pointer;
  margin-top: 2px;
  margin-left: 6px;
  /* font-size: 15px; */
}
.perspective-selection-modal {
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  /* transform: translateY(-50%); */
  max-width: 1200px; /* Adjust the width as needed */
  margin: 0; /* Remove default margin */
}
.perspective-selection-modal .modal-dialog {
  margin: 0px;
  max-width: 100%;
}
.perspective-selection-modal .modal-body {
  padding: 0px;
}
.perspective-selection-modal .modal-content {
  border-radius: 0px;
}
.perspective-selection-modal-content,
.perspective-selection-modal .modal-header {
  border-bottom: 2px solid #f1f1f1;
}
.perspective-selection-modal + .modal-backdrop {
  opacity: 0.8;
}
.perspec-selection-modal-left tr {
  cursor: pointer;
}
.perspec-selection-modal-left,
.perspec-selection-modal-right {
  overflow: auto;
}
.perspec-selection-modal-right {
  padding: 30px;
  background: #f1f3f7;
  border-left: 1px solid #dbdbdb;
}
.perspec-selection-tab .nav {
  width: 30%;
  border-right: 1px solid #dbdbdb;
  padding-top: 24px;
}
.perspec-selection-tab .tab-content {
  padding-top: 20px;
  width: 70%;
}
.perspec-selection-tab .nav-link {
  border-radius: 0px;
  padding: 16px 24px;
  color: #8c8c8c;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  text-align: left;
}
.perspec-selection-tab .nav-link.active {
  background-color: #f5f5f5;
  color: #303030;
  font-weight: bold;
}
.perspec-selection-search {
  position: relative;
  padding: 10px 15px;
  background-color: #ebebeb;
  border-radius: 9px;
  margin: 20px;
}
.perspec-selection-search .fa-search {
  position: absolute;
  top: 15px;
}
.perspec-selection-search input {
  width: 100%;
  padding-left: 25px;
  background-color: #ebebeb;
  border: 0;
  outline: none;
}
.perspective-selection-modal .custom-select-radio input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}
.perspec-lists {
  margin: 20px -12px 20px 20px;
}
.perspec-lists .form-check {
  margin-bottom: 20px;
}
.perspec-lists .form-check label {
  display: block;
  margin-left: 10px;
  color: #333;
  font-size: 16px;
  font-weight: normal;
  cursor: pointer;
}
.perspec-lists input[disabled] + label {
  color: #e0e0e0;
}
.perspec-skeleton .skeleton {
  display: inline-block;
  width: 80%;
  height: 1.5rem;
}
.table-body-scroll td {
  vertical-align: middle;
}
.table-body-scroll tbody {
  display: block;
  overflow: auto;
}

.table-body-scroll thead,
.table-body-scroll tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.table-body-scroll thead {
  width: calc(100% - 1em);
  /* scrollbar is average 1em/16px width, remove it from thead width */
}

.dataTable th,
.dataTable td {
  border-color: #eff0f2 !important;
}

.dataTable.no-footer {
  border-bottom: 0px !important;
}

.copy-query-btn {
  background: none;
  border: 0px;
  color: #d4d4d4;
}

.finops-fade-modal {
  top: 80px;
}

.finops-fade-modal .modal-content {
  background-color: #f5f6f8;
  border-radius: 30px !important;
}

.finops-fade-modal .modal-body {
  padding: 0 !important;
}

.finops-fade-modal .finops-fade-modal-header {
  border-radius: 30px 30px 0 0;
  position: sticky;
  top: 0;
  z-index: 999;
}

.finops-fade-modal.fade .modal-dialog {
  animation-duration: 0.5s;
}

.finops-fade-modal.fade.show .modal-dialog {
  animation-name: bootboxModalSlideInUp;
}

.finops-fade-modal.fade:not(.show) .modal-dialog {
  animation-name: bootboxModalSlideOutDown;
}

.finops-fade-modal .fi-res-ans-label img {
  border-radius: 50px !important;
}

/* bootbox open animation */
@keyframes bootboxModalSlideInUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }

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

@keyframes bootboxModalSlideOutDown {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(100%);
    opacity: 0;
  }
}
.finops-modal-right {
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  max-width: 1000px;
  margin: 0;
}
.finops-modal-right .modal-dialog {
  margin: 0px;
  max-width: 100%;
}
.finops-modal-right .modal-body {
  padding: 0px;
}
.finops-modal-right .modal-content {
  border-radius: 0px;
}
.finops-modal-right-content,
.finops-modal-right .modal-header {
  border-bottom: 2px solid #f1f1f1;
}
.finops-modal-right + .modal-backdrop {
  /* opacity: 0.8; */
}
.finops-modal-right-footer {
  padding: 10px;
}
/* Different widths for Roles and Groups modals */
.rbac-roles-modal {
  max-width: 600px !important;
}
.rbac-groups-modal {
  max-width: 1000px !important;
}
.left-nav-group .main-icon {
  opacity: 0.5;
  margin: 0px 2px 0px 2px;
  padding: 5px;
}
.main-nav[module="finance"] img.main-icon {
  /* margin-left: 6px; */
  /* margin-right: 5px; */
}
.main-nav[module="finance"] img.sub-icon {
  margin-left: 4px;
}
.finops-model-1 {
  overflow: hidden;
}
.finops-model-1 .modal-header {
  padding: 20px 24px;
}
.finops-model-1 .modal-dialog {
  max-width: 100%;
  top: 40px;
  animation-duration: 0.2s;
}
.finops-model-1 .modal-content {
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
}
.finops-tab-1 .nav-link.active {
  background: transparent;
  color: #386dff;
}
.finops-tab-1 .nav-link {
  font-size: 16px;
  color: #b3b3b3;
}
.finops-tab-1 .nav-link span {
  display: inline-block;
  border: 1px solid;
  border-radius: 100%;
  padding: 0px 8px;
}
.cursor-pointer {
  cursor: pointer;
}
.rule-division .choices__list .choices__item:last-child {
  margin-right: 7px;
}
/* Common End */
.top-menu {
  display: inline-block;
  vertical-align: top;
  margin-top: 20px;
}

.top-menu li {
  list-style-type: none;
  display: inline-block;
  margin: 0 7px;
  padding: 6px 10px;
  cursor: pointer;
}

.top-menu li a {
  color: #545965;
}

.top-menu-active,
.top-menu li:hover {
  background-color: #040622;
  color: #ffffff;
  border-radius: 20px;
}

.top-menu-active a,
.top-menu li:hover a {
  color: #ffffff !important;
}

.date-filter {
  vertical-align: top;
  margin-right: 20px;
}

.date-filter i {
  margin-left: 3px;
}

.card-title {
  color: #000000;
  font-size: 20px !important;
  margin-top: 4px !important;
  vertical-align: top !important;
}

.chart-stats p.text-muted {
  font-size: 13px;
}

body[data-sidebar="dark"] .menu-title {
  color: #b9b9b9;
  font-size: 15px;
  opacity: 1;
}

body[data-sidebar="dark"] #sidebar-menu ul li ul.sub-menu li a {
  color: #a7a7a7;
}

body[data-sidebar="dark"] #sidebar-menu ul li a {
  color: #a7a7a7;
}

body[data-sidebar="dark"] #sidebar-menu ul li a .nav-icon {
  fill: #a7a7a7;
}

.page-title {
	font-size: 20px;
	font-style: normal;
	font-weight: 600;
	line-height: 28px;
}

/* ----------------------------- */

/* Login */
.page-login header,
.page-login .vertical-menu {
  display: none !important;
}

.page-login .main-content {
  margin-left: 0;
}

.page-login .page-content {
  padding: 0;
}

.page-login[data-sidebar="dark"] {
  background-color: var(--bs-body-bg);
}

.auth-logo .auth-logo-dark {
  max-height: 30px;
}

.auth-page .error-msg {
  min-height: 45px;
}

/* Users */
.users-block .list-group-item {
  padding: 10px 15px 10px 15px;
  border-radius: 0px;
}

.users-block .list-group-item.active h5 {
  color: #fff;
}

.users-block .list-group a:hover {
  z-index: 2;
  background-color: #3b76e1;
}

.users-block .list-group a:hover h5 {
  color: #fff;
}

/* Accounts */
@media (min-width: 576px) {
  .accounts-dialog {
    max-width: 1200px;
  }
}

.accounts-dialog #nextBtn {
  margin-left: 0px !important;
}

.tables-list {
  margin-left: -10px;
  overflow: auto;
  height: 320px;
}

.third-screen .tables-list {
  height: 450px;
}

.tables-list .form-check {
  margin-bottom: 6px !important;
}

.tables-list .form-check-label {
  font-size: 13px;
  user-select: none;
}

.wizard-instructions {
  text-align: center;
  border: 1px solid #efefef;
  height: 350px;
  padding: 10px;
}

.accounts-dialog .form-control,
.accounts-dialog .form-select {
  border: 1px solid #c9c9c9;
}

.accounts-dialog .table-bordered {
  border: 1px solid #e0e0e1;
}

/*Inner Card*/
.accounts-dialog .card00 {
  z-index: 0;
  box-shadow: none;
  margin-bottom: 0;
}

/*Left side card with progressbar*/
.accounts-dialog .card1 {
  margin-left: 50px;
  z-index: 0;
}

/*right side cards*/
.accounts-dialog .card2 {
  display: none;
}

.accounts-dialog .card2.show {
  display: block;
}

.accounts-dialog .card1 h6 {
  font-weight: normal;
}

.accounts-dialog .card1 .active {
  font-weight: 600;
}

/*Icon progressbar*/
.accounts-dialog #progressbar {
  position: absolute;
  left: 15px;
  overflow: hidden;
  color: #e53935;
  padding-left: 0;
}

.accounts-dialog #progressbar li {
  list-style-type: none;
  font-size: 8px;
  font-weight: 600;
  margin-bottom: 50px;
}

.accounts-dialog #progressbar li:nth-child(3) {
  margin-bottom: 88px;
}

.accounts-dialog #progressbar .step0:before {
  content: "";
  color: #fff;
}

.accounts-dialog #progressbar li:before {
  width: 30px;
  height: 30px;
  line-height: 25px;
  display: block;
  font-size: 25px;
  background: #fff;
  border: 2px solid #3b76e1;
  border-radius: 50%;
  margin: auto;
}

/*ProgressBar connectors*/
.accounts-dialog #progressbar li:after {
  content: "";
  width: 3px;
  height: 80px;
  background: #bdbdbd;
  position: absolute;
  left: 14px;
  top: 15px;
  z-index: -1;
}

.accounts-dialog #progressbar li:nth-child(3):after {
  top: 81px;
}

.accounts-dialog #progressbar li:nth-child(2):after {
  top: 0px;
}

.accounts-dialog #progressbar li:first-child:after {
  position: absolute;
  top: -81px;
}

/*Color of the connector before*/
.accounts-dialog #progressbar li.active:after {
  background: #3b76e1;
}

/*Color of the step before*/
.accounts-dialog #progressbar li.active:before {
  background: #3b76e1;
  font-family: boxicons;
  content: "\e9da";
}

@media screen and (max-width: 912px) {
  .accounts-dialog .card1 {
    border: none;
    margin-left: 50px;
  }

  .accounts-dialog .card2 {
    margin-bottom: 25px;
  }

  .accounts-dialog #progressbar {
    left: 15px;
  }
}

@media screen and (min-width: 768px) {
  .page-home .top-menu,
  .page-home .date-filter {
    display: block !important;
  }

  .business-units-level-1,
  .business-units-level-2 {
    width: 75%;
  }
}

@media screen and (max-width: 768px) {
  .page-business-units .page-content,
  .page-business-units .container-fluid {
    padding-left: 0px;
    padding-right: 0px;
  }
}

.business-units-list {
  /* margin: 20px; */
}

.page-resources .business-units-list {
	/* padding: 10px;
    margin: 20px; */
    max-height: 650px;
    overflow-y: auto;
}   

.all-business-units .accordion-button:not(.collapsed)::after {
  display: none;
}

.add-level-1-bu-btn {
  margin-left: 30px;
  margin-top: 15px;
}

.business-units-list .accordion {
  margin-bottom: 10px;
  margin-left: 20px;
}

.business-units-list .accordion-header {
  position: relative;
}

.business-units-list-all .accordion-button::after {
  background-image: none !important;
  content: "";
  font-size: 20px;
  margin-top: -10px;
}

.business-units-list .accordion-button::after {
  background-image: none !important;
  content: "+";
  font-size: 20px;
  margin-top: -10px;
}

.accordion-button:not(.collapsed)::after {
  background-image: none !important;
  content: "-";
  font-size: 20px;
  margin-top: -10px;
  transform: none;
}

.business-units-list .accordion-body {
  margin-bottom: 20px;
}

.business-units-level-1-header button {
  background-color: #e0efe2 !important;
  border-left: 3px solid #04ff26;
  color: #000000 !important;
}

.business-units-level-2-header button {
  color: #000000 !important;
  border-left: 3px solid #88b2ff;
  background-color: #d8e4f9 !important;
}

.business-units-list .alert {
  background-color: #ddf4fb;
  border-color: #cdeff9;
  color: #000000 !important;
  font-weight: 500;
  border-left: 3px solid #9ae8ff;
}

.business-units-list + button {
  background-color: #e0efe2;
  border-color: #04ff26;
  border-radius: 3px;
  font-weight: 500;
}

.business-units-level-1 + button {
  background-color: #d8e4f9;
  border-color: #88b2ff !important;
  border-radius: 3px;
  font-weight: 500;
}

.business-units-level-2 + button {
  background-color: #ddf4fb;
  border-color: #90e6ff !important;
  border-radius: 3px;
  font-weight: 500;
}

.business-units-list .alert,
.business-units-level-2 + button {
  position: relative;
}

.business-units-list .alert:before,
.business-units-level-2 + button:before {
  position: absolute;
  content: "";
  border-top: 1px solid #88b2ff;
  width: 20px;
  left: -23px;
  top: 20px;
}

.business-units-level-1 .accordion-header,
.business-units-level-1 + button {
  position: relative;
}

.business-units-level-1 .accordion-header:before,
.business-units-level-1 + button:before {
  position: absolute;
  content: "";
  border-top: 1px solid #04ff26;
  width: 20px;
  left: -20px;
  top: 20px;
}

.business-units-level-1 + button,
.business-units-level-2 + button {
  width: 90px !important;
}

.bu-action-btns {
  position: absolute;
  right: 50px;
  top: 8px;
  z-index: 999 !important;
}

.business-units-list .alert .bu-action-btns {
  right: 5px !important;
  top: 5px !important;
}

.bu-action-btns button {
  float: left;
  border: 0px;
  padding: 0px;
  background: none;
}

.bu-action-btns i {
  font-size: 25px;
  color: #344eaa;
}

.alert-box .modal-body {
  padding: 0px;
}

.alert-btns {
  border-top: 1px solid #c9c7c7;
  font-size: 17px;
}

.alert-btns a {
  display: inline-block;
  width: 48%;
  padding: 10px 0px;
}

.alert-btns a:first-child {
  border-right: 1px solid #c9c7c7;
}

.BusinessUnitModal + .modal-backdrop {
  opacity: 0.8;
}

.BusinessUnitModal .modal-content {
  border-radius: 0px;
}

.BusinessUnitModal .form-label {
  color: #000000;
  margin-bottom: 4px;
}

.BusinessUnitModal input {
  border-radius: 5px;
  border-color: #d1d1d1;
}

.BusinessUnitModal button {
  border-radius: 5px;
}

.finops-custom-nav li a {
  border-top: 0px !important;
  border-left: 0px !important;
  border-right: 0px !important;
  padding-top: 16px;
  padding-bottom: 16px;
  font-size: 16px;
}

.finops-custom-nav li a.active {
  border-bottom: 3px solid #040622 !important;
  color: #040622 !important;
  background: transparent !important;
}

.finops-custom-nav li a:hover {
  border-bottom: 3px solid !important;
}

.rules-allocation-nav li a {
  padding: 16px 30px;
}

/*Common*/
.top-profile-section {
  position: absolute;
  right: 0px;
  display: none !important;
}

/*Cost Explorer */
.navbar-header {
  justify-content: space-between !important;
}

.ce-date-filter-dropdown {
  margin-top: 25px;
  margin-left: 30px;
}

.ce-bu-top-filter {
  margin-left: 30px;
  border-radius: 0px;
  padding: 3px 13px 3px 10px;
  font-size: 13px;
  margin-top: 13px;
}

.ce-top-kpi-cards p.text-black {
  font-weight: 500;
  font-size: 15px;
}

.dropdown {
  min-width: 100px;
}

.page-savings-plan .dropdown {
  min-width: 50px;
}

.page-aws-recommendation .dropdown {
  min-width: 0 !important;
}

.page-aws-recommendation .dropdown-menu {
  min-width: 18rem !important;
}

.page-aws-recommendation .nav-tabs .nav-item.show .nav-link {
  color: #2760ea !important;
  background: #f1f3f7;
}

#recom-next-btn:hover,
#recom-prev-btn:hover {
  background-color: #efefef;
}

.pagination-div {
  position: absolute;
  right: 40px;
  background-color: white;
  border-radius: 0 0 21px 30px;
}

.recomData th {
  cursor: pointer;
}

.pagination-text {
  display: flex;
  justify-content: end;
  align-items: center;
  font-size: 14px;
  color: #555;
}

.status-dropdown-css {
  /* border: 1px solid rgb(172, 172, 172); */
  border: 1px solid #dbdbdb;
  border-radius: 8px;
  /* padding: 10px 20px; */
  padding: 12px 16px 12px 24px;
  width: 175px;
  border-radius: 12px;
}

/* search button */
.search {
  background: #ebebeb;
  padding: 7px;
  border-radius: 9px;
}

.search input {
  background: #ebebeb;
  border: 0;
  outline: none;
}

.finops-form .modal-title span:first-child {
  color: #000000;
  font-weight: bold;
}

.finops-form .modal-title span:last-child {
  display: block;
  font-size: 14px;
  color: #5f5f5f;
  font-weight: normal;
}

.finops-form + .modal-backdrop {
  opacity: 0.7;
}

.finops-form input,
.finops-form select,
.finops-form textarea {
  border-color: #c4c4c4;
  border-radius: 5px;
}

.finops-form select {
  appearance: auto;
}

.finops-form input:hover,
.finops-form input:focus,
.finops-form select:hover,
.finops-form select:focus,
.finops-form textarea:hover,
.finops-form textarea:focus {
  border-color: #7f7f7f;
}

.finops-form label {
  color: #000000;
  margin-bottom: 5px;
}

.finops-form .form-group {
  margin-bottom: 25px;
}

.br-5 {
  border-radius: 5px;
}

.rules-allocation-modal .modal-dialog {
  max-width: 95%;
}

.rules-allocation-modal .bootbox-body {
  height: 70vh;
}

.bu-select-cbox {
  margin-top: 2px;
}

.bu-select-cbox-parent input {
  width: 17px;
  height: 17px;
  border-radius: 50% !important;
  margin-left: -25px !important;
  margin-top: 8px;
}

.bu-select-cbox-parent label {
  font-size: 15px;
  float: left;
  margin-top: 7px;
}

.bu-select-cbox input[type="checkbox"] {
  border-radius: 0px !important;
}

.bu-select-cbox input {
  width: 17px;
  height: 17px;
  margin-left: -25px !important;
  margin-top: 8px;
}

.bu-select-cbox label {
  font-size: 15px;
  float: left;
  margin-top: 7px;
}

.business-units-selection .accordion-button {
  padding-left: 30px;
}

.business-units-selection .accordion-button::after {
  position: absolute;
  left: 8px;
}

.business-units-selection-all .bu-action-btns {
  right: 20px !important;
}

.business-units-selection .bu-action-btns {
  right: 10px !important;
}

.business-units-selection .accordion-body {
  padding-bottom: 0px;
}

.business-units-modal .modal-dialog {
  max-width: 650px;
}

.business-units-modal + .modal-backdrop {
  opacity: 0.8;
}

/* scroll bar code */

.rules-allocation-modal .modal-body {
  height: 80vh;
}

.rs-unallocate-cbox {
  padding: 10px 10px 10px 30px;
  border: 1px solid #d9d9d9;
  color: #000000;
  background-color: #f5f6f8;
}

/* Success Toast message */

.success-msg {
  display: flex;
  min-width: 50px;
  position: fixed;
  bottom: 50px;
  border-radius: 5px;
  background: #040622;
  padding: 10px;
  box-shadow: 0 6px 20px -5px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transform: translateX(calc(100% + 30vw));
}

.success-msg .success-msg-content {
  display: flex;
  align-items: center;
}

.success-msg .success-msg-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background-color: #000000;
}

.success-msg .success-msg-progress:before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background-color: #ffffff;
}

.success-msg-progress.success-msg-active:before {
  animation: progress 3s linear forwards;
}

@keyframes progress {
  100% {
    right: 100%;
  }
}

/* Left Nav */
.isvertical-topbar {
  transition: none !important;
}

.main-nav-icon {
  max-height: 28px;
  margin-right: 5px;
}

.main-nav-sf-icon {
  max-height: 23px;
  margin-right: 7px;
  margin-left: 3px;
}

.main-nav-aws-icon {
  max-height: 21px;
}

.main-nav-gcp-icon {
  max-height: 20px;
}

.main-nav-databricks-icon {
  max-height: 24px;
  margin-left: 6px;
  margin-right: 7px;
}

.main-nav-user-img {
  max-width: 27px;
  margin-right: 6px;
  border-radius: 50%;
}

.main-nav-admin-img {
  max-height: 41px;
  margin-left: -5px;
  margin-right: -2px;
}

.main-nav-admin-link {
  margin: -8px 0px;
}

.secondary-nav {
  width: 176px;
  background: #ffffff;
  position: fixed;
  height: 100%;
  top: 0;
  left: 70px;
  z-index: 10000;
  color: black;
  transition: 0.5s;
  border-right: 1px solid #e0e0e0;
  border-width: thin;
}

.sub-nav-active:after {
  content: "";
  position: absolute;
  right: -1px;
  top: 18px;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #ffffff;
}

.secondary-nav-header-icon {
  max-height: 35px;
  margin: 10px;
}

.secondary-nav-icon {
  max-height: 20px;
  margin-right: 8px;
}

.secondary-nav.secondary-nav-show {
  display: block;
}

.secondary-nav.secondary-nav-hide {
  display: none;
}

.secondary-nav.secondary-nav-show span {
  display: block;
  white-space: nowrap;
}

.secondary-nav-open .main-content {
  margin-left: 200px !important;
  padding-left: 40px;
}

.secondary-nav-open .isvertical-topbar {
  left: 230px !important;
  z-index: 1000 !important;
}

.secondary-nav-open .vertical-menu-btn {
  display: none;
}

.secondary-nav h6 {
  margin: 0px 15px 15px 15px;
  font-size: 23px;
}

.secondary-nav ul {
  height: auto !important;
  display: block !important;
  margin: 0 5px;
}

.secondary-nav > div > ul > li > a {
  padding: 15px 16px 15px 5px !important;
  font-size: 15px !important;
}

/* .secondary-nav ul li a{
    padding:15px 16px 15px 5px !important;
	font-size: 15px!important;
} */
.secondary-nav,
.secondary-nav ul {
  background-color: #f1f3f7 !important;
}

.secondary-nav ul li a:not(.secondary-nav-active) {
  color: #141b2b !important;
  font-weight: normal !important;
}

.secondary-nav ul li:not(:last-child) a {
  border-bottom: 1px solid #d8d8d8;
}

.secondary-nav-active {
  font-weight: bold !important;
  color: #000 !important;
}

.secondary-nav-close {
  background: none;
  border: 0px;
  background: none;
  border: 0px;
  position: absolute;
  top: 7px;
  right: -10px;
  background-color: #ffffff;
  font-size: 18px;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  border: 1px solid #000;
}

.secondary-nav-close i {
  /* font-size: 13px; */
  /* vertical-align: top; */
  /* margin-top: 2px; */
  /* margin-left: -1px; */
}

/* Data Sources */
.data-source-block {
  border: 1px solid #d9d9d9;
  border-radius: 3px;
  padding: 15px 10px;
}

.data-source-block img {
  margin-bottom: 25px;
}

.data-source-block h5 {
  font-size: 20px;
  color: #222222;
  margin-bottom: 5px;
}

.data-source-block p {
  line-height: 18px;
}

.data-source-block .alert-success {
  border-radius: 3px;
  margin-top: 30px;
  margin-bottom: 7px;
}

.data-source-sf-img {
  max-height: 20px;
  vertical-align: top;
  margin-top: 1px;
}

.sf-user-scrpt {
  background-color: #f7f7f7;
}

.row-sub_account td:first-child {
  margin-left: 20px;
  display: flex;
  border-left: 3px solid;
}

.sf-acc-steps li {
  display: inline-block;
  list-style-type: none;
  position: relative;
  margin: 0 20px;
  text-align: center;
}

.sf-acc-steps li span {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #eaeaea;
  border-radius: 50%;
}

.sf-step-active span {
  background-color: #00bcd4 !important;
}

.sf-acc-steps li:first-child::after {
  content: "";
  position: absolute;
  height: 2px;
  width: 160px;
  background-color: #00bcd4;
  top: 9px;
}

/* FI */
.fi-dev-question,
.openai-response-json {
  display: none !important;
}

.page-FI #page-topbar,
.page-FI-Dev #page-topbar {
  display: none !important;
}

.page-FI .page-content,
.page-FI-Dev .page-content {
  padding: 0px !important;
}

.page-FI-1 #page-topbar {
  display: none !important;
}

.page-FI-1 .page-content {
  padding: 0px !important;
}

.card-fi-search {
  position: fixed;
  bottom: 0px;
  right: 0;
  left: 220px;
  border-radius: 0px;
  margin-bottom: 0px;
  background-color: #f1f3f7;
}

.card-fi-search .card-body {
  width: 90%;
  margin: auto auto 20px auto;
  padding: 20px 0px;
  background-color: #fff;
  box-shadow: 0px 0 10px rgb(196 196 196 / 80%);
  border-radius: 20px;
}

.fi-search-user-avatar {
  float: left;
  margin: 0 15px;
}

.fi-search-user-avatar img {
  max-height: 45px;
  border-radius: 50%;
  margin-top: 2px;
}

.fi-search-box {
  float: left;
  position: relative;
  width: calc(100% - 85px);
}

.fi-search-box .fi-search-input {
  border-color: #c8c8c8;
  border-radius: 4px;
  padding: 15px 10px;
}

.fi-search-input-active {
  border-top: 0px !important;
  border-top-left-radius: 0px !important;
  border-top-right-radius: 0px !important;
}

.fi-search-title-txt {
  font-size: 12px;
  color: #000;
  font-weight: bold;
  margin-top: -5px;
  margin-bottom: 5px;
}

.fi-intro {
  width: 70%;
  margin: auto;
}

.fi-section {
  padding-bottom: 120px;
}

.fi-recents,
.fi-favorites,
.fi-trending,
.fi-avatar {
  width: 70%;
  margin: 70px auto auto;
  text-align: center;
}

.fi-intro-txt {
  font-size: 17px;
  margin: 70px auto 50px auto;
}

.fi-intro-txt img {
  max-height: 80%;
  border-radius: 5px;
  display: block;
  margin: auto;
}

.fi-intro-txt p {
  font-size: 20px;
}

.fi-search-help {
  position: absolute;
  bottom: 85px;
  left: -60px;
  right: 0;
}

.fi-search-help img {
  max-height: 45px;
  border-radius: 50%;
  margin-right: 10px;
}

.fi-search-help-txt {
  display: inline-block;
  font-size: 16px;
  color: #000;
  vertical-align: middle;
}

.fi-search-help .fi-cursor {
  margin-top: 15px;
}

.fi-suggesstions {
  position: absolute;
  bottom: 52px;
  background-color: #fff;
  left: 0;
  right: 0;
  border: 1px solid #c8c8c8;
  -webkit-box-shadow: 0 0 5px #e0e0e0;
  box-shadow: 0 0 5px #e0e0e0;
  border-bottom: 0px !important;
  border-radius: 4px;
  border-bottom-left-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
  z-index: 9;
}

.fi-suggesstions div {
  cursor: pointer;
  padding: 15px 12px;
  font-size: 14px;
  color: #000;
  border-bottom: 1px solid #ededed;
}

.fi-suggesstions div:hover {
  background-color: #000000;
  color: #ffffff;
}

.page-FI .fa-arrow-right {
  transform: rotate(-45deg);
}

.fi-sample-questions div {
  cursor: pointer;
  display: inline-block;
  border: 1px solid #a1a1a1;
  padding: 8px 12px;
  border-radius: 3px;
  margin: 10px;
}

.fi-sample-questions div:hover,
.fi-selected-qn {
  background-color: #000000 !important;
  color: #fff !important;
}

.fi-res-block {
  border-radius: 3px;
  margin-bottom: 20px;
}

.fs-res-active {
  min-height: 100vh;
}

.fi-res-question {
  display: block;
  border-bottom: 1px solid #d5d5d5;
  background-color: #fff;
}

.fi-res-question-block,
.fi-res-answer-block {
  width: 98%;
  margin-left: auto;
  padding: 20px 0px;
}

.fi-res-qn-label {
  position: relative;
  display: inline-block;
  height: 40px;
  width: 40px;
  vertical-align: middle;
  margin-right: 15px;
}

.fi-res-qn-label img {
  position: absolute;
  border-radius: 3px;
  max-width: 65px !important;
  right: 0px;
  margin-top: -13px;
}

.fi-qn-answer {
  color: #000;
  font-size: 18px;
}

.fi-res-qn-txt {
  display: inline-block;
  color: #000;
  font-size: 16px;
  vertical-align: middle;
}

.fi-res-qn-txt i {
  display: none;
}

.fi-res-ans-label {
  position: relative;
  display: inline-block;
  vertical-align: top;
  margin: 0 15px;
  width: 40px;
}

.fi-res-ans-label img {
  position: absolute;
  border-radius: 3px;
  max-width: 65px !important;
  right: 0px;
}

.fi-res-ans-txt {
  display: inline-block;
  color: #000;
  font-size: 16px;
  vertical-align: middle;
  width: 90%;
  margin-top: 7px;
}

.btn-ask-again {
  border: 1px solid #b3b3b3;
  padding: 5px 10px;
  border-radius: 3px;
}

.fi-cursor {
  display: inline-block;
  width: 10px;
  height: 1.2em;
  background-color: black;
  animation: fi-blinkCursor 1s infinite;
  vertical-align: top;
  margin-top: 3px;
}

.fi-res-ans-intro:after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 1.2em;
  background-color: black;
  animation: fi-blinkCursor 1s infinite;
  vertical-align: top;
  margin-top: 3px;
}

.fi-res-ans-intro.hide-cursor::after,
.fi-res-ans-end-txt.hide-cursor::after {
  display: none;
}

@keyframes fi-blinkCursor {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.fs-res-active .fi-res-answer {
  min-height: 100vh;
}

.fi-ai-avatars {
  display: flex;
  justify-content: center;
  cursor: pointer;
}

.fi-ai-avatar {
  padding: 20px;
}

.fi-ai-avatars-border-active {
  border: 5px solid black;
}

.fi-ai-avatars-border-active img {
  max-height: 140px;
}

.fi-feedback {
  color: rgba(0, 0, 0, 0.5) !important;
}

.fi-feedback-thumbs-up {
  cursor: pointer;
  margin: 0 4px;
}

.fi-feedback-thumbs-down {
  cursor: pointer;
}

.fi-feedback-modal .modal-dialog {
  max-width: 600px;
}

.fi-search-input-btn {
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 0px;
  height: 52px;
}

.cost-details .col-sm-6:nth-child(odd) {
  border-right: 1px solid #eff0f2;
}

.cost-details .col-sm-6:last-child > div,
.cost-details .col-sm-6:nth-last-child(2) > div {
  border-bottom: 0px !important;
}

/* Resources */
.resources-filters {
  /* margin-top: 14px; */
  margin-bottom: 18px;
}

.resources-selection-filters .btn {
  padding: 5px 10px;
  border-radius: 3px;
}

input.resource-selection-cbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  margin-top: 1px;
  vertical-align: middle;
}

.resources-top-nav-card {
  /* margin-bottom: 0px; */
  border-radius: 7px;
  /* margin-top: 6px; */
  box-shadow: none !important;
  border: solid 1px #e1e3e7;
}

/* .resources-top-nav-card .card-body {
  padding: 10px 15px;
} */

.resources-top-nav-card .avatar {
  height: 35px;
  width: 35px;
}

/* Perspectives */
/* Perspectives */
.perspective-modal .bu-select-cbox label {
  width: 56px;
}

.perspective-modal + .modal-backdrop {
  opacity: 0.8;
}

.perspective-modal .modal-dialog {
  max-width: 80%;
}

.perspective-modal .modal-content {
  height: calc(100vh - 50px);
}

.perspective-modal input[name="perspective_type"] {
  width: 20px;
  height: 20px;
}

.perspective-modal input[name="perspective_type"] + label {
  margin-top: 2px;
  margin-left: 6px;
  font-size: 15px;
}

.add-perspective-type {
  border-bottom: 1px solid #e6e6e6;
  padding-bottom: 20px;
  margin-top: 5px;
}

.perspective-modal .business-units-selection {
  height: 68vh;
  overflow-y: auto;
  padding-right: 20px;
}

.perspective-modal input[name="perspective_title"] {
  display: inline-block;
  border-radius: 0px;
  border: 0;
  border-bottom: 1px solid #e2e5e8;
  width: 250px;
  padding-bottom: 5px;
  padding-left: 0;
  padding-top: 0;
  color: #000;
  font-size: 18px;
  font-weight: bold;
}

.resources-select-box input[type="checkbox"] {
  border-radius: 0px !important;
  width: 17px;
  height: 17px;
  margin-left: -25px !important;
  margin-top: 8px;
}

.resources-select-box label {
  font-size: 15px;
  float: left;
  margin-top: 5px;
  cursor: pointer;
}

/* recommendations */
.potential-savings .badge {
  font-size: 15px;
  padding: 5px 10px;
}

.recommendations-action #dropdown:focus {
  box-shadow: none;
}

.recommendations-action .dropdown-menu {
  border-radius: 5px !important;
}

#recommendationsFilter .dropdown > a {
  display: block;
  text-align: center;
}

.warehouse-recommendation .alert-info {
  background-color: #f7f7f7;
  border-left: 4px solid #32b8e9;
  border-radius: 5px;
  padding-left: 10px;
  color: #000000;
}

.warehouse-recommendation .btn:focus {
  box-shadow: none;
}

/* Rules */
#updateRuleForm .page-filter-select-custom {
  width: 100%;
  border-color: #c4c4c4;
  border-radius: 5px;
  margin-bottom: 25px;
}
.allocation-rules-modal .modal-body {
  background-color: #f1f3f7;
}
.rule-condition-row {
  margin-bottom: 15px;
}
.rule-condition-options {
  padding: 14px;
  background-color: #f5f7f9;
  border-radius: 8px;
}
.allocation-rule-form select {
  height: 44px;
  cursor: pointer;
}
.rule-cond-btn {
  color: #2960f5;
  font-weight: 500;
}
.rule-cond-btn:focus {
  box-shadow: none;
}
.rule-cond-btn:hover {
  background-color: #ededed;
  color: #171717;
}
.rule-action-btn {
  width: 100px;
  height: 44px;
  margin-top: 15px;
  font-size: 16px;
}
#rule-form-tab-1 label {
  color: #4c4c4c;
}
#rule-form-tab-1 input[type="text"] {
  height: 44px;
}
#rule-form-tab-1 input[type="text"],
#rule-form-tab-1 textarea {
  background-color: #ededed;
}
.rule-division .choices__inner {
  height: 44px;
  border-radius: 5px;
}
.rule-division .choices__inner .choices__input {
  padding-top: 7px;
}
.rules-kpi-card {
  border-radius: 12px;
  border: 1px solid #e6e6e6;
  padding: 24px !important;
  width: 450px;
}
.rules-kpi-card > div:first-child {
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid #d9d9d9;
}
.rules-kpi-cards img {
  max-height: 40px;
}
.page-allocation-rules .finops-custom-nav li a {
  color: #737373 !important;
  font-weight: 400 !important;
}
.page-allocation-rules .finops-custom-nav li a.active {
  border-bottom: 1.5px solid #2760ea !important;
  color: #2760ea !important;
}
.rules-tab-pane table th {
  font-size: 14px;
  font-weight: 500;
}
.rules-tab-pane table th {
  color: #696969;
}
.rules-tab-pane table tbody {
  color: #292929;
}
.rules-tab-pane table tbody .alert {
  border-radius: 44px;
}
.rules-filters select,
.rules-filters input {
  border-radius: 8px;
  height: 44px;
  border-color: #dbdbdb;
}
.rules-filters select {
  font-size: 14px;
  font-weight: 500;
  color: #000000;
  appearance: auto;
  width: 160px;
  margin-right: 7px;
}
.rules-filters input[name="rules_search"] {
  padding-left: 36px;
  width: 300px;
  margin-right: 24px;
}
.rules-filters i.fa-search {
  font-weight: normal;
  position: absolute;
  top: 16px;
  left: 23px;
}
input[name="rule_name"].rule_error_msg {
  border: 1px solid #ff0000 !important;
}
input[name="rule_name"].rule_error_msg + span {
  display: block !important;
}
.rft-nav-btn {
  margin-top: 15px;
}

/* Standard Reports */
.report-section-title {
  margin-bottom: 15px;
  font-weight: 600;
}

.reports-section {
  margin-bottom: 20px;
}

.report-options-modal select,
.report-options-modal .custom-report-dropdown {
  cursor: pointer;
}

.report-options-modal + .modal-backdrop {
  opacity: 0.8;
}

.reports-search-section {
  margin: 20px 0px 30px 0px;
}

.reports-search-section input[type="text"] {
  border-radius: 5px;
}

.report-card {
  border-radius: 12px;
  background: #fff;
  transition: all 0.3s ease-in-out;
  padding: 16px;
  margin-bottom: 20px;
}

.report-card:hover {
  box-shadow: 0px 10px 16px -2px rgba(149, 151, 153, 0.1);
  transform: translate3d(0px, -13px, 0px);
  cursor: pointer;
}

.report-card-header {
  display: flex;
  align-items: center;
  padding-bottom: 16px;
}

.report-card-common-img {
  border-radius: 50px;
  background-color: #5d8ee6;
  height: 40px;
  width: 40px;
  margin-right: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}

.report-schedule-btn {
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid #dbdbdb;
  background-color: #fff;
  margin-right: 8px;
}

.report-schedule-btn:hover {
  background-color: rgba(39, 96, 234, 0.2);
  color: #2760ea;
}

.report-schedule-btn:hover .schedule-icon-gray {
  display: none;
}
.report-schedule-btn:hover .schedule-icon-blue {
  display: inline-block !important;
}

.view-report-btn:hover .run-icon-gray {
  display: none;
}
.view-report-btn:hover .run-icon-blue {
  display: inline-block !important;
}

.view-report-btn {
  padding: 6px 6px 6px 12px;
  border-radius: 6px;
  border: 1px solid #dbdbdb;
  background-color: #fff;
  /* background-color: rgba(39, 96, 234, 0.2); */
}

.grc-divider {
  height: 1px;
  background: #d9d9d9;
  margin: 20px 0;
}

.view-report-btn span,
.report-schedule-btn span {
  max-width: 0;
  -webkit-transition: max-width 1s;
  transition: max-width 1s;
  display: inline-block;
  vertical-align: top;
  white-space: nowrap;
  overflow: hidden;
}

.view-report-btn:hover span,
.report-schedule-btn:hover span {
  max-width: 8rem;
  padding-left: 6px;
}

.view-report-btn:hover {
  background-color: rgba(39, 96, 234, 0.2);
  color: #2760ea;
}

.view-report-btn > span {
  color: #2760ea;
}

.schedule-icon {
  margin-right: 8px;
}

.schedule-delete-title {
  color: #171717;
  margin-left: 16px;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 32px;
}

.schedule-delete-modal .modal-dialog {
  max-width: 700px;
  width: 100%;
}

.schedule-delete-modal .modal-body {
  padding: 36px 36px 40px 36px;
}

.report-card-body {
  /* padding: 0px 16px 0px 16px; */
}

.report-intro {
  height: 40px;
  overflow: hidden;
  color: #666;
  font-family: "Work Sans";
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  margin-bottom: 16px;
}

.report-avail-opts {
  margin-bottom: 24px;
}

.report-avail-opts img {
  max-height: 25px;
}

.report-card-body > h6 {
  color: #7d7d7d;
}

.report-card-footer {
  /* border-top: 1px solid #e0e4ea;
	padding: 8px; */
}

.report-card-header > h6 {
  color: gray;
}

.report-card > hr {
  /* margin: 8px; */
}

.report-card-button {
  border: none;
  background: none;
  padding: 0;
}

.report-card-button > .fa-bookmark {
  font-size: 15px;
  margin-right: 5px;
  padding: 8px;
}

.report-card-button > .fa-clock {
  font-size: 16px;
  padding: 8px;
}

.report-card-name {
  border-radius: 50px;
  padding: 2px 8px;
  background-color: #f1f3f7;
}

.report-card-title {
  /* color: #000000;
    font-size: 17px;
	font-weight: normal;
	margin-top: 10px;
    line-height: 22px; */
  color: #1a1a1a;
  font-family: "Work Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 21px;
}

.report-card-date {
  color: rgba(0, 0, 0, 0.6);
}

.report-card-sf-img {
  max-height: 25px;
  vertical-align: top;
  margin-top: -1px;
  margin-right: 12px;
}

.report-card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-grow: 1;
  margin-top: 4px;
}

.report-options-modal .modal-dialog {
  max-width: 1000px;
}

.DataTablesContainerByServiceColor > td {
  text-align: center;
}

.text-report-color > th {
  color: #000000 !important;
}

.text-report-color {
  color: #000000 !important;
}

.report-options-modal .fi-res-ans-label img {
  max-width: 50px !important;
}

.page-standard-reports input[type="radio"] {
  width: 20px;
  height: 20px;
}

.page-standard-reports input[type="radio"] + label {
  margin-top: 2px;
  margin-left: 6px;
  font-size: 15px;
}

.report-schedule-modal input[type="datetime-local"] {
  margin-top: 15px;
  cursor: pointer;
}
/* .loading-gif-container{
	width: 410px;
	padding: 56px 28px 40px 28px;
} */
.loading-gif-close-btn {
  position: absolute;
  top: -30px;
}
.loading-gif-modal .modal-content {
  border-radius: 20px;
  width: 410px;
  padding: 56px 28px 40px 28px;
  margin-top: 220px;
}
.loading-gif-modal .modal-body {
  padding: 0;
}
.loading-gif {
  width: 284px;
  height: 270.4px;
}
.loading-gif-title {
  color: #191919;
  font-family: "Work Sans";
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 21px;
}
.loading-gif-status {
  color: #808080;
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  padding-top: 10px;
}
.loading-gif-dismiss-btn {
  border-radius: 4px;
  border: 1px solid #dbdbdb;
  background-color: #fff;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
  padding: 8px 16px;
}
.loading-gif-rpt-btn {
  padding: 8px 16px;
  border-radius: 4px;
  background: #2760ea;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
  border: none;
  color: #fff;
  text-align: center;
}
.loading-gif-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 40px;
}
.loading-gif-btn-container {
  display: flex;
  justify-content: center;
  gap: 16px;
}
.rpt-queue-download-btn {
  border-radius: 4px;
  background: #2760ea;
  padding: 8px;
  border: none;
  display: inline-block;
  width: 34px;
}
.reports-tr-queue td {
  padding: 20px 15px !important;
}
.reports_tr td {
  padding: 20px 15px !important;
}
.rpt-queue-status {
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  border-radius: 20px;
  padding: 6px 12px;
  display: inline-block;
  height: auto;
}
.Running-queue {
  background: #FFF7ED;
  color: #EC8511;
}
.Available-queue {
  background: #F2FAF6;
  color: #059650;
}
.Failed-queue {
  background: rgba(244, 67, 54, 0.15);
  color: #f44336;
}
.reports-queue,
.scheduled-reports {
  padding: 0 10px;
}
.report-card-body {
  padding: 10px;
}
#DataTables_Table_1_wrapper > div > div.dataTables_scrollHead > div {
  width: 100% !important;
}
#DataTables_Table_1_wrapper > div > div.dataTables_scrollHead > div > table {
  width: 100% !important;
}
/* Standard Reports */

/* ===================================== SNOWFLAKE DASHBOARD START ================================= */

.snowflake-chart,
.warehouse-chart,
.databases-chart {
  min-height: 500px;
}

.loading-containersfc,
.loading-containerwc,
.loading-containerdc {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 500px;
}

.my-2 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.chart-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ===================================== SNOWFLAKE DASHBOARD END ================================= */

.active_menu {
  background-color: #e0e9ff;
}

/* Users & Roles */
.users-list .badge-soft-success {
  font-size: 12px;
  padding: 10px;
  border-radius: 3px;
}

.user-roles-tab {
  border: 1px solid #d1d1d1;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  padding-right: 12px;
}

.user-roles-tab .nav-pills {
  height: 100%;
  border-right: 1px solid #d1d1d1;
}

.user-roles-tab .nav-link {
  position: relative;
  border-radius: 0px;
  padding: 10px;
  width: 100%;
  word-wrap: break-word;
}

.user-roles-tab .nav-pills .nav-link:not(:last-child) {
  border-bottom: 1px solid #d1d1d1;
}

.user-roles-tab .nav-link.active:after {
  content: "";
  position: absolute;
  right: -1px;
  top: 20px;
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-right: 12px solid #ffffff;
}

.user-roles-tab .nav-link img {
  float: left;
  max-width: 45px;
  margin: auto 10px 0px auto;
}

.user-roles-tab .nav-link span {
  display: block;
  margin-top: 5px;
}

.user-roles-tab .tab-content {
  padding: 15px 20px;
  height: 530px;
  line-height: 27px;
}

.users-filter-dropdown {
  position: absolute;
  right: 0;
  z-index: 9;
  background-color: #fff;
  border-radius: 3px;
  box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.2);
  padding: 15px 20px;
  width: 800px;
}

.users-filter-dropdown input[type="checkbox"] {
  display: none;
}

.users-filter-dropdown input[type="checkbox"] + label {
  cursor: pointer;
  background-color: #f5f5f5;
  padding: 8px;
  border-radius: 3px;
  width: 100%;
  margin-bottom: 15px;
  font-size: 13px;
  border: 1px solid #e8e8e8;
}

.users-filter-dropdown input[type="checkbox"]:checked + label {
  background-color: #000;
  color: #ffffff;
}

.user-filter-close-btn {
  margin-top: -10px;
}

.table-container::-webkit-scrollbar {
  width: 8px;
  height: 5px;
}

.table-container::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.table-container::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}

.table-container::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.table-container {
  max-width: 100%;
  max-height: 400px;
  border: 1px solid #ccc;
  border-radius: 10px 10px 0px 0px;
  overflow: auto;
}

.table-container::-webkit-scrollbar {
  width: 0;
}

.table {
  width: 100%;
}

.table td,
.table th {
  padding: 8px;
}

.sticky-top {
  position: sticky;
  top: 0;
  z-index: 0 !important;
}

.query-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  max-width: 370px;
}

.sno {
  white-space: nowrap;
}

.query-text-header {
  min-width: 380px;
  white-space: nowrap;
}

.space {
  min-width: 135px;
}

.extra-space {
  min-width: 135px;
}

.popover {
  z-index: 1030;
}

.table th {
  vertical-align: middle;
}

.bordered-table {
  border: 1px solid #ccc;
  border-radius: 10px;
}

.spacing {
  margin-left: 10px;
}

.card-price {
  font-size: 25px;
}

.vertical-menu::before {
  width: 0;
  height: 0;
}

body[data-sidebar="dark"] {
  background: #f1f3f7;
}

body[data-sidebar-size="sm"] .navbar-brand-box {
  width: 0px !important;
}

.navbar-brand-box {
  width: 0px;
}

.smooth-transition .vertical-menu {
  /* transition: width 400ms ease; */
  transition: none;
  -webkit-transition: none;
}

.cloud-services {
  display: flex;
  flex-direction: column;
  border-left: 1px solid #454545;
  padding: 5px 0 5px 16px;
  margin: 0 0 5px 34px;
}

.cloud-services a {
  padding: 0 !important;
}

.cloud-services > a {
  margin: 5px 0;
  position: relative;
  padding-bottom: 5px;
  font-weight: normal;
  border-bottom: none !important;
}

.cloud-services > a::after {
  content: "";
  position: absolute;
  bottom: 10px;
  left: -16px;
  width: 8px;
  height: 1px;
  background-color: black;
}

.no-space {
  margin-left: 7px;
  padding: 0 !important;
}

.secondary-nav > ul > li > a {
  padding: 15px 2.5px !important;
}

.menu-item {
  white-space: nowrap;
}

@media (min-width: 992px) {
  .logo {
    margin-top: 0;
  }
}

.main-nav-user-img {
  max-width: 23px;
  margin-right: 8px;
  margin-left: 3px;
}

.sidebar-menu-scroll {
  height: calc(100% - calc(180px + 26px));
  margin-top: calc(40px + 26px);
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .metismenu > li > a {
    padding: 8px 20px !important;
  }

  #sidebar-menu .metismenu .menu-item {
    font-size: 12px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .metismenu > li > a {
    padding: 5px 15px !important;
  }

  #sidebar-menu .metismenu .menu-item {
    font-size: 12px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1365px) {
  .metismenu > li > a {
    padding: 6px 15px !important;
  }

  #sidebar-menu .metismenu .menu-item {
    font-size: 12px;
  }

  .account {
    position: absolute !important;
    bottom: 0;
  }
}

@media only screen and (min-width: 1366px) and (max-width: 1399px) {
  .metismenu > li > a {
    padding: 8px 20px !important;
  }

  #sidebar-menu .metismenu .menu-item {
    font-size: 15px;
  }

  .left-nav-setup {
    position: absolute !important;
    bottom: 35px;
  }
}

@media only screen and (min-width: 1400px) {
  .metismenu > li > a {
    padding: 10px 20px !important;
  }

  #sidebar-menu .metismenu .nav-link-primary {
    font-size: 17px;
  }

  #sidebar-menu .metismenu .nav-link-secondary {
    font-size: 15px;
  }
}

.dropdown-width {
  min-width: 0;
  color: #7f838b;
  cursor: pointer;
}

.dropdown-color {
  background-color: #ffffff;
}

#sidebar-menu ul li a .nav-icon {
  fill: #a7a7a7 !important;
}

.optimise > button {
  border: none;
  color: #8a9099;
  padding-left: 0;
  background-color: #fff;
}

@media screen and (min-width: 768px) {
  .page-recommendations .top-menu,
  .page-recommendations .date-filter {
    display: block !important;
  }
}

.mm-collapse > li > a {
  padding-left: 8px !important;
}

.recommendations-action > span {
  font-size: 12px;
}

/* .action {
	color: #fff;
    background-color: #336699;
} */

.savings {
  margin-left: 25px;
  background: #e3fcef;
  color: #2dc290;
  font-size: 17px;
}

.current-cost {
  margin-left: 25px;
}

.table-recommendations {
  max-height: 550px;
}

.view-all {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}

.sort {
  cursor: pointer;
}

.recommmendations-table td,
.recommmendations-table th {
  font-size: 14px;
  border-color: #eff0f2 !important;
}

.recommmendations-table th {
  font-weight: 600;
}

.recommmendations-table td {
  padding: 14px !important;
}

.recommendations-card {
  border-radius: 5px !important;
}

/* .recommendations-filter-card {
	padding: 10px 20px !important;
} */

.filter-dropdown {
  box-shadow: 0 0 2px rgb(204, 204, 204);
  border-radius: 10px;
  padding: 7px 15px;
  background: #fff;
  /* background: #ebedf2; */
}

.filter-translate {
  transform: translate(10px, 37px) !important;
}

.filter-translate-business {
  transform: translate(2px, 37px) !important;
}

.dataFilterDropdown {
  box-shadow: 0 0 2px rgb(204, 204, 204);
  border: none;
  height: 36px;
  width: 150px;
  border-radius: 10px;
  padding: 0px 11px;
  outline: none;
  margin-bottom: 18px;
}

.dataTables_filter > label > input {
  display: none;
}

.dataTables_filter > label {
  display: none;
}

/* .snowflake-recommendations-fi-page {
	width: 1130px;
} */
.recommendations-card-text {
  font-weight: 500;
  font-size: 15px;
}

table.dataTable thead th,
table.dataTable tfoot th {
  font-weight: 500 !important;
}

table.dataTable.no-footer {
  border-bottom: 1px solid #eff0f2 !important;
}

/* AWS */

.aws-card-drpdwn {
  max-height: 300px;
  overflow-y: scroll;
}

.aws_resources_chart_filter {
  min-height: 630px;
}

.dropdown-item-aws-res {
  display: block;
  width: 100%;
  padding: 0.35rem 1.5rem;
  clear: both;
  font-weight: 400;
  color: #545965;
  text-align: inherit;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  cursor: pointer;
}

.dropdown-item-aws-res:hover {
  background-color: #e7e7e7;
  color: #292929;
}

.validation-message {
  color: red;
  margin-top: 5px;
  font-size: 0.9em;
  display: none;
}

.custom-report-dropdown {
  border-radius: 12px;
  border: 1px solid #dbdbdb;
  appearance: auto;
  cursor: pointer;
  position: relative;
}

.business-dropdown {
  cursor: pointer;
  /* padding: 6px 13px; */
  padding: 12px 16px 12px 24px;
}

/* Aws Recommendations page */
.json-body {
  position: relative;
  max-height: 100px;
  overflow: auto;
  background-color: #f8f9fa;
  color: black;
  padding: 10px;
}

.json-expand-btn {
  position: sticky;
  top: 0;
  float: right;
}

.ec2_recommendations_data {
  padding: 15px;
  margin-top: 10px;
  border-radius: 10px;
}

.idhover {
  color: #1861e5;
}

.idhover:hover {
  text-decoration: underline;
}
.optimizer-card {
  min-height: 290px;
  margin-bottom: 0px;
  border: 1px solid #e0e0e0;
  box-shadow: 0px 15px 24px 0px rgba(20, 37, 63, 0.06);
}
.optimizer-card .card-body {
  padding: 14px 12px 0;
}
.optimizer-card h5 {
  margin-top: 10px;
  font-size: 18px;
  color: #171717;
  font-weight: 600;
}
.optimizer-card-num-format-1 {
  font-size: 32px;
  color: #3d3d3d;
  font-weight: 700;
}
.optimizer-card-secondary {
  box-shadow: none;
  border-color: #e6e6e6;
  margin-bottom: 10px;
}
.optimizer-card-secondary .card-body {
  padding: 14px 0px 14px 14px;
}
.optimizer-card-secondary h6 {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 10px;
  color: #4d4d4d;
}
.optimizer-card-secondary h6 + div {
  gap: 20px;
  display: flex;
}
.optimizer-card-secondary .d-inline-block div {
  font-size: 17px;
  color: #171717;
  font-weight: 600;
}
.optimizer-card-secondary span {
  font-size: 13px;
  color: #4d4d4d;
  font-weight: 400;
}
.optimizer-savings-card h6 {
  color: #666666;
  font-size: 16px;
}
/* Snowflake Reports */
.report-page-border {
  margin: 10px 0;
  padding: 10px 0;
  border: 1px solid #c4c4c4;
}

.report-page {
  margin: 0 0 50px;
}

.coverpage {
  background-color: #ebf0fa;
}

.coverpage-wex-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px 0 100px 0;
}

.coverpage-wex-logo-report {
  display: flex;
  align-items: center;
  padding: 30px 0 50px 10px;
}

.coverpage-title {
  font-family: "Manrope Medium", "Manrope Medium_EmbeddedFont",
    "Manrope Medium_MSFontService", sans-serif;
  font-size: 52px;
  padding: 10px 0;
  color: #234c8c;
}

.coverpage-text-container {
  padding: 0 80px;
}

.coverpage-text-container-report {
  padding: 10px 10px;
}

.coverpage-business {
  color: #000000;
  font-weight: bold;
  font-size: 30px;
  font-family: Bahnschrift, Bahnschrift_EmbeddedFont, Bahnschrift_MSFontService,
    sans-serif;
}

.coverpage-period {
  color: #000000;
  font-size: 30px;
  font-family: Calibri, Calibri_EmbeddedFont, Calibri_MSFontService, sans-serif;
}

.coverpage-finops {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100px 0;
}

.coverpage-finopslogo {
  width: 700px;
}

.coverpage-titlebottomborder {
  border-bottom: 3px solid #000000;
  width: 493px;
  margin-bottom: 20px;
}

.coverpage-footer {
  display: flex;
  align-items: center;
  padding: 8px 5px;
  background-color: #f2f2f2;
  margin-top: 70px;
}

.header-container {
  border-bottom: 2px solid gray;
  padding: 5px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-container > img {
  height: 54px;
  width: 108px;
  object-fit: contain;
}

.header-container > div {
  color: rgb(14, 106, 191);
  font-size: 22px;
  font-family: "Aptos Display", "Aptos Display_EmbeddedFont",
    "Aptos Display_MSFontService", sans-serif;
  padding-right: 10px;
}

.summary {
  font-family: Bahnschrift, Bahnschrift_EmbeddedFont, Bahnschrift_MSFontService,
    sans-serif;
  color: rgb(89, 89, 89);
  font-size: 26px;
  padding: 15px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.report-color {
  background-color: #f2f2f2;
  display: flex;
  justify-content: space-between;
  padding: 10px 10px;
}

.summary-left {
  width: 600px;
}

.summary-right {
  width: 600px;
  display: flex;
  justify-content: center;
}

.service-totals {
  font-family: "Bookman Old Style", "Bookman Old Style_EmbeddedFont",
    "Bookman Old Style_MSFontService", "Bookman Old Style_MSFontService",
    Calibri, sans-serif;
}

.total {
  color: rgb(128, 128, 128);
  font-weight: bold;
  font-size: 22px;
  font-family: Calibri, Calibri_EmbeddedFont, Calibri_MSFontService, sans-serif;
}

.cost {
  color: rgb(0, 0, 0);
  font-weight: bold;
  font-size: 44px;
  padding: 35px 0;
  font-family: "Bookman Old Style", "Bookman Old Style_EmbeddedFont",
    "Bookman Old Style_MSFontService", "Bookman Old Style_MSFontService",
    Calibri, sans-serif;
}

.dollar {
  color: rgb(0, 0, 0);
  font-weight: bold;
  font-size: 44px;
  font-family: Calibri, Calibri_EmbeddedFont, Calibri_MSFontService, sans-serif;
}

.business-container {
  padding: 20px 0 10px 0;
}

.business,
.period {
  color: rgb(38, 38, 38);
  font-size: 22px;
  font-family: Calibri, Calibri_EmbeddedFont, Calibri_MSFontService, sans-serif;
  font-weight: normal;
  padding-bottom: 20px;
}

.businessname,
.perioddate {
  color: rgb(38, 38, 38);
  font-size: 22px;
  font-family: Calibri, Calibri_EmbeddedFont, Calibri_MSFontService, sans-serif;
  font-weight: bold;
}

.services > tbody > tr > td:nth-child(1) {
  color: rgb(38, 38, 38);
  font-weight: normal;
  font-size: 22px;
  font-family: Calibri, Calibri_EmbeddedFont, Calibri_MSFontService, sans-serif;
}

.services > tbody > tr > td:nth-child(2) {
  color: rgb(38, 38, 38);
  font-weight: bold;
  font-size: 22px;
  padding: 5px 0 5px 40px;
  font-family: Calibri, Calibri_EmbeddedFont, Calibri_MSFontService, sans-serif;
}

.left-table {
  /* width: 550px; */
  margin-right: 30px;
  font-family: Calibri, Calibri_EmbeddedFont, Calibri_MSFontService, sans-serif;
  font-weight: normal;
  font-size: 22px;
}

.right-table {
  /* width: 550px; */
  font-family: Calibri, Calibri_EmbeddedFont, Calibri_MSFontService, sans-serif;
  font-weight: normal;
  font-size: 22px;
}

.right-table > table > thead {
  background: #f2f2f2;
}

.left-table > table > thead {
  background: #f2f2f2;
}

.left-table > table {
  border-color: #d9d9d9;
}

.right-table > table {
  border-color: #d9d9d9;
}

/* .left-table tbody td {
	padding: 0 8px 0 8px;
}
.right-table tbody td {
	padding: 0 8px 0 8px;
} */

.left-table thead tr th {
  font-weight: bold;
}

.right-table thead tr th {
  font-weight: bold;
}

.left-table tbody .table-date {
  padding: 0 15px 0 7px;
}

.left-table tbody .table-cost {
  padding: 0 7px 0 15px;
}

.right-table tbody .table-date {
  padding: 0 15px 0 7px;
}

.right-table tbody .table-cost {
  padding: 0 7px 0 15px;
}

/* .table-date {
	padding: 0 8px 0 8px;
}

.table-cost {
	padding: 0 8px 0 8px;
} */

.footer-text {
  margin-right: 10px;
  color: rgb(38, 38, 38);
  font-size: 22px;
  font-family: Calibri, Calibri_EmbeddedFont, Calibri_MSFontService, sans-serif;
  font-weight: normal;
}

.footer-text-finopsly {
  margin-left: 10px;
  color: rgb(38, 38, 38);
  font-size: 26px;
  font-family: Calibri, Calibri_EmbeddedFont, Calibri_MSFontService, sans-serif;
  font-weight: bold;
}

.footer-text-finopsly > span {
  color: rgb(58, 91, 115);
}

.footer-finops-logo {
  max-height: 30px;
}

.reports-footer-total {
  display: flex;
  align-items: center;
  padding: 8px 5px;
  background-color: #f2f2f2;
}

.reports-footer {
  display: flex;
  align-items: center;
  padding: 8px 5px;
  margin-top: 95px;
  background-color: #f2f2f2;
}

/* Arun CSS */
#sidebar-menu ul li.mm-active > a:after {
  content: "";
  position: absolute;
  right: -1px;
  top: 15px;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #ffffff;
}

.navbar-brand-box {
  width: auto;
  padding: 0 1rem;
}

.navbar-brand-box .logo-lg span img {
  margin-left: 5px;
}

.navbar-brand-box .logo-lg span {
  color: #999;
}

.ask-fi-btn {
  position: relative;
  top: -8px;
  right: 50px;
  border-radius: 3px;
  background-color: #eee;
  border-color: #eee;
  display: none;
}

.AskFIModal .modal-xl {
  max-width: 95%;
}

.AskFIModal .modal-content {
  background-color: #f1f3f7;
}

.AskFIModal .modal-header {
  background-color: #fff;
}

.AskFIModal .ask-fi-res-ans:after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 1.2em;
  background-color: black;
  animation: fi-blinkCursor 1s infinite;
  vertical-align: top;
  margin-top: 3px;
}

.AskFIModal .hide-cursor:after {
  display: none !important;
}

.AskFIModal .fi-res-ans-label img {
  max-width: 50px !important;
}

.AskFIModal .ask-fi-content {
  overflow-y: auto;
  overflow-x: hidden;
}

.AskFIModal .ask-fi-res-ans {
  white-space: pre-line;
}

.QueriesModal .modal-dialog {
  max-width: 99%;
}

.savings-plan .modal-content {
  outline: none;
  position: absolute !important;
  bottom: -50px;
  left: 0px;
  margin: 0px 15px;
  overflow-y: auto;
  border-radius: 20px 20px 0px 0px;
}

.savings-plan .modal-body {
  padding: 0px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.savings-plan .modal-dialog {
  border-radius: 20px;
  max-width: 99.3%;
  margin: 0;
}

.savings-plan .r-main {
  overflow-y: auto;
  overflow-x: hidden;
}

.savings-plan .modal-header {
  padding: 20px !important;
}

.QueriesModal .modal-content {
  background-color: #f1f3f7;
}

.QueriesModal .modal-header {
  background-color: #fff;
}

.QueriesModal .queries-fi-res-answer:after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 1.2em;
  background-color: black;
  animation: fi-blinkCursor 1s infinite;
  vertical-align: top;
  margin-top: 3px;
}

.QueriesModal .hide-cursor:after {
  display: none !important;
}

.QueriesModal .fi-res-ans-label img {
  max-width: 50px !important;
}

.QueriesModal .queries-fi-content {
  overflow-y: auto;
  overflow-x: hidden;
}

.QueriesModal .code {
  white-space: pre-line !important;
  font-size: 13px;
}

.QueriesModal .queries-fi-res-answer {
  white-space: pre-line;
}

.query-meta-data h6 {
  color: #404040;
  font-weight: bold;
  margin-bottom: 5px;
  font-size: 15px;
}

.query-meta-data span {
  font-size: 14px;
}

.query-meta-data .col-sm-4 {
  border-bottom: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
  padding-top: 13px;
  padding-bottom: 13px;
}

.card-query .card-body {
  max-height: 200px;
  overflow: auto;
}

.query-modal-title {
  margin: 0px 10px 15px 10px;
}

.page-FI-Dev .fi-res-ans-end-openai-response {
  white-space: pre-line;
}

.page-FI-Dev .fi-res-ans-end-openai-response:after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 1.2em;
  background-color: black;
  animation: fi-blinkCursor 1s infinite;
  vertical-align: top;
  margin-top: 3px;
}

.page-FI-Dev .fi-res-ans-end-openai-response.hide-cursor:after {
  display: none !important;
}

.chart-loader {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

/* Resources */
.page-filter-select-tags {
  float: left;
  display: inline-block;
  position: relative;
  cursor: pointer;
  border: 1px solid #e2e5e8;
  padding: 0.4rem 0.75rem;
  width: 200px;
}

.page-filter-select-tags i {
  position: absolute;
  right: 5px;
  color: #545965;
  top: 13px;
  font-size: 10px;
}

.resourcesTagsModal {
  overflow: hidden !important;
}

.available-tags-list,
.selected-tags-list {
  overflow-y: auto;
  overflow-x: hidden;
}

.resourcesTagsModal .btn-outline-dark {
  padding: 5px 15px 5px 15px;
  margin: 5px 10px 5px 0px;
  border-color: #9b9b9b;
  font-size: 14px;
}

.resourcesTagsModal .btn-outline-dark:focus {
  box-shadow: none !important;
}

.resourcesTagsModal .tags-list {
  padding: 5px 15px 5px 15px;
  background-color: #d0eae7;
  display: inline-block;
  border-radius: 20px;
  margin: 5px 10px 5px 0px;
  color: #0a0a0a;
  font-size: 0.76563rem;
}

.resourcesTagsModal .tags-list a {
  padding-left: 5px;
}

.resourcesTagsModal .cancel-search-tags {
  position: absolute;
  right: 15px;
  top: 7px;
  font-size: 18px;
}

.resourcesTagsModal input[name="search-tags"] {
  border: 1px solid #c0c0c0;
}

.available-tags-list::-webkit-scrollbar,
.selected-tags-list::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.available-tags-list::-webkit-scrollbar-track-piece,
.selected-tags-list::-webkit-scrollbar-track-piece {
  background: #f1f1f1;
}

.available-tags-list::-webkit-scrollbar-thumb,
.selected-tags-list::-webkit-scrollbar-thumb {
  background: #cbcbcb;
}

/* Left Navigation */
body[data-sidebar="dark"] .navbar-brand-box {
  background: none;
}

body[data-sidebar="dark"] .vertical-menu {
  background: #013c68;
  background: radial-gradient(
    70.71% 70.71% at 50% 50%,
    #003e6d 1%,
    #00192d 64%
  );
}

body[data-sidebar-size="sm"] .vertical-menu #sidebar-menu > ul > li > a {
  font-size: 17px;
}

#sidebar-menu {
  border-top: 1px solid #2a4862;
  padding-top: 10px;
}

#sidebar-menu .metismenu .menu-item {
  font-size: 15px;
  margin-left: 15px;
  font-style: normal;
  font-weight: 400;
}

body[data-sidebar="dark"] #sidebar-menu ul li a {
  color: rgba(255, 255, 255, 0.7);
}

#sidebar-menu .main-nav-icon {
  z-index: 9;
  position: relative;
}

#sidebar-menu ul li a.main-nav {
  height: 50px;
}

.navbar-brand-box .logo-lg span {
  content: "";
  display: inline-block;
  width: 1px;
  height: 20px;
  margin: 5px 10px 5px 5px;
  position: relative;
  top: 10px;
  background-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 0),
    rgb(255 255 255),
    rgba(0, 0, 0, 0)
  );
}

#sidebar-menu .metismenu .line::after {
  content: "";
  display: block;
  height: 1px;
  margin: 10px;
  background-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0),
    rgb(51 91 120),
    rgba(0, 0, 0, 0)
  );
}

#sidebar-menu .metismenu .secondary-nav .line::after {
  margin: 15px;
}

#sidebar-menu .metismenu .cost-explorer a:first-child::after {
  content: "";
  background: #013054;
  width: 40px;
  height: 140px;
  display: block;
  position: absolute;
  left: 17px;
  border: 0;
  border-radius: 15px;
  top: 5px;
}
#sidebar-menu .metismenu .operations::after {
  margin: 15px;
}

body[data-sidebar="dark"] #sidebar-menu .sub-menu li {
  border-bottom: 0px;
  padding: 5px 5px !important;
}

#sidebar-menu ul li.mm-active > a:after,
#sidebar-menu ul li.mm-active > a::before {
  display: none;
}

body[data-sidebar="dark"][data-sidebar-size="sm"]
  .vertical-menu
  #sidebar-menu
  > ul
  > li:hover
  > a {
  background: none;
  color: #fff;
}

.main-nav-icon {
  max-height: 30px;
  margin-right: 0px;
}

.secondary-nav-header-icon {
  max-height: 30px;
  margin: 0px;
  margin-right: 10px;
}

.secondary-nav {
  background: #f2f2f7;
}

.secondary-nav > div > ul > li > a {
  border: 0px !important;
  padding: 6px 20px !important;
}

.secondary-nav-active {
  background-image: linear-gradient(
    to right,
    rgb(213 223 246),
    rgba(0, 0, 0, 0)
  );
}

.secondary-nav-close {
  width: 25px;
  height: 25px;
  font-size: 14px;
  right: -12px;
  top: 50%;
  z-index: 9999;
}

.secondary-nav-close i {
  font-size: 10px;
}

.secondary-nav .line {
  padding: 20px 10px 5px 10px;
}

.secondary-nav ul {
  margin: 0px;
}

/* New Modules */
.secondary-nav,
.secondary-nav ul {
  background-color: #fff !important;
}
#sidebar-menu .metismenu .menu-item {
  color: #474747;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.secondary-nav ul li a:not(.secondary-nav-active) {
  color: #474747 !important;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
}
.secondary-nav-active {
  color: var(--Blue-shades-B6, #0b44e0) !important;
  font-size: 16px;
  font-style: normal;
  font-weight: 500 !important;
  border-radius: 7px;
  background: var(--Blue-shades-B1, #ebf0fe);
}
.secondary-nav,
.secondary-nav ul {
  padding: 5px 10px;
  width: auto;
}
.secondary-nav {
  width: 190px;
}
.vertical-menu {
  border-right: 1px solid #e6e6e6 !important;
  background: #fff !important;
}
body[data-sidebar="dark"] #sidebar-menu ul li a {
  color: #474747 !important;
  text-align: center;
}
.secondary-nav-open .main-content {
  margin-left: 210px !important;
}
.secondary-nav-open .isvertical-topbar {
  left: 250px !important;
  border-radius: 0px;
}
.secondary-nav-open .isvertical-topbar.sticky {
	border-top: 10px solid #f1f3f7;
	border-bottom: 10px solid #f1f3f7;
}
#sidebar-menu .metismenu .cost-explorer a:first-child::after {
  background: none;
}
#sidebar-menu .metismenu .line::after {
  background-image: none;
  border-bottom: 1px solid #e6e6e6;
  width: 75%;
  margin: 10px auto;
}
#sidebar-menu {
  border-top: 1px solid #e6e6e6;
}
body[data-sidebar-size="sm"] .navbar-brand-box {
  width: 70px !important;
}
body[data-sidebar-size="sm"]
  .vertical-menu
  #sidebar-menu
  > ul
  > li:hover
  > a
  span {
  display: none;
}
body[data-sidebar-size="sm"] .vertical-menu #sidebar-menu > ul > li {
  justify-items: center;
}
body[data-sidebar-size="sm"] #sidebar-menu ul li.mm-active > a {
  border-radius: 8px;
  background: var(--Blue-shades-B1, #ebf0fe);
  display: flex;
  width: 48px;
  height: 48px;
  justify-content: center;
  align-items: center;
}

/* Skeleton Loader */
.skeleton {
  animation: skeleton-loading 1s linear infinite alternate;
  border-radius: 0.25rem;
  margin-bottom: 0.5rem;
}

@keyframes skeleton-loading {
  0% {
    background-color: hsl(200, 20%, 80%);
  }

  100% {
    background-color: hsl(200, 20%, 95%);
  }
}

.skeleton-loading .chart-block {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.skeleton-table {
  width: 9em;
  height: 1.5rem;
}

.skeleton-text {
  width: 100%;
  height: 0.9rem;
}

.skeleton-text:last-child {
  margin-bottom: 0;
}

.skeleton-total {
  width: 5em;
  height: 1.5rem;
}

.skeleton-cost {
  width: 5em;
  height: 0.9rem;
}

.skeleton-chart {
  width: 4em;
  height: 20em;
  display: inline-block;
  margin-right: 2em;
}

.skeleton-legend {
  width: 110px;
  height: 0.9rem;
  margin: 5px;
  display: inline-block;
}

.skeleton-service {
  width: 8em;
  height: 0.8rem;
}

.skeleton-recomndation {
  width: 9em;
  height: 1.7rem;
}

.skeleton-recomndation-header {
  width: 9em;
  height: 1rem;
}

.top-accounts-filter .dropdown-list{
  min-width: 18rem;
  height: 400px;
  overflow: auto;
  margin-bottom: 60px;
}

.top-services-filter .dropdown-list,
.cause-type-filter .dropdown-list {
  min-width: 200px;
  height: 232px;
  overflow-y: scroll;
  margin-bottom: 60px;
}
.top-accounts-filter .dropdown-menu input[type="checkbox"],
.top-services-filter .dropdown-menu input[type="checkbox"] {
  width: 15px;
  height: 15px;
}

/* Snowflake warehouse-chart */
/* Base style for sort arrows */
.heatmap_sort_arrow:before,
.heatmap_sort_arrow:after {
  display: block;
  /* Make arrows appear on separate lines */
  opacity: 0.3;
  /* Making the arrow slightly transparent for inactive state */
  font-size: 10px;
  /* Adjust the size as needed */
  margin: 0 0 -5px 0;
  /* Adjust as needed for alignment */
}

/* Align arrows to the right of the text */
.heatmap_sort_arrow {
  float: right;
}

/* Inactive state arrows */
.heatmap_sort_arrow:before {
  content: "\25B2";
}

.heatmap_sort_arrow:after {
  content: "\25BC";
}

/* Style for the 'active' state arrow when sorting ascending */
.heatmap_sort_arrowASC:before {
  content: "\25B2";
  color: black;
  opacity: 1;
  /* Full opacity for active state */
}

.heatmap_sort_arrowASC:after {
  content: "\25BC";
  color: rgb(179, 179, 179);
}

/* Style for the 'active' state arrow when sorting descending */
.heatmap_sort_arrowDESC:before {
  content: "\25B2";
  color: rgb(179, 179, 179);
}

.heatmap_sort_arrowDESC:after {
  content: "\25BC";
  color: black;
  opacity: 1;
  /* Full opacity for active state */
}

/* Pointer style for table headers */
.warehouse-heat-map th,
.warehouse-heat-map td,
#warehouse-info-hourly_hm_chart th,
#warehouse-info-hourly_hm_chart td {
  cursor: pointer;
  white-space: nowrap;
  /* Prevent text from wrapping */
}

/* Style to align text and arrows */
th.sortMonths span {
  display: inline-block;
  vertical-align: middle;
}

.warehouse-info-modal .modal-dialog {
  max-width: calc(100vw - 100px);
}

.warehouse-info-modal .ModalTitle {
  font-size: 22px;
  font-weight: 600;
}

.months-Name {
  position: sticky;
  top: 0;
  background-color: white;
  /* Optional: to ensure text doesn't overlap when scrolling */
  z-index: 1;
  /* Optional: to ensure the row stays above other content */
}

/* .Top-Hrl-Name {
	position: sticky;
	top: -1px;
	background-color: white;
	z-index: 1;
} */

.grand-total-row {
  position: sticky;
  top: 35px;
  background-color: white;
  /* Optional: to ensure text doesn't overlap when scrolling */
  z-index: 1;
  /* Optional: to ensure the row stays above other content */
}

.scroll-container {
  height: 70vh;
  /* Adjust as needed */
  overflow-y: auto;
}

.scroll-container-popup {
  height: 55vh;
  overflow-y: auto;
}

.warehouse-info-modal .modal-header {
  position: sticky;
  top: 0;
  background: white;
  border-radius: 15px;
  z-index: 999;
}

.warehouse-info-modal .modal-body {
  overflow-y: scroll;
  height: 87vh;
}

.warehouse-info-modal h4 {
  color: black;
}

.warehouse-info-modal hr {
  margin: 25px 0;
}

#warehouse-info-hourly_hm_chart .table td,
#warehouse-info-hourly_hm_chart .table th {
  padding: 4px 8px !important;
}

#Top-costly-queries_wrapper .table td,
#Top-costly-queries_wrapper .table th {
  padding: 4px 8px !important;
}

/* Snowflake-Budget Page */

.Budget-info-modal .modal-dialog {
  max-width: calc(80vw - 100px);
  height: 900px;
}

.Budget-info-modal-Alert .modal-dialog {
  max-width: 700px;
}

.page-snowflake-budgets .card-height {
  min-height: 480px;
}

/* Rates Page */

.datePicker input[type="date"]::-webkit-calendar-picker-indicator {
  display: none;
}

.datePicker .custom-icon {
  position: absolute;
  right: 25px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

/* Alerts Page */

.Alerts-info-modal-CA .modal-dialog {
  max-width: 80%;
}

.Alerts-info-modal-CA .modal-body {
  height: 85vh;
}

.google-visualization-tooltip {
  display: none !important;
}

.recommendations-block .badge-soft-primary {
  padding: 6px 10px;
  font-size: 15px;
  border-radius: 3px;
  margin-top: 5px;
}

.recommendations-block .recommendation-block-title {
  color: #000000;
  font-size: 16px;
  margin-bottom: 5px;
  height: 25px;
}

.recommendation-metrics {
  background-color: #ffffff;
  padding: 10px;
}

.cus-openai {
  margin-left: 2px;
  margin-right: 40px;
  padding: 5px 10px 3px 5px;
  border-radius: 3px;
  font-size: 19px;
}

.cus-azure-openai {
  margin-left: 2px;
  margin-right: 40px;
  padding: 5px 10px 3px 5px;
  border-radius: 3px;
  font-size: 19px;
}

.cus-openai label,
.cus-azure-openai label {
  margin-bottom: 0;
}

.global-config {
  font-size: 18px;
  color: #141b2b;
  cursor: pointer;
  /* border-right: 1px solid #d9d9d9; */
  padding: 17px 70px 10px 20px;
}

.config-content {
  padding: 17px 70px 10px 20px;
}

.global-config > li {
  /* padding: 6px 0; */
  padding: 8px 100px 8px 12px;
}

.config-integrations,
.config-authentications {
  padding-left: 5px;
}

.config-hover {
  background: #cde4fc;
  border-radius: 6px;
}

.global-config-icon {
  max-height: 24px;
  margin-right: 8px;
}

.jira-teams-dropdown {
  min-height: 35px;
}

.loading-shimmer,
.accounts-shimmer {
  width: 100%;
  height: 36px;
  /* Adjust height as needed */
  background-color: lightgray;
  /* Background color */
  overflow: hidden;
  position: relative;
}

.loading-shimmer::after,
.accounts-shimmer::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: -50%;
  width: 200%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0.1) 100%
  );
  animation: shimmer 2s infinite linear;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

.error-msg {
  color: red;
  font-size: 14px;
  margin: 2px 0 0 10px;
  text-align: start;
}

.schedule-error-msg {
  color: red;
  font-size: 14px;
  margin: 2px 0 0 10px;
  text-align: start;
}

.schedule-days-spacing {
  margin-left: 143px;
  margin-top: 10px;
}
.schedule-time-spacing {
  margin-top: 10px;
}

/* Recommendation page  */
.page-aws-recommendation .modal-body {
  padding: 0 !important;
}

.page-aws-recommendation .QueriesModal .fi-res-ans-label img {
  border-radius: 50px !important;
}

.page-aws-recommendation .QueriesModal .modal-content {
  background-color: #f5f6f8;
  border-radius: 30px !important;
}

.page-aws-recommendation .QueriesModal {
  top: 45px;
  overflow: hidden;
}

.page-aws-recommendation .modal-dialog {
  animation-duration: 0.5s;
  /* margin: 0px 5px !important; */
}

.page-aws-recommendation .modal_header {
  border-radius: 30px 30px 0 0;
  position: sticky;
  top: 0;
  z-index: 1099;
}

/* radar finding */
.page-cost-radar .modal-body {
  padding: 0 !important;
}

.page-cost-radar .QueriesModal .fi-res-ans-label img {
  border-radius: 50px !important;
}

.page-cost-radar .QueriesModal .modal-content {
  background-color: #f5f6f8;
  border-radius: 30px !important;
}

.page-cost-radar .QueriesModal {
  top: 80px;
}

.page-cost-radar .modal_header {
  border-radius: 30px 30px 0 0;
  position: sticky;
  top: 0;
  z-index: 1099;
}

.page-savings-plan .modal_header {
  border-radius: 30px 30px 0 0;
  position: sticky;
  top: 0;
  z-index: 999;
}

.offcanvas {
  min-height: 70vh;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
}

.offcanvas-body {
  background: #f1f3f7;
}

.report-left-content {
  padding: 20px;
  margin: 0px 0px 24px 10px;
}

.report-right-content {
  padding: 20px;
  margin: 0px 10px 24px 0px;
}

.standard-reports.dropdown-menu {
  min-width: 11rem !important;
  position: absolute;
  inset: 0px 0px auto auto;
  margin: -23px !important;
  transform: translate3d(-21px, 22px, 0px) !important;
}

.resource-allocation.dropdown-menu {
  min-width: 11rem !important;
  position: absolute;
  inset: 0px 0px auto auto;
  margin: 23px !important;
  transform: translate3d(25px, -23px, 0px) !important;
}

/* bootbox open animation */
@keyframes slideInUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }

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

@keyframes slideOutDown {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(100%);
    opacity: 0;
  }
}

.bootbox.modal.fade .modal-dialog {
  animation-duration: 0.5s;
}

.bootbox.modal.fade.show .modal-dialog {
  animation-name: slideInUp;
}

.bootbox.modal.fade:not(.show) .modal-dialog {
  animation-name: slideOutDown;
}

.finops-top-card .finops-top-card-title {
  color: #666;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 21px;
  margin-bottom: 5px;
}

.finops-top-card .secondary-info {
  color: #999;
  font-size: 10px;
  font-style: italic;
  font-weight: 400;
  line-height: 15px;
  vertical-align: middle;
}

.report-options-modal .modal-body {
  background: #f1f3f7;
}

.report-cancel-button {
  border-radius: 4px;
  border: 1px solid #dbdbdb;
  padding: 12px 16px;
}

.report-generate-button {
  border-radius: 8px;
  background: #2760ea;
  padding: 12px 16px;
  color: #fff !important;
}

.report-options-modal .modal-dialog {
  width: 85%;
  max-width: 100%;
}

.report-options-modal .modal-content {
  /* height: 50vh;  */
}

/* .report-options-modal .modal-dialog {
    max-width: 85%;
}

.report-options-modal .modal-content {
	border-radius: 32px;
	height: 52%;  
}

.report-options-modal .modal-dialog {
    max-height: 52%; 
    height: 52%;  
}
 */

/* Bootstrap Clock Picker */

/* Bootstrap Clock Picker */

.email-recipients {
  border: none;
  outline: none;
  padding: 22px 23px 22px 15px;
  border-radius: 16px;
  background: #ebebeb;
  min-height: 100px;
}

.email-helper-text {
  padding: 10px 0px 0px 10px;
  color: #7d7d7d;
}

.rpt-tag {
  display: inline-block;
  padding: 5px 10px;
  margin: 5px;
  background: #fff;
  color: #333;
  border-radius: 8px;
}

.rpt-tag .remove {
  margin-left: 8px;
  cursor: pointer;
  color: #333;
  font-weight: bold;
}

.rpt-tag-input {
  border: none;
  outline: none;
  width: auto;
  background: #ebebeb;
}

.offcanvas-title {
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
}

.card-title > label {
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
}

.send-report {
  margin-top: 30px !important;
  margin-bottom: 10px;
}

/* .daily-report-btns {
	border: none;
	margin-right: 12px;
	border-radius: 12px;
	background: #2760EA;
	padding: 8px 16px;
	color: #fff;
} */
.day-btn {
  background-color: #f0f0f0;
  border: none;
  padding: 8px 16px;
  margin: 5px;
  border-radius: 12px;
}

.day-btn.selected {
  border: none;
  /* margin-right: 12px; */
  border-radius: 12px;
  background: #2760ea;
  padding: 8px 16px;
  color: #fff;
}

.report-schedule-modal .modal-dialog {
  min-width: 85%;
}

.report-schedule-modal .modal-body {
  background: #ebebeb;
}

.schedule-report-button {
  border-radius: 8px;
  background: #2760ea;
  padding: 12px 16px;
  color: #fff !important;
}

.cardbody {
  padding: 1.25rem 0px;
}

.report-schedule-table {
  width: 100%;
  table-layout: fixed;
}

.report-schedule-table th,
.report-schedule-table td {
  padding: 12px 30px;
  white-space: normal;
}

.reports_firstTd {
  color: #2760ea;
}

.reports-action-svg {
  width: 30px;
  height: 30px;
  border: 1px solid #dbdbdb;
  border-radius: 8px;
  padding: 3px;
}

.reports_tr > td {
  padding: 18px 30px;
  margin-top: 50%;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 21px;
}

.report-type-letter-capitalize::first-letter {
  text-transform: capitalize;
}

.report-schedule-table > thead > tr,
.reports-shedule-button > tbody > tr {
  background-color: #f5f7fc;
  padding: 12px 30px;
}

.provider-dropdown,
.allocated-dropdown,
.monthly-dropdown,
.warehouses-dropdown,
.rpt-recom-status-dropdown,
.rpt-ticket-status-dropdown {
  /* border: 1px solid rgb(172, 172, 172); */
  border: 1px solid #dbdbdb;
  border-radius: 8px;
  /* padding: 10px 20px; */
  padding: 10px 16px 10px 24px;
  width: 175px;
}

.common-dropdown {
  border: 1px solid #dbdbdb;
  border-radius: 8px;
  padding: 12px 16px 12px 24px;
  /* width: auto; */
}

#anomaly-status-dropdown,
#anomaly-ticket-status-dropdown {
  border: 1px solid #dbdbdb;
  border-radius: 8px;
  padding: 8px 16px 8px 24px;
}

/* Snowflake Queries */
.query-search {
  width: 25%;
  padding: 10px 20px;
  background: #ebebeb;
  border-radius: 9px;
}

.query-search input {
  background: #ebebeb;
  border: 0;
  outline: none;
  width: 75% !important;
}

/* Snowflake Overview*/
.page-snowflake-overview .dollar {
  color: #1a1a1a;
  font-family: "Work Sans";
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  /* 150% */
  margin-right: 5px;
}

.page-snowflake-overview .ce-top-kpi-cards .breakdown-block {
  height: 95px;
  align-items: center;
  display: flex;
}

.page-snowflake-overview .card-title {
  color: #4d4d4d;
  font-family: "Work Sans";
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 21px;
  /* 105% */
}

.page-snowflake-overview .snowflake-chart h2 {
  color: #1a1a1a;
  font-family: "Work Sans";
  font-size: 32px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  /* 75% */
}

.page-snowflake-overview .snowflake-chart h2 .months-txt {
  color: #999;
  font-family: "Work Sans";
  font-size: 12px;
  font-style: italic;
  font-weight: 400;
  line-height: 24px;
  /* 200% */
}

.page-snowflake-overview .chart-stats p {
  color: #666;
  font-family: "Work Sans";
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
  /* 150% */
}

.page-snowflake-overview .chart-stats h5 {
  color: #262626;
  font-family: "Work Sans";
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  /* 120% */
}

.page-snowflake-overview .chart-stats .alert {
  border-radius: 12px;
  border: 1px solid #e6e6e6;
  background: #fff;
  padding: 12px 16px 12px 12px;
}

.page-snowflake-overview .chart-stats .color-box {
  height: 12px;
  width: 12px;
  display: inline-block;
  border-radius: 2px;
  margin-right: 5px;
  top: 2px;
  position: relative;
}

.radar-queries-fi-res-answer {
  overflow-y: scroll;
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

.radar-queries-fi-res-answer::-webkit-scrollbar {
  display: none;
}

.ticket-status-btn {
  border-radius: 10px;
  padding: 8px 10px;
  text-align: center;
  display: inline-block;
}

.ticket-Status-Opened,
.ticket-Status-Reopened {
  background: #dbeaff;
  color: #5397f5;
}

.ticket-Status-Work-in-progress {
  background: rgba(255, 171, 107, 0.15);
  color: #fe994c;
}

.ticket-Status-Pending {
  background: rgba(250, 216, 47, 0.15);
  color: #d6b200;
}

.ticket-Status-Done {
  background: rgba(95, 210, 106, 0.15);
  color: #5fd16a;
}

.ticketStatusNCBtn {
  background: #f3f3f3;
  display: inline-block;
  border-radius: 10px;
  padding: 8px 10px;
  text-align: center;
}

.chart-kpi-cards .alert {
  border: 1px solid #e6e6e6 !important;
  padding: 1rem !important;
}

.chart-kpi-cards .alert p {
  color: #7f838b !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 0.25rem !important;
}

.chart-kpi-cards .alert span {
  height: 12px;
  width: 12px;
  display: inline-block;
  border-radius: 2px;
  margin-right: 0.5rem !important;
}

.chart-kpi-cards h5 {
  margin-bottom: 0px;
}

/* .dropdown css */
.drpdwn-data {
  min-height: 400px;
  margin-bottom: 40px;
}

.drpdwn-applyBtn {
  position: fixed;
  bottom: 0;
  background: white;
  width: 100%;
  border-radius: 69px;
}

.filter-buttons {
  position: fixed;
  bottom: 0;
  background: white;
  width: 100%;
  border-radius: none !important;
  display: flex;
  justify-content: end;
  gap: 6px;
  padding: 12px;
}

.secondary-nav-aws .sub-menus-heading,
.secondary-nav-Admin .sub-menus-heading,
.secondary-nav-setup .sub-menus-heading,
.secondary-nav-snowflake .sub-menus-heading,
.secondary-nav-azure .sub-menus-heading,
.secondary-nav-cost-explorer .sub-menus-heading,
.secondary-nav-finance .sub-menus-heading {
  font-size: 14px;
  color: #8a8a8a;
  padding: 10px 20px;
}

.secondary-nav-aws hr {
  width: 90%;
}

.top-accounts-filter .dropdown-menu {
  min-width: 24rem !important;
}

.top-services-filter .dropdown-menu {
  min-width: 33rem !important;
}

.cause-type-filter .dropdown-menu {
  min-width: 37rem !important;
}

.ticket-status-btn-none {
  background-color: #f5f5f5;
  color: #292929;
  border: none;
  padding: 8px 12px;
  border-radius: 12px;
  font-weight: 500;
}
.ticket-status-btn-open {
  background-color: #dbeaff;
  color: #5397f5;
  border: none;
  padding: 6px 12px;
  border-radius: 12px;
  font-weight: 500;
}

.ticket-status-btn-pending,
.ticket-status-btn-reopened {
  background-color: #ffeadb;
  color: #f09a5b;
  border: none;
  padding: 8px 12px;
  border-radius: 12px;
  font-weight: 500;
}

.ticket-status-btn-inprogress,
.ticket-status-btn-work-in-progress {
  background-color: #ffeadb;
  color: #f09a5b;
  border: none;
  padding: 8px 12px;
  border-radius: 12px;
  font-weight: 500;
}
.ticket-status-btn-done {
  background-color: #deffdb;
  color: #5ab252;
  border: none;
  padding: 8px 12px;
  border-radius: 12px;
  font-weight: 500;
}

.threeDotsDropDwn .dropdown-item {
  display: flex;
  align-items: center;
}

/* calender css */
#calendarModal .modal-dialog {
  max-width: 400px !important;
}

#calendarModal .modal-header {
  border-bottom: 1px solid #c3c3c3 !important;
}

#calendarModal .modal-footer {
  border-top: 1px solid #c3c3c3 !important;
}

#calendarModal .modal-content {
  border-radius: 30px;
  /* width: 80%; */
}
.custom-calendar {
  padding: 20px 10px;
}
.custom-calendar .calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.custom-calendar .calendar-header h5 {
  margin: 0;
}
.custom-calendar .calendar-body {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  text-align: center;
}
.custom-calendar .calendar-body div {
  padding: 10px;
  /* border: 1px solid #ddd; */
  cursor: pointer;
}
.custom-calendar .calendar-body .selected {
  background-color: #007bff;
  color: white;
}
.calendar-modal-title {
  font-size: 1.25rem;
  font-weight: 500;
}
.calendar-day {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
}
.calendar-day.selected {
  background-color: #007bff;
  color: white;
  border-radius: 25%;
}
.date-display {
  display: flex;
  align-items: center;
  font-size: 1.25rem;
}
.date-display input {
  border: none;
  font-size: 1.25rem;
  width: 50%;
}
.date-display input:focus {
  outline: none;
}
#calendarModal .recomedit-icon {
  margin-right: 10px;
  cursor: pointer;
}
/* calender css END*/

/* Open AI CSS */
.fi-res-answer-block table {
  width: 100%;
  border-collapse: collapse;
}

.fi-res-answer-block thead {
  background-color: #eff0f2;
}

.fi-res-answer-block th,
.fi-res-answer-block td {
  border: 1px solid #ddd;
  padding: 8px;
  /* text-align: center; */
}

.fi-res-answer-blocks th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: center;
  background-color: #f2f2f2;
  color: black;
}

.fi-res-answer-block tr:nth-child(even) {
  background-color: #f9f9f9;
}

.fi-res-answer-block tr:hover {
  background-color: #ddd;
}

/* .fi-res-answer-block td {
    text-align: center;
  } */

.fi-res-answer-block caption {
  caption-side: top;
  padding: 10px;
  font-size: 1.5em;
  font-weight: bold;
}

#wfradio {
  height: 20px;
  width: 20px;
  cursor: pointer;
}
/* RBAC */
.user-emails-input .choices__inner {
  height: 150px;
  border-radius: 5px;
  background-color: #ebebeb;
  padding: 12px;
}
.user-emails-input .choices__input {
  background-color: #ebebeb;
}
.user-emails-input .choices__item {
  margin-right: 5px;
  /* background-color:#ffffff;
	border-radius:5px;
	border:transparent;
	color:#333333; */
}
.user-groups-input .choices__inner {
  border-radius: 5px;
  border-color: #c4c4c4;
}

/*-----------------------*/

/* Arun CSS */

/* AWS Budgets */
.budgets-content .nav-tabs .nav-link {
  color: #737373;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 21px; /* 131.25% */
  border: 0px;
  background: none;
}
.budgets-content .nav-tabs .nav-link.active {
  border-bottom: 1px solid #2760ea;
  color: #2760ea;
}
.budgets-content .budgets-search-block {
  margin-bottom: 30px;
}
.budgets-content .budgets-search-block .input-group input {
  padding: 12px 22px 12px 14px;
  border: 0;
  border: 1px solid #d9d9d9;
  border-left: 0px;
}
.budgets-content .budgets-search-block .input-group .input-group-text {
  background: #fff;
  padding: 12px 5px 12px 14px;
  border: 1px solid #d9d9d9;
  border-right: 0px;
}
.budgets-content .budgets-search-block .input-group input::placeholder {
  color: #737373;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 125% */
}
.budgets-content .budgets-search-block .form-check {
  color: var(--black-06, rgba(0, 0, 0, 0.6));
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
  letter-spacing: 0.5px;
}
.budgets-content .budgets-search-block .form-check-input:checked {
  background-color: #2760ea;
  border-color: #2760ea;
}
.budgets-content .budgets-search-block .form-select {
  border-radius: 12px;
  border: 1px solid #dbdbdb;
  display: flex;
  height: 48px;
  padding: 12px 16px 12px 24px;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  box-shadow: none;
}
.budgets-content .my-budgets-table th {
  color: #292929;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 21px; /* 150% */
  padding: 16px 30px;
}
.budgets-content .my-budgets-table td {
  color: #292929;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 21px; /* 150% */
  padding: 24px 30px;
  border: 0px;
  vertical-align: middle;
}
.budgets-content .my-budgets-table td:first-child a {
  color: #2760ea;
  font-weight: 500;
}
.budgets-content .my-budgets-table thead tr {
  box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.12) inset;
}
.budgets-content .my-budgets-table tbody tr {
  box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.12) inset;
}
.budgets-content .my-budgets-table tbody tr:last-child {
  /* box-shadow: none; */
}
.budgets-content .my-budgets-table.no-footer {
  border-bottom: 0px !important;
}
.budgets-content .dataTables_wrapper.no-footer .dataTables_scrollBody {
  border-bottom: 0px !important;
}
.budgets-content .action-btn {
  box-shadow: none;
  border-radius: 16.8px;
  background: #f7f7f7;
  width: 36.002px;
  height: 36px;
}
.budgets-content .progress-container {
  border-radius: 12px;
  position: relative;
  height: 8px;
}
.budgets-content .progress {
  width: 0;
  transition: width 0.4s linear;
  position: relative;
  height: 8px;
  border-radius: 12px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.budgets-content .percentage {
  position: absolute;
  bottom: 15px;
  left: 10px;
  transform: translateX(-50%);
  text-align: center;
  transition: left 0.4s linear;
  color: #292929;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 15px; /* 125% */
  width: 70px;
}
.budgets-content .percentage:after {
  content: "";
  position: absolute;
  bottom: 0px;
  right: 35px;
  height: 25px;
  width: 1px;
  transform: translateY(30%);
  top: 30%;
  z-index: 9;
}
.budgets-content .progress.bg-success {
  background-color: #5bd160 !important;
}
.budgets-content .progress.bg-warning {
  background-color: #ffb219 !important;
}
.budgets-content .progress.bg-danger {
  background-color: #ff4112 !important;
}
.budgets-content .progress-container.bg-success-light {
  background: rgba(76, 175, 80, 0.15);
}
.budgets-content .progress-container.bg-warning-light {
  background: rgba(255, 178, 25, 0.15);
}
.budgets-content .progress-container.bg-danger-light {
  background-color: #ff411212;
}
.budgets-content .text-success {
  color: #4caf50 !important;
}
.budgets-content .text-warning {
  color: #eba10f !important;
}
.budgets-content .text-danger {
  color: #ff4112 !important;
}
.budgets-content .percentage.success:after {
  background: #5bd160;
}
.budgets-content .percentage.warning:after {
  background: #ffb219;
}
.budgets-content .percentage.danger:after {
  background: #ff4112;
}

.budgets-content .accordion-collapse td small {
  color: #666;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 19.2px; /* 137.143% */
  margin-bottom: 5px;
  display: inline-block;
}
.budgets-content .accordion-collapse td h6 {
  color: #292929;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 25.6px; /* 160% */
  margin-bottom: 0;
}
.budgets-content .accordion-collapse td p {
  color: #333;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 19.2px;
  margin-bottom: 0;
}
.budgets-content .my-budgets-table tr[aria-expanded="true"] {
  background: #fafafa;
  box-shadow: none !important;
}
.budgets-content .my-budgets-table .accordion-collapse {
  background: #fafafa;
}
.budgets-content .my-budgets-table .accordion-toggle {
  cursor: pointer;
}
.budgets-content .my-budgets-table .expand-btn {
  box-shadow: none;
}
.budgets-content .my-budgets-table .expand-btn:after {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  content: "\f107";
  font-family: "Font Awesome 5 Pro";
  border-radius: 16.8px;
  background: var(--C7-Lighter, #f0f0f0);
  width: 26.25px;
  text-align: center;
  font-size: 17px;
  display: block;
}
.budgets-content .my-budgets-table tr[aria-expanded="true"] .expand-btn:after {
  content: "\f106";
}

.budgets-content .pagination button {
  width: 40px;
  font-size: 20px;
  color: #0000008a;
}
.budgets-content .pagination select {
  outline: none;
}
.budgets-content .toast {
  box-shadow: 0px 24px 32px 0px rgba(0, 0, 0, 0.04),
    0px 16px 24px 0px rgba(0, 0, 0, 0.04), 0px 4px 8px 0px rgba(0, 0, 0, 0.04),
    0px 0px 1px 0px rgba(0, 0, 0, 0.04);
  background-color: #fff;
  width: 400px;
}

.createBudgetModal {
  overflow: hidden;
}
.createBudgetModal .modal-content {
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
}
.createBudgetModal .modal-dialog {
  max-width: 100%;
  top: 40px;
}
.createBudgetModal .modal-header {
  padding: 20px 24px;
}
.createBudgetModal .modal-title {
  color: #191919;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 21px; /* 105% */
}
.createBudgetModal .modal-body {
  background: #f1f3f7;
  padding: 24px 24px 25px 24px;
  background: #fafafa;
}
.createBudgetModal.bootbox.modal.fade .modal-dialog {
  animation-duration: 0.2s;
}

/* Budget Modal */
.createBudgetModal .nav-pills .nav-link {
  color: #bcbbbb;
  text-align: center;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 142.857% */
  padding-right: 5px;
}
.createBudgetModal .nav-pills .nav-link.active {
  color: #2760ea;
  background: none;
}
.createBudgetModal .nav-pills .nav-link span:first-child {
  background: #bcbbbb;
  width: 10px;
  height: 10px;
  display: inline-block;
  border-radius: 50%;
  margin-right: 5px;
}
.createBudgetModal .nav-pills .nav-link.active span:first-child {
  background: #2760ea;
}
.createBudgetModal .nav-pills .nav-link span:last-child {
  color: #bcbbbb;
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  padding-left: 10px;
}
.createBudgetModal .nav-pills .nav-link.active span:last-child {
  color: #2760ea;
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  padding-left: 10px;
}

/* Budget Details */
.createBudgetModal .form-label {
  color: #4d4d4d;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  margin-bottom: 10px;
}
.createBudgetModal .budget-details .form-label {
  color: #808080;
  font-style: normal;
  font-weight: 500;
  line-height: 21px;
  margin-bottom: 15px;
}
.createBudgetModal .budget-details .form-select,
.createBudgetModal .budget-details .form-control {
  border: 1px solid #dbdbdb;
  box-shadow: none;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
  padding: 12px 16px 12px 24px;
}

.createBudgetModal .create-budget-details {
  overflow-y: auto;
}
.createBudgetModal h4 {
  color: #262626;
  font-size: 28px;
  font-style: normal;
  font-weight: 600;
  line-height: 33.6px; /* 120% */
}
.createBudgetModal h5 {
  color: #4d4d4d;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 21px; /* 105% */
}
.createBudgetModal h6 {
  color: #4d4d4d;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
.createBudgetModal #pills-budget-details p {
  color: #808080;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22.4px; /* 160% */
}
.createBudgetModal .budget-type-block,
.createBudgetModal .account-type-block {
  border-radius: 16px;
  border: 2px solid #e6e6e6;
  background: #fff;
  padding: 24px;
  /* height: 180px; */
  display: block;
}
.createBudgetModal .budget-type-block.active {
  border: 2px solid #7397f0;
}
.createBudgetModal .prespectives-block:hover,
.createBudgetModal .prespectives-block.active {
  border: 2px solid #7397f0;
}
.createBudgetModal .resources-block:hover,
.createBudgetModal .resources-block.active {
  border: 2px solid #3db9ef;
}

.create-budget-footer .btn {
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px; /* 125% */
  min-width: 80px;
}
.create-budget-footer .btn-white {
  border: 1px solid #dbdbdb;
}
.create-budget-footer .btn-primary {
  background: #2760ea;
}

/* Budget Allocation */
.createBudgetModal #pills-budget-allocation p {
  color: #404040;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 25.6px; /* 160% */
}
.createBudgetModal .budget-allocation-table {
  table-layout: fixed;
}
.createBudgetModal .budget-allocation-table thead {
  background: #f5f7fc;
  border: 1px solid #ebebeb;
}
.createBudgetModal .budget-allocation-table tbody {
  border: 1px solid #ebebeb;
}
.createBudgetModal .budget-allocation-table th {
  color: #4d4d4d;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 21px; /* 150% */
  padding: 8px 16px;
  text-align: center;
  background: rgba(242, 244, 255, 0.97);
}
.createBudgetModal .budget-allocation-table td {
  color: #4d4d4d;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 21px; /* 150% */
  background: #fafafa;
  padding: 12px 16px;
  text-align: center;
}
.createBudgetModal .budget-allocation-table tfoot td {
  background: #fff;
  border-width: 0px;
  padding: 12px 5px;
}
.createBudgetModal .budget-allocation-table tfoot td:first-child {
  padding: 12px 16px;
}
.createBudgetModal .accordion-button {
  box-shadow: none;
}
.createBudgetModal .budget-allocation .form-control {
  border-radius: 12px;
  border: 1px solid #d9d9d9;
  background: #fff;
  height: 42px;
}
.createBudgetModal .budget-allocation .input-group-text {
  border: 1px solid #d9d9d9;
  padding: 0px 8px 0px 6px;
}
.createBudgetModal .budget-recommended {
  right: 0;
  top: -7px;
}
.createBudgetModal .btn-link {
  color: #2e6be5;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  box-shadow: none;
}
.createBudgetModal .btn-link:last-child {
  background: linear-gradient(
    180deg,
    rgba(51, 145, 255, 0.1) 0%,
    rgba(98, 59, 255, 0.1) 100%
  );
  border-radius: 9px;
}
.createBudgetModal .apexcharts-xaxis text,
.createBudgetModal .apexcharts-yaxis text {
  fill: #555555;
}

/* Access & Save */
.createBudgetModal .review-save .form-control {
  box-shadow: none;
  background: #ebebeb;
  height: 49px;
  padding: 12px 22px 12px 14px;
}
.createBudgetModal .review-save textarea.form-control {
  height: 103px;
}
.createBudgetModal .review-save .form-check {
  font-size: 16px;
}
.createBudgetModal .review-save small {
  color: #808080;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  display: block;
  margin-bottom: 5px;
}
.createBudgetModal .review-save p {
  color: #4d4d4d;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 22.4px; /* 160% */
}
.createBudgetModal .review-save .budget-edit {
  position: absolute;
  right: 20px;
  top: 20px;
}
.createBudgetModal .review-save .budget-allocation-table tfoot td {
  background: #fafafa;
  border-width: 1px;
  padding: 12px 24px;
}
.createBudgetModal .review-save .budget-allocation-table td {
  padding: 12px 8px;
}
.createBudgetModal .w-80 {
  width: 80% !important;
}

/* Radar */

.page-aws-radar .nav-tabs .nav-link {
  color: #737373;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 21px; /* 131.25% */
  border: 0px;
  background: none;
}
.page-aws-radar .nav-tabs .nav-link.active {
  border-bottom: 1px solid #2760ea;
  color: #2760ea;
}

.page-aws-radar .radar-top-card .card-body {
  padding: 16px;
}
.page-aws-radar .radar-top-card .avatar {
  margin-right: 20px;
}
.page-aws-radar .radar-top-card .avatar-title {
  height: 52px;
  padding: 16px;
  width: 52px;
}
.page-aws-radar .radar-top-card h6 {
  color: #666;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 21px; /* 131.25% */
}
.page-aws-radar .radar-top-card h4 {
  color: #1a1a1a;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px; /* 100% */
  margin-bottom: 0;
}
.page-aws-radar .radar-top-card .cost-details {
  color: #666;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 22.4px;
}
.page-aws-radar .radar-top-card .cost-details span:last-child {
  color: #333;
  font-weight: 600;
}

.page-aws-radar .radar-search-block {
  padding: 24px 24px;
}
.page-aws-radar .radar-search-block .input-group input {
  padding: 12px 22px 12px 14px;
  border: 0px;
  background: #ebebeb;
}
.page-aws-radar .radar-search-block .input-group .input-group-text {
  background: #ebebeb;
  padding: 12px 5px 12px 14px;
  border: 0px;
}
.page-aws-radar .radar-search-block .input-group input::placeholder {
  color: #737373;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 125% */
}
.page-aws-radar .radar-search-block .form-check {
  color: var(--black-06, rgba(0, 0, 0, 0.6));
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
  letter-spacing: 0.5px;
}
.page-aws-radar .radar-search-block .form-check-input:checked {
  background-color: #2760ea;
  border-color: #2760ea;
}
.page-aws-radar .radar-search-block .form-select {
  border-radius: 12px;
  border: 1px solid #dbdbdb;
  display: flex;
  height: 48px;
  padding: 12px 16px 12px 24px;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  box-shadow: none;
}
.page-aws-radar .radar-search-block .dropdown-menu {
  border-radius: 24px;
  border: 2px solid #e6e6e6;
  background: #fff;
  box-shadow: 0px 20px 24px 0px rgba(20, 37, 63, 0.06);
  padding: 20px;
  width: 296px;
}
.page-aws-radar .radar-search-block .dropdown-menu h5 {
  color: var(--Text-onSurface-Subdued, #555);
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px; /* 125% */
}
.page-aws-radar .radar-search-block .dropdown-menu input {
  height: 40px;
  padding: 8px 40px 8px 16px;
  border-radius: 12px;
  background: #ededed;
}
.page-aws-radar .radar-search-block .dropdown-menu .btn {
  border-radius: 4px;
  padding: 6px 12px;
  text-align: center;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
}
.page-aws-radar .radar-search-block .dropdown-menu .btn-white {
  border: 1px solid #dbdbdb;
}
.page-aws-radar .radar-search-block .dropdown-menu .btn-primary {
  background: #2760ea;
}

.page-aws-radar .radar-table th {
  color: #292929;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 21px; /* 150% */
  padding: 12px 24px;
}
.page-aws-radar .radar-table thead {
  background: #f5f7fc;
}
.page-aws-radar .radar-table td {
  color: #292929;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 21px; /* 150% */
  padding: 18px 24px;
  border: 0px;
  vertical-align: middle;
}
.page-aws-radar .radar-table td:first-child a {
  color: #2760ea;
  font-weight: 500;
}
.page-aws-radar .radar-table .fw-semibold {
  font-weight: 600;
}
.page-aws-radar .radar-table tbody tr {
  box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.12) inset;
}
.page-aws-radar .radar-table tbody tr:last-child {
  box-shadow: none;
}
.page-aws-radar .radar-table .ticket-status {
  border-radius: 40px;
  background: #f5f5f5;
  padding: 6px 12px;
  color: #575757;
  text-align: center;
  font-weight: 600;
  width: 107px;
}
.page-aws-radar .radar-table .apexcharts-tooltip {
  background: #fff;
  color: #000;
}
.page-aws-radar .radar-table .action-btn {
  box-shadow: none;
  color: #575757;
  font-size: 17px;
}
.page-aws-radar .radar-table .dropdown-menu {
  border-radius: 24px;
  border: 1px solid #dbdbdb;
  background: #fff;
  box-shadow: 0px 10px 16px -2px rgba(149, 151, 153, 0.16);
  padding: 16px 8px;
}
.page-aws-radar .radar-table .dropdown-menu a {
  color: #333;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 142.857% */
  padding: 8px 16px 8px 10px;
}
.page-aws-radar .radar-table .dropdown-menu a:hover {
  background: rgba(39, 96, 234, 0.15);
  border-radius: 12px;
}
.page-aws-radar .radar-table.no-footer {
  border-bottom: 0px !important;
}
.page-aws-radar .dataTables_wrapper.no-footer .dataTables_scrollBody {
  border-bottom: 0px !important;
}

.page-aws-radar .pagination button {
  width: 40px;
  font-size: 20px;
  color: #0000008a;
  box-shadow: none;
}
.page-aws-radar .pagination select {
  outline: none;
}

.viewRadarDetailsModal {
  overflow: hidden;
}
.viewRadarDetailsModal .modal-content {
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
}
.viewRadarDetailsModal .modal-dialog {
  max-width: 100%;
  top: 40px;
}
.viewRadarDetailsModal .modal-header {
  padding: 20px 24px;
}
.viewRadarDetailsModal .modal-title {
  color: #191919;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 21px; /* 105% */
}
.viewRadarDetailsModal .modal-body {
  background: #f1f3f7;
  padding: 24px 24px 25px 24px;
}
.viewRadarDetailsModal.bootbox.modal.fade .modal-dialog {
  animation-duration: 0.2s;
}
.viewRadarDetailsModal .modal-title .open-ticket {
  position: absolute;
  right: 60px;
  top: 12px;
  color: #666;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 21px;
}
.viewRadarDetailsModal .modal-title .open-ticket .btn {
  padding: 8px 16px;
  border-radius: 8px;
  background: #2760ea;
  color: #fff;
  text-align: center;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
}

.viewRadarDetailsModal .view-radar-details {
  overflow-x: hidden;
  overflow-y: auto;
}
.viewRadarDetailsModal .resource-details .card-header {
  padding: 20px;
  border-bottom: 1px solid #e6e6e6;
}
.viewRadarDetailsModal .resource-details h4 {
  color: #191919;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 21px;
  margin-bottom: 0;
}
.viewRadarDetailsModal .resource-details h6 {
  color: #666;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
}
.viewRadarDetailsModal .resource-details h5 {
  color: #404040;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px; /* 150% */
  margin-bottom: 0;
}
.viewRadarDetailsModal .resource-details {
  /* border-bottom: 1px solid #E6E6E6; */
}
.viewRadarDetailsModal .resource-details .row {
  margin: 0px 5px 0px 5px;
}
.viewRadarDetailsModal .resource-details .col-3 {
  padding: 16px 16px 20px 20px;
  border-right: 1px solid #e6e6e6;
}
.viewRadarDetailsModal .contact-block {
  border-radius: 16px;
  border: 2px solid #e4e4e4;
}
.viewRadarDetailsModal .contact-block h5 {
  color: #333;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
}
.viewRadarDetailsModal .contact-block h6 {
  color: #808080;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  margin-bottom: 0;
}
.viewRadarDetailsModal .resource-tags-block {
  border-radius: 8px;
  background: #ededed;
  max-height: 244px;
  padding: 16px;
  overflow-y: auto;
}
.viewRadarDetailsModal .resource-tags-block .tags-list {
  padding: 8px 8px 8px 16px;
  border-radius: 50px;
  border: 1px solid #dbdbdb;
  background: #fff;
  display: inline-block;
  margin: 0px 10px 10px 0px;
}
.viewRadarDetailsModal .resource-tags-block .copy-tag {
  border-radius: 45px;
  background: #e8e8e8;
  width: 26px;
  height: 26px;
  padding: 2px;
  color: #1c1b1f;
  margin-left: 5px;
  box-shadow: none;
}
.viewRadarDetailsModal .resource-tags-block .tags-list span {
  color: #333;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}

.viewRadarDetailsModal .radar-finding-chart-block h6 {
  color: #666;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px; /* 128.571% */
}
.viewRadarDetailsModal .radar-finding-chart-block h4 {
  color: #1a1a1a;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px; /* 100% */
}
.viewRadarDetailsModal .apexcharts-xaxis text,
.viewRadarDetailsModal .apexcharts-yaxis text {
  fill: #555;
  color: var(--Text-onSurface-Subdued, #555);
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 200% */
  letter-spacing: -0.2px;
}
.viewRadarDetailsModal .apexcharts-legend-marker {
  margin-right: 5px;
}
.viewRadarDetailsModal .apexcharts-legend-series {
  padding-right: 15px;
}

.viewRadarDetailsModal .metrics-chart h5 {
  color: #4d4d4d;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 21px; /* 105% */
}

.viewRadarDetailsModal .fi-txt {
  color: #000;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px; /* 120% */
}
.viewRadarDetailsModal .fi-res-ans-radar {
  color: #404040;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 171.429% */
  white-space: normal;
}
.viewRadarDetailsModal .ask-fi-res-ans:after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 1.2em;
  background-color: black;
  animation: fi-blinkCursor 1s infinite;
  vertical-align: top;
  margin-top: 3px;
}
.viewRadarDetailsModal .hide-cursor:after {
  display: none !important;
}

/* Radar Spotlight */
.radar-block .sl-card-title small {
  color: #999;
  font-size: 12px;
  font-style: italic;
  font-weight: 400;
  line-height: 19.2px;
}
.radar-block .radar-body {
  padding: 29px 0px 0px 0px;
}
.radar-block h6 {
  color: #666;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 22.4px; /* 140% */
}
.radar-block h5 {
  color: #3d3d3d;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
.radar-block .radar-content {
  color: #333;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 27px;
  padding-top: 24px;
  margin-bottom: 0;
}
.page-aws-spotlight .radar-link,
.page-aws-spotlight .rightsize-link,
.page-aws-spotlight .rs-link {
  display: none;
  border-radius: 18.133px;
  background: #f0f0f0;
  width: 28.333px;
  height: 28.333px;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.page-aws-spotlight .radar-block:hover .radar-link {
  display: inline-flex;
}

.page-aws-spotlight .rightsizing-block:hover .rightsize-link,
.page-aws-spotlight .rs-block:hover .rs-link {
  display: inline;
}

/* Budgets Spotlight */
.budget-body {
  padding: 29px 0px 0px 0px;
}
.budget-block {
  border-radius: 12px;
  border: 1.5px solid #e6e6e6;
  background: #fff;
  padding: 12px 13px 20px 13px;
  height: 144px;
}
.budget-block h6 {
  color: #7d7d7d;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 22.4px; /* 160% */
}
.budget-block .total-budget {
  color: #666;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 19.2px;
  text-align: right;
  margin-top: 5px;
}
.budget-block span {
  color: #666;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 19.2px;
  text-align: right;
  float: right;
}
.budget-block .progress-container {
  border-radius: 12px;
  position: relative;
  height: 12px;
  background: #f0f0f0;
}
.budget-block .progress {
  width: 0;
  transition: width 0.4s linear;
  position: relative;
  height: 12px;
  border-radius: 12px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.budget-block .percentage {
  position: absolute;
  bottom: 12px;
  left: 10px;
  transform: translate(-50%);
  transition: left 0.4s linear;
  color: #666;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 19.2px;
  min-width: 150px;
}
.budget-block .percentage-right {
  text-align: right;
  min-width: 0px;
}
.budget-block .percentage:after {
  content: "";
  position: absolute;
  bottom: 0px;
  right: 50%;
  height: 30px;
  width: 2px;
  transform: translateY(0%);
  top: 1px;
  z-index: 9;
}
.budget-block .progress.bg-success {
  background-color: #5bd160 !important;
}
.budget-block .progress.bg-warning {
  background-color: #ffb219 !important;
}
.budget-block .progress.bg-danger {
  background-color: #ff4112 !important;
}
.budget-block .percentage.success:after {
  background: #5bd160;
}
.budget-block .percentage.warning:after {
  background: #ffb219;
}
.budget-block .percentage.danger:after {
  background: #ff4112;
}
.budget-block .percentage.success {
  color: #5bd160 !important;
}
.budget-block .percentage.warning {
  color: #ffb219 !important;
}
.budget-block .percentage.danger {
  color: #ff4112 !important;
}

/* Trends */

.page-aws-trends .nav-tabs .nav-link {
  color: #737373;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 21px; /* 131.25% */
  border: 0px;
  background: none;
}
.page-aws-trends .nav-tabs .nav-link.active {
  border-bottom: 1px solid #2760ea;
  color: #2760ea;
}
.page-aws-trends .chart-kpi-cards h5 {
  color: #262626;
  font-style: normal;
  font-weight: 500;
  line-height: 24px; /* 120% */
}
.aws-trends-card{
  border:1px solid #E6E6E6;
}
.aws-trends-card .card-body{  
  padding: 24px;
}
.aws-trends-card .aws-trends-card-header {
  border-bottom: 1px solid #ddd;
  padding-bottom: 15px;
  margin-bottom: 20px;
}
.aws-trends-card-title h5{
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 21px;
}
.aws-trends-card-title p{
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.3px;
}

/* Distributions */

.page-aws-distributions .nav-tabs .nav-link {
  color: #737373;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 21px; /* 131.25% */
  border: 0px;
  background: none;
}
.page-aws-distributions .nav-tabs .nav-link.active {
  border-bottom: 1px solid #2760ea;
  color: #2760ea;
}
.page-aws-distributions .chart-kpi-cards h5 {
  color: #262626;
  font-style: normal;
  font-weight: 500;
  line-height: 24px; /* 120% */
}
.page-aws-distributions .radio-container .form-check {
  color: var(--black-06, rgba(0, 0, 0, 0.6));
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
}
.page-aws-distributions #rightsizing h5 {
  color: #4d4d4d;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 21px;
}

/* Tickets */

.page-aws-tickets .nav-tabs .nav-link {
  color: #737373;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 21px; /* 131.25% */
  border: 0px;
  background: none;
}
.page-aws-tickets .nav-tabs .nav-link.active {
  border-bottom: 1px solid #2760ea;
  color: #2760ea;
}

.page-aws-tickets .tickets-search-block {
  padding: 24px 24px;
}
.page-aws-tickets .tickets-search-block .form-check {
  color: var(--black-06, rgba(0, 0, 0, 0.6));
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
  letter-spacing: 0.5px;
}
.page-aws-tickets .tickets-search-block .form-check-input:checked {
  background-color: #2760ea;
  border-color: #2760ea;
}
.page-aws-tickets .tickets-search-block .form-select {
  border-radius: 12px;
  border: 1px solid #dbdbdb;
  display: flex;
  height: 48px;
  padding: 12px 16px 12px 24px;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  box-shadow: none;
}

.page-aws-tickets .tickets-table th {
  color: #292929;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 21px; /* 150% */
  padding: 12px 24px;
}
.page-aws-tickets .tickets-table thead {
  background: #f5f7fc;
}
.page-aws-tickets .tickets-table td {
  color: #292929;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 21px; /* 150% */
  padding: 18px 24px;
  border: 0px;
  vertical-align: middle;
}
.page-aws-tickets .tickets-table td:first-child a {
  color: #2760ea;
  font-weight: 500;
}
.page-aws-tickets .tickets-table .fw-semibold {
  font-weight: 600;
}
.page-aws-tickets .tickets-table tbody tr {
  box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.12) inset;
}
.page-aws-tickets .tickets-table tbody tr:last-child {
  box-shadow: none;
}
.page-aws-tickets .tickets-table .ticket-status {
  border-radius: 40px;
  background: #f5f5f5;
  padding: 6px 12px;
  color: #575757;
  text-align: center;
  font-weight: 600;
  display: inline;
}
.page-aws-tickets .tickets-table .ticket-status.open {
  background: #dbeaff;
  color: #5397f5;
}
.page-aws-tickets .tickets-table .ticket-status.work-progress {
  background: rgba(255, 171, 107, 0.15);
  color: #fe994c;
}
.page-aws-tickets .tickets-table .ticket-status.pending {
  background: rgba(255, 171, 107, 0.15);
  color: #fe994c;
}
.page-aws-tickets .tickets-table .ticket-status.done {
  background: rgba(95, 210, 106, 0.15);
  color: #5fd16a;
}
.page-aws-tickets .tickets-table.no-footer {
  border-bottom: 0px !important;
}
.page-aws-tickets .dataTables_wrapper.no-footer .dataTables_scrollBody {
  border-bottom: 0px !important;
}

.page-aws-tickets .pagination button {
  width: 40px;
  font-size: 20px;
  color: #0000008a;
  box-shadow: none;
}
.page-aws-tickets .pagination select {
  outline: none;
}

/*-----------------------*/

.tags-container-css {
  max-height: 215px;
  background: #ebebeb;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  border-radius: 10px;
  overflow-y: scroll;
}
.tag {
  display: flex;
  align-items: center;
  background: #ffffff;
  padding: 5px 8px;
  border-radius: 20px;
}
.copy-icon {
  cursor: pointer;
  margin-left: 10px;
  background: #ebebeb;
  padding: 5px;
  border-radius: 50px;
}

.userDetailsDiv {
  border: 2px solid #979797;
  border-radius: 8px;
  padding: 10px;
}

.userImg {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.email-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f7fc;
  border-radius: 50%;
  width: 40px;
  height: 40px;
}

.emailImg {
  cursor: pointer;
  /* width: 20px;
    height: 20px; */
}

.queries-fi-res-ans pre {
  background: #000000;
  padding: 15px;
  color: white;
  border-radius: 20px;
}

.recom-comment,
.aws-recommendation-info {
  cursor: pointer;
}

#optimizationSavingsTableContainer b {
  font-weight: 600;
}
.line-item-card {
  cursor: pointer;
}
.line-item-card-selected .alert {
  border-color: #2e6be5 !important;
}
.sl-card {
  border-radius: 24px;
}

/* MTD legend: keep info icon from affecting label layout */
.sl-mtd-legend-label-with-info {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
}
.sl-mtd-legend-label-with-info > span:first-child {
  line-height: 1.2;
}
.sl-mtd-legend-label-with-info .aws-sl-info-tooltip-wrapper {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  margin-left: 2px;
}
.aws-sl-card {
  border-radius: 12px !important;
  position: relative;
  z-index: 1;
  overflow: visible;
}
.aws-sl-card:hover,
.aws-sl-card:focus-within {
  z-index: 20;
}

/* Azure Spotlight: same stacking as AWS so info tooltips render above adjacent cards */
.azure-sl-card {
  position: relative;
  z-index: 1;
  overflow: visible;
}
.azure-sl-card:hover,
.azure-sl-card:focus-within {
  z-index: 20;
}

/* AWS Spotlight: title row + info icon (Figma) */
.aws-sl-card .card-title-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.aws-sl-info-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: help;
  line-height: 0;
  flex-shrink: 0;
  vertical-align: middle;
}
.aws-sl-info-icon-btn:focus-visible {
  outline: 2px solid rgba(59, 130, 246, 0.5);
  outline-offset: 2px;
  border-radius: 2px;
}
.aws-sl-info-icon-btn img {
  display: block;
  width: 16px;
  height: 16px;
}
.aws-sl-info-icon-btn--sm img {
  width: 12px;
  height: 12px;
}

/* AWS Spotlight: custom dark tooltip below info icon (upward caret) */
.aws-sl-info-tooltip-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  align-self: center;
  flex-shrink: 0;
  vertical-align: middle;
}
.aws-sl-info-tooltip {
  position: absolute;
  left: 0;
  top: calc(100% + 12px);
  transform: translateY(-4px);
  box-sizing: border-box;
  width: min(280px, calc(100vw - 32px));
  max-width: min(280px, 92vw);
  padding: 16px;
  background: #ffffff;
  color: #475569;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1),
    0 8px 10px -6px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
  z-index: 1080;
  white-space: normal;
}
.aws-sl-info-tooltip-wrapper:hover .aws-sl-info-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* Arrow border layer */
.aws-sl-info-tooltip::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 7px;
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 9px solid #e2e8f0;
}
/* Arrow fill layer */
.aws-sl-info-tooltip::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 8px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #ffffff;
}
.aws-sl-info-tooltip strong {
  display: block;
  margin: 0 0 2px 0;
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.aws-sl-info-metadata-item {
  border-left: 2px solid #f1f5f9;
  padding-left: 12px;
  margin-bottom: 12px;
}
.aws-sl-info-metadata-item:last-child {
  margin-bottom: 0;
}
.aws-sl-info-metadata-label {
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 2px 0;
}
.aws-sl-info-metadata-value {
  font-size: 12px;
  color: #475569;
  line-height: 1.4;
  font-weight: 500;
  margin: 0;
}
.cost-summary-card .card-header,
.last-month-total-cost-card .card-header {
  overflow: visible;
}
.sl-mtd-last-month,
.sl-mtd-chart-legend-title {
  overflow: visible;
}

/* MTD chart legend: label + compact info icon */
.sl-mtd-chart-legend-title {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  max-width: 100%;
}
.sl-mtd-chart-legend-title span.sl-mtd-legend-label-with-info {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  margin-left: 3px;
  font-size: 12px;
  color: #8f8f8f;
  white-space: normal;
  max-width: calc(100% - 14px);
  overflow-wrap: anywhere;
}
.sl-mtd-chart-legend-title span.sl-mtd-legend-label-with-info > span:first-of-type {
  white-space: normal;
}
.sl-card-title .aws-sl-title-with-info {
  display: flex;
  align-items: center;
  gap: 4px;
}
.sl-card .card-body {
  padding: 28px 28px 32px 28px;
}
.sl-card-title-row {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 2px solid #ededed;
}
.sl-card-title span:first-child {
  font-size: 20px !important;
  font-weight: 600;
  color: #171717 !important;
}
.sl-card-title span:last-child {
  font-size: 14px;
  color: #999999;
}
.sl-card-title span.d-block {
  margin-top: 8px;
}
.sl-font-18-weight-600 {
  font-size: 16px;
  font-weight: 600;
  color: #171717;
}
.sl-font-16-weight-600 {
  font-size: 16px;
  font-weight: 600;
  color: #171717;
}
/* Direct child only — nested label rows (e.g. Last Month + info) must not get swatch dimensions */
.sl-mtd-chart-legend-title > span:first-child {
  height: 10px;
  width: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}
.sl-mtd-chart-legend-title > span:last-child {
  font-size: 12px;
  color: #8f8f8f;
  display: inline-block;
  margin-left: 3px;
}
/* Users Management */
.rbac-user-model {
  overflow: hidden;
}
.rbac-user-model .modal-header {
  padding: 20px 24px;
}
.rbac-user-model .modal-dialog {
  max-width: 100%;
  top: 40px;
  animation-duration: 0.2s;
}
.rbac-user-model .modal-content {
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
}
.rbac-permissions-added {
  height: 500px;
  overflow: auto;
  border: 1px solid #c5c4c4 !important;
  background-color: #fafafa;
  margin-top: 10px;
}
.rbac-selected-permission {
  padding: 12px 10px;
  border-bottom: 1px solid #dfdfdf;
  font-size: 16px;
  color: #000000;
}
.add-permission-block {
  text-align: center;
  margin-top: 250px;
}
.add-permission-block span {
  display: block;
  margin-bottom: 10px;
}
.user-permission-btn {
  border-radius: 100%;
  font-size: 17px;
  width: 27px;
  height: 27px;
  padding-top: 0px;
}
.rbac-group-includes {
  height: 100%;
}
.rbac-radio-cbox {
  margin-bottom: 10px;
}
.rbac-radio-cbox input {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}
.rbac-radio-cbox label {
  color: #333;
  font-size: 16px;
  font-weight: normal;
  cursor: pointer;
}
.pr-dropdown .wrapper {
  /* width: 400px;
	background: #fff;
	border-radius: 10px;
	padding: 20px 25px 40px;
	box-shadow: 0 12px 35px rgba(0,0,0,0.1); */
}
.pr-dropdown header h2 {
  font-size: 24px;
  font-weight: 600;
}
.pr-dropdown header p {
  margin-top: 5px;
  font-size: 16px;
}
.pr-dropdown .price-input {
  width: 100%;
  display: flex;
  margin: 25px 0 20px;
}
.pr-dropdown .price-input .field {
  display: flex;
  width: 100%;
  height: 45px;
  align-items: center;
}
.pr-dropdown .field input {
  width: 40%;
  height: 65%;
  outline: none;
  font-size: 17px;
  margin-left: 12px;
  border-radius: 5px;
  text-align: center;
  border: 1px solid #999;
  -moz-appearance: textfield;
}
.pr-dropdown input[type="number"]::-webkit-outer-spin-button,
.pr-dropdown input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
.pr-dropdown .price-input .separator {
  width: 130px;
  display: flex;
  font-size: 19px;
  align-items: center;
  justify-content: center;
}
.pr-dropdown .slider {
  height: 5px;
  position: relative;
  background: #ddd;
  border-radius: 5px;
}
.pr-dropdown .slider .progress {
  height: 100%;

  position: absolute;
  border-radius: 5px;
  background: #17a2b8;
}
.pr-dropdown .range-input {
  position: relative;
}
.pr-dropdown .range-input input {
  position: absolute;
  width: 100%;
  height: 5px;
  top: -5px;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.pr-dropdown input[type="range"]::-webkit-slider-thumb {
  height: 17px;
  width: 17px;
  border-radius: 50%;
  background: #17a2b8;
  pointer-events: auto;
  -webkit-appearance: none;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
}
.pr-dropdown input[type="range"]::-moz-range-thumb {
  height: 17px;
  width: 17px;
  border: none;
  border-radius: 50%;
  background: #17a2b8;
  pointer-events: auto;
  -moz-appearance: none;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
}
.user-chips {
  background-color: #ebebeb;
  padding: 5px 10px 7px 10px;
  border-radius: 25px;
  font-size: 12px;
  vertical-align: top;
}
.user-chips-cnt {
  background-color: #ebf1ff;
  position: relative;
  cursor: pointer;
}

.user-chips-cnt::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 12px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s;
  z-index: 100;
}

.user-chips-cnt:hover::after {
  opacity: 1;
  visibility: visible;
}
/* Spotlight PS card  */

#sl-component-potential-savings .values {
  width: 40%;
  /* float: right;
	text-align: right; */
}
#sl-component-potential-savings .value {
  font-size: 20px;
  font-weight: 600;
  color: #545965;
}
#sl-component-potential-savings .label {
  font-size: 14px;
  font-weight: 500;
}

/* Spotlight Tickets card  */
#sl-component-potential-savings table td,
#sl-component-tickets table td {
  font-weight: 600;
  font-size: 16px;
  color: black;
}

#sl-component-tickets .table tbody tr td {
  text-align: center;
}

#sl-component-tickets .chart-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 50%;
  background: white;
  box-shadow: 0px 10px 20px rgba(20, 37, 63, 0.1);
}

/* #sl-component-tickets .chart-skeleton {
	border-radius: 50%;
	background: conic-gradient(#e0e0e0 0%, #e0e0e0 25%, #f0f0f0 25%, #f0f0f0 100%);
	animation: sl-component-ticketsSkeleton-animation 1.2s infinite;
}

@keyframes sl-component-ticketsSkeleton-animation {
	0% {
		background-position: 0% 50%;
	}
	100% {
		background-position: 100% 50%;
	}
} */

/* #sl-component-tickets  .donut-chart {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background: #dbe3e7;
	display: flex;
	justify-content: center;
	align-items: center;
}
.donut-hole {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background: white;
} */

/* Profile */
.profile-card {
  display: flex;
  justify-content: space-between;
  padding: 20px;
}
.log-out-btn {
  border: none;
  padding: 8px 24px 8px 16px;
  border-radius: 16px;
  background: rgba(39, 96, 234, 0.1);
}
.edit-icon {
  width: 13.694px;
  height: 14px;
}
.profile-img {
  border-radius: 50%;
  width: 150px;
  height: 150px;
  object-fit: cover;
}
.basic-details {
  margin: 47px 0px 24px 0px;
}
.profile-edit {
  color: #2760ea;
  font-size: 16px;
  cursor: pointer;
}
.visibility-icon {
  margin-left: 10px;
  width: 24px;
  height: 24px;
  cursor: pointer;
}
/* Profile */

.rsTable tbody th,
.rsTable tbody td {
  padding: 20px 0;
}

.rsTable tbody th,
.rsTable tbody td {
  white-space: nowrap;
}

.rsTable tbody td {
  text-align: end;
}

/* Tickets page */
.tickets-tr th {
  color: #292929;
  font-size: 14px;
  font-weight: 500;
}
.tickets-tr td {
  padding: 20px 18px !important;
}
.tickets-tr td:first-child {
  color: #2760ea;
}
.tickets-tr td:nth-child(4) {
  color: #292929;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
}
/* Tickets page */
.recCostBannertext {
  color: #379e41;
  font-size: 14px;
  font-family: Work Sans;
  font-weight: 600;
  line-height: 21px;
  word-wrap: break-word;
}

.recCostBanner {
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 4px;
  padding-bottom: 4px;
  background: #e7f8e9;
  border-radius: 61px;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 10px;
  display: inline-flex;
}

/* AWS Component */
.apexcharts-toolbar {
  top: -60px !important;
  right: -8px !important;
}

#instanceFamily .apexcharts-toolbar,
#storageType .apexcharts-toolbar,
#transferCost .apexcharts-toolbar,
#transferByTransferType .apexcharts-toolbar,
#vCPU .apexcharts-toolbar {
  top: -125px !important;
  right: -8px !important;
}

#transferGrowthRate .apexcharts-toolbar,
#transferVolume .apexcharts-toolbar {
  top: -95px !important;
  right: -8px !important;
}

.aws-component-legend {
  display: flex;
  width: 100%;
  padding: 10px 16px 10px 12px;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  border-radius: 8px;
  border: 1px solid #e6e6e6;
}
.selected-trends-legends {
  border: 1px solid #007bff;
}

.aws-component-legend-label-border {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  margin-right: 8px;
}
.aws-component-legend-label > span {
  white-space: nowrap;
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aws-component-legend-label {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.aws-component-legend-value {
  color: #262626;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}
.aws-component-legends-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 36px;
}
.aws-component-legends-container-popup {
  display: flex;
  flex-direction: column-reverse;
  gap: 36px;
}
.aws-component-legends-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  min-width: 200px;
}
.aws-component-legends-grid-popup {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  min-width: 200px;
}
/* AWS Component */
/* Container for the tooltip */
.aws-component-legend {
  position: relative;
  /* display: inline-block; */
  cursor: pointer;
}

/* Tooltip styling */
.aws-component-legend .custom-tooltip {
  visibility: hidden; /* Hidden by default */
  width: max-content;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
  white-space: nowrap;
}

/* Tooltip arrow */
.aws-component-legend .custom-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Show the tooltip when hovering over the legend */
.aws-component-legend:hover .custom-tooltip {
  visibility: visible; /* Visible when hovering */
  opacity: 1;
}

/* Trends */
.finops-nav-chips {
  position: sticky;
  top: 90px;
  background-color: #f1f3f7;
  z-index: 999;
  padding-bottom: 13px;
}

.finops-nav-chips li {
  display: inline-block;
  margin-right: 12px;
}

.finops-nav-chips a {
  padding: 10px 20px 13px 20px;
  font-size: 16px;
}

.finops-nav-chips a:not(.active) {
    color: #666;
    padding: 6px 16px;
}

.finops-nav-chips a.active {
  border-bottom: solid 1px #2960F5;
  color: #2960F5 !important;
  padding: 6px 16px;
  /* border-top-left-radius: 12px;
	border-top-right-radius: 12px;
	border-bottom-left-radius: 12px;
	border-bottom-right-radius: 12px; */
  /* border-bottom: 3px solid !important;
	border-top: 0px;
	border-right: 0px;
	border-left: 0px;
	color: #2760ea; */
}

.card-chips {
  padding: 8px 12px;
  background: #f1f4f9;
  margin-right: 10px;
  margin-bottom: 24px;
  font-size: 16px;
  border-radius: 4px;
}

.chip-value {
  color: #0d0d0d;
  font-weight: 500;
}

/* .active-chip {
	border-radius: 4px;
	border: 1px solid var(--Primary-Blue, #2960F5);
	background: rgba(41, 96, 245, 0.10);
	color: #2960F5;
}

.active-chip > .chip-value{
	color: #2960F5;
} */
/* Trends */

/* Dynamic Reports */

.page-aws-dynamic-reports .topBar {
  padding: 30px;
  box-shadow: 0px 1px 0px 0px #00000024;
  background-color: white;
  height: 10vh;
  z-index: 1;
}

.page-aws-dynamic-reports .topBar a {
  background-color: #e5eeff;
  border-radius: 8px;
  padding: 2px 5px;
}

.page-aws-dynamic-reports .leftBar {
  position: relative;
  background-color: white;
  height: 90vh;
  padding: 0px;
}

.page-aws-dynamic-reports .dropdown {
  position: relative;
  padding: 30px 10px 30px 30px;
}

.page-aws-dynamic-reports .dropdown:hover {
  background-color: #e6e9e754;
}

.page-aws-dynamic-reports .leftBar img {
  height: 25px;
  width: 25px;
}

.page-aws-dynamic-reports .leftBar .mainBtn {
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  color: #8a8a8a;
  border: none;
  background: transparent;
  text-decoration: none !important;
  padding: 0;
  width: 100%;
}

.page-aws-dynamic-reports .leftBar .dropdown-items {
  margin: 0;
  padding: 0;
  list-style: none;
  background: transparent;
  max-height: 50vh;
  overflow-y: auto;
}

.page-aws-dynamic-reports .leftBar .mainBtn a {
  cursor: pointer;
  /* border: 1px solid black; */
  padding: 0 8px;
  /* border-radius: 7px; */
  color: #8a8a8a;
  font-weight: 500;
  font-size: 20px;
}

.page-aws-dynamic-reports .leftBar button {
  text-decoration: underline !important;
  color: blue;
}

[contenteditable="true"]:focus {
  outline: none; /* Remove the focus border */
}

.dRcontent .card {
  height: 65vh;
  margin-bottom: 0px !important;
}

.dRcontent .defaultContent button {
  background-color: #2760ea;
  border-radius: 20px;
  margin-top: 20px;
  color: white;
  padding: 10px 15px;
  font-size: 16px;
}

.informationPopup {
  display: none;
  z-index: 999;
  position: absolute;
  background: white;
  top: 0;
  left: 13rem;
  width: 55rem;
  /* padding: 20px; */
  border-radius: 20px;
  border: 2px solid #e3e3e3;
  min-height: 18rem;
  transition: 0.3s ease;
}

.informationPopup .closeBtn {
  position: relative;
}

.informationPopup .closeBtn button {
  position: absolute;
  background-color: #ffffff;
  border-radius: 50%;
  padding: 8px;
  right: 32px;
  top: 19px;
  z-index: 999;
  opacity: 1;
  transition: transform 0.4s;
}

.informationPopup .closeBtn button:hover {
  transform: scale(1.09);
}

/* Tooltip Arrow */
.informationPopup .tooltip-arrow {
  position: absolute;
  top: 28px;
  left: -52px;
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-right: 27px solid #e3e3e3;
}

.dRmodal .modal-content {
  border-radius: 20px;
}

.dRmodal h1 {
  font-size: 24px;
  font-weight: 600;
}

.dRmodal p {
  font-size: 18px;
}

.dRmodal .modal-header button {
  float: right;
  background-color: #cdcdcd;
  border-radius: 50%;
  padding: 10px;
}

.columns-list h2 {
  color: var(--Greys-Grey-3, #4c4c4c);
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 25.6px; /* 160% */
}

.columns-list label {
  position: relative;
  color: #333;
  font-feature-settings: "liga" off, "clig" off;
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  /* margin-bottom: 20px; */
}

.columns-list input[type="checkbox"] {
  margin: 0px 6px 0 10px;
  height: 16px;
  width: 16px;
}

/* Two-column layout without internal scroll for each category */
.columns-data {
  min-height: 30rem;
}

.columns-list {
  min-height: 30rem;
  overflow-y: auto; /* Scroll the entire modal if the content exceeds the height */
  padding-right: 10px;
}

.column-group {
  /* Remove max-height and scrolling to allow for natural height based on content */
  padding-bottom: 0px; /* Add space below each category */
}

/* Prevent categories from breaking across columns */
.columns-list .column-group {
  break-inside: avoid; /* Keep categories together and prevent breaks */
  display: inline-grid;
  margin-right: 35px;
}

.columns-list .clmTooltip {
  display: none;
  position: absolute;
  background-color: #000000ba;
  color: #fff;
  padding: 8px;
  border-radius: 5px;
  font-size: 13px;
  z-index: 1000;
  min-width: 12rem;
}

.columns-list label:hover .clmTooltip {
  display: block;
  top: 25px;
  left: 30px;
}

.leftBar ul {
  list-style: none;
  cursor: pointer;
  /* background-color: #F7F7F7; */
  padding: 0;
  margin: 0;
  min-height: 0vh;
  overflow: hidden;
}

.leftBar hr {
  margin: 0 !important;
}

.leftBar li {
  position: relative;
  color: var(--Greys-Grey-1, #0d0d0d);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  padding: 6px 0 6px 10px;
}

.leftBar li span {
  width: 12rem;
  display: block;
}

.leftBar li:hover {
  background-color: white;
  border: 1px solid grey;
  border-radius: 5px;
}

.leftBar .close-btn,
.leftBar .close-btn-usdate {
  display: none;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

.leftBar li:hover .close-btn {
  display: inline;
}

.filterDropdowns {
  background: white;
  padding: 10px 15px !important;
  min-width: 5%;
  border-radius: 10px;
}

.filterDropdownsDate input {
  padding: 10px 15px !important;
}

.DRsaveBtns .run {
  background-color: transparent;
  border: 1px solid grey;
  border-radius: 10px;
}

.DRsaveBtns button {
  height: 2.5rem;
  white-space: nowrap;
}

.MaindrpDwnItems {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.DRsaveBtns .draft {
  background-color: #2760ea;
  border-radius: 10px;
  color: white;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 125% */
}

.DRsaveBtns .publish {
  background-color: transparent;
  border: 1px solid #2760ea;
  border-radius: 10px;
  color: #2760ea;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 125% */
}

.dRrunModal .dr-selected-items {
  background-color: #f5f5f5;
  padding: 20px;
  border-radius: 15px;
}

.dr-selected-items p,
.preview-data p {
  color: var(--Greys-Grey-2, #333);
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 32px; /* 177.778% */
}

.preview-data-set {
  min-height: 15rem;
}

.datepicker-to-from {
  display: flex;
  gap: 10px;
}

.datepicker-to-from input {
  width: 140px;
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.filterPopupBtn {
  color: #2960f5;
  text-decoration: underline;
  cursor: pointer;
}

.RundrpDwnItems,
.dynamicRptDrpdwn {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.dynamicRptDrpdwn .dropdown {
  border: 1px solid #dddddd;
}

.dRrunModal .modal-dialog {
  max-width: 80%;
}

/* .page-aws-reports .filterDropdowns, 
.page-aws-dynamic-reports .RundrpDwn .filterDropdowns {
	background: #e7e7e7;
	padding: 10px 15px !important;
	min-width: 5%;
	border-radius: 10px;
	cursor: not-allowed;
} */

/* .page-aws-reports .dRrunModal .text-muted, 
.page-aws-reports .dRrunModal .dropdown-txt, 
.page-aws-dynamic-reports .RundrpDwn .text-muted, 
.page-aws-dynamic-reports .RundrpDwn .dropdown-txt {
	cursor: not-allowed;
} */

.page-aws-dynamic-reports .initialPopup .modal-content,
.page-aws-dynamic-reports .fiPopup .modal-content {
  border-radius: 15px;
}

.page-aws-dynamic-reports .reportInitialPopup .report-option {
  /* background-color: grey; */
  border: 2px solid var(--border-1, rgba(0, 0, 0, 0.1));
  border-radius: 10px;
  cursor: pointer;
  transition: 0.2s ease;
}

.page-aws-dynamic-reports .reportInitialPopup .report-option:hover {
  /* background-color: grey; */
  border: 2px solid var(--border-1, blue);
  z-index: 999;
  transform: scale(1.01);
}

.page-aws-dynamic-reports .reportInitialPopup .report-option img {
  height: 13rem;
  width: 23rem;
}

.page-aws-dynamic-reports .reportInitialPopup .report-option h5 {
  color: var(--Greys-Grey-2, #333);
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 32px; /* 160% */
  letter-spacing: -0.2px;
}

.page-aws-dynamic-reports .reportInitialPopup .report-option p {
  color: var(--Greys-Grey-3, #4c4c4c);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 25.6px; /* 160% */
}

.page-aws-dynamic-reports .fi-report-popup {
  padding: 0 20px 20px 20px;
}

.page-aws-dynamic-reports .fi-report-popup h3 {
  color: var(--Greys-Grey-2, #333);
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 38.4px; /* 160% */
  margin: 1rem 0;
}

.page-aws-dynamic-reports .fi-report-popup h6 {
  color: var(--Greys-Grey-3, #4c4c4c);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 142.857% */
}

.page-aws-dynamic-reports .fi-report-popup textarea {
  background: var(--Fill-surfaceSubdued-Enabled, #ededed);
}

.page-aws-dynamic-reports .fi-report-popup .textareaThings {
  position: relative;
}

.page-aws-dynamic-reports .fi-report-popup .textareaThings button {
  position: absolute;
  bottom: 15px;
  right: 15px;
}

.page-aws-dynamic-reports .fiPopup .modal-header {
  padding: 0;
}

.deafultPrompts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.deafultPrompts button {
  color: var(--Greys-Grey-3, #4c4c4c);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 22.4px; /* 160% */
  width: 22rem;
  margin-top: 10px;
  border: 1px solid var(--border-1, rgba(0, 0, 0, 0.1));
  border-radius: 10px;
  text-align: left;
}
.fiContentPopup .modal-content {
  border-radius: 30px 30px 0 0;
}

.fiContentPopup .modal-body {
  padding: 0;
  min-height: 98vh;
}

.modalCntSec {
  height: 90vh;
  overflow-y: scroll;
  overflow-x: hidden;
}

.page-aws-dynamic-reports .QueriesModal {
  overflow-y: hidden;
}

.fiContentPopup .fiHeadding {
  color: var(--Greys-Grey-2, #333);
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 38.4px; /* 192% */
}

.fiContentPopup .firptHeadding {
  color: var(--Greys-Grey-2, #333);
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px; /* 133.333% */
}

.fiGenCont {
  color: #404040;
  font-family: "Work Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px; /* 162.5% */
}

.page-aws-dynamic-reports .fiContentPopup .card .modal_header {
  border-radius: 30px 30px 0 0 !important;
}

.page-aws-dynamic-reports .skeleton-bar {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(219, 228, 255, 0.65) 50%,
    rgba(125, 160, 255, 0.39) 100%
  );
  height: 20px;
  border-radius: 5px;
  margin-bottom: 15px;
  animation: drloading 6s ease-in-out infinite;
  background-size: 200% 100%;
  background-position: -200% 0; /* Starts off-screen */
}

.page-aws-dynamic-reports .skeleton-container {
  width: 90%;
}

.page-aws-dynamic-reports .skeleton-bar:nth-child(1) {
  width: 100%;
}

.page-aws-dynamic-reports .skeleton-bar:nth-child(2) {
  width: 70%;
}

.page-aws-dynamic-reports .skeleton-bar:nth-child(3) {
  width: 90%;
}

.skelitonMt {
  margin-top: 40px;
}

@keyframes drloading {
  0% {
    background-position: 200% 0; /* Ends off-screen to the right */
  }
  100% {
    background-position: -200% 0; /* Starts from the left, off-screen */
  }
}
.run {
  position: relative;
  display: inline-block;
}
.run .tooltiptextdr {
  visibility: hidden;
  min-width: 120px;
  background-color: #ffffff;
  color: #000000;
  text-align: center;
  border: 0.5px solid #b3b3b3;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: -40px;
  left: -20px;
}

.run:hover .tooltiptextdr {
  visibility: visible;
}

.fiPopup textarea {
  display: flex;
  padding: 12px 16px 16px 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  align-self: stretch;
  border: 0;
  resize: none;
  color: #000;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.32px;
  height: 60px;
  background-color: transparent !important;
}

.fiPopup .fi-search {
  border-radius: 10px;
  border: 1.5px solid #e5e5e5;
  background: #fff;
  /* box-shadow: 0px 20px 24px 0px rgba(20, 37, 63, 0.06); */
  z-index: 999;
  position: relative;
}

.disabled-tval {
  background-color: #e7e7e7;
}

.fiPopup .fi-dropdown .dropdown {
  padding: 12px !important;
}

.fiPopup .fi-dropdown {
  border-top: 1px solid var(--border-1, rgba(0, 0, 0, 0.1));
  background: #f1f1f1;
  display: flex;
  padding: 12px 12px;
  gap: 12px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.fiPopup textarea {
  display: flex;
  padding: 12px 16px 16px 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  align-self: stretch;
  border: 0;
  resize: none;
  color: #000;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.32px;
  height: 60px;
  background-color: transparent !important;
}

.fiPopup .fi-search {
  border-radius: 10px;
  border: 1.5px solid #e5e5e5;
  background: #fff;
  /* box-shadow: 0px 20px 24px 0px rgba(20, 37, 63, 0.06); */
  z-index: 999;
  position: relative;
}

.fiPopup .fi-dropdown .dropdown {
  padding: 12px !important;
}

.fiPopup .fi-dropdown {
  border-top: 1px solid var(--border-1, rgba(0, 0, 0, 0.1));
  background: #f1f1f1;
  display: flex;
  padding: 12px 12px;
  gap: 12px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.fiPopup textarea {
  display: flex;
  padding: 12px 16px 16px 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  align-self: stretch;
  border: 0;
  resize: none;
  color: #000;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.32px;
  height: 60px;
  background-color: transparent !important;
}

.fiPopup .fi-search {
  border-radius: 10px;
  border: 1.5px solid #e5e5e5;
  background: #fff;
  /* box-shadow: 0px 20px 24px 0px rgba(20, 37, 63, 0.06); */
  z-index: 999;
  position: relative;
}

.fiPopup .fi-dropdown .dropdown {
  padding: 12px !important;
}

.fiPopup .fi-dropdown {
  border-top: 1px solid var(--border-1, rgba(0, 0, 0, 0.1));
  background: #f1f1f1;
  display: flex;
  padding: 12px 12px;
  gap: 12px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.disabled-tval {
  background-color: #e7e7e7;
}

/* Dynamic Report ends*/
/* Azure Radar Start */
.page-azure-radar .nav-tabs .nav-link {
  color: #737373;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 21px; /* 131.25% */
  border: 0px;
  background: none;
}
.page-azure-radar .nav-tabs .nav-link.active {
  border-bottom: 1px solid #2760ea;
  color: #2760ea;
}

.page-azure-radar .radar-top-card .card-body {
  padding: 16px;
}
.page-azure-radar .radar-top-card .avatar {
  margin-right: 20px;
}
.page-azure-radar .radar-top-card .avatar-title {
  height: 52px;
  padding: 16px;
  width: 52px;
}
.page-azure-radar .radar-top-card h6 {
  color: #666;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 21px; /* 131.25% */
}
.page-azure-radar .radar-top-card h4 {
  color: #1a1a1a;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px; /* 100% */
  margin-bottom: 0;
}
.page-azure-radar .radar-top-card .cost-details {
  color: #666;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 22.4px;
}
.page-azure-radar .radar-top-card .cost-details span:last-child {
  color: #333;
  font-weight: 600;
}

.page-azure-radar .radar-search-block {
  padding: 24px 24px;
}
.page-azure-radar .radar-search-block .input-group input {
  padding: 12px 22px 12px 14px;
  border: 0px;
  background: #ebebeb;
}
.page-azure-radar .radar-search-block .input-group .input-group-text {
  background: #ebebeb;
  padding: 12px 5px 12px 14px;
  border: 0px;
}
.page-azure-radar .radar-search-block .input-group input::placeholder {
  color: #737373;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 125% */
}
.page-azure-radar .radar-search-block .form-check {
  color: var(--black-06, rgba(0, 0, 0, 0.6));
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
  letter-spacing: 0.5px;
}
.page-azure-radar .radar-search-block .form-check-input:checked {
  background-color: #2760ea;
  border-color: #2760ea;
}
.page-azure-radar .radar-search-block .form-select {
  border-radius: 12px;
  border: 1px solid #dbdbdb;
  display: flex;
  height: 48px;
  padding: 12px 16px 12px 24px;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  box-shadow: none;
}
.page-azure-radar .radar-search-block .dropdown-menu {
  border-radius: 24px;
  border: 2px solid #e6e6e6;
  background: #fff;
  box-shadow: 0px 20px 24px 0px rgba(20, 37, 63, 0.06);
  padding: 20px;
  width: 296px;
}
.page-azure-radar .radar-search-block .dropdown-menu h5 {
  color: var(--Text-onSurface-Subdued, #555);
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px; /* 125% */
}
.page-azure-radar .radar-search-block .dropdown-menu input {
  height: 40px;
  padding: 8px 40px 8px 16px;
  border-radius: 12px;
  background: #ededed;
}
.page-azure-radar .radar-search-block .dropdown-menu .btn {
  border-radius: 4px;
  padding: 6px 12px;
  text-align: center;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
}
.page-azure-radar .radar-search-block .dropdown-menu .btn-white {
  border: 1px solid #dbdbdb;
}
.page-azure-radar .radar-search-block .dropdown-menu .btn-primary {
  background: #2760ea;
}

.page-azure-radar .radar-table th {
  color: #292929;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 21px; /* 150% */
  padding: 12px 24px;
}
.page-azure-radar .radar-table thead {
  background: #f5f7fc;
}

.page-azure-radar .radar-table td {
  color: #292929;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 21px; /* 150% */
  padding: 18px 24px;
  border: 0px;
  vertical-align: middle;
}
.page-azure-radar .radar-table td:first-child a {
  color: #2760ea;
  font-weight: 500;
}
.page-azure-radar .radar-table .fw-semibold {
  font-weight: 600;
}
.page-azure-radar .radar-table tbody tr {
  box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.12) inset;
}
.page-azure-radar .radar-table tbody tr:last-child {
  box-shadow: none;
}
.page-azure-radar .radar-table .ticket-status {
  border-radius: 40px;
  background: #f5f5f5;
  padding: 6px 12px;
  color: #575757;
  text-align: center;
  font-weight: 600;
  width: 107px;
}
.page-azure-radar .radar-table .apexcharts-tooltip {
  background: #fff;
  color: #000;
}
.page-azure-radar .radar-table .action-btn {
  box-shadow: none;
  color: #575757;
  font-size: 17px;
}
.page-azure-radar .radar-table .dropdown-menu {
  border-radius: 24px;
  border: 1px solid #dbdbdb;
  background: #fff;
  box-shadow: 0px 10px 16px -2px rgba(149, 151, 153, 0.16);
  padding: 16px 8px;
}
.page-azure-radar .radar-table .dropdown-menu a {
  color: #333;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 142.857% */
  padding: 8px 16px 8px 10px;
}
.page-azure-radar .radar-table .dropdown-menu a:hover {
  background: rgba(39, 96, 234, 0.15);
  border-radius: 12px;
}
.page-azure-radar .radar-table.no-footer {
  border-bottom: 0px !important;
}
.page-azure-radar .dataTables_wrapper.no-footer .dataTables_scrollBody {
  border-bottom: 0px !important;
}

.page-azure-radar .pagination button {
  width: 40px;
  font-size: 20px;
  color: #0000008a;
  box-shadow: none;
}
.page-azure-radar .pagination select {
  outline: none;
}
/* Azure Radar End */
.report-card-button-azure {
  border: none;
  background: none;
  padding: 0;
}

.report-card-button-azure > .fa-bookmark {
  font-size: 15px;
  margin-right: 5px;
  padding: 8px;
}

.report-card-button-azure > .fa-clock {
  font-size: 16px;
  padding: 8px;
}

.report-options-modal-azure select,
.report-options-modal-azure .custom-report-dropdown {
  cursor: pointer;
}

.report-options-modal-azure + .modal-backdrop {
  opacity: 0.8;
}

.view-report-btn-azure {
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid #dbdbdb;
  background-color: #fff;
  /* background-color: rgba(39, 96, 234, 0.2); */
}

.view-report-btn-azure span,
.report-schedule-btn span {
  max-width: 0;
  -webkit-transition: max-width 1s;
  transition: max-width 1s;
  display: inline-block;
  vertical-align: top;
  white-space: nowrap;
  overflow: hidden;
}

.view-report-btn-azure:hover span,
.report-schedule-btn:hover span {
  max-width: 8rem;
  padding-left: 6px;
}

.view-report-btn-azure:hover {
  background-color: rgba(39, 96, 234, 0.2);
  color: #2760ea;
}

.view-report-btn-azure:hover .run-icon-gray {
  display: none;
}

.view-report-btn-azure:hover .run-icon-blue {
  display: inline-block !important;
}

.view-report-btn-azure > span {
  color: #2760ea;
}

.report-options-modal-azure .modal-body {
  background: #f1f3f7;
}

.report-card-azure {
  border-radius: 12px;
  background: #fff;
  transition: all 0.3s ease-in-out;
  padding: 16px;
  margin-bottom: 20px;
}

.report-card-azure:hover {
  box-shadow: 0px 10px 16px -2px rgba(149, 151, 153, 0.1);
  transform: translate3d(0px, -13px, 0px);
  cursor: pointer;
}
.report-card-azure > hr {
  /* margin: 8px; */
}
.report-options-modal-azure .modal-dialog {
  max-width: 1000px;
}
.report-options-modal-azure .fi-res-ans-label img {
  max-width: 50px !important;
}
.report-options-modal-azure .modal-dialog {
  width: 85%;
  max-width: 100%;
}

#awsSLTopNavForm {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
.budgets-content .card-header {
  color: #333333;
  padding: 20px;
  font-size: 18px;
  font-weight: 500;
}
.budget-list-row-1 {
  display: flex;
  align-items: center;
  gap: 30px;
  width: 100vw; /* Ensure full viewport width */
  max-width: 100%; /* Prevents restriction by parent */
  margin-bottom: 45px;
}
.budget-list-row-1 div {
  display: flex;
  flex-direction: column;
  width: 14%;
}
.budget-list-row-1 div label {
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 0px;
  color: #4c4c4c;
  margin-bottom: 5px;
}
.budget-list-row-1 div span {
  color: #333333;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
}
.budget-stats {
  width: 380px;
  /* border: 1px solid #0000001A; */
  /* padding: 20px 35px 20px 35px; */
  border-radius: 5px;
}
.budget-stats .progress-container,
.budget-stats .progress {
  height: 12px;
  overflow: inherit !important;
}
.budget-stats .percentage:after {
  top: 10px !important;
}
.budget-stats .progress span {
  position: absolute;
  right: 5px;
  top: 15px;
}
.budget-stats .progress:after {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  text-align: center;
  transition: left 0.4slinear;
  color: #292929;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 15px;
  width: 1px;
  height: 30px;
}
.budget-stats .progress.bg-warning:after {
  background-color: #ffb219 !important;
}
.budget-stats .progress.bg-success:after {
  background-color: #5bd160 !important;
}
.budget-stats .progress.bg-danger:after {
  background-color: #ff4112 !important;
}
.budgets-pagination li {
  cursor: pointer;
  padding: 5px 10px;
}
.budgets-pagination li.active {
  font-weight: bold;
  color: #000;
}

/* Users Page start */
.page-users .users-table th,
.page-roles .roles-table th {
  color: #292929;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 21px; /* 150% */
  padding: 12px 24px;
}
.page-users .users-table thead,
.page-roles .roles-table thead {
  background: #f5f7fc;
}
.page-users .users-table td,
.page-roles .roles-table td {
  color: #292929;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 21px; /* 150% */
  padding: 18px 24px;
  border: 0px;
  vertical-align: middle;
}
.page-users .users-table td:first-child a {
  color: #2760ea;
  font-weight: 500;
}
.page-users .users-table .fw-semibold {
  font-weight: 600;
}
.page-users .table-responsive,
.page-groups .table-responsive, 
.page-roles .table-responsive {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}
.page-groups .users-tab-table-list .table-responsive{
  border-radius: 1rem;
}
.page-groups .users-tab-table-list, 
.page-roles .roles-tab-table-list {
  height: 420px;
}
.page-groups .users-tab-table-list .dataTables_scrollBody {
  height: 357px !important;
  overflow-y: auto;
}
.page-groups .modal-user-table-group-content .dataTables_wrapper > div > div.dataTables_scrollBody,
.page-roles .modal-user-table-role-content .dataTables_wrapper > div > div.dataTables_scrollBody {
  height: 466px !important;
  border: 1px solid #0000001a;
}

.page-users .users-table tbody tr,
.page-roles .roles-table tbody tr {
  box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.12) inset;
  background-color: white !important;
}
.page-users #DataTables_Table_0_wrapper > div > div.dataTables_scrollHead > div > table > thead > tr > th {
  padding: 20px 30px 20px 30px;
}
.page-users .profile-pic,
.page-groups .profile-pic,
.page-roles .profile-pic {
  max-width: 32px;
  max-height: 32px;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 65px;
}
.page-azure-budgets .my-budgets-table th {
	color: #292929;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 21px; /* 150% */
	padding: 25px 30px;
}
.page-users .profile-image,
.page-groups .profile-image
 {
  width: 83px;
  height: 83px;
  border-radius: 83px;
}
.page-users select option {
  texy-align: center;
}
.page-users .copy-btn,
.page-groups .copy-btn {
    background: transparent;
    border: 0;
    padding: 4px;
    cursor: pointer;
}

.page-users .copy-btn svg, 
.page-groups .copy-btn svg {
    fill: #666;
}

.page-users .tooltip,
.page-groups .tooltip {
    position: absolute;
    top: 43%;
    left: 39%;
    transform: translateX(-50%);
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font: 13px / 1.3 sans-serif;
    padding: 6.25px 7.813px;
    color: #666;
    opacity: 0;
    transition: opacity .15s, transform .15s;
    pointer-events: none;
    font-size: 10.938px;
    font-weight: 400;
    line-height: 15.625px;
}

.page-users .tooltip::before,
.page-groups .tooltip::before {
    content: '';
    position: absolute;
    top: -6px; /* Adjust to position the arrow correctly */
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #e0e0e0; /* Change to border-top-color for the arrow */
}

.page-users .tooltip.show, 
.page-groups .tooltip.show {
    opacity: 1;
    transform: translate(-50%, 4px); /* Adjust the vertical position when shown */
}

.page-users .dataTables_wrapper.no-footer .dataTables_scrollBody {
  border-bottom: 0px !important;
}
.page-users .pagination,
.page-roles .pagination,
.page-groups .pagination {
  background-color: white;
}
.page-users .pagination button,
.page-roles .pagination button,
.page-groups .pagination button {
  width: 40px;
  font-size: 20px;
  color: #0000008a;
  box-shadow: none;
}
.page-users .pagination select,
.page-roles .pagination select,
.page-groups .pagination select {
  outline: none;
}
/* Page Users End */

/* Page Groups Start */
.page-groups .groups-table {
  overflow-x: auto;
}
.page-groups .groups-table-list .dataTables_scrollBody {
  overflow-y: auto;
  height: 568px !important;
  background: white;
}
.page-groups .groups-table th {
  color: #292929;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 21px; /* 150% */
  padding: 20px 30px 20px 30px;
  white-space: nowrap;
}
.page-groups .groups-table thead {
  background: #f5f7fc;
}
.page-groups .groups-table td {
  color: #292929;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 21px; /* 150% */
  padding: 18px 24px;
  border: 0px;
  vertical-align: middle;
  white-space: nowrap;
}
.page-groups .groups-table .fw-semibold {
  font-weight: 600;
}
.page-groups .groups-table tbody tr {
  box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.12) inset;
  background-color: white !important;
}

.page-groups .dataTables_wrapper.no-footer .dataTables_scrollBody {
  border-bottom: 0px !important;
}
.page-groups .pagination {
  background-color: white;
  border-style: solid;
  border-width: 1px;
  border-color: lightgrey;
  background-color: white;
}
.page-groups .pagination button {
  width: 40px;
  font-size: 20px;
  color: #0000008a;
  box-shadow: none;
}
.page-groups .pagination select {
  outline: none;
}
.page-groups .go-back,
.page-users .go-back, 
.page-roles .go-back {
  all: unset;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 32px;
}
.page-groups .nav-tabs .nav-link {
  color: #737373;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 21px; /* 131.25% */
  border: 0px;
  background: none;
}
.page-groups .nav-tabs .nav-link.active,
.page-roles .nav-tabs .nav-link.active
 {
  border-bottom: 1px solid #2760ea;
  color: #2760ea;
}

.page-groups .perspective-blue-tag {
  display: inline-flex;
  align-items: center;
  background-color: #f5f8ff;
  color: #2760ea;
  border: 1px solid #2760ea;
  border-radius: 40px;
  font-size: 14px;
  padding: 4px 9px;
  transition: all 0.3s ease-in-out;
}
.page-groups .blue-tag,
.page-users .blue-tag,
.page-roles .blue-tag {
  display: inline-flex;
  align-items: center;
  background-color: #f5f8ff;
  color: #2760ea;
  border: 1px solid #2760ea;
  border-radius: 40px;
  font-size: 14px;
  padding: 12px 24px 12px 20px;
  margin-top: 20px;
  transition: all 0.3s ease-in-out;
}
.page-groups .blue-tag:hover,
.page-users .blue-tag:hover,
.page-roles .blue-tag:hover {
  background-color: #e0ebff; /* Lighter blue on hover */
}
/* Close button */
.page-groups .perspective-blue-tag .close-btn path{
  margin-left: 10px;
  cursor: pointer;
  transition: color 0.3s ease;
}

/* Hover Effect */
.page-groups .perspective-blue-tag:hover {
  background-color: #e0ebff; /* Lighter blue on hover */
}

/* Hover effect for close button */
.page-groups .perspective-blue-tag .close-btn:hover path {
  stroke: #FF0000; 
}
/* Search box container */
.page-groups .search-container {
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 10px 15px;
  width: 300px;
  background-color: white;
}

.page-groups .search-icon {
  font-size: 18px;
  color: gray;
  margin-right: 10px;
}

.page-groups .search-input {
  border: none;
  outline: none;
  font-size: 16px;
  width: 100%;
}
.page-groups .search-container input::placeholder, 
.page-users .search-container input::placeholder, 
.page-roles .search-container input::placeholder {
  font-size: 14px;
  color: #000000;
  font-weight: 500;
  line-height: 20px;
}

.page-groups .avatar-group,
.page-roles .avatar-group
 {
  display: flex;
  align-items: center;
}

.page-groups .avatar, 
.page-roles .avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid white;
  margin-left: -7px;
  transition: transform 0.2s ease-in-out;
  cursor: pointer;
}

.page-groups .avatar:first-child,
.page-roles .avatar:first-child
 {
  margin-left: 0;
}

.page-groups .avatar:hover,
.page-roles .avatar:hover
 {
  transform: scale(1.1);
}

.page-groups .avatar.more,
.page-roles .avatar.more
 {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e6eeff;
  color: #2760ea;
  font-size: 14px;
  border: 2px solid white;
}

/* Custom Dropdown Link (Inside Table) */
.page-groups .custom-dropdown-link,
.page-users .custom-dropdown-link,
.page-roles .custom-dropdown-link
 {
  display: inline-block;
  padding: 5px 10px;
  font-size: 16px;
  color: #2760ea;
  text-decoration: none;
}

.page-groups .dataTables_scrollBody,
.page-users .dataTables_scrollBody {
  /* overflow: visible !important; */
}
.page-groups .custom-dropdown,
.page-users .custom-dropdown,
.page-roles .custom-dropdown {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
  border: none;
  padding: 8px 0;
  width: 185px;
  left: -131px !important;
  top: -4px;
  transform: translateX(-10px);
}
.page-groups .dropdown,
.page-users .dropdown, 
.page-roles .dropdown {
  min-width: 0px !important;
}
/* Dropdown items */
.page-groups .custom-dropdown .dropdown-item,
.page-users .custom-dropdown .dropdown-item,
.page-roles .custom-dropdown .dropdown-item {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px; /* Space between icon and text */
  padding: 10px 15px;
  font-size: 15px;
  font-weight: 500;
  color: #333;
  transition: all 0.3s ease-in-out;
}

/* Hover effect */
.page-groups .custom-dropdown .dropdown-item:hover,
.page-users .custom-dropdown .dropdown-item:hover,
.page-roles .custom-dropdown .dropdown-item:hover {
  background: #f1f1f1;
  color: #007bff;
  border-radius: 5px;
}

/* Icons styling */
.page-groups .custom-dropdown .dropdown-item img,
.page-users .custom-dropdown .dropdown-item img {
  font-size: 18px;
  color: #555;
  transition: all 0.3s ease;
}

/* Hover effect on icons */
.page-groups .custom-dropdown .dropdown-item:hover img,
.page-users .custom-dropdown .dropdown-item:hover img {
  color: #007bff;
}
.page-groups .create-group .form-control {
  border-radius: 6px;
  display: block;
  margin-bottom: 5px;
  padding: 8px;
  width: 200px;
  border: 1px solid #ccc;
}
.page-groups .create-group .form-label {
  font-size: 16px;
}
.page-users .warning, 
.page-roles .warning, 
.page-groups .warning {
  color: red;
  font-size: 14px;
  display: none;
  margin-bottom: 10px;
}
.page-users .groups-row,
.page-users .roles-row,
.page-users .perspectives-row {
  margin-top: 6px;
}
.page-groups .groups-row,
.page-groups .roles-row,
.page-groups .perspectives-row {
  margin-top: 6px;
}

.page-groups .view-role-dropdown-modal {
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  /* transform: translateY(-50%); */
  max-width: 551px; /* Adjust the width as needed */
  margin: 0; /* Remove default margin */
}
.page-groups .view-role-dropdown-modal .modal-dialog {
  margin: 0px;
  max-width: 100%;
}
.page-groups .role-search-container {
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 10px 15px;
  width: 300px;
  background-color: white;
  border-radius: 12px;
  background: #ebebeb;
}
.page-groups .role-search-container input {
  background: #ebebeb;
}
.page-groups .add-role-lists {
  margin: 20px -12px 20px 5px;
}
.page-groups .add-role-lists .form-check {
  margin-bottom: 20px;
}
.page-groups .add-role-lists .form-check label {
  display: block;
  margin-left: 10px;
  color: #333;
  font-size: 16px;
  font-weight: normal;
  cursor: pointer;
}
.page-groups .add-role-lists .form-check-input[type="checkbox"] {
  width: 20px;
  height: 20px;
}
.page-groups .add-role-skeleton .skeleton {
  display: inline-block;
  width: 80%;
  height: 1.5rem;
}
.page-groups .view-role-dropdown-modal .add-role-list-container {
  height: 643px; 
}
.page-groups .view-user-modal-groups,
.page-roles .view-user-modal-roles
 {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: rgba(
    0,
    0,
    0,
    0.5
  ) !important; /* Adds a dark overlay background */
}

.page-groups .view-user-modal-groups .modal-dialog,
.page-roles .view-user-modal-roles .modal-dialog
 {
  max-width: 100vw !important;
  height: 98vh !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-groups .modal-user-table-group-content .dataTables_scrollBody {
  height: 501px !important;
  overflow-y: auto !important;
}
.page-groups .view-user-modal-groups .modal-dialog,
.page-roles .view-user-modal-roles .modal-dialog
 {
  max-width: 100vw !important;
  height: 98vh !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-groups .view-user-modal-groups .modal-content,
.page-roles .view-user-modal-roles .modal-content
 {
  width: 99vw !important; /* Card width */
  height: 98vh !important; /* Adjust height */
  background: #fff !important;
  border-radius: 10px !important; /* Card-like rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important; /* Card shadow */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.page-groups .view-user-modal-groups .modal-header,
.page-roles .view-user-modal-roles .modal-header
 {
  padding: 15px !important;
  font-size: 18px;
  font-weight: bold;
}
.page-groups .view-user-modal-groups .modal-body,
.page-roles .view-user-modal-roles .modal-body
 {
  flex-grow: 1;
  overflow-y: auto;
  padding: 20px !important;
}

.page-groups
  .modal-user-table-group-content
  td:first-child
  .form-check
  .form-check-input,
  .page-roles
  .modal-user-table-role-content
  td:first-child
  .form-check
  .form-check-input {
  outline: 0;
  border: solid 2px #00000099;
  box-shadow: none;
  width: 20px;
  height: 20px;
}

.page-groups
  .modal-user-table-group-content
  th:first-child
  .form-check
  .form-check-input,
  .page-roles
  .modal-user-table-role-content
  th:first-child
  .form-check
  .form-check-input {
  outline: 0;
  border: solid 2px #626262;
  box-shadow: none;
  width: 16px;
  height: 16px;
}
.page-groups .view-perspectives-modal,
.page-users .view-perspectives-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5) !important; /* Adds a dark overlay background */
}

.page-groups .view-perspectives-modal .modal-dialog {
  max-width: 100vw !important;
  height: 98vh !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-groups .view-perspectives-modal .view-perspectives-modal-content, 
.page-users .view-perspectives-modal .view-perspectives-modal-content {
  height: 494px;
}
.page-groups .view-perspectives-modal .modal-dialog, 
.page-users .view-perspectives-modal .modal-dialog {
  max-width: 65vw !important;
  height: 65vh !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-groups .view-perspectives-modal .modal-content, 
.page-users .view-perspectives-modal .modal-content {
  width: 59vw !important;  /* Card width */
  height: 79vh !important; /* Adjust height */
  background: #fff !important;
  border-radius: 10px !important; /* Card-like rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important; /* Card shadow */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.page-groups .view-perspectives-modal .modal-header, 
.page-users .view-perspectives-modal .modal-header {
    padding: 15px !important;
    font-size: 18px;
    font-weight: bold;
}
.page-groups .view-perspectives-modal .modal-body, 
.page-users .view-perspectives-modal .modal-body {
  flex-grow: 1;
  overflow-y: auto;
  padding: 20px !important;
}

.page-groups .btn-blue,
.page-roles .btn-blue ,
.page-users .btn-blue  {
  border-radius: 4px !important;
  background-color: #2760ea;
  color: white;
}
.page-users #exportBtn {
  width: 114px;
  height: 40px;
  background-color: transparent;
  color: #555;
  border: 1px solid #DBDBDB;
}
.page-groups .btn-blue:hover,
.page-roles .btn-blue:hover,
.page-users .btn-blue:hover {
  color: white;
}
.page-users .anchor-blue,
.page-groups .anchor-blue,
.page-roles .anchor-blue {
  color: #2760EA;
  cursor: pointer;
}

.page-groups .perspectives-tag,
.page-users .perspectives-tag {
  display: inline-block;
  padding: 5px 10px;
  margin: 5px;
  color: #333;
  border-radius: 6px;
  border: 1px solid var(--border-1, rgba(0, 0, 0, 0.1));
  background: #f2f2f2;
}
.page-groups .perspectives-tag .remove,
.page-users .perspectives-tag .remove {
  margin-left: 1px;
  cursor: pointer;
  color: #333;
  font-weight: bold;
}

.page-groups .perspectives-tag-input {
  border: none;
  outline: none;
  width: auto;
  background: #ebebeb;
}
.page-groups .success-modal .modal-content,
.page-users .success-modal .modal-content,
.page-roles .success-modal .modal-content
 {
  width: 54%;
  border-radius: 16px;
}
.page-groups .success-modal .modal-dialog,
.page-users .success-modal .modal-dialog, 
.page-roles .success-modal .modal-dialog 
{
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-groups .skeleton-container,
.page-users .skeleton-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.page-groups .skeleton-tags-container,
.page-users .skeleton-tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.page-groups .skeleton-badge,
.page-users .skeleton-badge {
  width: 200px;
  height: 34px;
  background-color: #ccc;
  border-radius: 20px;
}
.page-groups .skeleton-tags,
.page-users .skeleton-tags {
  width: 143px;
  height: 23px;
  background-color: #ccc;
  border-radius: -5px;
}
.page-groups .select-container,
.page-users .select-container,
.page-roles .select-container
 {
  display: inline-block;
  min-width: 100px; /* Set a minimum width if needed */
}

.page-groups .select-container select,
.page-users .select-container select,
.page-roles .select-container select
 {
    width: 144px;
    border: 1px solid #DBDBDB;
    border-radius: 8px;
    font-size: 1em;
    padding: 12px 16px 12px 12px !important;
}
.page-groups .select-container select option,
.page-users .select-container select option,
.page-roles .select-container select option
 {
    padding: 8px 20px; /* Padding for items */
    color: #333; /* Text color */
    font-size: 14px; /* Font size */
    transition: background-color 0.2s; /* Smooth hover effect */
}
.page-users .select-container select:focus,
.page-roles .select-container select:focus,
.page-groups .select-container select:focus {
  box-shadow: none;
}

.page-users .card-body,
.page-roles .card-body,
.page-groups .card-body {
  background-color: none !important;
}

.page-users .text-grey, 
.page-roles .text-grey, 
.page-groups .text-grey {
    color: #7D7D7D;
}

/* Search box container */
.page-users .search-container,
.page-roles .search-container,
.page-groups .search-container {
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 10px; 
  padding: 12px 22px 12px 14px;
  width: 300px;
  background-color: white;
}

.page-users .search-icon,
.page-roles .search-icon ,
.page-groups .search-icon  {
  font-size: 18px;
  color: gray;
  margin-right: 10px;
}

.page-users .search-input,
.page-roles .search-input,
.page-groups .search-input {
  border: none;
  outline: none;
  font-size: 14px;
  width: 100%;
}

.page-users .search-input::placeholder,
.page-roles .search-input::placeholder,
.page-groups .search-input::placeholder  {
  font-weight: 500px;
  color: black;
}
.page-users .btn-blue {
  border-radius: 4px !important;
  background-color: #2760ea;
  color: white;
}
.page-users .btn-blue:hover {
  color: white;
}
.page-users .anchor-blue {
  color: #2760ea;
  cursor: pointer;
}
.page-users .nav-pills .nav-link {
  color: #6c757d;
}

.users-tabs .nav-pills .nav-link.active,
.roles-tabs .nav-pills .nav-link.active  {
  color: #386DFF;
}

.users-tabs .nav-pills .nav-link.completed .step-icon,
.roles-tabs .nav-pills .nav-link.completed .step-icon  {
  color: #386DFF;
}
.page-users .step-circle,
.page-roles .step-circle {
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
}

.page-users .step-number,
.page-roles .step-number {
  font-size: 16px;
  color: #b3b3b3;
  padding: 9px;
}

.page-users .nav-pills .nav-link .step-icon,
.roles-tabs .nav-pills .nav-link .step-icon {
  display: inline-block;
  width: 20px;
  text-align: center;
  margin-right: 5px;
}

.page-users .nav-tabs .nav-link,
.roles-tabs .nav-tabs .nav-link {
  color: #B3B3B3; 
  border: none; 
}

.page-users .nav-tabs .nav-link.active, 
.roles-tabs .nav-tabs .nav-link.active {
  color: #386DFF; 
  background-color: transparent; 
  border: none !important; 
}
.roles-tabs .nav-tabs .nav-link.active:focus {
  outline: none !important;
}

.page-users .finops-nav-tabs a:not(.active),
.page-roles .finops-nav-tabs a:not(.active) {
    border: 0px !important;
    color: #B3B3B3 !important;
}
.page-users #inputEmails {
  background-color: #e6e6e6;
  display: flex;
  height: 260px;
  flex-wrap: wrap;
  padding: 22px 23px 22px 15px;
  align-content: flex-start;
  gap: 12px;
}

.page-users .email-badge {
  display: inline-block;
  background-color: white;
  border-radius: 4px;
  margin: 2px;
  font-size: 14px;
  color: #333;
  position: relative;
  user-select: none;
  display: flex;
  padding: 12px 16px 12px 12px;
  justify-content: center;
  align-items: center;
  gap: 12px;
}
.page-users .email-users-badge {
  display: inline-block;
  background-color: #f5f5f5;
  border-radius: 4px;
  margin: 2px;
  font-size: 14px;
  color: #333;
  position: relative;
  user-select: none;
  padding: 12px 16px 12px 12px;
  gap: 12px;
}

.page-users .email-badge .remove-badge,
.page-users .email-users-badge .remove-badge {
  font-weight: bold;
  cursor: pointer;
}
.page-users .badge {
  background-color: #EBEBEB;
  padding: 2px 10px;
}

.page-users #inputEmails {
  cursor: text;
}
.page-users .outline-button {
  display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 12px 24px 12px 16px;
      border: 1px solid #2960F5;
      border-radius: 5px;
      background-color: white;
      color: #2960f5;
      font-size: 14px;
      font-weight: 500;
      text-decoration: none;
      cursor: pointer;
      transition: background-color 0.3s, color 0.3s;
      width: 197px;
      gap: 10px;
}

.page-users #prevButton,
.page-roles #prevRoleButton {
   border: 1px solid grey; 
   font-weight: 500; 
   color: #555;
.page-users .text-grey {
  color: #7d7d7d;
}
}
.page-users #nextButton {
  width: 80px;
}
.page-users #prevButton:focus {
  box-shadow: none;
}

.page-users .table-res-content .dataTables_scrollBody,
.page-roles .table-res-content .dataTables_scrollBody{
  height: 611px;
  background-color: white;
  overflow-y: auto !important;
  overflow: none !important;
}
.page-roles .modal-users-table-list .dataTables_scrollBody {
  height: 545px;
}
.page-roles .role-details-table-list .dataTables_scrollBody {
  height: 339px;
}
.page-roles #DataTables_Table_0_wrapper > div > div.dataTables_scrollBody {
  height: 565px;
}
.page-users .search-input::placeholder {
  color: #666666;
  font-weight: 100;
}

.page-users .nav-link.disabled {
  pointer-events: none;
  opacity: 0.5;
  cursor: not-allowed;
}
.page-users .blue-tag .close-btn .close-icon path{
  margin-left: 12px;
  stroke: #3B5AFE; /* blue color */
  transition: stroke 0.2s;
  cursor: pointer;
  transition: color 0.3s ease;
  width: 9.995px;
  height: 10px;
}
.page-users .blue-tag .close-btn .close-icon:hover path {
  stroke: #FF0000; /* red on hover */
}

.page-users .inherited-tag,
.page-groups .inherited-tag {
    display: inline-flex ;
    align-items: center;
    background-color: rgba(245, 245, 245, 0.70);
    color: #666;
    border:1px solid var(--Greys-Grey-5, #B3B3B3);
    border-radius: 40px;
    font-size: 14px;
    padding: 12px 20px;
    cursor: pointer;
    margin-top: 20px;
    transition: all 0.3s ease-in-out;
    gap: 10px;
}
.page-users .edit-user-data {
  width: 40px;
  cursor: pointer;
}

.page-users .perspective-dropdown {
  min-width: 174px;
  max-width: 300px;
  overflow: hidden;
  white-space: nowrap; 
  text-overflow: ellipsis; 
  background-color: white; 
  padding: 12px 16px 12px 12px;
  border: 1px solid #DBDBDB; 
  border-radius: 8px;
  margin-left:8px;
  margin-bottom: -19px;
}
.page-groups .want-to-delete {
  white-space: normal; /* Allow text to wrap */
  overflow: visible; /* Ensure overflow is visible */
  max-width: none; /* Remove any max-width constraints */
} 
.page-groups .view-role-dropdown-modal .modal-content {
  border-radius: 0px;
}
.page-groups .remove,
.page-users .remove {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: 5px;
  display: flex;
  align-items: center;
}

.page-groups .tag-loader {
  border: 8px solid #f3f3f3; /* Light grey */
  border-top: 8px solid black; /* Black */
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: tag-loader 1s linear infinite;
  margin: auto; /* Center the loader */
  display: block; /* Ensure it's a block element */
}

@keyframes tag-loader {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.page-groups .groups-content, 
.page-groups .roles-content, 
.page-groups .perspectives-content {
  border: 1px solid var(--border-1, rgba(0, 0, 0, 0.10));
  padding: 24px 24px 30px 24px;
}
.page-groups .roles-content, 
.page-groups .perspectives-content {

}

.page-users .groups-content, 
.page-users .roles-content, 
.page-users .perspectives-content {
  border: 1px solid var(--border-1, rgba(0, 0, 0, 0.10));
  padding: 24px 24px 30px 24px;
}
.page-users .roles-content, 
.page-users .perspectives-content {
  margin-top: 28px;
}
.page-groups .roles-content, 
.page-groups .perspectives-content {
  margin-top: 28px;
}

.page-users .profile-content,
.page-groups .profile-content  {
  min-height: 300px; 
  max-height: 526px;
  overflow-y: auto; 
  overflow-x: hidden;
  padding-right: 10px; 

}
.page-users .profile-content::-webkit-scrollbar,
.page-groups .profile-content::-webkit-scrollbar,
.page-users .table-res-content .dataTables_scrollBody::-webkit-scrollbar,
.page-groups .modal-user-table-group-content .dataTables_scrollBody::-webkit-scrollbar,
.page-roles .modal-user-table-role-content .dataTables_scrollBody::-webkit-scrollbar {
  width: 8px; /* Width of the scrollbar */

}

.page-users .profile-content::-webkit-scrollbar-track,
.page-groups .profile-content::-webkit-scrollbar-track, 
.page-users .table-res-content .dataTables_scrollBody::-webkit-scrollbar-track,
.page-groups .modal-user-table-group-content .dataTables_scrollBody::-webkit-scrollbar-track,
.page-roles .modal-user-table-role-content .dataTables_scrollBody::-webkit-scrollbar-track {
  background: #f1f1f1; /* Background of the scrollbar track */
  border-radius: 10px; /* Rounded corners */
}

.page-users .profile-content::-webkit-scrollbar-thumb,
.page-groups .profile-content::-webkit-scrollbar-thumb,
.page-users .table-res-content .dataTables_scrollBody::-webkit-scrollbar-thumb,
.page-groups .modal-user-table-group-content .dataTables_scrollBody::-webkit-scrollbar-thumb,
.page-roles .modal-user-table-role-content .dataTables_scrollBody::-webkit-scrollbar-thumb {
  background: #888; /* Color of the scrollbar thumb */
  border-radius: 10px; /* Rounded corners */
}
.page-azure-reports .btn-groups {
  gap: 16px !important;
}

.page-users .profile-content::-webkit-scrollbar-thumb:hover,
.page-groups .profile-content::-webkit-scrollbar-thumb:hover,
.page-users .table-res-content .dataTables_scrollBody::-webkit-scrollbar-thumb:hover,
.page-groups .modal-user-table-group-content .dataTables_scrollBody::-webkit-scrollbar-thumb:hover,
.page-roles .modal-user-table-role-content .dataTables_scrollBody::-webkit-scrollbar-thumb:hover {
  background: #555; /* Color on hover */
}

.page-roles .dataTables_wrapper.no-footer .dataTables_scrollBody {
  border-bottom: none !important;
}
.page-roles .view-user-modal-roles-content {
  height: 665px;
}
.page-roles #roleName {
  background-color: #EDEDED;
  border-radius: 16px;
}
.page-roles #roleDescription {
  background-color: #EDEDED;
  border-radius: 16px;
}
.page-roles #roleName::placeholder,
.page-groups #groupName::placeholder {
  color: #555;
  line-height: 20px;
  font-size: 14px;
}
.page-roles #roleDescription::placeholder,
.page-groups #groupDescription::placeholder {
  color: #555;
  line-height: 20px;
  font-size: 14px;
}

.module-tabs .nav-link {
  background-color: #fff !important;
  color: #4C4C4C !important;
  font-weight: 500;
}
.module-tabs .nav-link.active {
  background-color: #2960F5 !important;
  color: #fff !important;
  font-weight: 500;
  outline: none;
}
.page-roles .module-tabs ul {
  background: none !important;
  position: unset !important;
  z-index: auto;
}
.page-roles .module-list > button {
  border-radius: 5px;
  margin-right: 6px;
}
.page-roles .module-list > button:focus {
  outline: none;
}

.page-roles .module-card .card-title h4 {
  color: #666;
  font-weight: 18px;
}
/* Container for toggle and text */
.page-roles .toggle-container {
  display: inline-flex;
  align-items: center;
  gap: 8px;  /* Space between toggle and text */
}

/* Toggle switch styles */
.page-roles .toggle-container .switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

.page-roles .toggle-container .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.page-roles .toggle-container .slider {
  position: absolute;
  /* cursor: pointer; */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #E2E8F0;
  transition: .4s;
}

.page-roles .toggle-container .slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: .3s;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.page-roles .toggle-container input:checked + .slider {
  background-color: rgba(41, 96, 245, 0.9);
}

.page-roles .toggle-container input:checked + .slider:before {
  transform: translateX(26px);
}

.page-roles .slider.round {
  border-radius: 34px;
}

.page-roles .slider.round:before {
  border-radius: 50%;
}

/* Text style */
.page-roles .toggle-text {
  font-size: 14px;
  color: #4C4C4C;
  font-weight: 500;
  padding-bottom: 9px;
}
.page-roles .accordion-button {
  width: 10px !important;
  height: 10px !important;
  padding: 0;
  background: none;
  border: none;
  box-sizing: border-box;
  transition: transform 0.3s ease;
}

.page-roles .accordion-button:not(.collapsed) {
  background: none;
  box-shadow: none;
}

.page-roles .accordion-button::after {
  width: 1.25rem;
  height: 1.25rem;
  background-size: 1.25rem;
  margin-left: 0;
  margin-bottom: 3px;
}

/* Smooth transition for collapse */
.page-roles .collapse {
  transition: height 0.3s ease;
}
.page-roles .module-content {
  height: 489px;
  overflow: auto;
  background-color: none !important;
}

/* Webkit Browsers (Chrome, Safari) */
.page-roles .module-content::-webkit-scrollbar {
  width: 8px; /* Width of the scrollbar */
}

.page-roles .module-content::-webkit-scrollbar-track {
  background: #f1f1f1; /* Background of the scrollbar track */
  border-radius: 10px;
}

.page-roles .module-content::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
}

.page-roles .module-content::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

/* Firefox */
.page-roles .module-content {
  scrollbar-width: thin;
}
.page-roles .module-content .section-header {
  transition: box-shadow 0.3s ease;
  border: 1px solid #0000001a;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  height: 65px;
  display: flex;
  align-items: center;
}
.section-header.shadow {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.page-roles .module-content .section-header h5 {
  color: #4C4C4C;
  font-size: 16px;
}
.page-roles .module-content .section-pages {
  border: 1px solid #0000001a;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  transition: height 0.2s ease-out;
  transform: translateZ(0); 
  border-top: 0;
}
.page-roles .module-content .page-item .page-name {
  color: #333;
  font-weight: 600;
  font-size: 16px;
}
.page-roles .view-role-btn {
  all: unset;
  color: #555;
  border: 1px solid #DBDBDB;
  margin-right: 12px;
  border-radius: 4px;
  cursor: pointer;
}
.page-roles .view-role-btn.assign-users {
  padding: 8px 16px 8px 12px;
}
.page-roles .view-role-btn.icon-btn {
  padding: 6px 12px;
}
.page-roles .role-title {
  color: #4C4C4C;
  font-size: 28px;
  font-weight: 600;
  line-height: 21px;  
}
.page-roles .permission-card,
.page-roles .details-card
 {
  padding: 40px;
  gap: 32px;
  border-radius: 16px;
}
.page-roles .header-details .details-title {
  color: #4C4C4C;
  font-size: 20px;
  font-weight: 500;
  line-height: 21px; 
  margin-bottom: 16px;
}
.page-roles .header-details .details-description {
  color: #666;
  font-size: 14px;
  font-weight: 400;
  line-height: 22.4px; 
  margin-bottom: 32px;
}
.page-roles .role-groups .groups-list{
  margin-bottom: 28px;
}
.page-roles .details-border {
  border: 1px solid rgba(0, 0, 0, 0.10);
}
.page-roles .role-search {
  padding: 8px 20px 8px 12px !important;
}
/* table th:first-child{
  border-radius:10px 0 0 10px;
} */

/* .page-roles table th:last-child{
  border-radius:0 10px 10px 0 !important;
} */
.page-roles .dataTable .dataTables_scrollBody {
  overflow: none !important;
}
.page-users .copy-btn,
.page-groups .copy-btn
 {
  top: 4px;
  left: -4px;
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  outline: none;
}

.page-users .clipboard-icon,
.page-groups .clipboard-icon {
  width: 12.109px;
  height: 14.453px;
}

.page-users .tooltip-text,
.page-groups .tooltip-text
 {
  position: absolute;
  bottom: calc(100% + 12px); /* Position above the button */
  left: 50%;
  transform: translateX(-50%);
  background: #ffffff;
  color: #555555;
  padding: 8px 15px;
  font-size: 14px;
  font-weight: 400;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  opacity: this;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 10;
  white-space: nowrap;
  min-width: 70px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
}

/* Creating the triangle pointer */
.page-users .tooltip-text::after,
.page-groups .tooltip-text::after
 {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 14px;
  height: 14px;
  background-color: #ffffff;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  z-index: -1;
}

/* Show tooltip class - used by JavaScript */
.page-users .copy-btn.show-tooltip .tooltip-text,
.page-groups .copy-btn.show-tooltip .tooltip-text
{
  opacity: 1;
  visibility: visible;
  animation: fadeIn 0.2s ease forwards;
}

/* Inherited icon tooltip styling */
.inherited-btn {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.inherited-tooltip-text {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  background: #333333;
  color: #ffffff;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 1000;
  white-space: nowrap;
  visibility: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Creating the triangle pointer for inherited tooltip */
.inherited-tooltip-text::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #333333;
}

/* Show tooltip on hover */
.inherited-btn:hover .inherited-tooltip-text {
  opacity: 1;
  visibility: visible;
}

/* Animation for tooltip appearance */
 @keyframes fadeIn {
  from { opacity: 0; transform: translateX(-50%) translateY(5px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.swal2-show {
  animation: swal2-show 0.3s;
}
.swal2-hide {
  animation: swal2-hide 0.15s forwards;
}
@keyframes swal2-show {
  0% {
    transform: scale(0.9);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes swal2-hide {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.9);
    opacity: 0;
  }
}
.page-groups .groups-container.skel {
  height: 654px;
  background-color: white;
}
.page-groups .groups-container.skel {
  height: 654px;
  background-color: white;
}
.rbac-group-includes {
    height: 779px;
    overflow: auto;
}

.region-cv-filter .dropdown-menu {
  min-width: 300px;
  max-height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
}

.region-cv-filter .cv-dropdown-list {
  max-height: 300px;
  min-height: 150px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Scrollbar styling for webkit browsers */
.region-cv-filter .cv-dropdown-list::-webkit-scrollbar {
  width: 8px;
}

.region-cv-filter .cv-dropdown-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.region-cv-filter .cv-dropdown-list::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}

.region-cv-filter .cv-dropdown-list::-webkit-scrollbar-thumb:hover {
  background: #555;
}
/* Handsontable */
/* .table-container {
    min-height: 640px; 
    width: 100%;
    background-color: #fff;
} */
.table-container {
    min-height: 70vh; 
    width: 100%;     
    max-width: 100%;  
    background-color: #fff;
}
.resource-dropdown .dropdown-menu {
    min-width: 680px;
    width: auto !important;
    max-width: 100vw;
    white-space: normal;
    padding: 0 !important;
}
.sticky-top-search {
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 10;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}
.sticky-top-select-all {
    position: sticky;
    top: 58px;
    background-color: white;
    z-index: 10; 
    padding: 5px 22px;
    border-bottom: 1px solid #ddd; 
}
.sticky-bottom {
    position: sticky;
    bottom: -1px;
    background-color: white;
    z-index: 10; 
    padding: 10px;
    border-top: 1px solid #ddd; 
}
.resourceid-list-item {
    padding: 2px 38px !important;
}
.list-unstyledev {
    margin: 3px 25px;
	padding-left: 0;
    list-style: none;
}
.error-message {
    margin-top: 5px;
    font-size: 12px;
    color: #e53e3e;
}
.rb-button {
    display: flex;
    height: 39px;
    padding: 12px 20px;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    background: #2760EA;
}
.excel-view-dropdowns {
    border-radius: 8px;
    border: 1px solid var(--Border-onSurface-Enabled, #DBDBDB);
    background: #FFF;
    display: flex;
    height: 44px;
    padding: 12px 16px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
} 
.excel-view-dropdown-apply-button {
    border-radius: 5px;
    background: var(--Primary-Blue, #2960F5);
    padding: 6px 16px;
    color: var(--White, #FFF);
}
.excel-view-dropdown-cancel-button {
    border-radius: 5px;
    background: var(--Greys-Grey-7, #E6E6E6);
    padding: 6px 16px;
}
.data-column-item {
    padding-bottom: 8px;
}
/* .page-aws-reports-excelview .main-content,
.page-aws-reports-excelview .page-content {
    margin-left: 0 !important;
    padding: 0 !important;
} */
.chipev {
    display: inline-flex;
    align-items: center;
    background-color: #f1f1f1;
    padding: 5px 10px;
    margin: 5px;
    border-radius: 8px;
    font-size: 14px;
}

.chip-labelev {
    margin-right: 8px;
}

.chip-remove-btnev {
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    color: #ff0000;
}

.filter-chips-containerev {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.btn-confirm {
	background: var(--Fill-Primary-Enabled, #2760EA);
	color: white;
}
.btn-cancel {
    background: #FFF;
    color: #000;
	border-radius: 4px;
	border: 1px solid var(--Border-onSurface-Enabled, #DBDBDB);	
}
.swal2-actions {
    flex-direction: row-reverse; 
}

.handsontable .htDropdownMenu table.htCore {
	width: 300px !important;
}

/* .htUIMultipleSelectHot {
	height: 300px !important;
}

.wtHolder {
	height: 300px !important;
} */
.htUIMultipleSelectHot {
    height: 300px !important;
    overflow-y: auto; /* Ensure it's scrollable */
}

/* Only apply this height to .wtHolder elements that are children of .htUIMultipleSelectHot */
.htUIMultipleSelectHot > .wtHolder { /* '>' makes it a direct child, or use a space for any descendant */
    height: 100% !important; /* Make it fill its parent .htUIMultipleSelectHot */
}

/*
Remove or comment out your original overly broad .wtHolder rule:
.wtHolder {
	height: 300px !important;
}
*/
/* Handsontable */

/* Firefox scrollbar */
.region-cv-filter .cv-dropdown-list {
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1;
}

/* Gopika Budgets CSS starting here */

.page-azure-budgets .import-budget-btn {
  position: absolute;
  right: 230px;
  background: rgba(39, 96, 234, 0.10);
  color: #2960F5;
  border: none;
  border-radius: 8px;
  padding: 12px 12px 12px 16px;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.page-azure-budgets .import-budget-btn:hover {
  color: #2960F5;
}

.page-azure-budgets .spinner-black
{
border: 4px solid rgba(243, 243, 243, 0.3); 
border-top: 4px solid #000000; 
border-radius: 50%;
width: 40px;
height: 40px;
animation: budgets-spin 0.8s linear infinite;
}
@keyframes budgets-spin {
 0% { transform: rotate(0deg); }
 100% { transform: rotate(360deg); }
}
.page-azure-budgets #loader-container
{
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, 0.5); 
 display: flex;
 justify-content: center;
 align-items: center;
 z-index: 99999; 
}
/* Azure Budgets */
.page-azure-budgets .nav-tabs .nav-link {
	color: #737373;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 21px; /* 131.25% */
	border: 0px;
	background: none;
}
.page-azure-budgets .nav-tabs .nav-link.active {
	border-bottom: 1px solid #2760EA;
	color: #2760EA;
}
.page-azure-budgets .create-budget-btn {
	position: absolute;
	right: 15px;
	font-size: 16px;
	font-style: normal;
	line-height: 20px;
	background-color: #2760EA!important;
	border-color: #2760EA;
  padding: 12px 12px 12px 16px;
}
.page-azure-budgets .budgets-search-block {
	margin-bottom: 30px;
}
.page-azure-budgets .budgets-search-block .input-group input {
	padding: 12px 22px 12px 14px;
	border: 0;
	border: 1px solid #D9D9D9;
	border-left: 0px;
}
.page-azure-budgets .budgets-search-block .input-group .input-group-text {
	background: #fff;
	padding: 12px 5px 12px 14px;
	border: 1px solid #D9D9D9;
	border-right: 0px;
}
.page-azure-budgets .budgets-search-block .input-group input::placeholder {
	color: #737373;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 20px; /* 125% */
}
.page-azure-budgets .budgets-search-block .form-check {
	color: var(--black-06, rgba(0, 0, 0, 0.60));
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 24px; /* 150% */
	letter-spacing: 0.5px;
}
.page-azure-budgets .budgets-search-block .form-check-input:checked {
	background-color: #2760EA;
	border-color: #2760EA;
}
.page-azure-budgets .budgets-search-block .form-select {
	border-radius: 12px;
	border: 1px solid #DBDBDB;
	display: flex;
	height: 48px;
	padding: 12px 16px 12px 24px;
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
	box-shadow: none;
}
.page-azure-budgets .my-budgets-table th {
	color: #292929;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 21px; /* 150% */
	padding: 25px 30px;
}
.page-azure-budgets .my-budgets-table td {
	color: #292929;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 21px; /* 150% */
	padding: 24px 30px;
	border: 0px;
	vertical-align: middle;
}
.page-azure-budgets .my-budgets-table td:first-child a {
	color: #2760EA;
	font-weight: 500;
}
.page-azure-budgets .my-budgets-table thead tr {
	box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.12) inset;
}
.page-azure-budgets .my-budgets-table tbody tr {
	box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.12) inset;
}
.page-azure-budgets .my-budgets-table tbody tr:last-child {
	/* box-shadow: none; */
}
.page-azure-budgets .my-budgets-table.no-footer {
	border-bottom: 0px!important;
}
.page-azure-budgets .dataTables_wrapper.no-footer .dataTables_scrollBody {
	border-bottom: 0px!important;
}
.page-azure-budgets .my-budgets-table .action-btn {
	box-shadow: none;
	border-radius: 16.8px;
	background: #F7F7F7;
	width: 36.002px;
	height: 36px;
}
.page-azure-budgets .my-budgets-table .progress-container {
	border-radius: 12px;
	position: relative;
	height: 8px;
	padding: 0 !important;
}
.page-azure-budgets .my-budgets-table .progress-container.bg-success-light {
	background: rgba(76, 175, 80, 0.15);
}
.page-azure-budgets .my-budgets-table .progress-container.bg-warning-light {
	background: rgba(255, 178, 25, 0.15);
}
.page-azure-budgets .my-budgets-table .progress-container.bg-danger-light {
	background-color: #ff411212;
}
.page-azure-budgets .my-budgets-table .progress {
	width: 0;
	transition: width 0.4s linear;
	position: relative;
	height: 8px;
	border-radius: 12px;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}
.page-azure-budgets .my-budgets-table .percentage {
	position: absolute;
	bottom: 15px;
	left: 10px;
	transform: translateX(-50%);
	text-align: center;
	transition: left 0.4s linear;
	color: #292929;
	font-size: 12px;
	font-style: normal;
	font-weight: 500;
	line-height: 15px; /* 125% */
	width: 70px;
}
.page-azure-budgets .my-budgets-table .percentage:after {
	content: "";
	position: absolute;
	bottom: 0px;
	right: 35px;
	height: 25px;
	width: 1px;
	transform: translateY(30%);
	top: 30%;
	z-index: 9;
}
.page-azure-budgets .my-budgets-table .progress.bg-success {
	background-color: #5BD160!important;
}
.page-azure-budgets .my-budgets-table .progress.bg-warning {
	background-color: #FFB219!important;
}
.page-azure-budgets .my-budgets-table .progress.bg-danger {
	background-color: #FF4112!important;
}
.page-azure-budgets .my-budgets-table .text-success {
	color: #4CAF50!important;
}
.page-azure-budgets .my-budgets-table .text-warning {
	color: #EBA10F!important;
}
.page-azure-budgets .my-budgets-table .text-danger {
	color: #FF4112!important;
}
.page-azure-budgets .my-budgets-table .percentage.success:after {
	background: #5BD160;
}
.page-azure-budgets .my-budgets-table .percentage.warning:after {
	background: #FFB219;
}
.page-azure-budgets .my-budgets-table .percentage.danger:after {
	background: #FF4112;
}

.page-azure-budgets .accordion-collapse td small {
	color: #666;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 19.2px; /* 137.143% */
	margin-bottom: 5px;
	display: inline-block;
}
.page-azure-budgets .accordion-collapse td h6 {
	color: #292929;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 25.6px; /* 160% */
	margin-bottom: 0;
}
.page-azure-budgets .accordion-collapse td p {
	color: #333;
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
	line-height: 19.2px;
	margin-bottom: 0;
}
.page-azure-budgets .my-budgets-table tr[aria-expanded="true"] {
	background: #FAFAFA;
	box-shadow: none!important;
}
.page-azure-budgets .my-budgets-table .accordion-collapse {
	background: #FAFAFA;
}
.page-azure-budgets .my-budgets-table .accordion-toggle {
	cursor: pointer;
}
.page-azure-budgets .my-budgets-table .expand-btn {
	box-shadow: none;
}	
.page-azure-budgets .my-budgets-table .expand-btn:after {
	position: absolute;
	top: 50%;
	transform: translate(0, -50%);
	content: "\f107";
	font-family: 'Font Awesome 5 Pro';
	border-radius: 16.8px;
	background: var(--C7-Lighter, #F0F0F0);
	width: 26.25px;
	text-align: center;
	font-size: 17px;
	display: block;
}
.page-azure-budgets .my-budgets-table tr[aria-expanded="true"] .expand-btn:after {
	content: "\f106";
}

.page-azure-budgets .pagination button {
	width: 40px;
	font-size: 20px;
	color: #0000008A;
}
.page-azure-budgets .pagination select {
	outline: none;
}
.page-azure-budgets .toast {
	box-shadow: 0px 24px 32px 0px rgba(0, 0, 0, 0.04), 0px 16px 24px 0px rgba(0, 0, 0, 0.04), 0px 4px 8px 0px rgba(0, 0, 0, 0.04), 0px 0px 1px 0px rgba(0, 0, 0, 0.04);
	background-color: #fff;
	width: 400px;

}

/*Gopika Budgets CSS end */
/* Azure Refactor Reports */
.page-azure-reports .finops-nav-tabs {
  margin-bottom: 24px;
  font-family: "Work Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: -0.3px;
  border-bottom: none !important;
 }
 .page-azure-reports .search-report .search-container {
  display: flex;
  width: 300px;
  height: 44px;
  padding: 12px 22px 12px 14px;
  align-items: center;
  display: flex;
  font-size: 14px;
  align-items: center;
  background: #fff;
  border-radius: 8px;
  border: 1px solid var(--Greys-Grey-7, #E6E6E6);
}
 .page-azure-reports .search-report .search-container:placeholder {
}
 .page-azure-reports .search-report .search-icon {
  display: flex;
  align-items: center;
  margin-right: 12px;
}
 .page-azure-reports .search-report .search-input {
  border: none;
  outline: none;
  font-size: 14px;
  color: #333;
  background: transparent;
  width: 100%;
  color: var(--Greys-Grey-4, #666);
}
 .page-azure-reports .finops-nav-tabs a:not(.active) {
  color: var(--greys-grey-45, #8C8C8C);
  font-family: "Work Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 21px; /* 131.25% */
  letter-spacing: -0.3px;
 }
.page-azure-reports .finops-nav-tabs a.active {
  border-bottom: 1.5px solid !important;
  border-top: 0px;
  padding-bottom: 8px !important;
  border-right: 0px;
  border-left: 0px;
  font-weight: 400;
  color: #2760ea;
}
.page-azure-reports .azure-report-card {
  width: auto;
  height: 198px;
  display: flex;
  padding: 20px 0px 24px 0px;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  flex: 1 0 0;
  align-self: stretch;
  border-radius: 8px;
  border: 1px solid #E8EFFE;
  background: #FBFCFF;
  transition: box-shadow 0.3s;
  box-shadow: none;
}
.page-azure-reports .azure-report-card:hover {
  /* box-shadow: 0 4px 20px rgba(60,72,88,0.18); */
  box-shadow: 0px 10px 24px 10px rgba(149, 151, 153, 0.05);
}
.page-azure-reports .azure-report-card:hover .report-title {
  text-decoration: underline;
}
.page-azure-reports .azure-report-card .report-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  font-size: 16px;
 }
.page-azure-reports .azure-report-card .card-body {
  display: flex;
  padding: 0px 20px;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
 }
 .page-azure-reports .truncate-2-lines {
  display: -webkit-box;
  -webkit-line-clamp: 2;   /* Number of lines to show */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
 }
 .page-azure-reports .azure-report-card .card-body .circle-wrapper {
  display: flex;
  width: 42px;
  height: 42px;
  margin-bottom: 5px;
  justify-content: center;
  align-items: center;
  gap: 9.825px;
  border-radius: 42px;
  border: 1.105px solid rgba(0, 0, 0, 0.10);
  background: #FFF;
  box-shadow: 0px 5px 10px -2px rgba(39, 96, 234, 0.05);
 }
.page-azure-reports .azure-report-card .report-text {
  color: var(--Greys-Grey-4, #666);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px; 
  letter-spacing: -0.042px;
 }
 .page-azure-reports .skeleton-row-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* space between cards */
  justify-content: flex-start;
}
.page-azure-reports .skeleton-card {
  flex: 0 0 calc(25% - 20px); /* 4 per row, minus gap */
  margin-bottom: 20px;
}
.page-azure-reports @media (max-width: 1200px) {
  .skeleton-card { flex: 0 0 calc(33.333% - 20px); }
}
.page-azure-reports @media (max-width: 900px) {
  .skeleton-card { flex: 0 0 calc(50% - 20px); }
}
.page-azure-reports @media (max-width: 600px) {
  .skeleton-card { flex: 0 0 100%; }
}
.page-azure-reports .btn-blue {
  border-radius: 4px;
  color: #fff;
  background: var(--Primary-Blue, #2960F5);
}
.page-azure-reports .btn-blue:hover {
  color: #fff;
}
.page-azure-reports .btn-white {
  border-radius: 4px;
  padding: 10px 14px;
  border: 1px solid var(--Border-onSurface-Enabled, #DBDBDB);
}
/* Report queue */
.page-azure-reports #reportQueueForm,
.page-aws-reports #reportQueueForm
 {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.10);
}

.page-azure-reports #reportsTable table.dataTable,
.page-azure-reports #reportsTable table,
.page-aws-reports #reportsTable table.dataTable,
.page-aws-reports #reportsTable table
 {
  width: 100%;
  border-collapse: collapse;
}

.page-azure-reports table.dataTable thead,
.page-azure-reports table thead,
.page-aws-reports table.dataTable thead,
.page-aws-reports table thead
 {
  background-color: #F5F7FC;
  border-bottom: 1px solid #e9ecef;
}
.page-azure-reports .btn-groups,
.page-aws-reports .btn-groups
 {
  gap: 16px !important;
}

.page-azure-reports table.dataTable th,
.page-azure-reports table th,
.page-aws-reports table.dataTable th,
.page-aws-reports table th
 {
  padding: 16px 30px;
  text-align: left;
  font-weight: 500;
  font-size: 14px;
  color: #292929;
}
.page-azure-reports .reports-table,
.page-aws-reports .reports-table
 {
  width: 100% !important;
}

.page-azure-reports table.dataTable td,
.page-azure-reports table td,
.page-aws-reports table.dataTable td,
.page-aws-reports table td
 {
  padding: 14px 30px;
  border-bottom: 1px solid #e9ecef;
  font-size: 14px;
  color: #212529;
}
.page-azure-reports table.dataTable td .icon-wrapper,
.page-azure-reports table td .icon-wrapper,
.page-aws-reports table.dataTable td .icon-wrapper,
.page-aws-reports table td .icon-wrapper
 {
  padding: 4px;
  border-radius: 4px;
  border: 1px solid var(--Greys-Grey-7, #E6E6E6);
  cursor: pointer;
}
.page-azure-reports .dataTables_scrollHeadInner,
.page-aws-reports .dataTables_scrollHeadInner
 {
  width: 100% !important;
}

.page-azure-reports tr:last-child td,
.page-aws-reports tr:last-child td
 {
  border-bottom: none;
}

.page-azure-reports .checkbox,
.page-aws-reports .checkbox
 {
  width: 16px;
  height: 16px;
  border: 1px solid #ced4da;
  border-radius: 3px;
  cursor: pointer;
  margin: 0;
}
.page-azure-reports .dataTables_scrollBody,
.page-aws-reports .dataTables_scrollBody
 {
  border-bottom: 1px solid rgba(149, 151, 153, 0.10) !important;
}

.page-azure-reports .checkbox:checked {
  background-color: #007bff;
  border-color: #007bff;
}

/* Skeleton loading styles */
.page-azure-reports  .skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
  border-radius: 4px;
}

@keyframes loading {
  0% {
      background-position: 200% 0;
  }
  100% {
      background-position: -200% 0;
  }
}

.page-azure-reports .skeleton-text {
  height: 16px;
}

.page-azure-reports .skeleton-status {
  height: 24px;
  width: 80px;
  border-radius: 12px;
}

.page-azure-reports .skeleton-checkbox {
  width: 16px;
  height: 16px;
  border-radius: 3px;
}

.page-azure-reports .skeleton-icon {
  width: 16px;
  height: 16px;
  border-radius: 2px;
}

.page-azure-reports .table-action-btn:hover,
.page-azure-reports .table-action-btn:focus {
  background-color: transparent !important;
}
.page-azure-reports .table-action-btn.btn-outline-danger {
  color: #EF4444 !important;
  border-color: #EF4444 !important;
}
.page-azure-reports .table-action-btn.btn-outline-secondary {
  color: #555 !important;
}
.page-azure-reports .status-wrapper {
  padding: 4px 12px;
  gap: 10px;
  border-radius: 12px;
  justify-content: center;
}
.page-azure-reports .status-wrapper span {
  font-weight: 500;
}
/* Scroll bar for report queue */
.page-azure-reports ::-webkit-scrollbar {
  width: 10px;
  background: #f5f5f5;
  border-radius: 8px;
}

.page-azure-reports ::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #bdbdbd 0%, #757575 100%);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(120, 120, 120, 0.15);
}

.page-azure-reports ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #757575 0%, #bdbdbd 100%);
}

/* For Firefox */
.page-azure-reports {
  scrollbar-width: thin;
  scrollbar-color: #bdbdbd #f5f5f5;
}
.page-azure-reports .warning-message {
  color: var(--Semantics-Error-R4, #B31827);
  font-family: "Work Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px; /* 157.143% */
}
/* Toggle Favorite Button Styles (Azure and AWS – same as Azure) */
.page-azure-reports .toggle-favorite-btn,
.page-aws-reports .toggle-favorite-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  border-radius: 4px;
  padding: 4px;
}

.page-azure-reports .toggle-favorite-btn .toggle-icon,
.page-aws-reports .toggle-favorite-btn .toggle-icon {
  transition: transform 0.2s ease-in-out;
  display: block;
}

.page-azure-reports .toggle-favorite-btn:active .toggle-icon,
.page-aws-reports .toggle-favorite-btn:active .toggle-icon {
  transform: scale(0.9);
}
/* aws reports */
.page-aws-reports .finops-nav-tabs {
  margin-bottom: 24px;
  font-family: "Work Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: -0.3px;
  border-bottom: none !important;
 }
 .page-aws-reports .search-report .search-container {
  display: flex;
  width: 300px;
  height: 44px;
  padding: 12px 22px 12px 14px;
  align-items: center;
  display: flex;
  font-size: 14px;
  align-items: center;
  background: #fff;
  border-radius: 8px;
  border: 1px solid var(--Greys-Grey-7, #E6E6E6);
}
 .page-aws-reports .search-report .search-container:placeholder {
}
 .page-aws-reports .search-report .search-icon {
  display: flex;
  align-items: center;
  margin-right: 12px;
}
 .page-aws-reports .search-report .search-input {
  border: none;
  outline: none;
  font-size: 14px;
  color: #333;
  background: transparent;
  width: 100%;
  color: var(--Greys-Grey-4, #666);
}
 .page-aws-reports .finops-nav-tabs a:not(.active) {
  color: var(--greys-grey-45, #8C8C8C);
  font-family: "Work Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 21px; /* 131.25% */
  letter-spacing: -0.3px;
 }
.page-aws-reports .finops-nav-tabs a.active {
  border-bottom: 3px solid !important;
  border-top: 0px;
  border-right: 0px;
  border-left: 0px;
  font-weight: 400;
  color: #2760ea;
}
.page-aws-reports .aws-report-card {
  width: auto;
  height: 198px;
  display: flex;
  padding: 20px 0px 24px 0px;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  flex: 1 0 0;
  align-self: stretch;
  border-radius: 8px;
  border: 1px solid #E8EFFE;
  background: #FBFCFF;
  transition: box-shadow 0.3s;
}
.page-aws-reports .aws-report-card:hover {
  box-shadow: 0 4px 20px rgba(60,72,88,0.18);
}
.page-aws-reports .aws-report-card:hover .report-title {
  text-decoration: underline;
}
.page-aws-reports .aws-report-card .report-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
 }
.page-aws-reports .aws-report-card .card-body {
  display: flex;
  padding: 0px 20px;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
 }
 .page-aws-reports .aws-report-card .card-body .circle-wrapper {
  display: flex;
  width: 42px;
  height: 42px;
  margin-bottom: 5px;
  justify-content: center;
  align-items: center;
  gap: 9.825px;
  border-radius: 42px;
  border: 1.105px solid rgba(0, 0, 0, 0.10);
  background: #FFF;
  box-shadow: 0px 5px 10px -2px rgba(39, 96, 234, 0.05);
 }
.page-aws-reports .aws-report-card .report-text {
  color: var(--Greys-Grey-4, #666);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px; 
  letter-spacing: -0.042px;
  display: -webkit-box;
  -webkit-line-clamp: 2;      /* Show only 2 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
 }
 .page-aws-reports .skeleton-row-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* space between cards */
  justify-content: flex-start;
}
.page-aws-reports .skeleton-card {
  flex: 0 0 calc(25% - 20px); /* 4 per row, minus gap */
  margin-bottom: 20px;
}
.page-aws-reports @media (max-width: 1200px) {
  .skeleton-card { flex: 0 0 calc(33.333% - 20px); }
}
.page-aws-reports @media (max-width: 900px) {
  .skeleton-card { flex: 0 0 calc(50% - 20px); }
}
.page-aws-reports @media (max-width: 600px) {
  .skeleton-card { flex: 0 0 100%; }
}
.page-aws-reports .btn-blue {
  border-radius: 4px;
  color: #fff;
  background: var(--Primary-Blue, #2960F5);
}
.page-aws-reports .btn-blue:hover {
  color: #fff;
}
.page-aws-reports .btn-white {
  border-radius: 4px;
  padding: 10px 14px;
  border: 1px solid var(--Border-onSurface-Enabled, #DBDBDB);
}
/* Report queue */
.page-aws-reports #reportsTable .reports-queue-aws {
  background: white;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.page-aws-reports #reportsTable table.dataTable {
  width: 100%;
  border-collapse: collapse;
}

.page-aws-reports table.dataTable thead {
  background-color: #F5F7FC;
  border-bottom: 1px solid #e9ecef;
}

.page-aws-reports table.dataTable th {
  padding: 16px 30px;
  text-align: left;
  font-weight: 500;
  font-size: 14px;
  color: #495057;
}
.page-aws-reports .reports-table {
  width: 100% !important;
}

.page-aws-reports table.dataTable td {
  padding: 14px 30px;
  border-bottom: 1px solid #e9ecef;
  font-size: 14px;
  color: #212529;
}
.page-aws-reports table.dataTable td .icon-wrapper{
  padding: 4px;
  border-radius: 4px;
  border: 1px solid var(--Greys-Grey-7, #E6E6E6);
  cursor: pointer;
}
.page-aws-reports .dataTables_scrollHeadInner {
  width: 100% !important;
}

.page-aws-reports tr:last-child td {
  border-bottom: none;
}

.page-aws-reports .checkbox {
  width: 16px;
  height: 16px;
  border: 1px solid #ced4da;
  border-radius: 3px;
  cursor: pointer;
  margin: 0;
}

.page-aws-reports .checkbox:checked {
  background-color: #007bff;
  border-color: #007bff;
}

/* Skeleton loading styles */
.page-aws-reports  .skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
  border-radius: 4px;
}

@keyframes loading {
  0% {
      background-position: 200% 0;
  }
  100% {
      background-position: -200% 0;
  }
}

.page-aws-reports .skeleton-text {
  height: 16px;
}

.page-aws-reports .skeleton-status {
  height: 24px;
  width: 80px;
  border-radius: 12px;
}

.page-aws-reports .skeleton-checkbox {
  width: 16px;
  height: 16px;
  border-radius: 3px;
}

.page-aws-reports .skeleton-icon {
  width: 16px;
  height: 16px;
  border-radius: 2px;
}

.page-aws-reports .table-action-btn:hover,
.page-aws-reports .table-action-btn:focus {
  background-color: transparent !important;
}
.page-aws-reports .table-action-btn.btn-outline-danger {
  color: #EF4444 !important;
  border-color: #EF4444 !important;
}
.page-aws-reports .table-action-btn.btn-outline-secondary {
  color: #555 !important;
}
.page-aws-reports .status-wrapper {
  padding: 4px 12px;
  gap: 10px;
  border-radius: 12px;
  display: flex;
  justify-content: center;
}
.page-aws-reports .status-wrapper span {
  font-weight: 500;
}
/* Scroll bar for report queue */
.page-aws-reports ::-webkit-scrollbar {
  width: 10px;
  background: #f5f5f5;
  border-radius: 8px;
}

.page-aws-reports ::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #bdbdbd 0%, #757575 100%);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(120, 120, 120, 0.15);
}

.page-aws-reports ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #757575 0%, #bdbdbd 100%);
}

/* For Firefox */
.page-aws-reports {
  scrollbar-width: thin;
  scrollbar-color: #bdbdbd #f5f5f5;
}
.page-aws-reports .warning-message {
  color: var(--Semantics-Error-R4, #B31827);
  font-family: "Work Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px; /* 157.143% */
}
/* aws reports */

/* Date Range Modal Css */
.analyzer-heading {
	color: #303030;
	font-family: 'Work Sans', sans-serif;
	font-size: 24px;
	font-weight: 500;
	line-height: 32px;
	letter-spacing: -0.072px;
  }
  
  .analyzer-text {
	color: #303030;
	font-family: 'Work Sans', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: normal;
	letter-spacing: -0.048px;
  }
  
  .analyzer-label {
	color: #303030;
	font-family: 'Work Sans', sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: normal;
	letter-spacing: -0.048px;
  }
  
  .provider-card {
	display: flex;
	padding: 0px 16px;
	align-items: center;
	gap: 16px;
	flex: 1 0 0;
	align-self: stretch;
	border-radius: 8px;
	border: 1px solid #E6E6E6;
	background: rgba(255, 255, 255, 0.60);
	cursor: pointer;
	transition: transform 0.2s, box-shadow 0.2s;
	height: 48px;
	justify-content: flex-start;
  }
  
  .provider-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }
  
  .goal-card {
	display: flex;
	padding: 12px 20px 20px 20px;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 18px;
	flex: 1 0 0;
	align-self: stretch;
	border-radius: 8px;
	border: 1px solid #E6E6E6;
	background: rgba(255, 255, 255, 0.60);
	cursor: pointer;
	transition: transform 0.2s, box-shadow 0.2s;
  }
  
  .goal-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }
  
  .provider-card img {
	height: 24px;
  }
  
  .goal-card img {
	height: 40px;
  }
  
  .goal-card .text-center {
	text-align: left !important;
  }
  
  .analyzer-next-btn {
	display: flex;
	width: 180px;
	padding: 12px 24px;
	justify-content: center;
	align-items: center;
	border-radius: 4px;
	background: #2760EA;
	color: white;
	font-family: 'Work Sans', sans-serif;
	border: none;
	cursor: pointer;
	transition: background-color 0.2s;
  }
  
  .analyzer-next-btn:hover {
	background: #1e4fd0;
  }
  
  .analyzer-btn-container {
	display: flex;
	justify-content: flex-end;
	width: 100%;
  }
  
  @media (max-width: 576px) {
	.analyzer-btn-container {
	  justify-content: center;
	}
  }
  
  @media (max-width: 768px) {
	.goal-card img {
	  height: 30px;
	}
  }
  
  .provider-card.selected, .goal-card.selected {
	border: 1px solid #2960F5;
	outline: 2px solid rgba(41, 96, 245, 0.2);
  }
  
  .provider-card.selected:hover, .goal-card.selected:hover {
	transform: translateY(-3px);
	box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }
  
  .page-title-text {
	  font-size: 18px;
	  font-weight: 500;
	  color: #000000;
	  margin-left: 5px;
  }
  
  #analyzer-period-controls {
	  position: absolute;
	  left: 50%;
	  transform: translateX(-50%);
	  z-index: 10;
  }
  
  .period-radio-group .form-check-inline {
	  margin-right: 15px;
  }
  
  .period-radio-group .form-check-input[type="radio"] {
	  width: 18px;
	  height: 18px;
	  margin-right: 5px;
	  cursor: pointer;
	  appearance: none;
	  -webkit-appearance: none;
	  border: 2px solid #8c8c8c;
	  border-radius: 50%;
	  outline: none;
	  position: relative;
  }
  
  .period-radio-group .form-check-input[type="radio"]:checked {
	  background-color: white;
	  border: 2px solid #0d6efd;
  }
  
  .period-radio-group .form-check-input[type="radio"]:checked::after {
	  content: "";
	  position: absolute;
	  top: 2px;
	  left: 2px;
	  width: 10px;
	  height: 10px;
	  border-radius: 50%;
	  background-color: #0d6efd;
  }
  
  .period-radio-group .form-check-input[type="radio"]:not(:checked) {
	  background-color: white;
	  border: 2px solid #8c8c8c;
  }
  
  .period-radio-group .form-check-label {
	  font-size: 14px;
	  color: #495057;
	  cursor: pointer;
  }
  
  #dateRangeBtn, #billingDateBtn {
	  border-radius: 4px;
	  padding: 6px 12px;
	  font-size: 14px;
	  background-color: #f8f9fa;
	  border-color: #dee2e6;
  }

  #dateRangeBtn2 {
	  border-radius: 4px;
	  padding: 6px 12px;
	  font-size: 14px;
	  background-color: #f8f9fa;
	  border-color: #dee2e6;
  }
  
  #dateRangeBtn:hover, #billingDateBtn:hover {
	  background-color: #e9ecef;
  }
  
  #dateRangeDisplay, #billingDateDisplay {
	  color: #333;
	  font-weight: 500;
  }
  
  .gap-3 {
	  gap: 1rem !important;
  }
  
  .navbar-header {
	  position: relative;
  }
  
  /* Visual Analyzer Date Range for Charge Period */
  
  .DateRangeModal.right .modal-dialog {
	  position: fixed;
	  margin: auto;
	  width: 600px;
	  height: auto;
	  max-height: 600px;
	  right: 0;
	  top: 0;
	  bottom: auto;
	  -webkit-transform: translate3d(0%, 0, 0);
	  -ms-transform: translate3d(0%, 0, 0);
	  -o-transform: translate3d(0%, 0, 0);
	  transform: translate3d(0%, 0, 0);
  }
  
  .DateRangeModal .modal-dialog {
	  max-width: 600px;
	  margin: 0;
	  height: auto;
  }
  
  .DateRangeModal .modal-content {
	  border-radius: 8px;
	  height: auto;
	  display: flex;
	  flex-direction: column;
	  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  }
  
  .DateRangeModal .modal-header {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  border-bottom: 1px solid #dee2e6;
	  padding-right: 17px;
  }
  
  .DateRangeModal .modal-body {
	  padding-bottom: 15px;
  }
  
  .DateRangeModal .modal-footer {
	  padding-top: 20px;
	  padding-bottom: 15px;
	  border-top: 1px solid #dee2e6;
	  margin-top: 20px;
	  padding-left: 15px;
	  padding-right: 15px;
  }
  
  .DateRangeModal .date-preset-btn.active {
	  background-color: #2760EA;
	  color: white;
	  border-color: #2760EA;
  }
  
  .custom-date-picker .calendar-body-left td,
  .custom-date-picker .calendar-body-right td {
	  cursor: pointer;
	  text-align: center;
	  padding: 0;
	  font-size: 0.9rem;
	  height: 40px;
	  width: 40px;
	  vertical-align: middle;
	  position: relative;
  }
  
  .custom-date-picker .other-month {
	  color: #ccc;
  }
  
  .custom-date-picker .selected {
	  background-color: rgba(39, 96, 234, 0.1);
  }
  
  .custom-date-picker .start-date::after,
  .custom-date-picker .end-date::after {
	  content: "";
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  background-color: #2760EA;
	  color: white;
	  border-radius: 50%;
	  width: 32px;
	  height: 32px;
	  z-index: -1;
  }
  
  .custom-date-picker .start-date,
  .custom-date-picker .end-date {
	  color: white;
	  position: relative;
	  z-index: 1;
  }
  
  .custom-date-picker table {
	  table-layout: fixed;
	  width: 100%;
  }
  
  .custom-date-picker table td {
	  box-sizing: border-box;
  }
  
  .date-preset-btn.active {
	  background-color: #2760EA;
	  color: white;
	  border-color: #2760EA;
  }
  
  .calendar-wrapper {
	  border: 1px solid #e9ecef;
	  border-radius: 4px;
	  padding: 8px;
  }
  
  .calendar-wrapper table {
	  margin-bottom: 0;
  }
  
  .calendar-wrapper th {
	  text-align: center;
	  font-size: 0.8rem;
  }
  
  @media (max-width: 768px) {
	  .DateRangeModal.right .modal-dialog {
		  width: 95% !important;
	  }
  }
  
  @media (max-width: 576px) {
   
	  .DateRangeModal .calendars-container {
		  flex-direction: column;
	  }
	  
	  .DateRangeModal .calendar-wrapper {
		  width: 100% !important;
		  margin-bottom: 1rem;
	  }
  
	  .DateRangeModal .prev-month,
	  .DateRangeModal .next-month,
	  .DateRangeModal .prev-month-right,
	  .DateRangeModal .next-month-left {
		  padding: 0.375rem 0.75rem;
	  }
	
	  .DateRangeModal .calendar-body-left td,
	  .DateRangeModal .calendar-body-right td {
		  padding: 8px;
		  font-size: 1rem;
	  }
  
	  .DateRangeModal .date-preset-btn {
		  margin-bottom: 0.5rem;
		  flex-grow: 1;
	  }
  }
  
  @media (min-width: 577px) and (max-width: 991px) {
	  .DateRangeModal.right .modal-dialog {
		  width: 80% !important;
	  }
  }
  
  .charge-period-title {
	  color: #333;
	  font-family: "Work Sans", sans-serif;
	  font-size: 18px;
	  font-style: normal;
	  font-weight: 500;
	  line-height: 21px;
  }
  
  #resetDateRange {
	  color: #2760EA;
	  font-family: "Work Sans", sans-serif;
	  font-size: 16px;
	  font-style: normal;
	  font-weight: 400;
	  line-height: 21px;
  }
  
  .DateRangeModal #startDateInput, 
  .DateRangeModal #endDateInput {
	  color: #333;
	  font-family: "Work Sans", sans-serif;
	  font-weight: 400;
	  background-image: url("../images/analyzer/calender.svg");
	  background-repeat: no-repeat;
	  background-position: left 10px center;
	  background-size: 16px 16px;
	  padding-left: 35px;
	  padding-right: 10px;
	  width: 80%; 
	  text-indent: 5px;
	  background-color: white;
	  border: 1px solid #ced4da;
	  border-radius: 4px;
  }
  
  .DateRangeModal .position-relative {
	  width: 100%;
	  padding-left: 0;
	  display: flex; 
	  justify-content: flex-start;
  }
  
  .DateRangeModal .modal-body .row {
	  margin-left: -15px;
	  margin-right: -15px;
	  display: flex;
	  justify-content: flex-start; 
	  gap: 0;
  }
  
  .DateRangeModal .modal-body .row .col-6:first-child {
	  padding-right: 5px;
	  padding-left: 5px;
	  width: 40%;
  }
  
  .DateRangeModal .modal-body .row .col-6:last-child {
	  padding-right: 5px;
	  padding-left: 0; 
	  margin-left: -20px; 
	  width: 40%; 
  }
  
  .DateRangeModal .calendar-wrapper {
	  border: none;
	  padding: 4px;
  }
  
  .DateRangeModal .form-label {
	  color: #333;
	  font-family: "Work Sans", sans-serif;
	  font-size: 14px;
	  font-weight: 500;
	  padding-left: 5px;
	  margin-bottom: 5px;
  }
  
  .DateRangeModal .time-range-wrapper {
	  width: 95%;
	  margin: 0 auto;
  }
  
  .DateRangeModal .current-month-display,
  .DateRangeModal .next-month-display {
	  color: #666; 
	  font-family: "Work Sans", sans-serif;
	  font-size: 16px;
	  font-weight: 500;
  }
  
  .DateRangeModal .prev-month,
  .DateRangeModal .next-month,
  .DateRangeModal .prev-month-right,
  .DateRangeModal .next-month-left {
	  color: #666;
	  border: none; 
	  background-color: transparent;
	  padding: 0.375rem 0.75rem;
  }
  
  .DateRangeModal .next-month-left {
	  display: none; 
  }
  
  .DateRangeModal .prev-month-right {
	  display: none;
  }
  
  .DateRangeModal .date-picker-header {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
  }
  
  .DateRangeModal .current-month-display,
  .DateRangeModal .next-month-display {
	  flex-grow: 1;
	  text-align: center;
  }
  
  .DateRangeModal .date-preset-btn {
	  color: #333;
	  background-color: transparent;
	  border: none;
	  padding: 4px 8px; 
	  border-radius: 4px;
	  font-family: "Work Sans", sans-serif;
	  font-size: 14px;
	  font-weight: 400;
	  margin-right: 2px; 
	  margin-bottom: 2px; 
	  white-space: nowrap; 
  }
  
  .DateRangeModal .date-preset-btn:hover {
	  background-color: transparent;
	  color: #2760EA; 
  }
  
  .DateRangeModal .date-preset-btn.active {
	  background-color: transparent;
	  color: #2760EA;
	  border: none;
	  font-weight: 500;
  }
  
  .DateRangeModal .auto-select-range .d-flex {
	  gap: 2px !important; 
	  flex-wrap: wrap;
	  justify-content: flex-start;
	  width: 100%; 
  }
  
  .DateRangeModal .auto-select-range {
	  padding: 0 5px;
	  width: 100%;
	  margin-bottom: 50px;
  }
  
  .DateRangeModal .auto-select-range .d-flex {
	  display: flex;
	  flex-wrap: wrap;
	  margin: -2px; 
  }
  
  .DateRangeModal .auto-select-range .d-flex .date-preset-btn {
	  margin: 2px; 
	  flex-grow: 0; 
	  flex-shrink: 0; 
  }
  
  .DateRangeModal .modal-footer .btn-light {
	  color: #666;
	  background-color: #f8f9fa;
	  border: 1px solid #dee2e6;
  }
  
  .DateRangeModal .modal-footer .btn-primary {
	  background-color: #2760EA;
	  border-color: #2760EA;
  }
  
  .date-number-display {
	  color: #333;
	  font-family: "Work Sans", sans-serif;
	  font-size: 14px;
	  font-weight: 500;
	  margin-left: 15px;
  }
  
  /* Billing Month Modal Styles */
  .BillingMonthModal.right .modal-dialog {
	  position: fixed;
	  margin: auto;
	  width: 600px;
	  height: auto;
	  max-height: 600px;
	  right: 0;
	  top: 0;
	  bottom: auto;
	  -webkit-transform: translate3d(0%, 0, 0);
	  -ms-transform: translate3d(0%, 0, 0);
	  -o-transform: translate3d(0%, 0, 0);
	  transform: translate3d(0%, 0, 0);
  }
  
  .billing-month-title {
	  color: #333;
	  font-family: "Work Sans", sans-serif;
	  font-size: 18px;
	  font-style: normal;
	  font-weight: 500;
	  line-height: 21px;
  }
  
  .BillingMonthModal #billingStartDate, 
  .BillingMonthModal #billingEndDate {
	  color: #333;
	  font-family: "Work Sans", sans-serif;
	  font-weight: 400;
	  background-image: url("../images/analyzer/calender.svg");
	  background-repeat: no-repeat;
	  background-position: left 10px center;
	  background-size: 16px 16px;
	  padding-left: 35px;
	  padding-right: 10px;
	  width: 80%; 
	  text-indent: 5px;
	  background-color: white;
	  border: 1px solid #ced4da;
	  border-radius: 4px;
  }
  
  .BillingMonthModal .auto-select-range {
	  padding: 0 5px;
	  width: 100%;
	  margin-bottom: 20px;
  }
  
  .BillingMonthModal .auto-select-range .d-flex {
	  gap: 2px !important; 
	  flex-wrap: wrap;
	  justify-content: flex-start;
	  width: 100%; 
  }
  
  .BillingMonthModal .date-preset-btn {
	  color: #333;
	  background-color: transparent;
	  border: none;
	  padding: 4px 8px; 
	  border-radius: 4px;
	  font-family: "Work Sans", sans-serif;
	  font-size: 14px;
	  font-weight: 400;
	  margin-right: 2px; 
	  margin-bottom: 2px; 
	  white-space: nowrap; 
  }
  
  .BillingMonthModal .date-preset-btn:hover {
	  background-color: transparent;
	  color: #2760EA; 
  }
  
  .BillingMonthModal .date-preset-btn.active {
	  background-color: transparent; 
	  color: #2760EA;
	  border: none;
	  font-weight: 500;
  }
  
  #resetBillingDateRange {
	  color: #2760EA;
	  font-family: "Work Sans", sans-serif;
	  font-size: 16px;
	  font-style: normal;
	  font-weight: 400;
	  line-height: 21px;
  }
  
  .BillingMonthModal .modal-header {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  border-bottom: 1px solid #dee2e6;
	  padding-right: 17px;
  }
  
  /* Make sure Billing Month modal matches Charge Period modal */
  .BillingMonthModal .modal-content {
	border-radius: 0 !important;
  }
  
  .BillingMonthModal .modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #dee2e6;
	padding: 1rem;
  }
  
  .BillingMonthModal .modal-header .btn-close {
	padding: 0.5rem;
	margin: -0.5rem -0.5rem -0.5rem auto;
  }
  
  .BillingMonthModal .modal-body {
	padding: 1rem;
  }
  
  .BillingMonthModal .modal-footer {
	padding: 0.75rem 1rem;
	border-top: 1px solid #dee2e6;
  }
  
  /* Ensure the reset button looks the same */
  #resetBillingDateRange {
	color: #2760EA;
	font-family: "Work Sans", sans-serif;
	font-size: 16px;
	font-weight: 400;
	padding: 0;
	background: transparent;
	border: none;
  }
  
  /* Ensure the Billing Month modal is positioned correctly */
  .BillingMonthModal.show {
	  display: block !important;
	  overflow-x: hidden;
	  overflow-y: auto;
  }
  
  .BillingMonthModal .modal-dialog {
	  position: fixed !important;
	  top: 70px !important;
	  right: 20px !important;
	  width: 600px !important;
	  margin: 0 !important;
	  max-width: 95vw !important;
	  transform: none !important;
  }
  
  .BillingMonthModal .modal-content {
	  border-radius: 0 !important;
	  height: auto;
  }
  
  /* Monthly Costs Table Styles */
  #monthly-costs-table .skeleton {
	  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
	  background-size: 200% 100%;
	  animation: loading 1.5s infinite;
	  border-radius: 4px;
  }
  
  @keyframes loading {
	  0% {
		  background-position: 200% 0;
	  }
	  100% {
		  background-position: -200% 0;
	  }
  }
  
  #monthly-costs-table .pagination-pages .btn {
	  min-width: 36px;
  }
  
  #monthly-costs-table .table th {
	  background-color: #f8f9fa;
	  font-weight: 600;
	  border-bottom-width: 1px;
  }
  
  #monthly-costs-table .table td {
	  vertical-align: middle;
	  height: 48px;
  }
  
  #monthly-costs-table .card-footer {
	  border-top: 1px solid rgba(0, 0, 0, 0.125);
  }
  
  #monthly-costs-table .pagination-info {
	  color: #6c757d;
	  font-size: 0.875rem;
  }

  /* Date Range Modal Css */
/* In dateFilter_ChargePeriod1.js, for #dateRangeHoverStyles */
/* .DateRangeModal .hover-selected {
  background-color: rgba(39, 96, 234, 0.1) !important;
}
.DateRangeModal .hover-start-date, .DateRangeModal .hover-end-date {
  background-color: rgba(39, 96, 234, 0.2) !important;
} */
  /* Date Range Modal Css */