@import url("buzz-card.css");
@import url("buzz-section.css");
@import url("buzz-table.css");
@import url("buzz-forgot.css");
@import url("buzz-form.css");

:root {
  --primaryColor: #2d8b2d;
  --primaryColorLight: #c7eec7;
  --activeColor: #f5c451;
  --passiveColor: #fbf7f3;
  --headerColor: #f9f9f9;
  --headerColorDark: #f1f1f1;
  --footerColor: #4e5e6a;
  --footerColorDark: #4b5963;
  --blackColor: #333333;
  --blackColorLight: #acacac;
  --whiteColor: #ffffff;
  --dividerColor: #d9d9d933;
  --borderColor: #d9d9d9;
  --dangerColor: #c91307;
  --homeWidth: 87.5rem;
  --contentWidth: 62.5rem;
  --headerHeight: 5rem;
  --bold: 700;
  --semibold: 600;
  --font: 1rem;
  --fontL: 1.25rem;
  --fontXL: 1.5rem;
  --fontXXL: 2rem;
  --fontMD: 0.75rem;

  @media (max-width: 1500px) {
    --homeWidth: 100%;
  }
}

html,
body {
  font-size: 16px;
  scroll-behavior: smooth;
  /* @media (max-width: 1200px) {
    font-size: 14px;
  } */

  @media (max-width: 920px) {
    font-size: 14px;
  }
  @media (max-width: 640px) {
    /* font-size: 12px !important; */
  }
}
body {
  height: 100svh;
  display: flex;
  flex-direction: column;
}

/* * {
  font-size: 1rem !important;
} */

/* width and height */
.w-full {
  width: 100%;
}

.h-80 {
  height: 80px;
}

.font-semibold {
  font-weight: 500;
}

/* BUTTONS */

.imgbtn {
  text-align: right;
  position: absolute;
  right: 16px;
  top: 16px;
}

.imgbtn > button {
  padding: 14px;
  background: rgb(255 255 255 / 75%);
  border-radius: 2px;
}

.primary-button {
  border-color: var(--primaryColorLight) !important;
  background-color: var(--primaryColorLight) !important;
  width: 100%;
  gap: 16px !important;
  text-transform: uppercase;
}
.danger-button {
  border-color: var(--dangerColor) !important;
  background-color: var(--dangerColor) !important;
  color: var(--whiteColor) !important;
  width: 100%;
  gap: 16px !important;
  text-transform: uppercase;
}

.base-button {
  color: var(--blackColor);
  border: 2px solid var(--blackColor);
  border-radius: 2px;
  outline: none;
  padding: 12px;
  font-weight: 600;
  cursor: pointer;
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.base-button > svg > path {
  fill: var(--blackColor);
}
.danger-button > svg > path {
  fill: var(--whiteColor) !important;
}

.base-button > .svg-arrow_right {
  margin-bottom: 2px;
}

.base-button.small-danger-button {
  border-color: var(--dangerColor);
  padding: 0.25rem 0.75rem;
  border-radius: 2px;
}
.base-button.small-danger-button > svg > path {
  fill: var(--blackColor);
}
.base-button.small-danger-button:hover {
  border-color: var(--dangerColor) !important;
  background-color: var(--dangerColor) !important;
  color: var(--whiteColor);
}
.base-button.small-danger-button:hover > svg > path {
  fill: var(--whiteColor);
}

.base-button:hover {
  color: var(--blackColor);
  border-color: var(--primaryColorLight);
  background-color: var(--primaryColorLight);
  outline: none;
  font-weight: 600;
}
.base-button:disabled {
  background-color: var(--whiteColor) !important;
  cursor: auto;
}
.border-button {
  border-color: var(--borderColor);
}

.border-transparent {
  border-color: transparent;
}

button:focus,
button:focus-within {
  outline: none !important;
}

.base-link {
  color: var(--blackColor);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.base-link:hover {
  color: var(--activeColor) !important;
}
.base-link:hover .svg-arrow_right path {
  fill: var(--activeColor) !important;
}

.base-video-container {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
}
.base-video-container > iframe {
  max-width: 560px;
  max-height: 360px;
  width: 560px;
  height: 360px;
}
@media (max-width: 640px) {
  .base-video-container > iframe {
    width: 100%;
    height: 360px;
  }
}
.border-color {
  border-color: var(--borderColor);
}

.base-input {
  outline: none;
  color: var(--blackColor);

  border: 1px solid var(--blackColorLight);
  border-radius: 2px;
  padding: 10px 12px;
  width: 100%;
}

.base-input:focus,
.base-input:focus-within {
  outline: none !important;

  border-color: var(--blackColor);
}

.svg-arrow_right {
  display: inline;
}
.contents {
  display: contents !important;
}

.w-auto {
  width: auto !important;
}
.w-100 {
  width: 100% !important;
}
.w-50 {
  width: 50% !important;
}
.w-33 {
  width: 33% !important;
}

.w-66 {
  width: 66% !important;
}
.ml-auto {
  margin-left: auto;
}
.p-4 {
  padding: 1rem !important;
}
.p-3 {
  padding: 0.75rem !important;
}
.my-2 {
  margin: 0.5rem 0;
}
.my-8 {
  margin: 2rem 0;
}
.my-16 {
  margin: 4rem 0;
}

.gap-4 {
  gap: 1rem;
}
.gap-1 {
  gap: 0.25rem;
}
.mr-auto {
  margin-right: auto;
}
.min-h-40vh {
  min-height: 40vh;
}

.text-nowrap {
  text-wrap: nowrap;
}
.w-max {
  width: max-content;
}

.cursor-pointer {
  cursor: pointer;
}

.custom-scroll {
}
*::-webkit-scrollbar {
  width: 5px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background-color: #e5e7eb;
}

*::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 6px #6b7280;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
  background-color: #e5e7eb;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 6px #6b7280;
}