@font-face {
  font-family: "Arizona Sans Regular";
  src: url("https://cdn.shopify.com/s/files/1/0397/2903/7469/files/ABCArizonaSans-Regular.woff2?v=1640364095") format("woff2"),
  url("https://cdn.shopify.com/s/files/1/0397/2903/7469/files/ABCArizonaSans-Regular.woff?v=1640364095") format("woff");
}

@font-face {
  font-family: "Arizona Text Bold";
  src: url("https://cdn.shopify.com/s/files/1/0397/2903/7469/files/ABCArizonaText-Bold.woff2?v=1640364082") format("woff2"),
  url("https://cdn.shopify.com/s/files/1/0397/2903/7469/files/ABCArizonaText-Bold.woff?v=1640364083") format("woff");
}

/* Vars taken from fluent.pet official website */
:root {
  --green: #006271;
  --beige: #fee0bc;
  --purple: #581746;
  --light-purple: #d6dcf6;
  --orange: #fbbd72;
  --light-orange: #fee0bc;
  --lighter-orange: #fcebda;
  --teal: #78dae4;
  --blue: #bdeefd;
  --light-blue: #e2f4fb;
  --light-pink: #ffe5e4;
  --radius: 20px;
  --radius-medium: 10px;
  --radius-small: 5px;
  --radius-big: 35px;
  --big-space: 2.5rem;
  --small-space: 0.5rem;
}

html {
  scroll-behavior: smooth;
}

.sticky-image {
  position: fixed;
  height: 100px;
  bottom: 0;
  right: 0;
}

* {
  font-family: "Arizona Sans Regular";
  color: var(--green);
}

.alert h5, h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
  font-family: "Arizona Text Bold";
  color: var(--green);
}

code {
  border: 1px dotted var(--purple);
  border-radius: var(--radius-small);
  display: block;
  white-space: pre-wrap;
}

select {
  border: 1px solid var(--green);
  min-width: 200px;
  padding: .4em;
  background-color: var(--light-blue);
}

.info {
  font-weight: normal;
  font-style: italic;
}

.info-alert {
  color: red;
}

.custom-navbar {
  padding: 1rem;
  background-color: var(--green);
}

.custom-navbar-brand {
  font-size: .9em;
}

.custom-card {
  width: 75vw;
  max-width: 72rem;
}

.custom-card-header {
  background-color: var(--light-blue);
  font-family: "Arizona Sans Regular", monospace;
}

.card-body {
  background-color: var(--light-blue);
}

.custom-form-control {
  max-width: 30em;
}

.mono-font,
.btn {
  text-transform: none;
  font-weight: 200;
  font-family: "Arizona Sans Regular", monospace;
}

.btn-primary {
  color: white;
  background-color: var(--green);
}

.btn-primary.disabled {
  color: var(--lighter-orange);
  background-color: var(--green);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--green);
}

.btn-warning,
.btn-warning:hover,
.btn-warning:active,
.btn-warning:focus {
  color: var(--green);
  background-color: var(--light-blue);
}

.button-margin-small {
  margin: .16em 0;
}

.chart-container-s {
  min-width: 450px;
  min-height: 120px;
  margin: 1em;
}

.chart-container-m {
  min-width: 450px;
  height: 400px;
  margin: 1em;
}

.chart-container-daily-interactions {
  width: 100%;
  aspect-ratio: 1.72;
  margin: 1em;
}

.chart-s {
  position: relative;
  width: 450px;
  height: 120px;
}

.chart-m {
  position: relative;
  width: 450px;
  height: 400px;
}

.chart-daily-interactions {
  position: relative;
}

.chart-title {
  border-bottom: 10px solid rgba(33, 150, 243, 0.2);
  color: var(--green) !important;
  margin-left: 10;
}

table.things th,
table.things td {
  padding: .1em .4em;
  border: 2px solid var(--green);
}

table.things th {
  font-family: "Arizona Text Bold";
  text-transform: uppercase;
}

.blinker {
  animation: blinker-animation .5s linear 3;
}

@keyframes blinker-animation {
  50% {
    opacity: .2;
  }
}

.card-body img {
  width: 300px;
  float: left;
}

div.description {
  margin: 20px;
  width: 500px;
}

.table-wrapper{
  max-height: 600px;
  overflow-y: auto;
}

.main_table{
  min-width: 1000px;
}

.feature_flag_value{
  width: 100px;
}

.success-container {
  padding: 2rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 600px;
  margin: 0 auto;
}

@media (max-width: 576px) {
  .success-container h3 {
    font-size: 1.3rem;
    margin-bottom: 1.5rem;
  }

  .success-container .btn {
    width: 100%;
    padding: 0.75rem;
  }

  .container {
    padding: 0;
    max-width: 100%;
  }

  .main_table {
    min-width: auto !important;
    width: 100% !important;
  }

  body {
    overflow-x: hidden;
  }

  h1,
  h2,
  h3 {
    font-size: 1.5rem;
    word-break: break-word;
  }
}

.mobile-friendly {
  min-width: auto !important;
  width: 100%;
}