#sidebar {
  --tw-translate-x: -100%;
  background-color: #9AA8B3;
}

#sidebar a {
  color: #032540;
}

#sidebar a:hover {
  color: #fff;
}

#sidebar a.split {
  float: top;
  background-color: #9AA8B3;
  color: #fff;
}

#menu-close-icon {
  display: none;
}

#menu-open:checked ~ #sidebar {
  --tw-translate-x: 0;
}
#menu-open:checked ~ * #mobile-menu-button {
  background-color: rgba(31, 41, 55, var(--tw-bg-opacity));
}
#menu-open:checked ~ * #menu-open-icon {
  display: none;
}
#menu-open:checked ~ * #menu-close-icon {
  display: block;
}

@media (min-width: 768px) {
  #sidebar {
      --tw-translate-x: 0;
  }
}
/* This file is used to create @apply rules that allow multiple classes to be combined for easy re-use for */

@tailwind base;
@tailwind components;
@tailwind utilities;


@layer components {
    .btn-sml-blue {
        @apply rounded-lg py-1 px-3 bg-blue-600 text-white inline-block font-medium cursor-pointer hover:bg-blue-400;
    }

    .btn-blue {
        @apply rounded-md py-3 px-5 bg-blue-600 text-white inline-block font-medium cursor-pointer hover:bg-blue-400;
    }

    .pill {
        @apply rounded-full px-3 py-1 inline-block font-medium uppercase;
    }

    .pill-blue {
        @apply pill bg-blue-600 text-white ;
    }

    .pill-gray {
        @apply pill bg-gray-500 text-white;
    }

    /* Form components */
    .form-text-input {
        @apply block px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring focus:ring-blue-500 focus:border-blue-500 sm:text-sm;
    }

    .form-text-select {
        @apply block px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring focus:ring-blue-500 focus:border-blue-500 sm:text-sm;
    }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) 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
 * 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.
 *


 */

/*
 Temporary work around to hide an error that is apearing in react app when rendering a text area with a width set in css
 https://stackoverflow.com/questions/76187282/react-resizeobserver-loop-completed-with-undelivered-notifications

 */

iframe#webpack-dev-server-client-overlay {
   display: none !important
}

body.application-layout {
   background-color: #9AA8B3;
}

.bg-light-blue {
   background-color: #9AA8B3;
}

#login-wrapper {
   height: 100vh;
   padding: 5px;
}

#login-box {
   background-color: #fff;
   border-radius: 15px;
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
   padding: 10px 20px;
   transition: transform 0.2s;
   width: 100%;
   max-width: 500px;
   margin: 0 auto;
   text-align: center;
}

.bg-light-blue {
   background-color: #9AA8B3;
}

/* Hide the "powered by google" text in any google places lookup */
.pac-container:after {
   background-image: none !important;
   height: 0px;
}

/* In the proposals index, style disabled "links" */
a.edit-proposal-link .edit-proposal-link-inner a.edit-cma-link .edit-cma-link-inner {
   color: inherit;
   cursor: pointer;
}

.edit-proposal-link-inner .edit-cma-link-inner {
   color: gray;
   cursor: not-allowed;
}

nav.pagination {
   text-align: center;
   margin-top: 5px;
   margin-bottom: 5px;
}

.bg-pm-light-blue {
   background-color: #9AA8B3;
}

/*# sourceMappingURL=application.css-ecaf913f9fb3e84b77953ed383daa07a0abe356248d6a011b6e59d50d83b9437.map */