/* Basic picocss alerts */

:root {
  --amber-50: #fff8e1;
  --amber-900: #ff6f00;
  --green-50: #e8f5e9;
  --green-800: #1b5e20;
  --red-50: #ffebee;
  --red-900: #b71c1c;
}

.alert-danger {
  color: var(--red-900);
  background-color: var(--red-50);
}
.alert-warning {
  color: darken(var(--amber-900, 20%));
  background-color: var(--amber-50);
}
.alert-alert {
  color: darken(var(--amber-900, 20%));
  background-color: var(--amber-50);
}
.alert-success {
  color: var(--green-800);
  background-color: var(--green-50);
}
.alert-notice {
  color: var(--green-800);
  background-color: var(--green-50);
}
/* Basic picocss alerts */

.delete {
  color: var(--red-900) !important;
  border-color: var(--red-900) !important;
}

.gsi-material-button {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -webkit-appearance: none;
  background-color: WHITE;
  background-image: none;
  border: 1px solid #747775;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #1f1f1f;
  cursor: pointer;
  font-family: 'Roboto', arial, sans-serif;
  font-size: 14px;
  height: 40px;
  letter-spacing: 0.25px;
  outline: none;
  overflow: hidden;
  padding: 0 12px;
  position: relative;
  text-align: center;
  -webkit-transition: background-color .218s, border-color .218s, box-shadow .218s;
  transition: background-color .218s, border-color .218s, box-shadow .218s;
  vertical-align: middle;
  white-space: nowrap;
  width: auto;
  max-width: 400px;
  min-width: min-content;
}

.gsi-material-button .gsi-material-button-icon {
  height: 20px;
  margin-right: 12px;
  min-width: 20px;
  width: 20px;
}

.gsi-material-button .gsi-material-button-content-wrapper {
  -webkit-align-items: center;
  align-items: center;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  height: 100%;
  justify-content: space-between;
  position: relative;
  width: 100%;
}

.gsi-material-button .gsi-material-button-contents {
  -webkit-flex-grow: 1;
  flex-grow: 1;
  font-family: 'Roboto', arial, sans-serif;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}

.gsi-material-button .gsi-material-button-state {
  -webkit-transition: opacity .218s;
  transition: opacity .218s;
  bottom: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.gsi-material-button:disabled {
  cursor: default;
  background-color: #ffffff61;
  border-color: #1f1f1f1f;
}

.gsi-material-button:disabled .gsi-material-button-contents {
  opacity: 38%;
}

.gsi-material-button:disabled .gsi-material-button-icon {
  opacity: 38%;
}

.gsi-material-button:not(:disabled):active .gsi-material-button-state, 
.gsi-material-button:not(:disabled):focus .gsi-material-button-state {
  background-color: #303030;
  opacity: 12%;
}

.gsi-material-button:not(:disabled):hover {
  -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
}

.gsi-material-button:not(:disabled):hover .gsi-material-button-state {
  background-color: #303030;
  opacity: 8%;
}
/* Light color scheme (Default) */
/* Can be forced with data-theme="light" */
[data-theme="light"], :root:not([data-theme="dark"]) {
  --pico-background-color: #f9f9f9;
}

/* Dark color scheme (Auto) */
/* Automatically enabled if user has Dark mode enabled */
@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --pico-background-color: #13171f;
  }
}

/* Dark color scheme (Forced) */
/* Enabled if forced with data-theme="dark" */
[data-theme="dark"] {
  --pico-background-color: #13171f;
}

:root:not([data-theme=dark]), [data-theme=light] {
  --pico-secondary: #FDCB6E;
}

html {
  /* background-color: #f9f9f9; */
}

body {
}

main {
  min-height: 75vh;
}

section {
  margin-bottom: 5rem;
}

.d-flex {
  display: flex;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.my-auto {
  margin-top: auto;
  margin-bottom: auto;
}

nav li a {
  color: var(--pico-h1-color);
  font-weight: 500;
}

nav .hide-sm {
  @media (max-width: 575px) {
    display: none;
  }
}

.mb-2 {
  margin-bottom: 2rem;
}

.mb-4 {
  margin-bottom: 4rem;
}

.pr-2 {
  padding-right: 2rem;
}

.px-4 {
  padding-right: 4rem;
  padding-left: 4rem;
}

.double-border {
  border-bottom: var(--pico-color);
  border-bottom-style: double;
}

.border-top {
  border-top: var(--pico-color);
  border-top-style: solid;
}
.border-bottom {
  border-bottom: var(--pico-color);
  border-bottom-style: solid;
}

footer {
  a {
    color: var(--pico-h1-color);
    font-weight: 500;
  }
  section {
    margin-block:calc(var(--pico-spacing));
    padding-top: calc(var(--pico-spacing));
    border-top-style: double;
    border-top-color: var(--pico-color);
    /* border-top: var(--pico-border-width) double var(--pico-muted-border-color); */
  }
}

.or-container {
  text-align: center;
  padding-top: 10px;
  margin: 0;
  clear: both;
  font-variant: small-caps;
}

.or-hr {
  margin-bottom: 0;
  position: relative;
  height: 0;
  border: 0;
  border-top: 1px solid gray;
}

.or {
  display: inline-block;
  top: -20px;
  position: relative;
  padding: 5px 10px;
  background-color: #f9f9f9;
}

.warning-zone {
  /* border-color: black;
  border-style: dashed;
  border-width: 1px; */
  padding-top: 60px;
  /* background-color: rgb(196, 174, 174); */
}

svg text {
  fill: var(--pico-h1-color);
}

svg g .logo-icon {
  stroke: var(--pico-h1-color);
}

.post-body {
  margin-top: 5vh;
}

article {
  color: var(--pico-muted-color);
  p {
    font-size: 1rem;
  }
}

article .icon {
  margin-right: 10px;
  color: var(--pico-secondary);
}

article svg {
  color: var(--pico-secondary);
}

.hero {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 5rem;
  /* text-align: center; */
  margin-bottom: 3.5rem;
}

.hero h1 {
  margin-bottom: calc(var(--pico-spacing)* 2);
}

.hero h2 {
  margin-bottom: calc(var(--pico-spacing));
}

.hero p {
  font-size: 1.25rem;
  text-wrap: balance;
}

.services {
  margin-top: 3.5rem;
}

.services h2 {
  text-align: center;
  margin-bottom: calc(var(--pico-spacing)* 2);
}

.centered {
  margin-top: 3.5rem;
  h1 {
    margin-bottom: calc(var(--pico-spacing)* 2);
    text-align: center;
  }
  @media (min-width: 1024px) {
    max-width: 650px;
    margin-right: auto;
    margin-left: auto;
  }
}

.icon {
  width: 36px;
  height: 36px;
  margin-bottom: 1rem;
}

.local h2 {
  text-align: center;
}

.local h3 {
  text-align: center;
}

.local svg {
  color: var(--pico-secondary);
}

.bullet-box {
  max-width: 850px;
  margin-right: auto;
  margin-left: auto;
}

.contact-form {
  margin-top: 3rem;
}

.contact-button {
  display: flex;
  justify-content: center;
  margin-top: 4rem;
}

form .btn {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

.middle {
  display: flex;
  justify-content: center;
}

.dashboard {
  margin-top: 1rem;
}

.svg-container {
  margin-top: auto;
  margin-bottom: auto;
}

.hero svg {
  width: 100%;
  height: auto;
  max-height: 100%;
  @media (max-width: 1200px) {
    padding-top: 1rem;
    max-height: 25vh;
  }
}

.heading {
  margin-top: 3.5rem;
  h1 {
    margin-bottom: calc(var(--pico-spacing)* 2);
    text-align: center;
  }
}

.heading svg {
  width: 100%;
  height: auto;
  max-height: 33vh;
  @media (max-width: 1200px) {
    padding-top: 1rem;
    max-height: 25vh;
  }
}
trix-toolbar .trix-button--icon-sup::before{
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" height="24" width="24"><path d="M500.065 270.691H383.611c3.092-18.342 24.015-34.022 47.984-50.038 34.415-22.995 76.138-50.642 76.138-103.222 0-50.301-38.48-85.431-93.577-85.431-37.629 0-72.116 19.458-90.794 50.314-3.321 5.486-1.706 12.623 3.631 16.18l24.42 16.276c5.32 3.546 12.556 2.364 16.309-2.812 10.243-14.13 24.825-24.68 42.168-24.68 26.189 0 37.912 17.288 37.912 34.421 0 21.219-22.471 36.854-48.49 54.956-35.769 24.886-80.283 55.857-80.283 114.931 0 5.562.558 11.025 1.433 17.915.762 5.997 5.861 10.499 11.906 10.499H500c6.627 0 12-5.373 12-12v-25.375c0-6.591-5.343-11.934-11.935-11.934zM245.92 432H276c6.627 0 12 5.373 12 12v24c0 6.627-5.373 12-12 12h-59.675a12 12 0 0 1-10.19-5.662l-54.204-87.153c-3.262-4.892-6.132-10.128-7.99-13.714-1.773 3.559-4.575 8.823-8.129 14.317l-53.058 86.488A12.005 12.005 0 0 1 72.524 480H12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h31.728l65.48-100.449L48.755 240H12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h66.764a12 12 0 0 1 10.234 5.734l47.525 77.624c2.986 4.976 5.742 10.45 7.54 14.194 1.856-3.636 4.718-8.991 7.984-14.217l48.63-77.701A12 12 0 0 1 210.849 192H276c6.627 0 12 5.373 12 12v24c0 6.627-5.373 12-12 12h-36.769l-60.974 90.984L245.92 432z" class=""></path></svg>');
    height: 18px;
    width: 18px;
    margin: auto auto;
}

trix-toolbar .trix-button--icon-sub::before{
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M500.065 430.691H383.611c3.092-18.342 24.015-34.022 47.984-50.038 34.415-22.995 76.138-50.642 76.138-103.222 0-50.301-38.48-85.431-93.577-85.431-37.629 0-72.116 19.458-90.794 50.314-3.321 5.486-1.706 12.623 3.631 16.18l24.42 16.276c5.32 3.546 12.556 2.364 16.309-2.812 10.243-14.13 24.825-24.68 42.168-24.68 26.189 0 37.912 17.288 37.912 34.421 0 21.219-22.471 36.854-48.49 54.956-35.769 24.886-80.283 55.857-80.283 114.931 0 5.562.558 11.025 1.433 17.915.762 5.997 5.861 10.499 11.906 10.499H500c6.627 0 12-5.373 12-12v-25.375c0-6.591-5.343-11.934-11.935-11.934zM245.92 272H276c6.627 0 12 5.373 12 12v24c0 6.627-5.373 12-12 12h-59.675a12 12 0 0 1-10.19-5.662l-54.204-87.153c-3.262-4.892-6.132-10.128-7.99-13.714-1.773 3.559-4.575 8.823-8.129 14.317l-53.058 86.488A12.005 12.005 0 0 1 72.524 320H12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h31.728l65.48-100.449L48.755 80H12C5.373 80 0 74.627 0 68V44c0-6.627 5.373-12 12-12h66.764a12 12 0 0 1 10.234 5.734l47.525 77.624c2.986 4.976 5.742 10.45 7.54 14.194 1.856-3.636 4.718-8.991 7.984-14.217l48.63-77.701A12.002 12.002 0 0 1 210.85 32H276c6.627 0 12 5.373 12 12v24c0 6.627-5.373 12-12 12h-36.769l-60.974 90.984L245.92 272z" class=""></path></svg>');
    height: 18px;
    width: 18px;
    margin: auto auto;
}

trix-toolbar .trix-button--icon-underline::before{
    background-image: url('data:image/svg+xml;utf8,<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M824 804H200c-4.4 0-8 3.4-8 7.6v60.8c0 4.2 3.6 7.6 8 7.6h624c4.4 0 8-3.4 8-7.6v-60.8c0-4.2-3.6-7.6-8-7.6zm-312-76c69.4 0 134.6-27.1 183.8-76.2C745 602.7 772 537.4 772 468V156c0-6.6-5.4-12-12-12h-60c-6.6 0-12 5.4-12 12v312c0 97-79 176-176 176s-176-79-176-176V156c0-6.6-5.4-12-12-12h-60c-6.6 0-12 5.4-12 12v312c0 69.4 27.1 134.6 76.2 183.8C377.3 701 442.6 728 512 728z"></path></svg>');
    height: 18px;
    width: 18px;
    margin: auto auto;
}

trix-toolbar .trix-button-row{
    /* overflow: scroll; */
}

.trix-content {
    color: var(--pico-color);
}

/* Trix stylesheet includes an h1 style that sets a font-size. Need to override that so it uses Pico sizes */
.trix-content h1 {
    font-size: var(--pico-font-size);
}

.trix-content {
    div, pre {
        margin-left: 1.5rem;
        margin-right: 1.5rem;
        margin-bottom: var(--pico-typography-spacing-vertical);
    }
}


/* https://github.com/lazaronixon/trix-extensions/blob/master/assets/stylesheets/richtext.scss */
trix-toolbar {
    .trix-button--icon-horizontal-rule::before { background-image: image-url(/trix_horizontal_rule.svg); }
    .trix-button--icon-color::before { background-image: image-url(/trix_color.svg); }
  
    .trix-dialog--heading { 
        max-width: 225px;
    }
  
    .trix-dialog--color {
      max-width: 265px;
  
      .trix-dialog__link-fields { flex-direction: column; }
  
      .trix-button-group {
        margin: 1px;
  
        button {
          width: 28px;
          &:after { content: "Ab"; }
          &.trix-active::after { content: "✓"; }
        }
  
        [data-trix-attribute=fgColor1] { color: rgb(136, 118, 38) }
        [data-trix-attribute=fgColor2] { color: rgb(136, 118, 38) }
        [data-trix-attribute=fgColor3] { color: rgb(207, 0, 0) }
        [data-trix-attribute=fgColor4] { color: rgb(216, 28, 170) }
        [data-trix-attribute=fgColor5] { color: rgb(144, 19, 254) }
        [data-trix-attribute=fgColor6] { color: rgb(5, 98, 185) }
        [data-trix-attribute=fgColor7] { color: rgb(17, 138, 15) }
        [data-trix-attribute=fgColor8] { color: rgb(148, 82, 22) }
        [data-trix-attribute=fgColor9] { color: rgb(102, 102, 102) }
  
        [data-trix-attribute=bgColor1] { background-color: rgb(250, 247, 133) }
        [data-trix-attribute=bgColor2] { background-color: rgb(255, 240, 219) }
        [data-trix-attribute=bgColor3] { background-color: rgb(255, 229, 229) }
        [data-trix-attribute=bgColor4] { background-color: rgb(255, 228, 247) }
        [data-trix-attribute=bgColor5] { background-color: rgb(242, 237, 255) }
        [data-trix-attribute=bgColor6] { background-color: rgb(225, 239, 252) }
        [data-trix-attribute=bgColor7] { background-color: rgb(228, 248, 226) }
        [data-trix-attribute=bgColor8] { background-color: rgb(238, 226, 215) }
        [data-trix-attribute=bgColor9] { background-color: rgb(242, 242, 242) }
      }
    }
  
    .trix-dialog {
      padding: 5px;
  
      .trix-dialog-hidden__input {
        position: absolute;
        z-index: -1;
        opacity: 0;
      }
    }
}
  
trix-editor {
    [data-trix-mutable].attachment[data-trix-content-type~="vnd.rubyonrails.horizontal-rule.html"] {
        box-shadow: 0 0 0 2px highlight;
    }
}
  
.trix-content {
  
    .attachment { width: 100%; }
  
    .attachment--content.attachment--horizontal-rule,
    .attachment--content[data-trix-content-type~='vnd.rubyonrails.horizontal-rule.html'] {
      padding: 1.5em 0 0.5em !important;
      margin-bottom: 0.5em
    }
  
    .attachment--content.attachment--horizontal-rule hr,
    .attachment--content[data-trix-content-type~='vnd.rubyonrails.horizontal-rule.html'] hr {
      margin: 0;
      width: 20%;
      border-color: currentColor
    }
  }
/*
 * 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.
 *


 */