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

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/
/*
 * 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.
 *


 */

@theme {
  --font-inter: 'Figtree', 'sans-serif';
}

@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');

.lf-primary-heading {
  background-color: #166534;
}

.bg-brand-green-600 {
  background-color: #16a34a;
}

.lf-primary-button:hover {
  background-color: #15803d;
}

.lf-light-green {
  background-color: #f0fdf4;
}

.lf-blue-button {
  background-color: rgb(37, 99, 235);
}

.lf-blue-button:hover {
  background-color: rgb(59, 130, 246);
}

.left-60 {
  left: 15rem;
}

html{
  font-family: 'Figtree';
}

.left-green-badge {
  background-color: #166334;
}

.right-green-badge {
  background-color: #15803a;
}

.lf-green-table-header {
  background-color: #334155;
}

.lf-green-progress-bar {
  background-color: #16a34a;
}

.lf-red-progress-bar {
  background-color: #f04242;
}

@font-face {
    font-family: 'Figtree';
    src: url("<%= asset_path('fonts/Figtree-Regular.ttf') %>") format('ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Figtree-bold';
    src: url("<%= asset_path('fonts/Figtree-Bold.ttf') %>") format('ttf');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Figtree-headline';
    src: url("<%= asset_path('fonts/Figtree-Headline.ttf') %>") format('ttf');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Figtree-light';
    src: url("<%= asset_path('fonts/Figtree-Light.ttf') %>") format('ttf');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Figtree-regular';
    src: url("<%= asset_path('fonts/Figtree-Regular.ttf') %>") format('ttf');
    font-weight: normal;
    font-style: normal;
}

 .w-28 {
  width: 7rem;
 }

.badge-width{
  width: 150px;
}

.max-w-half{
  max-width: 75%;
}

 .green-liquid{
  color: #0CCA4A;
}

.gray-button{
  background-color: gray !important;
}

.green-liquid-border{
  border: 3px solid #0CCA4A;
}

.text-green-liquid-500, .text-green-liquid-400, .text-green-liquid-600, .ring-green-liquid-500, .border-green-liquid-500{
  color: #5E2BFF;
}

.modal-bg-green {
  background-color: #166534;
}

.bg-slate-100 {
  background-color: #f1f5f9;
}

.bg-sidebar{
  background-color: rgb(53, 53, 53);
}

.sidebar-z-index{
  z-index: 1000;
}

.bg-green-liquid-600, .bg-green-liquid-700{
  background-color: #5E2BFF;
  color: white;
}

.bg-green-liquid-600:hover, .bg-green-liquid-700:hover{
  background-color: #5E2BFF;
  color: whitesmoke;
}

.sort-desc {
  position: relative;
  top: 0.7rem;
  left: -0.1rem;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid #aaa;
}

.sort-asc {
  position: relative;
  bottom: 0.7rem;
  left: -0.1rem;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 8px solid #aaa;
}

.text-sm{
  font-size: .70rem;
}

.tooltip {
  position: relative;
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1000;
  bottom: 85%;
  left: 50%;
  margin-left: -60px;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .helptooltiptext {
  visibility: hidden;
  width: 220px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1000;
  top: 10%;
  left: 70%;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
.tooltip:hover .helptooltiptext {
  visibility: visible;
  opacity: 1;
}

.greenlf {
  background-color: #0CCA4A !important;
}

.text-greenlf {
  color: #0CCA4A;
}

.greenlf-800 {
  background-color: #0bc148;
}

.text-darklf {
  color: #363636;
}

.text-violet {
  color: #CA13B7;
}

.text-orange {
  color: #FA6B00;
}

.text-yellow {
  color: #FBDB0E;
}

.yellowlf {
  background-color: #FFDB0F;
}

.darklf {
  background-color: #363636;
}

.darklf-800 {
  background-color: #333333;
}

.text-greenlf-700 {
  --tw-text-opacity: 1;
  color: rgb(12 202 74/var(--tw-text-opacity));
}

.text-violetlf-700 {
  --tw-text-opacity: 1;
  color: rgb(187 185 239/var(--tw-text-opacity));
}

.text-lightgreenlf-700 {
  --tw-text-opacity: 1;
  color: rgb(169 234 203/var(--tw-text-opacity));
}

.text-lightpinklf-700 {
  --tw-text-opacity: 1;
  color: rgb(248 185 184/var(--tw-text-opacity));
}

span.error, #error_explanation{
  color: #EB5F5F
}

.ml-120{
  margin-left: 120px;
}

.mh-120{
  min-height: 120px;
}

.grid-cols-12 {
  grid-template-columns: repeat(12,minmax(0,1fr));
}

.grid-cols-9 {
  grid-template-columns: repeat(9,minmax(0,1fr));
}

.hover\:bg-gray-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246/var(--tw-bg-opacity));
  color: rgb(53, 53, 53);
}

.ml-24 {
  margin-left: 10rem;
}

@media (min-width: 640px) {
  .sm\:ml-24 {
    margin-left: 6rem;
  }
}

.col-span-11 {
  grid-column: span 11/span 11;
}

.grid-cols-16 {
  grid-template-columns: repeat(16,minmax(0,1fr));
}

.col-span-15 {
  grid-column: span 15/span 15;
}

.bg-lf-orange{
  background-color: #FA6B00;
}

.bg-violet {
  background-color: #CA13B7;
}

.with-bg {
  position: relative;
}

@media (min-width: 880px) and (max-width: 1550px) {
  .with-bg img.top {
    position: absolute;
    top: -49px;
    right: -126px;
    width: 340px;
  }
}

@media (min-width: 1550px) {
  .with-bg img.top {
    position: absolute;
    top: -92px;
    right: -238px;
    width: 640px;
  }
}

.mt-40 {
  margin-top: 10rem;
}

.with-bg img.bottom {
  position: absolute;
  bottom: 100px;
  right: 150px;
  width: 320px;
}

.rounded-2xl {
  border-radius: 1.25rem;
}

.w-7\/12 {
  width: 45.555555%;
}

.bg-electric-blue{
  background-color: #3693F9;
}

.bg-danger{
  background-color: #EB5F5F;
}

.bg-electric-blue:hover{
  background-color: #76B5FA;
}

html {
  height: 100vh;
}

body {
  height: 100vh;
}

.ml-8 {
  margin-left: 2rem;
}

.w-5\/6 {
  width: 83.333333%;
}

.h-5\/6 {
  height: 90%;
}

.leads-max-height {
  max-height: 40rem;
}

.ml-12 {
  margin-left: 8rem;
}

.mr-2 {
  margin-right: 1rem;
}

.w-9\/12{
  width: 75%
}

.button-group-margin{
  margin-right: 4px;
}

.lock-access-button{
  width: 134px;
}

.p-12 {
  padding: 3rem;
}

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

.pt-12 {
  padding-top: 3rem;
}

#alert-1 {
  margin-top: 2em;
  z-index: 1000;
}

.dot {
  height: 1rem;
  width: 1rem;
  background-color: white;
  border-radius: 50%;
  float: right;
  margin-right: 3px;
  margin-top: 2px;
}