.responsive-apps-grid {
  display: grid;
  grid-template-columns: repeat(
    4,
    1fr
  ); /* Each column occupies 25% of the available width */
  grid-auto-rows: minmax(0, 216px); /* Height of each row is capped at 216px */
  grid-gap: 24px;
  align-items: stretch;
}

@media (max-width: 1200px) {
  .responsive-apps-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .responsive-apps-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .responsive-apps-grid {
    grid-template-columns: 1fr;
  }
}

.AppStoreCardDisabled {
  text-align: left;
  border-radius: 2px;
  border: 1px solid #0000001f;
  transition: transform 0.3s ease;
  padding: 0px;
  max-width: 1/4;
  display: flex;
  align-content: stretch;
}

.AppStoreCardDarkDisabled {
  text-align: left;
  border-radius: 2px;
  border: 1px solid #121212;
  transition: transform 0.3s ease;
  padding: 0px;
  max-width: 1/4;
  display: flex;
  align-content: stretch;
}

.AppStoreCard {
  text-align: left;
  border-radius: 2px;
  border: 1px solid #0000001f;
  transition: transform 0.3s ease;
  padding: 0px;
  max-width: 1/4;
  display: flex;
  align-content: stretch;
}

.AppStoreCard:hover {
  box-shadow: 0px 1px 18px 0px #0000001f, 0px 6px 10px 0px #00000024,
    0px 3px 5px -1px #00000033;
  border: 1px solid #0000001f;
  transform: translateY(-2px);
}

.AppStoreCard_NoStyling {
  text-align: left;
  border: 1px solid #00000000;
  transition: none;
  padding: 0px;
  display: flex;
  align-content: stretch;
  height: 100%;
  width: 100%;
  background-color: #00000000;
}

.AppStoreCardDisabled_NoStyling {
  text-align: left;
  border: 1px solid #00000000;
  transition: none;
  padding: 0px;
  display: flex;
  align-content: stretch;
  height: 100%;
  width: 100%;
  background-color: #00000000;
}

.AppStoreCardDark {
  text-align: left;
  border-radius: 2px;
  border: 1px solid #121212;
  transition: transform 0.3s ease;
  padding: 0px;
  max-width: 1/4;
  display: flex;
  align-content: stretch;
}

.AppStoreCardDark:hover {
  box-shadow: 0px 1px 18px 0px #0000001f, 0px 6px 10px 0px #00000024,
    0px 3px 5px -1px #00000033;
  border: 1px solid #121212;
  transform: translateY(-2px);
}

.AppStoreCardDark_NoStyling {
  text-align: left;
  border: none;
  transition: none;
  padding: 0px;
  display: flex;
  align-content: stretch;
  height: 100%;
  width: 100%;
  background-color: #00000000;
  color: #ffffff;
}

.AppStoreCardDarkDisabled_NoStyling {
  text-align: left;
  border: none;
  transition: none;
  padding: 0px;
  display: flex;
  align-content: stretch;
  height: 100%;
  width: 100%;
  background-color: #00000000;
  color: #ffffff70;
}

body {
  background-color: #F7F7F7;
}

tr:hover {
  background-color: rgba(100, 100, 100, 0.1) !important;
}

.dash-table-tooltip {
  width: 100px !important;
  max-width: 100px !important;
  min-width: 100px !important;
  background-color: #0d6efd !important;
  color: white !important;
  line-height: 14px;
  font-size: 10px;
}

.dash-tooltip:before,
.dash-tooltip:after {
  border-color: transparent !important;
  border-bottom-color: #63666a !important;
}

.dash-table-tooltip {
  width: 100px !important;
  max-width: 100px !important;
  min-width: 100px !important;
  background-color: #63666a !important;
  color: white !important;
  line-height: 14px;
  font-size: 10px;
}

.dash-tooltip:before,
.dash-tooltip:after {
  border-color: transparent !important;
  border-bottom-color: #63666a !important;
}

.MuiDataGrid-root .MuiDataGrid-cellContent {
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
}
.MuiDataGrid-virtualScrollerContent {
  max-width: 100px !important;
  min-width: 100px !important;
}
/* .MuiDataGrid-virtualScroller {
  display: flex !important;
} */

.tooltip.show {
  z-index: 9999 !important;
}

a {
  color: #140f50 !important; 
  /* # Update theme */
  /* Primary main light */ 
}

table,
th,
td {
  border: 1px solid #d2d2d2 !important;
  padding: 4px;
}

table {
  border-collapse: collapse !important;
  margin-top: 15px !important;
  margin-bottom: 15px !important;
}

pre code {
  border-radius: 10px;
  overflow-x: "scroll" !important;
  background: #00000006 !important;
}

._dash-loading {
  display: none;
}