@font-face {
  font-family: 'Deacon-Bold';
  src: url('../fonts/Deacon-Bold.otf') format("truetype");
}

@font-face {
  font-family: 'Deacon-Medium';
  src: url('../fonts/Deacon-Medium.otf') format("truetype");
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-VariableFont.ttf') format("truetype");
}

:root {
  --main-color: #F78B27;
  --sec-color: #4C5B73;
  --hover-orange: #fef2e7;
  --hover-color: #D9E0E8;
  --bg-color: white;
  --box-shadow: 0 0 0 2px #F0F0F0;
  --top-menu-bg: white;
  --ag-grid-header: #D0D0D1;
  --border-color: #D6D6D6;
  --divider-size-xss: calc(0.0312rem * var(--mantine-scale));
  --snapshot-minichart-up: #00CC66;
  --snapshot-minichart-down: #ED6A5A;
  --snapshot-card-value-color: #4C5B73;
}

html * {
  font-family: Inter;
}

body {
  background-color: var(--bg-color);
}

.page-heading {
  margin-top: 10px;
  font-family: Inter !important;

}

.updates-modal-section-title {
  font-weight: medium;
  font-size: 24px;
  margin-top: 0.5em;
  font-family: Deacon-Medium !important;

}

.center {
  align-items: center;
  justify-content: center;
  text-align: center;
}

[id*="brand_img_modal"] .form-check {
  display: flex;
  align-items: center;
  margin-left: 5px;
}

.container-main {
  min-width: 100%;
}

.mantine-MultiSelect-inputField {
  width: 30px;
  min-width: auto;

  &:not(:only-child)::placeholder {
    color: transparent;
  }
}

.mantine-MultiSelect-pill {
  border: solid 1px var(--main-color);
  background-color: transparent;
}

.mantine-MultiSelect-input {
  background-color: #F2F5F7;
  padding-right: 0px !important;
  min-height: 32px !important;
}

.mantine-MultiSelect-searchInput {
  line-height: 32px !important;
}

.mantine-MultiSelect-values {
  min-height: 32px !important;
}

.mantine-MultiSelect-dropdown,
.mantine-Select-dropdown,
.mantine-Popover-dropdown {
  z-index: 10000 !important;
}

.mantine-Select-option,
.mantine-Select-dropdown .mantine-Select-item {
  color: var(--side-menu-color);
}

/* Used for dropdown options hover color */
.mantine-MultiSelect-option:hover,
.mantine-Select-option:hover,
.mantine-Select-dropdown .mantine-Select-item:hover,
.mantine-MultiSelect-dropdown .mantine-MultiSelect-item:hover,
.mantine-Menu-dropdown .mantine-Menu-item:hover {
  background-color: var(--page-bg);
}

.mantine-Input-section svg,
.mantine-Select-section svg,
.mantine-ActionIcon-icon svg {
  color: var(--page-text-secondary) !important;
}

/* Used for dropdown border color */
.mantine-Select-input,
.mantine-TagsInput-input,
.mantine-DatePickerInput-input,
.mantine-MonthPickerInput-input {
  background-color: #ffffff;
  border: none;
  border-radius: 12px;
  color: var(--side-menu-color) !important;
}

[data-mantine-color-scheme="dark"] .mantine-Input-input,
[data-mantine-color-scheme="dark"] .mantine-Select-input,
[data-mantine-color-scheme="dark"] .mantine-TagsInput-input,
[data-mantine-color-scheme="dark"] .mantine-DatePickerInput-input,
[data-mantine-color-scheme="dark"] .mantine-MonthPickerInput-input,
[data-mantine-color-scheme="dark"] .mantine-DatePickerInput-section svg,
[data-mantine-color-scheme="dark"] .mantine-MonthPickerInput-section svg {
  background-color: #121821 !important;
  color: #C8CED7 !important;
}

[data-mantine-color-scheme="dark"] .mantine-TimeInput-input,
#\/authorization_reporting_cadence_date {
  background-color: var(--page-bg) !important;
  color: var(--cadence-date-color) !important;
}

.mantine-TimeInput-input,
.mantine-DateInput-input,
.mantine-DateTimePicker-input,
.mantine-MonthInput-input,
.mantine-MonthTimeInput-input {
  border-radius: 10px;
  border: unset;
  background-color: var(--page-bg);
  color: var(--cadence-date-color) !important;
}

.dmc-tabs-dropdown-btn {
  color: var(--page-text-disabled);
  font-size: 1.125rem;
  font-weight: 500;
}

/* Used for input, dropdown focus border color */
.input:focus,
.mantine-Select-input:focus,
.mantine-MultiSelect-dropdown:focus,
textarea:focus-visible {
  box-shadow: 0 0 0 0.1rem var(--side-menu-color);
  outline: none !important;
}


.mantine-DatePickerInput-input,
.mantine-DatePickerInput-section svg,
.mantine-MonthPickerInput-input,
.mantine-MonthPickerInput-section svg {
  color: var(--main-color);
}

/* Used for multiselect selected values */
.mantine-MultiSelect-defaultValue,
.mantine-MultiSelect-value {
  background-color: transparent;
  color: black;
  border: 1px solid var(--main-color);
  border-radius: 1.5rem;
}

.mantine-MultiSelect-input:focus-within {
  border-color: var(--main-color) !important;
}

/* Used for multiselect input */
.mantine-MultiSelect-searchInput {
  min-width: 30px;
}

/* Used for multiselect de-select button */
.mantine-ActionIcon-root {
  color: var(--action-icon-color);
}

/* Side menu divider color */
.mantine-Divider-label::before,
.mantine-Divider-label::after {
  border-top: 1px solid var(--side-menu-color);
}

.mantine-Divider-label::before {
  margin-right: 2px;
}

.mantine-Divider-label::after {
  margin-left: 2px;
}

.mantine-LoadingOverlay-root svg {
  fill: var(--main-color) !important;
  width: 56px;
}

.small .mantine-LoadingOverlay-root svg {
  width: 30px;
}

.group-user-profile {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.mantine-MultiSelect-wrapper {
  overflow: auto !important;
}

.mantine-Menu-item.active {
  border: solid --var(main-color);
}

.mantine-Menu-item.active .mantine-Menu-itemLabel {
  color: --var(main-color);
  font-weight: 600;
}

.custom-tooltip {
  padding: 5px;
  border-radius: 10px;
  color: white;
  background-color: black;
  max-width: 400px;
}

.custom-tooltip p {
  margin: 5px;
  font-weight: bold;
  font-size: 14px;
  line-height: 1.5rem;
}

.custom-tooltip.amc {
  max-width: 800px;
}

.custom-tooltip.multiline {
  transform: translateZ(0);
}

::-webkit-scrollbar {
  width: 1px;
  /* Adjust this for vertical scrollbars */
}

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