/* line 2, app/assets/stylesheets/adjustments.scss */
body {
  font-size: 18px;
}

/* line 8, app/assets/stylesheets/adjustments.scss */
#override select option {
  background: white;
  font-size: 18px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
@tailwind base;
@tailwind components;

/* Fix for the specific SassC compilation issue */
@layer utilities {
  .prose kbd {
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.1), 0 3px 0 rgba(15, 23, 42, 0.1);
  }
}

/* Components */
@layer components {
  /* Post styles */
  .post-key {
    @apply inline font-bold text-lg mr-1 text-gray-900;
  }

  .post-value {
    @apply text-lg font-bold text-blue-800 mr-6 hover:underline;
  }

  .write-up-p {
    @apply text-gray-700 whitespace-pre-line leading-relaxed;
  }

  .info-title {
    @apply font-bold text-lg text-gray-800 inline-block;
  }

  .post-title {
    @apply text-2xl font-bold mb-2;
  }

  .post-select {
    @apply text-sm text-gray-600 py-2 px-2 mt-2 mb-3 w-full bg-white rounded border border-solid border-gray-300;
  }

  .posts-heading-area {
    @apply flex-1 mx-2 md:mx-8 mr-0 pt-8 lg:mr-40 lg:ml-8;
  }

  .post {
    @apply mb-4 sm:mb-8;
  }

  .post-meta {
    @apply text-gray-600 mb-4;
  }

  .post-content {
    @apply prose max-w-none;
  }

  /* Buttons styles */
  .nav-sort-selection {
    @apply block px-10 py-2 mt-2 text-lg text-gray-600 cursor-pointer font-semibold bg-transparent md:mt-0 hover:bg-gray-200;
  }

  .light-blue-button {
    @apply relative w-44 flex justify-center py-2 mt-2 px-4 border border-transparent cursor-pointer
    leading-5 font-medium rounded-md text-white focus:outline-none
    transition duration-150 ease-in-out font-bold;
    background-color: #0ea5e9;
    
    &:hover {
      background-color: #38bdf8;
    }
    
    &:focus {
      border-color: #0284c7;
    }

    &:hover .icon {
      @apply text-white;
    }
  }

  .user-tab-active {
    @apply inline-flex items-center justify-center font-semibold text-sm py-2 px-5 rounded-full bg-blue-500 text-white shadow-md;
  }

  .user-tab-inactive {
    @apply inline-flex items-center justify-center font-medium text-sm py-2 px-5 rounded-full bg-white text-gray-500 shadow-sm border border-gray-200;
  }

  .user-tab-inactive:hover {
    @apply bg-gray-100 text-gray-700 shadow;
  }

  /* Filter modal pills */
  .filter-region-pill {
    @apply text-sm font-semibold px-3 py-1.5 rounded-full transition-all cursor-pointer focus:outline-none;
  }

  .filter-region-pill.is-active {
    @apply ring-2 ring-offset-1;
  }
  
  /* Alert styles */
  .alert-success {
    @apply py-3 px-3 mx-10 bg-green-300 rounded-lg mt-4 text-gray-700;
  }

  .alert-failure {
    @apply py-3 px-3 mx-10 bg-red-300 rounded-lg mt-4 text-gray-700;
  }

  .alert-info {
    @apply py-3 px-3 mx-10 bg-yellow-300 rounded-lg mt-4 text-gray-700;
  }
  
  /* Avatar styles */
  .avatar {
    @apply rounded-full ring-4 ring-white inline-flex items-center justify-center shadow-lg;
  }
  
  /* Header styles */
  .posts-header {
    @apply text-xl sm:text-3xl lg:text-5xl leading-tight font-extrabold tracking-tight text-gray-600 mb-4 sm:mb-8;
  }
  
}

@tailwind utilities;
@layer components {
  /* line 2, app/assets/stylesheets/components/alerts.scss */
  .alert-success {
    @apply py-3 px-3 mx-10 bg-green-300 rounded-lg mt-4 text-hardGray-700;
  }
  /* line 6, app/assets/stylesheets/components/alerts.scss */
  .alert-failure {
    @apply py-3 px-3 mx-10 bg-red-300 rounded-lg mt-4 text-hardGray-700;
  }
  /* line 10, app/assets/stylesheets/components/alerts.scss */
  .alert-info {
    @apply py-3 px-3 mx-10 bg-yellow-300 rounded-lg mt-4 text-hardGray-700;
  }
}
@layer components {
  /* line 2, app/assets/stylesheets/components/avatar.scss */
  .avatar {
    @apply rounded-full ring-2 ring-white inline-flex items-center justify-center;
  }
}
@layer components {
  /* Custom Sky colors */
  /* line 3, app/assets/stylesheets/components/buttons.scss */
  :root {
    --sky-400: #38bdf8;
    --sky-500: #0ea5e9;
    --sky-600: #0284c7;
  }
  /* line 9, app/assets/stylesheets/components/buttons.scss */
  .nav-sort-selection {
    @apply block px-10 py-2 mt-2 text-lg text-gray-600 cursor-pointer font-semibold bg-transparent md:mt-0 hover:bg-warmGray-200;
  }
  /* line 13, app/assets/stylesheets/components/buttons.scss */
  .light-blue-button {
    @apply relative w-44 flex justify-center py-2 mt-2 px-4 border border-transparent cursor-pointer
    leading-5 font-medium rounded-md text-white focus:outline-none
    transition duration-150 ease-in-out font-bold;
    background-color: var(--sky-500);
  }
  /* line 19, app/assets/stylesheets/components/buttons.scss */
  .light-blue-button:hover {
    background-color: var(--sky-400);
  }
  /* line 23, app/assets/stylesheets/components/buttons.scss */
  .light-blue-button:focus {
    border-color: var(--sky-600);
  }
  /* line 27, app/assets/stylesheets/components/buttons.scss */
  .light-blue-button:hover .icon {
    @apply text-white;
  }
}
@layer components {
  /* line 2, app/assets/stylesheets/components/headers.scss */
  .posts-header {
    @apply text-3xl sm:text-5xl lg:text-5xl leading-none font-extrabold tracking-tight text-warmGray-600 mb-8 sm:mb-12;
  }
}
@layer components {
  /* line 2, app/assets/stylesheets/components/post.scss */
  .post-key {
    @apply inline font-bold text-lg mr-1 text-hardGray-900;
  }
  /* line 6, app/assets/stylesheets/components/post.scss */
  .post-value {
    @apply text-lg font-bold text-blue-800 mr-6 hover:underline;
  }
  /* line 10, app/assets/stylesheets/components/post.scss */
  .write-up-p {
    @apply pl-2 text-warmGray-600 whitespace-pre-line;
  }
  /* line 14, app/assets/stylesheets/components/post.scss */
  .info-title {
    @apply font-bold text-xl md:text-3xl text-warmGray-700 pb-2 inline-block;
  }
  /* line 18, app/assets/stylesheets/components/post.scss */
  .post-title {
    @apply block font-bold text-2xl mt-4 text-warmGray-700;
  }
  /* line 22, app/assets/stylesheets/components/post.scss */
  .post-select {
    @apply text-sm text-warmGray-600 py-2 px-2 mt-2 mb-3 w-full bg-white rounded border border-solid border-warmGray-300;
  }
  /* line 26, app/assets/stylesheets/components/post.scss */
  .posts-heading-area {
    @apply flex-1 mx-2 md:mx-8 mr-0 mt-2 md:mt-4 lg:mr-40 lg:ml-8;
  }
}
/* miscellaneous */
/* line 4, app/assets/stylesheets/custom.scss */
select option {
  background: #d6d3d1;
  font-weight: bold;
  padding: 3px 3px;
}

/* line 8, app/assets/stylesheets/custom.scss */
select option:hover {
  background: yellow;
}

/* line 13, app/assets/stylesheets/custom.scss */
select, input, textarea {
  scroll-behavior: smooth;
  background-color: white;
}

/* line 16, app/assets/stylesheets/custom.scss */
select:focus, input:focus, textarea:focus {
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
  outline: none;
}

/* line 22, app/assets/stylesheets/custom.scss */
.screen-minus-navbar {
  height: calc(100vh - 95px);
}

/* line 26, app/assets/stylesheets/custom.scss */
.min-h-screen-minus-navbar {
  min-height: calc(100vh - 140px);
}
/* Custom typography styles for kbd elements */
/* line 2, app/assets/stylesheets/custom_typography.scss */
.prose kbd {
  font-family: inherit;
  font-size: 0.875em;
  font-weight: 500;
  border-radius: 0.25rem;
  padding: 0.125rem 0.25rem;
  background-color: #f3f4f6;
  /* Safe gray-100 hex */
  border: 1px solid #e5e7eb;
  /* Safe gray-200 hex */
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.1), 0 3px 0 rgba(15, 23, 42, 0.1);
  /* Safe rgba syntax */
}
/* line 1, app/assets/stylesheets/filters.scss */
.filter-modal-width {
  width: 500px;
  max-width: 95vw;
}
@font-face {
  font-family: 'Inter var';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-latin-wght-normal-007fce1bff9f7f37469fe61eff9ef62c033af63fccb0e65a2e94f4e0c14d9d6d.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter var';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-latin-ext-wght-normal-a07c2ff83e7b39233d9c6dfcb53f4c00fa70302ea78482ef66aabca009df9f46.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* line 5, app/assets/stylesheets/googlemap.scss */
#map {
  width: 64%;
  height: 350px;
  display: inline-flex;
  position: relative;
}

/* line 12, app/assets/stylesheets/googlemap.scss */
element.style {
  overflow: hidden;
}

@media (max-width: 768px) {
  /* line 17, app/assets/stylesheets/googlemap.scss */
  #map {
    width: 100%;
    height: 250px;
    display: inline-flex;
  }
}
/* line 3, app/assets/stylesheets/js_will_paginate.scss */
.pagination {
  cursor: default;
  margin-top: 30px;
  margin-bottom: 30px;
  margin-left: 15px;
  /* self-clearing method: */
}

/* line 9, app/assets/stylesheets/js_will_paginate.scss */
.pagination a, .pagination span, .pagination em {
  padding: 0.2em 0.5em;
  border-radius: 7px;
  display: block;
  float: left;
  margin-left: 2px;
  margin-top: 5px;
  margin-right: 2px;
}

/* line 17, app/assets/stylesheets/js_will_paginate.scss */
.pagination .disabled {
  color: #999999;
  border: 2px solid #dddddd;
}

/* line 20, app/assets/stylesheets/js_will_paginate.scss */
.pagination .current {
  font-style: normal;
  font-weight: bold;
  background: #2e6ab1;
  color: white;
  border: 2px solid #2e6ab1;
}

/* line 26, app/assets/stylesheets/js_will_paginate.scss */
.pagination a {
  text-decoration: none;
  font-weight: bold;
  color: #105cb6;
  border: 2px solid #9aafe5;
}

/* line 31, app/assets/stylesheets/js_will_paginate.scss */
.pagination a:hover, .pagination a:focus {
  color: #000033;
  border-color: #000033;
}

/* line 34, app/assets/stylesheets/js_will_paginate.scss */
.pagination .page_info {
  background: #2e6ab1;
  color: white;
  padding: 0.4em 0.6em;
  width: 22em;
  margin-bottom: 0.3em;
  text-align: center;
}

/* line 41, app/assets/stylesheets/js_will_paginate.scss */
.pagination .page_info b {
  color: #000033;
  background: #6aa6ed;
  padding: 0.1em 0.25em;
}

/* line 45, app/assets/stylesheets/js_will_paginate.scss */
.pagination:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

/* line 51, app/assets/stylesheets/js_will_paginate.scss */
* html .pagination {
  height: 1%;
}

/* line 53, app/assets/stylesheets/js_will_paginate.scss */
*:first-child + html .pagination {
  overflow: hidden;
}
/* ---- .grid-item ---- */
/* line 9, app/assets/stylesheets/masonry.scss */
.grid-sizer,
.grid-item {
  width: 33.333%;
}

/* line 12, app/assets/stylesheets/masonry.scss */
.grid-sizer:hover,
.grid-item:hover {
  cursor: pointer;
  opacity: .8;
}

/* line 18, app/assets/stylesheets/masonry.scss */
.gutter-sizer {
  width: .5%;
}

/* line 22, app/assets/stylesheets/masonry.scss */
.grid-item {
  box-sizing: border-box;
  float: left;
}

/* line 27, app/assets/stylesheets/masonry.scss */
.grid-item img {
  box-sizing: border-box;
  display: block;
  width: 100%;
}

/* line 34, app/assets/stylesheets/masonry.scss */
.image-holder {
  margin: 3px;
  display: inline-flex;
  flex-direction: column;
  height: 18.5em;
  width: 98%;
  border: solid #dddada;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  background: rgba(242, 242, 243, 0.918);
}

/* line 45, app/assets/stylesheets/masonry.scss */
.image-holder:hover {
  width: 99%;
}

/* line 50, app/assets/stylesheets/masonry.scss */
#modal {
  display: grid;
  text-align: center;
  justify-content: center;
  align-items: center;
}

/* line 57, app/assets/stylesheets/masonry.scss */
#modal-layer {
  text-align: center;
  display: none;
  justify-content: center;
  align-items: center;
  position: fixed;
  /* create the modal window layer, and have it fill the entire screen */
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  /* set the modal window layer's background color to a translucent black */
  z-index: 9;
}

/* line 71, app/assets/stylesheets/masonry.scss */
.current-img {
  align-self: center;
  max-width: 85%;
  max-height: 85%;
  top: -100%;
  bottom: -100%;
  left: -100%;
  right: -100%;
}

/* line 81, app/assets/stylesheets/masonry.scss */
.back-arrow {
  position: fixed;
  opacity: 60%;
  left: 5%;
}

/* line 85, app/assets/stylesheets/masonry.scss */
.back-arrow:hover {
  width: 85px;
  height: 85px;
}

/* line 91, app/assets/stylesheets/masonry.scss */
.forward-arrow {
  position: fixed;
  opacity: 60%;
  right: 5%;
}

/* line 95, app/assets/stylesheets/masonry.scss */
.forward-arrow:hover {
  width: 85px;
  height: 85px;
}
/* line 1, app/assets/stylesheets/master_map.scss */
#trace-map {
  height: 60vh;
}

@media (min-width: 768px) {
  /* line 6, app/assets/stylesheets/master_map.scss */
  #trace-map {
    height: 70vh;
  }
}
/* line 1, app/assets/stylesheets/navbars.scss */
.pre-size-avatar-header {
  height: 35px;
  width: 35px;
  margin-right: 3px;
}
/* line 3, app/assets/stylesheets/posts.scss */
iframe {
  width: 640px;
  height: 390px;
}

@media (max-width: 1000px) {
  /* line 9, app/assets/stylesheets/posts.scss */
  iframe {
    width: 100%;
  }
}

@media (max-width: 600px) {
  /* line 15, app/assets/stylesheets/posts.scss */
  iframe {
    height: 250px;
  }
}

/* line 21, app/assets/stylesheets/posts.scss */
.card-link {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}

/* line 30, app/assets/stylesheets/posts.scss */
.posts {
  word-break: break-word;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *






 */