.flex-container {
  display: flex;
  flex-direction: column;
}

.editor-area {
  display: block;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}

.button-bar {
  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}

trix-toolbar .trix-button--icon {
  font-size: inherit;
  width: 5.6em !important;
  height: 6em !important;
  max-width: calc(0.8em + 8.5vw) !important;
  text-indent: -9999px;
}


.mobile-trix-editor {
  font-family: "SpaceMono-Regular", sans-serif;
  padding: 12px !important;
  zoom: 300%;
}

.trix-button {
  display: inline-block;
  border: none !important;
  cursor: pointer;
}


/*div.button {
  flex: 1;
  font-size: 30;
  border-width: 1;
  border-color: 'black';
  width: 20px;
  height: 20px;
}
*/
/*.button {
  background-color: #04AA6D; 
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 48px;
}*/

/*
 * Provides a drop-in pointer for the default Trix stylesheet that will format the toolbar and
 * the trix-editor content (whether displayed or under editing). Feel free to incorporate this
 * inclusion directly in any other asset bundle and remove this file.
 *

*/

/*
 * We need to override trix.css’s image gallery styles to accommodate the
 * <action-text-attachment> element we wrap around attachments. Otherwise,
 * images in galleries will be squished by the max-width: 33%; rule.
*/
.trix-content .attachment-gallery > action-text-attachment,
.trix-content .attachment-gallery > .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}

.trix-content .attachment-gallery.attachment-gallery--2 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--2 > .attachment, .trix-content .attachment-gallery.attachment-gallery--4 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--4 > .attachment {
  flex-basis: 50%;
  max-width: 50%;
}

.trix-content action-text-attachment .attachment {
  padding: 0 !important;
  max-width: 100% !important;
}

figure.attachment.attachment--content {
  display: inline-flex;
}

trix-editor {
  min-height: 20rem;
  height: auto;
}

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

@layer components {
  .btn{
    text-transform: none;
  }
}

.primary {
  @apply bg-cyan-600 text-cyan-100 dark:bg-gray-800 dark:text-cyan-300;
}

.btn-primary {
  @apply border-0 bg-cyan-600 text-cyan-50 hover:bg-cyan-100 hover:text-cyan-600;
}

.btn-secondary {
  @apply border-0 bg-sky-700 text-gray-100 hover:bg-gray-200 hover:text-gray-500;
}
.btn-tertiary {
  @apply border-0 bg-teal-700 text-gray-100 hover:bg-teal-200 hover:text-gray-500;
}
.btn-quiet {
  @apply border-0 bg-gray-700 text-gray-100 hover:bg-gray-200 hover:text-gray-500;
}

.primary-colors {
  @apply text-cyan-600 fill-cyan-600 stroke-cyan-600 border-cyan-600 dark:text-cyan-400 dark:fill-cyan-400 dark:stroke-cyan-400 dark:border-cyan-200;
}
.secondary-colors {
  @apply text-sky-700 fill-sky-700 stroke-sky-700 dark:text-sky-400 dark:fill-sky-400 dark:stroke-sky-400;
}
.tertiary-colors {
  @apply text-teal-600 fill-teal-600 stroke-teal-600 dark:text-teal-400 dark:fill-teal-400 dark:stroke-teal-400;
}
.quiet-colors {
  @apply text-gray-400 fill-gray-400 stroke-gray-400 dark:text-gray-700 dark:fill-gray-400 dark:stroke-gray-700;
}

.primary-background {
  @apply bg-gray-100 dark:bg-cyan-900
}

.primary-border {
  @apply border-2 border-cyan-600 dark:border-cyan-200
}

.dot-size {
  @apply w-2 h-2;
}


.visit-colors {  @apply visit-bg visit-border visit-fill; }
.visit-dot-empty {  @apply rounded-full visit-bg dot-size; }
.visit-dot-bordered { @apply rounded-full visit-bg border-2 border-sky-500 dark:border-sky-500 dot-size; }
.visit-bg { @apply bg-sky-300 dark:bg-sky-300; }
.visit-border { @apply border-sky-500 dark:border-sky-300; }
.visit-stroke { @apply stroke-sky-500 dark:stroke-sky-300; }
.visit-fill { @apply fill-sky-200 dark:fill-sky-300; }
.visit-card { @apply border-2 rounded-lg shadow-xl px-5 py-3 mb-2}


.event-colors { @apply event-bg event-border event-fill event-stroke; }
.event-dot-empty{ @apply rounded-full event-bg dot-size; }
.event-dot-bordered { @apply rounded-full event-bg border-2 event-border dot-size; }
.event-bg { @apply bg-teal-300 dark:bg-teal-300; }
.event-border { @apply border-teal-700 dark:border-teal-300; }
.event-stroke { @apply stroke-teal-700 dark:stroke-teal-300; }
.event-fill { @apply fill-teal-700 dark:fill-teal-300; }
.event-card { @apply border-2 rounded-lg shadow-xl px-5 py-3 mb-2}


.task-colors { @apply task-bg task-border task-fill task-stroke; }
.task-dot-empty{ @apply rounded-full task-bg dot-size; }
.task-dot-bordered{ @apply rounded-full border-2 task-bg task-border dot-size; }
.task-bg { @apply bg-indigo-300 dark:bg-indigo-400 }
.task-border { @apply  border-indigo-700 dark:border-indigo-300; }
.task-stroke { @apply stroke-indigo-700 dark:stroke-indigo-300; }
.task-fill { @apply fill-indigo-200 dark:fill-indigo-300 }
.task-card { @apply border-2 rounded-lg shadow-xl px-5 py-3 mb-2}

.text-first-time-help {
  @apply bg-cyan-50 text-cyan-800 border-red-500 rounded-md shadow-md px-3 py-2 dark:bg-cyan-700 dark:text-yellow-100;
}

.page-title {
  @apply text-2xl font-semibold lg:text-3xl primary-colors;
}

.input-label {
/*  @apply text-sm font-medium leading-6 text-gray-500 dark:text-gray-400;*/
  @apply leading-6 secondary-colors;
}
.input-label-explanation {
  @apply text-xs font-light leading-6 text-gray-500 dark:text-gray-400;
}

.input-field {
/*  @apply block w-full rounded-md border-0 py-1.5 text-gray-900 dark:bg-gray-300 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-cyan-600 focus:dark:ring-gray-100 sm:text-sm sm:leading-6;*/
/*   @apply block w-full rounded-md py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:border-cyan focus:outline-none focus:ring-0 placeholder:text-gray-400 sm:text-sm sm:leading-6;  */
    @apply block w-full border border-slate-300 rounded-md text-sm shadow-sm focus:outline-none focus:border-cyan-600 focus:ring-1 focus:ring-cyan-600 dark:text-gray-900 text-lg;
}

.input-field-flex {
    @apply flex w-full border border-slate-300 rounded-md focus:outline-none focus:border-cyan-600 focus:ring-1 focus:ring-cyan-600 dark:text-gray-900;
}

.input-combo {
  @apply shadow-sm ring-1 ring-inset ring-gray-300 text-gray-900 placeholder:text-gray-400 py-1;
}

.form-title {
  @apply text-xl leading-9 tracking-tight;
}
/* need to create time-select-specific styling b/c the regular styling will break the hours and minutes
   selectors vertically and that just looks weird */
.time-input-field {
  @apply rounded-md border-0 py-1.5 text-gray-900 dark:bg-gray-300 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-1 focus:ring-inset focus:ring-cyan-600 focus:dark:ring-gray-100 sm:text-sm sm:leading-6;
}

.field_with_errors {
  @apply border-2 border-cyan-600
}

.required {
  @apply text-rose-700 text-xs italic dark:text-rose-500;
}

.indigo-card {
  @apply rounded-lg bg-indigo-200 shadow-xl px-5 py-3
}
.cyan-card {
/*  @apply rounded-lg bg-gray-100 border-cyan-600 border-2 dark:bg-cyan-200 dark:border-0 shadow-xl px-3 py-3*/
@apply rounded-lg bg-gray-100 border-cyan-700 border-2 dark:bg-gray-800 dark:text-gray-200 dark:border-0 shadow-xl px-3 py-3
}
.cyan-card-tight {
/*  @apply rounded-lg bg-gray-100 border-cyan-600 border-2 dark:bg-cyan-200 dark:border-0 shadow-xl px-3 py-3*/
@apply rounded-lg bg-gray-100 border-cyan-600 border-2 dark:bg-gray-900 dark:text-gray-200 dark:border-0 shadow-xl px-3 py-1
}

.yellow-card-tight {
/*  @apply rounded-lg bg-yellow-200 shadow-xl px-5 py-3*/
  @apply rounded-lg bg-yellow-100 border-cyan-600 border-2 dark:bg-gray-700 dark:text-gray-200 dark:border-0 shadow-xl px-3 py-1
}
.teal-card {
/*  @apply rounded-lg bg-teal-200 shadow-xl px-5 py-3*/
  @apply rounded-lg bg-gray-100 border-teal-600 border-2 dark:bg-teal-200 dark:border-0 shadow-xl px-3 py-3
}
.emerald-card {
/*  @apply rounded-lg bg-emerald-200 shadow-xl px-5 py-3*/
  @apply rounded-lg bg-gray-100 border-emerald-600 border-2 dark:bg-emerald-200 dark:border-0 shadow-xl px-3 py-3
}
.elastic-card {
  @apply flex grow;
}

.selected-card {
  @apply border-4 border-green-600 dark:border-green-400;
}

.tag-badge {
  @apply bg-gray-100 text-cyan-600 border-cyan-600 shadow-xl dark:bg-cyan-600 dark:text-gray-100;
}

.announcement-new {
  @apply rounded-lg px-2 py-2 bg-cyan-200 text-cyan-800
}
.announcement-fix {
  @apply rounded-lg  px-2 py-2 bg-green-200 text-green-800
}
.announcement-update {
  @apply rounded-lg  px-2 py-2 bg-purple-200 text-purple-800
}


.dashboard-widget {
  @apply bg-gray-100 dark:bg-gray-800 shadow-xl px-3 py-3 mx-1 mb-1 dark:border-2 border-cyan-900;
}

.message-widget {
  @apply bg-gray-100 dark:bg-gray-800 shadow-xl dark:border-2 border-cyan-900;
}


.btn-cc-ghost {
  @apply text-gray-500 hover:bg-gray-300 hover:text-cyan-700 dark:bg-cyan-200 dark:border-0 dark:hover:bg-gray-300 dark:hover:text-cyan-800;
}

.selected-checkbox-div {
  @apply bg-cyan-500 text-cyan-800 dark:bg-cyan-700 dark:text-cyan-200;
}


/*
label.ss-checkbox {
  @apply relative flex justify-between items-center group p-2
}
label.ss-checkbox > input {
  @apply absolute left-1/2 -translate-x-1/2 peer invisible;
}*/
/*label.ss-checkbox > span {
  @apply w-8 h-5 flex items-center flex-shrink-0 ml-4 p-1 bg-gray-300 rounded-full duration-300 ease-in-out peer-checked:bg-cyan-400 after:w-8 after:h-8 after:bg-white after:rounded-full after:shadow-md after:duration-300 peer-checked:after:translate-x-6 group-hover:after:translate-x-1;
}
*/

/*TODO - standarize the styling for the different cards/tiles*/
.task-tile {
  @apply rounded-lg dark:bg-sky-300 dark:text-cyan-700 dark:fill-cyan-700;
}

trix-editor {
  @apply bg-gray-100 text-gray-800;
}
.trix-content {
  min-height: 20px;
  overflow-y: auto;
  .resizable {
    resize: vertical;
  }
}
.trix-content a {
  @apply underline;
}



/* TODO:  I'm hiding the toolbar for now (on larger screens) because it doesn't
look good in dark mode.  The buttons on the toolbar are images so changing 
them is ugly.  I found a PR though that fixes this...waiting until that hits
a stable release. https://github.com/bullet-train-co/bullet_train-core/pull/224
*/
trix-toolbar {
  @apply hidden dark:bg-gray-100;
}
.trix-editor-one-liner {
  min-height: 36px; 
  max-height: 200px;
  overflow-y: auto;
  padding: 5px;
}

.one-line {
  min-height: 36px; 
  height: 36px;
  max-height: 200px;
  overflow-y: auto;
  padding: 5px;
}


/* This is the popup list of possible mentions triggered by typing @ */
.tribute-container {
  @apply px-3 py-2 rounded-md shadow-lg bg-cyan-700 text-cyan-200 dark:bg-cyan-700 dark:text-cyan-200;
}


.trix-button {
  display: inline-block;
  height: 48px !important;
  width: 48px !important;
  padding: 3px 5px !important;
  border: none !important;
  cursor: pointer;
}

.message {
  .title {
    @apply ml-5 italic;
  }
}

.button-bar {
  @apply rounded-md;
  border-color: red;
  border-width: 2px;
  border-radius: 16;
}

.tailwind-disabled {
  @apply opacity-50;
  pointer-events: none;
}
.direct-upload {
  display: inline-block;
  position: relative;
  padding: 2px 4px;
  margin: 0 3px 3px 0;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  font-size: 11px;
  line-height: 13px;
}

.direct-upload--pending {
  opacity: 0.6;
}

.direct-upload__progress {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  opacity: 0.2;
  background: #0076ff;
  transition: width 120ms ease-out, opacity 60ms 60ms ease-in;
  transform: translate3d(0, 0, 0);
}

.direct-upload--complete .direct-upload__progress {
  opacity: 0.4;
}

.direct-upload--error {
  border-color: red;
}

input[type=file][data-direct-upload-url][disabled] {
  display: none;
}
#email-wrapper {
  background: #ecfeff;
  padding-top: 10px;
  padding-bottom: 10px; }
  #email-wrapper #header {
    background: #a5f3fc;
    margin: 30px 30px 0px 30px;
    padding: 5px 30px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px; }
    #email-wrapper #header .logo {
      width: 100px;
      height: auto; }
  #email-wrapper #body {
    background: #a5f3fc;
    margin: 0px 30px;
    margin-bottom: 30px;
    padding: 10px 30px;
    padding-bottom: 15px;
    border: 1px solid #0891b2;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px; }
  #email-wrapper .small-text {
    font-size: 8px; }
[data-bridge-components~="navigation"]
[data-controller~="bridge--navigation"] {
  display: none;
}
[data-bridge-components~="button"]
[data-controller~="bridge--button"] {
  display: none;
}
[data-bridge-components~="menu"]
[data-controller~="bridge--menu"] {
  display: none;
}
/*
 * 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.
 *



 */

@import 'font-awesome'