@import "css/inter.ss";
@import "css/custom-button.css";
@import "css/input.css";

:root {
  --inter: "inter";
  --white: #fff;
  --secondary-color: #fbae04;
  --primary-color: #2eb570;
  --red: #fb0404;
  --black: #333;
  --blue-50: #f4fafe;
  --blue-100: #cae6fc;
  --blue-200: #a0d2fa;
  --blue-300: #75bef8;
  --blue-400: #4baaf5;
  --blue-500: #2196f3;
  --blue-600: #1c80cf;
  --blue-700: #1769aa;
  --blue-800: #125386;
  --blue-900: #0d3c61;
  --green-50: #e6f6ee;
  --green-100: #c0e9d4;
  --green-200: #bed6a9;
  --green-300: #6dcb9b;
  --green-400: #4dc085;
  --green-500: #2eb570;
  --green-600: #29ae68;
  --green-700: #23a55d;
  --green-800: #1d9d53;
  --green-900: #128d41;
  --yellow-50: #fffcf5;
  --yellow-100: #fef0cd;
  --yellow-200: #fde4a5;
  --yellow-300: #fdd87d;
  --yellow-400: #fccc55;
  --yellow-500: #fbc02d;
  --yellow-600: #d5a326;
  --yellow-700: #b08620;
  --yellow-800: #8a6a19;
  --yellow-900: #644d12;
  --cyan-50: #f2fcfd;
  --cyan-100: #c2eff5;
  --cyan-200: #91e2ed;
  --cyan-300: #61d5e4;
  --cyan-400: #30c9dc;
  --cyan-500: #00bcd4;
  --cyan-600: #00a0b4;
  --cyan-700: #008494;
  --cyan-800: #006775;
  --cyan-900: #004b55;
  --pink-50: #fef4f7;
  --pink-100: #fac9da;
  --pink-200: #f69ebc;
  --pink-300: #f1749e;
  --pink-400: #ed4981;
  --pink-500: #e91e63;
  --pink-600: #c61a54;
  --pink-700: #a31545;
  --pink-800: #801136;
  --pink-900: #5d0c28;
  --indigo-50: #f6f7fc;
  --indigo-100: #d5d9ef;
  --indigo-200: #b3bae2;
  --indigo-300: #919cd5;
  --indigo-400: #707dc8;
  --indigo-500: #4e5fbb;
  --indigo-600: #42519f;
  --indigo-700: #374383;
  --indigo-800: #2b3467;
  --indigo-900: #1f264b;
  --teal-50: #f2faf9;
  --teal-100: #c2e6e2;
  --teal-200: #91d2cc;
  --teal-300: #61beb5;
  --teal-400: #30aa9f;
  --teal-500: #009688;
  --teal-600: #008074;
  --teal-700: #00695f;
  --teal-800: #00534b;
  --teal-900: #003c36;
  --orange-50: #fffaf2;
  --orange-100: #ffe6c2;
  --orange-200: #ffd391;
  --orange-300: #ffbf61;
  --orange-400: #ffac30;
  --orange-500: #ff9800;
  --orange-600: #d98100;
  --orange-700: #b36a00;
  --orange-800: #8c5400;
  --orange-900: #663d00;
  --bluegray-50: #f7f9f9;
  --bluegray-100: #d9e0e3;
  --bluegray-200: #bbc7cd;
  --bluegray-300: #9caeb7;
  --bluegray-400: #7e96a1;
  --bluegray-500: #607d8b;
  --bluegray-600: #526a76;
  --bluegray-700: #435861;
  --bluegray-800: #35454c;
  --bluegray-900: #263238;
  --purple-50: #faf4fb;
  --purple-100: #e7cbec;
  --purple-200: #d4a2dd;
  --purple-300: #c279ce;
  --purple-400: #af50bf;
  --purple-500: #9c27b0;
  --purple-600: #852196;
  --purple-700: #6d1b7b;
  --purple-800: #561561;
  --purple-900: #3e1046;
  --red-50: #fef6f5;
  --red-100: #fcd2cf;
  --red-200: #faaea9;
  --red-300: #f88a82;
  --red-400: #f6675c;
  --red-500: #f44336;
  --red-600: #cf392e;
  --red-700: #ab2f26;
  --red-800: #86251e;
  --red-900: #621b16;
  --primary-50: #f4f7f5;
  --primary-100: #ccdace;
  --primary-200: #a4bda7;
  --primary-300: #7ca080;
  --primary-400: #548259;
  --primary-500: #2c6532;
  --primary-600: #25562b;
  --primary-700: #1f4723;
  --primary-800: #18381c;
  --primary-900: #122814;
}
html {
  height: 100vh;
  box-sizing: border-box;
  scroll-behavior: smooth;
  font-family: var(--inter) !important;
  font-weight: 400;
  font-size: 0.875rem;
  font-style: normal;
}

body {
  margin: 0;
  scroll-behavior: smooth;
  font-weight: 400;
  font-size: 0.875rem;
  font-style: normal;
  font-family: var(--inter) !important;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

.container-desktop,
.container-desktop2 {
  padding-right: 0.8rem;
  padding-left: 0.8rem;
  margin-right: auto;
  margin-left: auto;
}

.accordion-active {
  color: var(--primary-color);
}

.htmx-t-loader {
  width: 3rem;
  height: 3rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (min-width: 768px) {
  .container-desktop {
    width: 750px;
  }
  .container-desktop2 {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container-desktop {
    width: 970px;
  }
  .container-desktop2 {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container-desktop {
    width: 1170px;
  }
}
@media (min-width: 1400px) {
  .container-desktop {
    width: 1300px;
  }
}
@media (min-width: 1500px) {
  .container-desktop2 {
    width: 1200px;
  }
}

iframe::-webkit-media-controls-panel {
  display: none !important;
}