/** **************************************
* Fonts: app
*************************************** */
@import '@fontsource-variable/public-sans';

@import '@fontsource/barlow/400.css';
@import '@fontsource/barlow/500.css';
@import '@fontsource/barlow/600.css';
@import '@fontsource/barlow/700.css';
@import '@fontsource/barlow/800.css';

/** **************************************
* Fonts: options
*************************************** */
@import '@fontsource-variable/dm-sans';
@import '@fontsource-variable/inter';
@import '@fontsource-variable/nunito-sans';

/** **************************************
* Plugins
*************************************** */
/* scrollbar */
@import './components/scrollbar/styles.css';

/* image */
@import './components/image/styles.css';

/* map */
@import './components/map/styles.css';

/* lightbox */
@import './components/lightbox/styles.css';

/* chart */
@import './components/chart/styles.css';

/** **************************************
* Baseline
*************************************** */
html {
  height: 100%;
  -webkit-overflow-scrolling: touch;
}
body,
#root,
#root__layout {
  display: flex;
  flex: 1 1 auto;
  min-height: 100%;
  flex-direction: column;
}
img {
  max-width: 100%;
  vertical-align: middle;
}
ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
input[type='number'] {
  -moz-appearance: textfield;
  appearance: none;
}
input[type='number']::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
input[type='number']::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
.custom-style {
  width: 250px;
}

@media (max-width: 600px) {
  .custom-style {
    width: 100%;
  }
}

/* Ensure modal content panels are scrollable on small viewports
   and when content exceeds viewport height. Keeps the modal header/footer
   fixed while allowing the inner div to scroll. */
.wp-modal main div,
.wp-modal .wp-modal-c {
  max-height: calc(100vh - 160px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}