/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
  font-size: 62.5%; }
body {
  font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.6;
  font-weight: 400;
  /* font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; */
  /* font-family: "Roboto",  */
  margin: 2% 2% 2% 2%; 
}

/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 300; }
h1 { font-size: 2.4rem; line-height: 1.2;  letter-spacing: -.0rem; margin-bottom: 2rem; }
h2 { font-size: 2.0rem; line-height: 1.25; letter-spacing: -.0rem; margin-bottom: 0px; margin-top: 1rem;}
h3 { font-size: 1.8rem; line-height: 1.3;  letter-spacing: -.0rem; margin-bottom: 1.5rem; margin-top: 1.5rem;}
h4 { font-size: 1.6rem; line-height: 1.35; letter-spacing: -.0rem; margin-bottom: 1.2rem; margin-top: 0px; }
h5 { font-size: 1.4rem; line-height: 1.5;  letter-spacing: -.0rem; margin-bottom: 0.6rem; margin-top: 0.6rem;}
h6 { font-size: 1.0rem; line-height: 1.6;  letter-spacing: 0; margin-bottom: 0.75rem; margin-top: 0.75rem;}

/* h1 { font-size: 2.4rem; line-height: 1.2;  letter-spacing: -.1rem; margin-bottom: 2rem; }
h2 { font-size: 2.0rem; line-height: 1.25; letter-spacing: -.1rem; margin-bottom: 0px; margin-top: 1rem;}
h3 { font-size: 1.8rem; line-height: 1.3;  letter-spacing: -.1rem; margin-bottom: 1.5rem; margin-top: 1.5rem;}
h4 { font-size: 1.6rem; line-height: 1.35; letter-spacing: -.08rem; margin-bottom: 1.2rem; margin-top: 0px; }
h5 { font-size: 1.4rem; line-height: 1.5;  letter-spacing: -.05rem; margin-bottom: 0.6rem; margin-top: 0.6rem;}
h6 { font-size: 1.0rem; line-height: 1.6;  letter-spacing: 0; margin-bottom: 0.75rem; margin-top: 0.75rem;} */

/* styles for ag grid */
.ag-theme-balham {
  background-color: #1b1f41!important; 
  color: #ffffff!important;
  border: none !important;
  border-color: none!important;
  /* Remove potential box-shadow */
  box-shadow: none !important;
  /* This variable controls the main background color of the grid component */
  --ag-background-color: #1b1f41!important; /* Dark Tile
  /* You might also want to change the header background for consistency */
  --ag-header-background-color: #00032D!important; 
  --ag-background-color: #1b1f41!important;
}

.ag-header-cell-label {
    color: #ffffff!important;
    wordBreak: normal!important;
    whiteSpace: pre!important;
}

.ag-icon
{
    color: #ffffff!important;
}

.ag-paging-panel {
    color: #ffffff!important
}

/* Target the class defined in defaultColDef */
.headerStyleMS {
  /* # background-color: #1b1f41 !important; /* Dark Blue/Gray */
  color: white !important; /* White text */
  font-weight: bold;
  --ag-foreground-color:#ffffff!important;
}

/* Target 2: The root wrapper (the element that usually holds the final structure) */
.ag-theme-alpine .ag-root-wrapper,
.ag-theme-balham .ag-root-wrapper,
.ag-theme-quartz .ag-root-wrapper {
  /* This is often the culprit for the final outer border */
  border: none !important; 
  box-shadow: none !important;
}

/* Target 3: The Viewport (in case the scroll area is adding a border) */
.ag-theme-alpine .ag-layout-normal,
.ag-theme-balham .ag-layout-normal,
.ag-theme-quartz .ag-layout-normal {
  border: none !important;
}

/* Target 4 (Fallback): Ensure the header doesn't have an unnecessary top border */
.ag-theme-alpine .ag-header {
  border-top: none !important;
}

/* Optional: To change the overall header section background, 
   you still need to target the theme's structure */
/* .ag-theme-balham .ag-header {
  background-color: #34495e; 
} */

/* Styles for caroulse in swipe */
#carousel-container {
    width: 400px;
    overflow: hidden;
    margin: auto;
    touch-action: pan-y; /* allow horizontal swipes */
}

#carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%;
}

.carousel-image {
    width: 400px;
    flex-shrink: 0;
    user-select: none;
    pointer-events: none; /* image doesn’t block swipe */
}