:root {
  --gravito-primary-color: cornflowerblue;
  --gravito-secondary-color: #a3a3a3;
  --gravito-header-color: cornflowerblue;
  --gravito-footer-color: cornflowerblue;
  --gravito-body-color: #f7f7f7;
  --gravito-accordion-header-color: #f2f2f2;
  --gravito-accordion-header-color-dark: #f2f2f2;
  --gravito-text-color: #595959;
  --gravito-text-dark: #595959;
  --gravito-text-light: white;
  --gravito-focus-outline-color: #6474ec;
  --gravito-checkbox-checked-bg-color: var(--gravito-primary-color);
  --gravito-checkbox-checked-border-color: var(--gravito-primary-color);
  --gravito-checkbox-hover-border-color: var(--gravito-primary-color);
  --gravito-toggle-checked-bg-color: var(--gravito-primary-color);

  --gravito-font-size-heading: 18px;
  --gravito-font-size-subheading: 16px;
  --gravito-font-size-body: 14px;
  --gravito-font-size-sub-content: 13px;
  --gravito-font-size-button: 15px;
  --gravito-font-size-caption: 10px;
  --gravito-font-weight-light: 300;
  --gravito-font-weight-regular: 300;
  --gravito-font-weight-semi-bold: 600;

  /* derived colors */
  --gravito-primary-color-dark: #003366;
  --gravito-secondary-color-dark: #737373;
  --gravito-secondary-color-light: #f2f2f2;

  --highlightColor: #e71212;
  --highlightBgColor: #f5f5f5;
}

/* scrollbar css */
::-webkit-scrollbar {
  width: 12px; /* width of vertical scrollbar */
  height: 12px; /* height of horizontal scrollbar */
}

::-webkit-scrollbar-track {
  background: transparent; /* track (background) color */
}

::-webkit-scrollbar-thumb {
  background-color: #888; /* scrollbar handle color */
  border-radius: 6px; /* rounded corners */
  border: 3px solid #f1f1f1; /* space around thumb */
}

::-webkit-scrollbar-thumb:hover {
  background: #555; /* handle color on hover */
}

/* Hide scrollbar buttons (arrows) */
::-webkit-scrollbar-button {
  display: none;
}

* {
  scrollbar-width: thin; /* "auto" | "thin" | "none" */
  scrollbar-color: #888 transparent; /* thumb color | track color */
}

/* css to avoid scrolling outside modal */
body.gravitoCMP-isOpen {
  overflow: hidden;
}

.gravitoCMP-tab-container {
  /* all: revert; */
  font-family: Arial, sans-serif;
  font-kerning: normal;
  letter-spacing: normal;
}

/* .gravitoCMP-tab-container * {

  box-sizing: border-box;
  margin: 0;
  padding: 0;


  font: inherit;
  font-family: inherit;
  font-size: 100%;
  line-height: 1.2;
  letter-spacing: inherit;
  font-kerning: inherit;

  
  background: none;
  border: none;
  outline: none;
  text-decoration: none;
  color: inherit;

  
  vertical-align: baseline;
  appearance: none;
  text-transform: none;
  box-shadow: none;
  text-align: inherit;


  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  min-width: 0;
  min-height: 0;


  animation: none;
  transition: none;
} */
.gravitoCMP-loader-container {
  /* position: fixed; */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* background-color: rgba(255, 255, 255, 0.8); */
  z-index: 9999; /* Ensure it appears above other elements */
}

.gravitoCMP-spinner {
  width: 50px;
  height: 50px;
  border: 5px solid rgba(0, 0, 0, 0.1); /* Light gray border */
  border-top: 5px solid var(--gravito-primary-color); /* Darker border for the spinning effect */
  border-radius: 50%; /* Make it a circle */
  animation: gravitoCMP-spin 1s linear infinite; /* Spin animation */
}

@keyframes gravitoCMP-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.gravitoCMP-normal-text {
  font-size: var(--gravito-font-size-body);
  font-weight: var(--gravito-font-weight-regular);
  color: var(--gravito-text-color);
  line-height: 1.2;
  margin: 5px;
}

.gravitoCMP-custom-tab-content {
  display: flex;
  flex: 1;
}
.gravitoCMP-custom-tab-content iframe,
.gravitoCMP-custom-tab-content .gravitoCMP-loader-container {
  min-height: 50dvh;
}
.gravitoCMP-globe-icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
}

.gravitoCMP-chevron-icon {
  width: 20px;
  height: 20px;
  margin-left: 8px;
  transition: transform 0.3s;
}
.gravitoCMP-standardCMP-chevron.rotate {
  transform: rotate(180deg);
}

.gravitoCMP-chevron-icon.open {
  transform: rotate(180deg);
}

.gravitoCMP-option-icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
}
.gravitoCMP-language-selector {
  position: static;
  right: 10px;
  display: flex;
  outline: none;
  margin: 5px;
}
.gravitoCMP-language-selector select {
  background: transparent;
  border: none;
}
.gravitoCMP-language-selector {
  display: flex;
  align-items: center;
  width: auto;
}

.gravitoCMP-custom-dropdown {
  position: relative;
  display: inline-block;
}

.gravitoCMP-custom-dropdown-selected {
  display: flex;
  align-items: center;
  cursor: pointer;
  width: auto;
  justify-content: start;
  gap: 4px;
  background: unset;
  border: none;
  padding: 5px;
  &:focus-visible {
    outline: solid 2px var(--gravito-focus-outline-color);
  }
}

.gravitoCMP-custom-dropdown-selected-inline {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  width: auto;
  justify-content: start;
  gap: 4px;
  background: unset;
  border: none;
  padding: 5px;
  color: var(--gravito-text-color);
  &:focus-visible {
    outline: solid 2px var(--gravito-focus-outline-color);
  }
}
.bi-chevron-down.open {
  transform: rotate(180deg);
}

.gravitoCMP-option-icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
}

.gravitoCMP-custom-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 2px 8px #00000026;
  z-index: 100;
  width: auto;
}

.gravitoCMP-custom-dropdown-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
}

.gravitoCMP-custom-dropdown-item:hover {
  background-color: #f0f0f0;
}

.gravitoCMP-text-light {
  color: var(--gravito-text-light) !important;
}
.gravitoCMP-text-dark {
  color: var(--gravito-text-dark) !important;
}

.gravitoCMP-opaque-container {
  position: fixed;
  top: 0;
  bottom: 0px;
  left: 0px;
  right: 0px;
  /* Maximum value supported */
  z-index: 2147483647;
  background: #0000008c;
}

.gravitoCMP-tab-container {
  display: flex;
  flex-direction: column;
  gap: 0px;
  background-color: var(--gravito-body-color);
  color: var(--gravito-text-color);
  overflow: hidden;
  border-radius: 8px;
  width: 600px;

  height: auto;
  min-height: auto;
  max-height: 95vh;
  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 1.2;
}
.gravitoCMP-brand-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  align-items: center;
  background: var(--gravito-header-color);
}

.gravitoCMP-logo-div {
  height: 60px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.gravitoCMP-logo {
  height: 40px;
}

.gravitoCMP-tabs-div {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  /* overflow: auto; */
  background-color: white;
  /* padding-bottom: 10px; */
}
button.gravitoCMP-tab {
  background-color: white;
  border: unset;
  outline: unset;

  white-space: nowrap;
  padding: 10px 5px;

  color: #5a5a5a;
  flex: 1;
  text-align: center;
  font-size: var(--gravito-font-size-button);
  font-weight: var(--gravito-font-weight-regular);
  font-family: inherit;
  &:focus-visible {
    cursor: pointer;

    outline: solid 2px var(--gravito-focus-outline-color);
    margin: 2px;
    color: #a2a2a2;
  }
  &:focus {
    background-color: white;
  }
  &:hover {
    color: var(--gravito-primary-color);
    background-color: white;
  }
}
.gravitoCMP-tab.active {
  background-color: var(--gravito-body-color);
  color: var(--gravito-primary-color);
  font-weight: var(--gravito-font-weight-semi-bold);
  border-bottom: 4px solid var(--gravito-primary-color);
}
.gravitoCMP-tab:hover {
  cursor: pointer;
  /* 
  font-weight: bold; */
}
.gravitoCMP-tab-content {
  overflow: auto;
  flex: 1;
  display: flex;
}

.gravitoCMP-action-container {
  display: flex;
  flex-direction: row-reverse;
  gap: 14px;
  justify-content: end;
  padding: 16px 12px;
}

.gravitoCMP-btn,
button.gravitoCMP-btn {
  font-size: var(--gravito-font-size-button);
  font-weight: var(--gravito-font-weight-regular);
  padding: 10px 20px;
  border-radius: 2em;
  border: none;
  cursor: pointer;
  background-color: #000000a6;
  color: white;
  font-family: inherit;
  width: 100%;
  text-align: center;
}

button.gravitoCMP-standardCMP-primary {
  background-color: var(--gravito-primary-color);
  color: white;

  &:hover {
    /* opacity: 0.8; */
    background-color: var(--gravito-primary-color-dark);
    /* font-weight: var(--gravito-font-weight-semi-bold); */
  }
  &:focus {
    /* font-weight: var(--gravito-font-weight-semi-bold); */
    background-color: var(--gravito-primary-color-dark);
  }
  &:focus-visible {
    /* font-weight: var(--gravito-font-weight-semi-bold); */
    outline: solid 2px var(--gravito-focus-outline-color);
  }
}

button.gravitoCMP-standardCMP-secondary {
  background: var(--gravito-secondary-color);
  color: white;

  &:hover {
    /* opacity: 0.8; */
    background-color: var(--gravito-secondary-color-dark);
    /* font-weight: var(--gravito-font-weight-semi-bold); */
  }
  &:focus {
    /* font-weight: var(--gravito-font-weight-semi-bold); */
    background-color: var(--gravito-secondary-color-dark);
  }
  &:focus-visible {
    /* font-weight: var(--gravito-font-weight-semi-bold); */
    outline: solid 2px var(--gravito-focus-outline-color);
  }
}
#gravitoStandardCMP-layer1-settings.gravitoCMP-standardCMP-secondary {
  display: none;
}
#gravitoTCFCMP-layer1-settings.gravitoCMP-standardCMP-secondary {
  display: none;
}
.gravitoCMP-standardCMP-action-footer-div {
  height: min-content;

  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  margin-bottom: 15px;
  padding: 10px;
}
.gravitoCMP-tab-footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  background: var(--gravito-footer-color);
  height: 50px;
  gap: 10px;
  justify-content: space-between;
  flex-shrink: 0;
}
.gravitoCMP-single-control-container {
  margin: 10px;
}
.gravitoCMP-footer-links {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  gap: 20px;
  margin: 0 10px;
}
.gravitoCMP-footer-links > a {
  font-weight: var(--gravito-font-weight-regular);
  font-size: var(--gravito-font-size-body);
  &:hover {
    color: unset;
    /* font-weight: var(--gravito-font-weight-semi-bold); */
  }
  &:focus-visible {
    outline: solid 2px var(--gravito-focus-outline-color);
  }
}
.gravitoCMP-footer-logo-div {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.gravitoCMP-footer-logo {
  height: 20px;
  margin: 0 10px;
}

/* CSS for Modals */
.gravitoCMP-modal {
  display: flex; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1000; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0, 0, 0); /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

.gravitoCMP-modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
  max-width: 500px;
  border-radius: 8px;
}

.gravitoCMP-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.gravitoCMP-modal-header h2 {
  margin: 0;
  font-size: var(--gravito-font-size-heading);
  font-weight: var(--gravito-font-weight-semi-bold);
}

.gravitoCMP-modal-body {
  margin: 20px 0;
  font-size: var(--gravito-font-size-body);
}

.gravitoCMP-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.gravitoCMP-button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
.gravitoCMP-close-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  display: flex;
  background: transparent;
  outline: none;
  border: none;
  cursor: pointer;
  z-index: 9999;
  &:focus-visible {
    outline: solid 2px var(--gravito-focus-outline-color);
    background-color: transparent;
  }
  &:hover {
    /* outline: solid 2px var(--gravito-focus-outline-color); */
    background-color: transparent;
  }
}
.gravitoCMP-close-btn.disabled {
  cursor: not-allowed;
}

/* .gravitoCMP-button-primary {
  background-color: #4caf50;
  color: white;
}

.gravitoCMP-button-secondary {
  background-color: #f44336;
  color: white;
} */

.gravitoCMP-accordion {
  overflow: hidden;
  /* &:focus-within {
    outline: solid 2px var(--gravito-focus-outline-color);
  } */
}

.gravitoCMP-accordion-header,
button.gravitoCMP-accordion-header {
  background-color: transparent;

  color: #444;
  cursor: pointer;
  padding: 5px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  transition: 0.4s;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* font-weight: var(--gravito-font-weight-semi-bold); */

  font-size: var(--gravito-font-size-body);
  font-family: inherit;
  color: var(--gravito-primary-color);
  box-shadow: none;
  &:focus-visible {
    border: solid 2px var(--gravito-focus-outline-color);
  }
  &:focus {
    background-color: transparent;
  }
  &:hover {
    background-color: transparent;
  }
  &:active {
    background-color: transparent;
  }
}
.gravitoCMP-TCFCMP-accordion-subheader {
  font-size: var(--gravito-font-size-sub-content);
  font-weight: var(--gravito-font-weight-regular);
  margin-top: 2px;
}
.gravitoCMP-USCA-accordion-header-div {
  width: "auto";
}

.gravitoCMP-accordion-header:hover {
  /* background-color: #e9e9e9; */
}

.gravitoCMP-accordion-icon {
  font-size: 20px;
  height: 20px;
  width: 20px;
  flex-shrink: 0;
}
.gravitoCMP-accordion-icon svg {
  vertical-align: top;
}
.gravitoCMP-accordion-icon.open {
  transform: rotate(180deg);
}

.gravitoCMP-accordion-content {
  padding: 5px;

  font-size: var(--gravito-font-size-sub-content);
  font-weight: var(--gravito-font-weight-regular);
}

/* styles for checkbox */
/* Container for the checkbox */
.gravitoCMP-consent-input,
label.gravitoCMP-consent-input {
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  /* height: 18px; */
  padding-left: 24px; /* Space for the custom checkmark */
  margin-bottom: 0px;
  font-size: var(--gravito-font-size-body);
  color: var(--gravito-text-color, #595959);
  font-weight: var(--gravito-font-weight-light);
}

.gravitoCMP-consent-input-disabled {
  cursor: not-allowed;
  color: var(--gravito-secondary-color-dark, #737373);
  opacity: 0.6;
}

/* Hide the default checkbox */
.gravitoCMP-consent-input-checkbox {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Custom checkmark */
.gravitoCMP-custom-checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 14px;
  width: 14px;
  background-color: var(--gravito-checkbox-bg-color, white);
  border: 2px solid var(--gravito-checkbox-border-color, #a3a3a3);
  border-radius: 4px;
  transition:
    background-color 0.2s,
    border-color 0.2s;
  box-sizing: content-box;
}

/* Checkmark when the checkbox is checked */
.gravitoCMP-consent-input-checkbox:checked + .gravitoCMP-custom-checkmark {
  background-color: var(--gravito-checkbox-checked-bg-color, cornflowerblue);
  border-color: var(--gravito-checkbox-checked-border-color, cornflowerblue);
}

/* Checkmark hover effect */
.gravitoCMP-consent-input:hover .gravitoCMP-custom-checkmark {
  border-color: var(--gravito-checkbox-hover-border-color, #0056b3);
}

/* Checkmark when disabled */
.gravitoCMP-consent-input-checkbox:disabled + .gravitoCMP-custom-checkmark {
  background-color: var(--gravito-checkbox-disabled-bg-color, #f2f2f2);
  border-color: var(--gravito-checkbox-disabled-border-color, #d6d6d6);
  cursor: not-allowed;
}

/* Add a checkmark icon */
.gravitoCMP-custom-checkmark:after {
  content: "";
  position: absolute;
  display: none;
  left: 3px;
  top: 0px;
  width: 6px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  box-sizing: content-box;
}

.gravitoCMP-consent-input:has(.gravitoCMP-consent-input-checkbox:focus-visible)
  .gravitoCMP-custom-checkmark {
  outline: solid 2px var(--gravito-focus-outline-color);
}

/* Show the checkmark icon when checked */
.gravitoCMP-consent-input-checkbox:checked
  + .gravitoCMP-custom-checkmark:after {
  display: block;
}

/* style for toggle */

/* Toggle container */
.gravitoCMP-consent-input-toggle {
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  margin: 0px;
  font-size: var(--gravito-font-size-body);
  color: var(--gravito-text-color, #595959);
}

.gravitoCMP-consent-input-toggle-disabled {
  cursor: not-allowed;
  color: var(--gravito-secondary-color-dark, #737373);
  opacity: 0.6;
}

/* Hide the default checkbox */
.gravitoCMP-consent-input-toggle-checkbox {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Toggle slider */
.gravitoCMP-consent-input-toggle-slider {
  position: relative;
  width: 40px;
  height: 20px;
  background-color: var(--gravito-toggle-bg-color, #ccc);
  border-radius: 20px;
  transition: background-color 0.2s;
  &:focus-within {
    outline: solid 2px var(--gravito-focus-outline-color);
  }
}
.gravitoCMP-consent-input-toggle:has(
    .gravitoCMP-consent-input-toggle-checkbox:focus-visible
  )
  .gravitoCMP-consent-input-toggle-slider {
  outline: solid 2px var(--gravito-focus-outline-color);
}

.gravitoCMP-consent-input-toggle-checkbox:checked
  + .gravitoCMP-consent-input-toggle-slider {
  background-color: var(--gravito-toggle-checked-bg-color, cornflowerblue);
}

/* Slider circle */
.gravitoCMP-consent-input-toggle-slider:before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  background-color: white;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: transform 0.2s;
}

.gravitoCMP-consent-input-toggle-checkbox:checked
  + .gravitoCMP-consent-input-toggle-slider:before {
  transform: translateX(20px);
}

/* Label for toggle */
.gravitoCMP-consent-input-toggle-label {
  margin-left: 10px;
  font-size: var(--gravito-font-size-body);
  flex: 1;
}

.gravitoCMP-consent-input-toggle-label-disabled {
  color: var(--gravito-secondary-color-dark, #737373);
}

/* media querry */

@media screen and (max-width: 550px) {
  .gravitoCMP-tab-container {
    width: 90%;
    max-height: 99dvh;
    height: auto;
    margin: auto;
    /* height: 80vh; */
    gap: 5px;
  }
  .gravitoCMP-action-container {
    flex-direction: column;
    gap: 8px;
    padding: 0px 10px;
  }
  .gravitoCMP-logo-div {
    height: 50px;
  }
  .gravitoCMP-tab {
    padding: 5px 5px;
  }
  .gravitoCMP-standardCMP-layer1-container,
  .gravitoCMP-standardCMP-layer2-container {
    padding: 5px 16px;
  }
  .gravitoCMP-tab-footer {
    gap: 5px;
    height: 60px;
    flex-direction: column-reverse;
    justify-content: space-evenly;
  }
  .gravitoCMP-footer-logo {
    height: 20px;
  }
  .gravitoCMP-btn {
    font-size: 14px;

    padding: 10px 10px;
    border-radius: 2em;
  }
  .gravitoCMP-footer-links > a {
    font-size: calc(var(--gravito-font-size-body) - 2px);
  }
  .gravitoCMP-brand-header {
    flex-direction: column;
    height: 90px;
  }
  .gravitoCMP-language-selector {
    position: static;
    align-self: center;
  }
}

@media screen and (orientation: landscape) {
  .gravitoCMP-tab-container {
    max-height: 90vh;
  }
}