.news_article {
  display:block;
  max-width:720px;
  margin-left:auto;
  margin-right:auto;
  font-size: 1.125rem;
}

.news_article ol,.news_article p,.news_article ul {
  font-size:1rem;
  margin-bottom:2rem;
  line-height:1.7
}
.news_article ol, .news_article ul {
  margin-left: 1.5rem;
  li::marker {
    color: #ba0058;
  }
}
.news_article ol {
  list-style: decimal;
}
.news_article ul {
  list-style-type: square;
}

@media (min-width:768px) {
  .news_article ol,.news_article p,.news_article ul {
    font-size:1.125rem;
    line-height:2
  }
}
.news_article p~ol,.news_article p~ul {
  margin-top:-1.125rem
}
.news_article p.section_title {
  font-size: 1.5rem;
  font-weight: bold;
}
.news_article h1 {
  font-size: 1.5rem;
  font-weight: bold;
}

.news_article p.sub_title {
  font-size: 1.4rem;
  color: #888;
}

.news_article h2 {
  font-size: 1.4rem;
  color: #888;
  font-weight: normal;
}

.news_article p.section_note {
  font-size: 1.0rem;
}

.news_article h3 {
  font-size: 1.0rem;
  margin-top: -2.75rem
}

.news_article p.keywords {
  font-size: 1.15rem;
  font-style: italic;
}

.news_article img {
  display:block;
  margin-left:auto;
  margin-right:auto;
  margin-bottom:1rem;
  width: 75%;
}
.news_article blockquote {
  border-left-width:1px;
  border-color:#55dbcb;
  background-color:#f2f2f2;
  border-left-width:10px;
  margin:1.5em 10px;
  padding:.5em 10px
}
.news_article blockquote p:first-child {
  display:inline
}
.news_article blockquote p:first-child:after,.news_article blockquote p:first-child:before {
  font-size:4.375rem;
  color:#55dbcb;
  line-height:.1rem;
  vertical-align:-1.4rem
}
.news_article blockquote p:first-child:before {
  content:open-quote
}
.news_article blockquote p:first-child:after {
  margin-left:.25rem;
  content:close-quote
}
@keyframes fadeOut {
  90%   { opacity: 1; }
  100%  { opacity: 0; }
}

.delayed-fade {
  /* Used by stimulus fade_controller */
  /* animation-duration: defaults to 3s */
  /* Just set `data-fade-delay-value="...ms" on the element */
  animation-name: fadeOut;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}
@import "./animations.css";
@import "./blog.tailwind.css";
@import "./buttons.tailwind.css";
@import "./errors.tailwind.css";
@import "./flash.tailwind.css";
@import "./highlights.tailwind.css";
@import "./inputs.tailwind.css";
@import "./links.tailwind.css";
@import "./logs.tailwind.css";
@import "./pagy.tailwind.css";
@import "./pills.tailwind.css";
@import "./signups.tailwind.css";
@import "./utilities.tailwind.css";

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

@layer base {
  @font-face {
    font-family: "Avenir-Medium";
    src: url(/assets/38ED6F_0_0-8dd9b124e24e2de48dc32cc5a98cebe67c2da34212c1b025299b3cfb97c0a9dd.ttf) format("truetype");
  }

  @font-face {
    font-family: "Avenir-Black";
    src: url(/assets/38ED6F_1_0-86a93c713b7aba1b2d11134f469fb4b1f974a4cb23853101c97971e809c01ebc.ttf) format("truetype");
  }

  h1 {
    @apply text-h1 font-avenirblack;
  }

  h2 {
    @apply text-h2 font-avenirblack;
  }

  h3 {
    @apply text-h3 font-avenirblack;
  }
  p { @apply text-base; }
  b { @apply font-bold; }
}

@layer components {
  .tt-container {
    @apply mx-auto max-w-[1920px] px-4 md:px-16 2xl:px-36;
  }
  .user-invite-tag {
    @apply text-xs px-1 pb-1 pt-[.3rem] rounded-md text-white
  }
  .user-invite-tag.invited {
    @apply bg-purple-400
  }
  .user-invite-tag.expired {
    @apply bg-pink-dark
  }

  #billing_details table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 1rem;
  }

  #billing_details .table th,
  #billing_details .table td {
    padding: 0.75rem;
    vertical-align: top;
    border-top: 1px solid #eceeef;
  }

  #billing_details td.title {
    font-weight: 600;
    color: var(--tw-color-black);
    width: 25%;
  }

  #billing_details .table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid #eceeef;
  }

  #billing_details .table tbody + tbody {
    border-top: 2px solid #eceeef;
  }

  #billing_details .table .table {
    background-color: #fff;
  }

  #billing_details ul.invoices {
    text-align: left;
  }

  #billing_details ul.invoices .plan_name {
    font-weight: bold;
  }

  #checkout .header {
    max-width: 700px;
  }

  #checkout .header h1 {
    text-align: left;
    font-size: 2.0em;
  }

  #checkout .summary {
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    align-items: flex-start;
    display: flex;
  }

  #checkout .summary .card_div {
    /* width: 60%; */
    /* flex: 1; */
    padding: 1.0em;
    margin-right: 1.0em;
  }

  #checkout .summary .card_div #card-element {
    border: 2px solid #ddd;
    padding: 0.5em 1.0em;
  }

  #checkout .summary .summaryform {
    /* width: 30%; */
    /* flex: 0.4; */
    padding: 1.0em;
    background: #f4f4f4;
    border: 1px solid #ccc;
    border-radius: 4px;
  }

  #checkout .summary .summaryform table .text-right {
    text-align: right;
  }

  #enrollment .field {
    background: white;
    box-sizing: border-box;
    font-weight: 400;
    border: 1px solid #CFD7DF;
    border-radius: 5px;
    color: #32315E;
    padding: 5px;
  }

  #enrollment .pricing_group {
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    align-items: flex-start;
  }

  #enrollment .pricing_group .price_wrap {
    width: 28%;
    padding: 1.125rem;
  }

  #enrollment .pricing_group .price_box {
    box-shadow: 0 0 6px 0 rgba(41, 41, 41, .4);
  }

  #enrollment .pricing_group .price_box.selected {
    border: 3px solid #d90368;
  }

  #enrollment .pricing_group .price_box .top_content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    padding: 1.25rem 1.125rem 1.25rem 1.5rem;
  }

  #enrollment .pricing_group .price_box .top_content .price_plan {
    flex-grow: 0;
    flex-shrink: 0;
  }

  #enrollment .pricing_group .price_box .top_content .price_plan p {
    color: #717171;
    margin-top: .75rem;
    font-size: 1.125rem;
  }

  #enrollment .pricing_group .price_box .top_content .price_plan h6 {
    font-size: 1.5rem;
  }

  #enrollment .pricing_group .price_box .top_content .icon {
    flex-grow: 0;
    flex-shrink: 0;
  }

  #enrollment .pricing_group .price_box .bottom_content {
    background-color: #ffffff;
    padding: 0rem 1.125rem 1.25rem 1.5rem;
    text-align: center;
    font-size: 1.0rem;
  }

  #enrollment .pricing_group .price_box .bottom_content li {
    margin: 0 0 14px;
  }

  #enrollment .pricing_group .price_box .bottom_content a.disabled {
    background: #aaaaaa;
  }

  #user-limit-widget {
    text-align: center;
    width: 500px;
    display: contents;
    justify-content: center;
  }

  #user-limit-widget .well {
    width: 500px;
    background: #f4f4f4;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin: auto;
    padding: 20px;
    align-content: center;
  }

  #user-limit-widget legend {
    text-align: center;
    margin: auto;
    font-size: 2.0em;
    padding-bottom: 0.5em;
    font-weight: 600;
  }

  #user-limit-widget .hui-label {
    display: block;
    font-size: 1.5em;
    font-weight: 500;
  }

  #user-limit-widget .hui-choices {
    margin-left: auto;
    margin-right: auto;
    max-width: 85%;
    display: flex;
  }

  #user-limit-widget .hui-choices .hui-choice {
    flex: 1 1 100%;
    margin: 0 5px;
  }

  #user-limit-widget .hui-choices .hui-choice input {
    opacity: 0;
    pointer-events: none;
    position: absolute;
  }

  #user-limit-widget .hui-choices .hui-choice input:disabled + label {
    background: #aaaaaa;
    cursor: not-allowed;
  }

  #user-limit-widget .hui-choices .hui-choice input:checked + label {
    background: #d90368;
    border-color: #da6100;
    color: #fff;
    font-weight: 600;
  }

  #user-limit-widget .hui-choices .hui-choice label {
    align-items: center;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    cursor: pointer;
    display: flex;
    font-size: 15px;
    height: 38px;
    justify-content: center;
    position: relative;
  }

  #user-limit-widget hr {
    color: #f0f0f0;
    margin: 2.0em;
  }

  #user-limit-widget .user_count {
    display: flex;
  }

  #user-limit-widget .hui-col-fluid {
    flex: 1 1 auto;
  }

  #user-limit-widget .hui-col-fluid.math {
    margin-top: 35px;
  }

  #user-limit-widget .hui-label {
    color: #666;
    display: block;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 5px;
  }

  #user-limit-widget #choose_plan_form_total_users {
    font-size: 24px;
    height: 40px;
    text-align: center;
    width: 80px;
  }

  #user-limit-widget .col-value {
    font-size: 28px;
    height: 40px;
    line-height: 40px;
  }

  #user-limit-widget .col-current-users {
    font-weight: 500;
    color: #444;
    line-height: 40px;
  }

  #user-limit-widget .col-savings {
    color: #f36c00;
    line-height: 40px;
  }

  #coupon-widget {
    text-align: center;
    width: 500px;
  }

  #coupon-widget .well {
    width: 500px;
    background: #f4f4f4;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 1.5em;
  }

  #coupon-widget .label {
    font-size: 1.5em;
  }

  #coupon-widget #coupon_reuse {
    font-size: 1.5em;
  }

  #coupon-widget #coupon_code_entry {
    font-size: 24px;
    height: 40px;
    text-align: center;
    width: 200px;
  }

  #coupon-widget #coupon_error {
    color: #da6100;
    font-weight: bold;
    margin-top: 0.5em;
    display: none;
  }

  @media (min-width: 576px) {
    #user-limit-widget,
    #coupon-widget {
      margin-left: 0px;
    }

    .pricing_group {
      display: block;
    }

    .pricing_group .price_wrap {
      width: 500px;
    }

    .pricing_group .price_box .top_content .icon {
      width: 60px;
      height: 60px;
    }
  }

  @media (min-width: 900px) {
    #user-limit-widget,
    #coupon-widget {
      margin-left: 100px;
    }

    .pricing_group {
      width: 900px;
      display: flex;
    }

    .pricing_group .price_box .top_content .icon {
      width: 60px;
      height: 60px;
    }

    .pricing_group .price_box .bottom_content ul.pro {
      padding: 1.2em 0em;
    }

    .pricing_group .price_box .bottom_content ul.basic {
      padding: 3.85em 0em;
    }
  }

  @media (min-width: 1200px) {
    .pricing_group {
      width: 100%;
    }

    .pricing_group .price_box .top_content .icon {
      width: 80px;
      height: 80px;
    }

    .pricing_group .price_box .bottom_content ul.pro {
      padding: 0.6em 0em;
    }

    .pricing_group .price_box .bottom_content ul.basic {
      padding: 2.6em 0em;
    }
  }

  @media (min-width: 1600px) {
    .pricing_group {
      width: 100%;
      margin-left: -1.5rem;
      margin-right: -1.5rem;
    }

    .pricing_group .price_wrap {
      padding: 1.5rem;
    }

    .pricing_group .price_box .top_content {
      padding: 1.5rem 2rem 1.5rem 1.5rem;
    }

    .pricing_group .price_box .top_content .price_plan h6 {
      font-size: 1.875rem;
      font-weight: bold;
      text-align: left;
    }

    .pricing_group .price_box .top_content .price_plan p {
      font-size: 1.25rem;
    }

    .pricing_group .price_box .bottom_content {
      padding: 1.5rem 2rem 1.5rem 1.5rem;
      font-size: 1.25rem;
    }
  }

  #progress-bar {
    width: 0%;
    height: 10px;
    margin-bottom: 10px;
    border-radius: 8px;
    @apply bg-purple-400
  }

  /* Tom select override styles */
  .ts-wrapper.single .ts-control:after {
    font-family: "Avenir-Medium";
    src: url(/assets/38ED6F_0_0-8dd9b124e24e2de48dc32cc5a98cebe67c2da34212c1b025299b3cfb97c0a9dd.ttf) format("truetype");
  }

  .ts-control,
  .ts-control input,
  .ts-dropdown {
    font-size: 16px !important;
    /* Adjust the font size as needed */
    line-height: 22px !important;
    /* Adjust the line-height accordingly */
  }

  .ts-wrapper.single .ts-control {
    background-color: #ffffff !important;
    /* Set the background color you want */
    background-image: none !important;
    /* Remove the gradient */
    box-shadow: none !important;
    /* Remove the box shadow */
    border-radius: .375rem !important;
    padding: .75rem .75rem !important;
  }

  .ts-wrapper.select.tom-select.tt-select.single {
    padding-bottom: 0px !important;
    padding-top: 0px !important;
    border-width: 0px !important;
  }
}

.scroll-shadows {
  --bg: rgb(255, 255, 255);
  --shadow: rgba(41, 50, 56, 0.3);

  background:
    /* Shadow Cover TOP */
    linear-gradient(var(--bg) 30%, transparent) center top,
    /* Shadow Cover BOTTOM */
    linear-gradient(transparent, var(--bg) 70%) center bottom,
    /* Shadow TOP */
    radial-gradient(farthest-side at 50% 0, var(--shadow), transparent) center top,
    /* Shadow BOTTOM */
    radial-gradient(farthest-side at 50% 100%, var(--shadow), transparent) center bottom;

  background-repeat: no-repeat;
  background-size: 100% 40px, 100% 40px, 100% 10px, 100% 10px;
  background-attachment: local, local, scroll, scroll;
  overscroll-behavior: contain;
  /* see https://css-tricks.com/books/greatest-css-tricks/scroll-shadows/ */
}
.news_article {
  display:block;
  max-width:720px;
  margin-left:auto;
  margin-right:auto;
  font-size: 1.125rem;
}
.news_article a {
  color: #ba0058;
  &:hover { text-decoration: underline; }
}

.news_article ol,.news_article p,.news_article ul {
  font-size:1rem;
  margin-bottom:2rem;
  line-height:1.7;
}
.news_article ol, .news_article ul {
  margin-left: 1.5rem;
  li::marker {
    color: #ba0058;
  }
}
.news_article ol {
  list-style: decimal;
}
.news_article ul {
  list-style-type: square;
}

@media (min-width:768px) {
  .news_article ol,.news_article p,.news_article ul {
    font-size:1.125rem;
    line-height:2
  }
}
.news_article p~ol,.news_article p~ul {
  margin-top:-1.125rem
}
.news_article p.section_title {
  font-size: 1.5rem;
  font-weight: bold;
}
.news_article h1 {
  font-size: 1.5rem;
  font-weight: bold;
}

.news_article p.sub_title {
  font-size: 1.4rem;
  color: #888;
}

.news_article h2 {
  font-size: 1.4rem;
  color: #888;
  font-weight: normal;
}

.news_article p.section_note {
  font-size: 1.0rem;
}

.news_article h3 {
  font-size: 1.0rem;
  margin-top: -2.75rem
}

.news_article p.keywords {
  font-size: 1.15rem;
  font-style: italic;
}

.news_article img {
  display:block;
  margin-left:auto;
  margin-right:auto;
  margin-bottom:1rem;
  width: 75%;
}
.news_article blockquote {
  border-left-width:1px;
  border-color:#55dbcb;
  background-color:#f2f2f2;
  border-left-width:10px;
  margin:1.5em 10px;
  padding:.5em 10px
}
.news_article blockquote p:first-child {
  display:inline
}
.news_article blockquote p:first-child:after,.news_article blockquote p:first-child:before {
  font-size:4.375rem;
  color:#55dbcb;
  line-height:.1rem;
  vertical-align:-1.4rem
}
.news_article blockquote p:first-child:before {
  content:open-quote
}
.news_article blockquote p:first-child:after {
  margin-left:.25rem;
  content:close-quote
}
@layer components {
  .btn {
    @apply px-6 pt-3 pb-2 rounded-md text-[16px] capitalize font-bold cursor-pointer border-2 text-center no-underline inline-block font-avenir leading-none select-none hover:no-underline disabled:cursor-not-allowed
  }
  .btn-md {
    @apply px-3 pt-2 pb-1 rounded-md text-[12px] capitalize font-bold cursor-pointer border-2 text-center no-underline inline-block font-avenir leading-none select-none hover:no-underline disabled:cursor-not-allowed
  }
  .btn-sm {
    @apply px-4 pt-1 pb-px rounded-md text-[12px] capitalize font-bold cursor-pointer border-2 text-center no-underline inline-block font-avenir leading-none select-none hover:no-underline disabled:cursor-not-allowed
  }
  .btn-unauth-hollow {
    @apply inline-block;
    @apply py-3 px-8;
    @apply rounded-full border-2 border-black;
    @apply text-base uppercase font-semibold text-center font-avenir leading-4 text-black;
    @apply transition-all duration-300;
    @apply cursor-pointer;
    @apply hover:bg-black hover:text-white;

    & svg { @apply ml-[3px];}
  }

  .btn-prim {
    @apply btn bg-purple-400 border-purple-400 text-white transition-colors duration-300 hover:bg-purple-500 hover:border-purple-500 active:border-purple-300 disabled:bg-gray-400 disabled:border-gray-400
  }
  .btn-teal {
    @apply px-8 py-3 rounded-full text-[16px] uppercase font-bold cursor-pointer border-2 text-center no-underline inline-block font-avenir leading-none select-none bg-[#55dbcb] border-[#55dbcb] text-black transition-colors duration-300 hover:bg-[#39a2ae] hover:border-[#39a2ae] hover:no-underline;
  }
  .btn-white {
    @apply px-8 py-3 rounded-full text-base uppercase font-bold cursor-pointer border-2 text-center no-underline inline-block font-avenir leading-none select-none bg-white border-white text-[#d90368] transition-colors duration-300 hover:bg-[#ee9bc2] hover:border-[#ee9bc2] hover:text-black hover:no-underline;
  }
  .btn-danger {
    @apply btn bg-pink-dark text-white hover:bg-pink-hover transition-colors duration-300
  }

  .btn-hollow-gray {
    @apply btn bg-transparent border-gray-300 text-black transition-colors duration-300 hover:border-black active:border-black disabled:border-gray-400;
  }
  .btn-md-hollow-gray {
    @apply btn-md bg-transparent border-gray-300 text-black transition-colors duration-300 hover:border-black active:border-black disabled:border-gray-400;
  }
  .btn-sm-hollow-gray {
    @apply btn-sm bg-transparent border-gray-300 text-black transition-colors duration-300 hover:border-black active:border-black disabled:border-gray-400;
  }


  .btn-hollow-danger {
    @apply btn border-pink-dark text-pink-dark hover:bg-pink-dark hover:text-white transition-colors duration-300
  }
  .btn-md-hollow-danger {
    @apply btn-md border-pink-dark text-pink-dark hover:bg-pink-dark hover:text-white transition-colors duration-300
  }
  .btn-sm-hollow-danger {
    @apply btn-sm border-pink-dark text-pink-dark hover:bg-pink-dark hover:text-white transition-colors duration-300
  }

  .btn-hollow-purple {
    @apply btn border-purple-400 text-purple-400 hover:bg-purple-400 hover:text-white transition-colors duration-300
  }
  .btn-md-hollow-purple {
    @apply btn-md border-purple-400 text-purple-400 hover:bg-purple-400 hover:text-white transition-colors duration-300
  }
  .btn-sm-hollow-purple {
    @apply btn-sm border-purple-400 text-purple-400 hover:bg-purple-400 hover:text-white transition-colors duration-300
  }

  .btn-hollow-green {
    @apply btn border-teal-dark text-teal-dark hover:bg-teal-dark hover:text-white transition-colors duration-300
  }

  .btn-filter {
    @apply btn flex gap-1 items-center px-4 pt-4 pb-3 bg-transparent border-gray-200 text-black transition-colors duration-300 hover:border-black active:border-black disabled:border-gray-400;
  }
}
.error-page.known-user {
  .status-code { @apply text-purple-200; }
  .error-message { @apply text-purple-600; }
}
.error-page.unknown-user {
  .status-code { @apply text-pink-light; }
  .error-message { @apply text-pink-dark; }
}
.flash.success p {
  @apply border-teal-dark text-teal-dark bg-teal-light
}
.flash.warning p {
  @apply border-pink-dark text-pink-dark bg-pink-light
}
.flash.alert p,
.flash.notice p {
  @apply border-purple-400 text-purple-400 bg-purple-200
}
@layer base {
  .success.success-highlight {
    @apply text-teal-dark bg-teal-light;
  }
  .danger.danger-highlight {
    @apply text-pink-dark bg-pink-light;
  }
}
@layer components {
  .tt-text-field {
    @apply appearance-none outline-none border rounded w-full py-2 px-3 text-black leading-tight focus:border-purple-400 invalid:[&:not(:placeholder-shown):not(:focus)]:border-pink-dark;
  }
  .tt-file {
    @apply inline-block w-fit text-sm py-2 px-4 rounded-md border-2 border-purple-400 hover:border-purple-500 text-sm font-semibold text-purple-400 hover:text-purple-500 whitespace-nowrap cursor-pointer [&.editable]:border-gray-300 [&.editable]:text-black [&.editable]:hover:border-black;
  }
  .tt-check-box {
    @apply w-6 h-6 mr-2 mb-1 rounded text-purple-400 border-gray-300 focus:ring-purple-400 focus:ring-2
  }
  .tt-number,
  .tt-date-time {
    @apply rounded-md text-black border-gray-300;
  }
  .tt-radio-button {
    @apply w-5 h-5 mr-2 text-purple-400 border-2 border-purple-400 focus:ring-purple-400 focus:ring-2;
    @apply disabled:text-gray-300 disabled:cursor-not-allowed disabled:border-gray-300;
  }
  .tt-select {
    @apply pt-3 pb-2;
    @apply rounded-md border-2 border-gray-200;
    @apply text-[16px] font-bold;
    @apply hover:border-black;
    @apply focus:border-black focus:ring-transparent;
    /* @apply read-only:hover:!border-gray-200 read-only:focus:!border-gray-200; */
    @apply transition-colors duration-300;
  }
  .tt-tom-select {
    @apply rounded-md border-2 border-gray-200;
    @apply text-[16px] font-bold;
    @apply hover:border-black;
    @apply focus:border-black focus:ring-transparent;
    @apply transition-colors duration-300;
  }

  .disabler--disabled {
    & label {
      @apply text-gray-300;
      @apply cursor-not-allowed;
    }
    & .tt-tom-select,
    & .tt-select {
      @apply text-gray-300 fill-gray-300 hover:border-gray-200 focus:border-gray-200;
      @apply cursor-not-allowed;
    }
    & .tt-tom-select.ts-wrapper.single .ts-control, .ts-wrapper.single .ts-control input {
      @apply !text-gray-300 !fill-gray-300;
      @apply cursor-not-allowed;
    }
  }

  .tt-select-sm {
    @apply pt-1 pb-px rounded-md text-[14px] text-right font-bold border-2 border-gray-200 hover:border-black focus:border-black focus:ring-transparent transition-colors duration-300 ;
  }
  .tt-select-search-multiple {
    & .selected-wrapper--tt-ssm {
      @apply flex gap-2 flex-wrap mb-3;
    }
    & .search-field--tt-ssm {
      @apply w-full rounded-md border border-gray-300 mb-3;
    }
    & .visable-options--tt-ssm {
      @apply max-h-32 overflow-y-scroll overscroll-contain rounded-sm border border-gray-300 shadow-inner;
    }
    & .visable-option--tt-ssm {
      @apply py-2 hover:bg-gray-200 pl-2;
    }
    & .selected--tt-ssm {
      @apply flex gap-1 w-fit bg-purple-200 text-purple-400 py-2 px-4 rounded-full inline-block;
    }
    & .selected-cancel--tt-ssm {
      @apply block w-5 h-5 bg-icon-close cursor-pointer;
    }
  }
  .tt-collecion-radio {
    @apply px-7 flex items-center justify-center;
    @apply first-of-type:rounded-l-md last-of-type:rounded-r-md;
    @apply text-[16px] font-bold;
    @apply border-2 border-gray-200;
    @apply hover:border-black focus:border-black focus:ring-transparent;
    @apply transition-colors duration-300;
    @apply [&.active]:!border-[2.5px] [&.active]:border-purple-400 [&.active]:bg-purple-200;
  }

  .input .hint {
    @apply ml-2 mt-0.5 text-sm block;
  }
}
.tt-link {
  @apply underline active:text-purple-400 hover:text-purple-400 disabled:text-gray-400;
}
.nav-link {
  @apply inline-block text-white pt-1 pb-px px-2 w-full text-right font-bold text-[18px] leading-[26px] hover:text-pink-medium [&.active]:bg-white [&.active]:text-purple-600
}
.nav-link--help {
  @apply inline-block pt-1 pb-px px-2 w-full text-right font-bold text-[18px] leading-[26px] text-white bg-pink-medium hover:bg-pink-hover hover:text-white;
}
.marketing-nav-link {
  @apply [&.active]:underline [&.active]:underline-offset-4 [&.active]:decoration-pink-medium [&.active]:hover:decoration-pink-medium;
  @apply hover:underline hover:underline-offset-4 hover:decoration-[#55dbcb];
  @apply decoration-2;
}
.marketing-menu-link {
  @apply [&.active]:underline [&.active]:underline-offset-4 [&.active]:decoration-[#EAB308] [&.active]:hover:decoration-[#EAB308];
  @apply hover:underline hover:underline-offset-4 hover:decoration-white;
  @apply decoration-4;
}
.bulk-action-link {
  @apply pl-8 pr-14 pb-0.5 pt-2
    w-full
    whitespace-nowrap
    hover:bg-gray-200;
}
.selected-action-link {
  @apply flex items-center justify-center whitespace-nowrap;

  &.danger { @apply btn-hollow-danger; }
  &.purple { @apply btn-hollow-purple; }
  &.green  { @apply btn-hollow-green;  }
  &.qr_complete { @apply btn-hollow-green w-full; }
}
.column-sort-link {
  @apply [&.active]:bg-purple-200 [&.active]:fill-purple-400 [&.active]:border [&.active]:rounded [&.active]:drop-shadow [&.active]:shadow-purple-100;

  svg {
    @apply [&.ASC]:rotate-180;
  }
}
.disabled-link {
  @apply !text-purple-600 !pointer-events-none !cursor-not-allowed;
}
.logs-nav-group {
  @apply flex;

  a {
    @apply px-4 w-full block text-center py-2 border border-gray-400 rounded-[inherit];
    @apply hover:bg-gray-200;
    @apply [&.active]:text-purple-400 [&.active]:shadow-purple-400 [&.active]:border-2 [&.active]:border-purple-400 [&.active]:bg-purple-200 [&.active]:shadow-sm;
  }
}
.pagy_nav {
  @apply flex items-center gap-4
}
.pagy_nav .page {
  @apply rounded-full flex items-center justify-center px-[.7rem] pt-[.4rem] pb-[.2rem] text-sm
}
.pagy_nav .page.next,
.pagy_nav .page.prev {
  @apply pl-[.6rem] pr-[.5rem] py-[.6rem] border border-gray-300 hover:border-black hover:bg-purple-200
}
.pagy_nav .page.disabled {
  @apply pl-[.6rem] pr-[.5rem] py-[.6rem] border border-gray-300
}
.active-filter-pill {
  @apply px-4 pt-[.4rem] pb-1;
  @apply bg-purple-200 text-purple-400 rounded-2xl text-sm;

  &.print { @apply bg-gray-200 text-black; }
}
.task-inactive-pill {
  @apply px-1.5 pb-0.5 pt-[.3rem] ml-1;
  @apply text-xs text-white;
  @apply rounded-md;
  @apply bg-purple-400;
  @apply cursor-default;
}
.trainee-form-trainee-tag {
  @apply rounded-[15px] text-purple-400 bg-purple-200 pt-1.5 px-3 pb-1;

  &.deleted {
    @apply relative text-pink-dark bg-pink-light;
    @apply after:absolute after:-right-24 after:content-['deleted_tag'] after:text-pink-dark;
  }
}
.su--fieldset {
  padding: 0;
  margin-bottom:1.125rem;
  position:relative
}
.su--fieldset.inline_label {
  display:flex;
  align-items:center
}
.su--fieldset.select_field {
  width:100%;
  position:relative
}
.su--fieldset.select_field:before {
  position:absolute;
  content:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNDN0M3QzciIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLWNoZXZyb24tZG93biI+PHBvbHlsaW5lIHBvaW50cz0iNiA5IDEyIDE1IDE4IDkiPjwvcG9seWxpbmU+PC9zdmc+DQo=");
  color:#c0c4cc;
  font-family:element-icons!important;
  width:24px;
  height:24px;
  top:50%;
  right:0;
  transform:translate(-50%);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}


/* Inputs */
.su--fieldset {
  & input[type=email],
  & input[type=password],
  & input[type=text],
  select,
  textarea {
    border-bottom-width:1px;
    border-color:#ededed;
    border-radius:1px;
    padding:.5rem;
    width:100%;
    transition:all .2s cubic-bezier(.645,.045,.355,1)
  }
}
.su--fieldset>input[type=email]:hover,.su--fieldset>input[type=password]:hover,.su--fieldset>input[type=text]:hover,.su--fieldset>select:hover,.su--fieldset>textarea:hover {
  border-color:#c0c4cc
}
.su--fieldset textarea {
  min-height:100px
}
.su--fieldset.inline_label .el-checkbox-group .el-checkbox+.el-checkbox {
  margin-left:0;
  display:block
}
.su--fieldset.phone_field input.area_code {
  margin-left:.5rem;
  margin-right:.5rem;
  width:70px
}
.su--fieldset.select_field select {
  font-size:.875rem;
  -webkit-appearance:none;
  background-color:#fff;
  background-image:none;
  padding-right:30px;
  transition:all .2s cubic-bezier(.645,.045,.355,1);
  width:100%
}
.su--fieldset.select_field select:focus {
  outline:none;
  border-color:#39a2ae
}
.su--fieldset.select_field select:hover {
  cursor:pointer
}

/* Labels */
.su--fieldset>label {
  color:#444;
  margin-bottom:.2rem;
  display:block;
  font-size:.875rem;
  transition:all .2s cubic-bezier(.645,.045,.355,1)
}
.su--fieldset>label span {
  font-size:.75rem;
  color:#d90368;
}
.su--fieldset.\+whtie_labels>label {
  color:#fff
}
.su--fieldset.check_box label {
  display:flex;
  align-items:center
}
.su--fieldset.check_box label .checkmark {
  background-color:#fff;
  display:block;
  position:relative;
  width:25px;
  height:25px
}
.su--fieldset.check_box label .checkmark:after {
  position:absolute;
  display:none;
  content:"";
  left:9px;
  top:5px;
  width:7px;
  height:14px;
  border:solid #55dbcb;
  border-width:0 2px 2px 0;
  transform:rotate(45deg)
}
.su--fieldset.check_box label input:checked~.checkmark:after {
  display:block
}
.su--fieldset.check_box label .label {
  display:block;
  font-size:1rem;
  color:#444;
  margin-left:1rem;
  -webkit-user-select:none;
  -moz-user-select:none;
  user-select:none
}

/* Signup error classes */
.su--fieldset.field_with_errors label {
  color:#d90368
}
.su--fieldset.field_with_errors input,
.su--fieldset.field_with_errors select,
.su--fieldset.field_with_errors textarea {
  border-color:#d90368
}
.su--fieldset.field_with_errors span.error {
  color:#d90368;
  font-size:.875rem;
  margin:.2rem 0 0 .2rem;
  display:inline-block;
}

.su--form_info {
  & ul {
    font-size:.875rem;
  }
  & p,
  & a {
    font-size:.875rem;
    margin-bottom:1.125rem;
    line-height:1.7;
  }
  & a {
    color:#d90368
  }
}
.utilities-nav-group {
  @apply flex-col flex w-full pr-10;

  li {
    @apply first:rounded-t-lg last:rounded-b-lg;
  }

  a {
    @apply relative w-full block text-center py-2 border border-gray-400 rounded-[inherit];
    @apply hover:bg-gray-200;
    @apply [&.active]:text-purple-400 [&.active]:shadow-purple-400 [&.active]:border-2 [&.active]:border-purple-400 [&.active]:bg-purple-200 [&.active]:shadow-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.
 *


 */

 .column-1 {
  width: 2% !important;
 }

 .column-2 {
  width: 20% !important;
 }

 .column-3 {
  width: 20% !important;
 }

 .column-4 {
  width: 20% !important;
 }


 /* assignements */
 .column-5 {
  width: 15% !important;
 }

 .column-6 {
  width: 15% !important;
 }

 .column-7 {
  width: 15% !important;
 }