/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

@font-face {
  font-family: "SF Pro Rounded";
  src: url("/assets/SFProRounded-2d283da4.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

body {
  margin: 0;
  font-family: "SF Pro Rounded", Helvetica, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", sans-serif;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  font-weight: normal;
  font-style: normal;
  box-sizing: border-box;
  background-color: #F4F3EA;
}

.icon-button {
  display: flex;
  justify-content: center;
  width: 20px;
}

button,
a,
span,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "SF Pro Rounded", "Fira Sans";
  color: #24272C;
  margin: 0;
}

.changable-blue {
  color: #3B80F8;
  border: 2px dashed #3B80F8;
  border-radius: 12px;
  background-color: #3B80F81A !important;
}

.blue,
.changable-blue span {
  color: #3B80F8;
}

.text-blue {
  color: #3B80F8 !important;
}

.bg-blue {
  background-color: #3B80F8 !important;
}

.changable-purple {
  color: #9747FF;
  border: 2px dashed #9747FF;
  border-radius: 12px;
  background-color: #9747FF33 !important;
}

.purple,
.changable-purple span {
  color: #9747FF;
}

.bg-purple {
  background-color: #9747FF !important;
}

.changable-green {
  color: #33BF2A;
  border: 2px dashed #33BF2A;
  border-radius: 12px;
  background-color: #33BF2A33 !important;
}

.green,
.changable-green span {
  color: #33BF2A;
}

.bg-green {
  background-color: #33BF2A !important;
}

.changable-orange {
  color: #F28C20;
  border: 2px dashed #F28C20;
  border-radius: 12px;
  background-color: #F28C2033 !important;
}

.orange,
.changable-orange span {
  color: #F28C20;
}

.bg-orange {
  background-color: #F28C20 !important;
}

.invert {
  filter: invert(1);
}

.no-scroll {
  overflow: hidden;
}

.separator {
  height: 0px;
  border-bottom: 1px solid #0000001A;
}